]> BookStack Code Mirror - bookstack/commitdiff
projects / bookstack / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side (parent: 900571a)
CM6: Added tabbing, fixed dark mode border in WYSIWYG
authorDan Brown <redacted>
Tue, 18 Apr 2023 12:41:28 +0000 (13:41 +0100)
committerDan Brown <redacted>
Tue, 18 Apr 2023 12:43:59 +0000 (13:43 +0100)
resources/js/code/setups.js patch | blob | history
resources/js/wysiwyg/plugin-codeeditor.js patch | blob | history
resources/sass/_codemirror.scss patch | blob | history

diff --git a/resources/js/code/setups.js b/resources/js/code/setups.js
index 46041a0a290df1bedefc06a14d25bf071e45dc63..72700c9b6c56521f9a535e1e953296656929bc2e 100644 (file)
--- 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 {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";
 
 import {EditorState} from "@codemirror/state"
 import {getTheme} from "./themes";
 
@@ -47,6 +47,7 @@ export function editorExtensions(parentEl) {
         keymap.of([
             ...defaultKeymap,
             ...historyKeymap,
         keymap.of([
             ...defaultKeymap,
             ...historyKeymap,
+            indentWithTab,
         ]),
         EditorView.lineWrapping,
     ];
         ]),
         EditorView.lineWrapping,
     ];
diff --git a/resources/js/wysiwyg/plugin-codeeditor.js b/resources/js/wysiwyg/plugin-codeeditor.js
index 9a7b3fe655c8d9fed4aa90ea24014b794f04d626..9e681486dadf96e7bcc154b561d630d48641d77f 100644 (file)
--- 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.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);
         }
 
             this.shadowRoot.append(...copiedStyles, cmContainer);
         }
diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss
index 910b216e4a45a7a18d095d1bd5cbdcac11bdf1b7..de82d4989715d75695e31c48b07a2134336f9356 100644 (file)
--- a/resources/sass/_codemirror.scss
+++ b/resources/sass/_codemirror.scss
@@ -4,13 +4,19 @@
 
 .cm-editor {
   font-size: 12px;
 
 .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;
 }
 
   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
  */
 /**
  * Custom Copy Button
  */
The core source code for the BookStack project.