From 94f464cd14a8f2a54a8fada9cb777c0e6f28fa93 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Tue, 18 Apr 2023 13:41:28 +0100 Subject: [PATCH] CM6: Added tabbing, fixed dark mode border in WYSIWYG --- resources/js/code/setups.js | 3 ++- resources/js/wysiwyg/plugin-codeeditor.js | 1 + resources/sass/_codemirror.scss | 10 ++++++++-- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/resources/js/code/setups.js b/resources/js/code/setups.js index 46041a0a2..72700c9b6 100644 --- a/resources/js/code/setups.js +++ b/resources/js/code/setups.js @@ -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, ]; diff --git a/resources/js/wysiwyg/plugin-codeeditor.js b/resources/js/wysiwyg/plugin-codeeditor.js index 9a7b3fe65..9e681486d 100644 --- a/resources/js/wysiwyg/plugin-codeeditor.js +++ b/resources/js/wysiwyg/plugin-codeeditor.js @@ -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); } diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss index 910b216e4..de82d4989 100644 --- a/resources/sass/_codemirror.scss +++ b/resources/sass/_codemirror.scss @@ -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 +// node are not applies so instead we have the class on the parent element. +.dark-mode .cm-editor { + border-color: #444; +} + /** * Custom Copy Button */