Lexical: Added color picker controls

resources/js/wysiwyg/ui/framework/blocks/dropdown-button.ts

@@ -0,0 +1,51 @@
+import {el} from "../../../helpers";
+import {handleDropdown} from "../helpers/dropdowns";
+import {EditorContainerUiElement, EditorUiElement} from "../core";
+import {EditorBasicButtonDefinition, EditorButton} from "../buttons";
+
+export class EditorDropdownButton extends EditorContainerUiElement {
+    protected button: EditorButton;
+    protected childItems: EditorUiElement[];
+    protected open: boolean = false;
+
+    constructor(buttonDefinition: EditorBasicButtonDefinition, children: EditorUiElement[]) {
+        super(children);
+        this.childItems = children
+
+        this.button = new EditorButton({
+            ...buttonDefinition,
+            action() {
+                return false;
+            },
+            isActive: () => {
+                return this.open;
+            }
+        });
+
+        this.children.push(this.button);
+    }
+
+    protected buildDOM(): HTMLElement {
+        const button = this.button.getDOMElement();
+
+        const childElements: HTMLElement[] = this.childItems.map(child => child.getDOMElement());
+        const menu = el('div', {
+            class: 'editor-dropdown-menu',
+            hidden: 'true',
+        }, childElements);
+
+        const wrapper = el('div', {
+            class: 'editor-dropdown-menu-container',
+        }, [button, menu]);
+
+        handleDropdown(button, menu, () => {
+            this.open = true;
+            this.getContext().manager.triggerStateUpdate(this.button);
+        }, () => {
+            this.open = false;
+            this.getContext().manager.triggerStateUpdate(this.button);
+        });
+
+        return wrapper;
+    }
+}