@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-rich-text-toolbar/co-rich-text-toolbar.js

@@ -0,0 +1,1289 @@
+import { h } from "@stencil/core";
+import { toolbarItems, COLOR_PALETTE, TABLE_CONTEXT_ITEMS } from "@prolibu-suite/cobalt-rich-text";
+import { getRichTextStrings } from "../../utils/richTextI18n";
+/**
+ * Formatting toolbar for co-rich-text-editor. Receives the Tiptap editor
+ * instance via the `editor` JS property, runs commands, and reflects active
+ * state. Supports separators, dropdown menus, inline popover inputs, and
+ * color palette pickers.
+ *
+ * @part toolbar - The toolbar container
+ * @part button - A toolbar button
+ */
+export class CoRichTextToolbar {
+    constructor() {
+        /** Toolbar layout variant. */
+        this.variant = 'basic';
+        this.disabled = false;
+        /** BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English. */
+        this.locale = 'en';
+        this.items = [];
+        /** Bumped on every editor transaction to refresh active state. */
+        this.tick = 0;
+        /** Currently open popover/dropdown (action id) or null. */
+        this.openPopover = null;
+        /** Input value for popover forms (link URL, image URL, etc.). */
+        this.popoverInput = '';
+        /** Table grid picker state. */
+        this.gridHoverRows = 0;
+        this.gridHoverCols = 0;
+        this.gridLockedRows = 0;
+        this.gridLockedCols = 0;
+        this.tableTab = 'grid';
+        this.tableManualRows = 3;
+        this.tableManualCols = 3;
+        this.tableWithHeader = false;
+        /** Table context items shown when cursor is inside a table. */
+        this.tableContextItems = [];
+        /** Image popover sub-view: 'menu' shows options, 'url' shows URL input. */
+        this.imagePopoverMode = 'menu';
+        /** Hex input for toolbar color picker. */
+        this.colorHexInput = '';
+        this.onTransaction = () => {
+            this.tick++;
+            // Show/hide table context buttons based on whether cursor is in a table
+            this.updateTableContext();
+        };
+        this.colorPalette = [];
+        this._tableContextItems = [];
+        /**
+         * Prevent toolbar clicks from stealing focus from the editor.
+         * This handler is on the HOST element (light DOM), which reliably
+         * prevents focus change even when Shadow DOM retargets events.
+         */
+        this.handleHostMouseDown = (e) => {
+            const path = e.composedPath();
+            const isInput = path.some(n => n instanceof HTMLElement && n.tagName === 'INPUT');
+            if (!isInput)
+                e.preventDefault();
+        };
+        this.handleDocumentClick = (e) => {
+            if (!this.openPopover)
+                return;
+            if (this.el.contains(e.target))
+                return;
+            this.closePopover();
+        };
+        this.run = (item) => {
+            const editor = this.editor;
+            if (!editor || this.disabled)
+                return;
+            const chain = editor.chain().focus();
+            switch (item.action) {
+                case 'bold':
+                    chain.toggleBold().run();
+                    break;
+                case 'italic':
+                    chain.toggleItalic().run();
+                    break;
+                case 'underline':
+                    chain.toggleUnderline().run();
+                    break;
+                case 'strike':
+                    chain.toggleStrike().run();
+                    break;
+                case 'code':
+                    chain.toggleCode().run();
+                    break;
+                case 'bulletList':
+                    chain.toggleBulletList().run();
+                    break;
+                case 'orderedList':
+                    chain.toggleOrderedList().run();
+                    break;
+                // Split-button main area: toggle the list on/off (caret opens styles)
+                case 'bulletListMenu':
+                    chain.toggleBulletList().run();
+                    break;
+                case 'orderedListMenu':
+                    chain.toggleOrderedList().run();
+                    break;
+                case 'taskListMenu':
+                    chain.toggleTaskList().run();
+                    break;
+                case 'blockquote':
+                    chain.toggleBlockquote().run();
+                    break;
+                case 'codeBlock':
+                    chain.toggleCodeBlock().run();
+                    break;
+                case 'heading':
+                    chain.toggleHeading(item.payload).run();
+                    break;
+                case 'horizontalRule':
+                    chain.setHorizontalRule().run();
+                    break;
+                case 'textAlign':
+                    chain.setTextAlign(item.payload).run();
+                    break;
+                case 'undo':
+                    chain.undo().run();
+                    break;
+                case 'redo':
+                    chain.redo().run();
+                    break;
+                // Table context operations
+                case 'addColumnAfter':
+                    chain.addColumnAfter().run();
+                    break;
+                case 'addColumnBefore':
+                    chain.addColumnBefore().run();
+                    break;
+                case 'deleteColumn':
+                    chain.deleteColumn().run();
+                    break;
+                case 'addRowAfter':
+                    chain.addRowAfter().run();
+                    break;
+                case 'addRowBefore':
+                    chain.addRowBefore().run();
+                    break;
+                case 'deleteRow':
+                    chain.deleteRow().run();
+                    break;
+                case 'deleteTable':
+                    chain.deleteTable().run();
+                    break;
+                case 'mergeCells':
+                    chain.mergeCells().run();
+                    break;
+                case 'splitCell':
+                    chain.splitCell().run();
+                    break;
+                case 'toggleHeaderRow':
+                    chain.toggleHeaderRow().run();
+                    break;
+                // popover/dropdown/color/grid actions are handled via toggle
+                case 'indentIncrease':
+                    if (editor.isActive('bulletList') || editor.isActive('orderedList')) {
+                        chain.sinkListItem('listItem').run();
+                    }
+                    else {
+                        chain.indent().run();
+                    }
+                    break;
+                case 'indentDecrease':
+                    if (editor.isActive('bulletList') || editor.isActive('orderedList')) {
+                        chain.liftListItem('listItem').run();
+                    }
+                    else {
+                        chain.outdent().run();
+                    }
+                    break;
+                case 'link':
+                case 'image':
+                case 'youtube':
+                case 'iframe':
+                case 'callout':
+                case 'fontSize':
+                case 'fontFamily':
+                case 'headingStyle':
+                case 'lineSpacing':
+                case 'letterSpacing':
+                case 'table':
+                case 'textColor':
+                case 'highlight':
+                    this.togglePopover(item.action);
+                    return; // don't emit action yet
+                default: chain.run();
+            }
+            this.coAction.emit({ action: item.action, payload: item.payload });
+        };
+    }
+    get s() {
+        return getRichTextStrings(this.locale);
+    }
+    tItem(item) {
+        var _a;
+        const s = this.s;
+        const map = {
+            bold: s.bold, italic: s.italic, underline: s.underline,
+            strike: s.strikethrough, code: s.code, headingStyle: s.styles,
+            fontSize: s.fontSize, fontFamily: s.font,
+            bulletList: s.bulletList, orderedList: s.orderedList,
+            bulletListMenu: s.bulletList, orderedListMenu: s.orderedList,
+            taskListMenu: s.taskList,
+            blockquote: s.quote, codeBlock: s.codeBlock,
+            horizontalRule: s.horizontalRule,
+            link: s.link, image: s.image, youtube: s.youtubeVideo, iframe: s.iframeEmbed,
+            table: s.table, textColor: s.textColor, highlight: s.highlight,
+            alignment: s.alignment, lineSpacing: s.lineSpacing,
+            letterSpacing: s.letterSpacing,
+            indentIncrease: s.increaseIndent, indentDecrease: s.decreaseIndent,
+            callout: s.callout, undo: s.undo, redo: s.redo,
+            addColumnAfter: s.addColumnAfter, addColumnBefore: s.addColumnBefore,
+            deleteColumn: s.deleteColumn, addRowAfter: s.addRowAfter,
+            addRowBefore: s.addRowBefore, deleteRow: s.deleteRow,
+            deleteTable: s.deleteTable, mergeCells: s.mergeCells,
+            splitCell: s.splitCell, toggleHeaderRow: s.headerRow,
+        };
+        return (_a = map[item.action]) !== null && _a !== void 0 ? _a : item.label;
+    }
+    tOpt(opt) {
+        var _a, _b, _c, _d, _e;
+        const s = this.s;
+        if (opt.action === 'separator')
+            return `─── ${s.systemFonts} ───`;
+        if (opt.action === 'paragraph')
+            return s.normalText;
+        if (opt.action === 'heading') {
+            const level = (_a = opt.payload) === null || _a === void 0 ? void 0 : _a.level;
+            if (level === 1)
+                return s.title;
+            if (level === 2)
+                return s.subtitle;
+            if (level === 3)
+                return s.heading3;
+        }
+        if (opt.action === 'bulletStyle') {
+            const m = { disc: s.disc, circle: s.circle, square: s.square };
+            return (_b = m[opt.payload]) !== null && _b !== void 0 ? _b : opt.label;
+        }
+        if (opt.action === 'taskStyle') {
+            if (opt.payload === 'strike')
+                return s.strikeOnComplete;
+            if (opt.payload === 'plain')
+                return s.noStrikethrough;
+        }
+        if (opt.action === 'textAlign') {
+            const m = { left: s.left, center: s.center, right: s.right, justify: s.justify };
+            return (_c = m[opt.payload]) !== null && _c !== void 0 ? _c : opt.label;
+        }
+        if (opt.action === 'lineHeight') {
+            if (opt.payload === '1')
+                return s.single;
+            if (opt.payload === '2')
+                return s.double;
+        }
+        if (opt.action === 'letterSpacing') {
+            const m = { normal: s.normal, '-0.05em': s.tight, '0.05em': s.light, '0.1em': s.wide, '0.2em': s.veryWide };
+            return (_d = m[opt.payload]) !== null && _d !== void 0 ? _d : opt.label;
+        }
+        if (opt.action === 'callout') {
+            const m = { info: s.info, warning: s.warning, success: s.success, error: s.error };
+            return (_e = m[opt.payload]) !== null && _e !== void 0 ? _e : opt.label;
+        }
+        return opt.label;
+    }
+    connectedCallback() {
+        this.el.addEventListener('mousedown', this.handleHostMouseDown);
+        document.addEventListener('click', this.handleDocumentClick, true);
+    }
+    componentWillLoad() {
+        this.items = this.resolveItems(this.variant);
+        this.colorPalette = COLOR_PALETTE;
+        this._tableContextItems = TABLE_CONTEXT_ITEMS;
+    }
+    onVariantChange(v) {
+        this.items = this.resolveItems(v);
+    }
+    onEditorChange(next, prev) {
+        prev === null || prev === void 0 ? void 0 : prev.off('transaction', this.onTransaction);
+        next === null || next === void 0 ? void 0 : next.on('transaction', this.onTransaction);
+        // The active preset decides which extensions are loaded; re-filter now that
+        // we can inspect the editor so a toolbar variant wider than the schema
+        // (e.g. `full` on a preset without tables/images) drops the dead buttons.
+        this.items = this.resolveItems(this.variant);
+        this.tick++;
+    }
+    /**
+     * Resolve a variant to the items actually usable in the current editor:
+     * hide any control whose extension the active preset didn't load, then
+     * collapse the separators left dangling by the removals. Until the editor is
+     * wired we can't inspect the schema, so the full variant is shown and
+     * re-filtered from `onEditorChange`.
+     */
+    resolveItems(variant) {
+        const base = toolbarItems((variant === 'none' ? 'compact' : variant));
+        const editor = this.editor;
+        if (!editor)
+            return base;
+        const available = (cmd) => {
+            try {
+                return typeof editor.can()[cmd] === 'function';
+            }
+            catch (_a) {
+                return true; // never hide a control because a probe threw
+            }
+        };
+        const kept = base.filter((entry) => {
+            if (this.isSeparator(entry))
+                return true;
+            const cmd = CoRichTextToolbar.ITEM_COMMAND[entry.action];
+            return cmd ? available(cmd) : true;
+        });
+        // Drop separators that ended up leading, trailing, or doubled-up.
+        const out = [];
+        for (const entry of kept) {
+            if (this.isSeparator(entry) && (!out.length || this.isSeparator(out[out.length - 1])))
+                continue;
+            out.push(entry);
+        }
+        if (out.length && this.isSeparator(out[out.length - 1]))
+            out.pop();
+        return out;
+    }
+    onOpenPopoverChange(next, prev) {
+        if (!!next === !!prev)
+            return;
+        this.coPopoverChange.emit({ open: !!next });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.off('transaction', this.onTransaction);
+        this.el.removeEventListener('mousedown', this.handleHostMouseDown);
+        document.removeEventListener('click', this.handleDocumentClick, true);
+    }
+    updateTableContext() {
+        if (!this.editor) {
+            if (this.tableContextItems.length)
+                this.tableContextItems = [];
+            return;
+        }
+        const isInTable = this.editor.isActive('table');
+        if (isInTable && !this.tableContextItems.length) {
+            this.tableContextItems = this._tableContextItems;
+        }
+        else if (!isInTable && this.tableContextItems.length) {
+            this.tableContextItems = [];
+        }
+    }
+    isSeparator(entry) {
+        return entry.type === 'separator';
+    }
+    isActive(item) {
+        if (!this.editor)
+            return false;
+        try {
+            if (item.action === 'textAlign')
+                return this.editor.isActive({ textAlign: item.payload });
+            if (item.action === 'heading')
+                return this.editor.isActive('heading', item.payload);
+            if (item.action === 'bulletListMenu')
+                return this.editor.isActive('bulletList');
+            if (item.action === 'orderedListMenu')
+                return this.editor.isActive('orderedList');
+            if (item.action === 'taskListMenu')
+                return this.editor.isActive('taskList');
+            if (item.action === 'iframe')
+                return this.editor.isActive('iframe');
+            if (item.action === 'youtube')
+                return this.editor.isActive('youtube');
+            if (item.type === 'toggle')
+                return this.editor.isActive(item.action);
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+        return false;
+    }
+    /** Toolbar icon that reflects current state (e.g. alignment shows the active alignment). */
+    getDynamicIcon(item) {
+        if (item.action === 'alignment' && this.editor) {
+            if (this.editor.isActive({ textAlign: 'center' }))
+                return 'text-align-center';
+            if (this.editor.isActive({ textAlign: 'right' }))
+                return 'text-align-right';
+            if (this.editor.isActive({ textAlign: 'justify' }))
+                return 'text-align-justify';
+            return 'text-align-left';
+        }
+        return item.icon;
+    }
+    togglePopover(action) {
+        var _a, _b;
+        if (this.openPopover === action) {
+            this.openPopover = null;
+            this.popoverInput = '';
+        }
+        else {
+            this.openPopover = action;
+            this.popoverInput = '';
+            // Pre-fill URL if editing existing link or iframe
+            if (action === 'link' && ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isActive('link'))) {
+                this.popoverInput = this.editor.getAttributes('link').href || '';
+            }
+            else if (action === 'iframe' && ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.isActive('iframe'))) {
+                this.popoverInput = this.editor.getAttributes('iframe').src || '';
+            }
+        }
+    }
+    closePopover() {
+        this.openPopover = null;
+        this.popoverInput = '';
+        this.colorHexInput = '';
+        this.imagePopoverMode = 'menu';
+        this.gridLockedRows = 0;
+        this.gridLockedCols = 0;
+        this.gridHoverRows = 0;
+        this.gridHoverCols = 0;
+    }
+    submitPopover(action) {
+        const editor = this.editor;
+        if (!editor || !this.popoverInput.trim()) {
+            this.closePopover();
+            return;
+        }
+        const url = this.popoverInput.trim();
+        const isEmbed = action === 'youtube' || action === 'iframe';
+        if (isEmbed) {
+            editor.view.focus();
+        }
+        const chain = isEmbed
+            ? editor.chain()
+            : editor.chain().focus();
+        switch (action) {
+            case 'link':
+                chain.setLink({ href: url }).run();
+                break;
+            case 'image':
+                chain.setImage({ src: url }).run();
+                break;
+            case 'youtube':
+                chain.setYoutubeVideo({ src: url }).run();
+                break;
+            case 'iframe':
+                if (editor.isActive('iframe')) {
+                    chain.updateIframe({ src: url }).run();
+                }
+                else {
+                    chain.setIframe({ src: url }).run();
+                }
+                break;
+        }
+        this.coAction.emit({ action, payload: url });
+        this.closePopover();
+        if (isEmbed)
+            this.smoothScrollToInserted();
+    }
+    smoothScrollToInserted() {
+        requestAnimationFrame(() => {
+            const editor = this.editor;
+            if (!editor)
+                return;
+            const dom = editor.view.dom;
+            const selected = dom.querySelector('.ProseMirror-selectednode');
+            if (selected) {
+                selected.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                return;
+            }
+            const { from } = editor.state.selection;
+            const resolved = editor.state.doc.resolve(from);
+            if (resolved.nodeBefore) {
+                try {
+                    const nodeDom = editor.view.nodeDOM(from - resolved.nodeBefore.nodeSize);
+                    if (nodeDom instanceof HTMLElement) {
+                        nodeDom.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    }
+                }
+                catch ( /* ignore */_a) { /* ignore */ }
+            }
+        });
+    }
+    removeLink() {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        editor.chain().focus().unsetLink().run();
+        this.coAction.emit({ action: 'link', payload: null });
+        this.closePopover();
+    }
+    removeIframe() {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        editor.chain().focus().deleteSelection().run();
+        this.coAction.emit({ action: 'iframe', payload: null });
+        this.closePopover();
+    }
+    selectColor(action, color) {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        const chain = editor.chain().focus();
+        if (action === 'textColor') {
+            chain.setColor(color).run();
+        }
+        else if (action === 'highlight') {
+            chain.setHighlight({ color }).run();
+        }
+        this.coAction.emit({ action, payload: color });
+        this.closePopover();
+    }
+    clearColor(action) {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        const chain = editor.chain().focus();
+        if (action === 'textColor') {
+            chain.unsetColor().run();
+        }
+        else if (action === 'highlight') {
+            chain.unsetHighlight().run();
+        }
+        this.coAction.emit({ action, payload: null });
+        this.closePopover();
+    }
+    /**
+     * Whether an action is allowed in the current selection. Beyond undo/redo,
+     * this disables commands that would produce content the editor can't
+     * represent — most importantly the Table button while the cursor is already
+     * inside a table, since nested tables are invalid and corrupt the document
+     * when it's reloaded (tiptap throws "Invalid HTML content" on such markup).
+     *
+     * Each command is probed through tiptap's `can()` dry-run, so a button also
+     * disables automatically anywhere ProseMirror's schema would reject it (e.g.
+     * marks inside a code block). The probe defaults to enabled on any error or
+     * unknown command so a quirk never makes a control silently disappear.
+     */
+    /**
+     * Whether an action can run *right now*. Extension availability is already
+     * handled by `resolveItems` (unavailable controls aren't rendered), so this
+     * only covers the dynamic, cursor-dependent cases: the hard "no table inside
+     * a table" rule, and position validity (e.g. marks inside a code block) via
+     * tiptap's `can()` dry-run. A thrown dry-run defaults to enabled so a quirk
+     * never makes a visible control silently lock up.
+     */
+    canRun(item) {
+        if (!this.editor || this.disabled)
+            return false;
+        const editor = this.editor;
+        const can = editor.can();
+        const probe = (name, ...args) => {
+            if (typeof can[name] !== 'function')
+                return true;
+            try {
+                return can[name](...args);
+            }
+            catch (_a) {
+                return true;
+            }
+        };
+        switch (item.action) {
+            case 'undo': return probe('undo');
+            case 'redo': return probe('redo');
+            // Hard rule: a table can never nest inside another table.
+            case 'table': return !editor.isActive('table');
+            case 'bold': return probe('toggleBold');
+            case 'italic': return probe('toggleItalic');
+            case 'underline': return probe('toggleUnderline');
+            case 'strike': return probe('toggleStrike');
+            case 'code': return probe('toggleCode');
+            case 'blockquote': return probe('toggleBlockquote');
+            case 'codeBlock': return probe('toggleCodeBlock');
+            case 'horizontalRule': return probe('setHorizontalRule');
+            case 'bulletList':
+            case 'bulletListMenu': return probe('toggleBulletList');
+            case 'orderedList':
+            case 'orderedListMenu': return probe('toggleOrderedList');
+            case 'taskListMenu': return probe('toggleTaskList');
+            default: return true;
+        }
+    }
+    getDropdownLabel(item) {
+        if (!this.editor)
+            return null;
+        const s = this.s;
+        if (item.action === 'headingStyle') {
+            if (this.editor.isActive('heading', { level: 1 }))
+                return s.title;
+            if (this.editor.isActive('heading', { level: 2 }))
+                return s.subtitle;
+            if (this.editor.isActive('heading', { level: 3 }))
+                return s.headingAbbr3;
+            return s.normal;
+        }
+        if (item.action === 'fontSize') {
+            const attrs = this.editor.getAttributes('textStyle');
+            const fs = attrs === null || attrs === void 0 ? void 0 : attrs.fontSize;
+            return fs ? fs.replace('px', '') : '16';
+        }
+        if (item.action === 'fontFamily') {
+            const attrs = this.editor.getAttributes('textStyle');
+            const ff = attrs === null || attrs === void 0 ? void 0 : attrs.fontFamily;
+            if (!ff)
+                return 'Sans-serif';
+            const match = ff.replace(/['"]/g, '').split(',')[0].trim();
+            return match.length > 10 ? match.substring(0, 10) + '…' : match;
+        }
+        return null;
+    }
+    getActiveColor(action) {
+        var _a, _b;
+        if (!this.editor)
+            return action === 'textColor' ? '#000000' : 'transparent';
+        const attrs = this.editor.getAttributes('textStyle');
+        if (action === 'textColor')
+            return (_a = attrs === null || attrs === void 0 ? void 0 : attrs.color) !== null && _a !== void 0 ? _a : '#000000';
+        const hlAttrs = this.editor.getAttributes('highlight');
+        return (_b = hlAttrs === null || hlAttrs === void 0 ? void 0 : hlAttrs.color) !== null && _b !== void 0 ? _b : 'transparent';
+    }
+    renderButton(item) {
+        var _a, _b;
+        const isPopoverType = item.type === 'popover' || item.type === 'dropdown' || item.type === 'color' || item.type === 'grid';
+        const isOpen = this.openPopover === item.action;
+        const isLabelDropdown = item.action === 'headingStyle' || item.action === 'fontSize' || item.action === 'fontFamily';
+        const dropdownLabel = isLabelDropdown ? this.getDropdownLabel(item) : null;
+        // Alignment: render as icon-only button group (Google Docs style)
+        if (item.action === 'alignment' && ((_a = item.options) === null || _a === void 0 ? void 0 : _a.length)) {
+            return this.renderAlignmentGroup(item);
+        }
+        // Split button: main area toggles, caret opens the marker-style grid.
+        if (item.type === 'listpicker') {
+            const active = this.isActive(item);
+            const label = this.tItem(item);
+            return (h("div", { class: "co-rich-text-toolbar__split-wrap", key: item.action }, h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__btn': true,
+                    'co-rich-text-toolbar__split-main': true,
+                    'co-rich-text-toolbar__btn--active': active,
+                }, "data-tooltip": label, "aria-label": label, "aria-pressed": String(active), disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.run(item), part: "button" }, h("co-icon", { name: item.icon, size: 18 })), h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__split-caret': true,
+                    'co-rich-text-toolbar__split-caret--open': isOpen,
+                }, "data-tooltip": `${this.s.stylesPrefix} ${label}`, "aria-label": `${this.s.stylesPrefix} ${label}`, "aria-expanded": String(isOpen), disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.togglePopover(item.action) }, h("co-icon", { name: "caret-down", size: 10 })), isOpen && this.renderListPicker(item)));
+        }
+        // Color buttons: render with color indicator bar
+        if (item.type === 'color') {
+            return this.renderColorButton(item);
+        }
+        const itemLabel = this.tItem(item);
+        return (h("div", { class: "co-rich-text-toolbar__btn-wrap", key: `${item.action}-${JSON.stringify((_b = item.payload) !== null && _b !== void 0 ? _b : '')}` }, isLabelDropdown ? (h("button", { type: "button", class: {
+                'co-rich-text-toolbar__select-btn': true,
+                'co-rich-text-toolbar__select-btn--open': isOpen,
+            }, "data-tooltip": itemLabel, "aria-label": itemLabel, "aria-expanded": String(isOpen), disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.run(item), part: "button" }, h("span", { class: "co-rich-text-toolbar__select-label" }, dropdownLabel), h("co-icon", { name: "caret-down", size: 10 }))) : (h("button", { type: "button", class: {
+                'co-rich-text-toolbar__btn': true,
+                'co-rich-text-toolbar__btn--active': this.isActive(item) || isOpen,
+            }, "data-tooltip": itemLabel, "aria-label": itemLabel, "aria-pressed": item.type === 'toggle' ? String(this.isActive(item)) : undefined, "aria-expanded": isPopoverType ? String(isOpen) : undefined, disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.run(item), part: "button" }, h("co-icon", { name: this.getDynamicIcon(item), size: 18 }))), isOpen && item.type === 'popover' && this.renderInputPopover(item), isOpen && item.type === 'dropdown' && this.renderDropdown(item), isOpen && item.type === 'grid' && this.renderTableGrid()));
+    }
+    renderAlignmentGroup(item) {
+        const s = this.s;
+        const alignLabels = {
+            left: s.alignLeft, center: s.center, right: s.alignRight, justify: s.justify,
+        };
+        return (h("div", { class: "co-rich-text-toolbar__align-group", key: item.action }, item.options.map((opt) => {
+            var _a, _b, _c;
+            const active = (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.isActive({ textAlign: opt.payload })) !== null && _b !== void 0 ? _b : false;
+            const label = (_c = alignLabels[opt.payload]) !== null && _c !== void 0 ? _c : opt.label;
+            return (h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__btn': true,
+                    'co-rich-text-toolbar__btn--active': active,
+                }, "data-tooltip": label, "aria-label": label, "aria-pressed": String(active), disabled: !this.editor || this.disabled, onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                    if (!this.editor)
+                        return;
+                    this.editor.chain().focus().setTextAlign(opt.payload).run();
+                    this.coAction.emit({ action: 'textAlign', payload: opt.payload });
+                }, part: "button" }, h("co-icon", { name: opt.icon, size: 18 })));
+        })));
+    }
+    renderColorButton(item) {
+        const isOpen = this.openPopover === item.action;
+        const itemLabel = this.tItem(item);
+        const activeColor = this.getActiveColor(item.action);
+        const isTextColor = item.action === 'textColor';
+        return (h("div", { class: "co-rich-text-toolbar__btn-wrap", key: item.action }, h("button", { type: "button", class: {
+                'co-rich-text-toolbar__btn': true,
+                'co-rich-text-toolbar__btn--active': isOpen,
+            }, "data-tooltip": itemLabel, "aria-label": itemLabel, "aria-expanded": String(isOpen), disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.run(item), part: "button" }, isTextColor ? (h("span", { class: "co-rich-text-toolbar__color-indicator" }, h("span", { class: "co-rich-text-toolbar__color-letter" }, "A"), h("span", { class: "co-rich-text-toolbar__color-bar", style: { background: activeColor } }))) : (h("span", { class: "co-rich-text-toolbar__color-indicator" }, h("co-icon", { name: item.icon, size: 16 }), h("span", { class: "co-rich-text-toolbar__color-bar", style: { background: activeColor === 'transparent' ? '#cccccc' : activeColor } })))), isOpen && this.renderColorPicker(item)));
+    }
+    /** Visual grid of list-marker styles (Google-Docs style). */
+    renderListPicker(item) {
+        var _a, _b;
+        if (!((_a = item.options) === null || _a === void 0 ? void 0 : _a.length))
+            return null;
+        if (item.action === 'taskListMenu')
+            return this.renderTaskListPicker(item);
+        const isOrdered = item.action === 'orderedListMenu';
+        const activeStyle = this.editor
+            ? (_b = this.editor.getAttributes(isOrdered ? 'orderedList' : 'bulletList')) === null || _b === void 0 ? void 0 : _b.listStyleType
+            : null;
+        return (h("div", { class: "co-rich-text-toolbar__listpicker", onMouseDown: (e) => { e.preventDefault(); e.stopPropagation(); } }, item.options.map((opt) => {
+            const isActive = activeStyle === opt.payload;
+            return (h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__listpicker-item': true,
+                    'co-rich-text-toolbar__listpicker-item--active': isActive,
+                }, "data-tooltip": opt.label, onMouseDown: (e) => e.preventDefault(), onClick: () => this.applyListStyle(isOrdered, opt.payload) }, h("ol", { class: {
+                    'co-rich-text-toolbar__listpicker-preview': true,
+                    'co-rich-text-toolbar__listpicker-preview--ordered': isOrdered,
+                }, style: { 'list-style-type': opt.payload } }, h("li", null), h("li", null), h("li", null))));
+        })));
+    }
+    /** Visual picker for task-list variants (checkboxes; strike vs plain). */
+    renderTaskListPicker(item) {
+        var _a, _b;
+        const activeVariant = this.editor && this.editor.isActive('taskList')
+            ? ((_b = (_a = this.editor.getAttributes('taskList')) === null || _a === void 0 ? void 0 : _a.variant) !== null && _b !== void 0 ? _b : 'strike')
+            : null;
+        return (h("div", { class: "co-rich-text-toolbar__listpicker co-rich-text-toolbar__listpicker--task", onMouseDown: (e) => { e.preventDefault(); e.stopPropagation(); } }, item.options.map((opt) => {
+            const variant = opt.payload;
+            const isActive = activeVariant === variant;
+            return (h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__listpicker-item': true,
+                    'co-rich-text-toolbar__listpicker-item--task': true,
+                    'co-rich-text-toolbar__listpicker-item--active': isActive,
+                }, "data-tooltip": opt.label, onMouseDown: (e) => e.preventDefault(), onClick: () => this.applyTaskStyle(variant) }, h("span", { class: "co-rich-text-toolbar__taskpreview", "data-variant": variant }, h("span", { class: "co-rich-text-toolbar__taskpreview-row" }, h("span", { class: "co-rich-text-toolbar__taskpreview-box" }), h("span", { class: "co-rich-text-toolbar__taskpreview-line" })), h("span", { class: "co-rich-text-toolbar__taskpreview-row co-rich-text-toolbar__taskpreview-row--checked" }, h("span", { class: "co-rich-text-toolbar__taskpreview-box co-rich-text-toolbar__taskpreview-box--checked" }), h("span", { class: "co-rich-text-toolbar__taskpreview-line" })))));
+        })));
+    }
+    applyListStyle(isOrdered, style) {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        const chain = editor.chain().focus();
+        // Ensure the right list type is active, then apply the marker style.
+        if (isOrdered) {
+            if (!editor.isActive('orderedList'))
+                chain.toggleOrderedList();
+        }
+        else {
+            if (!editor.isActive('bulletList'))
+                chain.toggleBulletList();
+        }
+        chain.setListStyleType(style).run();
+        this.coAction.emit({ action: isOrdered ? 'orderedStyle' : 'bulletStyle', payload: style });
+        this.closePopover();
+    }
+    applyTaskStyle(variant) {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        const chain = editor.chain().focus();
+        if (!editor.isActive('taskList'))
+            chain.toggleTaskList();
+        chain.setTaskListVariant(variant).run();
+        this.coAction.emit({ action: 'taskStyle', payload: variant });
+        this.closePopover();
+    }
+    renderInputPopover(item) {
+        var _a, _b;
+        if (item.action === 'image')
+            return this.renderImagePopover();
+        const isLink = item.action === 'link';
+        const isIframe = item.action === 'iframe';
+        const hasExisting = (isLink && ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isActive('link'))) || (isIframe && ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.isActive('iframe')));
+        const placeholder = item.action === 'iframe'
+            ? this.s.iframeUrlPlaceholder
+            : item.action === 'link'
+                ? 'https://...'
+                : this.s.youtubeUrlPlaceholder;
+        return (h("div", { class: "co-rich-text-toolbar__popover", onMouseDown: (e) => {
+                if (e.target.tagName !== 'INPUT')
+                    e.preventDefault();
+                e.stopPropagation();
+            } }, h("input", { type: "url", class: "co-rich-text-toolbar__popover-input", placeholder: placeholder, value: this.popoverInput, onInput: (e) => { this.popoverInput = e.target.value; }, onKeyDown: (e) => {
+                if (e.key === 'Enter')
+                    this.submitPopover(item.action);
+                if (e.key === 'Escape')
+                    this.closePopover();
+            }, ref: (el) => el && setTimeout(() => el.focus(), 0) }), h("div", { class: "co-rich-text-toolbar__popover-actions" }, h("button", { type: "button", class: "co-rich-text-toolbar__popover-btn co-rich-text-toolbar__popover-btn--primary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.submitPopover(item.action) }, this.s.add), hasExisting && (h("button", { type: "button", class: "co-rich-text-toolbar__popover-btn co-rich-text-toolbar__popover-btn--danger", onMouseDown: (e) => e.preventDefault(), onClick: () => isLink ? this.removeLink() : this.removeIframe() }, this.s.remove)), h("button", { type: "button", class: "co-rich-text-toolbar__popover-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => this.closePopover() }, this.s.cancel))));
+    }
+    renderImagePopover() {
+        if (this.imagePopoverMode === 'url') {
+            return (h("div", { class: "co-rich-text-toolbar__popover", onMouseDown: (e) => {
+                    if (e.target.tagName !== 'INPUT')
+                        e.preventDefault();
+                    e.stopPropagation();
+                } }, h("input", { type: "url", class: "co-rich-text-toolbar__popover-input", placeholder: this.s.imageUrlPlaceholder, value: this.popoverInput, onInput: (e) => { this.popoverInput = e.target.value; }, onKeyDown: (e) => {
+                    if (e.key === 'Enter')
+                        this.submitPopover('image');
+                    if (e.key === 'Escape') {
+                        this.imagePopoverMode = 'menu';
+                    }
+                }, ref: (el) => el && setTimeout(() => el.focus(), 0) }), h("div", { class: "co-rich-text-toolbar__popover-actions" }, h("button", { type: "button", class: "co-rich-text-toolbar__popover-btn co-rich-text-toolbar__popover-btn--primary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.submitPopover('image') }, this.s.add), h("button", { type: "button", class: "co-rich-text-toolbar__popover-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => { this.imagePopoverMode = 'menu'; } }, this.s.back))));
+        }
+        return (h("div", { class: "co-rich-text-toolbar__popover", onMouseDown: (e) => { e.preventDefault(); e.stopPropagation(); } }, h("button", { type: "button", class: "co-rich-text-toolbar__popover-option", onMouseDown: (e) => e.preventDefault(), onClick: () => this.triggerImageFileUpload() }, h("co-icon", { name: "upload-simple", size: 16 }), h("span", null, this.s.uploadFromComputer)), h("button", { type: "button", class: "co-rich-text-toolbar__popover-option", onMouseDown: (e) => e.preventDefault(), onClick: () => { this.imagePopoverMode = 'url'; } }, h("co-icon", { name: "link", size: 16 }), h("span", null, this.s.viaUrl))));
+    }
+    triggerImageFileUpload() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.onchange = () => {
+            var _a;
+            const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (!file || !this.editor)
+                return;
+            const reader = new FileReader();
+            reader.onload = () => {
+                const base64 = reader.result;
+                this.editor.chain().focus().setImage({ src: base64 }).run();
+                if (this.imageUpload) {
+                    this.imageUpload(file).then((result) => {
+                        var _a;
+                        const newAttrs = typeof result === 'string'
+                            ? { src: result }
+                            : { src: result.src, dataFileId: (_a = result.fileId) !== null && _a !== void 0 ? _a : null };
+                        const { state } = this.editor.view;
+                        state.doc.descendants((node, pos) => {
+                            if (node.type.name === 'image' && node.attrs.src === base64) {
+                                const tr = this.editor.view.state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), newAttrs));
+                                this.editor.view.dispatch(tr);
+                                return false;
+                            }
+                        });
+                    }).catch(() => { });
+                }
+                this.coAction.emit({ action: 'image', payload: base64 });
+            };
+            reader.readAsDataURL(file);
+            this.closePopover();
+        };
+        input.click();
+    }
+    isDropdownOptionActive(opt) {
+        var _a, _b, _c;
+        if (!this.editor)
+            return false;
+        try {
+            if (opt.action === 'textAlign')
+                return this.editor.isActive({ textAlign: opt.payload });
+            if (opt.action === 'lineHeight') {
+                const attrs = this.editor.getAttributes('paragraph');
+                return ((_a = attrs === null || attrs === void 0 ? void 0 : attrs.lineHeight) !== null && _a !== void 0 ? _a : null) === ((_b = opt.payload) !== null && _b !== void 0 ? _b : null);
+            }
+            if (opt.action === 'letterSpacing') {
+                const attrs = this.editor.getAttributes('textStyle');
+                const cur = (_c = attrs === null || attrs === void 0 ? void 0 : attrs.letterSpacing) !== null && _c !== void 0 ? _c : null;
+                if (opt.payload === 'normal')
+                    return cur === null || cur === 'normal';
+                return cur === opt.payload;
+            }
+            if (opt.action === 'heading')
+                return this.editor.isActive('heading', opt.payload);
+            if (opt.action === 'paragraph')
+                return !this.editor.isActive('heading');
+        }
+        catch ( /* ignore */_d) { /* ignore */ }
+        return false;
+    }
+    /** Apply a free-form value typed into a dropdown's custom input. */
+    applyDropdownCustom(action, raw) {
+        const editor = this.editor;
+        const value = raw.trim();
+        if (!editor || !value)
+            return;
+        const chain = editor.chain().focus();
+        if (action === 'fontSize') {
+            const n = parseFloat(value);
+            if (!(n > 0))
+                return;
+            chain.setFontSize(/^\d+(\.\d+)?$/.test(value) ? `${n}px` : value).run();
+        }
+        else if (action === 'lineSpacing') {
+            chain.setLineHeight(value).run();
+        }
+        else if (action === 'letterSpacing') {
+            if (value === 'normal')
+                chain.unsetLetterSpacing().run();
+            else
+                chain.setLetterSpacing(value).run();
+        }
+        this.closePopover();
+    }
+    renderDropdown(item) {
+        var _a;
+        if (!((_a = item.options) === null || _a === void 0 ? void 0 : _a.length))
+            return null;
+        const isFontSize = item.action === 'fontSize';
+        const isFontFamily = item.action === 'fontFamily';
+        const isHeadingStyle = item.action === 'headingStyle';
+        const isAlignment = item.action === 'alignment';
+        const isLineSpacing = item.action === 'lineSpacing';
+        const isLetterSpacing = item.action === 'letterSpacing';
+        const showCheckmarks = isAlignment || isLineSpacing || isLetterSpacing || isHeadingStyle;
+        const customInput = isFontSize
+            ? { placeholder: this.s.sizePlaceholder }
+            : isLineSpacing
+                ? { placeholder: this.s.lineSpacingPlaceholder }
+                : isLetterSpacing
+                    ? { placeholder: this.s.letterSpacingPlaceholder }
+                    : null;
+        return (h("div", { class: "co-rich-text-toolbar__dropdown", onMouseDown: (e) => { e.preventDefault(); e.stopPropagation(); } }, customInput && (h("div", { class: "co-rich-text-toolbar__dropdown-input-wrap" }, h("input", { type: "text", class: "co-rich-text-toolbar__dropdown-input", placeholder: customInput.placeholder, onMouseDown: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    this.applyDropdownCustom(item.action, e.target.value);
+                    e.target.value = '';
+                }
+                else if (e.key === 'Escape') {
+                    this.closePopover();
+                }
+            } }))), item.options.map((opt) => {
+            var _a;
+            if (opt.action === 'separator') {
+                return (h("div", { class: "co-rich-text-toolbar__dropdown-sep-label" }, h("span", null, this.tOpt(opt))));
+            }
+            const style = {};
+            const active = showCheckmarks && this.isDropdownOptionActive(opt);
+            if (isHeadingStyle) {
+                if (opt.action === 'heading') {
+                    const lvl = (_a = opt.payload) === null || _a === void 0 ? void 0 : _a.level;
+                    style.fontSize = lvl === 1 ? '20px' : lvl === 2 ? '16px' : '14px';
+                    style.fontWeight = '600';
+                }
+            }
+            if (isFontFamily && opt.payload) {
+                style.fontFamily = opt.payload;
+            }
+            return (h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__dropdown-item': true,
+                    'co-rich-text-toolbar__dropdown-item--active': active,
+                }, style: style, onMouseDown: (e) => e.preventDefault(), onClick: () => this.handleDropdownSelect(item, opt) }, showCheckmarks && (h("span", { class: "co-rich-text-toolbar__dropdown-check" }, active ? h("co-icon", { name: "check", size: 14 }) : null)), opt.icon && h("co-icon", { name: opt.icon, size: 16 }), h("span", null, this.tOpt(opt))));
+        })));
+    }
+    handleDropdownSelect(item, opt) {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        const chain = editor.chain().focus();
+        switch (opt.action) {
+            case 'heading':
+                chain.toggleHeading(opt.payload).run();
+                break;
+            case 'paragraph':
+                chain.setParagraph().run();
+                break;
+            case 'fontSize':
+                chain.setFontSize(opt.payload).run();
+                break;
+            case 'fontFamily':
+                chain.setFontFamily(opt.payload).run();
+                break;
+            case 'textAlign':
+                chain.setTextAlign(opt.payload).run();
+                break;
+            case 'lineHeight':
+                chain.setLineHeight(opt.payload).run();
+                break;
+            case 'letterSpacing':
+                if (opt.payload === 'normal')
+                    chain.unsetLetterSpacing().run();
+                else
+                    chain.setLetterSpacing(opt.payload).run();
+                break;
+            case 'callout':
+                chain.insertCallout(opt.payload).run();
+                break;
+            default:
+                break;
+        }
+        this.coAction.emit({ action: opt.action, payload: opt.payload });
+        this.closePopover();
+    }
+    renderTableGrid() {
+        return (h("div", { class: "co-rich-text-toolbar__table-picker", onMouseDown: (e) => {
+                if (e.target.tagName !== 'INPUT')
+                    e.preventDefault();
+                e.stopPropagation();
+            } }, h("div", { class: "co-rich-text-toolbar__table-header" }, h("co-icon", { name: "table", size: 16 }), h("span", { class: "co-rich-text-toolbar__table-title" }, this.s.configureTable), h("button", { type: "button", class: "co-rich-text-toolbar__table-close", onMouseDown: (e) => e.preventDefault(), onClick: () => this.closePopover() }, h("co-icon", { name: "x", size: 16 }))), h("div", { class: "co-rich-text-toolbar__table-tabs" }, h("button", { type: "button", class: { 'co-rich-text-toolbar__table-tab': true, 'co-rich-text-toolbar__table-tab--active': this.tableTab === 'grid' }, onMouseDown: (e) => e.preventDefault(), onClick: () => { this.tableTab = 'grid'; } }, this.s.grid), h("button", { type: "button", class: { 'co-rich-text-toolbar__table-tab': true, 'co-rich-text-toolbar__table-tab--active': this.tableTab === 'manual' }, onMouseDown: (e) => e.preventDefault(), onClick: () => { this.tableTab = 'manual'; } }, this.s.manual)), this.tableTab === 'grid' && this.renderGridTab(), this.tableTab === 'manual' && this.renderManualTab(), h("label", { class: "co-rich-text-toolbar__table-check" }, h("input", { type: "checkbox", checked: this.tableWithHeader, onChange: (e) => { this.tableWithHeader = e.target.checked; } }), h("span", null, this.s.includeHeaderRow)), this.tableTab === 'manual' && (h("div", { class: "co-rich-text-toolbar__table-actions" }, h("button", { type: "button", class: "co-rich-text-toolbar__table-btn co-rich-text-toolbar__table-btn--secondary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.closePopover() }, this.s.cancel), h("button", { type: "button", class: "co-rich-text-toolbar__table-btn co-rich-text-toolbar__table-btn--primary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.insertTable(this.tableManualRows, this.tableManualCols) }, this.s.createTable)))));
+    }
+    renderGridTab() {
+        const ROWS = 8;
+        const COLS = 8;
+        const cells = [];
+        const isLocked = this.gridLockedRows > 0;
+        const displayRows = isLocked ? this.gridLockedRows : this.gridHoverRows;
+        const displayCols = isLocked ? this.gridLockedCols : this.gridHoverCols;
+        for (let r = 1; r <= ROWS; r++) {
+            for (let c = 1; c <= COLS; c++) {
+                const isHighlighted = r <= displayRows && c <= displayCols;
+                cells.push(h("div", { class: { 'co-rich-text-toolbar__grid-cell': true, 'co-rich-text-toolbar__grid-cell--active': isHighlighted }, onMouseEnter: () => {
+                        if (!isLocked) {
+                            this.gridHoverRows = r;
+                            this.gridHoverCols = c;
+                        }
+                    }, onMouseDown: (e) => e.preventDefault(), onClick: () => { this.gridLockedRows = r; this.gridLockedCols = c; } }));
+            }
+        }
+        const s = this.s;
+        const label = displayRows > 0
+            ? `${displayCols} × ${displayRows} (${displayCols} ${s.columns.toLowerCase()} × ${displayRows} ${s.rows.toLowerCase()})`
+            : s.selectSize;
+        return (h("div", { class: "co-rich-text-toolbar__grid-container", onMouseLeave: () => {
+                if (!isLocked) {
+                    this.gridHoverRows = 0;
+                    this.gridHoverCols = 0;
+                }
+            } }, h("div", { class: "co-rich-text-toolbar__grid", style: { 'grid-template-columns': `repeat(${COLS}, 1fr)` } }, cells), h("div", { class: "co-rich-text-toolbar__grid-footer" }, h("span", { class: "co-rich-text-toolbar__grid-label" }, label), isLocked && (h("button", { type: "button", class: "co-rich-text-toolbar__grid-reset", onMouseDown: (e) => e.preventDefault(), onClick: () => { this.gridLockedRows = 0; this.gridLockedCols = 0; this.gridHoverRows = 0; this.gridHoverCols = 0; } }, s.changeSelection))), isLocked && (h("div", { class: "co-rich-text-toolbar__table-actions" }, h("button", { type: "button", class: "co-rich-text-toolbar__table-btn co-rich-text-toolbar__table-btn--secondary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.closePopover() }, s.cancel), h("button", { type: "button", class: "co-rich-text-toolbar__table-btn co-rich-text-toolbar__table-btn--primary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.insertTable(this.gridLockedRows, this.gridLockedCols) }, s.createTable)))));
+    }
+    renderManualTab() {
+        return (h("div", { class: "co-rich-text-toolbar__table-manual" }, h("div", { class: "co-rich-text-toolbar__table-field" }, h("label", null, this.s.columns, ":"), h("input", { type: "number", min: "1", max: "20", value: this.tableManualCols, onInput: (e) => { this.tableManualCols = Math.max(1, parseInt(e.target.value) || 1); } })), h("div", { class: "co-rich-text-toolbar__table-field" }, h("label", null, this.s.rows, ":"), h("input", { type: "number", min: "1", max: "50", value: this.tableManualRows, onInput: (e) => { this.tableManualRows = Math.max(1, parseInt(e.target.value) || 1); } }))));
+    }
+    insertTable(rows, cols) {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        // Defense in depth: never nest a table inside a table cell. The toolbar
+        // button is already disabled in this case, but guard the insert itself so
+        // no other caller can produce the invalid markup.
+        if (editor.isActive('table')) {
+            this.closePopover();
+            return;
+        }
+        const withHeader = this.tableWithHeader;
+        // Build the table node by hand so a header row can ship with placeholder
+        // titles ("Header 1", "Header 2", …) instead of empty header cells. Tiptap's
+        // insertTable() only toggles header cells on, it can't seed their content.
+        const emptyCell = () => ({ type: 'tableCell', content: [{ type: 'paragraph' }] });
+        const headerCell = (i) => ({
+            type: 'tableHeader',
+            content: [{ type: 'paragraph', content: [{ type: 'text', text: `${this.s.tableHeaderLabel} ${i + 1}` }] }],
+        });
+        const content = [];
+        if (withHeader) {
+            content.push({
+                type: 'tableRow',
+                content: Array.from({ length: cols }, (_, i) => headerCell(i)),
+            });
+        }
+        const bodyRows = withHeader ? rows - 1 : rows;
+        for (let r = 0; r < bodyRows; r++) {
+            content.push({
+                type: 'tableRow',
+                content: Array.from({ length: cols }, () => emptyCell()),
+            });
+        }
+        editor.chain().focus().insertContent({ type: 'table', content }).run();
+        this.coAction.emit({ action: 'table', payload: { rows, cols, withHeaderRow: withHeader } });
+        this.closePopover();
+    }
+    renderColorPicker(item) {
+        return (h("div", { class: "co-rich-text-toolbar__color-picker", onMouseDown: (e) => {
+                if (e.target.tagName !== 'INPUT')
+                    e.preventDefault();
+                e.stopPropagation();
+            } }, h("div", { class: "co-rich-text-toolbar__color-grid" }, this.colorPalette.map((color) => (h("button", { type: "button", class: "co-rich-text-toolbar__color-swatch", style: Object.assign({ background: color }, (color === '#ffffff' ? { border: '1px solid #ccc' } : {})), title: color, onMouseDown: (e) => e.preventDefault(), onClick: () => this.selectColor(item.action, color) })))), h("div", { class: "co-rich-text-toolbar__color-hex" }, h("input", { type: "text", class: "co-rich-text-toolbar__color-hex-input", placeholder: "#hex", maxLength: 7, value: this.colorHexInput, onInput: (e) => { this.colorHexInput = e.target.value; }, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    const val = this.colorHexInput.trim();
+                    if (/^#[0-9a-fA-F]{3,6}$/.test(val)) {
+                        this.selectColor(item.action, val);
+                        this.colorHexInput = '';
+                    }
+                }
+                else if (e.key === 'Escape') {
+                    this.closePopover();
+                }
+            } })), h("button", { type: "button", class: "co-rich-text-toolbar__color-clear", onMouseDown: (e) => e.preventDefault(), onClick: () => this.clearColor(item.action) }, h("co-icon", { name: "x", size: 12 }), h("span", null, this.s.removeColor))));
+    }
+    render() {
+        if (this.variant === 'none' || this.items.length === 0)
+            return null;
+        // reference tick so Stencil re-renders on selection changes
+        void this.tick;
+        return (h("div", { class: "co-rich-text-toolbar", role: "toolbar", "aria-label": "Formatting", part: "toolbar" }, this.items.map((entry) => {
+            if (this.isSeparator(entry)) {
+                return h("span", { class: "co-rich-text-toolbar__sep" });
+            }
+            return this.renderButton(entry);
+        })));
+    }
+    static get is() { return "co-rich-text-toolbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-rich-text-toolbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-rich-text-toolbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "editor": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Editor",
+                    "resolved": "Editor | undefined",
+                    "references": {
+                        "Editor": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-rich-text",
+                            "id": "../rich-text/dist/index.d.ts::Editor",
+                            "referenceLocation": "Editor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Editor instance (set as a property by the host editor)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'compact' | 'basic' | 'full'",
+                    "resolved": "\"basic\" | \"compact\" | \"full\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toolbar layout variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'basic'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'en'"
+            },
+            "imageUpload": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(file: File) => Promise<any>",
+                    "resolved": "((file: File) => Promise<any>) | undefined",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        },
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Image upload handler (JS property): `(file) => Promise<url | {src, fileId}>`."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "items": {},
+            "tick": {},
+            "openPopover": {},
+            "popoverInput": {},
+            "gridHoverRows": {},
+            "gridHoverCols": {},
+            "gridLockedRows": {},
+            "gridLockedCols": {},
+            "tableTab": {},
+            "tableManualRows": {},
+            "tableManualCols": {},
+            "tableWithHeader": {},
+            "tableContextItems": {},
+            "imagePopoverMode": {},
+            "colorHexInput": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coAction",
+                "name": "coAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever a toolbar action runs (observability for hosts)."
+                },
+                "complexType": {
+                    "original": "{ action: string; payload?: unknown }",
+                    "resolved": "{ action: string; payload?: unknown; }",
+                    "references": {}
+                }
+            }, {
+                "method": "coPopoverChange",
+                "name": "coPopoverChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a toolbar popover/dropdown opens or closes (host hides the\nselection bubble while one is open to avoid spatial overlap)."
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "variant",
+                "methodName": "onVariantChange"
+            }, {
+                "propName": "editor",
+                "methodName": "onEditorChange"
+            }, {
+                "propName": "openPopover",
+                "methodName": "onOpenPopoverChange"
+            }];
+    }
+}
+/**
+ * Command whose presence in the schema proves an item's extension is loaded.
+ * Items without an entry have no extension dependency (separators, core marks,
+ * link, paragraph/heading, undo/redo, text color) and are always shown.
+ */
+CoRichTextToolbar.ITEM_COMMAND = {
+    table: 'insertTable',
+    image: 'setImage',
+    youtube: 'setYoutubeVideo',
+    iframe: 'setIframe',
+    callout: 'insertCallout',
+    fontFamily: 'setFontFamily',
+    fontSize: 'setFontSize',
+    highlight: 'toggleHighlight',
+    alignment: 'setTextAlign',
+    lineSpacing: 'setLineHeight',
+    letterSpacing: 'setLetterSpacing',
+    taskListMenu: 'toggleTaskList',
+    indentIncrease: 'indent',
+    indentDecrease: 'outdent',
+    codeBlock: 'toggleCodeBlock',
+    blockquote: 'toggleBlockquote',
+    horizontalRule: 'setHorizontalRule',
+    bulletListMenu: 'toggleBulletList',
+    orderedListMenu: 'toggleOrderedList',
+};