X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/94f464cd14a8f2a54a8fada9cb777c0e6f28fa93..refs/heads/development:/resources/js/code/setups.js

diff --git a/resources/js/code/setups.js b/resources/js/code/setups.js
index 72700c9b6..270d58274 100644
--- a/resources/js/code/setups.js
+++ b/resources/js/code/setups.js
@@ -1,9 +1,13 @@
-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 {EditorState} from "@codemirror/state"
-import {getTheme} from "./themes";
+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';
 
 /**
  * @param {Element} parentEl
@@ -13,12 +17,37 @@ function common(parentEl) {
     return [
         getTheme(parentEl),
         lineNumbers(),
-        highlightActiveLineGutter(),
         drawSelection(),
         dropCursor(),
         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),
     ];
 }
 
@@ -29,6 +58,7 @@ function common(parentEl) {
 export function viewerExtensions(parentEl) {
     return [
         ...common(parentEl),
+        getDynamicActiveLineHighlighter(),
         keymap.of([
             ...defaultKeymap,
         ]),
@@ -43,6 +73,8 @@ export function viewerExtensions(parentEl) {
 export function editorExtensions(parentEl) {
     return [
         ...common(parentEl),
+        highlightActiveLineGutter(),
+        highlightActiveLine(),
         history(),
         keymap.of([
             ...defaultKeymap,
@@ -51,4 +83,4 @@ export function editorExtensions(parentEl) {
         ]),
         EditorView.lineWrapping,
     ];
-}
\ No newline at end of file
+}