Lexical: Updated dropdown handling to match tinymce behaviour

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

diff --git a/resources/js/wysiwyg/ui/framework/buttons.ts b/resources/js/wysiwyg/ui/framework/buttons.ts
index f74201ff74cdedd1fb106e9ca380735e12fccb7d..0e1cab0f569a7d64a96c7b18669dd6985ae8c514 100644 (file)
--- a/resources/js/wysiwyg/ui/framework/buttons.ts
+++ b/resources/js/wysiwyg/ui/framework/buttons.ts
@@ -1,15 +1,23 @@
 import {BaseSelection} from "lexical";
 import {EditorUiContext, EditorUiElement, EditorUiStateUpdate} from "./core";
-import {el} from "../../helpers";
+
+import {el} from "../../utils/dom";
 
 export interface EditorBasicButtonDefinition {
     label: string;
     icon?: string|undefined;
+    format?: 'small' | 'long';
 }
 
 export interface EditorButtonDefinition extends EditorBasicButtonDefinition {
-    action: (context: EditorUiContext, button: EditorButton) => void;
+    /**
+     * The action to perform when the button is used.
+     * This can return false to indicate that the completion of the action should
+     * NOT be communicated to parent UI elements, which is what occurs by default.
+     */
+    action: (context: EditorUiContext, button: EditorButton) => void|false;
     isActive: (selection: BaseSelection|null, context: EditorUiContext) => boolean;
+    isDisabled?: (selection: BaseSelection|null, context: EditorUiContext) => boolean;
     setup?: (context: EditorUiContext, button: EditorButton) => void;
 }
 
@@ -47,20 +55,27 @@ export class EditorButton extends EditorUiElement {
     }
 
     protected buildDOM(): HTMLButtonElement {
-
         const label = this.getLabel();
-        let child: string|HTMLElement = label;
-        if (this.definition.icon) {
-            child = el('span', {class: 'editor-button-icon'});
-            child.innerHTML = this.definition.icon;
+        const format = this.definition.format || 'small';
+        const children: (string|HTMLElement)[] = [];
+
+        if (this.definition.icon || format === 'long') {
+            const icon = el('div', {class: 'editor-button-icon'});
+            icon.innerHTML = this.definition.icon || '';
+            children.push(icon);
+        }
+
+        if (!this.definition.icon ||format === 'long') {
+            const text = el('div', {class: 'editor-button-text'}, [label]);
+            children.push(text);
         }
 
         const button = el('button', {
             type: 'button',
-            class: 'editor-button',
+            class: `editor-button editor-button-${format}`,
             title: this.definition.icon ? label : null,
             disabled: this.disabled ? 'true' : null,
-        }, [child]) as HTMLButtonElement;
+        }, children) as HTMLButtonElement;
 
         button.addEventListener('click', this.onClick.bind(this));
 
@@ -68,14 +83,24 @@ export class EditorButton extends EditorUiElement {
     }
 
     protected onClick() {
-        this.definition.action(this.getContext(), this);
+        const result = this.definition.action(this.getContext(), this);
+        if (result !== false) {
+            this.emitEvent('button-action');
+        }
     }
 
-    updateActiveState(selection: BaseSelection|null) {
+    protected updateActiveState(selection: BaseSelection|null) {
         const isActive = this.definition.isActive(selection, this.getContext());
         this.setActiveState(isActive);
     }
 
+    protected updateDisabledState(selection: BaseSelection|null) {
+        if (this.definition.isDisabled) {
+            const isDisabled = this.definition.isDisabled(selection, this.getContext());
+            this.toggleDisabled(isDisabled);
+        }
+    }
+
     setActiveState(active: boolean) {
         this.active = active;
         this.dom?.classList.toggle('editor-button-active', this.active);
@@ -83,6 +108,7 @@ export class EditorButton extends EditorUiElement {
 
     updateState(state: EditorUiStateUpdate): void {
         this.updateActiveState(state.selection);
+        this.updateDisabledState(state.selection);
     }
 
     isActive(): boolean {