Lexical: Started on form UI

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

diff --git a/resources/js/wysiwyg/ui/framework/containers.ts b/resources/js/wysiwyg/ui/framework/containers.ts
index e58988e7b843dc11b6708a55ab1904a343002df4..ed191a882059fb8698d6cd2ab36edbbfaedda053 100644 (file)
--- a/resources/js/wysiwyg/ui/framework/containers.ts
+++ b/resources/js/wysiwyg/ui/framework/containers.ts
@@ -1,5 +1,6 @@
-import {EditorUiContext, EditorUiElement, EditorUiStateUpdate} from "./base-elements";
+import {EditorUiContext, EditorUiElement, EditorUiStateUpdate} from "./core";
 import {el} from "../../helpers";
+import {EditorButton} from "./buttons";
 
 export class EditorContainerUiElement extends EditorUiElement {
     protected children : EditorUiElement[];
@@ -24,6 +25,7 @@ export class EditorContainerUiElement extends EditorUiElement {
     }
 
     setContext(context: EditorUiContext) {
+        super.setContext(context);
         for (const child of this.getChildren()) {
             child.setContext(context);
         }
@@ -54,9 +56,9 @@ export class EditorFormatMenu extends EditorContainerUiElement {
         }, childElements);
 
         const toggle = el('button', {
-            class: 'editor-format-menu-toggle',
+            class: 'editor-format-menu-toggle editor-button',
             type: 'button',
-        }, ['Formats']);
+        }, [this.trans('Formats')]);
 
         const wrapper = el('div', {
             class: 'editor-format-menu editor-dropdown-menu-container',
@@ -88,4 +90,24 @@ export class EditorFormatMenu extends EditorContainerUiElement {
 
         return wrapper;
     }
+
+    updateState(state: EditorUiStateUpdate) {
+        super.updateState(state);
+
+        for (const child of this.children) {
+            if (child instanceof EditorButton && child.isActive()) {
+                this.updateToggleLabel(child.getLabel());
+                return;
+            }
+        }
+
+        this.updateToggleLabel(this.trans('Formats'));
+    }
+
+    protected updateToggleLabel(text: string): void {
+        const button = this.getDOMElement().querySelector('button');
+        if (button) {
+            button.innerText = text;
+        }
+    }
 }
\ No newline at end of file