@prolibu-suite/cobalt-core 0.2.0 → 0.3.0

package/dist/esm/co-rich-text-toolbar.entry.js

@@ -1,24 +1,70 @@
-import { r as registerInstance, c as createEvent, h } from './index-BKmfyPZK.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CYsftTKf.js';
+import { g as getRichTextStrings } from './richTextI18n-B-ckjCUA.js';
+import { C as COLOR_PALETTE, T as TABLE_CONTEXT_ITEMS, t as toolbarItems } from './toolbar-config-ChibIpZv.js';
 
-const coRichTextToolbarCss = () => `:host{display:block;font-family:var(--co-font-family-primary)}.co-rich-text-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--co-spacing-xxs, 2px);padding:var(--co-spacing-xs) var(--co-spacing-sm);border-bottom:1px solid var(--co-semantic-border-subtle);background:var(--co-semantic-surface-secondary)}.co-rich-text-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:var(--co-border-radius-xxs);background:transparent;color:var(--co-semantic-text-secondary);cursor:pointer;transition:background 0.12s ease, color 0.12s ease}.co-rich-text-toolbar__btn:hover:not(:disabled){background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));color:var(--co-semantic-text-default)}.co-rich-text-toolbar__btn--active{background:var(--co-semantic-surface-hover, rgba(37, 99, 235, 0.12));color:var(--co-color-primary-azul)}.co-rich-text-toolbar__btn:disabled{opacity:0.4;cursor:not-allowed}.co-rich-text-toolbar__btn:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));outline-offset:1px}`;
+const coRichTextToolbarCss = () => `:host{display:block;font-family:var(--co-font-family-primary);z-index:10;flex-shrink:0;background:var(--co-semantic-surface-secondary, #fff);overflow:visible}.co-rich-text-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--co-spacing-xxs, 2px);padding:var(--co-spacing-xs) var(--co-spacing-sm);border-bottom:1px solid var(--co-semantic-border-subtle);background:var(--co-semantic-surface-secondary)}.co-rich-text-toolbar__btn-wrap,.co-rich-text-toolbar__split-wrap{overflow:visible}[data-tooltip]{position:relative}[data-tooltip]::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);padding:4px 8px;background:var(--co-color-base-negro, #1a1a1a);color:var(--co-color-base-blanco, #fff);font-size:11px;font-weight:500;line-height:1.3;white-space:nowrap;border-radius:4px;pointer-events:none;opacity:0;transition:opacity 0.15s ease;z-index:9999}[data-tooltip]:hover::after{opacity:1;transition-delay:0.4s}[data-tooltip]:active::after,[data-tooltip][aria-expanded="true"]::after{opacity:0 !important;transition-delay:0s}.co-rich-text-toolbar__btn-wrap{position:relative;display:inline-flex}.co-rich-text-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:none;border-radius:var(--co-border-radius-xxs);background:transparent;color:var(--co-semantic-text-default, #333);cursor:pointer;transition:background 0.12s ease, color 0.12s ease}.co-rich-text-toolbar__btn:hover:not(:disabled):not(.co-rich-text-toolbar__btn--active){background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.08));color:var(--co-semantic-text-default, #1a1a1a)}.co-rich-text-toolbar__btn--active{background:var(--co-color-base-negro, #1a1a1a);color:var(--co-color-base-blanco, #fff)}.co-rich-text-toolbar__btn--active:hover{background:var(--co-color-base-negro, #333);color:var(--co-color-base-blanco, #fff)}.co-rich-text-toolbar__btn:disabled{opacity:0.4;cursor:not-allowed}.co-rich-text-toolbar__btn:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-base-negro, #1a1a1a));outline-offset:1px}.co-rich-text-toolbar__select-btn{display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 6px;border:1px solid transparent;border-radius:var(--co-border-radius-xxs, 4px);background:transparent;color:var(--co-semantic-text-default, #333);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);cursor:pointer;white-space:nowrap;transition:background 0.12s, border-color 0.12s}.co-rich-text-toolbar__select-btn:hover:not(:disabled){background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));border-color:var(--co-semantic-border-default, #e0e0e0)}.co-rich-text-toolbar__select-btn--open{background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));border-color:var(--co-semantic-border-default, #e0e0e0)}.co-rich-text-toolbar__select-btn:disabled{opacity:0.4;cursor:not-allowed}.co-rich-text-toolbar__select-label{max-width:100px;overflow:hidden;text-overflow:ellipsis}.co-rich-text-toolbar__sep{display:inline-block;width:1px;height:20px;margin:0 var(--co-spacing-xs, 4px);background:var(--co-semantic-border-subtle, rgba(0, 0, 0, 0.12))}.co-rich-text-toolbar__popover{position:absolute;top:100%;left:0;z-index:100;display:flex;flex-direction:column;gap:var(--co-spacing-xs, 4px);min-width:280px;padding:var(--co-spacing-sm, 8px);background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xs, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);margin-top:var(--co-spacing-xs, 4px)}.co-rich-text-toolbar__popover-input{width:100%;padding:6px 10px;border:1px solid var(--co-semantic-border-default, #ccc);border-radius:var(--co-border-radius-xxs, 4px);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);outline:none;box-sizing:border-box}.co-rich-text-toolbar__popover-input:focus{border-color:var(--co-color-base-negro, #1a1a1a);box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1)}.co-rich-text-toolbar__popover-actions{display:flex;gap:var(--co-spacing-xs, 4px)}.co-rich-text-toolbar__popover-btn{padding:4px 12px;border:1px solid var(--co-semantic-border-default, #ccc);border-radius:var(--co-border-radius-xxs, 4px);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);cursor:pointer;background:var(--co-semantic-surface-secondary, #fff);color:var(--co-semantic-text-default, #333);transition:background 0.12s}.co-rich-text-toolbar__popover-btn:hover:not(.co-rich-text-toolbar__popover-btn--primary){background:var(--co-semantic-surface-hover, #f5f5f5)}.co-rich-text-toolbar__popover-btn--primary{background:var(--co-color-base-negro, #1a1a1a);color:#fff;border-color:var(--co-color-base-negro, #1a1a1a)}.co-rich-text-toolbar__popover-btn--primary:hover{background:var(--co-color-base-negro, #333);color:#fff}.co-rich-text-toolbar__popover-btn--danger{color:var(--co-color-status-error, #aa2e1b);border-color:var(--co-color-status-error, #aa2e1b)}.co-rich-text-toolbar__popover-option{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);width:100%;padding:8px 10px;border:none;border-radius:var(--co-border-radius-xxs, 4px);background:transparent;color:var(--co-semantic-text-default, #333);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);cursor:pointer;text-align:left;transition:background 0.1s}.co-rich-text-toolbar__popover-option:hover{background:var(--co-semantic-surface-hover, #f5f5f5)}.co-rich-text-toolbar__dropdown{position:absolute;top:100%;left:0;z-index:100;display:flex;flex-direction:column;min-width:180px;max-height:360px;overflow-y:auto;padding:var(--co-spacing-xs, 4px);background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xs, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);margin-top:var(--co-spacing-xs, 4px)}.co-rich-text-toolbar__dropdown-item{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);padding:6px 10px;border:none;border-radius:var(--co-border-radius-xxs, 4px);background:transparent;color:var(--co-semantic-text-default, #333);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);cursor:pointer;text-align:left;transition:background 0.12s}.co-rich-text-toolbar__dropdown-item:hover{background:var(--co-semantic-surface-hover, #f5f5f5)}.co-rich-text-toolbar__dropdown-sep{height:1px;margin:4px 0;background:var(--co-semantic-border-default, #e0e0e0)}.co-rich-text-toolbar__dropdown-sep-label{padding:6px 10px 2px;font-family:var(--co-font-family-primary);font-size:11px;font-weight:600;color:var(--co-semantic-text-muted, #999);letter-spacing:0.03em;border-top:1px solid var(--co-semantic-border-default, #e0e0e0);margin-top:2px}.co-rich-text-toolbar__dropdown-input-wrap{padding:6px 8px;border-bottom:1px solid var(--co-semantic-border-default, #e0e0e0)}.co-rich-text-toolbar__dropdown-input{width:100%;padding:4px 8px;border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:4px;font-size:13px;font-family:var(--co-font-family-primary);outline:none;box-sizing:border-box}.co-rich-text-toolbar__dropdown-input:focus{border-color:var(--co-color-base-negro, #1a1a1a);box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1)}.co-rich-text-toolbar__color-picker{position:absolute;top:100%;left:0;z-index:100;display:flex;flex-direction:column;gap:var(--co-spacing-xs, 4px);padding:var(--co-spacing-sm, 8px);background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xs, 8px);box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);margin-top:var(--co-spacing-xs, 4px)}.co-rich-text-toolbar__color-grid{display:grid;grid-template-columns:repeat(10, 1fr);gap:2px}.co-rich-text-toolbar__color-swatch{width:22px;height:22px;padding:0;border:none;border-radius:3px;cursor:pointer;transition:transform 0.1s, box-shadow 0.1s}.co-rich-text-toolbar__color-swatch:hover{transform:scale(1.2);box-shadow:0 0 0 2px var(--co-color-base-negro, #1a1a1a)}.co-rich-text-toolbar__color-clear{display:flex;align-items:center;gap:var(--co-spacing-xs, 4px);padding:4px 8px;border:none;background:transparent;color:var(--co-semantic-text-secondary, #666);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);cursor:pointer;border-radius:var(--co-border-radius-xxs, 4px);margin-top:var(--co-spacing-xxs, 2px)}.co-rich-text-toolbar__color-clear:hover{background:var(--co-semantic-surface-hover, #f5f5f5);color:var(--co-semantic-text-default, #333)}.co-rich-text-toolbar__table-picker{position:absolute;top:100%;left:0;z-index:100;display:flex;flex-direction:column;width:280px;padding:var(--co-spacing-lg, 16px);background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xs, 8px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.12);margin-top:var(--co-spacing-xs, 4px)}.co-rich-text-toolbar__table-header{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);margin-bottom:var(--co-spacing-md, 12px)}.co-rich-text-toolbar__table-title{flex:1;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:600;letter-spacing:0.06em;color:var(--co-semantic-text-secondary, #666)}.co-rich-text-toolbar__table-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--co-border-radius-xxs, 4px);background:transparent;color:var(--co-semantic-text-secondary, #666);cursor:pointer}.co-rich-text-toolbar__table-close:hover{background:var(--co-semantic-surface-hover, #f0f0f0)}.co-rich-text-toolbar__table-tabs{display:flex;gap:0;margin-bottom:var(--co-spacing-md, 12px);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xxs, 4px);overflow:hidden}.co-rich-text-toolbar__table-tab{flex:1;padding:var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-13, 13px);font-weight:500;border:none;background:transparent;color:var(--co-semantic-text-secondary, #666);cursor:pointer;transition:background 0.12s, color 0.12s}.co-rich-text-toolbar__table-tab:hover{background:var(--co-semantic-surface-hover, #f5f5f5)}.co-rich-text-toolbar__table-tab--active{background:var(--co-color-base-negro, #1a1a1a);color:var(--co-color-base-blanco, #fff)}.co-rich-text-toolbar__grid-container{display:flex;flex-direction:column;gap:var(--co-spacing-sm, 8px);margin-bottom:var(--co-spacing-md, 12px)}.co-rich-text-toolbar__grid{display:grid;gap:3px}.co-rich-text-toolbar__grid-cell{width:24px;height:24px;border:1px solid var(--co-semantic-border-default, #d0d0d0);border-radius:3px;background:transparent;cursor:pointer;transition:background 0.08s, border-color 0.08s}.co-rich-text-toolbar__grid-cell:hover,.co-rich-text-toolbar__grid-cell--active{background:var(--co-color-base-negro, #1a1a1a);border-color:var(--co-color-base-negro, #1a1a1a)}.co-rich-text-toolbar__grid-footer{display:flex;align-items:center;justify-content:space-between}.co-rich-text-toolbar__grid-label{font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-muted, #999)}.co-rich-text-toolbar__grid-reset{font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);color:var(--co-semantic-text-default, #333);text-decoration:underline;border:none;background:transparent;cursor:pointer;padding:0}.co-rich-text-toolbar__table-manual{display:flex;flex-direction:column;gap:var(--co-spacing-md, 12px);margin-bottom:var(--co-spacing-md, 12px)}.co-rich-text-toolbar__table-field{display:flex;align-items:center;gap:var(--co-spacing-md, 12px)}.co-rich-text-toolbar__table-field label{font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default, #333);min-width:70px}.co-rich-text-toolbar__table-field input{flex:1;padding:var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xxs, 4px);background:var(--co-semantic-surface-secondary, #fff);outline:none}.co-rich-text-toolbar__table-field input:focus{border-color:var(--co-color-base-negro, #1a1a1a)}.co-rich-text-toolbar__table-check{display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default, #333);cursor:pointer;margin-bottom:var(--co-spacing-md, 12px)}.co-rich-text-toolbar__table-check input{width:18px;height:18px;cursor:pointer;accent-color:var(--co-color-base-negro, #1a1a1a)}.co-rich-text-toolbar__table-actions{display:flex;gap:var(--co-spacing-sm, 8px);justify-content:flex-end}.co-rich-text-toolbar__table-btn{padding:var(--co-spacing-sm, 8px) var(--co-spacing-lg, 16px);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-13, 13px);font-weight:500;border:none;border-radius:var(--co-border-radius-xxs, 4px);cursor:pointer;transition:opacity 0.12s}.co-rich-text-toolbar__table-btn--primary{background:var(--co-color-base-negro, #1a1a1a);color:var(--co-color-base-blanco, #fff)}.co-rich-text-toolbar__table-btn--primary:hover{opacity:0.85}.co-rich-text-toolbar__table-btn--secondary{background:transparent;color:var(--co-semantic-text-default, #333)}.co-rich-text-toolbar__table-btn--secondary:hover{background:var(--co-semantic-surface-hover, #f5f5f5)}.co-rich-text-toolbar__split-wrap{position:relative;display:inline-flex;align-items:center}.co-rich-text-toolbar__split-main{border-top-right-radius:0;border-bottom-right-radius:0;width:28px}.co-rich-text-toolbar__split-caret{display:inline-flex;align-items:center;justify-content:center;width:16px;height:30px;padding:0;border:none;border-radius:var(--co-border-radius-xxs);border-top-left-radius:0;border-bottom-left-radius:0;background:transparent;color:var(--co-semantic-text-default, #333);cursor:pointer;transition:background 0.12s ease}.co-rich-text-toolbar__split-caret:hover:not(:disabled),.co-rich-text-toolbar__split-caret--open{background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.08))}.co-rich-text-toolbar__split-caret:disabled{opacity:0.4;cursor:not-allowed}.co-rich-text-toolbar__listpicker{position:absolute;top:100%;left:0;z-index:100;display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;padding:16px;background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-default, #e0e0e0);border-radius:var(--co-border-radius-xs, 8px);box-shadow:0 8px 24px rgba(0, 0, 0, 0.14);margin-top:var(--co-spacing-xs, 4px)}.co-rich-text-toolbar__listpicker-item{display:flex;align-items:center;justify-content:flex-start;width:76px;height:60px;padding:0;border:1px solid var(--co-semantic-border-default, #e3e3e3);border-radius:8px;background:var(--co-semantic-surface-secondary, #fff);cursor:pointer;transition:border-color 0.12s, box-shadow 0.12s, background 0.12s}.co-rich-text-toolbar__listpicker-item:hover{border-color:var(--co-color-base-negro, #1a1a1a);background:var(--co-semantic-surface-hover, #fafafa)}.co-rich-text-toolbar__listpicker-item--active{border-color:var(--co-color-base-negro, #1a1a1a);box-shadow:0 0 0 1.5px var(--co-color-base-negro, #1a1a1a)}.co-rich-text-toolbar__listpicker-preview{margin:0;padding:0 0 0 22px;list-style-position:outside;pointer-events:none}.co-rich-text-toolbar__listpicker-preview li{height:3px;width:30px;margin:7px 0;background:var(--co-semantic-border-default, #cfcfcf);border-radius:2px}.co-rich-text-toolbar__listpicker-preview li::marker{color:var(--co-color-base-negro, #1a1a1a);font-size:11px;font-weight:600}.co-rich-text-toolbar__listpicker--task{grid-template-columns:repeat(2, 1fr)}.co-rich-text-toolbar__listpicker-item--task{width:92px;justify-content:center}.co-rich-text-toolbar__taskpreview{display:flex;flex-direction:column;gap:9px}.co-rich-text-toolbar__taskpreview-row{display:flex;align-items:center;gap:7px}.co-rich-text-toolbar__taskpreview-box{flex:0 0 auto;width:11px;height:11px;border:1.5px solid var(--co-color-base-negro, #1a1a1a);border-radius:3px;box-sizing:border-box}.co-rich-text-toolbar__taskpreview-box--checked{position:relative;background:var(--co-color-base-negro, #1a1a1a)}.co-rich-text-toolbar__taskpreview-box--checked::after{content:'';position:absolute;left:3px;top:0.5px;width:3px;height:6px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}.co-rich-text-toolbar__taskpreview-line{position:relative;width:34px;height:3px;background:var(--co-semantic-border-default, #cfcfcf);border-radius:2px}.co-rich-text-toolbar__taskpreview[data-variant="strike"] .co-rich-text-toolbar__taskpreview-row--checked .co-rich-text-toolbar__taskpreview-line::after{content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:1.5px;background:var(--co-color-base-negro, #1a1a1a)}.co-rich-text-toolbar__dropdown-check{display:inline-flex;align-items:center;justify-content:center;width:18px;flex-shrink:0}.co-rich-text-toolbar__dropdown-item--active{background:var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04));font-weight:600}.co-rich-text-toolbar__align-group{display:inline-flex;align-items:center;gap:0}.co-rich-text-toolbar__color-indicator{display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1}.co-rich-text-toolbar__color-letter{font-family:var(--co-font-family-primary);font-size:14px;font-weight:700;color:var(--co-semantic-text-default, #333);line-height:1}.co-rich-text-toolbar__color-bar{width:14px;height:3px;border-radius:1px}.co-rich-text-toolbar__color-hex{display:flex;align-items:center;gap:4px;margin-top:6px}.co-rich-text-toolbar__color-hex-input{width:100%;padding:3px 6px;border:1px solid var(--co-semantic-border-default, #ccc);border-radius:3px;background:var(--co-semantic-surface-secondary, #fff);color:var(--co-semantic-text-default, #333);font-family:var(--co-font-family-mono, monospace);font-size:11px;outline:none;box-sizing:border-box}.co-rich-text-toolbar__color-hex-input:focus{border-color:var(--co-color-base-negro, #1a1a1a);box-shadow:0 0 0 2px rgba(0, 0, 0, 0.1)}`;
 
 const CoRichTextToolbar = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.coAction = createEvent(this, "coAction", 7);
