Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-09-28 20:26:31 +00:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 11 additions and 3 deletions
Show Stats 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,
rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view"
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 {getTheme} from "./themes";
@ -47,6 +47,7 @@ export function editorExtensions(parentEl) {
keymap.of([
...defaultKeymap,
...historyKeymap,
indentWithTab,
]),
EditorView.lineWrapping,
];

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

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

10
resources/sass/_codemirror.scss
View File

@ -4,13 +4,19 @@
.cm-editor {
font-size: 12px;
border: 1px solid;
@include lightDark(border-color, #ddd, #444);
border: 1px solid #ddd;
margin-bottom: $-l;
line-height: 1.4;
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
*/