X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/bed2c29a33f6e109ce1dd2ef76fc9fbd7a217080..refs/pull/5280/head:/resources/js/wysiwyg/index.ts

diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index 64b59492b..c4403773b 100644
--- a/resources/js/wysiwyg/index.ts
+++ b/resources/js/wysiwyg/index.ts
@@ -1,4 +1,4 @@
-import {createEditor, CreateEditorArgs, LexicalEditor} from 'lexical';
+import {$getSelection, createEditor, CreateEditorArgs, isCurrentlyReadOnlyMode, LexicalEditor} from 'lexical';
 import {createEmptyHistoryState, registerHistory} from '@lexical/history';
 import {registerRichText} from '@lexical/rich-text';
 import {mergeRegister} from '@lexical/utils';
@@ -13,7 +13,8 @@ import {registerTaskListHandler} from "./ui/framework/helpers/task-list-handler"
 import {registerTableSelectionHandler} from "./ui/framework/helpers/table-selection-handler";
 import {el} from "./utils/dom";
 import {registerShortcuts} from "./services/shortcuts";
-import {registerNodeResizer} from "./ui/framework/helpers/image-resizer";
+import {registerNodeResizer} from "./ui/framework/helpers/node-resizer";
+import {registerKeyboardHandling} from "./services/keyboard-handling";
 
 export function createPageEditorInstance(container: HTMLElement, htmlContent: string, options: Record<string, any> = {}): SimpleWysiwygEditorInterface {
     const config: CreateEditorArgs = {
@@ -41,8 +42,13 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
     const editWrap = el('div', {
         class: 'editor-content-wrap',
     }, [editArea]);
+
     container.append(editWrap);
     container.classList.add('editor-container');
+    container.setAttribute('dir', options.textDirection);
+    if (options.darkMode) {
+        container.classList.add('editor-dark');
+    }
 
     const editor = createEditor(config);
     editor.setRootElement(editArea);
@@ -52,6 +58,7 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
         registerRichText(editor),
         registerHistory(editor, createEmptyHistoryState(), 300),
         registerShortcuts(context),
+        registerKeyboardHandling(context),
         registerTableResizer(editor, editWrap),
         registerTableSelectionHandler(editor),
         registerTaskListHandler(editor, editArea),
@@ -69,7 +76,19 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
     }
 
     let changeFromLoading = true;
-    editor.registerUpdateListener(({editorState, dirtyElements, dirtyLeaves}) => {
+    editor.registerUpdateListener(({dirtyElements, dirtyLeaves, editorState, prevEditorState}) => {
+        // Watch for selection changes to update the UI on change
+        // Used to be done via SELECTION_CHANGE_COMMAND but this would not always emit
+        // for all selection changes, so this proved more reliable.
+        const selectionChange = !(prevEditorState._selection?.is(editorState._selection) || false);
+        if (selectionChange) {
+            editor.update(() => {
+                const selection = $getSelection();
+                context.manager.triggerStateUpdate({
+                    editor, selection,
+                });
+            });
+        }
 
         // Emit change event to component system (for draft detection) on actual user content change
         if (dirtyElements.size > 0 || dirtyLeaves.size > 0) {