+        this.coPopoverChange = createEvent(this, "coPopoverChange", 7);
         /** Toolbar layout variant. */
         this.variant = 'basic';
         this.disabled = false;
+        /** BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English. */
+        this.locale = 'en';
         this.items = [];
         /** Bumped on every editor transaction to refresh active state. */
         this.tick = 0;
-        this.onTransaction = () => { this.tick++; };
+        /** Currently open popover/dropdown (action id) or null. */
+        this.openPopover = null;
+        /** Input value for popover forms (link URL, image URL, etc.). */
+        this.popoverInput = '';
+        /** Table grid picker state. */
+        this.gridHoverRows = 0;
+        this.gridHoverCols = 0;
+        this.gridLockedRows = 0;
+        this.gridLockedCols = 0;
+        this.tableTab = 'grid';
+        this.tableManualRows = 3;
+        this.tableManualCols = 3;
+        this.tableWithHeader = false;
+        /** Table context items shown when cursor is inside a table. */
+        this.tableContextItems = [];
+        /** Image popover sub-view: 'menu' shows options, 'url' shows URL input. */
+        this.imagePopoverMode = 'menu';
+        /** Hex input for toolbar color picker. */
+        this.colorHexInput = '';
+        this.onTransaction = () => {
+            this.tick++;
+            // Show/hide table context buttons based on whether cursor is in a table
+            this.updateTableContext();
+        };
+        this.colorPalette = [];
+        this._tableContextItems = [];
+        /**
+         * Prevent toolbar clicks from stealing focus from the editor.
+         * This handler is on the HOST element (light DOM), which reliably
+         * prevents focus change even when Shadow DOM retargets events.
+         */
+        this.handleHostMouseDown = (e) => {
+            const path = e.composedPath();
+            const isInput = path.some(n => n instanceof HTMLElement && n.tagName === 'INPUT');
+            if (!isInput)
+                e.preventDefault();
+        };
+        this.handleDocumentClick = (e) => {
+            if (!this.openPopover)
+                return;
+            if (this.el.contains(e.target))
+                return;
+            this.closePopover();
+        };
         this.run = (item) => {
             const editor = this.editor;
             if (!editor || this.disabled)
                 return;
-            // Cast: link/undo/redo command types are registered by their extensions,
-            // which are bundled via StarterKit and not visible to core's TS view.
             const chain = editor.chain().focus();
             switch (item.action) {
                 case 'bold':
@@ -42,141 +88,1019 @@ const CoRichTextToolbar = class {
                 case 'orderedList':
                     chain.toggleOrderedList().run();
                     break;
+                // Split-button main area: toggle the list on/off (caret opens styles)
+                case 'bulletListMenu':
+                    chain.toggleBulletList().run();
+                    break;
+                case 'orderedListMenu':
+                    chain.toggleOrderedList().run();
+                    break;
+                case 'taskListMenu':
+                    chain.toggleTaskList().run();
+                    break;
                 case 'blockquote':
                     chain.toggleBlockquote().run();
                     break;
+                case 'codeBlock':
+                    chain.toggleCodeBlock().run();
+                    break;
                 case 'heading':
                     chain.toggleHeading(item.payload).run();
                     break;
+                case 'horizontalRule':
+                    chain.setHorizontalRule().run();
+                    break;
+                case 'textAlign':
+                    chain.setTextAlign(item.payload).run();
+                    break;
                 case 'undo':
                     chain.undo().run();
                     break;
                 case 'redo':
                     chain.redo().run();
                     break;
-                case 'link':
-                    this.toggleLink();
+                // Table context operations
+                case 'addColumnAfter':
+                    chain.addColumnAfter().run();
                     break;
-                case 'image':
-                    this.insertImage();
+                case 'addColumnBefore':
+                    chain.addColumnBefore().run();
+                    break;
+                case 'deleteColumn':
+                    chain.deleteColumn().run();
+                    break;
+                case 'addRowAfter':
+                    chain.addRowAfter().run();
+                    break;
+                case 'addRowBefore':
+                    chain.addRowBefore().run();
+                    break;
+                case 'deleteRow':
+                    chain.deleteRow().run();
+                    break;
+                case 'deleteTable':
+                    chain.deleteTable().run();
+                    break;
+                case 'mergeCells':
+                    chain.mergeCells().run();
+                    break;
+                case 'splitCell':
+                    chain.splitCell().run();
+                    break;
+                case 'toggleHeaderRow':
+                    chain.toggleHeaderRow().run();
+                    break;
+                // popover/dropdown/color/grid actions are handled via toggle
+                case 'indentIncrease':
+                    if (editor.isActive('bulletList') || editor.isActive('orderedList')) {
+                        chain.sinkListItem('listItem').run();
+                    }
+                    else {
+                        chain.indent().run();
+                    }
                     break;
+                case 'indentDecrease':
+                    if (editor.isActive('bulletList') || editor.isActive('orderedList')) {
+                        chain.liftListItem('listItem').run();
+                    }
+                    else {
+                        chain.outdent().run();
+                    }
+                    break;
+                case 'link':
+                case 'image':
+                case 'youtube':
+                case 'iframe':
+                case 'callout':
+                case 'fontSize':
+                case 'fontFamily':
+                case 'headingStyle':
+                case 'lineSpacing':
+                case 'letterSpacing':
+                case 'table':
+                case 'textColor':
+                case 'highlight':
+                    this.togglePopover(item.action);
+                    return; // don't emit action yet
                 default: chain.run();
             }
             this.coAction.emit({ action: item.action, payload: item.payload });
         };
     }
