Lexical: Added color picker controls

resources/js/wysiwyg/ui/framework/blocks/color-picker.ts

@@ -0,0 +1,90 @@
+import {el} from "../../../helpers";
+import {EditorUiElement} from "../core";
+import {$getSelection} from "lexical";
+import {$patchStyleText} from "@lexical/selection";
+
+const colorChoices = [
+    '#000000',
+    '#ffffff',
+
+    '#BFEDD2',
+    '#FBEEB8',
+    '#F8CAC6',
+    '#ECCAFA',
+    '#C2E0F4',
+
+    '#2DC26B',
+    '#F1C40F',
+    '#E03E2D',
+    '#B96AD9',
+    '#3598DB',
+
+    '#169179',
+    '#E67E23',
+    '#BA372A',
+    '#843FA1',
+    '#236FA1',
+
+    '#ECF0F1',
+    '#CED4D9',
+    '#95A5A6',
+    '#7E8C8D',
+    '#34495E',
+];
+
+export class EditorColorPicker extends EditorUiElement {
+
+    protected styleProperty: string;
+
+    constructor(styleProperty: string) {
+        super();
+        this.styleProperty = styleProperty;
+    }
+
+    buildDOM(): HTMLElement {
+
+        const colorOptions = colorChoices.map(choice => {
+            return el('div', {
+                class: 'editor-color-select-option',
+                style: `background-color: ${choice}`,
+                'data-color': choice,
+                'aria-label': choice,
+            });
+        });
+
+        colorOptions.push(el('div', {
+            class: 'editor-color-select-option',
+            'data-color': '',
+            title: 'Clear color',
+        }, ['x']));
+
+        const colorRows = [];
+        for (let i = 0; i < colorOptions.length; i+=5) {
+            const options = colorOptions.slice(i, i + 5);
+            colorRows.push(el('div', {
+                class: 'editor-color-select-row',
+            }, options));
+        }
+
+        const wrapper = el('div', {
+            class: 'editor-color-select',
+        }, colorRows);
+
+        wrapper.addEventListener('click', this.onClick.bind(this));
+
+        return wrapper;
+    }
+
+    onClick(event: MouseEvent) {
+        const colorEl = (event.target as HTMLElement).closest('[data-color]') as HTMLElement;
+        if (!colorEl) return;
+
+        const color = colorEl.dataset.color as string;
+        this.getContext().editor.update(() => {
+            const selection = $getSelection();
+            if (selection) {
+                $patchStyleText(selection, {[this.styleProperty]: color || null});
+            }
+        });
+    }
+}

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;
+    }
+}

resources/js/wysiwyg/ui/framework/blocks/format-menu.ts

@@ -0,0 +1,47 @@
+import {el} from "../../../helpers";
+import {EditorUiStateUpdate, EditorContainerUiElement} from "../core";
+import {EditorButton} from "../buttons";
+import {handleDropdown} from "../helpers/dropdowns";
+
+export class EditorFormatMenu extends EditorContainerUiElement {
+    buildDOM(): HTMLElement {
+        const childElements: HTMLElement[] = this.getChildren().map(child => child.getDOMElement());
+        const menu = el('div', {
+            class: 'editor-format-menu-dropdown editor-dropdown-menu editor-menu-list',
+            hidden: 'true',
+        }, childElements);
+
+        const toggle = el('button', {
+            class: 'editor-format-menu-toggle editor-button',
+            type: 'button',
+        }, [this.trans('Formats')]);
+
+        const wrapper = el('div', {
+            class: 'editor-format-menu editor-dropdown-menu-container',
+        }, [toggle, menu]);
+
+        handleDropdown(toggle, menu);
+
+        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;
+        }
+    }
+}

resources/js/wysiwyg/ui/framework/blocks/format-preview-button.ts

@@ -0,0 +1,47 @@
+import {el} from "../../../helpers";
+import {EditorButton, EditorButtonDefinition} from "../buttons";
+
+export class FormatPreviewButton extends EditorButton {
+    protected previewSampleElement: HTMLElement;
+
+    constructor(previewSampleElement: HTMLElement,definition: EditorButtonDefinition) {
+        super(definition);
+        this.previewSampleElement = previewSampleElement;
+    }
+
+    protected buildDOM(): HTMLButtonElement {
+        const button = super.buildDOM();
+        button.innerHTML = '';
+
+        const preview = el('span', {
+            class: 'editor-button-format-preview'
+        }, [this.getLabel()]);
+
+        const stylesToApply = this.getStylesFromPreview();
+        for (const style of Object.keys(stylesToApply)) {
+            preview.style.setProperty(style, stylesToApply[style]);
+        }
+
+        button.append(preview);
+        return button;
+    }
+
+    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.getLabel();
+        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);
+        }
+        wrap.remove();
+
+        return propertiesToReturn;
+    }
+}