Lexical: Added ui container type

Structured UI logical to be fairly standard and mostly covered via
a base class that handles context and core dom work.

resources/js/wysiwyg/ui/framework/base-elements.ts

@@ -0,0 +1,39 @@
+import {BaseSelection, LexicalEditor} from "lexical";
+
+export type EditorUiStateUpdate = {
+    editor: LexicalEditor,
+    selection: BaseSelection|null,
+};
+
+export type EditorUiContext = {
+    editor: LexicalEditor,
+};
+
+export abstract class EditorUiElement {
+    protected dom: HTMLElement|null = null;
+    private context: EditorUiContext|null = null;
+
+    protected abstract buildDOM(): HTMLElement;
+
+    setContext(context: EditorUiContext): void {
+        this.context = context;
+    }
+
+    getContext(): EditorUiContext {
+        if (this.context === null) {
+            throw new Error('Attempted to use EditorUIContext before it has been set');
+        }
+
+        return this.context;
+    }
+
+    getDOMElement(): HTMLElement {
+        if (!this.dom) {
+            this.dom = this.buildDOM();
+        }
+
+        return this.dom;
+    }
+
+    abstract updateState(state: EditorUiStateUpdate): void;
+}

resources/js/wysiwyg/ui/framework/buttons.ts

@@ -0,0 +1,40 @@
+import {BaseSelection, LexicalEditor} from "lexical";
+import {EditorUiElement, EditorUiStateUpdate} from "./base-elements";
+import {el} from "../../helpers";
+
+export interface EditorButtonDefinition {
+    label: string;
+    action: (editor: LexicalEditor) => void;
+    isActive: (selection: BaseSelection|null) => boolean;
+}
+
+export class EditorButton extends EditorUiElement {
+    protected definition: EditorButtonDefinition;
+
+    constructor(definition: EditorButtonDefinition) {
+        super();
+        this.definition = definition;
+    }
+
+    protected buildDOM(): HTMLButtonElement {
+        const button = el('button', {
+            type: 'button',
+            class: 'editor-toolbar-button',
+        }, [this.definition.label]) as HTMLButtonElement;
+
+        button.addEventListener('click', event => {
+            this.definition.action(this.getContext().editor);
+        });
+
+        return button;
+    }
+
+    updateActiveState(selection: BaseSelection|null) {
+        const isActive = this.definition.isActive(selection);
+        this.dom?.classList.toggle('editor-toolbar-button-active', isActive);
+    }
+
+    updateState(state: EditorUiStateUpdate): void {
+        this.updateActiveState(state.selection);
+    }
+}

resources/js/wysiwyg/ui/framework/containers.ts

@@ -0,0 +1,40 @@
+import {EditorUiContext, EditorUiElement, EditorUiStateUpdate} from "./base-elements";
+import {el} from "../../helpers";
+
+export class EditorContainerUiElement extends EditorUiElement {
+    protected children : EditorUiElement[];
+
+    constructor(children: EditorUiElement[]) {
+        super();
+        this.children = children;
+    }
+
+    protected buildDOM(): HTMLElement {
+        return el('div', {}, this.getChildren().map(child => child.getDOMElement()));
+    }
+
+    getChildren(): EditorUiElement[] {
+        return this.children;
+    }
+
+    updateState(state: EditorUiStateUpdate): void {
+        for (const child of this.children) {
+            child.updateState(state);
+        }
+    }
+
+    setContext(context: EditorUiContext) {
+        for (const child of this.getChildren()) {
+            child.setContext(context);
+        }
+    }
+}
+
+export class EditorFormatMenu extends EditorContainerUiElement {
+    buildDOM(): HTMLElement {
+        return el('div', {
+            class: 'editor-format-menu'
+        }, this.getChildren().map(child => child.getDOMElement()));
+    }
+
+}