-    async componentWillLoad() {
-        const rt = await import('./index-BjAqSidM.js');
-        this.items = rt.toolbarItems(this.variant === 'none' ? 'compact' : this.variant);
+    get s() {
+        return getRichTextStrings(this.locale);
     }
-    async onVariantChange(v) {
-        const rt = await import('./index-BjAqSidM.js');
-        this.items = rt.toolbarItems((v === 'none' ? 'compact' : v));
+    tItem(item) {
+        var _a;
+        const s = this.s;
+        const map = {
+            bold: s.bold, italic: s.italic, underline: s.underline,
+            strike: s.strikethrough, code: s.code, headingStyle: s.styles,
+            fontSize: s.fontSize, fontFamily: s.font,
+            bulletList: s.bulletList, orderedList: s.orderedList,
+            bulletListMenu: s.bulletList, orderedListMenu: s.orderedList,
+            taskListMenu: s.taskList,
+            blockquote: s.quote, codeBlock: s.codeBlock,
+            horizontalRule: s.horizontalRule,
+            link: s.link, image: s.image, youtube: s.youtubeVideo, iframe: s.iframeEmbed,
+            table: s.table, textColor: s.textColor, highlight: s.highlight,
+            alignment: s.alignment, lineSpacing: s.lineSpacing,
+            letterSpacing: s.letterSpacing,
+            indentIncrease: s.increaseIndent, indentDecrease: s.decreaseIndent,
+            callout: s.callout, undo: s.undo, redo: s.redo,
+            addColumnAfter: s.addColumnAfter, addColumnBefore: s.addColumnBefore,
+            deleteColumn: s.deleteColumn, addRowAfter: s.addRowAfter,
+            addRowBefore: s.addRowBefore, deleteRow: s.deleteRow,
+            deleteTable: s.deleteTable, mergeCells: s.mergeCells,
+            splitCell: s.splitCell, toggleHeaderRow: s.headerRow,
+        };
+        return (_a = map[item.action]) !== null && _a !== void 0 ? _a : item.label;
+    }
+    tOpt(opt) {
+        var _a, _b, _c, _d, _e;
+        const s = this.s;
+        if (opt.action === 'separator')
+            return `─── ${s.systemFonts} ───`;
+        if (opt.action === 'paragraph')
+            return s.normalText;
+        if (opt.action === 'heading') {
+            const level = (_a = opt.payload) === null || _a === void 0 ? void 0 : _a.level;
+            if (level === 1)
+                return s.title;
+            if (level === 2)
+                return s.subtitle;
+            if (level === 3)
+                return s.heading3;
+        }
+        if (opt.action === 'bulletStyle') {
+            const m = { disc: s.disc, circle: s.circle, square: s.square };
+            return (_b = m[opt.payload]) !== null && _b !== void 0 ? _b : opt.label;
+        }
+        if (opt.action === 'taskStyle') {
+            if (opt.payload === 'strike')
+                return s.strikeOnComplete;
+            if (opt.payload === 'plain')
+                return s.noStrikethrough;
+        }
+        if (opt.action === 'textAlign') {
+            const m = { left: s.left, center: s.center, right: s.right, justify: s.justify };
+            return (_c = m[opt.payload]) !== null && _c !== void 0 ? _c : opt.label;
+        }
+        if (opt.action === 'lineHeight') {
+            if (opt.payload === '1')
+                return s.single;
+            if (opt.payload === '2')
+                return s.double;
+        }
+        if (opt.action === 'letterSpacing') {
+            const m = { normal: s.normal, '-0.05em': s.tight, '0.05em': s.light, '0.1em': s.wide, '0.2em': s.veryWide };
+            return (_d = m[opt.payload]) !== null && _d !== void 0 ? _d : opt.label;
+        }
+        if (opt.action === 'callout') {
+            const m = { info: s.info, warning: s.warning, success: s.success, error: s.error };
+            return (_e = m[opt.payload]) !== null && _e !== void 0 ? _e : opt.label;
+        }
+        return opt.label;
+    }
+    connectedCallback() {
+        this.el.addEventListener('mousedown', this.handleHostMouseDown);
+        document.addEventListener('click', this.handleDocumentClick, true);
+    }
+    componentWillLoad() {
+        this.items = this.resolveItems(this.variant);
+        this.colorPalette = COLOR_PALETTE;
+        this._tableContextItems = TABLE_CONTEXT_ITEMS;
+    }
+    onVariantChange(v) {
+        this.items = this.resolveItems(v);
     }
     onEditorChange(next, prev) {
         prev === null || prev === void 0 ? void 0 : prev.off('transaction', this.onTransaction);
         next === null || next === void 0 ? void 0 : next.on('transaction', this.onTransaction);
+        // The active preset decides which extensions are loaded; re-filter now that
+        // we can inspect the editor so a toolbar variant wider than the schema
+        // (e.g. `full` on a preset without tables/images) drops the dead buttons.
+        this.items = this.resolveItems(this.variant);
         this.tick++;
     }
+    /**
+     * Resolve a variant to the items actually usable in the current editor:
+     * hide any control whose extension the active preset didn't load, then
+     * collapse the separators left dangling by the removals. Until the editor is
+     * wired we can't inspect the schema, so the full variant is shown and
+     * re-filtered from `onEditorChange`.
+     */
+    resolveItems(variant) {
+        const base = toolbarItems((variant === 'none' ? 'compact' : variant));
+        const editor = this.editor;
+        if (!editor)
+            return base;
+        const available = (cmd) => {
+            try {
+                return typeof editor.can()[cmd] === 'function';
+            }
+            catch (_a) {
+                return true; // never hide a control because a probe threw
+            }
+        };
+        const kept = base.filter((entry) => {
+            if (this.isSeparator(entry))
+                return true;
+            const cmd = CoRichTextToolbar.ITEM_COMMAND[entry.action];
+            return cmd ? available(cmd) : true;
+        });
+        // Drop separators that ended up leading, trailing, or doubled-up.
+        const out = [];
+        for (const entry of kept) {
+            if (this.isSeparator(entry) && (!out.length || this.isSeparator(out[out.length - 1])))
+                continue;
+            out.push(entry);
+        }
+        if (out.length && this.isSeparator(out[out.length - 1]))
+            out.pop();
+        return out;
+    }
+    onOpenPopoverChange(next, prev) {
+        if (!!next === !!prev)
+            return;
+        this.coPopoverChange.emit({ open: !!next });
+    }
     disconnectedCallback() {
         var _a;
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.off('transaction', this.onTransaction);
+        this.el.removeEventListener('mousedown', this.handleHostMouseDown);
+        document.removeEventListener('click', this.handleDocumentClick, true);
+    }
+    updateTableContext() {
+        if (!this.editor) {
+            if (this.tableContextItems.length)
+                this.tableContextItems = [];
+            return;
+        }
+        const isInTable = this.editor.isActive('table');
+        if (isInTable && !this.tableContextItems.length) {
+            this.tableContextItems = this._tableContextItems;
+        }
+        else if (!isInTable && this.tableContextItems.length) {
+            this.tableContextItems = [];
+        }
+    }
+    isSeparator(entry) {
+        return entry.type === 'separator';
     }
     isActive(item) {
         if (!this.editor)
             return false;
-        if (item.type !== 'toggle')
-            return false;
         try {
-            return this.editor.isActive(item.action, item.payload);
+            if (item.action === 'textAlign')
+                return this.editor.isActive({ textAlign: item.payload });
+            if (item.action === 'heading')
+                return this.editor.isActive('heading', item.payload);
+            if (item.action === 'bulletListMenu')
+                return this.editor.isActive('bulletList');
+            if (item.action === 'orderedListMenu')
+                return this.editor.isActive('orderedList');
+            if (item.action === 'taskListMenu')
+                return this.editor.isActive('taskList');
+            if (item.action === 'iframe')
+                return this.editor.isActive('iframe');
+            if (item.action === 'youtube')
+                return this.editor.isActive('youtube');
+            if (item.type === 'toggle')
+                return this.editor.isActive(item.action);
+        }
+        catch ( /* ignore */_a) { /* ignore */ }
+        return false;
+    }
+    /** Toolbar icon that reflects current state (e.g. alignment shows the active alignment). */
+    getDynamicIcon(item) {
+        if (item.action === 'alignment' && this.editor) {
+            if (this.editor.isActive({ textAlign: 'center' }))
+                return 'text-align-center';
+            if (this.editor.isActive({ textAlign: 'right' }))
+                return 'text-align-right';
+            if (this.editor.isActive({ textAlign: 'justify' }))
+                return 'text-align-justify';
+            return 'text-align-left';
+        }
+        return item.icon;
+    }
+    togglePopover(action) {
+        var _a, _b;
+        if (this.openPopover === action) {
+            this.openPopover = null;
+            this.popoverInput = '';
+        }
+        else {
+            this.openPopover = action;
+            this.popoverInput = '';
+            // Pre-fill URL if editing existing link or iframe
+            if (action === 'link' && ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isActive('link'))) {
+                this.popoverInput = this.editor.getAttributes('link').href || '';
+            }
+            else if (action === 'iframe' && ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.isActive('iframe'))) {
+                this.popoverInput = this.editor.getAttributes('iframe').src || '';
+            }
+        }
+    }
+    closePopover() {
+        this.openPopover = null;
+        this.popoverInput = '';
+        this.colorHexInput = '';
+        this.imagePopoverMode = 'menu';
+        this.gridLockedRows = 0;
+        this.gridLockedCols = 0;
+        this.gridHoverRows = 0;
+        this.gridHoverCols = 0;
+    }
+    submitPopover(action) {
+        const editor = this.editor;
+        if (!editor || !this.popoverInput.trim()) {
+            this.closePopover();
+            return;
+        }
+        const url = this.popoverInput.trim();
+        const isEmbed = action === 'youtube' || action === 'iframe';
+        if (isEmbed) {
+            editor.view.focus();
+        }
+        const chain = isEmbed
+            ? editor.chain()
+            : editor.chain().focus();
+        switch (action) {
+            case 'link':
+                chain.setLink({ href: url }).run();
+                break;
+            case 'image':
+                chain.setImage({ src: url }).run();
+                break;
+            case 'youtube':
+                chain.setYoutubeVideo({ src: url }).run();
+                break;
+            case 'iframe':
+                if (editor.isActive('iframe')) {
+                    chain.updateIframe({ src: url }).run();
+                }
+                else {
+                    chain.setIframe({ src: url }).run();
+                }
+                break;
+        }
+        this.coAction.emit({ action, payload: url });
+        this.closePopover();
+        if (isEmbed)
+            this.smoothScrollToInserted();
+    }
+    smoothScrollToInserted() {
+        requestAnimationFrame(() => {
+            const editor = this.editor;
+            if (!editor)
+                return;
+            const dom = editor.view.dom;
+            const selected = dom.querySelector('.ProseMirror-selectednode');
+            if (selected) {
+                selected.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                return;
+            }
+            const { from } = editor.state.selection;
+            const resolved = editor.state.doc.resolve(from);
+            if (resolved.nodeBefore) {
+                try {
+                    const nodeDom = editor.view.nodeDOM(from - resolved.nodeBefore.nodeSize);
+                    if (nodeDom instanceof HTMLElement) {
+                        nodeDom.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    }
+                }
+                catch ( /* ignore */_a) { /* ignore */ }
+            }
+        });
+    }
+    removeLink() {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        editor.chain().focus().unsetLink().run();
+        this.coAction.emit({ action: 'link', payload: null });
+        this.closePopover();
+    }
+    removeIframe() {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        editor.chain().focus().deleteSelection().run();
+        this.coAction.emit({ action: 'iframe', payload: null });
+        this.closePopover();
+    }
+    selectColor(action, color) {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        const chain = editor.chain().focus();
+        if (action === 'textColor') {
+            chain.setColor(color).run();
+        }
+        else if (action === 'highlight') {
+            chain.setHighlight({ color }).run();
+        }
+        this.coAction.emit({ action, payload: color });
+        this.closePopover();
+    }
+    clearColor(action) {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        const chain = editor.chain().focus();
+        if (action === 'textColor') {
+            chain.unsetColor().run();
+        }
+        else if (action === 'highlight') {
+            chain.unsetHighlight().run();
         }
-        catch (_a) {
+        this.coAction.emit({ action, payload: null });
+        this.closePopover();
+    }
+    /**
+     * Whether an action is allowed in the current selection. Beyond undo/redo,
+     * this disables commands that would produce content the editor can't
+     * represent — most importantly the Table button while the cursor is already
+     * inside a table, since nested tables are invalid and corrupt the document
+     * when it's reloaded (tiptap throws "Invalid HTML content" on such markup).
+     *
+     * Each command is probed through tiptap's `can()` dry-run, so a button also
+     * disables automatically anywhere ProseMirror's schema would reject it (e.g.
+     * marks inside a code block). The probe defaults to enabled on any error or
+     * unknown command so a quirk never makes a control silently disappear.
+     */
+    /**
+     * Whether an action can run *right now*. Extension availability is already
+     * handled by `resolveItems` (unavailable controls aren't rendered), so this
+     * only covers the dynamic, cursor-dependent cases: the hard "no table inside
+     * a table" rule, and position validity (e.g. marks inside a code block) via
+     * tiptap's `can()` dry-run. A thrown dry-run defaults to enabled so a quirk
+     * never makes a visible control silently lock up.
+     */
+    canRun(item) {
+        if (!this.editor || this.disabled)
             return false;
+        const editor = this.editor;
+        const can = editor.can();
+        const probe = (name, ...args) => {
+            if (typeof can[name] !== 'function')
+                return true;
+            try {
+                return can[name](...args);
+            }
+            catch (_a) {
+                return true;
+            }
+        };
+        switch (item.action) {
+            case 'undo': return probe('undo');
+            case 'redo': return probe('redo');
+            // Hard rule: a table can never nest inside another table.
+            case 'table': return !editor.isActive('table');
+            case 'bold': return probe('toggleBold');
+            case 'italic': return probe('toggleItalic');
+            case 'underline': return probe('toggleUnderline');
+            case 'strike': return probe('toggleStrike');
+            case 'code': return probe('toggleCode');
+            case 'blockquote': return probe('toggleBlockquote');
+            case 'codeBlock': return probe('toggleCodeBlock');
+            case 'horizontalRule': return probe('setHorizontalRule');
+            case 'bulletList':
+            case 'bulletListMenu': return probe('toggleBulletList');
+            case 'orderedList':
+            case 'orderedListMenu': return probe('toggleOrderedList');
+            case 'taskListMenu': return probe('toggleTaskList');
+            default: return true;
+        }
+    }
+    getDropdownLabel(item) {
+        if (!this.editor)
+            return null;
+        const s = this.s;
+        if (item.action === 'headingStyle') {
+            if (this.editor.isActive('heading', { level: 1 }))
+                return s.title;
+            if (this.editor.isActive('heading', { level: 2 }))
+                return s.subtitle;
+            if (this.editor.isActive('heading', { level: 3 }))
+                return s.headingAbbr3;
+            return s.normal;
         }
+        if (item.action === 'fontSize') {
+            const attrs = this.editor.getAttributes('textStyle');
+            const fs = attrs === null || attrs === void 0 ? void 0 : attrs.fontSize;
+            return fs ? fs.replace('px', '') : '16';
+        }
+        if (item.action === 'fontFamily') {
+            const attrs = this.editor.getAttributes('textStyle');
+            const ff = attrs === null || attrs === void 0 ? void 0 : attrs.fontFamily;
+            if (!ff)
+                return 'Sans-serif';
+            const match = ff.replace(/['"]/g, '').split(',')[0].trim();
+            return match.length > 10 ? match.substring(0, 10) + '…' : match;
+        }
+        return null;
+    }
+    getActiveColor(action) {
+        var _a, _b;
+        if (!this.editor)
+            return action === 'textColor' ? '#000000' : 'transparent';
+        const attrs = this.editor.getAttributes('textStyle');
+        if (action === 'textColor')
+            return (_a = attrs === null || attrs === void 0 ? void 0 : attrs.color) !== null && _a !== void 0 ? _a : '#000000';
+        const hlAttrs = this.editor.getAttributes('highlight');
+        return (_b = hlAttrs === null || hlAttrs === void 0 ? void 0 : hlAttrs.color) !== null && _b !== void 0 ? _b : 'transparent';
     }
-    /** Accept only fetchable URL schemes from the prompt (no javascript: etc.). */
-    static safeUrl(raw, schemes) {
+    renderButton(item) {
         var _a, _b;
-        const url = raw === null || raw === void 0 ? void 0 : raw.trim();
-        if (!url)
+        const isPopoverType = item.type === 'popover' || item.type === 'dropdown' || item.type === 'color' || item.type === 'grid';
+        const isOpen = this.openPopover === item.action;
+        const isLabelDropdown = item.action === 'headingStyle' || item.action === 'fontSize' || item.action === 'fontFamily';
+        const dropdownLabel = isLabelDropdown ? this.getDropdownLabel(item) : null;
+        // Alignment: render as icon-only button group (Google Docs style)
+        if (item.action === 'alignment' && ((_a = item.options) === null || _a === void 0 ? void 0 : _a.length)) {
+            return this.renderAlignmentGroup(item);
+        }
+        // Split button: main area toggles, caret opens the marker-style grid.
+        if (item.type === 'listpicker') {
+            const active = this.isActive(item);
+            const label = this.tItem(item);
+            return (h("div", { class: "co-rich-text-toolbar__split-wrap", key: item.action }, h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__btn': true,
+                    'co-rich-text-toolbar__split-main': true,
+                    'co-rich-text-toolbar__btn--active': active,
+                }, "data-tooltip": label, "aria-label": label, "aria-pressed": String(active), disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.run(item), part: "button" }, h("co-icon", { name: item.icon, size: 18 })), h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__split-caret': true,
+                    'co-rich-text-toolbar__split-caret--open': isOpen,
+                }, "data-tooltip": `${this.s.stylesPrefix} ${label}`, "aria-label": `${this.s.stylesPrefix} ${label}`, "aria-expanded": String(isOpen), disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.togglePopover(item.action) }, h("co-icon", { name: "caret-down", size: 10 })), isOpen && this.renderListPicker(item)));
+        }
+        // Color buttons: render with color indicator bar
+        if (item.type === 'color') {
+            return this.renderColorButton(item);
+        }
+        const itemLabel = this.tItem(item);
+        return (h("div", { class: "co-rich-text-toolbar__btn-wrap", key: `${item.action}-${JSON.stringify((_b = item.payload) !== null && _b !== void 0 ? _b : '')}` }, isLabelDropdown ? (h("button", { type: "button", class: {
+                'co-rich-text-toolbar__select-btn': true,
+                'co-rich-text-toolbar__select-btn--open': isOpen,
+            }, "data-tooltip": itemLabel, "aria-label": itemLabel, "aria-expanded": String(isOpen), disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.run(item), part: "button" }, h("span", { class: "co-rich-text-toolbar__select-label" }, dropdownLabel), h("co-icon", { name: "caret-down", size: 10 }))) : (h("button", { type: "button", class: {
+                'co-rich-text-toolbar__btn': true,
+                'co-rich-text-toolbar__btn--active': this.isActive(item) || isOpen,
+            }, "data-tooltip": itemLabel, "aria-label": itemLabel, "aria-pressed": item.type === 'toggle' ? String(this.isActive(item)) : undefined, "aria-expanded": isPopoverType ? String(isOpen) : undefined, disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.run(item), part: "button" }, h("co-icon", { name: this.getDynamicIcon(item), size: 18 }))), isOpen && item.type === 'popover' && this.renderInputPopover(item), isOpen && item.type === 'dropdown' && this.renderDropdown(item), isOpen && item.type === 'grid' && this.renderTableGrid()));
+    }
+    renderAlignmentGroup(item) {
+        const s = this.s;
+        const alignLabels = {
+            left: s.alignLeft, center: s.center, right: s.alignRight, justify: s.justify,
+        };
+        return (h("div", { class: "co-rich-text-toolbar__align-group", key: item.action }, item.options.map((opt) => {
+            var _a, _b, _c;
+            const active = (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.isActive({ textAlign: opt.payload })) !== null && _b !== void 0 ? _b : false;
+            const label = (_c = alignLabels[opt.payload]) !== null && _c !== void 0 ? _c : opt.label;
+            return (h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__btn': true,
+                    'co-rich-text-toolbar__btn--active': active,
+                }, "data-tooltip": label, "aria-label": label, "aria-pressed": String(active), disabled: !this.editor || this.disabled, onMouseDown: (e) => e.preventDefault(), onClick: () => {
+                    if (!this.editor)
+                        return;
+                    this.editor.chain().focus().setTextAlign(opt.payload).run();
+                    this.coAction.emit({ action: 'textAlign', payload: opt.payload });
+                }, part: "button" }, h("co-icon", { name: opt.icon, size: 18 })));
+        })));
+    }
+    renderColorButton(item) {
+        const isOpen = this.openPopover === item.action;
+        const itemLabel = this.tItem(item);
+        const activeColor = this.getActiveColor(item.action);
+        const isTextColor = item.action === 'textColor';
+        return (h("div", { class: "co-rich-text-toolbar__btn-wrap", key: item.action }, h("button", { type: "button", class: {
+                'co-rich-text-toolbar__btn': true,
+                'co-rich-text-toolbar__btn--active': isOpen,
+            }, "data-tooltip": itemLabel, "aria-label": itemLabel, "aria-expanded": String(isOpen), disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.run(item), part: "button" }, isTextColor ? (h("span", { class: "co-rich-text-toolbar__color-indicator" }, h("span", { class: "co-rich-text-toolbar__color-letter" }, "A"), h("span", { class: "co-rich-text-toolbar__color-bar", style: { background: activeColor } }))) : (h("span", { class: "co-rich-text-toolbar__color-indicator" }, h("co-icon", { name: item.icon, size: 16 }), h("span", { class: "co-rich-text-toolbar__color-bar", style: { background: activeColor === 'transparent' ? '#cccccc' : activeColor } })))), isOpen && this.renderColorPicker(item)));
+    }
+    /** Visual grid of list-marker styles (Google-Docs style). */
+    renderListPicker(item) {
+        var _a, _b;
+        if (!((_a = item.options) === null || _a === void 0 ? void 0 : _a.length))
             return null;
-        const scheme = (_b = (_a = /^([a-z][a-z0-9+.-]*):/i.exec(url)) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toLowerCase();
-        if (!scheme)
-            return url; // relative URL
-        return schemes.includes(scheme) ? url : null;
+        if (item.action === 'taskListMenu')
+            return this.renderTaskListPicker(item);
+        const isOrdered = item.action === 'orderedListMenu';
+        const activeStyle = this.editor
+            ? (_b = this.editor.getAttributes(isOrdered ? 'orderedList' : 'bulletList')) === null || _b === void 0 ? void 0 : _b.listStyleType
+            : null;
+        return (h("div", { class: "co-rich-text-toolbar__listpicker", onMouseDown: (e) => { e.preventDefault(); e.stopPropagation(); } }, item.options.map((opt) => {
+            const isActive = activeStyle === opt.payload;
+            return (h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__listpicker-item': true,
+                    'co-rich-text-toolbar__listpicker-item--active': isActive,
+                }, "data-tooltip": opt.label, onMouseDown: (e) => e.preventDefault(), onClick: () => this.applyListStyle(isOrdered, opt.payload) }, h("ol", { class: {
+                    'co-rich-text-toolbar__listpicker-preview': true,
+                    'co-rich-text-toolbar__listpicker-preview--ordered': isOrdered,
+                }, style: { 'list-style-type': opt.payload } }, h("li", null), h("li", null), h("li", null))));
+        })));
+    }
+    /** Visual picker for task-list variants (checkboxes; strike vs plain). */
+    renderTaskListPicker(item) {
+        var _a, _b;
+        const activeVariant = this.editor && this.editor.isActive('taskList')
+            ? ((_b = (_a = this.editor.getAttributes('taskList')) === null || _a === void 0 ? void 0 : _a.variant) !== null && _b !== void 0 ? _b : 'strike')
+            : null;
+        return (h("div", { class: "co-rich-text-toolbar__listpicker co-rich-text-toolbar__listpicker--task", onMouseDown: (e) => { e.preventDefault(); e.stopPropagation(); } }, item.options.map((opt) => {
+            const variant = opt.payload;
+            const isActive = activeVariant === variant;
+            return (h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__listpicker-item': true,
+                    'co-rich-text-toolbar__listpicker-item--task': true,
+                    'co-rich-text-toolbar__listpicker-item--active': isActive,
+                }, "data-tooltip": opt.label, onMouseDown: (e) => e.preventDefault(), onClick: () => this.applyTaskStyle(variant) }, h("span", { class: "co-rich-text-toolbar__taskpreview", "data-variant": variant }, h("span", { class: "co-rich-text-toolbar__taskpreview-row" }, h("span", { class: "co-rich-text-toolbar__taskpreview-box" }), h("span", { class: "co-rich-text-toolbar__taskpreview-line" })), h("span", { class: "co-rich-text-toolbar__taskpreview-row co-rich-text-toolbar__taskpreview-row--checked" }, h("span", { class: "co-rich-text-toolbar__taskpreview-box co-rich-text-toolbar__taskpreview-box--checked" }), h("span", { class: "co-rich-text-toolbar__taskpreview-line" })))));
+        })));
     }
