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";
keymap.of([
...defaultKeymap,
...historyKeymap,
+ indentWithTab,
]),
EditorView.lineWrapping,
];
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);
}
.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
*/
projects / bookstack / commitdiff