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

CM6: Added tabbing, fixed dark mode border in WYSIWYG

Browse Source
This commit is contained in:
Dan Brown
2023-04-18 13:41:28 +01:00
parent 900571ac9c
commit 94f464cd14
3 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
resources/js/code/setups.js
View File

@ -1,7 +1,7 @@
import {EditorView, keymap, drawSelection, highlightActiveLine, dropCursor, import {EditorView, keymap, drawSelection, highlightActiveLine, dropCursor,
rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view" rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view"
import {bracketMatching} from "@codemirror/language" import {bracketMatching} from "@codemirror/language"
import {defaultKeymap, history, historyKeymap} from "@codemirror/commands" import {defaultKeymap, history, historyKeymap, indentWithTab} from "@codemirror/commands"
import {EditorState} from "@codemirror/state" import {EditorState} from "@codemirror/state"
import {getTheme} from "./themes"; import {getTheme} from "./themes";
@ -47,6 +47,7 @@ export function editorExtensions(parentEl) {
keymap.of([ keymap.of([
...defaultKeymap, ...defaultKeymap,
...historyKeymap, ...historyKeymap,
indentWithTab,
]), ]),
EditorView.lineWrapping, EditorView.lineWrapping,
]; ];

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

@ -53,6 +53,7 @@ function defineCodeBlockCustomElement(editor) {
cmContainer.style.pointerEvents = 'none'; cmContainer.style.pointerEvents = 'none';
cmContainer.contentEditable = 'false'; cmContainer.contentEditable = 'false';
cmContainer.classList.add('CodeMirrorContainer'); cmContainer.classList.add('CodeMirrorContainer');
cmContainer.classList.toggle('dark-mode', document.documentElement.classList.contains('dark-mode'));
this.shadowRoot.append(...copiedStyles, cmContainer); this.shadowRoot.append(...copiedStyles, cmContainer);
} }

10
resources/sass/_codemirror.scss
View File

@ -4,13 +4,19 @@
.cm-editor { .cm-editor {
font-size: 12px; font-size: 12px;
border: 1px solid; border: 1px solid #ddd;
@include lightDark(border-color, #ddd, #444);
margin-bottom: $-l; margin-bottom: $-l;
line-height: 1.4; line-height: 1.4;
border-radius: 4px; border-radius: 4px;
} }
// Manual dark-mode definition so that it applies to code blocks within the shadow
// dom which are used within the WYSIWYG editor, as the .dark-mode on the parent
// <html> node are not applies so instead we have the class on the parent element.
.dark-mode .cm-editor {
border-color: #444;
}
/** /**
* Custom Copy Button * Custom Copy Button
*/ */