github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-07 03:14:33 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

WYSIWYG: Updated code handling to respect direction

Browse Source 
Specifically supports "dir" attribute being on top level "pre" element,
and handles application/switching of this within the editor.

For #4809
This commit is contained in:
Dan Brown
2024-02-18 17:55:56 +00:00
parent 9ff9b9c805
commit 999d41a7f5
4 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
resources/js/code/index.mjs
View File

@ -1,4 +1,4 @@
import {EditorView, keymap} from '@codemirror/view'; import {EditorView, keymap, Direction} from '@codemirror/view';
import {copyTextToClipboard} from '../services/clipboard'; import {copyTextToClipboard} from '../services/clipboard';
import {viewerExtensions, editorExtensions} from './setups'; import {viewerExtensions, editorExtensions} from './setups';
@ -55,6 +55,11 @@ function highlightElem(elem) {
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
elem.parentNode.insertBefore(wrapper, elem); elem.parentNode.insertBefore(wrapper, elem);
const direction = innerCodeElem.getAttribute('dir') || elem.getAttribute('dir') || '';
if (direction) {
wrapper.setAttribute('dir', direction);
}
const ev = createView('content-code-block', { const ev = createView('content-code-block', {
parent: wrapper, parent: wrapper,
doc: content, doc: content,

12
resources/js/wysiwyg/plugin-codeeditor.js
View File

@ -205,6 +205,11 @@ function register(editor) {
contenteditable: 'false', contenteditable: 'false',
}); });
const direction = el.attr('dir');
if (direction) {
wrapper.attr('dir', direction);
}
const spans = el.getAll('span'); const spans = el.getAll('span');
for (const span of spans) { for (const span of spans) {
span.unwrap(); span.unwrap();
@ -222,6 +227,13 @@ function register(editor) {
editor.serializer.addNodeFilter('code-block', elms => { editor.serializer.addNodeFilter('code-block', elms => {
for (const el of elms) { for (const el of elms) {
const direction = el.attr('dir');
if (direction && el.firstChild) {
el.firstChild.attr('dir', direction);
} else if (el.firstChild) {
el.firstChild.attr('dir', null);
}
el.unwrap(); el.unwrap();
} }
}); });

4
resources/sass/_codemirror.scss
View File

@ -34,10 +34,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
top: -1px; top: -1px;
right: -1px; inset-inline-end: -1px;
background-color: #EEE; background-color: #EEE;
border: 1px solid #DDD; border: 1px solid #DDD;
border-radius: 0 4px 0 0; border-start-end-radius: 4px;
@include lightDark(background-color, #eee, #333); @include lightDark(background-color, #eee, #333);
@include lightDark(border-color, #ddd, #444); @include lightDark(border-color, #ddd, #444);
@include lightDark(color, #444, #888); @include lightDark(color, #444, #888);

6
resources/sass/_text.scss
View File

@ -182,7 +182,7 @@ pre {
@include lightDark(background-color, #FFF, #2B2B2B); @include lightDark(background-color, #FFF, #2B2B2B);
@include lightDark(border-color, #DDD, #111); @include lightDark(border-color, #DDD, #111);
border-radius: 4px; border-radius: 4px;
padding-left: 26px; padding-inline-start: 26px;
position: relative; position: relative;
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
@ -192,10 +192,10 @@ pre {
position: absolute; position: absolute;
top: 0; top: 0;
width: 22.4px; width: 22.4px;
left: 0; inset-inline-start: 0;
height: 100%; height: 100%;
@include lightDark(background-color, #f5f5f5, #313335); @include lightDark(background-color, #f5f5f5, #313335);
@include lightDark(border-right, 1px solid #DDD, none); @include lightDark(border-inline-end, 1px solid #DDD, none);
} }
} }