github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-25 08:53:55 +08:00
Code Issues Actions 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
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
4 changed files with 23 additions and 6 deletions
Show Stats 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 {viewerExtensions, editorExtensions} from './setups';
@ -55,6 +55,11 @@ function highlightElem(elem) {
const wrapper = document.createElement('div');
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', {
parent: wrapper,
doc: content,

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

@ -205,6 +205,11 @@ function register(editor) {
contenteditable: 'false',
});
const direction = el.attr('dir');
if (direction) {
wrapper.attr('dir', direction);
}
const spans = el.getAll('span');
for (const span of spans) {
span.unwrap();
@ -222,6 +227,13 @@ function register(editor) {
editor.serializer.addNodeFilter('code-block', 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();
}
});

4
resources/sass/_codemirror.scss
View File

@ -34,10 +34,10 @@
align-items: center;
justify-content: center;
top: -1px;
right: -1px;
inset-inline-end: -1px;
background-color: #EEE;
border: 1px solid #DDD;
border-radius: 0 4px 0 0;
border-start-end-radius: 4px;
@include lightDark(background-color, #eee, #333);
@include lightDark(border-color, #ddd, #444);
@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(border-color, #DDD, #111);
border-radius: 4px;
padding-left: 26px;
padding-inline-start: 26px;
position: relative;
padding-top: 3px;
padding-bottom: 3px;
@ -192,10 +192,10 @@ pre {
position: absolute;
top: 0;
width: 22.4px;
left: 0;
inset-inline-start: 0;
height: 100%;
@include lightDark(background-color, #f5f5f5, #313335);
@include lightDark(border-right, 1px solid #DDD, none);
@include lightDark(border-inline-end, 1px solid #DDD, none);
}
}