Lexical: Added tracked container, added fullscreen action

[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 2a6f5a976fd21532bab01b5341fecd9f8615ea78..f74201ff74cdedd1fb106e9ca380735e12fccb7d 100644 (file)
--- a/resources/js/wysiwyg/ui/framework/buttons.ts
+++ b/resources/js/wysiwyg/ui/framework/buttons.ts
@@ -1,26 +1,66 @@
-import {BaseSelection, LexicalEditor} from "lexical";
-import {EditorUiElement, EditorUiStateUpdate} from "./base-elements";
+import {BaseSelection} from "lexical";
+import {EditorUiContext, EditorUiElement, EditorUiStateUpdate} from "./core";
 import {el} from "../../helpers";
 
-export interface EditorButtonDefinition {
+export interface EditorBasicButtonDefinition {
     label: string;
-    action: (editor: LexicalEditor) => void;
-    isActive: (selection: BaseSelection|null) => boolean;
+    icon?: string|undefined;
+}
+
+export interface EditorButtonDefinition extends EditorBasicButtonDefinition {
+    action: (context: EditorUiContext, button: EditorButton) => void;
+    isActive: (selection: BaseSelection|null, context: EditorUiContext) => boolean;
+    setup?: (context: EditorUiContext, button: EditorButton) => void;
 }
 
 export class EditorButton extends EditorUiElement {
     protected definition: EditorButtonDefinition;
+    protected active: boolean = false;
+    protected completedSetup: boolean = false;
+    protected disabled: boolean = false;
 
-    constructor(definition: EditorButtonDefinition) {
+    constructor(definition: EditorButtonDefinition|EditorBasicButtonDefinition) {
         super();
-        this.definition = definition;
+
+        if ((definition as EditorButtonDefinition).action !== undefined) {
+            this.definition = definition as EditorButtonDefinition;
+        } else {
+            this.definition = {
+                ...definition,
+                action() {
+                    return false;
+                },
+                isActive: () => {
+                    return false;
+                }
+            };
+        }
+    }
+
+    setContext(context: EditorUiContext) {
+        super.setContext(context);
+
+        if (this.definition.setup && !this.completedSetup) {
+            this.definition.setup(context, this);
+            this.completedSetup = true;
+        }
     }
 
     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 button = el('button', {
             type: 'button',
             class: 'editor-button',
-        }, [this.definition.label]) as HTMLButtonElement;
+            title: this.definition.icon ? label : null,
+            disabled: this.disabled ? 'true' : null,
+        }, [child]) as HTMLButtonElement;
 
         button.addEventListener('click', this.onClick.bind(this));
 
@@ -28,61 +68,37 @@ export class EditorButton extends EditorUiElement {
     }
 
     protected onClick() {
-        this.definition.action(this.getContext().editor);
+        this.definition.action(this.getContext(), this);
     }
 
     updateActiveState(selection: BaseSelection|null) {
-        const isActive = this.definition.isActive(selection);
-        this.dom?.classList.toggle('editor-button-active', isActive);
+        const isActive = this.definition.isActive(selection, this.getContext());
+        this.setActiveState(isActive);
+    }
+
+    setActiveState(active: boolean) {
+        this.active = active;
+        this.dom?.classList.toggle('editor-button-active', this.active);
     }
 
     updateState(state: EditorUiStateUpdate): void {
         this.updateActiveState(state.selection);
     }
-}
-
-export class FormatPreviewButton extends EditorButton {
-    protected previewSampleElement: HTMLElement;
 
-    constructor(previewSampleElement: HTMLElement,definition: EditorButtonDefinition) {
-        super(definition);
-        this.previewSampleElement = previewSampleElement;
+    isActive(): boolean {
+        return this.active;
     }
 
-    protected buildDOM(): HTMLButtonElement {
-        const button = super.buildDOM();
-        button.innerHTML = '';
-
-        const preview = el('span', {
-            class: 'editor-button-format-preview'
-        }, [this.definition.label]);
-
-        const stylesToApply = this.getStylesFromPreview();
-        console.log(stylesToApply);
-        for (const style of Object.keys(stylesToApply)) {
-            preview.style.setProperty(style, stylesToApply[style]);
-        }
-
-        button.append(preview);
-        return button;
+    getLabel(): string {
+        return this.trans(this.definition.label);
     }
 
-    protected getStylesFromPreview(): Record<string, string> {
-        const wrap = el('div', {style: 'display: none', hidden: 'true', class: 'page-content'});
-        const sampleClone = this.previewSampleElement.cloneNode() as HTMLElement;
-        sampleClone.textContent = this.definition.label;
-        wrap.append(sampleClone);
-        document.body.append(wrap);
-
-        const propertiesToFetch = ['color', 'font-size', 'background-color', 'border-inline-start'];
-        const propertiesToReturn: Record<string, string> = {};
-
-        const computed = window.getComputedStyle(sampleClone);
-        for (const property of propertiesToFetch) {
-            propertiesToReturn[property] = computed.getPropertyValue(property);
+    toggleDisabled(disabled: boolean) {
+        this.disabled = disabled;
+        if (disabled) {
+            this.dom?.setAttribute('disabled', 'true');
+        } else {
+            this.dom?.removeAttribute('disabled');
         }
-        wrap.remove();
-
-        return propertiesToReturn;
     }
-}
\ No newline at end of file
+}