respective book and chapter structure added.

[bookstack] / resources / js / code / setups.js

diff --git a/resources/js/code/setups.js b/resources/js/code/setups.js
index 19f8c6c2e42faf27458d42c4ebf8f0dbd80f6945..270d58274347d27a18475a3f97c56c43719e573e 100644 (file)
--- a/resources/js/code/setups.js
+++ b/resources/js/code/setups.js
@@ -1,22 +1,64 @@
+import {
+    EditorView, keymap, drawSelection, highlightActiveLine, dropCursor,
+    rectangularSelection, lineNumbers, highlightActiveLineGutter,
+} from '@codemirror/view';
+import {bracketMatching} from '@codemirror/language';
+import {
+    defaultKeymap, history, historyKeymap, indentWithTab,
+} from '@codemirror/commands';
+import {Compartment, EditorState} from '@codemirror/state';
+import {getTheme} from './themes';

 
 

-import {EditorView, keymap, drawSelection, highlightActiveLine, dropCursor,
-    rectangularSelection, lineNumbers, highlightActiveLineGutter} from "@codemirror/view"
-import {syntaxHighlighting, bracketMatching} from "@codemirror/language"
-import {defaultKeymap, history, historyKeymap} from "@codemirror/commands"
-import {EditorState} from "@codemirror/state"
-
-import {defaultLight} from "./themes";
-
-export function viewer() {
+/**
+ * @param {Element} parentEl
+ * @return {(Extension[]|{extension: Extension}|readonly Extension[])[]}
+ */
+function common(parentEl) {

     return [
     return [

+        getTheme(parentEl),

         lineNumbers(),
         lineNumbers(),

-        highlightActiveLineGutter(),

         drawSelection(),
         dropCursor(),
         drawSelection(),
         dropCursor(),

-        // syntaxHighlighting(defaultLight, {fallback: false}),

         bracketMatching(),
         rectangularSelection(),
         bracketMatching(),
         rectangularSelection(),

-        highlightActiveLine(),
+    ];
+}
+
+/**
+ * @returns {({extension: Extension}|readonly Extension[])[]}
+ */
+function getDynamicActiveLineHighlighter() {
+    const highlightingCompartment = new Compartment();
+    const domEvents = {
+        focus(event, view) {
+            view.dispatch({
+                effects: highlightingCompartment.reconfigure([
+                    highlightActiveLineGutter(),
+                    highlightActiveLine(),
+                ]),
+            });
+        },
+        blur(event, view) {
+            view.dispatch({
+                effects: highlightingCompartment.reconfigure([]),
+            });
+        },
+    };
+
+    return [
+        highlightingCompartment.of([]),
+        EditorView.domEventHandlers(domEvents),
+    ];
+}
+
+/**
+ * @param {Element} parentEl
+ * @return {*[]}
+ */
+export function viewerExtensions(parentEl) {
+    return [
+        ...common(parentEl),
+        getDynamicActiveLineHighlighter(),

         keymap.of([
             ...defaultKeymap,
         ]),
         keymap.of([
             ...defaultKeymap,
         ]),


@@ -24,21 +66,21 @@ export function viewer() {
     ];
 }
 
     ];
 }
 

-export function editor(language) {
+/**
+ * @param {Element} parentEl
+ * @return {*[]}
+ */
+export function editorExtensions(parentEl) {

     return [
     return [

-        lineNumbers(),
+        ...common(parentEl),

         highlightActiveLineGutter(),
         highlightActiveLineGutter(),

-        history(),
-        drawSelection(),
-        dropCursor(),
-        syntaxHighlighting(defaultLight, {fallback: true}),
-        bracketMatching(),
-        rectangularSelection(),

         highlightActiveLine(),
         highlightActiveLine(),

+        history(),

         keymap.of([
             ...defaultKeymap,
             ...historyKeymap,
         keymap.of([
             ...defaultKeymap,
             ...historyKeymap,

+            indentWithTab,

         ]),
         EditorView.lineWrapping,
     ];
         ]),
         EditorView.lineWrapping,
     ];

-}
\ No newline at end of file
+}