Perms: Removed entity perm regen on general update

[bookstack] / resources / js / wysiwyg / ui / framework / manager.ts

diff --git a/resources/js/wysiwyg/ui/framework/manager.ts b/resources/js/wysiwyg/ui/framework/manager.ts
index cfa94e8aeecf03348225d967787f79a38445e670..2d15b341bdba6ae9a39e9236c77e5a6742854c4f 100644 (file)
--- a/resources/js/wysiwyg/ui/framework/manager.ts
+++ b/resources/js/wysiwyg/ui/framework/manager.ts
@@ -1,16 +1,19 @@
 import {EditorFormModal, EditorFormModalDefinition} from "./modals";
 import {EditorContainerUiElement, EditorUiContext, EditorUiElement, EditorUiStateUpdate} from "./core";
 import {EditorDecorator, EditorDecoratorAdapter} from "./decorator";
-import {$getSelection, BaseSelection, COMMAND_PRIORITY_LOW, LexicalEditor, SELECTION_CHANGE_COMMAND} from "lexical";
+import {$getSelection, BaseSelection, LexicalEditor} from "lexical";
 import {DecoratorListener} from "lexical/LexicalEditor";
 import type {NodeKey} from "lexical/LexicalNode";
 import {EditorContextToolbar, EditorContextToolbarDefinition} from "./toolbars";
+import {getLastSelection, setLastSelection} from "../../utils/selection";
+import {DropDownManager} from "./helpers/dropdowns";
 
 export type SelectionChangeHandler = (selection: BaseSelection|null) => void;
 
 export class EditorUIManager {
 
     protected modalDefinitionsByKey: Record<string, EditorFormModalDefinition> = {};
+    protected activeModalsByKey: Record<string, EditorFormModal> = {};
     protected decoratorConstructorsByType: Record<string, typeof EditorDecorator> = {};
     protected decoratorInstancesByNodeKey: Record<string, EditorDecorator> = {};
     protected context: EditorUiContext|null = null;
@@ -19,8 +22,11 @@ export class EditorUIManager {
     protected activeContextToolbars: EditorContextToolbar[] = [];
     protected selectionChangeHandlers: Set<SelectionChangeHandler> = new Set();
 
+    public dropdowns: DropDownManager = new DropDownManager();
+
     setContext(context: EditorUiContext) {
         this.context = context;
+        this.setupEventListeners(context);
         this.setupEditor(context.editor);
     }
 
@@ -49,12 +55,24 @@ export class EditorUIManager {
             throw new Error(`Attempted to show modal of key [${key}] but no modal registered for that key`);
         }
 
-        const modal = new EditorFormModal(modalDefinition);
+        const modal = new EditorFormModal(modalDefinition, key);
         modal.setContext(this.getContext());
 
         return modal;
     }
 
+    setModalActive(key: string, modal: EditorFormModal): void {
+        this.activeModalsByKey[key] = modal;
+    }
+
+    setModalInactive(key: string): void {
+        delete this.activeModalsByKey[key];
+    }
+
+    getActiveModal(key: string): EditorFormModal|null {
+        return this.activeModalsByKey[key];
+    }
+
     registerDecoratorType(type: string, decorator: typeof EditorDecorator) {
         this.decoratorConstructorsByType[type] = decorator;
     }
@@ -93,9 +111,8 @@ export class EditorUIManager {
         this.contextToolbarDefinitionsByKey[key] = definition;
     }
 
-    protected triggerStateUpdate(update: EditorUiStateUpdate): void {
-        const context = this.getContext();
-        context.lastSelection = update.selection;
+    triggerStateUpdate(update: EditorUiStateUpdate): void {
+        setLastSelection(update.editor, update.selection);
         this.toolbar?.updateState(update);
         this.updateContextToolbars(update);
         for (const toolbar of this.activeContextToolbars) {
@@ -105,9 +122,21 @@ export class EditorUIManager {
     }
 
     triggerStateRefresh(): void {
-        this.triggerStateUpdate({
-            editor: this.getContext().editor,
-            selection: this.getContext().lastSelection,
+        const editor = this.getContext().editor;
+        const update = {
+            editor,
+            selection: getLastSelection(editor),
+        };
+
+        this.triggerStateUpdate(update);
+        this.updateContextToolbars(update);
+    }
+
+    triggerFutureStateRefresh(): void {
+        requestAnimationFrame(() => {
+            this.getContext().editor.getEditorState().read(() => {
+                this.triggerStateRefresh();
+            });
         });
     }
 
@@ -129,10 +158,23 @@ export class EditorUIManager {
         this.selectionChangeHandlers.delete(handler);
     }
 
+    triggerLayoutUpdate(): void {
+        window.requestAnimationFrame(() => {
+            for (const toolbar of this.activeContextToolbars) {
+                toolbar.updatePosition();
+            }
+        });
+    }
+
+    getDefaultDirection(): 'rtl' | 'ltr' {
+        return this.getContext().options.textDirection === 'rtl' ? 'rtl' : 'ltr';
+    }
+
     protected updateContextToolbars(update: EditorUiStateUpdate): void {
-        for (const toolbar of this.activeContextToolbars) {
-            toolbar.empty();
-            toolbar.getDOMElement().remove();
+        for (let i = this.activeContextToolbars.length - 1; i >= 0; i--) {
+            const toolbar = this.activeContextToolbars[i];
+            toolbar.destroy();
+            this.activeContextToolbars.splice(i, 1);
         }
 
         const node = (update.selection?.getNodes() || [])[0] || null;
@@ -161,25 +203,16 @@ export class EditorUIManager {
         }
 
         for (const [target, contents] of contentByTarget) {
-            const toolbar = new EditorContextToolbar(contents);
+            const toolbar = new EditorContextToolbar(target, contents);
             toolbar.setContext(this.getContext());
             this.activeContextToolbars.push(toolbar);
 
             this.getContext().containerDOM.append(toolbar.getDOMElement());
-            toolbar.attachTo(target);
+            toolbar.updatePosition();
         }
     }
 
     protected setupEditor(editor: LexicalEditor) {
-        // Update button states on editor selection change
-        editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
-            this.triggerStateUpdate({
-                editor: editor,
-                selection: $getSelection(),
-            });
-            return false;
-        }, COMMAND_PRIORITY_LOW);
-
         // Register our DOM decorate listener with the editor
         const domDecorateListener: DecoratorListener<EditorDecoratorAdapter> = (decorators: Record<NodeKey, EditorDecoratorAdapter>) => {
             editor.getEditorState().read(() => {
@@ -201,5 +234,28 @@ export class EditorUIManager {
             });
         }
         editor.registerDecoratorListener(domDecorateListener);
+
+        // Watch for changes to update local state
+        editor.registerUpdateListener(({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();
+                    // console.log('manager::selection', selection);
+                    this.triggerStateUpdate({
+                        editor, selection,
+                    });
+                });
+            }
+        });
+    }
+
+    protected setupEventListeners(context: EditorUiContext) {
+        const layoutUpdate = this.triggerLayoutUpdate.bind(this);
+        window.addEventListener('scroll', layoutUpdate, {capture: true, passive: true});
+        window.addEventListener('resize', layoutUpdate, {passive: true});
     }
 }
\ No newline at end of file