-    toggleLink() {
+    applyListStyle(isOrdered, style) {
         const editor = this.editor;
         if (!editor)
             return;
         const chain = editor.chain().focus();
-        if (editor.isActive('link')) {
-            chain.unsetLink().run();
+        // Ensure the right list type is active, then apply the marker style.
+        if (isOrdered) {
+            if (!editor.isActive('orderedList'))
+                chain.toggleOrderedList();
+        }
+        else {
+            if (!editor.isActive('bulletList'))
+                chain.toggleBulletList();
+        }
+        chain.setListStyleType(style).run();
+        this.coAction.emit({ action: isOrdered ? 'orderedStyle' : 'bulletStyle', payload: style });
+        this.closePopover();
+    }
+    applyTaskStyle(variant) {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        const chain = editor.chain().focus();
+        if (!editor.isActive('taskList'))
+            chain.toggleTaskList();
+        chain.setTaskListVariant(variant).run();
+        this.coAction.emit({ action: 'taskStyle', payload: variant });
+        this.closePopover();
+    }
+    renderInputPopover(item) {
+        var _a, _b;
+        if (item.action === 'image')
+            return this.renderImagePopover();
+        const isLink = item.action === 'link';
+        const isIframe = item.action === 'iframe';
+        const hasExisting = (isLink && ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.isActive('link'))) || (isIframe && ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.isActive('iframe')));
+        const placeholder = item.action === 'iframe'
+            ? this.s.iframeUrlPlaceholder
+            : item.action === 'link'
+                ? 'https://...'
+                : this.s.youtubeUrlPlaceholder;
+        return (h("div", { class: "co-rich-text-toolbar__popover", onMouseDown: (e) => {
+                if (e.target.tagName !== 'INPUT')
+                    e.preventDefault();
+                e.stopPropagation();
+            } }, h("input", { type: "url", class: "co-rich-text-toolbar__popover-input", placeholder: placeholder, value: this.popoverInput, onInput: (e) => { this.popoverInput = e.target.value; }, onKeyDown: (e) => {
+                if (e.key === 'Enter')
+                    this.submitPopover(item.action);
+                if (e.key === 'Escape')
+                    this.closePopover();
+            }, ref: (el) => el && setTimeout(() => el.focus(), 0) }), h("div", { class: "co-rich-text-toolbar__popover-actions" }, h("button", { type: "button", class: "co-rich-text-toolbar__popover-btn co-rich-text-toolbar__popover-btn--primary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.submitPopover(item.action) }, this.s.add), hasExisting && (h("button", { type: "button", class: "co-rich-text-toolbar__popover-btn co-rich-text-toolbar__popover-btn--danger", onMouseDown: (e) => e.preventDefault(), onClick: () => isLink ? this.removeLink() : this.removeIframe() }, this.s.remove)), h("button", { type: "button", class: "co-rich-text-toolbar__popover-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => this.closePopover() }, this.s.cancel))));
+    }
+    renderImagePopover() {
+        if (this.imagePopoverMode === 'url') {
+            return (h("div", { class: "co-rich-text-toolbar__popover", onMouseDown: (e) => {
+                    if (e.target.tagName !== 'INPUT')
+                        e.preventDefault();
+                    e.stopPropagation();
+                } }, h("input", { type: "url", class: "co-rich-text-toolbar__popover-input", placeholder: this.s.imageUrlPlaceholder, value: this.popoverInput, onInput: (e) => { this.popoverInput = e.target.value; }, onKeyDown: (e) => {
+                    if (e.key === 'Enter')
+                        this.submitPopover('image');
+                    if (e.key === 'Escape') {
+                        this.imagePopoverMode = 'menu';
+                    }
+                }, ref: (el) => el && setTimeout(() => el.focus(), 0) }), h("div", { class: "co-rich-text-toolbar__popover-actions" }, h("button", { type: "button", class: "co-rich-text-toolbar__popover-btn co-rich-text-toolbar__popover-btn--primary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.submitPopover('image') }, this.s.add), h("button", { type: "button", class: "co-rich-text-toolbar__popover-btn", onMouseDown: (e) => e.preventDefault(), onClick: () => { this.imagePopoverMode = 'menu'; } }, this.s.back))));
+        }
+        return (h("div", { class: "co-rich-text-toolbar__popover", onMouseDown: (e) => { e.preventDefault(); e.stopPropagation(); } }, h("button", { type: "button", class: "co-rich-text-toolbar__popover-option", onMouseDown: (e) => e.preventDefault(), onClick: () => this.triggerImageFileUpload() }, h("co-icon", { name: "upload-simple", size: 16 }), h("span", null, this.s.uploadFromComputer)), h("button", { type: "button", class: "co-rich-text-toolbar__popover-option", onMouseDown: (e) => e.preventDefault(), onClick: () => { this.imagePopoverMode = 'url'; } }, h("co-icon", { name: "link", size: 16 }), h("span", null, this.s.viaUrl))));
+    }
+    triggerImageFileUpload() {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.onchange = () => {
+            var _a;
+            const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+            if (!file || !this.editor)
+                return;
+            const reader = new FileReader();
+            reader.onload = () => {
+                const base64 = reader.result;
+                this.editor.chain().focus().setImage({ src: base64 }).run();
+                if (this.imageUpload) {
+                    this.imageUpload(file).then((result) => {
+                        var _a;
+                        const newAttrs = typeof result === 'string'
+                            ? { src: result }
+                            : { src: result.src, dataFileId: (_a = result.fileId) !== null && _a !== void 0 ? _a : null };
+                        const { state } = this.editor.view;
+                        state.doc.descendants((node, pos) => {
+                            if (node.type.name === 'image' && node.attrs.src === base64) {
+                                const tr = this.editor.view.state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), newAttrs));
+                                this.editor.view.dispatch(tr);
+                                return false;
+                            }
+                        });
+                    }).catch(() => { });
+                }
+                this.coAction.emit({ action: 'image', payload: base64 });
+            };
+            reader.readAsDataURL(file);
+            this.closePopover();
+        };
+        input.click();
+    }
+    isDropdownOptionActive(opt) {
+        var _a, _b, _c;
+        if (!this.editor)
+            return false;
+        try {
+            if (opt.action === 'textAlign')
+                return this.editor.isActive({ textAlign: opt.payload });
+            if (opt.action === 'lineHeight') {
+                const attrs = this.editor.getAttributes('paragraph');
+                return ((_a = attrs === null || attrs === void 0 ? void 0 : attrs.lineHeight) !== null && _a !== void 0 ? _a : null) === ((_b = opt.payload) !== null && _b !== void 0 ? _b : null);
+            }
+            if (opt.action === 'letterSpacing') {
+                const attrs = this.editor.getAttributes('textStyle');
+                const cur = (_c = attrs === null || attrs === void 0 ? void 0 : attrs.letterSpacing) !== null && _c !== void 0 ? _c : null;
+                if (opt.payload === 'normal')
+                    return cur === null || cur === 'normal';
+                return cur === opt.payload;
+            }
+            if (opt.action === 'heading')
+                return this.editor.isActive('heading', opt.payload);
+            if (opt.action === 'paragraph')
+                return !this.editor.isActive('heading');
+        }
+        catch ( /* ignore */_d) { /* ignore */ }
+        return false;
+    }
+    /** Apply a free-form value typed into a dropdown's custom input. */
+    applyDropdownCustom(action, raw) {
+        const editor = this.editor;
+        const value = raw.trim();
+        if (!editor || !value)
             return;
+        const chain = editor.chain().focus();
+        if (action === 'fontSize') {
+            const n = parseFloat(value);
+            if (!(n > 0))
+                return;
+            chain.setFontSize(/^\d+(\.\d+)?$/.test(value) ? `${n}px` : value).run();
         }
-        const raw = typeof window !== 'undefined' ? window.prompt('Enter URL') : null;
-        const url = CoRichTextToolbar.safeUrl(raw, ['http', 'https', 'mailto', 'tel']);
-        if (url)
-            chain.setLink({ href: url }).run();
+        else if (action === 'lineSpacing') {
+            chain.setLineHeight(value).run();
+        }
+        else if (action === 'letterSpacing') {
+            if (value === 'normal')
+                chain.unsetLetterSpacing().run();
+            else
+                chain.setLetterSpacing(value).run();
+        }
+        this.closePopover();
     }
-    insertImage() {
+    renderDropdown(item) {
+        var _a;
+        if (!((_a = item.options) === null || _a === void 0 ? void 0 : _a.length))
+            return null;
+        const isFontSize = item.action === 'fontSize';
+        const isFontFamily = item.action === 'fontFamily';
+        const isHeadingStyle = item.action === 'headingStyle';
+        const isAlignment = item.action === 'alignment';
+        const isLineSpacing = item.action === 'lineSpacing';
+        const isLetterSpacing = item.action === 'letterSpacing';
+        const showCheckmarks = isAlignment || isLineSpacing || isLetterSpacing || isHeadingStyle;
+        const customInput = isFontSize
+            ? { placeholder: this.s.sizePlaceholder }
+            : isLineSpacing
+                ? { placeholder: this.s.lineSpacingPlaceholder }
+                : isLetterSpacing
+                    ? { placeholder: this.s.letterSpacingPlaceholder }
+                    : null;
+        return (h("div", { class: "co-rich-text-toolbar__dropdown", onMouseDown: (e) => { e.preventDefault(); e.stopPropagation(); } }, customInput && (h("div", { class: "co-rich-text-toolbar__dropdown-input-wrap" }, h("input", { type: "text", class: "co-rich-text-toolbar__dropdown-input", placeholder: customInput.placeholder, onMouseDown: (e) => e.stopPropagation(), onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    this.applyDropdownCustom(item.action, e.target.value);
+                    e.target.value = '';
+                }
+                else if (e.key === 'Escape') {
+                    this.closePopover();
+                }
+            } }))), item.options.map((opt) => {
+            var _a;
+            if (opt.action === 'separator') {
+                return (h("div", { class: "co-rich-text-toolbar__dropdown-sep-label" }, h("span", null, this.tOpt(opt))));
+            }
+            const style = {};
+            const active = showCheckmarks && this.isDropdownOptionActive(opt);
+            if (isHeadingStyle) {
+                if (opt.action === 'heading') {
+                    const lvl = (_a = opt.payload) === null || _a === void 0 ? void 0 : _a.level;
+                    style.fontSize = lvl === 1 ? '20px' : lvl === 2 ? '16px' : '14px';
+                    style.fontWeight = '600';
+                }
+            }
+            if (isFontFamily && opt.payload) {
+                style.fontFamily = opt.payload;
+            }
+            return (h("button", { type: "button", class: {
+                    'co-rich-text-toolbar__dropdown-item': true,
+                    'co-rich-text-toolbar__dropdown-item--active': active,
+                }, style: style, onMouseDown: (e) => e.preventDefault(), onClick: () => this.handleDropdownSelect(item, opt) }, showCheckmarks && (h("span", { class: "co-rich-text-toolbar__dropdown-check" }, active ? h("co-icon", { name: "check", size: 14 }) : null)), opt.icon && h("co-icon", { name: opt.icon, size: 16 }), h("span", null, this.tOpt(opt))));
+        })));
+    }
+    handleDropdownSelect(item, opt) {
         const editor = this.editor;
-        if (!(editor === null || editor === void 0 ? void 0 : editor.schema.nodes.image))
+        if (!editor)
             return;
-        const raw = typeof window !== 'undefined' ? window.prompt('Image URL') : null;
-        const url = CoRichTextToolbar.safeUrl(raw, ['http', 'https']);
-        if (url)
-            editor.chain().focus().setImage({ src: url }).run();
-    }
-    /** Hide buttons whose node/mark isn't in the editor's schema — e.g. the
-     *  image button on the `full` toolbar with a preset that has no image node
-     *  (clicking it would call an unregistered command and throw). */
-    supportedBySchema(item) {
+        const chain = editor.chain().focus();
+        switch (opt.action) {
+            case 'heading':
+                chain.toggleHeading(opt.payload).run();
+                break;
+            case 'paragraph':
+                chain.setParagraph().run();
+                break;
+            case 'fontSize':
+                chain.setFontSize(opt.payload).run();
+                break;
+            case 'fontFamily':
+                chain.setFontFamily(opt.payload).run();
+                break;
+            case 'textAlign':
+                chain.setTextAlign(opt.payload).run();
+                break;
+            case 'lineHeight':
+                chain.setLineHeight(opt.payload).run();
+                break;
+            case 'letterSpacing':
+                if (opt.payload === 'normal')
+                    chain.unsetLetterSpacing().run();
+                else
+                    chain.setLetterSpacing(opt.payload).run();
+                break;
+            case 'callout':
+                chain.insertCallout(opt.payload).run();
+                break;
+        }
+        this.coAction.emit({ action: opt.action, payload: opt.payload });
+        this.closePopover();
+    }
+    renderTableGrid() {
+        return (h("div", { class: "co-rich-text-toolbar__table-picker", onMouseDown: (e) => {
+                if (e.target.tagName !== 'INPUT')
+                    e.preventDefault();
+                e.stopPropagation();
+            } }, h("div", { class: "co-rich-text-toolbar__table-header" }, h("co-icon", { name: "table", size: 16 }), h("span", { class: "co-rich-text-toolbar__table-title" }, this.s.configureTable), h("button", { type: "button", class: "co-rich-text-toolbar__table-close", onMouseDown: (e) => e.preventDefault(), onClick: () => this.closePopover() }, h("co-icon", { name: "x", size: 16 }))), h("div", { class: "co-rich-text-toolbar__table-tabs" }, h("button", { type: "button", class: { 'co-rich-text-toolbar__table-tab': true, 'co-rich-text-toolbar__table-tab--active': this.tableTab === 'grid' }, onMouseDown: (e) => e.preventDefault(), onClick: () => { this.tableTab = 'grid'; } }, this.s.grid), h("button", { type: "button", class: { 'co-rich-text-toolbar__table-tab': true, 'co-rich-text-toolbar__table-tab--active': this.tableTab === 'manual' }, onMouseDown: (e) => e.preventDefault(), onClick: () => { this.tableTab = 'manual'; } }, this.s.manual)), this.tableTab === 'grid' && this.renderGridTab(), this.tableTab === 'manual' && this.renderManualTab(), h("label", { class: "co-rich-text-toolbar__table-check" }, h("input", { type: "checkbox", checked: this.tableWithHeader, onChange: (e) => { this.tableWithHeader = e.target.checked; } }), h("span", null, this.s.includeHeaderRow)), this.tableTab === 'manual' && (h("div", { class: "co-rich-text-toolbar__table-actions" }, h("button", { type: "button", class: "co-rich-text-toolbar__table-btn co-rich-text-toolbar__table-btn--secondary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.closePopover() }, this.s.cancel), h("button", { type: "button", class: "co-rich-text-toolbar__table-btn co-rich-text-toolbar__table-btn--primary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.insertTable(this.tableManualRows, this.tableManualCols) }, this.s.createTable)))));
+    }
+    renderGridTab() {
+        const ROWS = 8;
+        const COLS = 8;
+        const cells = [];
+        const isLocked = this.gridLockedRows > 0;
+        const displayRows = isLocked ? this.gridLockedRows : this.gridHoverRows;
+        const displayCols = isLocked ? this.gridLockedCols : this.gridHoverCols;
+        for (let r = 1; r <= ROWS; r++) {
+            for (let c = 1; c <= COLS; c++) {
+                const isHighlighted = r <= displayRows && c <= displayCols;
+                cells.push(h("div", { class: { 'co-rich-text-toolbar__grid-cell': true, 'co-rich-text-toolbar__grid-cell--active': isHighlighted }, onMouseEnter: () => {
+                        if (!isLocked) {
+                            this.gridHoverRows = r;
+                            this.gridHoverCols = c;
+                        }
+                    }, onMouseDown: (e) => e.preventDefault(), onClick: () => { this.gridLockedRows = r; this.gridLockedCols = c; } }));
+            }
+        }
+        const s = this.s;
+        const label = displayRows > 0
+            ? `${displayCols} × ${displayRows} (${displayCols} ${s.columns.toLowerCase()} × ${displayRows} ${s.rows.toLowerCase()})`
+            : s.selectSize;
+        return (h("div", { class: "co-rich-text-toolbar__grid-container", onMouseLeave: () => {
+                if (!isLocked) {
+                    this.gridHoverRows = 0;
+                    this.gridHoverCols = 0;
+                }
+            } }, h("div", { class: "co-rich-text-toolbar__grid", style: { 'grid-template-columns': `repeat(${COLS}, 1fr)` } }, cells), h("div", { class: "co-rich-text-toolbar__grid-footer" }, h("span", { class: "co-rich-text-toolbar__grid-label" }, label), isLocked && (h("button", { type: "button", class: "co-rich-text-toolbar__grid-reset", onMouseDown: (e) => e.preventDefault(), onClick: () => { this.gridLockedRows = 0; this.gridLockedCols = 0; this.gridHoverRows = 0; this.gridHoverCols = 0; } }, s.changeSelection))), isLocked && (h("div", { class: "co-rich-text-toolbar__table-actions" }, h("button", { type: "button", class: "co-rich-text-toolbar__table-btn co-rich-text-toolbar__table-btn--secondary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.closePopover() }, s.cancel), h("button", { type: "button", class: "co-rich-text-toolbar__table-btn co-rich-text-toolbar__table-btn--primary", onMouseDown: (e) => e.preventDefault(), onClick: () => this.insertTable(this.gridLockedRows, this.gridLockedCols) }, s.createTable)))));
+    }
+    renderManualTab() {
+        return (h("div", { class: "co-rich-text-toolbar__table-manual" }, h("div", { class: "co-rich-text-toolbar__table-field" }, h("label", null, this.s.columns, ":"), h("input", { type: "number", min: "1", max: "20", value: this.tableManualCols, onInput: (e) => { this.tableManualCols = Math.max(1, parseInt(e.target.value) || 1); } })), h("div", { class: "co-rich-text-toolbar__table-field" }, h("label", null, this.s.rows, ":"), h("input", { type: "number", min: "1", max: "50", value: this.tableManualRows, onInput: (e) => { this.tableManualRows = Math.max(1, parseInt(e.target.value) || 1); } }))));
+    }
+    insertTable(rows, cols) {
         const editor = this.editor;
         if (!editor)
-            return true; // optimistic until the editor is wired
-        const { nodes, marks } = editor.schema;
-        switch (item.action) {
-            case 'image': return !!nodes.image;
-            case 'bulletList': return !!nodes.bulletList;
-            case 'orderedList': return !!nodes.orderedList;
-            case 'blockquote': return !!nodes.blockquote;
-            case 'heading': return !!nodes.heading;
-            case 'code': return !!marks.code;
-            case 'underline': return !!marks.underline;
-            case 'strike': return !!marks.strike;
-            case 'link': return !!marks.link;
-            default: return true;
+            return;
+        // Defense in depth: never nest a table inside a table cell. The toolbar
+        // button is already disabled in this case, but guard the insert itself so
+        // no other caller can produce the invalid markup.
+        if (editor.isActive('table')) {
+            this.closePopover();
+            return;
+        }
+        const withHeader = this.tableWithHeader;
+        // Build the table node by hand so a header row can ship with placeholder
+        // titles ("Header 1", "Header 2", …) instead of empty header cells. Tiptap's
+        // insertTable() only toggles header cells on, it can't seed their content.
+        const emptyCell = () => ({ type: 'tableCell', content: [{ type: 'paragraph' }] });
+        const headerCell = (i) => ({
+            type: 'tableHeader',
+            content: [{ type: 'paragraph', content: [{ type: 'text', text: `${this.s.tableHeaderLabel} ${i + 1}` }] }],
+        });
+        const content = [];
+        if (withHeader) {
+            content.push({
+                type: 'tableRow',
+                content: Array.from({ length: cols }, (_, i) => headerCell(i)),
+            });
         }
+        const bodyRows = withHeader ? rows - 1 : rows;
+        for (let r = 0; r < bodyRows; r++) {
+            content.push({
+                type: 'tableRow',
+                content: Array.from({ length: cols }, () => emptyCell()),
+            });
+        }
+        editor.chain().focus().insertContent({ type: 'table', content }).run();
+        this.coAction.emit({ action: 'table', payload: { rows, cols, withHeaderRow: withHeader } });
+        this.closePopover();
     }
-    canRun(item) {
-        var _a, _b, _c, _d;
-        if (!this.editor || this.disabled)
-            return false;
-        const can = this.editor.can();
-        if (item.action === 'undo')
-            return (_b = (_a = can.undo) === null || _a === void 0 ? void 0 : _a.call(can)) !== null && _b !== void 0 ? _b : true;
-        if (item.action === 'redo')
-            return (_d = (_c = can.redo) === null || _c === void 0 ? void 0 : _c.call(can)) !== null && _d !== void 0 ? _d : true;
-        return true;
+    renderColorPicker(item) {
+        return (h("div", { class: "co-rich-text-toolbar__color-picker", onMouseDown: (e) => {
+                if (e.target.tagName !== 'INPUT')
+                    e.preventDefault();
+                e.stopPropagation();
+            } }, h("div", { class: "co-rich-text-toolbar__color-grid" }, this.colorPalette.map((color) => (h("button", { type: "button", class: "co-rich-text-toolbar__color-swatch", style: Object.assign({ background: color }, (color === '#ffffff' ? { border: '1px solid #ccc' } : {})), title: color, onMouseDown: (e) => e.preventDefault(), onClick: () => this.selectColor(item.action, color) })))), h("div", { class: "co-rich-text-toolbar__color-hex" }, h("input", { type: "text", class: "co-rich-text-toolbar__color-hex-input", placeholder: "#hex", maxLength: 7, value: this.colorHexInput, onInput: (e) => { this.colorHexInput = e.target.value; }, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    const val = this.colorHexInput.trim();
+                    if (/^#[0-9a-fA-F]{3,6}$/.test(val)) {
+                        this.selectColor(item.action, val);
+                        this.colorHexInput = '';
+                    }
+                }
+                else if (e.key === 'Escape') {
+                    this.closePopover();
+                }
+            } })), h("button", { type: "button", class: "co-rich-text-toolbar__color-clear", onMouseDown: (e) => e.preventDefault(), onClick: () => this.clearColor(item.action) }, h("co-icon", { name: "x", size: 12 }), h("span", null, this.s.removeColor))));
     }
     render() {
         if (this.variant === 'none' || this.items.length === 0)
             return null;
-        return (h("div", { class: "co-rich-text-toolbar", role: "toolbar", "aria-label": "Formatting", part: "toolbar" }, this.items.filter((item) => this.supportedBySchema(item)).map((item) => {
-            var _a;
-            return (h("button", { key: `${item.action}-${JSON.stringify((_a = item.payload) !== null && _a !== void 0 ? _a : '')}`, type: "button", class: { 'co-rich-text-toolbar__btn': true, 'co-rich-text-toolbar__btn--active': this.isActive(item) }, title: item.label, "aria-label": item.label, "aria-pressed": item.type === 'toggle' ? String(this.isActive(item)) : undefined, disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.run(item), part: "button" }, h("co-icon", { name: item.icon, size: 18 })));
+        return (h("div", { class: "co-rich-text-toolbar", role: "toolbar", "aria-label": "Formatting", part: "toolbar" }, this.items.map((entry) => {
+            if (this.isSeparator(entry)) {
+                return h("span", { class: "co-rich-text-toolbar__sep" });
+            }
+            return this.renderButton(entry);
         })));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "variant": [{
                 "onVariantChange": 0
             }],
         "editor": [{
                 "onEditorChange": 0
+            }],
+        "openPopover": [{
+                "onOpenPopoverChange": 0
             }]
     }; }
 };
+/**
+ * Command whose presence in the schema proves an item's extension is loaded.
+ * Items without an entry have no extension dependency (separators, core marks,
+ * link, paragraph/heading, undo/redo, text color) and are always shown.
+ */
+CoRichTextToolbar.ITEM_COMMAND = {
+    table: 'insertTable',
+    image: 'setImage',
+    youtube: 'setYoutubeVideo',
+    iframe: 'setIframe',
+    callout: 'insertCallout',
+    fontFamily: 'setFontFamily',
+    fontSize: 'setFontSize',
+    highlight: 'toggleHighlight',
+    alignment: 'setTextAlign',
+    lineSpacing: 'setLineHeight',
+    letterSpacing: 'setLetterSpacing',
+    taskListMenu: 'toggleTaskList',
+    indentIncrease: 'indent',
+    indentDecrease: 'outdent',
+    codeBlock: 'toggleCodeBlock',
+    blockquote: 'toggleBlockquote',
+    horizontalRule: 'setHorizontalRule',
+    bulletListMenu: 'toggleBulletList',
+    orderedListMenu: 'toggleOrderedList',
+};
 CoRichTextToolbar.style = coRichTextToolbarCss();
 
 export { CoRichTextToolbar as co_rich_text_toolbar };