@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
-import { RequiredMark } from "../../utils/requiredMark";
+import * as RichText from "@prolibu-suite/cobalt-rich-text";
+import { getRichTextStrings } from "../../utils/richTextI18n";
 /**
  * Rich text editor backed by Tiptap v3.
  *
@@ -20,8 +21,6 @@ export class CoRichTextEditor {
         /** Preset controlling allowed nodes/marks, toolbar and sanitization. */
         this.preset = 'task';
         this.placeholder = '';
-        /** Label layout: vertical (label above) or horizontal (label beside) */
-        this.layout = 'vertical';
         this.status = 'default';
         this.disabled = false;
         this.readonly = false;
@@ -30,42 +29,80 @@ export class CoRichTextEditor {
         this.autofocus = false;
         /** Toolbar layout. `auto` uses the preset default. */
         this.toolbar = 'auto';
+        /** BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English. */
+        this.locale = 'en';
         this.ready = false;
         this.hasFocus = false;
+        /** Character count — updated imperatively to avoid re-renders on every keystroke. */
         this.charCount = 0;
-        /** Last value we emitted — guards the value Watch against feedback loops. */
-        this.lastEmitted = null;
+        this.bubbleDragged = false;
+        this.bubbleDragOffset = { x: 0, y: 0 };
+        this.bubbleDragPos = { x: 0, y: 0 };
+        /** Position lock — prevents floating-ui from repositioning the bubble during toolbar interactions. */
+        this.bubblePositionLocked = false;
+        this.bubbleLockPos = { x: 0, y: 0 };
+        this.applyingBubbleLock = false;
+        /** Account fonts loaded via fontLoader callback. */
+        this._loadedAccountFonts = [];
+        this._fontLoaderCalled = false;
+        this._fontLoaderLoading = false;
+        /** Last emitted JSON string — guards the value Watch against feedback loops. */
+        this.lastEmittedJson = null;
+        /** Last emitted HTML string — parents often send HTML back via value prop. */
+        this.lastEmittedHtml = '';
         /** True while applying an external value (suppresses emit). */
         this.applyingExternal = false;
-        /** Set by disconnectedCallback — aborts editor creation if the element was
-         *  removed while the lazy import was still in flight (ProseMirror leak). */
-        this.destroyed = false;
+        this.rt = RichText;
+        this.imgLayoutVisible = false;
         this.handleUpdate = (editor) => {
             this.refreshCharCount();
             if (this.applyingExternal)
                 return;
             const out = this.buildOutput(editor);
-            const next = out.json ? JSON.stringify(out.json) : null;
-            this.lastEmitted = next;
-            this.value = next;
+            // Track both JSON and HTML forms to prevent feedback loops.
+            // The parent may send back either format via the value prop.
+            this.lastEmittedJson = out.json ? JSON.stringify(out.json) : null;
+            this.lastEmittedHtml = out.html;
+            // Do NOT set this.value here — it triggers unnecessary Stencil re-renders
+            // and the Watch cycle. The parent is the source of truth for the value prop.
             this.coInput.emit(out);
+            // In readonly mode there's no blur cycle, so commit immediately
+            // (e.g. task-list checkbox toggled by onReadOnlyChecked).
+            if (this.readonly)
+                this.coChange.emit(out);
         };
         this.handleFocus = () => {
             this.hasFocus = true;
             this.coFocus.emit();
         };
         this.handleBlur = () => {
-            this.hasFocus = false;
-            if (this.editor)
-                this.coChange.emit(this.buildOutput(this.editor));
-            this.coBlur.emit();
+            // Delay blur processing — if the user clicked a toolbar button,
+            // chain().focus() will re-focus the editor before this timeout fires.
+            clearTimeout(this.blurTimeout);
+            this.blurTimeout = setTimeout(() => {
+                var _a, _b;
+                if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isFocused)
+                    return; // Focus was restored (toolbar click)
+                // Don't blur if focus moved to an element inside the bubble (e.g. hex input)
+                if ((_b = this.bubbleEl) === null || _b === void 0 ? void 0 : _b.contains(document.activeElement))
+                    return;
+                this.hasFocus = false;
+                if (this.editor)
+                    this.coChange.emit(this.buildOutput(this.editor));
+                this.coBlur.emit();
+            }, 100);
         };
     }
     async componentDidLoad() {
         var _a, _b;
-        this.rt = await import('@prolibu-suite/cobalt-rich-text');
-        if (this.destroyed || !this.contentEl)
+        if (!this.contentEl)
             return;
+        // Create bubble element imperatively so Stencil VDOM cannot interfere
+        // with BubbleMenu's DOM management (it calls element.remove/appendChild).
+        const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
+        if (showToolbar) {
+            this.bubbleEl = this.createBubbleElement();
+        }
         this.editor = this.rt.createEditor({
             preset: this.preset,
             element: this.contentEl,
@@ -75,40 +112,113 @@ export class CoRichTextEditor {
             maxLength: this.maxLength,
             features: this.parsedFeatures,
             customExtensions: (_a = this.customExtensions) !== null && _a !== void 0 ? _a : [],
+            bubbleMenuElement: this.bubbleEl,
             imageUpload: this.imageUpload,
             onUpdate: (editor) => this.handleUpdate(editor),
             onFocus: () => this.handleFocus(),
             onBlur: () => this.handleBlur(),
         });
-        this.lastEmitted = (_b = this.value) !== null && _b !== void 0 ? _b : null;
+        // Document / "site" preset: fluid ~80% content width (see editor.css). Marks
+        // both editable and readonly so the reader matches the author's measure.
+        if (this.preset === 'document') {
+            this.contentEl.classList.add('co-rte-content--site');
+        }
+        // Image layout toolbar — only when actually editable. The layout itself is
+        // CSS-driven (keyed on `data-image-layout`); the bar just lets the author
+        // pick a reflow mode (inline / wrap-left / wrap-right / center / full-width).
+        if (showToolbar && this.imagesEnabled) {
+            this.contentEl.style.position = 'relative'; // offset parent for the bar
+            this.imgLayoutEl = this.createImageLayoutBar();
+            this.contentEl.appendChild(this.imgLayoutEl);
+        }
+        // Update bubble active states on every transaction
+        this.editor.on('transaction', ({ transaction }) => {
+            if (this.bubbleEl) {
+                this.updateBubbleActiveStates();
+                if ((this.bubbleDragged || this.bubblePositionLocked) && this.bubbleEl) {
+                    this.applyBubbleFixedPosition();
+                }
+            }
+            // Reapply floating-image positions only when the doc changed (skip pure
+            // selection/cursor moves to avoid a full descendants walk on every keystroke).
+            if (this.imagesEnabled && transaction.docChanged)
+                this.syncImageLayouts();
+            this.updateImageLayoutBar();
+        });
+        // Clicking the toolbar closes bubble popups (link form, panels, etc.)
+        if (this.bubbleEl && this.toolbarEl) {
+            this.toolbarEl.addEventListener('mousedown', () => {
+                this.closeBubbleDropdowns();
+            });
+            // Hide the selection bubble while a toolbar dropdown/popover is open so
+            // the two never overlap in the same space (the bubble lives inside the
+            // content area, right where toolbar dropdowns expand into).
+            this.toolbarEl.addEventListener('coPopoverChange', (e) => {
+                var _a;
+                const open = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.open;
+                this.suppressBubble(!!open);
+            });
+        }
+        this.lastEmittedJson = (_b = this.value) !== null && _b !== void 0 ? _b : null;
         this.ready = true;
         this.refreshCharCount();
         this.syncToolbar();
         this.coReady.emit();
         if (this.autofocus)
             this.editor.commands.focus();
+        // Tag every image container with its layout mode so the CSS rules apply.
+        // Runs even without the layout toolbar (readonly/disabled viewers).
+        requestAnimationFrame(() => this.syncImageLayouts());
     }
     disconnectedCallback() {
-        var _a;
-        this.destroyed = true;
-        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy();
+        var _a, _b, _c, _d;
+        clearTimeout(this.blurTimeout);
+        clearTimeout(this.bubbleLockTimer);
+        (_a = this.bubbleStyleObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (this.bubbleDragMoveHandler)
+            document.removeEventListener('mousemove', this.bubbleDragMoveHandler);
+        if (this.bubbleDragEndHandler)
+            document.removeEventListener('mouseup', this.bubbleDragEndHandler);
+        if (this.bubbleOutsideClickHandler)
+            document.removeEventListener('click', this.bubbleOutsideClickHandler, true);
+        (_b = this.editor) === null || _b === void 0 ? void 0 : _b.destroy();
         this.editor = undefined;
+        (_c = this.bubbleEl) === null || _c === void 0 ? void 0 : _c.remove();
+        (_d = this.imgLayoutEl) === null || _d === void 0 ? void 0 : _d.remove();
     }
     componentDidRender() {
         this.syncToolbar();
     }
+    onAccountFontsChange() {
+        var _a;
+        // Re-render the font dropdown list if it's open
+        if (this._fontDropdownRenderFn) {
+            const filter = ((_a = this._fontDropdownSearchInput) === null || _a === void 0 ? void 0 : _a.value) || '';
+            this._fontDropdownRenderFn(filter);
+        }
+    }
     onValueChange(next) {
         if (!this.editor || this.applyingExternal)
             return;
-        if ((next !== null && next !== void 0 ? next : null) === this.lastEmitted)
+        const incoming = next !== null && next !== void 0 ? next : null;
+        // Skip if this value matches what we last emitted (JSON or HTML form).
+        // This prevents the destructive feedback loop where the parent sends
+        // back our own output and setContent resets the editor on every keystroke.
+        if (incoming === this.lastEmittedJson || incoming === this.lastEmittedHtml)
             return;
         this.applyingExternal = true;
         try {
-            this.editor.commands.setContent(this.parseValue(next), { emitUpdate: false });
+            if (incoming === '' || incoming === null) {
+                this.editor.commands.clearContent(false);
+            }
+            else {
+                this.editor.commands.setContent(this.parseValue(next), { emitUpdate: false });
+            }
         }
         finally {
             this.applyingExternal = false;
-            this.lastEmitted = next !== null && next !== void 0 ? next : null;
+            this.lastEmittedJson = incoming;
+            this.lastEmittedHtml = '';
             this.refreshCharCount();
         }
     }
@@ -146,6 +256,12 @@ export class CoRichTextEditor {
         return (_a = this.editor) !== null && _a !== void 0 ? _a : null;
     }
     /* ── internals ── */
+    /** Whether the image node is enabled (mirrors presets.ts `wantImage` logic). */
+    get imagesEnabled() {
+        var _a;
+        const f = this.parsedFeatures;
+        return (_a = f === null || f === void 0 ? void 0 : f.image) !== null && _a !== void 0 ? _a : this.preset === 'document';
+    }
     get parsedFeatures() {
         if (!this.features)
             return undefined;
@@ -170,9 +286,7 @@ export class CoRichTextEditor {
         }
     }
     sanitizeHtml(html) {
-        // Same features as the schema — otherwise feature-enabled nodes (images,
-        // variables) would survive in `json` but be stripped from `html`.
-        return this.rt ? this.rt.sanitize(html, this.preset, this.parsedFeatures) : html;
+        return this.rt.sanitize(html, this.preset);
     }
     buildOutput(editor) {
         const empty = editor.isEmpty;
@@ -182,21 +296,191 @@ export class CoRichTextEditor {
             text: editor.getText(),
         };
     }
+    /** Lock the bubble position so floating-ui doesn't reposition it. */
+    lockBubblePosition(durationMs = 1000) {
+        if (!this.bubbleEl)
+            return;
+        const rect = this.bubbleEl.getBoundingClientRect();
+        if (rect.width === 0)
+            return; // bubble not visible
+        this.bubbleLockPos = { x: rect.left, y: rect.top };
+        this.bubblePositionLocked = true;
+        clearTimeout(this.bubbleLockTimer);
+        this.bubbleLockTimer = setTimeout(() => {
+            this.bubblePositionLocked = false;
+        }, durationMs);
+    }
+    /** Apply fixed position to the bubble, overriding floating-ui. */
+    applyBubbleFixedPosition() {
+        if (!this.bubbleEl)
+            return;
+        const pos = this.bubbleDragged ? this.bubbleDragPos : this.bubbleLockPos;
+        this.applyingBubbleLock = true;
+        this.bubbleEl.style.position = 'fixed';
+        this.bubbleEl.style.top = `${pos.y}px`;
+        this.bubbleEl.style.left = `${pos.x}px`;
+        this.bubbleEl.style.transform = 'none';
+        this.bubbleEl.style.visibility = 'visible';
+        requestAnimationFrame(() => { this.applyingBubbleLock = false; });
+    }
+    /** Watch for floating-ui style changes and override them when locked/dragged. */
+    setupBubbleStyleObserver(bubble) {
+        // Use BubbleMenu plugin's onHide/onShow callbacks (dispatched as custom
+        // events from create-editor) for reliable drag state management.
+        // These fire synchronously inside hide()/show(), avoiding microtask races.
+        bubble.addEventListener('co-bubble-hide', () => {
+            this.bubbleDragged = false;
+            this.bubblePositionLocked = false;
+            clearTimeout(this.bubbleLockTimer);
+            this.closeBubbleDropdowns();
+            bubble.style.position = '';
+            bubble.style.top = '';
+            bubble.style.left = '';
+            bubble.style.transform = '';
+        });
+        bubble.addEventListener('co-bubble-show', () => {
+            this.bubbleDragged = false;
+            this.bubblePositionLocked = false;
+        });
+        // MutationObserver only handles overriding floating-ui position
+        // while the bubble is actively dragged or position-locked.
+        this.bubbleStyleObserver = new MutationObserver(() => {
+            if (this.applyingBubbleLock)
+                return;
+            if (!this.bubblePositionLocked && !this.bubbleDragged)
+                return;
+            this.applyBubbleFixedPosition();
+        });
+        this.bubbleStyleObserver.observe(bubble, {
+            attributes: true,
+            attributeFilter: ['style'],
+        });
+    }
+    /**
+     * Hide/show the selection bubble while a toolbar dropdown is open. Uses a
+     * class with `!important` so it wins over the BubbleMenu plugin's inline
+     * display/visibility writes. When unsuppressed, the plugin's own state
+     * (selection still active) reveals it again on the next update.
+     */
+    suppressBubble(on) {
+        if (!this.bubbleEl)
+            return;
+        this.bubbleEl.classList.toggle('co-rte-bubble--suppressed', on);
+        if (on)
+            this.closeBubbleDropdowns();
+    }
+    /** Close all open sub-dropdowns inside the bubble. */
+    closeBubbleDropdowns() {
+        if (!this.bubbleEl)
+            return;
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__select-dropdown').forEach(d => {
+            d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__color-dropdown').forEach(d => {
+            d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__panel').forEach(d => {
+            d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__overflow-menu').forEach(d => {
+            d.style.display = 'none';
+        });
+        if (this.bubbleLinkFormEl) {
+            this.bubbleLinkFormEl.style.display = 'none';
+        }
+    }
     refreshCharCount() {
         var _a;
         const storage = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.storage;
-        if (storage === null || storage === void 0 ? void 0 : storage.characterCount)
+        if (storage === null || storage === void 0 ? void 0 : storage.characterCount) {
             this.charCount = storage.characterCount.characters();
+            // Update DOM directly to avoid Stencil re-renders on every keystroke
+            if (this.charCountEl) {
+                this.charCountEl.textContent = this.maxLength != null
+                    ? `${this.charCount} / ${this.maxLength}`
+                    : `${this.charCount}`;
+            }
+        }
     }
     syncToolbar() {
         if (this.toolbarEl && this.editor && this.toolbarEl.editor !== this.editor) {
             this.toolbarEl.editor = this.editor;
         }
+        if (this.toolbarEl) {
+            this.toolbarEl.imageUpload = this.imageUpload;
+        }
     }
     get resolvedToolbar() {
         if (this.toolbar !== 'auto')
             return this.toolbar;
-        return this.rt ? this.rt.defaultToolbarForPreset(this.preset) : 'basic';
+        return this.rt.defaultToolbarForPreset(this.preset);
+    }
+    get resolvedFontFamilies() {
+        if (!this.fontFamilies)
+            return CoRichTextEditor.DEFAULT_FONTS;
+        if (typeof this.fontFamilies === 'string') {
+            try {
+                return JSON.parse(this.fontFamilies);
+            }
+            catch (_a) {
+                return CoRichTextEditor.DEFAULT_FONTS;
+            }
+        }
+        return this.fontFamilies;
+    }
+    get resolvedAccountFonts() {
+        // Prefer prop over loaded fonts
+        if (this.accountFonts) {
+            if (typeof this.accountFonts === 'string') {
+                try {
+                    return JSON.parse(this.accountFonts);
+                }
+                catch (_a) {
+                    return [];
+                }
+            }
+            return this.accountFonts;
+        }
+        return this._loadedAccountFonts;
+    }
+    registerFontFace(name, url) {
+        if (!url || !name || CoRichTextEditor._registeredFonts.has(name))
+            return;
+        CoRichTextEditor._registeredFonts.add(name);
+        try {
+            const face = new FontFace(name, `url("${url}")`);
+            face.load().then(() => document.fonts.add(face)).catch(() => { });
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+    }
+    /** Load account fonts via the fontLoader callback (called once). */
+    async loadFontsViaCallback() {
+        var _a, _b, _c;
+        if (this._fontLoaderCalled || !this.fontLoader)
+            return;
+        this._fontLoaderCalled = true;
+        this._fontLoaderLoading = true;
+        // Re-render to show loading state
+        (_a = this._fontDropdownRenderFn) === null || _a === void 0 ? void 0 : _a.call(this, '');
+        try {
+            const fonts = await this.fontLoader();
+            if (Array.isArray(fonts)) {
+                this._loadedAccountFonts = fonts.map(f => {
+                    if (f.url)
+                        this.registerFontFace(f.label, f.url);
+                    return { label: f.label, value: f.value };
+                });
+            }
+        }
+        catch (e) {
+            console.error('[co-rich-text-editor] fontLoader error', e);
+        }
+        finally {
+            this._fontLoaderLoading = false;
+            // Re-render with loaded fonts
+            const filter = ((_b = this._fontDropdownSearchInput) === null || _b === void 0 ? void 0 : _b.value) || '';
+            (_c = this._fontDropdownRenderFn) === null || _c === void 0 ? void 0 : _c.call(this, filter);
+        }
     }
     get helperIcon() {
         switch (this.status) {
@@ -206,17 +490,1545 @@ export class CoRichTextEditor {
             default: return 'info';
         }
     }
+    /* ── Bubble menu (imperative — outside Stencil VDOM) ── */
+    /**
+     * Create the bubble menu element imperatively. BubbleMenu v3 manages
+     * the element via remove()/appendChild(), which conflicts with Stencil's
+     * virtual DOM reconciliation. By creating it outside the VDOM, Stencil
+     * won't recreate or interfere with the element.
+     */
+    createBubbleElement() {
+        const bubble = document.createElement('div');
+        bubble.className = 'co-rte-bubble';
+        // Start hidden and absolutely positioned so it never takes document flow space.
+        // BubbleMenu's floating-ui will manage position via inline styles when shown.
+        bubble.style.visibility = 'hidden';
+        bubble.style.position = 'absolute';
+        bubble.style.top = '0';
+        bubble.style.left = '0';
+        // Prevent any bubble click from stealing editor focus
+        // and lock bubble position during any toolbar interaction.
+        bubble.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'INPUT')
+                e.preventDefault();
+            this.lockBubblePosition();
+        });
+        // Close dropdowns/panels when clicking outside the bubble
+        this.bubbleOutsideClickHandler = (e) => {
+            if (!bubble.contains(e.target)) {
+                this.closeBubbleDropdowns();
+            }
+        };
+        document.addEventListener('click', this.bubbleOutsideClickHandler, true);
+        // Watch for floating-ui style overrides and restore locked position
+        this.setupBubbleStyleObserver(bubble);
+        const isDocument = this.preset === 'document';
+        /* ── Drag handle (document only) ── */
+        if (isDocument) {
+            const dragHandle = document.createElement('div');
+            dragHandle.className = 'co-rte-bubble__drag-handle';
+            dragHandle.innerHTML = `<co-icon name="dots-six-vertical" size="14"></co-icon>`;
+            dragHandle.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                const rect = bubble.getBoundingClientRect();
+                this.bubbleDragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+                if (!this.bubbleDragged) {
+                    this.bubbleDragPos = { x: rect.left, y: rect.top };
+                }
+                this.bubbleDragged = true;
+                this.bubbleDragMoveHandler = (ev) => {
+                    this.bubbleDragPos.x = ev.clientX - this.bubbleDragOffset.x;
+                    this.bubbleDragPos.y = ev.clientY - this.bubbleDragOffset.y;
+                    bubble.style.position = 'fixed';
+                    bubble.style.top = `${this.bubbleDragPos.y}px`;
+                    bubble.style.left = `${this.bubbleDragPos.x}px`;
+                    bubble.style.transform = 'none';
+                    bubble.style.visibility = 'visible';
+                };
+                this.bubbleDragEndHandler = () => {
+                    document.removeEventListener('mousemove', this.bubbleDragMoveHandler);
+                    document.removeEventListener('mouseup', this.bubbleDragEndHandler);
+                };
+                document.addEventListener('mousemove', this.bubbleDragMoveHandler);
+                document.addEventListener('mouseup', this.bubbleDragEndHandler);
+            });
+            bubble.appendChild(dragHandle);
+        } // end isDocument drag handle
+        /* ── Single row: all controls ── */
+        const row = document.createElement('div');
+        row.className = 'co-rte-bubble__row';
+        // --- Advanced controls (document preset only) ---
+        // Panels will be appended to bubble root (not inside the row) at the end.
+        let fontSizePanel = null;
+        let fontWeightPanel = null;
+        let lineHeightPanelEl = null;
+        let letterSpacingPanelEl = null;
+        let bgColorPanelEl = null;
+        let overflowResult = null;
+        if (isDocument) {
+            // --- Font Family select (with search) ---
+            const fontFamilyWrap = this.createBubbleFontFamilySelect();
+            row.appendChild(fontFamilyWrap);
+            // --- Font Size panel (draggable with custom input) ---
+            fontSizePanel = this.createBubbleFontSizePanel();
+            row.appendChild(fontSizePanel.wrap);
+            // --- Font Weight panel (draggable, two-column) ---
+            fontWeightPanel = this.createBubbleFontWeightPanel();
+            row.appendChild(fontWeightPanel.wrap);
+            row.appendChild(this.createSep());
+            // --- Text color picker ---
+            const colorWrap = this.createBubbleColorPicker('textColor', (color) => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().setColor(color).run();
+            });
+            row.appendChild(colorWrap);
+            row.appendChild(this.createSep());
+        } // end isDocument advanced controls
+        // --- B I U (all presets except comment which disables underline) ---
+        const _s = getRichTextStrings(this.locale);
+        const formatBtns = [
+            { action: 'bold', icon: 'text-b', label: _s.bold, check: 'bold' },
+            { action: 'italic', icon: 'text-italic', label: _s.italic, check: 'italic' },
+        ];
+        // Underline is available on task, email, document (not comment)
+        if (this.preset !== 'comment') {
+            formatBtns.push({ action: 'underline', icon: 'text-underline', label: _s.underline, check: 'underline' });
+        }
+        formatBtns.forEach(({ action, icon, label, check }) => {
+            const btn = this.createBubbleBtn(icon, label, action, check, () => {
+                if (!this.editor)
+                    return;
+                const chain = this.editor.chain().focus();
+                switch (action) {
+                    case 'bold':
+                        chain.toggleBold().run();
+                        break;
+                    case 'italic':
+                        chain.toggleItalic().run();
+                        break;
+                    case 'underline':
+                        chain.toggleUnderline().run();
+                        break;
+                }
+            });
+            row.appendChild(btn);
+        });
+        row.appendChild(this.createSep());
+        // --- Alignment buttons (document and email only) ---
+        if (isDocument || this.preset === 'email') {
+            const alignments = [
+                { align: 'left', icon: 'text-align-left', label: _s.alignLeft },
+                { align: 'center', icon: 'text-align-center', label: _s.center },
+                { align: 'right', icon: 'text-align-right', label: _s.alignRight },
+                { align: 'justify', icon: 'text-align-justify', label: _s.justify },
+            ];
+            alignments.forEach(({ align, icon, label }) => {
+                const btn = document.createElement('button');
+                btn.type = 'button';
+                btn.className = 'co-rte-bubble__btn';
+                btn.title = label;
+                btn.setAttribute('aria-label', label);
+                btn.setAttribute('data-action', 'textAlign');
+                btn.setAttribute('data-align', align);
+                btn.innerHTML = `<co-icon name="${icon}" size="16"></co-icon>`;
+                btn.addEventListener('click', () => {
+                    if (!this.editor)
+                        return;
+                    this.editor.chain().focus().setTextAlign(align).run();
+                });
+                row.appendChild(btn);
+            });
+            row.appendChild(this.createSep());
+        } // end alignment
+        // --- Bullet / Ordered list (task, email — not comment, not document) ---
+        // For document preset, lists are moved to the overflow menu.
+        if (this.preset !== 'comment' && !isDocument) {
+            row.appendChild(this.createBubbleBtn('list-bullets', _s.bulletList, 'bulletList', 'bulletList', () => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().toggleBulletList().run();
+            }));
+            row.appendChild(this.createBubbleBtn('list-numbers', _s.orderedList, 'orderedList', 'orderedList', () => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().toggleOrderedList().run();
+            }));
+            row.appendChild(this.createSep());
+        } // end lists (non-document)
+        // --- Link (all presets) ---
+        const linkBtn = this.createBubbleBtn('link', _s.link, 'link', 'link', () => {
+            if (!this.editor)
+                return;
+            this.toggleBubbleLinkForm(true);
+        });
+        row.appendChild(linkBtn);
+        // --- Overflow menu (document only) ---
+        // Superscript, subscript, lists, strikethrough, bg color, line height,
+        // letter spacing, horizontal rule, clear formatting — all in overflow.
+        if (isDocument) {
+            row.appendChild(this.createSep());
+            lineHeightPanelEl = this.createBubbleLineHeightPanel();
+            letterSpacingPanelEl = this.createBubbleLetterSpacingPanel();
+            bgColorPanelEl = this.createBubbleBgColorPanel();
+            overflowResult = this.createBubbleOverflowMenu({
+                lineHeight: lineHeightPanelEl,
+                letterSpacing: letterSpacingPanelEl,
+                bgColor: bgColorPanelEl,
+            });
+            row.appendChild(overflowResult.overflowWrap);
+        } // end isDocument overflow
+        bubble.appendChild(row);
+        // Append floating panels to bubble root (outside the row, so they float freely)
+        if (isDocument) {
+            if (fontSizePanel)
+                bubble.appendChild(fontSizePanel.panelEl);
+            if (fontWeightPanel)
+                bubble.appendChild(fontWeightPanel.panelEl);
+            if (lineHeightPanelEl)
+                bubble.appendChild(lineHeightPanelEl);
+            if (letterSpacingPanelEl)
+                bubble.appendChild(letterSpacingPanelEl);
+            if (bgColorPanelEl)
+                bubble.appendChild(bgColorPanelEl);
+        }
+        // Link form (hidden by default)
+        const linkForm = document.createElement('div');
+        linkForm.className = 'co-rte-bubble__link-form';
+        linkForm.style.display = 'none';
+        this.bubbleLinkFormEl = linkForm;
+        const linkInput = document.createElement('input');
+        linkInput.type = 'url';
+        linkInput.className = 'co-rte-bubble__link-input';
+        linkInput.placeholder = 'https://...';
+        this.bubbleLinkInputEl = linkInput;
+        linkInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter')
+                this.submitBubbleLinkImperative();
+            if (e.key === 'Escape')
+                this.toggleBubbleLinkForm(false);
+        });
+        const linkSubmit = document.createElement('button');
+        linkSubmit.type = 'button';
+        linkSubmit.className = 'co-rte-bubble__link-btn';
+        linkSubmit.innerHTML = `<co-icon name="check" size="14"></co-icon>`;
+        linkSubmit.addEventListener('click', () => this.submitBubbleLinkImperative());
+        const linkUnlink = document.createElement('button');
+        linkUnlink.type = 'button';
+        linkUnlink.className = 'co-rte-bubble__link-btn co-rte-bubble__link-unlink';
+        linkUnlink.title = _s.unlinkLink;
+        linkUnlink.innerHTML = `<co-icon name="link-break" size="14"></co-icon>`;
+        linkUnlink.addEventListener('click', () => {
+            if (!this.editor)
+                return;
+            this.editor.chain().focus().unsetLink().run();
+            this.toggleBubbleLinkForm(false);
+        });
+        this.bubbleLinkUnlinkEl = linkUnlink;
+        linkForm.appendChild(linkInput);
+        linkForm.appendChild(linkSubmit);
+        linkForm.appendChild(linkUnlink);
+        bubble.appendChild(linkForm);
+        return bubble;
+    }
+    /** Helper: create a separator span */
+    createSep() {
+        const sep = document.createElement('span');
+        sep.className = 'co-rte-bubble__sep';
+        return sep;
+    }
+    /**
+     * Position a dropdown above or below the trigger depending on available
+     * viewport space. Sets `data-position="above"|"below"` so CSS can flip.
+     */
+    positionDropdown(trigger, dropdown) {
+        const triggerRect = trigger.getBoundingClientRect();
+        // The dropdown is already display:block when this is called.
+        // Remove any previous position so it can be measured at its natural height.
+        dropdown.removeAttribute('data-position');
+        dropdown.style.removeProperty('left');
+        dropdown.style.removeProperty('transform');
+        // Force layout so offsetHeight is accurate
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        dropdown.offsetHeight;
+        const dropH = dropdown.offsetHeight || 320;
+        const dropW = dropdown.offsetWidth || 224;
+        const spaceAbove = triggerRect.top;
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        if (spaceBelow >= dropH || spaceBelow > spaceAbove) {
+            dropdown.setAttribute('data-position', 'below');
+        }
+        else {
+            dropdown.setAttribute('data-position', 'above');
+        }
+        // Clamp horizontal position so the dropdown stays within the viewport.
+        // The dropdown is positioned relative to its parent (trigger wrapper).
+        // Default CSS uses left:50% + translateX(-50%) to center; we override
+        // when centering would push the dropdown outside the viewport.
+        const isColorDropdown = dropdown.classList.contains('co-rte-bubble__color-dropdown');
+        if (isColorDropdown) {
+            const parentRect = (trigger.parentElement || trigger).getBoundingClientRect();
+            // Desired center-aligned left edge in viewport coords
+            const idealLeft = parentRect.left + parentRect.width / 2 - dropW / 2;
+            const idealRight = idealLeft + dropW;
+            const viewportPad = 8;
+            if (idealLeft < viewportPad) {
+                // Would overflow left — align to left edge of trigger
+                dropdown.style.left = '0';
+                dropdown.style.transform = 'none';
+            }
+            else if (idealRight > window.innerWidth - viewportPad) {
+                // Would overflow right — align to right edge of trigger
+                dropdown.style.left = 'auto';
+                dropdown.style.right = '0';
+                dropdown.style.transform = 'none';
+            }
+            // else: default centering from CSS is fine
+        }
+    }
+    positionPanelNearBubble(panel) {
+        if (!this.bubbleEl)
+            return;
+        const overflowMenu = this.bubbleEl.querySelector('.co-rte-bubble__overflow-menu');
+        const anchorRect = overflowMenu && overflowMenu.style.display !== 'none'
+            ? overflowMenu.getBoundingClientRect()
+            : this.bubbleEl.getBoundingClientRect();
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        panel.offsetHeight;
+        const panelH = panel.offsetHeight || 320;
+        const panelW = panel.offsetWidth || 230;
+        const gap = 4;
+        const pad = 8;
+        let top = anchorRect.top;
+        if (top + panelH > window.innerHeight - pad)
+            top = window.innerHeight - pad - panelH;
+        if (top < pad)
+            top = pad;
+        let left = anchorRect.left - panelW - gap;
+        if (left < pad)
+            left = anchorRect.right + gap;
+        if (left + panelW > window.innerWidth - pad)
+            left = window.innerWidth - pad - panelW;
+        panel.style.position = 'fixed';
+        panel.style.top = `${top}px`;
+        panel.style.left = `${left}px`;
+        panel.style.bottom = 'auto';
+        panel.style.right = 'auto';
+        panel.style.transform = 'none';
+        panel.removeAttribute('data-position');
+    }
+    /** Helper: create a toggle button for the bubble */
+    createBubbleBtn(icon, label, action, check, onClick) {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'co-rte-bubble__btn';
+        btn.title = label;
+        btn.setAttribute('aria-label', label);
+        btn.setAttribute('data-action', action);
+        btn.setAttribute('data-check', check);
+        btn.innerHTML = `<co-icon name="${icon}" size="16"></co-icon>`;
+        btn.addEventListener('click', onClick);
+        return btn;
+    }
+    /** Creates the font family dropdown with search for the bubble menu. */
+    createBubbleFontFamilySelect() {
+        const wrap = document.createElement('div');
+        wrap.className = 'co-rte-bubble__select co-rte-bubble__select--font';
+        wrap.setAttribute('data-select', 'fontFamily');
+        const trigger = document.createElement('button');
+        trigger.type = 'button';
+        trigger.className = 'co-rte-bubble__select-trigger';
+        trigger.innerHTML = `<span class="co-rte-bubble__select-label">Sans-serif</span><co-icon name="caret-down" size="12"></co-icon>`;
+        const dropdown = document.createElement('div');
+        dropdown.className = 'co-rte-bubble__select-dropdown co-rte-bubble__select-dropdown--font';
+        dropdown.style.display = 'none';
+        // Search input
+        const searchWrap = document.createElement('div');
+        searchWrap.className = 'co-rte-bubble__font-search';
+        const searchInput = document.createElement('input');
+        searchInput.type = 'text';
+        searchInput.className = 'co-rte-bubble__font-search-input';
+        searchInput.placeholder = getRichTextStrings(this.locale).searchFont;
+        searchWrap.appendChild(searchInput);
+        dropdown.appendChild(searchWrap);
+        // Font list container
+        const listEl = document.createElement('div');
+        listEl.className = 'co-rte-bubble__font-list';
+        dropdown.appendChild(listEl);
+        const createFontOption = (label, value) => {
+            const opt = document.createElement('button');
+            opt.type = 'button';
+            opt.className = 'co-rte-bubble__select-option';
+            opt.setAttribute('data-value', value);
+            opt.textContent = label;
+            opt.style.fontFamily = value.includes(',') ? value : `"${value}", sans-serif`;
+            opt.addEventListener('click', () => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().setFontFamily(value).run();
+                dropdown.style.display = 'none';
+                const labelEl = trigger.querySelector('.co-rte-bubble__select-label');
+                if (labelEl)
+                    labelEl.textContent = label;
+                searchInput.value = '';
+                this.coFontPopupHide.emit();
+            });
+            return opt;
+        };
+        const renderFonts = (filter) => {
+            listEl.innerHTML = '';
+            const term = filter.toLowerCase();
+            const accountFonts = this.resolvedAccountFonts;
+            const systemFonts = this.resolvedFontFamilies;
+            const filteredAccount = term ? accountFonts.filter(f => f.label.toLowerCase().includes(term)) : accountFonts;
+            const filteredSystem = term ? systemFonts.filter(f => f.label.toLowerCase().includes(term)) : systemFonts;
+            if (!filteredAccount.length && !filteredSystem.length) {
+                const empty = document.createElement('div');
+                empty.className = 'co-rte-bubble__font-empty';
+                empty.textContent = getRichTextStrings(this.locale).noResults;
+                listEl.appendChild(empty);
+                return;
+            }
+            // Loading indicator
+            if ((this.fontsLoading || this._fontLoaderLoading) && !filteredAccount.length) {
+                const loading = document.createElement('div');
+                loading.className = 'co-rte-bubble__font-empty';
+                loading.textContent = getRichTextStrings(this.locale).loadingFonts;
+                listEl.appendChild(loading);
+            }
+            // Imported fonts section
+            if (filteredAccount.length) {
+                const header = document.createElement('div');
+                header.className = 'co-rte-bubble__font-section-header';
+                header.textContent = getRichTextStrings(this.locale).importedFonts;
+                listEl.appendChild(header);
+                filteredAccount.forEach(({ label, value }) => listEl.appendChild(createFontOption(label, value)));
+            }
+            // System fonts section
+            if (filteredSystem.length) {
+                const header = document.createElement('div');
+                header.className = 'co-rte-bubble__font-section-header';
+                header.textContent = getRichTextStrings(this.locale).systemFonts;
+                listEl.appendChild(header);
+                filteredSystem.forEach(({ label, value }) => listEl.appendChild(createFontOption(label, value)));
+            }
+        };
+        searchInput.addEventListener('input', () => renderFonts(searchInput.value));
+        // Re-render fonts when accountFonts prop changes (MutationObserver on the host)
+        this._fontDropdownRenderFn = renderFonts;
+        this._fontDropdownSearchInput = searchInput;
+        trigger.addEventListener('click', () => {
+            const parent = wrap.closest('.co-rte-bubble');
+            if (parent) {
+                parent.querySelectorAll('.co-rte-bubble__select-dropdown').forEach(d => {
+                    if (d !== dropdown)
+                        d.style.display = 'none';
+                });
+                parent.querySelectorAll('.co-rte-bubble__color-dropdown').forEach(d => {
+                    d.style.display = 'none';
+                });
+            }
+            const isOpen = dropdown.style.display !== 'none';
+            dropdown.style.display = isOpen ? 'none' : 'block';
+            if (!isOpen) {
+                this.coFontPopupShow.emit();
+                this.loadFontsViaCallback();
+                this.positionDropdown(trigger, dropdown);
+                renderFonts('');
+                setTimeout(() => searchInput.focus(), 0);
+            }
+            else {
+                this.coFontPopupHide.emit();
+            }
+        });
+        wrap.appendChild(trigger);
+        wrap.appendChild(dropdown);
+        return wrap;
+    }
+    /** Creates a compact dropdown-select for the bubble menu. */
+    createBubbleSelect(name, options, defaultLabel, onChange) {
+        const wrap = document.createElement('div');
+        wrap.className = 'co-rte-bubble__select';
+        wrap.setAttribute('data-select', name);
+        const trigger = document.createElement('button');
+        trigger.type = 'button';
+        trigger.className = 'co-rte-bubble__select-trigger';
+        trigger.innerHTML = `<span class="co-rte-bubble__select-label">${defaultLabel}</span><co-icon name="caret-down" size="12"></co-icon>`;
+        const dropdown = document.createElement('div');
+        dropdown.className = 'co-rte-bubble__select-dropdown';
+        dropdown.style.display = 'none';
+        options.forEach(({ label, value }) => {
+            const opt = document.createElement('button');
+            opt.type = 'button';
+            opt.className = 'co-rte-bubble__select-option';
+            opt.setAttribute('data-value', value);
+            opt.textContent = label;
+            // Preview font weight in the option
+            if (name === 'fontWeight') {
+                opt.style.fontWeight = value;
+            }
+            opt.addEventListener('click', () => {
+                onChange(value);
+                dropdown.style.display = 'none';
+                const labelEl = trigger.querySelector('.co-rte-bubble__select-label');
+                if (labelEl)
+                    labelEl.textContent = label;
+            });
+            dropdown.appendChild(opt);
+        });
+        trigger.addEventListener('click', () => {
+            // Close other open dropdowns in the bubble
+            const parent = wrap.closest('.co-rte-bubble');
+            if (parent) {
+                parent.querySelectorAll('.co-rte-bubble__select-dropdown').forEach(d => {
+                    if (d !== dropdown)
+                        d.style.display = 'none';
+                });
+                parent.querySelectorAll('.co-rte-bubble__color-dropdown').forEach(d => {
+                    d.style.display = 'none';
+                });
+            }
+            const isOpen = dropdown.style.display !== 'none';
+            dropdown.style.display = isOpen ? 'none' : 'block';
+            if (!isOpen)
+                this.positionDropdown(trigger, dropdown);
+        });
+        wrap.appendChild(trigger);
+        wrap.appendChild(dropdown);
+        return wrap;
+    }
+    /** Creates a compact color picker button for the bubble menu. */
+    createBubbleColorPicker(name, onChange) {
+        const colors = [
+            '#000000', '#434343', '#666666', '#999999', '#b7b7b7', '#cccccc',
+            '#d9d9d9', '#efefef', '#f3f3f3', '#ffffff',
+            '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00', '#00ffff',
+            '#4a86e8', '#0000ff', '#9900ff', '#ff00ff',
+            '#e6b8af', '#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3',
+            '#c9daf8', '#cfe2f3', '#d9d2e9', '#ead1dc',
+        ];
+        const wrap = document.createElement('div');
+        wrap.className = 'co-rte-bubble__color';
+        wrap.setAttribute('data-color', name);
+        const iconName = name === 'textColor' ? '' : 'highlighter';
+        const trigger = document.createElement('button');
+        trigger.type = 'button';
+        trigger.className = 'co-rte-bubble__btn';
+        const _cs = getRichTextStrings(this.locale);
+        trigger.title = name === 'textColor' ? _cs.textColor : _cs.backgroundColor;
+        if (name === 'textColor') {
+            trigger.innerHTML = `<span class="co-rte-bubble__color-indicator"><span class="co-rte-bubble__color-letter">A</span><span class="co-rte-bubble__color-bar" style="background:#000000"></span></span>`;
+        }
+        else {
+            trigger.innerHTML = `<co-icon name="${iconName}" size="16"></co-icon>`;
+        }
+        const dropdown = document.createElement('div');
+        dropdown.className = 'co-rte-bubble__color-dropdown';
+        dropdown.style.display = 'none';
+        const colorTitle = name === 'textColor' ? _cs.textColor : _cs.backgroundColor;
+        const { resetDrag: resetColorDrag } = this.addDragHeader(dropdown, colorTitle);
+        // Prevent focus loss
+        dropdown.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'INPUT')
+                e.preventDefault();
+            this.lockBubblePosition();
+        });
+        const grid = document.createElement('div');
+        grid.className = 'co-rte-bubble__color-grid';
+        colors.forEach(color => {
+            const swatch = document.createElement('button');
+            swatch.type = 'button';
+            swatch.className = 'co-rte-bubble__color-swatch';
+            swatch.style.background = color;
+            if (color === '#ffffff') {
+                swatch.style.border = '1px solid #e0e0e0';
+            }
+            swatch.addEventListener('click', () => {
+                onChange(color);
+                dropdown.style.display = 'none';
+            });
+            grid.appendChild(swatch);
+        });
+        // Hex input
+        const hexRow = document.createElement('div');
+        hexRow.className = 'co-rte-bubble__color-hex';
+        const hexInput = document.createElement('input');
+        hexInput.type = 'text';
+        hexInput.className = 'co-rte-bubble__color-hex-input';
+        hexInput.placeholder = '#hex';
+        hexInput.maxLength = 7;
+        hexInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                const val = hexInput.value.trim();
+                if (/^#[0-9a-fA-F]{3,6}$/.test(val)) {
+                    onChange(val);
+                    dropdown.style.display = 'none';
+                    hexInput.value = '';
+                }
+            }
+        });
+        // Clear color button
+        const clearBtn = document.createElement('button');
+        clearBtn.type = 'button';
+        clearBtn.className = 'co-rte-bubble__color-clear';
+        clearBtn.innerHTML = `<co-icon name="x" size="12"></co-icon> ${_cs.noColor}`;
+        clearBtn.addEventListener('click', () => {
+            if (!this.editor)
+                return;
+            if (name === 'textColor')
+                this.editor.chain().focus().unsetColor().run();
+            else
+                this.editor.chain().focus().unsetHighlight().run();
+            dropdown.style.display = 'none';
+        });
+        dropdown.appendChild(grid);
+        hexRow.appendChild(hexInput);
+        dropdown.appendChild(hexRow);
+        dropdown.appendChild(clearBtn);
+        trigger.addEventListener('click', () => {
+            const parent = wrap.closest('.co-rte-bubble');
+            if (parent) {
+                parent.querySelectorAll('.co-rte-bubble__select-dropdown').forEach(d => {
+                    d.style.display = 'none';
+                });
+                parent.querySelectorAll('.co-rte-bubble__color-dropdown').forEach(d => {
+                    if (d !== dropdown)
+                        d.style.display = 'none';
+                });
+            }
+            const isOpen = dropdown.style.display !== 'none';
+            if (isOpen) {
+                dropdown.style.display = 'none';
+            }
+            else {
+                resetColorDrag();
+                dropdown.style.position = '';
+                dropdown.style.top = '';
+                dropdown.style.left = '';
+                dropdown.style.bottom = '';
+                dropdown.style.right = '';
+                dropdown.style.transform = '';
+                dropdown.style.display = 'block';
+                this.positionDropdown(trigger, dropdown);
+            }
+        });
+        wrap.appendChild(trigger);
+        wrap.appendChild(dropdown);
+        return wrap;
+    }
+    /** Close all bubble popups EXCEPT the given element. */
+    closeAllBubblePopups(...except) {
+        if (!this.bubbleEl)
+            return;
+        const keep = except.filter(Boolean);
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__select-dropdown').forEach(d => {
+            if (!keep.includes(d))
+                d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__color-dropdown').forEach(d => {
+            if (!keep.includes(d))
+                d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__panel').forEach(d => {
+            if (!keep.includes(d))
+                d.style.display = 'none';
+        });
+        this.bubbleEl.querySelectorAll('.co-rte-bubble__overflow-menu').forEach(d => {
+            if (!keep.includes(d))
+                d.style.display = 'none';
+        });
+        if (this.bubbleLinkFormEl && !keep.includes(this.bubbleLinkFormEl)) {
+            this.bubbleLinkFormEl.style.display = 'none';
+        }
+    }
+    addDragHeader(panel, title) {
+        let dragged = false;
+        let dragPos = { x: 0, y: 0 };
+        let dragOffset = { x: 0, y: 0 };
+        const header = document.createElement('div');
+        header.className = 'co-rte-bubble__panel-header';
+        const dragHandle = document.createElement('div');
+        dragHandle.className = 'co-rte-bubble__panel-drag';
+        dragHandle.innerHTML = `<co-icon name="dots-six" size="14"></co-icon>`;
+        const titleEl = document.createElement('span');
+        titleEl.className = 'co-rte-bubble__panel-title';
+        titleEl.textContent = title;
+        const closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.className = 'co-rte-bubble__panel-close';
+        closeBtn.innerHTML = `<co-icon name="x" size="14"></co-icon>`;
+        closeBtn.addEventListener('click', () => { panel.style.display = 'none'; });
+        header.appendChild(dragHandle);
+        header.appendChild(titleEl);
+        header.appendChild(closeBtn);
+        dragHandle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const rect = panel.getBoundingClientRect();
+            dragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+            if (!dragged)
+                dragPos = { x: rect.left, y: rect.top };
+            dragged = true;
+            const onMove = (ev) => {
+                dragPos.x = ev.clientX - dragOffset.x;
+                dragPos.y = ev.clientY - dragOffset.y;
+                panel.style.position = 'fixed';
+                panel.style.top = `${dragPos.y}px`;
+                panel.style.left = `${dragPos.x}px`;
+                panel.style.bottom = 'auto';
+                panel.style.right = 'auto';
+                panel.style.transform = 'none';
+                panel.removeAttribute('data-position');
+            };
+            const onUp = () => {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+            };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        });
+        const resetDrag = () => { dragged = false; };
+        panel.insertBefore(header, panel.firstChild);
+        return { header, resetDrag };
+    }
+    /** Generic draggable panel factory. */
+    createBubblePanel(config) {
+        const wrap = document.createElement('div');
+        wrap.className = 'co-rte-bubble__select';
+        wrap.setAttribute('data-select', config.name);
+        const trigger = document.createElement('button');
+        trigger.type = 'button';
+        trigger.className = 'co-rte-bubble__select-trigger';
+        trigger.innerHTML = `<span class="co-rte-bubble__select-label">${config.triggerLabel}</span><co-icon name="caret-down" size="12"></co-icon>`;
+        const panel = document.createElement('div');
+        panel.className = 'co-rte-bubble__panel';
+        panel.setAttribute('data-panel', config.name);
+        panel.style.display = 'none';
+        // Header
+        const header = document.createElement('div');
+        header.className = 'co-rte-bubble__panel-header';
+        const dragHandle = document.createElement('div');
+        dragHandle.className = 'co-rte-bubble__panel-drag';
+        dragHandle.innerHTML = `<co-icon name="dots-six" size="14"></co-icon>`;
+        const titleEl = document.createElement('span');
+        titleEl.className = 'co-rte-bubble__panel-title';
+        titleEl.textContent = config.title;
+        const closeBtn = document.createElement('button');
+        closeBtn.type = 'button';
+        closeBtn.className = 'co-rte-bubble__panel-close';
+        closeBtn.innerHTML = `<co-icon name="x" size="14"></co-icon>`;
+        closeBtn.addEventListener('click', () => { panel.style.display = 'none'; });
+        header.appendChild(dragHandle);
+        header.appendChild(titleEl);
+        header.appendChild(closeBtn);
+        panel.appendChild(header);
+        // Panel drag
+        let panelDragged = false;
+        let panelDragPos = { x: 0, y: 0 };
+        let panelDragOffset = { x: 0, y: 0 };
+        dragHandle.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const rect = panel.getBoundingClientRect();
+            panelDragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+            if (!panelDragged)
+                panelDragPos = { x: rect.left, y: rect.top };
+            panelDragged = true;
+            const onMove = (ev) => {
+                panelDragPos.x = ev.clientX - panelDragOffset.x;
+                panelDragPos.y = ev.clientY - panelDragOffset.y;
+                panel.style.position = 'fixed';
+                panel.style.top = `${panelDragPos.y}px`;
+                panel.style.left = `${panelDragPos.x}px`;
+                panel.style.bottom = 'auto';
+                panel.style.right = 'auto';
+                panel.style.transform = 'none';
+                panel.removeAttribute('data-position');
+            };
+            const onUp = () => {
+                document.removeEventListener('mousemove', onMove);
+                document.removeEventListener('mouseup', onUp);
+            };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        });
+        // Custom input
+        if (config.hasCustomInput) {
+            const inputWrap = document.createElement('div');
+            inputWrap.className = 'co-rte-bubble__panel-input-wrap';
+            const input = document.createElement('input');
+            input.type = config.inputType || 'text';
+            input.className = 'co-rte-bubble__panel-input';
+            input.placeholder = config.inputPlaceholder || '';
+            input.addEventListener('mousedown', (e) => e.stopPropagation());
+            input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    const val = input.value.trim();
+                    if (val && config.onCustomInput) {
+                        config.onCustomInput(val);
+                        input.value = '';
+                    }
+                }
+                if (e.key === 'Escape') {
+                    panel.style.display = 'none';
+                }
+            });
+            inputWrap.appendChild(input);
+            panel.appendChild(inputWrap);
+        }
+        // Options
+        const optionsWrap = document.createElement('div');
+        optionsWrap.className = 'co-rte-bubble__panel-options';
+        config.options.forEach(opt => {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'co-rte-bubble__panel-option';
+            btn.setAttribute('data-value', opt.value);
+            if (config.renderOption) {
+                config.renderOption(opt, btn);
+            }
+            else {
+                btn.textContent = opt.label;
+            }
+            btn.addEventListener('click', () => {
+                config.onSelect(opt.value);
+                panel.style.display = 'none';
+                panelDragged = false;
+            });
+            optionsWrap.appendChild(btn);
+        });
+        panel.appendChild(optionsWrap);
+        // Prevent bubble from losing focus
+        panel.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'INPUT')
+                e.preventDefault();
+            this.lockBubblePosition();
+        });
+        // Toggle logic
+        const togglePanel = () => {
+            this.closeAllBubblePopups(panel);
+            const isOpen = panel.style.display !== 'none';
+            if (isOpen) {
+                panel.style.display = 'none';
+            }
+            else {
+                panelDragged = false;
+                panel.style.position = '';
+                panel.style.top = '';
+                panel.style.left = '';
+                panel.style.bottom = '';
+                panel.style.right = '';
+                panel.style.transform = '';
+                panel.style.display = 'block';
+                this.positionDropdown(trigger, panel);
+            }
+        };
+        trigger.addEventListener('click', togglePanel);
+        wrap.appendChild(trigger);
+        const updateLabel = (text) => {
+            const labelEl = trigger.querySelector('.co-rte-bubble__select-label');
+            if (labelEl)
+                labelEl.textContent = text;
+        };
+        return { wrap, panelEl: panel, updateLabel };
+    }
+    /** Font size panel with visual preview and custom input. */
+    createBubbleFontSizePanel() {
+        const _fs = getRichTextStrings(this.locale);
+        const headings = [
+            { label: _fs.title, value: 'h1' },
+            { label: _fs.heading1, value: 'h2' },
+            { label: _fs.heading2, value: 'h3' },
+        ];
+        const sizes = ['8px', '10px', '12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px', '36px', '48px', '64px', '72px'];
+        const allOptions = [
+            ...headings,
+            { label: '---', value: '---' },
+            ...sizes.map(s => ({ label: s, value: s })),
+        ];
+        return this.createBubblePanel({
+            name: 'fontSize',
+            title: _fs.fontSize,
+            triggerLabel: '16px',
+            hasCustomInput: true,
+            inputType: 'number',
+            inputPlaceholder: _fs.writeSize,
+            options: allOptions,
+            renderOption: (opt, btn) => {
+                if (opt.value === '---') {
+                    btn.className = 'co-rte-bubble__panel-sep';
+                    btn.disabled = true;
+                    btn.style.pointerEvents = 'none';
+                    return;
+                }
+                if (opt.value === 'h1') {
+                    btn.textContent = opt.label;
+                    btn.style.fontSize = '24px';
+                    btn.style.fontWeight = '700';
+                    btn.style.padding = '6px 8px';
+                }
+                else if (opt.value === 'h2') {
+                    btn.textContent = opt.label;
+                    btn.style.fontSize = '18px';
+                    btn.style.fontWeight = '700';
+                    btn.style.padding = '5px 8px';
+                }
+                else if (opt.value === 'h3') {
+                    btn.textContent = opt.label;
+                    btn.style.fontSize = '15px';
+                    btn.style.fontWeight = '700';
+                    btn.style.padding = '4px 8px';
+                }
+                else {
+                    btn.textContent = opt.label;
+                    const px = parseInt(opt.value);
+                    btn.style.fontSize = `${Math.min(px, 36)}px`;
+                    btn.style.lineHeight = '1.3';
+                }
+            },
+            onSelect: (val) => {
+                if (!this.editor || val === '---')
+                    return;
+                const chain = this.editor.chain().focus();
+                if (val === 'h1')
+                    chain.toggleHeading({ level: 1 }).run();
+                else if (val === 'h2')
+                    chain.toggleHeading({ level: 2 }).run();
+                else if (val === 'h3')
+                    chain.toggleHeading({ level: 3 }).run();
+                else
+                    chain.setFontSize(val).run();
+            },
+            onCustomInput: (val) => {
+                if (!this.editor)
+                    return;
+                const num = parseInt(val);
+                if (num > 0)
+                    this.editor.chain().focus().setFontSize(`${num}px`).run();
+            },
+        });
+    }
+    /** Font weight panel with two-column layout and visual preview. */
+    createBubbleFontWeightPanel() {
+        const weights = [
+            { label: 'Thin', value: '100' },
+            { label: 'Extra Light', value: '200' },
+            { label: 'Light', value: '300' },
+            { label: 'Regular', value: '400' },
+            { label: 'Medium', value: '500' },
+            { label: 'Semi Bold', value: '600' },
+            { label: 'Bold', value: '700' },
+            { label: 'Extra Bold', value: '800' },
+            { label: 'Black', value: '900' },
+        ];
+        return this.createBubblePanel({
+            name: 'fontWeight',
+            title: getRichTextStrings(this.locale).fontWeight,
+            triggerLabel: 'Regular',
+            hasCustomInput: false,
+            options: weights,
+            renderOption: (opt, btn) => {
+                btn.style.fontWeight = opt.value;
+                btn.innerHTML = `<span class="co-rte-bubble__panel-opt-row"><span>${opt.label}</span><span class="co-rte-bubble__panel-opt-value">${opt.value}</span></span>`;
+            },
+            onSelect: (val) => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().setFontWeight(val).run();
+            },
+        });
+    }
+    /** Line height panel with custom input. */
+    createBubbleLineHeightPanel() {
+        const options = [
+            { label: '0.5', value: '0.5' },
+            { label: '1', value: '1' },
+            { label: '1.15', value: '1.15' },
+            { label: '1.5', value: '1.5' },
+            { label: '1.75', value: '1.75' },
+            { label: '2', value: '2' },
+            { label: '2.5', value: '2.5' },
+            { label: '3', value: '3' },
+            { label: '---', value: '---' },
+            { label: '16px', value: '16px' },
+            { label: '20px', value: '20px' },
+            { label: '24px', value: '24px' },
+            { label: '32px', value: '32px' },
+            { label: '---', value: '---2' },
+            { label: '100%', value: '100%' },
+            { label: '150%', value: '150%' },
+            { label: '200%', value: '200%' },
+        ];
+        const { panelEl } = this.createBubblePanel({
+            name: 'lineHeight',
+            title: getRichTextStrings(this.locale).lineSpacing,
+            triggerLabel: '1.5',
+            hasCustomInput: true,
+            inputPlaceholder: '1.5, 20px, 150%...',
+            options,
+            renderOption: (opt, btn) => {
+                if (opt.value.startsWith('---')) {
+                    btn.className = 'co-rte-bubble__panel-sep';
+                    btn.disabled = true;
+                    btn.style.pointerEvents = 'none';
+                    return;
+                }
+                btn.textContent = opt.label;
+            },
+            onSelect: (val) => {
+                if (!this.editor || val.startsWith('---'))
+                    return;
+                this.editor.chain().focus().setLineHeight(val).run();
+            },
+            onCustomInput: (val) => {
+                if (!this.editor)
+                    return;
+                this.editor.chain().focus().setLineHeight(val).run();
+            },
+        });
+        return panelEl;
+    }
+    /** Letter spacing panel with custom input. */
+    createBubbleLetterSpacingPanel() {
+        const options = [
+            { label: '-0.05em', value: '-0.05em' },
+            { label: 'Normal', value: 'normal' },
+            { label: '0.05em', value: '0.05em' },
+            { label: '0.1em', value: '0.1em' },
+            { label: '0.2em', value: '0.2em' },
+        ];
+        const { panelEl } = this.createBubblePanel({
+            name: 'letterSpacing',
+            title: getRichTextStrings(this.locale).letterSpacing,
+            triggerLabel: getRichTextStrings(this.locale).normal,
+            hasCustomInput: true,
+            inputPlaceholder: 'Custom (em)...',
+            options,
+            onSelect: (val) => {
+                if (!this.editor)
+                    return;
+                if (val === 'normal')
+                    this.editor.chain().focus().unsetLetterSpacing().run();
+                else
+                    this.editor.chain().focus().setLetterSpacing(val).run();
+            },
+            onCustomInput: (val) => {
+                if (!this.editor)
+                    return;
+                const v = val.includes('em') || val.includes('px') ? val : `${val}em`;
+                this.editor.chain().focus().setLetterSpacing(v).run();
+            },
+        });
+        return panelEl;
+    }
+    /** Background color panel for overflow menu. */
+    createBubbleBgColorPanel() {
+        const bgColorWrap = this.createBubbleColorPicker('bgColor', (color) => {
+            if (!this.editor)
+                return;
+            this.editor.chain().focus().toggleHighlight({ color }).run();
+        });
+        // Hide the trigger button — bg color is only opened from the overflow menu.
+        const triggerBtn = bgColorWrap.querySelector('.co-rte-bubble__btn');
+        if (triggerBtn)
+            triggerBtn.style.display = 'none';
+        return bgColorWrap;
+    }
+    /** Overflow menu (three-dots ⋮) with dynamic table context section. */
+    createBubbleOverflowMenu(panels) {
+        const wrap = document.createElement('div');
+        wrap.className = 'co-rte-bubble__overflow';
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'co-rte-bubble__btn';
+        const _os = getRichTextStrings(this.locale);
+        btn.title = _os.moreOptions;
+        btn.setAttribute('aria-label', _os.moreOptions);
+        btn.innerHTML = `<co-icon name="dots-three" size="16"></co-icon>`;
+        const menu = document.createElement('div');
+        menu.className = 'co-rte-bubble__overflow-menu';
+        menu.style.display = 'none';
+        const { resetDrag: resetOverflowDrag } = this.addDragHeader(menu, _os.moreOptions);
+        // Prevent focus loss
+        menu.addEventListener('mousedown', (e) => {
+            if (e.target.tagName !== 'INPUT')
+                e.preventDefault();
+            this.lockBubblePosition();
+        });
+        const items = [
+            { icon: 'text-strikethrough', label: _os.strikethrough, action: 'strike', check: 'strike', type: 'toggle' },
+            { icon: 'highlighter', label: _os.backgroundColor, action: 'bgColor', type: 'panel', panel: panels.bgColor },
+            { icon: 'list-bullets', label: _os.bulletList, action: 'bulletList', check: 'bulletList', type: 'toggle' },
+            { icon: 'list-numbers', label: _os.orderedList, action: 'orderedList', check: 'orderedList', type: 'toggle' },
+            { icon: 'text-superscript', label: _os.superscript, action: 'superscript', check: 'superscript', type: 'toggle' },
+            { icon: 'text-subscript', label: _os.subscript, action: 'subscript', check: 'subscript', type: 'toggle' },
+            { icon: 'line-segments', label: _os.lineSpacing, action: 'lineHeight', type: 'panel', panel: panels.lineHeight, valueAttr: 'lineHeight' },
+            { icon: 'text-aa', label: _os.letterSpacing, action: 'letterSpacing', type: 'panel', panel: panels.letterSpacing, valueAttr: 'letterSpacing' },
+            { icon: 'minus', label: _os.horizontalRule, action: 'horizontalRule', type: 'toggle' },
+            { icon: 'eraser', label: _os.clearFormat, action: 'clearFormat', type: 'toggle' },
+        ];
+        items.forEach((item) => {
+            if (item.action === 'lineHeight' || item.action === 'horizontalRule') {
+                const sep = document.createElement('div');
+                sep.className = 'co-rte-bubble__overflow-sep';
+                menu.appendChild(sep);
+            }
+            const itemBtn = document.createElement('button');
+            itemBtn.type = 'button';
+            itemBtn.className = 'co-rte-bubble__overflow-item';
+            itemBtn.setAttribute('data-overflow-item', item.action);
+            if (item.check)
+                itemBtn.setAttribute('data-check', item.check);
+            let valueSpan = '';
+            if (item.valueAttr) {
+                valueSpan = `<span class="co-rte-bubble__overflow-value" data-overflow-value="${item.valueAttr}"></span>`;
+            }
+            itemBtn.innerHTML = `<co-icon name="${item.icon}" size="16"></co-icon><span>${item.label}</span>${valueSpan}`;
+            itemBtn.addEventListener('click', () => {
+                if (!this.editor)
+                    return;
+                if (item.type === 'panel' && item.panel) {
+                    if (item.action === 'bgColor') {
+                        const dd = item.panel.querySelector('.co-rte-bubble__color-dropdown');
+                        if (dd) {
+                            const isOpen = dd.style.display !== 'none';
+                            this.closeAllBubblePopups(menu, isOpen ? undefined : dd);
+                            dd.style.display = isOpen ? 'none' : 'block';
+                            if (!isOpen)
+                                this.positionPanelNearBubble(dd);
+                        }
+                    }
+                    else {
+                        const isOpen = item.panel.style.display !== 'none';
+                        this.closeAllBubblePopups(menu, isOpen ? undefined : item.panel);
+                        item.panel.style.display = isOpen ? 'none' : 'block';
+                        if (!isOpen)
+                            this.positionPanelNearBubble(item.panel);
+                    }
+                    return;
+                }
+                const chain = this.editor.chain().focus();
+                switch (item.action) {
+                    case 'strike':
+                        chain.toggleStrike().run();
+                        break;
+                    case 'bulletList':
+                        chain.toggleBulletList().run();
+                        break;
+                    case 'orderedList':
+                        chain.toggleOrderedList().run();
+                        break;
+                    case 'superscript':
+                        chain.toggleSuperscript().run();
+                        break;
+                    case 'subscript':
+                        chain.toggleSubscript().run();
+                        break;
+                    case 'horizontalRule':
+                        chain.setHorizontalRule().run();
+                        menu.style.display = 'none';
+                        break;
+                    case 'clearFormat':
+                        chain.unsetAllMarks().clearNodes().run();
+                        menu.style.display = 'none';
+                        break;
+                }
+            });
+            menu.appendChild(itemBtn);
+        });
+        // ── Table context section (hidden by default, shown when cursor is in a table) ──
+        const tableSection = document.createElement('div');
+        tableSection.className = 'co-rte-bubble__overflow-table-section';
+        tableSection.style.display = 'none';
+        const tableSep = document.createElement('div');
+        tableSep.className = 'co-rte-bubble__overflow-sep';
+        tableSection.appendChild(tableSep);
+        const tableHeader = document.createElement('div');
+        tableHeader.className = 'co-rte-bubble__overflow-section-title';
+        tableHeader.textContent = _os.tableOptions;
+        tableSection.appendChild(tableHeader);
+        const tableItems = [
+            { action: 'addColumnBefore', icon: 'columns-plus-left', label: _os.addColumnBefore },
+            { action: 'addColumnAfter', icon: 'columns-plus-right', label: _os.addColumnAfter },
+            { action: 'addRowBefore', icon: 'rows-plus-top', label: _os.addRowAbove },
+            { action: 'addRowAfter', icon: 'rows-plus-bottom', label: _os.addRowBelow },
+            { action: 'mergeCells', icon: 'arrows-merge', label: _os.mergeCells },
+            { action: 'splitCell', icon: 'arrows-split', label: _os.splitCell },
+            { action: 'toggleHeaderRow', icon: 'rows', label: _os.headerRow },
+        ];
+        tableItems.forEach(({ action, icon, label }) => {
+            const tBtn = document.createElement('button');
+            tBtn.type = 'button';
+            tBtn.className = 'co-rte-bubble__overflow-item';
+            tBtn.setAttribute('data-overflow-item', action);
+            if (action === 'toggleHeaderRow')
+                tBtn.setAttribute('data-check', 'toggleHeaderRow');
+            tBtn.innerHTML = `<co-icon name="${icon}" size="16"></co-icon><span>${label}</span>`;
+            tBtn.addEventListener('click', () => {
+                if (!this.editor)
+                    return;
+                const chain = this.editor.chain().focus();
+                switch (action) {
+                    case 'addColumnAfter':
+                        chain.addColumnAfter().run();
+                        break;
+                    case 'addColumnBefore':
+                        chain.addColumnBefore().run();
+                        break;
+                    case 'addRowAfter':
+                        chain.addRowAfter().run();
+                        break;
+                    case 'addRowBefore':
+                        chain.addRowBefore().run();
+                        break;
+                    case 'mergeCells':
+                        chain.mergeCells().run();
+                        break;
+                    case 'splitCell':
+                        chain.splitCell().run();
+                        break;
+                    case 'toggleHeaderRow':
+                        chain.toggleHeaderRow().run();
+                        break;
+                }
+            });
+            tableSection.appendChild(tBtn);
+        });
+        // Danger items (delete column, row, table)
+        const dangerSep = document.createElement('div');
+        dangerSep.className = 'co-rte-bubble__overflow-sep';
+        tableSection.appendChild(dangerSep);
+        const dangerItems = [
+            { action: 'deleteColumn', icon: 'minus-square', label: _os.deleteColumn },
+            { action: 'deleteRow', icon: 'x-square', label: _os.deleteRow },
+            { action: 'deleteTable', icon: 'trash', label: _os.deleteTable },
+        ];
+        dangerItems.forEach(({ action, icon, label }) => {
+            const dBtn = document.createElement('button');
+            dBtn.type = 'button';
+            dBtn.className = 'co-rte-bubble__overflow-item co-rte-bubble__overflow-item--danger';
+            dBtn.setAttribute('data-overflow-item', action);
+            dBtn.innerHTML = `<co-icon name="${icon}" size="16"></co-icon><span>${label}</span>`;
+            dBtn.addEventListener('click', () => {
+                if (!this.editor)
+                    return;
+                const chain = this.editor.chain().focus();
+                switch (action) {
+                    case 'deleteColumn':
+                        chain.deleteColumn().run();
+                        break;
+                    case 'deleteRow':
+                        chain.deleteRow().run();
+                        break;
+                    case 'deleteTable':
+                        chain.deleteTable().run();
+                        menu.style.display = 'none';
+                        break;
+                }
+            });
+            tableSection.appendChild(dBtn);
+        });
+        menu.appendChild(tableSection);
+        btn.addEventListener('click', () => {
+            this.closeAllBubblePopups(menu);
+            const isOpen = menu.style.display !== 'none';
+            if (isOpen) {
+                menu.style.display = 'none';
+            }
+            else {
+                resetOverflowDrag();
+                menu.style.position = '';
+                menu.style.top = '';
+                menu.style.left = '';
+                menu.style.bottom = '';
+                menu.style.right = '';
+                menu.style.transform = '';
+                menu.style.display = 'block';
+                this.positionDropdown(btn, menu);
+            }
+        });
+        wrap.appendChild(btn);
+        wrap.appendChild(menu);
+        return { overflowWrap: wrap, overflowMenu: menu };
+    }
+    toggleBubbleLinkForm(show) {
+        var _a, _b;
+        if (!this.bubbleLinkFormEl || !this.bubbleLinkInputEl)
+            return;
+        this.bubbleLinkFormEl.style.display = show ? 'flex' : 'none';
+        if (show) {
+            const existing = ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isActive('link'))
+                ? ((_b = this.editor.getAttributes('link')) === null || _b === void 0 ? void 0 : _b.href) || ''
+                : '';
+            this.bubbleLinkInputEl.value = existing;
+            if (this.bubbleLinkUnlinkEl) {
+                this.bubbleLinkUnlinkEl.style.display = existing ? 'flex' : 'none';
+            }
+            setTimeout(() => { var _a; return (_a = this.bubbleLinkInputEl) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+        }
+    }
+    submitBubbleLinkImperative() {
+        if (!this.editor || !this.bubbleLinkInputEl)
+            return;
+        const url = this.bubbleLinkInputEl.value.trim();
+        if (!url) {
+            this.toggleBubbleLinkForm(false);
+            return;
+        }
+        this.editor.chain().focus().setLink({ href: url }).run();
+        this.toggleBubbleLinkForm(false);
+    }
+    updateBubbleActiveStates() {
+        if (!this.editor || !this.bubbleEl)
+            return;
+        // Toggle buttons (bold, italic, etc.)
+        const btns = this.bubbleEl.querySelectorAll('.co-rte-bubble__btn[data-check]');
+        btns.forEach(btn => {
+            const check = btn.getAttribute('data-check');
+            if (check) {
+                btn.classList.toggle('co-rte-bubble__btn--active', this.editor.isActive(check));
+            }
+        });
+        // Alignment buttons
+        const alignBtns = this.bubbleEl.querySelectorAll('.co-rte-bubble__btn[data-align]');
+        alignBtns.forEach(btn => {
+            const align = btn.getAttribute('data-align');
+            if (align) {
+                btn.classList.toggle('co-rte-bubble__btn--active', this.editor.isActive({ textAlign: align }));
+            }
+        });
+        // Font family label
+        const ffLabel = this.bubbleEl.querySelector('[data-select="fontFamily"] .co-rte-bubble__select-label');
+        if (ffLabel) {
+            const attrs = this.editor.getAttributes('textStyle');
+            const family = (attrs === null || attrs === void 0 ? void 0 : attrs.fontFamily) || '';
+            ffLabel.textContent = family ? family.split(',')[0].replace(/['"]/g, '').trim() : 'Sans-serif';
+        }
+        // Font size label (panel trigger)
+        const fsTrigger = this.bubbleEl.querySelector('[data-select="fontSize"] .co-rte-bubble__select-label');
+        if (fsTrigger) {
+            const attrs = this.editor.getAttributes('textStyle');
+            const _us = getRichTextStrings(this.locale);
+            if (this.editor.isActive('heading', { level: 1 }))
+                fsTrigger.textContent = _us.title;
+            else if (this.editor.isActive('heading', { level: 2 }))
+                fsTrigger.textContent = _us.headingAbbr1;
+            else if (this.editor.isActive('heading', { level: 3 }))
+                fsTrigger.textContent = _us.headingAbbr2;
+            else
+                fsTrigger.textContent = (attrs === null || attrs === void 0 ? void 0 : attrs.fontSize) || '16px';
+        }
+        // Font weight label (panel trigger)
+        const fwTrigger = this.bubbleEl.querySelector('[data-select="fontWeight"] .co-rte-bubble__select-label');
+        if (fwTrigger) {
+            const attrs = this.editor.getAttributes('textStyle');
+            const w = (attrs === null || attrs === void 0 ? void 0 : attrs.fontWeight) || '400';
+            const wMap = { '100': 'Thin', '200': 'Extra Light', '300': 'Light', '400': 'Regular', '500': 'Medium', '600': 'Semi-bold', '700': 'Bold', '800': 'Extra-bold', '900': 'Black' };
+            fwTrigger.textContent = wMap[w] || 'Regular';
+        }
+        // Overflow menu items active states
+        const overflowItems = this.bubbleEl.querySelectorAll('.co-rte-bubble__overflow-item[data-check]');
+        overflowItems.forEach(item => {
+            const check = item.getAttribute('data-check');
+            if (check) {
+                item.classList.toggle('co-rte-bubble__overflow-item--active', this.editor.isActive(check));
+            }
+        });
+        // Line height value in overflow (lineHeight is a block-level attribute on paragraph/heading)
+        const lhValue = this.bubbleEl.querySelector('[data-overflow-value="lineHeight"]');
+        if (lhValue) {
+            const pAttrs = this.editor.getAttributes('paragraph');
+            const hAttrs = this.editor.getAttributes('heading');
+            lhValue.textContent = (pAttrs === null || pAttrs === void 0 ? void 0 : pAttrs.lineHeight) || (hAttrs === null || hAttrs === void 0 ? void 0 : hAttrs.lineHeight) || '';
+        }
+        // Letter spacing value in overflow
+        const lsValue = this.bubbleEl.querySelector('[data-overflow-value="letterSpacing"]');
+        if (lsValue) {
+            const attrs = this.editor.getAttributes('textStyle');
+            lsValue.textContent = (attrs === null || attrs === void 0 ? void 0 : attrs.letterSpacing) || '';
+        }
+        // Text color indicator bar
+        const colorBar = this.bubbleEl.querySelector('.co-rte-bubble__color-bar');
+        if (colorBar) {
+            const attrs = this.editor.getAttributes('textStyle');
+            colorBar.style.background = (attrs === null || attrs === void 0 ? void 0 : attrs.color) || '#000000';
+        }
+        // Table context section — show/hide based on cursor position
+        const tableSection = this.bubbleEl.querySelector('.co-rte-bubble__overflow-table-section');
+        if (tableSection) {
+            const inTable = this.editor.isActive('table');
+            tableSection.style.display = inTable ? 'block' : 'none';
+            // Toggle header row active state
+            if (inTable) {
+                const headerBtn = tableSection.querySelector('[data-overflow-item="toggleHeaderRow"]');
+                if (headerBtn) {
+                    const view = this.editor.view;
+                    const { $anchor } = this.editor.state.selection;
+                    let d = $anchor.depth;
+                    let hasHeader = false;
+                    while (d > 0) {
+                        if ($anchor.node(d).type.name === 'table') {
+                            const domEl = view.nodeDOM($anchor.start(d) - 1);
+                            if (domEl) {
+                                const tbl = domEl.querySelector('table') || domEl;
+                                const firstRow = tbl.querySelector('tr');
+                                hasHeader = firstRow ? firstRow.querySelector('th') !== null : false;
+                            }
+                            break;
+                        }
+                        d--;
+                    }
+                    headerBtn.classList.toggle('co-rte-bubble__overflow-item--active', hasHeader);
+                }
+            }
+        }
+    }
+    createImageLayoutBar() {
+        const bar = document.createElement('div');
+        bar.className = 'co-rte-img-layout';
+        bar.style.display = 'none';
+        bar.addEventListener('mousedown', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        });
+        const s = getRichTextStrings(this.locale);
+        const labels = {
+            'inline': s.imageLayoutInline,
+            'wrap-left': s.imageLayoutWrapLeft,
+            'wrap-right': s.imageLayoutWrapRight,
+            'center': s.imageLayoutCenter,
+            'full-width': s.imageLayoutFullWidth,
+        };
+        const keys = ['inline', 'wrap-left', 'wrap-right', 'center', 'full-width'];
+        keys.forEach(key => {
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'co-rte-img-layout__btn';
+            btn.setAttribute('data-layout', key);
+            // Fast CSS tooltip (avoids the slow native `title` delay).
+            btn.setAttribute('data-tooltip', labels[key] || key);
+            btn.setAttribute('aria-label', labels[key] || key);
+            btn.innerHTML = `<co-icon name="${CoRichTextEditor.IMG_LAYOUT_ICONS[key]}" size="18"></co-icon>`;
+            btn.addEventListener('click', () => this.setImageLayout(key));
+            bar.appendChild(btn);
+        });
+        return bar;
+    }
+    setImageLayout(layout) {
+        if (!this.editor || !this.contentEl)
+            return;
+        const { state } = this.editor;
+        const sel = state.selection;
+        if (sel.constructor.name !== 'NodeSelection')
+            return;
+        const node = sel.node;
+        if ((node === null || node === void 0 ? void 0 : node.type.name) !== 'image')
+            return;
+        const pos = sel.from;
+        const tr = state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), { imageLayout: layout }));
+        this.editor.view.dispatch(tr);
+        this.editor.commands.setNodeSelection(pos);
+        requestAnimationFrame(() => {
+            this.syncImageLayouts();
+            this.updateImageLayoutBar();
+        });
+    }
+    getSelectedImageInfo() {
+        var _a;
+        if (!this.editor)
+            return null;
+        const { state } = this.editor;
+        const sel = state.selection;
+        if (sel.constructor.name !== 'NodeSelection')
+            return null;
+        const node = sel.node;
+        if ((node === null || node === void 0 ? void 0 : node.type.name) !== 'image')
+            return null;
+        const pos = sel.from;
+        const domNode = this.editor.view.nodeDOM(pos);
+        if (!domNode)
+            return null;
+        const container = (((_a = domNode.closest) === null || _a === void 0 ? void 0 : _a.call(domNode, '[data-resize-container]')) || domNode);
+        return { node, pos, container };
+    }
+    /**
+     * Tag every image container with its layout mode (`data-image-layout`) so the
+     * stylesheet's responsive rules apply, and clear any stray inline positioning
+     * left over from legacy absolute-positioned content. Layout is CSS-only now
+     * (it reflows and collapses on mobile); we only set the attribute here.
+     *
+     * Runs on every transaction. The resize NodeView's `onUpdate` returns `true`,
+     * so ProseMirror never reflects attribute changes to the DOM — we must read
+     * from state and write the attribute imperatively to the container.
+     */
+    syncImageLayouts() {
+        if (!this.editor)
+            return;
+        const view = this.editor.view;
+        this.editor.state.doc.descendants((node, pos) => {
+            var _a;
+            if (node.type.name !== 'image')
+                return true;
+            const dom = view.nodeDOM(pos);
+            const c = (((_a = dom === null || dom === void 0 ? void 0 : dom.closest) === null || _a === void 0 ? void 0 : _a.call(dom, '[data-resize-container]')) || dom);
+            if (!c)
+                return true;
+            c.dataset.imageLayout = node.attrs.imageLayout || 'inline';
+            // Neutralise any absolute positioning baked by the old fixed-page model.
+            c.style.position = '';
+            c.style.left = '';
+            c.style.top = '';
+            c.style.zIndex = '';
+            return true;
+        });
+    }
+    /** Reposition only the layout bar (used during drag for performance). */
+    updateImageLayoutBarPosition() {
+        if (!this.imgLayoutEl || !this.contentEl)
+            return;
+        const info = this.getSelectedImageInfo();
+        if (!info)
+            return;
+        const containerRect = info.container.getBoundingClientRect();
+        const contentRect = this.contentEl.getBoundingClientRect();
+        const barWidth = this.imgLayoutEl.offsetWidth || 194;
+        let leftPos = (containerRect.left + containerRect.width / 2) - contentRect.left + this.contentEl.scrollLeft - barWidth / 2;
+        leftPos = Math.max(4, Math.min(leftPos, contentRect.width - barWidth - 4));
+        const topPos = containerRect.bottom - contentRect.top + this.contentEl.scrollTop + 8;
+        this.imgLayoutEl.style.left = `${leftPos}px`;
+        this.imgLayoutEl.style.top = `${topPos}px`;
+    }
+    updateImageLayoutBar() {
+        if (!this.imgLayoutEl || !this.editor)
+            return;
+        const info = this.getSelectedImageInfo();
+        if (!info) {
+            if (this.imgLayoutVisible) {
+                this.imgLayoutEl.style.display = 'none';
+                this.imgLayoutVisible = false;
+            }
+            return;
+        }
+        this.imgLayoutEl.style.display = 'flex';
+        this.imgLayoutVisible = true;
+        this.updateImageLayoutBarPosition();
+        const currentLayout = info.node.attrs.imageLayout || 'inline';
+        this.imgLayoutEl.querySelectorAll('.co-rte-img-layout__btn').forEach(btn => {
+            btn.classList.toggle('co-rte-img-layout__btn--active', btn.getAttribute('data-layout') === currentLayout);
+        });
+    }
     render() {
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         const showCount = this.showCharacterCount || this.maxLength != null;
-        return (h("div", { key: 'c853d865716114025949e33e011394d824e4a961', class: {
+        return (h("div", { key: 'd24b8e5db1151bcd983790ea15f68aaf4838ff43', class: {
                 'co-rich-text-editor': true,
                 'co-rich-text-editor--focused': this.hasFocus,
                 'co-rich-text-editor--disabled': this.disabled,
                 'co-rich-text-editor--readonly': this.readonly,
                 'co-rich-text-editor--loading': !this.ready,
                 [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '049a14875b801e745c91f28410474d8139a366e6', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '4221652dd84a86192d84ba8889eafbd311ac27dd', class: "co-rich-text-editor__label", part: "label" }, this.label, h(RequiredMark, { key: '6576f8bdd8c744f6f4fd2990e3c3b58806a03bd4', required: this.required })), this.secondaryLabel && (h("span", { key: '5c28820cf466f06900ae3981b780f6664a14ca08', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '94557b815f4dd9bfd33f2d4ae613554a54a391ad', class: "co-rich-text-editor__box" }, showToolbar && (h("co-rich-text-toolbar", { key: '7727dc54776263c3ef56f274e09d7d851df245d8', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'd81af8d3887e1f77062eb64efe02cda157f77216', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) })), h("div", { key: 'f747db5469b5a805e88101cb7670432dc114c30f', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '80c703179448310e86a16e908cc29edfc73260ba', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: '7411c41c32e7c1845983df2608f604f764585230', name: this.helperIcon, size: 14 }), h("span", { key: 'be108ca9544684e2d6d0dbf68eca65d11f3c841b' }, this.helperText))), showCount && (h("span", { key: '5c88aeb55460778024664510a58ca9d331ef10c7', class: "co-rich-text-editor__count" }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '1622079a94d8ebb190642f91463b715f3456fcf4', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: 'bb5c0754a63d46d45ce8f211ae0f0e8c4ddbc478', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: '1af0a217a38746c3a78693c552be44df6d03b276', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'e5ad90dd90061be3e40136eece0f485e5cfb89a1', class: "co-rich-text-editor__frame" }, showToolbar && (h("co-rich-text-toolbar", { key: '56f3da29e9259cd37fdf6e7511dc54efb30085ca', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, disabled: this.disabled || this.readonly, locale: this.locale, ref: (el) => (this.toolbarEl = el) })), h("div", { key: 'bb0dc27e8625171284cae02b5cae28dcbe638991', class: "co-rich-text-editor__box" }, h("div", { key: '647563e73112023ec546418787dbf61acb58853d', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) }))), h("div", { key: '460dad69fd1781f11d751565d0ca09015013e8ce', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '69d8fb55797eb8f35885fa10e86cf08e4d0e45ec', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'd1c3cc4f06284b865c889dac7492305a4b7d8dfd', name: this.helperIcon, size: 14 }), h("span", { key: '361940f354fcee5a309cd2ef5cff84b73689650e' }, this.helperText))), showCount && (h("span", { key: '2b5a1b6e04ba3d428346034d092bf83978de0124', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
     }
     static get is() { return "co-rich-text-editor"; }
     static get originalStyleUrls() {
@@ -355,26 +2167,6 @@ export class CoRichTextEditor {
                 "reflect": false,
                 "attribute": "helper-text"
             },
-            "layout": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'vertical' | 'horizontal'",
-                    "resolved": "\"horizontal\" | \"vertical\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "layout",
-                "defaultValue": "'vertical'"
-            },
             "status": {
                 "type": "string",
                 "mutable": false,
@@ -602,14 +2394,112 @@ export class CoRichTextEditor {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "fontFamilies": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | { label: string; value: string }[]",
+                    "resolved": "string | undefined | { label: string; value: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Font families available in the bubble menu font selector.\nJS property: `Array<{ label: string; value: string }>`.\nHTML attribute: JSON string of the same array.\nIf not provided, a default list of system fonts is used."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "font-families"
+            },
+            "accountFonts": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | { label: string; value: string }[]",
+                    "resolved": "string | undefined | { label: string; value: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Account/imported fonts shown in a separate \"Imported fonts\" section.\nJS property: `Array<{ label: string; value: string }>`.\nHTML attribute: JSON string of the same array."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "account-fonts"
+            },
+            "fontsLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether account fonts are currently loading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fonts-loading"
+            },
+            "fontLoader": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => Promise<{ label: string; value: string; url?: string }[]>",
+                    "resolved": "(() => Promise<{ label: string; value: string; url?: string | undefined; }[]>) | undefined",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Async callback that loads account/imported fonts.\nCalled once when the font dropdown opens for the first time.\nMust return `Array<{ label: string; value: string; url?: string }>`.\nIf `url` is provided, the font is registered via FontFace API.\nJS property only \u2014 cannot be set via HTML attribute."
+                },
+                "getter": false,
+                "setter": 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'"
             }
         };
     }
     static get states() {
         return {
             "ready": {},
-            "hasFocus": {},
-            "charCount": {}
+            "hasFocus": {}
         };
     }
     static get events() {
@@ -717,6 +2607,36 @@ export class CoRichTextEditor {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "coFontPopupShow",
+                "name": "coFontPopupShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the font dropdown opens \u2014 host should load account fonts."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "coFontPopupHide",
+                "name": "coFontPopupHide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the font dropdown closes."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -855,6 +2775,9 @@ export class CoRichTextEditor {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "accountFonts",
+                "methodName": "onAccountFontsChange"
+            }, {
                 "propName": "value",
                 "methodName": "onValueChange"
             }, {
@@ -866,3 +2789,35 @@ export class CoRichTextEditor {
             }];
     }
 }
+CoRichTextEditor.DEFAULT_FONTS = [
+    { label: 'Arial', value: 'Arial, sans-serif' },
+    { label: 'Calibri', value: 'Calibri, sans-serif' },
+    { label: 'Cambria', value: 'Cambria, serif' },
+    { label: 'Comic Sans MS', value: "'Comic Sans MS', cursive" },
+    { label: 'Courier New', value: "'Courier New', monospace" },
+    { label: 'Georgia', value: 'Georgia, serif' },
+    { label: 'Geist', value: "'Geist', sans-serif" },
+    { label: 'Helvetica', value: 'Helvetica, Arial, sans-serif' },
+    { label: 'Impact', value: 'Impact, sans-serif' },
+    { label: 'Inter', value: "'Inter', sans-serif" },
+    { label: 'Lato', value: "'Lato', sans-serif" },
+    { label: 'Montserrat', value: "'Montserrat', sans-serif" },
+    { label: 'Open Sans', value: "'Open Sans', sans-serif" },
+    { label: 'Poppins', value: "'Poppins', sans-serif" },
+    { label: 'Roboto', value: "'Roboto', sans-serif" },
+    { label: 'Segoe UI', value: "'Segoe UI', sans-serif" },
+    { label: 'Tahoma', value: 'Tahoma, sans-serif' },
+    { label: 'Times New Roman', value: "'Times New Roman', serif" },
+    { label: 'Trebuchet MS', value: "'Trebuchet MS', sans-serif" },
+    { label: 'Verdana', value: 'Verdana, sans-serif' },
+];
+/** Register a font via FontFace API so it can be previewed. */
+CoRichTextEditor._registeredFonts = new Set();
+/* ── Image layout bar (Google-Docs-style toolbar below selected image) ── */
+CoRichTextEditor.IMG_LAYOUT_ICONS = {
+    'inline': 'image-square',
+    'wrap-left': 'text-align-left',
+    'wrap-right': 'text-align-right',
+    'center': 'text-align-center',
+    'full-width': 'arrows-horizontal',
+};