CM6: Added tabbing, fixed dark mode border in WYSIWYG

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

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,
];

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);
}

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
*/