@caribeng/ui 22.4.0 → 22.5.0

package/fesm2022/caribeng-ui-editor.mjs

@@ -3,8 +3,10 @@ import { inject, Injector, input, booleanAttribute, numberAttribute, model, outp
 import { DOCUMENT } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { CbIconRegistry, CbIcon } from '@caribeng/ui/icon';
-import { heading3, heading2, heading1, pilcrow, wholeWord, caseSensitive, x, chevronUp, textSearch, omega, captions, ratio, alignEndVertical, alignCenterHorizontal, alignStartVertical, type, trash, panelTop, crop, columns3, rows3, betweenVerticalEnd, betweenVerticalStart, betweenHorizontalEnd, betweenHorizontalStart, table, minimize, maximize, superscript, subscript, textAlignJustify, listIndentDecrease, listIndentIncrease, listChecks, chevronDown, highlighter, baseline, aLargeSmall, codeXml, squareCode, redo, undo, removeFormatting, minus, image, unlink, link, textAlignEnd, textAlignCenter, textAlignStart, textQuote, listOrdered, list, code, strikethrough, underline, italic, bold } from '@caribeng/ui/icons';
+import { copy, atSign, tableCellsSplit, tableCellsMerge, tableOfContents, listCollapse, heading3, heading2, heading1, pilcrow, wholeWord, caseSensitive, x, chevronUp, textSearch, omega, captions, ratio, alignEndVertical, alignCenterHorizontal, alignStartVertical, type, trash, panelTop, crop, columns3, rows3, betweenVerticalEnd, betweenVerticalStart, betweenHorizontalEnd, betweenHorizontalStart, table, minimize, maximize, superscript, subscript, textAlignJustify, listIndentDecrease, listIndentIncrease, listChecks, chevronDown, highlighter, baseline, aLargeSmall, codeXml, squareCode, redo, undo, removeFormatting, minus, image, unlink, link, textAlignEnd, textAlignCenter, textAlignStart, textQuote, listOrdered, list, code, strikethrough, underline, italic, bold } from '@caribeng/ui/icons';
 import { injectCbTranslation, cbFieldState, cbFormat } from '@caribeng/ui';
+import { initialRect, fitRatio, resizeRect, clampRect, cropImage } from '@caribeng/ui/image-cropper';
+import { cbCodeLanguageLabel, cbCodeSupports, cbHighlight } from '@caribeng/ui/code-block';
 
 /**
  * Tipografías por defecto, todas libres (Google Fonts). Las "clásicas de Office" son
@@ -103,12 +105,17 @@ let allowedFonts = DEFAULT_FONTS;
 /** Etiquetas permitidas y sus atributos. */
 const ALLOWED = {
     p: ['style'],
-    h1: ['style'],
-    h2: ['style'],
-    h3: ['style'],
-    h4: ['style'],
+    h1: ['style', 'id'],
+    h2: ['style', 'id'],
+    h3: ['style', 'id'],
+    h4: ['style', 'id'],
     blockquote: ['style'],
-    pre: ['style', 'data-language'],
+    pre: ['style', 'data-language', 'data-highlight'],
+    figure: ['style'],
+    figcaption: [],
+    details: ['open'],
+    summary: [],
+    nav: ['data-type'],
     ul: ['data-type'],
     ol: ['start'],
     li: ['style', 'data-checked'],
@@ -149,7 +156,7 @@ const DROP = new Set([
     'form', 'input', 'button', 'select', 'textarea', 'head', 'title', 'meta', 'link', 'xml',
     'colgroup', 'col',
 ]);
-const BLOCKS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'blockquote', 'pre', 'ul', 'ol', 'hr', 'table']);
+const BLOCKS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'blockquote', 'pre', 'ul', 'ol', 'hr', 'table', 'figure', 'details', 'nav']);
 const ALIGN = new Set(['left', 'center', 'right', 'justify']);
 const TABLE_PARTS = new Set(['thead', 'tbody', 'tfoot', 'tr', 'th', 'td', 'caption']);
 const INLINE = new Set(['strong', 'em', 'u', 's', 'code', 'sub', 'sup']);
@@ -413,6 +420,9 @@ function appendClean(parent, node, images) {
         const language = source.getAttribute('data-language');
         if (language && /^[\w+#.-]{1,30}$/.test(language))
             pre.setAttribute('data-language', language);
+        // Bloque coloreado por el propio editor (se vuelve a colorear al editarlo).
+        if (source.getAttribute('data-highlight') === 'auto')
+            pre.setAttribute('data-highlight', 'auto');
         const code = document.createElement('code');
         pre.append(code);
         appendCode(code, source, true);
@@ -423,6 +433,15 @@ function appendClean(parent, node, images) {
             parent.append(pre);
         return;
     }
+    // Mención (@persona): un <span data-mention> con solo su texto.
+    if (tag === 'span' && /^[\w.@:-]{1,64}$/.test(source.getAttribute('data-mention') ?? '') && !inCode) {
+        const mention = document.createElement('span');
+        mention.setAttribute('data-mention', source.getAttribute('data-mention'));
+        mention.textContent = (source.textContent ?? '').replace(/\s+/g, ' ').trim();
+        if (mention.textContent)
+            parent.append(mention);
+        return;
+    }
     // Google Docs envuelve todo en <b style="font-weight:normal">: no es negrita.
     if (tag === 'b' && /font-weight\s*:\s*(normal|[1-4]00)/i.test(style))
         tag = 'span';
@@ -480,20 +499,32 @@ function appendClean(parent, node, images) {
         return;
     }
     // Un bloque dentro de un párrafo (p. ej. <div> dentro de <p>) se aplana.
-    if (tag === 'p' && (parent.tagName === 'P' || parent.tagName === 'TD' || parent.tagName === 'TH' || parent.tagName === 'LI')) {
+    if (tag === 'p' && /^(P|TD|TH|LI|FIGCAPTION|SUMMARY)$/.test(parent.tagName)) {
         if (parent.childNodes.length)
             parent.append(document.createElement('br'));
         for (const child of Array.from(source.childNodes))
             appendClean(parent, child, images);
         return;
     }
+    if ((tag === 'figcaption' && parent.tagName !== 'FIGURE') || (tag === 'summary' && parent.tagName !== 'DETAILS')) {
+        const p = document.createElement('p');
+        for (const child of Array.from(source.childNodes))
+            appendClean(p, child, images);
+        parent.append(p);
+        return;
+    }
+    if (tag === 'nav' && source.getAttribute('data-type') !== 'toc') {
+        for (const child of Array.from(source.childNodes))
+            appendClean(parent, child, images);
+        return;
+    }
     const el = document.createElement(tag);
     for (const name of ALLOWED[tag]) {
         const value = source.getAttribute(name);
         if (value === null)
             continue;
         if (name === 'style') {
-            if (tag === 'img') {
+            if (tag === 'img' || tag === 'figure') {
                 const { width, align } = readImageStyle(value);
                 const css = imageStyle(width, align);
                 if (css)
@@ -532,8 +563,19 @@ function appendClean(parent, node, images) {
                 el.setAttribute(name, value);
         }
         else if (name === 'data-type') {
-            if (value === 'taskList')
-                el.setAttribute('data-type', 'taskList');
+            if ((tag === 'ul' && value === 'taskList') || (tag === 'nav' && value === 'toc'))
+                el.setAttribute('data-type', value);
+        }
+        else if (name === 'data-highlight') {
+            if (value === 'auto')
+                el.setAttribute('data-highlight', 'auto');
+        }
+        else if (name === 'id') {
+            if (/^[a-z][a-z0-9-]{0,79}$/.test(value))
+                el.setAttribute('id', value);
+        }
+        else if (name === 'open') {
+            el.setAttribute('open', '');
         }
         else if (name === 'data-checked') {
             if (value === 'true' || value === 'false')
@@ -585,6 +627,19 @@ function appendClean(parent, node, images) {
         appendClean(el, child, images);
     if (tag === 'table')
         normalizeTable(el);
+    // Una figura sin imagen no es una figura: se queda su contenido.
+    if (tag === 'figure' && !el.querySelector('img')) {
+        for (const child of Array.from(el.childNodes)) {
+            if (child.tagName === 'FIGCAPTION') {
+                const p = document.createElement('p');
+                p.append(...Array.from(child.childNodes));
+                el.before(p);
+            }
+            else
+                el.before(child);
+        }
+        el.remove();
+    }
     if (tag === 'li' && parent.getAttribute('data-type') === 'taskList' && !el.hasAttribute('data-checked'))
         el.setAttribute('data-checked', 'false');
     if (tag === 'li' && parent.getAttribute('data-type') !== 'taskList')
@@ -659,17 +714,28 @@ function normalizeTable(table) {
         table.remove();
         return;
     }
-    const width = Math.max(...rows.map((r) => Array.from(r.children).reduce((n, c) => n + (Number(c.getAttribute('colspan')) || 1), 0)));
+    // Texto suelto en la fila: se descarta (no es una celda).
     for (const row of rows) {
-        // Texto suelto en la fila: se descarta (no es una celda).
         for (const child of Array.from(row.childNodes))
             if (child.nodeType === Node.TEXT_NODE || !/^(TD|TH)$/.test(child.tagName))
                 child.remove();
-        const cells = Array.from(row.children).reduce((n, c) => n + (Number(c.getAttribute('colspan')) || 1), 0);
+    }
+    // Columnas ocupadas en cada fila, contando las celdas que bajan desde arriba (rowspan).
+    const used = rows.map(() => 0);
+    rows.forEach((row, r) => {
+        for (const cell of Array.from(row.children)) {
+            const cs = Number(cell.getAttribute('colspan')) || 1;
+            const rs = Math.min(Number(cell.getAttribute('rowspan')) || 1, rows.length - r);
+            for (let i = 0; i < rs; i++)
+                used[r + i] += cs;
+        }
+    });
+    const width = Math.max(...used);
+    rows.forEach((row, r) => {
         const inHead = row.parentElement?.tagName === 'THEAD';
-        for (let i = cells; i < width; i++)
+        for (let i = used[r]; i < width; i++)
             row.append(document.createElement(inHead ? 'th' : 'td'));
-    }
+    });
     // Las celdas de cabecera de <thead> se marcan como de columna.
     for (const th of Array.from(table.querySelectorAll('thead th')))
         if (!th.hasAttribute('scope'))
@@ -697,7 +763,7 @@ function wrapInlineRuns(root) {
 }
 /** Bloques sin texto ni imagen (p. ej. `<p><br></p>` al final) se quitan, salvo `<hr>` y celdas. */
 function removeEmptyBlocks(root) {
-    for (const block of Array.from(root.querySelectorAll('p, h1, h2, h3, h4, blockquote, li, pre, strong, em, u, s, code, caption, span'))) {
+    for (const block of Array.from(root.querySelectorAll('p, h1, h2, h3, h4, blockquote, li, pre, strong, em, u, s, code, caption, span, figcaption'))) {
         if (block.closest('pre') && block.tagName !== 'PRE')
             continue;
         if (!block.textContent?.replace(/ /g, ' ').trim() && !block.querySelector('img, hr, table')) {
@@ -880,105 +946,7 @@ function toggleTask(li) {
     li.setAttribute('data-checked', li.getAttribute('data-checked') === 'true' ? 'false' : 'true');
 }
 
-/** Tamaño mínimo del recuadro (fracción del lado). */
-const MIN = 0.05;
-const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
-/** Mantiene el recuadro dentro de la imagen y con un tamaño mínimo. */
-function clampRect(rect) {
-    const w = clamp(rect.w, MIN, 1);
-    const h = clamp(rect.h, MIN, 1);
-    return { x: clamp(rect.x, 0, 1 - w), y: clamp(rect.y, 0, 1 - h), w, h };
-}
-/**
- * Ajusta el recuadro a una proporción (ancho / alto en píxeles), lo más grande
- * posible dentro del actual y centrado en él. `ratio` null = libre.
- */
-function fitRatio(rect, ratio, imageWidth, imageHeight) {
-    if (!ratio || !imageWidth || !imageHeight)
-        return clampRect(rect);
-    // Proporción expresada en fracciones de la imagen.
-    const r = ratio * (imageHeight / imageWidth);
-    let w = rect.w;
-    let h = w / r;
-    if (h > rect.h) {
-        h = rect.h;
-        w = h * r;
-    }
-    if (w > 1) {
-        w = 1;
-        h = w / r;
-    }
-    if (h > 1) {
-        h = 1;
-        w = h * r;
-    }
-    const cx = rect.x + rect.w / 2;
-    const cy = rect.y + rect.h / 2;
-    return clampRect({ x: cx - w / 2, y: cy - h / 2, w, h });
-}
-/** Recuadro inicial: el mayor posible con la proporción, centrado. */
-function initialRect(ratio, imageWidth, imageHeight) {
-    return fitRatio({ x: 0, y: 0, w: 1, h: 1 }, ratio, imageWidth, imageHeight);
-}
-/**
- * Redimensiona arrastrando una esquina (`nw`, `ne`, `sw`, `se`) un desplazamiento
- * (dx, dy) en fracciones; con proporción, el alto sigue al ancho.
- */
-function resizeRect(rect, corner, dx, dy, ratio, imageWidth, imageHeight) {
-    let { x, y, w, h } = rect;
-    const right = x + w;
-    const bottom = y + h;
-    if (corner.includes('w'))
-        x = clamp(x + dx, 0, right - MIN);
-    const newRight = corner.includes('e') ? clamp(right + dx, x + MIN, 1) : right;
-    if (corner.includes('n'))
-        y = clamp(y + dy, 0, bottom - MIN);
-    const newBottom = corner.includes('s') ? clamp(bottom + dy, y + MIN, 1) : bottom;
-    w = newRight - x;
-    h = newBottom - y;
-    if (ratio && imageWidth && imageHeight) {
-        const r = ratio * (imageHeight / imageWidth);
-        h = w / r;
-        if (corner.includes('n'))
-            y = bottom - h;
-        if (y < 0 || y + h > 1) {
-            // No cabe: se limita por el alto.
-            h = corner.includes('n') ? bottom : 1 - y;
-            w = h * r;
-            if (corner.includes('w'))
-                x = right - w;
-            if (corner.includes('n'))
-                y = bottom - h;
-        }
-    }
-    return clampRect({ x, y, w, h });
-}
-/**
- * Recorta los píxeles de la imagen. Las imágenes de otro dominio necesitan que
- * su servidor permita CORS; si no, el navegador bloquea la lectura y se rechaza.
- */
-async function cropImage(src, rect, doc) {
-    const image = new Image();
-    if (!/^(data|blob):/i.test(src))
-        image.crossOrigin = 'anonymous';
-    await new Promise((resolve, reject) => {
-        image.onload = () => resolve();
-        image.onerror = () => reject(new Error('No se pudo cargar la imagen'));
-        image.src = src;
-    });
-    const sw = Math.max(1, Math.round(rect.w * image.naturalWidth));
-    const sh = Math.max(1, Math.round(rect.h * image.naturalHeight));
-    const canvas = doc.createElement('canvas');
-    canvas.width = sw;
-    canvas.height = sh;
-    const ctx = canvas.getContext('2d');
-    if (!ctx)
-        throw new Error('Canvas 2D no disponible');
-    ctx.drawImage(image, Math.round(rect.x * image.naturalWidth), Math.round(rect.y * image.naturalHeight), sw, sh, 0, 0, sw, sh);
-    const type = /^data:image\/jpe?g|\.jpe?g(\?|$)/i.test(src) ? 'image/jpeg' : 'image/png';
-    // toBlob lanza SecurityError si el canvas quedó "contaminado" (imagen sin CORS).
-    return new Promise((resolve, reject) => canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('Sin datos'))), type, 0.92));
-}
+/** El cálculo y el recorte viven en `@caribeng/ui/image-cropper`, compartidos con `cb-image-cropper`. */
 
 // --- Tipografía al escribir ------------------------------------------------------------------
 /** Sustituciones al escribir: el patrón termina en el carácter recién tecleado. */
@@ -1105,6 +1073,366 @@ function fold(text) {
     return text.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
 }
 
+/**
+ * Bloques de la fase 3 del editor: código coloreado por lenguaje, celdas
+ * combinadas, pie de imagen e índice del documento. Son funciones sobre el
+ * DOM del área editable (sin estado); el componente decide cuándo llamarlas.
+ */
+// --- Código ------------------------------------------------------------------------------
+/** Lenguajes del selector del bloque de código (`''` = texto sin colorear). */
+const CODE_LANGUAGES = ['', 'typescript', 'javascript', 'html', 'css', 'scss', 'json', 'bash', 'python', 'sql'];
+function codeLanguageLabel(language) {
+    return cbCodeLanguageLabel(language);
+}
+/**
+ * Colores de un tema oscuro (como VS Code): van en línea en el HTML, así el
+ * bloque se ve igual dentro y fuera del editor, en tema claro u oscuro.
+ */
+const CODE_FG = '#d4d4d4';
+const CODE_BG = '#1e1e1e';
+const PALETTE = {
+    keyword: '#569cd6',
+    builtin: '#4ec9b0',
+    string: '#ce9178',
+    number: '#b5cea8',
+    comment: '#6a9955',
+    function: '#dcdcaa',
+    tag: '#569cd6',
+    attr: '#9cdcfe',
+    property: '#9cdcfe',
+    variable: '#9cdcfe',
+};
+/**
+ * Cambia el lenguaje de un bloque de código y lo colorea (si el lenguaje se
+ * conoce). El texto no cambia; el cursor se conserva si estaba dentro.
+ */
+function highlightCodeBlock(pre, language, doc) {
+    const sel = doc.getSelection();
+    const caret = sel?.rangeCount && pre.contains(sel.anchorNode) ? textOffset(pre, sel.anchorNode, sel.anchorOffset) : null;
+    const text = (pre.textContent ?? '').replace(/​/g, '');
+    if (language)
+        pre.setAttribute('data-language', language);
+    else
+        pre.removeAttribute('data-language');
+    const code = doc.createElement('code');
+    if (language && cbCodeSupports(language)) {
+        pre.setAttribute('data-highlight', 'auto');
+        pre.setAttribute('style', `color: ${CODE_FG}; background-color: ${CODE_BG}`);
+        cbHighlight(text, language).forEach((line, i) => {
+            if (i)
+                code.append('\n');
+            for (const token of line) {
+                const color = PALETTE[token.type];
+                if (!color) {
+                    code.append(token.text);
+                    continue;
+                }
+                const span = doc.createElement('span');
+                span.setAttribute('style', token.type === 'comment' ? `color: ${color}; font-style: italic` : `color: ${color}`);
+                span.textContent = token.text;
+                code.append(span);
+            }
+        });
+    }
+    else {
+        // Sin colores propios: el bloque vuelve al estilo del editor.
+        if (pre.getAttribute('data-highlight') === 'auto')
+            pre.removeAttribute('style');
+        pre.removeAttribute('data-highlight');
+        code.textContent = text;
+    }
+    pre.replaceChildren(code);
+    if (caret !== null)
+        placeAtOffset(pre, caret, doc);
+}
+/** Posición del cursor como desplazamiento en el texto de `root`. */
+function textOffset(root, node, offset) {
+    const range = root.ownerDocument.createRange();
+    range.selectNodeContents(root);
+    try {
+        range.setEnd(node, offset);
+    }
+    catch {
+        return 0;
+    }
+    return range.toString().length;
+}
+/** Pone el cursor a `offset` caracteres del inicio de `root`. */
+function placeAtOffset(root, offset, doc) {
+    const walker = doc.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let left = offset;
+    let node = walker.nextNode();
+    let last = null;
+    while (node) {
+        if (left <= node.length)
+            break;
+        left -= node.length;
+        last = node;
+        node = walker.nextNode();
+    }
+    const range = doc.createRange();
+    if (node)
+        range.setStart(node, left);
+    else if (last)
+        range.setStart(last, last.length);
+    else
+        range.setStart(root, 0);
+    range.collapse(true);
+    const sel = doc.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+}
+const span = (cell, attr) => Math.max(1, Number(cell.getAttribute(attr)) || 1);
+/** Rejilla de la tabla: qué celda ocupa cada posición (contando colspan y rowspan). */
+function tableGrid(table) {
+    const rows = Array.from(table.rows);
+    const grid = rows.map(() => []);
+    rows.forEach((row, r) => {
+        let c = 0;
+        for (const cell of Array.from(row.cells)) {
+            while (grid[r][c])
+                c++;
+            const cs = span(cell, 'colspan');
+            const rs = Math.min(span(cell, 'rowspan'), rows.length - r);
+            for (let i = 0; i < rs; i++)
+                for (let j = 0; j < cs; j++)
+                    grid[r + i][c + j] = cell;
+            c += cs;
+        }
+    });
+    return grid;
+}
+function position(grid, cell) {
+    for (let r = 0; r < grid.length; r++) {
+        const c = grid[r].indexOf(cell);
+        if (c >= 0)
+            return { row: r, col: c };
+    }
+    return null;
+}
+/** Celda vecina con la que se puede combinar (misma altura a la derecha, mismo ancho abajo). */
+function mergeTarget(cell, direction) {
+    const table = cell.closest('table');
+    if (!table)
+        return null;
+    const grid = tableGrid(table);
+    const pos = position(grid, cell);
+    if (!pos)
+        return null;
+    const cs = span(cell, 'colspan');
+    const rs = span(cell, 'rowspan');
+    const next = direction === 'right' ? grid[pos.row]?.[pos.col + cs] : grid[pos.row + rs]?.[pos.col];
+    if (!next || next === cell)
+        return null;
+    const nextPos = position(grid, next);
+    // Encabezado y cuerpo no se mezclan.
+    if (next.parentElement?.parentElement !== cell.parentElement?.parentElement)
+        return null;
+    if (direction === 'right')
+        return nextPos.row === pos.row && span(next, 'rowspan') === rs ? next : null;
+    return nextPos.col === pos.col && span(next, 'colspan') === cs ? next : null;
+}
+/** Combina la celda con la de la derecha o la de abajo (el contenido se une). */
+function mergeCells(cell, direction) {
+    const next = mergeTarget(cell, direction);
+    if (!next)
+        return false;
+    const attr = direction === 'right' ? 'colspan' : 'rowspan';
+    cell.setAttribute(attr, String(span(cell, attr) + span(next, attr)));
+    if (next.textContent?.trim() || next.querySelector('img')) {
+        if (cell.textContent?.trim())
+            cell.append(cell.ownerDocument.createElement('br'));
+        else
+            cell.replaceChildren();
+        cell.append(...Array.from(next.childNodes));
+    }
+    next.remove();
+    // Una fila vacía (sus celdas pasaron a la de arriba) se quita y se corrige el rowspan.
+    for (const row of Array.from(cell.closest('table').rows)) {
+        if (row.cells.length)
+            continue;
+        const index = row.rowIndex;
+        const grid = tableGrid(row.closest('table'));
+        for (const above of new Set(grid[index - 1] ?? [])) {
+            if (above && span(above, 'rowspan') > 1)
+                above.setAttribute('rowspan', String(span(above, 'rowspan') - 1));
+        }
+        row.remove();
+    }
+    for (const c of [cell]) {
+        if (span(c, 'colspan') === 1)
+            c.removeAttribute('colspan');
+        if (span(c, 'rowspan') === 1)
+            c.removeAttribute('rowspan');
+    }
+    return true;
+}
+/** ¿La celda está combinada? */
+function isMerged(cell) {
+    return span(cell, 'colspan') > 1 || span(cell, 'rowspan') > 1;
+}
+/** Separa una celda combinada en celdas sueltas (el contenido queda en la primera). */
+function splitCell(cell) {
+    const table = cell.closest('table');
+    if (!table || !isMerged(cell))
+        return false;
+    const grid = tableGrid(table);
+    const pos = position(grid, cell);
+    const cs = span(cell, 'colspan');
+    const rs = span(cell, 'rowspan');
+    const make = () => {
+        const c = cell.ownerDocument.createElement(cell.tagName.toLowerCase());
+        if (cell.tagName === 'TH')
+            c.setAttribute('scope', cell.getAttribute('scope') ?? 'col');
+        const style = cell.getAttribute('style');
+        if (style)
+            c.setAttribute('style', style);
+        c.innerHTML = '<br>';
+        return c;
+    };
+    cell.removeAttribute('colspan');
+    cell.removeAttribute('rowspan');
+    for (let j = cs - 1; j >= 1; j--)
+        cell.after(make());
+    const rows = Array.from(table.rows);
+    for (let i = 1; i < rs; i++) {
+        const row = rows[pos.row + i];
+        if (!row)
+            break;
+        // Se inserta antes de la primera celda propia de la fila que empieza a la derecha.
+        const before = Array.from(row.cells).find((c) => (position(grid, c)?.col ?? 0) > pos.col) ?? null;
+        for (let j = 0; j < cs; j++)
+            row.insertBefore(make(), before);
+    }
+    return true;
+}
+// --- Imagen con pie -----------------------------------------------------------------------------
+/** Figura de la imagen (si tiene pie). */
+function figureOf(img) {
+    return img.parentElement?.tagName === 'FIGURE' ? img.parentElement : null;
+}
+/**
+ * Añade un pie a la imagen: la envuelve en `<figure>` (que se lleva su ancho y
+ * alineación) con un `<figcaption>` vacío. Devuelve el pie.
+ */
+function addCaption(img, doc) {
+    const existing = figureOf(img)?.querySelector('figcaption');
+    if (existing)
+        return existing;
+    const { width, align } = readImageStyle(img.getAttribute('style') ?? '');
+    const figure = doc.createElement('figure');
+    const css = imageStyle(width ?? '100%', align);
+    figure.setAttribute('style', css);
+    // La imagen ocupa toda la figura.
+    img.setAttribute('style', imageStyle('100%', null));
+    img.removeAttribute('width');
+    img.removeAttribute('height');
+    const caption = doc.createElement('figcaption');
+    caption.innerHTML = '<br>';
+    // La figura es un bloque: el párrafo de la imagen se parte en dos y la figura queda en medio.
+    const block = img.parentElement?.tagName === 'P' ? img.parentElement : null;
+    if (block) {
+        const after = doc.createElement('p');
+        while (img.nextSibling)
+            after.append(img.nextSibling);
+        block.after(figure);
+        if (after.textContent?.trim() || after.querySelector('img'))
+            figure.after(after);
+        img.remove();
+        if (!block.textContent?.trim() && !block.querySelector('img'))
+            block.remove();
+    }
+    else {
+        img.before(figure);
+    }
+    figure.append(img, caption);
+    return caption;
+}
+/** Quita el pie: la imagen recupera el ancho y la alineación de la figura. */
+function removeCaption(img, doc) {
+    const figure = figureOf(img);
+    if (!figure)
+        return;
+    const { width, align } = readImageStyle(figure.getAttribute('style') ?? '');
+    const css = imageStyle(width === '100%' ? null : width, align);
+    if (css)
+        img.setAttribute('style', css);
+    else
+        img.removeAttribute('style');
+    const p = doc.createElement('p');
+    p.append(img);
+    figure.replaceWith(p);
+}
+// --- Índice del documento -----------------------------------------------------------------------
+/** Identificador legible para un título ("Condiciones del crédito" → "condiciones-del-credito"). */
+function slugify(text) {
+    const slug = text
+        .normalize('NFD')
+        .replace(/[̀-ͯ]/g, '')
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        // Sin la numeración inicial ("1. Resumen" → "resumen").
+        .replace(/^[^a-z]+|-+$/g, '')
+        .slice(0, 60);
+    return slug || 'seccion';
+}
+/** Da un `id` único a cada título (los que ya tienen uno válido lo conservan). */
+function ensureHeadingIds(root) {
+    const headings = Array.from(root.querySelectorAll('h1, h2, h3, h4')).filter((h) => !h.closest('nav[data-type="toc"]'));
+    const used = new Set();
+    for (const h of headings) {
+        let id = /^[a-z][a-z0-9-]{0,79}$/.test(h.id) && !used.has(h.id) ? h.id : '';
+        if (!id) {
+            const base = slugify(h.textContent ?? '');
+            id = base;
+            for (let n = 2; used.has(id); n++)
+                id = `${base}-${n}`;
+            h.id = id;
+        }
+        used.add(id);
+    }
+    return headings;
+}
+/** Contenido del índice: enlaces a los títulos, anidados por nivel. */
+function buildToc(nav, headings, title, doc) {
+    const heading = doc.createElement('p');
+    const strong = doc.createElement('strong');
+    strong.textContent = title;
+    heading.append(strong);
+    const root = doc.createElement('ol');
+    // Pila de listas abiertas: un nivel más profundo abre una sublista en el último elemento.
+    const stack = [{ level: 0, list: root, last: null }];
+    for (const h of headings) {
+        const text = (h.textContent ?? '').trim();
+        if (!text)
+            continue;
+        const level = Number(h.tagName[1]);
+        while (stack.length > 1 && stack[stack.length - 1].level > level)
+            stack.pop();
+        let top = stack[stack.length - 1];
+        if (!top.last)
+            top.level = level;
+        else if (level > top.level) {
+            const sub = doc.createElement('ol');
+            top.last.append(sub);
+            top = { level, list: sub, last: null };
+            stack.push(top);
+        }
+        const li = doc.createElement('li');
+        const a = doc.createElement('a');
+        a.href = `#${h.id}`;
+        a.textContent = text;
+        li.append(a);
+        top.list.append(li);
+        top.last = li;
+    }
+    nav.replaceChildren(heading, ...(root.children.length ? [root] : []));
+}
+/** Firma de los títulos (para no reescribir el índice si no cambiaron). */
+function headingsSignature(headings) {
+    return headings.map((h) => `${h.tagName}:${h.id}:${(h.textContent ?? '').trim()}`).join('|');
+}
+
 /**
  * Barra por defecto, en dos filas: arriba el texto (bloque, fuente, tamaño, estilos y color);
  * abajo la estructura (listas, alineación, inserciones, buscar y vistas).
@@ -1117,7 +1445,7 @@ const CB_EDITOR_DEFAULT_TOOLBAR = [
     'subscript', 'superscript', 'code', 'clear',
     '-',
     'bulletList', 'orderedList', 'taskList', 'outdent', 'indent', 'alignment', '|',
-    'link', 'image', 'table', 'codeBlock', 'quote', 'horizontalRule', 'specialChars', '|',
+    'link', 'image', 'table', 'codeBlock', 'quote', 'details', 'toc', 'horizontalRule', 'specialChars', '|',
     'findReplace', '|',
     'source', 'fullscreen',
 ];
@@ -1138,6 +1466,8 @@ const SLASH_ITEMS = [
     { id: 'table', icon: 'table', label: (t) => t.insertTable, keywords: 'tabla table' },
     { id: 'image', icon: 'image', label: (t) => t.insertImage, keywords: 'imagen image foto picture' },
     { id: 'horizontalRule', icon: 'minus', label: (t) => t.horizontalLine, keywords: 'hr linea line separador divider' },
+    { id: 'details', icon: 'list-collapse', label: (t) => t.editorCollapsible, keywords: 'desplegable details acordeon collapsible toggle' },
+    { id: 'toc', icon: 'table-of-contents', label: (t) => t.editorToc, keywords: 'indice toc contenido contents' },
 ];
 const EMPTY_STATE = {
     bold: false,
@@ -1194,6 +1524,8 @@ const TOOLS = {
     fullscreen: { icon: 'maximize', label: (t) => t.fullscreen },
     specialChars: { icon: 'omega', label: (t) => t.specialCharacters },
     findReplace: { icon: 'text-search', label: (t) => t.findReplace, keys: 'Ctrl+F' },
+    details: { icon: 'list-collapse', label: (t) => t.editorCollapsible },
+    toc: { icon: 'table-of-contents', label: (t) => t.editorToc },
 };
 /** Opciones del menú de alineación. */
 const ALIGNMENTS = ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'];
@@ -1256,6 +1588,12 @@ const EDITOR_ICONS = {
     'heading-1': heading1,
     'heading-2': heading2,
     'heading-3': heading3,
+    'list-collapse': listCollapse,
+    'table-of-contents': tableOfContents,
+    'table-cells-merge': tableCellsMerge,
+    'table-cells-split': tableCellsSplit,
+    'at-sign': atSign,
+    copy,
 };
 /** Nombres de los resaltados de búsqueda (CSS Custom Highlight API). */
 const FIND_HIGHLIGHT = 'cb-editor-find';
@@ -1342,9 +1680,25 @@ class CbEditor {
         this.autolink = input(true, { ...(ngDevMode ? { debugName: "autolink" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /** Corrección tipográfica al escribir: `(c)` → ©, `...` → …, `->` → →, ` -- ` → –, `1/2` → ½. */
         this.typography = input(true, { ...(ngDevMode ? { debugName: "typography" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Menciones con `@`: una lista fija o una función que busca (síncrona o con
+         * promesa). Se guardan como `<span data-mention="id">@Nombre</span>`.
+         */
+        this.mentions = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mentions" }] : /* istanbul ignore next */ []));
+        /**
+         * Guarda un borrador en este navegador (`localStorage`) mientras se escribe;
+         * al volver, ofrece restaurarlo. Usa una clave por documento (p. ej. `'acta-42'`).
+         */
+        this.autosaveKey = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "autosaveKey" }] : /* istanbul ignore next */ []));
+        /** Espera (ms) tras la última tecla antes de guardar el borrador. */
+        this.autosaveDelay = input(1000, { ...(ngDevMode ? { debugName: "autosaveDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /** HTML del contenido (saneado y normalizado; `''` si está vacío). */
         this.value = model('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Se insertó una mención. */
+        this.mentionAdd = output();
         /** Una imagen no se pudo insertar (tipo, tamaño o error de subida). */
         this.imageError = output();
         /** Estado de validación: inputs manuales + estado de Angular Forms. */
@@ -1545,7 +1899,9 @@ class CbEditor {
         ...(ngDevMode ? [{ debugName: "imageTick" }] : /* istanbul ignore next */ []));
         this.imageState = computed(() => {
             this.imageTick();
-            return readImageStyle(this.selectedImage()?.getAttribute('style') ?? '');
+            const img = this.selectedImage();
+            const holder = img ? (figureOf(img) ?? img) : null;
+            return readImageStyle(holder?.getAttribute('style') ?? '');
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "imageState" }] : /* istanbul ignore next */ []));
         this.imageFrame = signal(null, /* @ts-ignore */
@@ -1560,6 +1916,50 @@ class CbEditor {
             { align: 'center', icon: 'align-center-horizontal', label: (t) => t.imageAlignCenter },
             { align: 'right', icon: 'align-end-vertical', label: (t) => t.imageAlignRight },
         ];
+        /** Bloque de código donde está el cursor (muestra su barra). */
+        this.codeBlock = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "codeBlock" }] : /* istanbul ignore next */ []));
+        this.codeTick = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "codeTick" }] : /* istanbul ignore next */ []));
+        this.codeLanguage = computed(() => {
+            this.codeTick();
+            return this.codeBlock()?.getAttribute('data-language') ?? '';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "codeLanguage" }] : /* istanbul ignore next */ []));
+        this.codeLanguages = CODE_LANGUAGES;
+        this.codeCopied = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "codeCopied" }] : /* istanbul ignore next */ []));
+        this.languageLabel = codeLanguageLabel;
+        this.fmt = cbFormat;
+        /** Qué se puede hacer con la celda actual: combinar a la derecha / abajo, separar. */
+        this.cellActions = computed(() => {
+            this.tableTick();
+            const cell = this.tableCell();
+            return { right: !!cell && !!mergeTarget(cell, 'right'), down: !!cell && !!mergeTarget(cell, 'down'), split: !!cell && isMerged(cell) };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cellActions" }] : /* istanbul ignore next */ []));
+        this.imageHasCaption = computed(() => {
+            this.imageTick();
+            const img = this.selectedImage();
+            return !!img && !!figureOf(img);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "imageHasCaption" }] : /* istanbul ignore next */ []));
+        /** Menú de menciones: texto tras la `@`, opción activa y posición. */
+        this.mention = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mention" }] : /* istanbul ignore next */ []));
+        this.mentionResults = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mentionResults" }] : /* istanbul ignore next */ []));
+        this.mentionAnchor = null;
+        this.mentionToken = 0;
+        this.mentionListId = `${this.surfaceId}-mentions`;
+        /** Índice: firma de los títulos con la que se generó (no se reescribe si no cambian). */
+        this.tocSignature = '';
+        /** Borrador guardado en este navegador que difiere del valor actual. */
+        this.draft = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+        /** Hora del último borrador guardado (se muestra al pie). */
+        this.savedAt = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "savedAt" }] : /* istanbul ignore next */ []));
         /** Último HTML emitido o cargado: evita reescribir el DOM (y mover el cursor) con su propio valor. */
         this.lastHtml = null;
         this.onChange = () => { };
@@ -1585,6 +1985,11 @@ class CbEditor {
                 return;
             const clean = untracked(() => this.sanitize(val));
             el.innerHTML = clean;
+            decorate(el);
+            untracked(() => {
+                this.tocSignature = '';
+                this.refreshToc(el);
+            });
             this.lastHtml = val;
             untracked(() => this.length.set(this.textLength(el)));
         });
@@ -1603,7 +2008,13 @@ class CbEditor {
         };
         this.document.addEventListener('mousedown', onPointer);
         this.document.addEventListener('mouseup', onPointerUp);
+        // Borrador guardado de una sesión anterior.
+        afterNextRender(() => this.loadDraft());
         inject(DestroyRef).onDestroy(() => {
+            if (this.draftTimer) {
+                clearTimeout(this.draftTimer);
+                this.saveDraft();
+            }
             this.document.removeEventListener('mousedown', onPointer);
             this.document.removeEventListener('mouseup', onPointerUp);
             this.clearFindHighlight();
@@ -1817,6 +2228,8 @@ class CbEditor {
             case 'redo': return this.exec('redo');
             case 'source': return this.toggleSource();
             case 'findReplace': return this.openFind();
+            case 'details': return this.insertDetails();
+            case 'toc': return this.insertToc();
         }
     }
     // --- Comandos ----------------------------------------------------------------------
@@ -2185,9 +2598,13 @@ class CbEditor {
                 this.fixTypography();
             if (event.data === '/')
                 this.openSlash();
+            if (event.data === '@')
+                this.openMention();
         }
         if (this.slash())
             this.updateSlash();
+        if (this.mention())
+            this.updateMention();
         this.emit();
         if (this.findOpen())
             this.refreshFind(this.findIndex());
@@ -2309,6 +2726,10 @@ class CbEditor {
                 return this.openTablePanel();
             case 'image':
                 return this.pickImage();
+            case 'details':
+                return this.insertDetails();
+            case 'toc':
+                return this.insertToc();
         }
     }
     /** Flechas, Enter / Tab y Escape mientras el menú `/` está abierto. */
@@ -2515,6 +2936,12 @@ class CbEditor {
     onSurfaceKeydown(event) {
         if (this.slash() && this.onSlashKeydown(event))
             return;
+        if (this.mention() && this.onMentionKeydown(event))
+            return;
+        if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey && this.exitInlineBlock()) {
+            event.preventDefault();
+            return;
+        }
         // Alt + F10: a la barra de herramientas (como en los editores de escritorio).
         if (event.altKey && event.key === 'F10') {
             event.preventDefault();
@@ -2795,6 +3222,15 @@ class CbEditor {
                 break;
             case 'deleteTable':
                 return this.deleteTable(table);
+            case 'mergeRight':
+            case 'mergeDown':
+                if (!mergeCells(cell, id === 'mergeRight' ? 'right' : 'down'))
+                    return;
+                break;
+            case 'split':
+                if (!splitCell(cell))
+                    return;
+                break;
         }
         this.tableTick.update((n) => n + 1);
         this.emit();
@@ -2838,6 +3274,28 @@ class CbEditor {
     // --- Imagen seleccionada ----------------------------------------------------------------
     onSurfaceClick(event) {
         const target = event.target;
+        // Enlaces del índice: llevan al título dentro del editor.
+        const tocLink = target.closest?.('nav[data-type="toc"] a');
+        if (tocLink) {
+            event.preventDefault();
+            const id = decodeURIComponent(tocLink.getAttribute('href')?.slice(1) ?? '');
+            const heading = id ? this.surfaceRef()?.nativeElement.querySelector(`[id="${id.replace(/"/g, '')}"]`) : null;
+            heading?.scrollIntoView?.({ block: 'start', behavior: 'smooth' });
+            if (heading)
+                this.placeCaret(heading);
+            return;
+        }
+        // El título del desplegable se edita: solo la flecha (a la izquierda) lo abre o cierra.
+        const summary = target.closest?.('summary');
+        if (summary && !this.readonly() && !this.isDisabled()) {
+            event.preventDefault();
+            if (event.clientX - summary.getBoundingClientRect().left < 22) {
+                const details = summary.parentElement;
+                details.open = !details.open;
+                this.emit();
+            }
+            return;
+        }
         // Clic en la casilla de una tarea (la zona a la izquierda del texto).
         if (target.tagName === 'LI' && target.parentElement?.getAttribute('data-type') === 'taskList' && !this.readonly() && !this.isDisabled()) {
             const box = target.getBoundingClientRect();
@@ -2881,11 +3339,20 @@ class CbEditor {
         const img = this.selectedImage();
         if (!img)
             return;
+        const figure = figureOf(img);
         const css = imageStyle(width, align);
+        // Con pie, el ancho y la alineación son de la figura; la imagen la llena.
+        const target = figure ?? img;
         if (css)
-            img.setAttribute('style', css);
+            target.setAttribute('style', css);
         else
-            img.removeAttribute('style');
+            target.removeAttribute('style');
+        if (figure) {
+            if (width)
+                img.setAttribute('style', imageStyle('100%', null));
+            else
+                img.removeAttribute('style');
+        }
         if (width) {
             img.removeAttribute('width');
             img.removeAttribute('height');
@@ -2906,8 +3373,9 @@ class CbEditor {
         const img = this.selectedImage();
         if (!img)
             return;
-        const after = img.parentElement;
-        img.remove();
+        const figure = figureOf(img);
+        const after = figure ? figure.nextElementSibling ?? figure.parentElement : img.parentElement;
+        (figure ?? img).remove();
         this.deselectImage();
         this.emit();
         if (after)
@@ -3027,14 +3495,18 @@ class CbEditor {
         if (!img || !surface)
             return;
         event.preventDefault();
-        this.resizing = { x: event.clientX, width: img.getBoundingClientRect().width, max: surface.clientWidth || 1, align: this.imageState().align };
+        // Con pie se redimensiona la figura (la imagen la llena).
+        const target = figureOf(img) ?? img;
+        this.resizing = { x: event.clientX, width: target.getBoundingClientRect().width, max: surface.clientWidth || 1, align: this.imageState().align };
+        if (target !== img)
+            img.setAttribute('style', imageStyle('100%', null));
         const move = (e) => {
             const r = this.resizing;
             if (!r)
                 return;
             const px = Math.min(r.max, Math.max(40, r.width + (e.clientX - r.x)));
             const css = imageStyle(`${Math.round((px / r.max) * 100)}%`, r.align);
-            img.setAttribute('style', css);
+            target.setAttribute('style', css);
             this.refreshFrame();
         };
         const up = () => {
@@ -3071,6 +3543,357 @@ class CbEditor {
         buttons.forEach((b, i) => (b.tabIndex = i === next ? 0 : -1));
         buttons[next].focus();
     }
+    // --- Bloque de código: lenguaje y copiar --------------------------------------------------
+    /** Lenguaje del bloque de código actual; si el lenguaje se conoce, lo colorea. */
+    setCodeLanguage(language) {
+        const pre = this.codeBlock();
+        if (!pre)
+            return;
+        highlightCodeBlock(pre, language, this.document);
+        this.codeTick.update((n) => n + 1);
+        this.emit();
+    }
+    async copyCode() {
+        const text = this.codeBlock()?.textContent ?? '';
+        try {
+            await globalThis.navigator?.clipboard?.writeText(text);
+            this.codeCopied.set(true);
+        }
+        catch {
+            this.codeCopied.set(false);
+        }
+    }
+    // --- Pie de imagen ---------------------------------------------------------------------------
+    /** Añade o quita el pie de la imagen seleccionada. */
+    toggleCaption() {
+        const img = this.selectedImage();
+        if (!img)
+            return;
+        if (figureOf(img)) {
+            removeCaption(img, this.document);
+            this.emit();
+        }
+        else {
+            const caption = addCaption(img, this.document);
+            caption.setAttribute('data-placeholder', this.t().editorImageCaption);
+            this.emit();
+            this.deselectImage();
+            this.placeCaret(caption);
+        }
+        this.imageTick.update((n) => n + 1);
+        afterNextRender(() => this.refreshFrame(), { injector: this.injector });
+    }
+    /** Enter en un pie de imagen o en el título de un desplegable: sigue en el bloque siguiente. */
+    exitInlineBlock() {
+        const sel = this.document.getSelection();
+        const node = sel?.anchorNode ?? null;
+        const caption = this.closest(node, 'FIGCAPTION');
+        const summary = this.closest(node, 'SUMMARY');
+        if (!caption && !summary)
+            return false;
+        if (summary) {
+            const details = summary.parentElement;
+            details.open = true;
+            let first = summary.nextElementSibling;
+            if (!first) {
+                first = this.document.createElement('p');
+                first.innerHTML = '<br>';
+                details.append(first);
+            }
+            this.placeCaret(first);
+        }
+        else {
+            const figure = caption.parentElement;
+            let next = figure.nextElementSibling;
+            if (!next || next.tagName !== 'P') {
+                next = this.document.createElement('p');
+                next.innerHTML = '<br>';
+                figure.after(next);
+            }
+            this.placeCaret(next);
+        }
+        this.emit();
+        this.updateState();
+        return true;
+    }
+    // --- Desplegables e índice ---------------------------------------------------------------------
+    /** Inserta un desplegable (`<details>`) con su título seleccionado para escribirlo. */
+    insertDetails() {
+        const details = this.document.createElement('details');
+        details.open = true;
+        const summary = this.document.createElement('summary');
+        summary.textContent = this.t().editorCollapsibleTitle;
+        const body = this.document.createElement('p');
+        body.innerHTML = '<br>';
+        details.append(summary, body);
+        if (!this.insertBlock(details))
+            return;
+        const range = this.document.createRange();
+        range.selectNodeContents(summary);
+        const sel = this.document.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+        this.emit();
+        this.updateState();
+    }
+    /** Inserta el índice del documento: enlaces a los títulos, que se actualizan solos. */
+    insertToc() {
+        const nav = this.document.createElement('nav');
+        nav.setAttribute('data-type', 'toc');
+        nav.setAttribute('contenteditable', 'false');
+        if (!this.insertBlock(nav))
+            return;
+        this.tocSignature = '';
+        const next = nav.nextElementSibling;
+        if (next)
+            this.placeCaret(next);
+        this.emit();
+    }
+    /**
+     * Inserta un bloque tras el bloque del cursor (o en su lugar, si es un párrafo
+     * vacío), con un párrafo detrás para seguir escribiendo. `insertHTML` del
+     * navegador parte los párrafos y descoloca estos bloques.
+     */
+    insertBlock(block) {
+        const surface = this.surfaceRef()?.nativeElement;
+        if (!surface || this.isDisabled() || this.readonly())
+            return false;
+        const sel = this.document.getSelection();
+        let top = sel?.rangeCount && surface.contains(sel.anchorNode) ? sel.anchorNode : null;
+        while (top && top.parentNode !== surface)
+            top = top.parentNode;
+        const current = top;
+        const empty = current?.tagName === 'P' && !current.textContent?.trim() && !current.querySelector('img');
+        if (!current)
+            surface.append(block);
+        else if (empty)
+            current.replaceWith(block);
+        else
+            current.after(block);
+        const next = block.nextElementSibling;
+        if (!next || next.tagName !== 'P') {
+            const p = this.document.createElement('p');
+            p.innerHTML = '<br>';
+            block.after(p);
+        }
+        surface.focus();
+        return true;
+    }
+    /** Mantiene al día los índices: ids en los títulos y enlaces a ellos. */
+    refreshToc(el) {
+        const navs = Array.from(el.querySelectorAll('nav[data-type="toc"]'));
+        if (!navs.length)
+            return;
+        const headings = ensureHeadingIds(el);
+        const signature = `${navs.length}|${headingsSignature(headings)}`;
+        if (signature === this.tocSignature && navs.every((n) => n.childElementCount))
+            return;
+        this.tocSignature = signature;
+        for (const nav of navs) {
+            nav.setAttribute('contenteditable', 'false');
+            buildToc(nav, headings, this.t().editorTocTitle, this.document);
+        }
+    }
+    // --- Menciones ---------------------------------------------------------------------------------
+    /** Tras escribir `@` al inicio de una palabra, abre la lista de menciones. */
+    openMention() {
+        const caret = this.mentions() ? this.caretText() : null;
+        if (!caret || caret.offset < 1)
+            return;
+        const before = caret.node.data[caret.offset - 2];
+        if (before !== undefined && !/[\s(]/.test(before))
+            return;
+        this.mentionAnchor = { node: caret.node, offset: caret.offset - 1 };
+        const pos = this.caretPosition();
+        this.mention.set({ query: '', active: 0, left: pos.left, top: pos.bottom });
+        void this.searchMentions('');
+    }
+    updateMention() {
+        const anchor = this.mentionAnchor;
+        const sel = this.document.getSelection();
+        if (!anchor || !sel?.isCollapsed || sel.anchorNode !== anchor.node || sel.anchorOffset <= anchor.offset || anchor.node.data[anchor.offset] !== '@') {
+            this.closeMention();
+            return;
+        }
+        const query = anchor.node.data.slice(anchor.offset + 1, sel.anchorOffset);
+        if (/\s{2}|\n/.test(query) || query.length > 30) {
+            this.closeMention();
+            return;
+        }
+        if (query === this.mention()?.query)
+            return;
+        this.mention.update((m) => (m ? { ...m, query, active: 0 } : m));
+        void this.searchMentions(query);
+    }
+    async searchMentions(query) {
+        const source = this.mentions();
+        if (!source)
+            return;
+        const token = ++this.mentionToken;
+        let found;
+        if (typeof source === 'function') {
+            try {
+                found = await source(query);
+            }
+            catch {
+                found = [];
+            }
+        }
+        else {
+            const q = fold(query.trim());
+            found = source.filter((m) => !q || fold(m.label).includes(q) || fold(m.description ?? '').includes(q));
+        }
+        if (token !== this.mentionToken || !this.mention())
+            return;
+        this.mentionResults.set(found.slice(0, 8));
+    }
+    closeMention() {
+        this.mention.set(null);
+        this.mentionAnchor = null;
+        this.mentionResults.set([]);
+        this.mentionToken++;
+    }
+    mentionOptionId(index) {
+        return `${this.mentionListId}-${index}`;
+    }
+    /** Cambia `@texto` por la mención (un bloque no editable) seguida de un espacio. */
+    applyMention(item) {
+        const anchor = this.mentionAnchor;
+        const sel = this.document.getSelection();
+        this.closeMention();
+        if (!anchor || sel?.anchorNode !== anchor.node)
+            return;
+        const range = this.document.createRange();
+        range.setStart(anchor.node, anchor.offset);
+        range.setEnd(anchor.node, Math.max(anchor.offset + 1, sel.anchorOffset));
+        range.deleteContents();
+        const span = this.document.createElement('span');
+        span.setAttribute('data-mention', item.id);
+        span.setAttribute('contenteditable', 'false');
+        span.textContent = `@${item.label}`;
+        const space = this.document.createTextNode('\u00a0');
+        range.insertNode(space);
+        range.insertNode(span);
+        this.setCaret(space, 1);
+        this.emit();
+        this.mentionAdd.emit(item);
+    }
+    onMentionKeydown(event) {
+        const m = this.mention();
+        const items = this.mentionResults();
+        if (!m)
+            return false;
+        if (event.key === 'Escape') {
+            this.closeMention();
+            event.preventDefault();
+            return true;
+        }
+        if (!items.length)
+            return false;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                const step = event.key === 'ArrowDown' ? 1 : -1;
+                this.mention.set({ ...m, active: (m.active + step + items.length) % items.length });
+                break;
+            }
+            case 'Enter':
+            case 'Tab':
+                this.applyMention(items[m.active]);
+                break;
+            default:
+                return false;
+        }
+        event.preventDefault();
+        return true;
+    }
+    /** Ids de las personas mencionadas en el contenido (sin repetir). */
+    getMentions() {
+        const el = this.surfaceRef()?.nativeElement;
+        if (!el)
+            return [];
+        return [...new Set(Array.from(el.querySelectorAll('[data-mention]')).map((m) => m.getAttribute('data-mention')))];
+    }
+    // --- Autoguardado ------------------------------------------------------------------------------
+    draftStorageKey() {
+        const key = this.autosaveKey();
+        return key ? `cb-editor-draft:${key}` : null;
+    }
+    loadDraft() {
+        const key = this.draftStorageKey();
+        if (!key)
+            return;
+        try {
+            const raw = globalThis.localStorage?.getItem(key);
+            const draft = raw ? JSON.parse(raw) : null;
+            if (draft && typeof draft.html === 'string' && typeof draft.savedAt === 'number') {
+                const html = this.sanitize(draft.html);
+                if (html && html !== this.value())
+                    this.draft.set({ html, savedAt: draft.savedAt });
+            }
+        }
+        catch {
+            // Sin acceso al almacenamiento (modo privado, cuota): no hay borrador.
+        }
+    }
+    scheduleDraft() {
+        if (!this.draftStorageKey())
+            return;
+        clearTimeout(this.draftTimer);
+        this.draftTimer = setTimeout(() => this.saveDraft(), this.autosaveDelay());
+    }
+    saveDraft() {
+        this.draftTimer = undefined;
+        const key = this.draftStorageKey();
+        if (!key)
+            return;
+        try {
+            const savedAt = Date.now();
+            globalThis.localStorage?.setItem(key, JSON.stringify({ html: this.value(), savedAt }));
+            this.savedAt.set(savedAt);
+            // Lo escrito ahora sustituye al borrador anterior.
+            this.draft.set(null);
+        }
+        catch {
+            // Almacenamiento lleno o bloqueado: se sigue sin borrador.
+        }
+    }
+    /** Recupera el borrador guardado en este navegador. */
+    restoreDraft() {
+        const draft = this.draft();
+        if (!draft)
+            return;
+        this.draft.set(null);
+        this.value.set(draft.html);
+        this.onChange(draft.html);
+        afterNextRender(() => this.surfaceRef()?.nativeElement.focus(), { injector: this.injector });
+    }
+    /** Descarta el borrador guardado. */
+    discardDraft() {
+        this.draft.set(null);
+        this.clearDraft();
+    }
+    /** Borra el borrador de este navegador (llámalo tras guardar en tu servidor). */
+    clearDraft() {
+        clearTimeout(this.draftTimer);
+        this.draftTimer = undefined;
+        this.savedAt.set(null);
+        const key = this.draftStorageKey();
+        if (!key)
+            return;
+        try {
+            globalThis.localStorage?.removeItem(key);
+        }
+        catch {
+            // Nada que borrar.
+        }
+    }
+    draftDate(at) {
+        return new Intl.DateTimeFormat(this.t().intlLocale, { dateStyle: 'medium', timeStyle: 'short' }).format(at);
+    }
+    draftTime(at) {
+        return new Intl.DateTimeFormat(this.t().intlLocale, { timeStyle: 'short' }).format(at);
+    }
     // --- Vista de HTML -----------------------------------------------------------------
     toggleSource() {
         const el = this.surfaceRef()?.nativeElement;
@@ -3081,8 +3904,10 @@ class CbEditor {
         }
         // Al volver, el HTML escrito a mano se sanea.
         const clean = this.sanitize(this.sourceText());
-        if (el)
+        if (el) {
             el.innerHTML = clean;
+            decorate(el);
+        }
         this.sourceMode.set(false);
         this.emit();
     }
@@ -3096,6 +3921,7 @@ class CbEditor {
         const el = this.surfaceRef()?.nativeElement;
         if (!el)
             return;
+        this.refreshToc(el);
         const html = this.sanitize(el.innerHTML);
         this.length.set(this.textLength(el));
         if (html === this.value())
@@ -3103,6 +3929,7 @@ class CbEditor {
         this.lastHtml = html;
         this.value.set(html);
         this.onChange(html);
+        this.scheduleDraft();
     }
     onBlur() {
         this.bubble.set(null);
@@ -3205,609 +4032,696 @@ class CbEditor {
         });
         const cell = (this.closest(sel.anchorNode, 'TD') ?? this.closest(sel.anchorNode, 'TH'));
         this.tableCell.set(cell);
+        const pre = this.closest(sel.anchorNode, 'PRE');
+        const previous = this.codeBlock();
+        if (previous !== pre) {
+            // Al salir de un bloque coloreado por el editor, se vuelve a colorear con lo escrito.
+            const lang = previous?.getAttribute('data-language');
+            if (previous?.isConnected && lang && previous.getAttribute('data-highlight') === 'auto') {
+                highlightCodeBlock(previous, lang, this.document);
+                this.emit();
+            }
+            this.codeBlock.set(pre);
+            this.codeCopied.set(false);
+        }
+        if (this.mention() && (sel.anchorNode !== this.mentionAnchor?.node || sel.anchorOffset <= this.mentionAnchor.offset))
+            this.closeMention();
         if (this.slash() && (sel.anchorNode !== this.slashAnchor?.node || sel.anchorOffset <= this.slashAnchor.offset))
             this.closeSlash();
         this.updateBubble();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbEditor, isStandalone: true, selector: "cb-editor", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, wordCount: { classPropertyName: "wordCount", publicName: "wordCount", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, maxImageSize: { classPropertyName: "maxImageSize", publicName: "maxImageSize", isSignal: true, isRequired: false, transformFunction: null }, pastePlainText: { classPropertyName: "pastePlainText", publicName: "pastePlainText", isSignal: true, isRequired: false, transformFunction: null }, fonts: { classPropertyName: "fonts", publicName: "fonts", isSignal: true, isRequired: false, transformFunction: null }, fontsHref: { classPropertyName: "fontsHref", publicName: "fontsHref", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, autolink: { classPropertyName: "autolink", publicName: "autolink", isSignal: true, isRequired: false, transformFunction: null }, typography: { classPropertyName: "typography", publicName: "typography", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", imageError: "imageError" }, host: { properties: { "class.cb-is-invalid": "invalidState()", "class.cb-is-disabled": "isDisabled()", "class.cb-is-readonly": "readonly()", "class.cb-is-fullscreen": "fullscreen()" }, classAttribute: "cb-editor" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbEditor, isStandalone: true, selector: "cb-editor", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, wordCount: { classPropertyName: "wordCount", publicName: "wordCount", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, toolbar: { classPropertyName: "toolbar", publicName: "toolbar", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, imageUpload: { classPropertyName: "imageUpload", publicName: "imageUpload", isSignal: true, isRequired: false, transformFunction: null }, maxImageSize: { classPropertyName: "maxImageSize", publicName: "maxImageSize", isSignal: true, isRequired: false, transformFunction: null }, pastePlainText: { classPropertyName: "pastePlainText", publicName: "pastePlainText", isSignal: true, isRequired: false, transformFunction: null }, fonts: { classPropertyName: "fonts", publicName: "fonts", isSignal: true, isRequired: false, transformFunction: null }, fontsHref: { classPropertyName: "fontsHref", publicName: "fontsHref", isSignal: true, isRequired: false, transformFunction: null }, bubbleMenu: { classPropertyName: "bubbleMenu", publicName: "bubbleMenu", isSignal: true, isRequired: false, transformFunction: null }, slashCommands: { classPropertyName: "slashCommands", publicName: "slashCommands", isSignal: true, isRequired: false, transformFunction: null }, autolink: { classPropertyName: "autolink", publicName: "autolink", isSignal: true, isRequired: false, transformFunction: null }, typography: { classPropertyName: "typography", publicName: "typography", isSignal: true, isRequired: false, transformFunction: null }, mentions: { classPropertyName: "mentions", publicName: "mentions", isSignal: true, isRequired: false, transformFunction: null }, autosaveKey: { classPropertyName: "autosaveKey", publicName: "autosaveKey", isSignal: true, isRequired: false, transformFunction: null }, autosaveDelay: { classPropertyName: "autosaveDelay", publicName: "autosaveDelay", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", mentionAdd: "mentionAdd", imageError: "imageError" }, host: { properties: { "class.cb-is-invalid": "invalidState()", "class.cb-is-disabled": "isDisabled()", "class.cb-is-readonly": "readonly()", "class.cb-is-fullscreen": "fullscreen()" }, classAttribute: "cb-editor" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CbEditor),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "findInputRef", first: true, predicate: ["findInput"], descendants: true, isSignal: true }, { propertyName: "surfaceRef", first: true, predicate: ["surface"], descendants: true, isSignal: true }, { propertyName: "imageInputRef", first: true, predicate: ["imageInput"], descendants: true, isSignal: true }, { propertyName: "toolbarRef", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }, { propertyName: "linkInputRef", first: true, predicate: ["linkInput"], descendants: true, isSignal: true }, { propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "tableRowsRef", first: true, predicate: ["tableRows"], descendants: true, isSignal: true }, { propertyName: "tableColsRef", first: true, predicate: ["tableCols"], descendants: true, isSignal: true }, { propertyName: "tableHeaderRef", first: true, predicate: ["tableHeader"], descendants: true, isSignal: true }, { propertyName: "altInputRef", first: true, predicate: ["altInput"], descendants: true, isSignal: true }, { propertyName: "cropStageRef", first: true, predicate: ["cropStage"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="cb-editor__header">
-    @if (!readonly()) {
-      <div
-        #toolbar
-        class="cb-editor__toolbar"
-        role="toolbar"
-        [attr.aria-label]="t().textFormatting"
-        [attr.aria-controls]="surfaceId"
-        (keydown)="onToolbarKeydown($event)"
-        (focusin)="setActiveTool($any($event.target))"
-      >
-        @for (row of toolbarRows(); track $index) {
-        <div class="cb-editor__row">
-        @for (tool of row; track $index) {
-          @if (tool === '|') {
-            <span class="cb-editor__sep" aria-hidden="true"></span>
-          } @else if (tool === 'heading') {
-            <select
-              class="cb-editor__select"
-              [disabled]="isDisabled() || sourceMode()"
-              [attr.aria-label]="t().paragraphStyle"
-              [title]="t().paragraphStyle"
-              (change)="format($any($event.target).value)"
-            >
-              <option value="P" [selected]="state().block === 'P'">{{ t().normal }}</option>
-              <option value="H1" [selected]="state().block === 'H1'">{{ t().heading1 }}</option>
-              <option value="H2" [selected]="state().block === 'H2'">{{ t().heading2 }}</option>
-              <option value="H3" [selected]="state().block === 'H3'">{{ t().heading3 }}</option>
-              <option value="H4" [selected]="state().block === 'H4'">{{ t().heading4 }}</option>
-            </select>
-          } @else if (tool === 'fontFamily') {
-            <select
-              class="cb-editor__select cb-editor__select--font"
-              [disabled]="isDisabled() || sourceMode()"
-              [attr.aria-label]="t().fontFamily"
-              [title]="t().fontFamily"
-              (change)="setFontFamily($any($event.target).value)"
-            >
-              @for (group of fonts(); track $index) {
-                <optgroup [label]="groupLabel(group)">
-                  @for (font of group.fonts; track font.value) {
-                    <option [value]="font.value" [style.font-family]="font.value || null" [selected]="state().fontFamily === font.value">{{ font.name }}</option>
-                  }
-                </optgroup>
-              }
-            </select>
-          } @else if (tool === 'fontSize') {
-            <select
-              class="cb-editor__select cb-editor__select--size"
-              [disabled]="isDisabled() || sourceMode()"
-              [attr.aria-label]="t().fontSize"
-              [title]="t().fontSize"
-              (change)="setFontSize($any($event.target).value)"
-            >
-              <option value="" [selected]="!state().fontSize">{{ t().fontNormal }}</option>
-              @for (size of fontSizes; track size) {
-                <option [value]="size + 'px'" [selected]="state().fontSize === size + 'px'">{{ size }} px</option>
-              }
-            </select>
-          } @else if (isMenu(tool)) {
-            <div class="cb-editor__menu-wrap">
-              <button
-                type="button"
-                class="cb-editor__tool cb-editor__menu-trigger"
-                [disabled]="isDisabled() || sourceMode()"
-                aria-haspopup="menu"
-                [attr.aria-expanded]="openMenu() === tool"
-                [attr.aria-label]="toolLabel(tool)"
-                [attr.title]="toolLabel(tool)"
-                (mousedown)="hold($event)"
-                (click)="toggleMenu(tool)"
-                (keydown)="onMenuTriggerKeydown($event, tool)"
-              >
-                <cb-icon [name]="menuIcon(tool)" [size]="16" aria-hidden="true" />
-                @if (tool === 'textColor' || tool === 'highlight') {
-                  <span class="cb-editor__color-bar" [style.background]="tool === 'textColor' ? lastTextColor() : lastHighlight()"></span>
-                }
-                <cb-icon name="chevron-down" [size]="11" class="cb-editor__caret" aria-hidden="true" />
-              </button>
-              @if (openMenu() === tool) {
-                <div
-                  class="cb-editor__menu"
-                  [class.cb-editor__menu--palette]="tool === 'textColor' || tool === 'highlight'"
-                  [class.cb-editor__menu--chars]="tool === 'specialChars'"
-                  role="menu"
-                  [attr.aria-label]="toolLabel(tool)"
-                  (keydown)="onMenuKeydown($event)"
-                >
-                  @if (tool === 'alignment') {
-                    @for (option of alignments; track option) {
-                      <button
-                        type="button"
-                        class="cb-editor__menu-item"
-                        role="menuitemradio"
-                        [attr.aria-checked]="state()[option]"
-                        [tabindex]="-1"
-                        [attr.aria-keyshortcuts]="ariaKeys(option)"
-                        (mousedown)="hold($event)"
-                        (click)="applyMenu(tool, option)"
-                      >
-                        <cb-icon [name]="toolIcon(option)" [size]="16" aria-hidden="true" />
-                        <span>{{ toolLabel(option) }}</span>
-                        <kbd class="cb-editor__kbd">{{ toolKeys(option) }}</kbd>
-                      </button>
-                    }
-                  } @else if (tool === 'specialChars') {
-                    @for (group of specialChars; track $index) {
-                      <div class="cb-editor__chars-group" role="group" [attr.aria-label]="group.label(t())">
-                        <span class="cb-editor__chars-label" aria-hidden="true">{{ group.label(t()) }}</span>
-                        <div class="cb-editor__chars">
-                          @for (ch of group.chars; track ch) {
-                            <button type="button" class="cb-editor__char" role="menuitem" [tabindex]="-1" (mousedown)="hold($event)" (click)="applyMenu(tool, ch)">{{ ch }}</button>
-                          }
-                        </div>
-                      </div>
-                    }
-                  } @else {
-                    <button
-                      type="button"
-                      class="cb-editor__menu-item cb-editor__menu-item--wide"
-                      role="menuitem"
-                      [tabindex]="-1"
-                      (mousedown)="hold($event)"
-                      (click)="applyMenu(tool, null)"
-                    >
-                      <span class="cb-editor__swatch cb-editor__swatch--none" aria-hidden="true"></span>
-                      {{ tool === 'textColor' ? t().automaticColor : t().noHighlight }}
-                    </button>
-                    <div class="cb-editor__swatches">
-                      @for (color of tool === 'textColor' ? textColors : highlightColors; track color.value) {
-                        <button
-                          type="button"
-                          class="cb-editor__swatch"
-                          role="menuitem"
-                          [style.background]="color.value"
-                          [attr.aria-label]="color.label(t())"
-                          [attr.title]="color.label(t())"
-                          [tabindex]="-1"
-                          (mousedown)="hold($event)"
-                          (click)="applyMenu(tool, color.value)"
-                        ></button>
-                      }
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          } @else {
-            <button
-              type="button"
-              class="cb-editor__tool"
-              [class.cb-is-active]="isActive(tool)"
-              [disabled]="isDisabled() || (sourceMode() && tool !== 'source' && tool !== 'fullscreen')"
-              [attr.aria-label]="toolLabel(tool)"
-              [attr.title]="toolTitle(tool)"
-              [attr.aria-keyshortcuts]="ariaKeys(tool)"
-              [attr.aria-pressed]="pressable(tool) ? isActive(tool) : null"
-              (mousedown)="hold($event)"
-              (click)="run(tool)"
-            >
-              <cb-icon [name]="tool === 'fullscreen' && fullscreen() ? 'minimize' : toolIcon(tool)" [size]="16" aria-hidden="true" />
-            </button>
-          }
-        }
-        </div>
-        }
-      </div>
-    }
-
-    @if (findOpen() && !readonly()) {
-      <div class="cb-editor__link cb-editor__find" role="search" [attr.aria-label]="t().findReplace" (keydown)="onFindKeydown($event)">
-        <label class="cb-editor__link-field">
-          <span class="cb-editor__link-label">{{ t().findText }}</span>
-          <input #findInput class="cb-editor__link-input" type="text" autocomplete="off" [value]="findQuery()" (input)="setFindQuery($any($event.target).value)" />
-        </label>
-        <label class="cb-editor__link-field">
-          <span class="cb-editor__link-label">{{ t().replaceWith }}</span>
-          <input class="cb-editor__link-input cb-editor__replace-input" type="text" autocomplete="off" [value]="replaceText()" (input)="replaceText.set($any($event.target).value)" />
-        </label>
-        <div class="cb-editor__find-options">
-          <button
-            type="button"
-            class="cb-editor__tool"
-            [class.cb-is-active]="findCase()"
-            [attr.aria-pressed]="findCase()"
-            [attr.aria-label]="t().matchCase"
-            [attr.title]="t().matchCase"
-            (click)="setFindOption('case')"
-          >
-            <cb-icon name="case-sensitive" [size]="16" aria-hidden="true" />
-          </button>
-          <button
-            type="button"
-            class="cb-editor__tool"
-            [class.cb-is-active]="findWhole()"
-            [attr.aria-pressed]="findWhole()"
-            [attr.aria-label]="t().wholeWords"
-            [attr.title]="t().wholeWords"
-            (click)="setFindOption('whole')"
-          >
-            <cb-icon name="whole-word" [size]="16" aria-hidden="true" />
-          </button>
-          <span class="cb-editor__find-count" role="status">{{ findStatus() }}</span>
-          <button type="button" class="cb-editor__tool" [disabled]="!findTotal()" [attr.aria-label]="t().findPrevious" [attr.title]="t().findPrevious + ' (Shift+Enter)'" (click)="findStep(-1)">
-            <cb-icon name="chevron-up" [size]="16" aria-hidden="true" />
-          </button>
-          <button type="button" class="cb-editor__tool" [disabled]="!findTotal()" [attr.aria-label]="t().findNext" [attr.title]="t().findNext + ' (Enter)'" (click)="findStep(1)">
-            <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
-          </button>
-        </div>
-        <div class="cb-editor__link-actions">
-          <button type="button" class="cb-editor__btn" [disabled]="!findTotal()" (click)="replaceCurrent()">{{ t().replaceOne }}</button>
-          <button type="button" class="cb-editor__btn" [disabled]="!findTotal()" (click)="replaceAllMatches()">{{ t().replaceAll }}</button>
-          <button type="button" class="cb-editor__tool" [attr.aria-label]="t().close" [attr.title]="t().close + ' (Esc)'" (click)="closeFind()">
-            <cb-icon name="x" [size]="16" aria-hidden="true" />
-          </button>
-        </div>
-      </div>
-    }
-
-    @if (tableCell() && !readonly() && !sourceMode()) {
-      <div class="cb-editor__context cb-editor__context--table" role="toolbar" [attr.aria-label]="t().tableTools" (keydown)="onContextKeydown($event)">
-        <div class="cb-editor__group" role="group" [attr.aria-label]="t().tableRow">
-          <span class="cb-editor__group-label" aria-hidden="true">{{ t().tableRow }}</span>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="0" [attr.aria-label]="t().insertRowAbove" (mousedown)="hold($event)" (click)="tableAction('rowAbove')">
-            <cb-icon name="between-horizontal-start" [size]="15" aria-hidden="true" />{{ t().above }}
-          </button>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertRowBelow" (mousedown)="hold($event)" (click)="tableAction('rowBelow')">
-            <cb-icon name="between-horizontal-end" [size]="15" aria-hidden="true" />{{ t().below }}
-          </button>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteRow" (mousedown)="hold($event)" (click)="tableAction('deleteRow')">
-            <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().tableDelete }}
-          </button>
-        </div>
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        <div class="cb-editor__group" role="group" [attr.aria-label]="t().tableColumn">
-          <span class="cb-editor__group-label" aria-hidden="true">{{ t().tableColumn }}</span>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertColumnLeft" (mousedown)="hold($event)" (click)="tableAction('colLeft')">
-            <cb-icon name="between-vertical-start" [size]="15" aria-hidden="true" />{{ t().toLeft }}
-          </button>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertColumnRight" (mousedown)="hold($event)" (click)="tableAction('colRight')">
-            <cb-icon name="between-vertical-end" [size]="15" aria-hidden="true" />{{ t().toRight }}
-          </button>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteColumn" (mousedown)="hold($event)" (click)="tableAction('deleteCol')">
-            <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().tableDelete }}
-          </button>
-        </div>
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        <button
-          type="button"
-          class="cb-editor__tool cb-editor__tool--labeled"
-          tabindex="-1"
-          [class.cb-is-active]="tableHasHeader()"
-          [attr.aria-pressed]="tableHasHeader()"
-          [attr.aria-label]="t().tableHeaderRow"
-          (mousedown)="hold($event)"
-          (click)="tableAction('header')"
-        >
-          <cb-icon name="panel-top" [size]="15" aria-hidden="true" />{{ t().tableHeaderRow }}
-        </button>
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        <select class="cb-editor__select" tabindex="-1" [attr.aria-label]="t().tableBorders" (change)="setTableBorders($any($event.target).value, null)">
-          <option value="all" [selected]="tableBorders().borders === 'all'">{{ t().bordersAll }}</option>
-          <option value="horizontal" [selected]="tableBorders().borders === 'horizontal'">{{ t().bordersHorizontal }}</option>
-          <option value="none" [selected]="tableBorders().borders === 'none'">{{ t().bordersNone }}</option>
-        </select>
-        <select
-          class="cb-editor__select"
-          tabindex="-1"
-          [attr.aria-label]="t().borderColor"
-          [disabled]="tableBorders().borders === 'none'"
-          (change)="setTableBorders(null, $any($event.target).value)"
-        >
-          @for (color of borderColors; track color.value) {
-            <option [value]="color.value" [selected]="tableBorders().color === color.value">{{ color.label(t()) }}</option>
-          }
-        </select>
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteTable" (mousedown)="hold($event)" (click)="tableAction('deleteTable')">
-          <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().deleteTable }}
-        </button>
-      </div>
-    }
-
-    @if (selectedImage() && !readonly() && !sourceMode()) {
-      <div class="cb-editor__context" role="toolbar" [attr.aria-label]="t().imageTools" (keydown)="onContextKeydown($event)">
-        @for (option of imageAligns; track option.icon; let first = $first) {
-          <button
-            type="button"
-            class="cb-editor__tool"
-            [class.cb-is-active]="imageState().align === option.align"
-            [attr.aria-pressed]="imageState().align === option.align"
-            [attr.aria-label]="option.label(t())"
-            [attr.title]="option.label(t())"
-            [tabindex]="first ? 0 : -1"
-            (mousedown)="hold($event)"
-            (click)="setImageAlign(option.align)"
-          >
-            <cb-icon [name]="option.icon" [size]="16" aria-hidden="true" />
-          </button>
-        }
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        @for (width of imageWidths; track width) {
-          <button
-            type="button"
-            class="cb-editor__tool cb-editor__tool--text"
-            [class.cb-is-active]="imageState().width === width"
-            [attr.aria-pressed]="imageState().width === width"
-            [attr.aria-label]="imageWidthLabel(width)"
-            [tabindex]="-1"
-            (mousedown)="hold($event)"
-            (click)="setImageWidth(width)"
-          >{{ width }}</button>
-        }
-        <button
-          type="button"
-          class="cb-editor__tool"
-          [class.cb-is-active]="!imageState().width"
-          [attr.aria-pressed]="!imageState().width"
-          [attr.aria-label]="t().imageOriginalSize"
-          [attr.title]="t().imageOriginalSize"
-          [tabindex]="-1"
-          (mousedown)="hold($event)"
-          (click)="setImageWidth(null)"
-        >
-          <cb-icon name="ratio" [size]="16" aria-hidden="true" />
-        </button>
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        <button type="button" class="cb-editor__tool cb-editor__tool--labeled" [attr.aria-label]="t().cropImage" [tabindex]="-1" (click)="openCrop()">
-          <cb-icon name="crop" [size]="15" aria-hidden="true" />{{ t().cropImage }}
-        </button>
-        <button type="button" class="cb-editor__tool" [attr.aria-label]="t().altText" [attr.title]="t().altText" [tabindex]="-1" (click)="openAlt()">
-          <cb-icon name="captions" [size]="16" aria-hidden="true" />
-        </button>
-        <button
-          type="button"
-          class="cb-editor__tool cb-editor__tool--danger"
-          [attr.aria-label]="t().deleteImage"
-          [attr.title]="t().deleteImage"
-          [tabindex]="-1"
-          (mousedown)="hold($event)"
-          (click)="deleteImage()"
-        >
-          <cb-icon name="trash" [size]="16" aria-hidden="true" />
-        </button>
-      </div>
-    }
-
-    @if (tablePanel()) {
-      <div class="cb-editor__link cb-editor__picker-panel" role="group" [attr.aria-label]="t().insertTable" (keydown.escape)="closeTablePanel()">
-        <div class="cb-editor__picker" (mouseleave)="pickerHover.set(null)">
-          @for (r of pickerRows; track r) {
-            <div class="cb-editor__picker-row">
-              @for (c of pickerCols; track c) {
-                <button
-                  type="button"
-                  class="cb-editor__picker-cell"
-                  [class.cb-is-on]="pickerOn(r, c)"
-                  [attr.aria-label]="tableSizeLabel(r, c)"
-                  [tabindex]="r === pickerFocus().r && c === pickerFocus().c ? 0 : -1"
-                  (mouseenter)="pickerHover.set({ r, c })"
-                  (focus)="pickerHover.set({ r, c }); pickerFocus.set({ r, c })"
-                  (keydown)="onPickerKeydown($event, r, c)"
-                  (click)="insertTable(r, c)"
-                ></button>
-              }
-            </div>
-          }
-        </div>
-        <div class="cb-editor__picker-side">
-          <span class="cb-editor__picker-size" aria-live="polite">{{ pickerHover() ? tableSizeLabel(pickerHover()!.r, pickerHover()!.c) : t().insertTable }}</span>
-          <label class="cb-editor__link-check">
-            <input type="checkbox" [checked]="tableHeader()" (change)="tableHeader.set($any($event.target).checked)" />
-            {{ t().tableHeaderRow }}
-          </label>
-          <button type="button" class="cb-editor__btn" (click)="closeTablePanel()">{{ t().cancel }}</button>
-        </div>
-      </div>
-    }
-
-    @if (crop(); as c) {
-      <div class="cb-editor__crop" role="group" [attr.aria-label]="t().cropImage" (keydown.escape)="closeCrop()">
-        <div class="cb-editor__crop-stage" #cropStage>
-          <img class="cb-editor__crop-img" [src]="c.src" alt="" draggable="false" />
-          <div
-            class="cb-editor__crop-box"
-            role="slider"
-            tabindex="0"
-            [attr.aria-label]="t().cropArea"
-            [attr.aria-valuetext]="cropValueText()"
-            [attr.aria-describedby]="cropHelpId"
-            [style.left.%]="c.rect.x * 100"
-            [style.top.%]="c.rect.y * 100"
-            [style.width.%]="c.rect.w * 100"
-            [style.height.%]="c.rect.h * 100"
-            (pointerdown)="startCropDrag($event, null)"
-            (keydown)="onCropKeydown($event)"
-          >
-            @for (corner of cropCorners; track corner) {
-              <span class="cb-editor__crop-handle" [class]="'cb-editor__crop-handle cb-editor__crop-handle--' + corner" (pointerdown)="startCropDrag($event, corner)"></span>
-            }
-          </div>
-        </div>
-        <p class="cb-editor__crop-help" [id]="cropHelpId">{{ t().cropInstructions }}</p>
-        <div class="cb-editor__link-actions">
-          @for (ratio of cropRatios; track ratio.label) {
-            <button
-              type="button"
-              class="cb-editor__btn"
-              [class.cb-is-active]="c.ratio === ratio.value"
-              [attr.aria-pressed]="c.ratio === ratio.value"
-              (click)="setCropRatio(ratio.value)"
-            >{{ ratio.value === null ? t().cropFree : ratio.label }}</button>
-          }
-          <span class="cb-editor__crop-spacer"></span>
-          <button type="button" class="cb-editor__btn cb-editor__btn--primary" [disabled]="c.busy" (click)="applyCrop()">{{ t().cropImage }}</button>
-          <button type="button" class="cb-editor__btn" (click)="closeCrop()">{{ t().cancel }}</button>
-        </div>
-        @if (c.error) {
-          <p class="cb-editor__error" role="alert">{{ t().cropError }}</p>
-        }
-      </div>
-    }
-
-    @if (altPanel()) {
-      <form class="cb-editor__link" role="group" [attr.aria-label]="t().altText" (submit)="applyAlt($event)" (keydown.escape)="closeAlt()">
-        <label class="cb-editor__link-field">
-          <span class="cb-editor__link-label">{{ t().altText }}</span>
-          <input #altInput class="cb-editor__link-input" type="text" [value]="selectedImage()?.getAttribute('alt') ?? ''" />
-        </label>
-        <div class="cb-editor__link-actions">
-          <button type="submit" class="cb-editor__btn cb-editor__btn--primary">{{ t().accept }}</button>
-          <button type="button" class="cb-editor__btn" (click)="closeAlt()">{{ t().cancel }}</button>
-        </div>
-      </form>
-    }
-
-    @if (linkPanel(); as panel) {
-      <form class="cb-editor__link" role="group" [attr.aria-label]="t().insertLink" (submit)="applyLink($event)" (keydown.escape)="closeLink()">
-        <label class="cb-editor__link-field">
-          <span class="cb-editor__link-label">{{ t().linkUrl }}</span>
-          <input
-            #linkInput
-            class="cb-editor__link-input"
-            type="text"
-            inputmode="url"
-            autocomplete="off"
-            [value]="panel.url"
-            [attr.aria-invalid]="linkError() ? 'true' : null"
-            [attr.aria-describedby]="linkError() ? linkErrorId : null"
-            (input)="linkUrl.set($any($event.target).value)"
-          />
-        </label>
-        <label class="cb-editor__link-check">
-          <input type="checkbox" [checked]="panel.newTab" (change)="linkNewTab.set($any($event.target).checked)" />
-          {{ t().openInNewTab }}
-        </label>
-        <div class="cb-editor__link-actions">
-          <button type="submit" class="cb-editor__btn cb-editor__btn--primary">{{ t().accept }}</button>
-          @if (panel.editing) {
-            <button type="button" class="cb-editor__btn" (click)="removeLink()">
-              <cb-icon name="unlink" [size]="14" aria-hidden="true" />
-              {{ t().removeLink }}
-            </button>
-          }
-          <button type="button" class="cb-editor__btn" (click)="closeLink()">{{ t().cancel }}</button>
-        </div>
-        @if (linkError()) {
-          <p class="cb-editor__error" [id]="linkErrorId" role="alert">{{ t().invalidUrl }}</p>
-        }
-      </form>
-    }
-
-    </div>
-
-    <div #body class="cb-editor__body">
-    <div
-      #surface
-      class="cb-editor__surface"
-      [id]="surfaceId"
-      role="textbox"
-      [hidden]="sourceMode()"
-      [class.cb-is-empty]="isEmpty()"
-      [attr.aria-label]="ariaLabel() ?? t().textEditor"
-      [attr.aria-disabled]="isDisabled() || null"
-      [attr.aria-readonly]="readonly() || null"
-      [attr.aria-invalid]="invalidState() ? 'true' : null"
-      [attr.aria-required]="fieldState.required() || null"
-      [attr.aria-describedby]="describedBy()"
-      aria-multiline="true"
-      [attr.aria-activedescendant]="slash() && slashItems().length ? slashOptionId(slash()!.active) : null"
-      [attr.contenteditable]="!isDisabled() && !readonly()"
-      [attr.data-placeholder]="readonly() ? '' : (placeholder() ?? t().editorPlaceholder)"
-      [style.minHeight]="readonly() ? null : height()"
-      [style.maxHeight]="readonly() || fullscreen() ? null : maxHeight()"
-      (input)="onSurfaceInput($event)"
-      (beforeinput)="onBeforeInput($event)"
-      (keydown)="onSurfaceKeydown($event)"
-      (paste)="onPaste($event)"
-      (drop)="onDrop($event)"
-      (click)="onSurfaceClick($event)"
-      (mousedown)="pointerSelecting = true"
-      (scroll)="refreshFrame()"
-      (blur)="onBlur()"
-    ></div>
-    @if (imageFrame(); as frame) {
-      <div
-        class="cb-editor__img-frame"
-        aria-hidden="true"
-        [style.left.px]="frame.left"
-        [style.top.px]="frame.top"
-        [style.width.px]="frame.width"
-        [style.height.px]="frame.height"
-      >
-        <span class="cb-editor__img-handle" [attr.title]="t().imageResize" (pointerdown)="startResize($event)"></span>
-      </div>
-    }
-    @if (bubble(); as b) {
-      <div
-        class="cb-editor__bubble"
-        [class.cb-editor__bubble--below]="b.below"
-        role="toolbar"
-        [attr.aria-label]="t().quickFormat"
-        [style.left.px]="b.left"
-        [style.top.px]="b.top"
-        (keydown)="onContextKeydown($event)"
-      >
-        @for (tool of bubbleTools; track tool; let first = $first) {
-          <button
-            type="button"
-            class="cb-editor__tool"
-            [class.cb-is-active]="isActive(tool)"
-            [attr.aria-pressed]="pressable(tool) ? isActive(tool) : null"
-            [attr.aria-label]="toolLabel(tool)"
-            [attr.title]="toolTitle(tool)"
-            [tabindex]="first ? 0 : -1"
-            (mousedown)="hold($event)"
-            (click)="runBubble(tool)"
-          >
-            <cb-icon [name]="toolIcon(tool)" [size]="16" aria-hidden="true" />
-          </button>
-        }
-      </div>
-    }
-    @if (slash(); as sl) {
-      @if (slashItems().length) {
-        <div class="cb-editor__slash" role="listbox" [id]="slashListId" [attr.aria-label]="t().insertBlock" [style.left.px]="sl.left" [style.top.px]="sl.top">
-          @for (item of slashItems(); track item.id; let i = $index) {
-            <div
-              class="cb-editor__slash-item"
-              role="option"
-              [id]="slashOptionId(i)"
-              [class.cb-is-active]="i === sl.active"
-              [attr.aria-selected]="i === sl.active"
-              (mousedown)="hold($event)"
-              (click)="applySlash(item)"
-            >
-              <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" />
-              {{ item.label(t()) }}
-            </div>
-          }
-        </div>
-      }
-    }
-    </div>
-
-    @if (sourceMode()) {
-      <textarea
-        class="cb-editor__source"
-        spellcheck="false"
-        [attr.aria-label]="t().sourceCode"
-        [style.minHeight]="height()"
-        [value]="sourceText()"
-        (input)="sourceText.set($any($event.target).value)"
-        (blur)="onBlur()"
-      ></textarea>
-    }
-
-    @if (message() || maxLength() || (wordCount() && !readonly())) {
-      <div class="cb-editor__footer">
-        @if (message()) {
-          <p class="cb-editor__error" role="alert">{{ message() }}</p>
-        }
-        @if (maxLength() || (wordCount() && !readonly())) {
-          <span class="cb-editor__count" [id]="countId" [class.cb-is-over]="!!maxLength() && length() > maxLength()!">{{ countLine() }}</span>
-        }
-      </div>
-    }
-
-    <input #imageInput type="file" accept="image/png,image/jpeg,image/gif,image/webp" hidden (change)="onImageFile($event)" />
-  `, isInline: true, styles: [":host{display:block;width:100%;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);overflow:clip}.cb-editor__header{position:sticky;top:var(--cb-editor-sticky-top, 0px);z-index:3;background:var(--cb-color-surface)}.cb-editor__toolbar{display:grid;gap:.25rem;padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface))}.cb-editor__row{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem}.cb-editor__row+.cb-editor__row{padding-top:.25rem;border-top:1px dashed var(--cb-color-border)}.cb-editor__select--font{width:10.5rem}.cb-editor__select--size{width:5.5rem}.cb-editor__select{height:1.75rem;padding:0 .4rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-editor__sep{width:1px;height:1.1rem;margin:0 .25rem;background:var(--cb-color-border)}.cb-editor__tool{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);cursor:pointer}.cb-editor__tool:hover{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-editor__tool:disabled{opacity:.4;cursor:not-allowed}.cb-editor__tool:focus-visible,.cb-editor__select:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__tool.cb-is-active{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}:host-context([data-theme=\"dark\"]) .cb-editor__tool.cb-is-active{color:var(--cb-color-primary-300)}@media(forced-colors:active){.cb-editor__tool.cb-is-active{outline:2px solid Highlight}}.cb-editor__link{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--cb-space-2) var(--cb-space-3);padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface));font-size:var(--cb-text-sm)}.cb-editor__link-field{display:grid;flex:1 1 14rem;gap:.2rem}.cb-editor__link-label{font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__link-input{height:2rem;padding:0 .5rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-sm);background:var(--cb-color-bg, var(--cb-color-surface));color:var(--cb-color-text);font:inherit}.cb-editor__link-input[aria-invalid=true]{border-color:var(--cb-color-danger-500)}.cb-editor__link-input:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:0}.cb-editor__link-check{display:inline-flex;align-items:center;gap:.35rem;min-height:2rem}.cb-editor__link-actions{display:inline-flex;gap:var(--cb-space-2)}.cb-editor__btn{display:inline-flex;align-items:center;gap:.3rem;height:2rem;padding:0 .7rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-editor__btn:hover{background:var(--cb-color-surface-hover)}.cb-editor__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__btn--primary{color:var(--cb-color-primary-contrast);background:var(--cb-color-primary-600);border-color:var(--cb-color-primary-600)}.cb-editor__btn--primary:hover{background:var(--cb-color-primary-700)}.cb-editor__error{flex-basis:100%;margin:0;font-size:var(--cb-text-xs);color:var(--cb-color-danger-600)}.cb-editor__surface{padding:var(--cb-space-3);font-family:var(--cb-editor-font-family, Carlito, Calibri, var(--cb-font-sans), sans-serif);font-size:var(--cb-editor-font-size, 16px);line-height:1.6;outline:none;overflow-y:auto}.cb-editor__surface:empty:before,.cb-editor__surface.cb-is-empty:not(:focus):before{content:attr(data-placeholder);color:var(--cb-color-text-muted);pointer-events:none}.cb-editor__surface.cb-is-empty:not(:empty):before{position:absolute}.cb-editor__surface{position:relative}.cb-editor__source{display:block;box-sizing:border-box;width:100%;padding:var(--cb-space-3);border:none;resize:vertical;background:var(--cb-color-surface-subtle, var(--cb-color-surface));color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);font-size:var(--cb-text-xs);line-height:1.6;outline:none}.cb-editor__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-1) var(--cb-space-3) var(--cb-space-2);border-top:var(--cb-border-width) solid var(--cb-color-border)}.cb-editor__count{margin-left:auto;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-editor__count.cb-is-over{color:var(--cb-color-danger-600);font-weight:var(--cb-font-weight-semibold)}:host(.cb-is-readonly){border-color:transparent;background:transparent}:host(.cb-is-readonly) .cb-editor__surface{padding:0}.cb-editor__surface h1{font-size:1.5rem;margin:.4em 0}.cb-editor__surface h2{font-size:1.25rem;margin:.4em 0}.cb-editor__surface h3{font-size:1.1rem;margin:.4em 0}.cb-editor__surface p{margin:.4em 0}.cb-editor__surface ul,.cb-editor__surface ol{margin:.4em 0;padding-left:1.5rem}.cb-editor__surface blockquote{margin:.5em 0;padding:.25em .9em;border-left:3px solid var(--cb-color-primary-400, var(--cb-color-border));color:var(--cb-color-text-muted)}.cb-editor__surface a{color:var(--cb-color-primary-600, #059669);text-decoration:underline}.cb-editor__surface code{padding:.1em .35em;border-radius:var(--cb-radius-sm);background:var(--cb-color-surface-subtle, rgb(0 0 0 / .06));font-family:var(--cb-font-mono, monospace);font-size:.9em}.cb-editor__surface pre{padding:var(--cb-space-3);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle, rgb(0 0 0 / .06));font-family:var(--cb-font-mono, monospace);white-space:pre-wrap}.cb-editor__surface hr{margin:var(--cb-space-3) 0;border:none;border-top:1px solid var(--cb-color-border-strong, var(--cb-color-border))}.cb-editor__surface img{max-width:100%;height:auto;border-radius:var(--cb-radius-sm, 4px)}:host(.cb-is-invalid){border-color:var(--cb-color-danger)}.cb-editor__context{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem;padding:var(--cb-space-1) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:color-mix(in srgb,var(--cb-color-primary-500) 6%,var(--cb-color-surface))}.cb-editor__tool--text{width:auto;padding:0 .4rem;font:inherit;font-size:var(--cb-text-xs);font-variant-numeric:tabular-nums}.cb-editor__tool--danger:hover{color:var(--cb-color-danger-600);background:color-mix(in srgb,var(--cb-color-danger-500) 12%,transparent)}.cb-editor__link-field--narrow{flex:0 0 6rem}.cb-editor__body{position:relative}.cb-editor__surface img{cursor:pointer}.cb-editor__img-frame{position:absolute;box-sizing:border-box;border:2px solid var(--cb-color-primary-500);border-radius:2px;pointer-events:none}.cb-editor__img-handle{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border:2px solid var(--cb-color-surface);border-radius:2px;background:var(--cb-color-primary-500);cursor:nwse-resize;pointer-events:auto;touch-action:none}.cb-editor__surface table{width:100%;margin:var(--cb-space-2) 0;border-collapse:collapse;table-layout:fixed}.cb-editor__surface th,.cb-editor__surface td{min-width:2rem;padding:.35rem .5rem;vertical-align:top;word-break:break-word;outline:1px dashed color-mix(in srgb,var(--cb-color-text-muted) 45%,transparent);outline-offset:-1px}.cb-editor__surface th[style*=border],.cb-editor__surface td[style*=border]{outline:none}.cb-editor__surface th{font-weight:var(--cb-font-weight-semibold, 600);text-align:left}:host(.cb-is-readonly) .cb-editor__surface th,:host(.cb-is-readonly) .cb-editor__surface td{outline:none}.cb-editor__surface pre code{padding:0;background:transparent;color:inherit;font-size:inherit}.cb-editor__surface pre[data-language]:before{content:attr(data-language);float:right;margin:-.25rem -.25rem 0 .5rem;font-family:var(--cb-font-sans);font-size:.7rem;opacity:.6}.cb-editor__group{display:inline-flex;align-items:center;gap:.2rem}.cb-editor__group-label{margin-right:.15rem;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted)}.cb-editor__tool--labeled{width:auto;gap:.3rem;padding:0 .45rem;font:inherit;font-size:var(--cb-text-xs);white-space:nowrap}.cb-editor__picker-panel{align-items:flex-start}.cb-editor__picker{display:grid;gap:3px}.cb-editor__picker-row{display:flex;gap:3px}.cb-editor__picker-cell{width:1.1rem;height:1.1rem;padding:0;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:2px;background:var(--cb-color-surface);cursor:pointer}.cb-editor__picker-cell.cb-is-on{border-color:var(--cb-color-primary-600);background:color-mix(in srgb,var(--cb-color-primary-500) 35%,var(--cb-color-surface))}.cb-editor__picker-cell:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__picker-side{display:grid;gap:var(--cb-space-2);align-content:start}.cb-editor__picker-size{font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums}.cb-editor__crop{display:grid;gap:var(--cb-space-2);padding:var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface))}.cb-editor__crop-stage{position:relative;justify-self:center;max-width:100%;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}.cb-editor__crop-img{display:block;max-width:100%;max-height:22rem}.cb-editor__crop-box{position:absolute;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 9999px #0000008c;cursor:move;outline:none}.cb-editor__crop-box:focus-visible{border-color:var(--cb-color-focus-ring)}.cb-editor__crop-handle{position:absolute;width:14px;height:14px;border:2px solid var(--cb-color-primary-600);border-radius:2px;background:#fff}.cb-editor__crop-handle--nw{left:-8px;top:-8px;cursor:nwse-resize}.cb-editor__crop-handle--ne{right:-8px;top:-8px;cursor:nesw-resize}.cb-editor__crop-handle--sw{left:-8px;bottom:-8px;cursor:nesw-resize}.cb-editor__crop-handle--se{right:-8px;bottom:-8px;cursor:nwse-resize}.cb-editor__crop-help{margin:0;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__crop-spacer{flex:1}.cb-editor__btn.cb-is-active{border-color:var(--cb-color-primary-600);color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,var(--cb-color-surface))}.cb-editor__crop .cb-editor__link-actions{display:flex;flex-wrap:wrap}.cb-editor__select--size{width:7.5rem}.cb-editor__menu-wrap{position:relative;display:inline-flex}.cb-editor__menu-trigger{position:relative;width:auto;gap:1px;padding:0 .25rem}.cb-editor__color-bar{position:absolute;left:.35rem;right:1rem;bottom:.2rem;height:3px;border-radius:1px}.cb-editor__caret{opacity:.7}.cb-editor__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:10;display:grid;gap:2px;min-width:12rem;padding:.35rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12))}.cb-editor__menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .5rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm);text-align:left;cursor:pointer}.cb-editor__menu-item:hover,.cb-editor__menu-item:focus-visible{background:var(--cb-color-surface-hover);outline:none}.cb-editor__menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring)}.cb-editor__menu-item[aria-checked=true]{font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700)}.cb-editor__kbd{margin-left:auto;font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__swatches{display:grid;grid-template-columns:repeat(5,1.6rem);gap:.35rem;padding:.25rem}.cb-editor__swatch{width:1.6rem;height:1.6rem;padding:0;border:1px solid rgb(0 0 0 / .15);border-radius:var(--cb-radius-sm);cursor:pointer}.cb-editor__swatch:hover{transform:scale(1.1)}.cb-editor__swatch:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-editor__swatch--none{display:inline-block;width:1rem;height:1rem;background:linear-gradient(135deg,transparent 45%,var(--cb-color-danger-500) 45% 55%,transparent 55%),var(--cb-color-surface)}.cb-editor__surface{resize:vertical}:host(.cb-is-readonly) .cb-editor__surface{resize:none}:host(.cb-is-fullscreen){position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;border-radius:0}:host(.cb-is-fullscreen) .cb-editor__body{flex:1;min-height:0;display:flex;flex-direction:column}:host(.cb-is-fullscreen) .cb-editor__surface{flex:1;resize:none;max-width:60rem;width:100%;margin:0 auto}.cb-editor__surface h4{margin:.75rem 0 .35rem;font-size:1rem}.cb-editor__surface ul[data-type=taskList]{padding-left:.25rem;list-style:none}.cb-editor__surface ul[data-type=taskList]>li{position:relative;padding-left:1.75rem}.cb-editor__surface ul[data-type=taskList]>li:before{content:\"\";position:absolute;left:0;top:.3em;box-sizing:border-box;width:1.05rem;height:1.05rem;border:1.5px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:3px;background:var(--cb-color-surface);cursor:pointer}.cb-editor__surface ul[data-type=taskList]>li[data-checked=true]:before{content:\"\\2713\";display:grid;place-items:center;border-color:var(--cb-color-primary-600);background:var(--cb-color-primary-600);color:var(--cb-color-primary-contrast, #fff);font-size:.75rem;font-weight:700;line-height:1}.cb-editor__surface ul[data-type=taskList]>li[data-checked=true]{color:var(--cb-color-text-muted);text-decoration:line-through}.cb-editor__menu--chars{left:auto;right:0;width:max-content;max-height:18rem;overflow-y:auto}.cb-editor__chars-label{display:block;padding:.35rem .25rem .15rem;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted)}.cb-editor__chars{display:grid;grid-template-columns:repeat(8,2rem);gap:2px}.cb-editor__char{width:2rem;height:2rem;padding:0;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font-size:1.05rem;line-height:1;cursor:pointer}.cb-editor__char:hover,.cb-editor__char:focus-visible{background:var(--cb-color-surface-hover);outline:none}.cb-editor__char:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring)}.cb-editor__find{align-items:flex-end}.cb-editor__find-options{display:inline-flex;align-items:center;gap:.2rem;min-height:2rem}.cb-editor__find-count{min-width:5.5rem;padding:0 .35rem;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums;text-align:center}.cb-editor__find .cb-editor__link-actions{align-items:center}.cb-editor__bubble{position:absolute;z-index:4;display:flex;gap:2px;padding:.2rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12));transform:translate(-50%,calc(-100% - 6px))}.cb-editor__bubble--below{transform:translate(-50%,6px)}.cb-editor__slash{position:absolute;z-index:4;display:grid;gap:1px;width:15rem;max-height:17rem;margin-top:4px;padding:.3rem;overflow-y:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12))}.cb-editor__slash-item{display:flex;align-items:center;gap:.55rem;padding:.4rem .5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-editor__slash-item:hover{background:var(--cb-color-surface-hover)}.cb-editor__slash-item.cb-is-active{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}:host-context([data-theme=\"dark\"]) .cb-editor__slash-item.cb-is-active{color:var(--cb-color-primary-300)}@media(forced-colors:active){.cb-editor__slash-item.cb-is-active{outline:2px solid Highlight}}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "findInputRef", first: true, predicate: ["findInput"], descendants: true, isSignal: true }, { propertyName: "surfaceRef", first: true, predicate: ["surface"], descendants: true, isSignal: true }, { propertyName: "imageInputRef", first: true, predicate: ["imageInput"], descendants: true, isSignal: true }, { propertyName: "toolbarRef", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }, { propertyName: "linkInputRef", first: true, predicate: ["linkInput"], descendants: true, isSignal: true }, { propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }, { propertyName: "tableRowsRef", first: true, predicate: ["tableRows"], descendants: true, isSignal: true }, { propertyName: "tableColsRef", first: true, predicate: ["tableCols"], descendants: true, isSignal: true }, { propertyName: "tableHeaderRef", first: true, predicate: ["tableHeader"], descendants: true, isSignal: true }, { propertyName: "altInputRef", first: true, predicate: ["altInput"], descendants: true, isSignal: true }, { propertyName: "cropStageRef", first: true, predicate: ["cropStage"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="cb-editor__header">
+    @if (!readonly()) {
+      <div
+        #toolbar
+        class="cb-editor__toolbar"
+        role="toolbar"
+        [attr.aria-label]="t().textFormatting"
+        [attr.aria-controls]="surfaceId"
+        (keydown)="onToolbarKeydown($event)"
+        (focusin)="setActiveTool($any($event.target))"
+      >
+        @for (row of toolbarRows(); track $index) {
+        <div class="cb-editor__row">
+        @for (tool of row; track $index) {
+          @if (tool === '|') {
+            <span class="cb-editor__sep" aria-hidden="true"></span>
+          } @else if (tool === 'heading') {
+            <select
+              class="cb-editor__select"
+              [disabled]="isDisabled() || sourceMode()"
+              [attr.aria-label]="t().paragraphStyle"
+              [title]="t().paragraphStyle"
+              (change)="format($any($event.target).value)"
+            >
+              <option value="P" [selected]="state().block === 'P'">{{ t().normal }}</option>
+              <option value="H1" [selected]="state().block === 'H1'">{{ t().heading1 }}</option>
+              <option value="H2" [selected]="state().block === 'H2'">{{ t().heading2 }}</option>
+              <option value="H3" [selected]="state().block === 'H3'">{{ t().heading3 }}</option>
+              <option value="H4" [selected]="state().block === 'H4'">{{ t().heading4 }}</option>
+            </select>
+          } @else if (tool === 'fontFamily') {
+            <select
+              class="cb-editor__select cb-editor__select--font"
+              [disabled]="isDisabled() || sourceMode()"
+              [attr.aria-label]="t().fontFamily"
+              [title]="t().fontFamily"
+              (change)="setFontFamily($any($event.target).value)"
+            >
+              @for (group of fonts(); track $index) {
+                <optgroup [label]="groupLabel(group)">
+                  @for (font of group.fonts; track font.value) {
+                    <option [value]="font.value" [style.font-family]="font.value || null" [selected]="state().fontFamily === font.value">{{ font.name }}</option>
+                  }
+                </optgroup>
+              }
+            </select>
+          } @else if (tool === 'fontSize') {
+            <select
+              class="cb-editor__select cb-editor__select--size"
+              [disabled]="isDisabled() || sourceMode()"
+              [attr.aria-label]="t().fontSize"
+              [title]="t().fontSize"
+              (change)="setFontSize($any($event.target).value)"
+            >
+              <option value="" [selected]="!state().fontSize">{{ t().fontNormal }}</option>
+              @for (size of fontSizes; track size) {
+                <option [value]="size + 'px'" [selected]="state().fontSize === size + 'px'">{{ size }} px</option>
+              }
+            </select>
+          } @else if (isMenu(tool)) {
+            <div class="cb-editor__menu-wrap">
+              <button
+                type="button"
+                class="cb-editor__tool cb-editor__menu-trigger"
+                [disabled]="isDisabled() || sourceMode()"
+                aria-haspopup="menu"
+                [attr.aria-expanded]="openMenu() === tool"
+                [attr.aria-label]="toolLabel(tool)"
+                [attr.title]="toolLabel(tool)"
+                (mousedown)="hold($event)"
+                (click)="toggleMenu(tool)"
+                (keydown)="onMenuTriggerKeydown($event, tool)"
+              >
+                <cb-icon [name]="menuIcon(tool)" [size]="16" aria-hidden="true" />
+                @if (tool === 'textColor' || tool === 'highlight') {
+                  <span class="cb-editor__color-bar" [style.background]="tool === 'textColor' ? lastTextColor() : lastHighlight()"></span>
+                }
+                <cb-icon name="chevron-down" [size]="11" class="cb-editor__caret" aria-hidden="true" />
+              </button>
+              @if (openMenu() === tool) {
+                <div
+                  class="cb-editor__menu"
+                  [class.cb-editor__menu--palette]="tool === 'textColor' || tool === 'highlight'"
+                  [class.cb-editor__menu--chars]="tool === 'specialChars'"
+                  role="menu"
+                  [attr.aria-label]="toolLabel(tool)"
+                  (keydown)="onMenuKeydown($event)"
+                >
+                  @if (tool === 'alignment') {
+                    @for (option of alignments; track option) {
+                      <button
+                        type="button"
+                        class="cb-editor__menu-item"
+                        role="menuitemradio"
+                        [attr.aria-checked]="state()[option]"
+                        [tabindex]="-1"
+                        [attr.aria-keyshortcuts]="ariaKeys(option)"
+                        (mousedown)="hold($event)"
+                        (click)="applyMenu(tool, option)"
+                      >
+                        <cb-icon [name]="toolIcon(option)" [size]="16" aria-hidden="true" />
+                        <span>{{ toolLabel(option) }}</span>
+                        <kbd class="cb-editor__kbd">{{ toolKeys(option) }}</kbd>
+                      </button>
+                    }
+                  } @else if (tool === 'specialChars') {
+                    @for (group of specialChars; track $index) {
+                      <div class="cb-editor__chars-group" role="group" [attr.aria-label]="group.label(t())">
+                        <span class="cb-editor__chars-label" aria-hidden="true">{{ group.label(t()) }}</span>
+                        <div class="cb-editor__chars">
+                          @for (ch of group.chars; track ch) {
+                            <button type="button" class="cb-editor__char" role="menuitem" [tabindex]="-1" (mousedown)="hold($event)" (click)="applyMenu(tool, ch)">{{ ch }}</button>
+                          }
+                        </div>
+                      </div>
+                    }
+                  } @else {
+                    <button
+                      type="button"
+                      class="cb-editor__menu-item cb-editor__menu-item--wide"
+                      role="menuitem"
+                      [tabindex]="-1"
+                      (mousedown)="hold($event)"
+                      (click)="applyMenu(tool, null)"
+                    >
+                      <span class="cb-editor__swatch cb-editor__swatch--none" aria-hidden="true"></span>
+                      {{ tool === 'textColor' ? t().automaticColor : t().noHighlight }}
+                    </button>
+                    <div class="cb-editor__swatches">
+                      @for (color of tool === 'textColor' ? textColors : highlightColors; track color.value) {
+                        <button
+                          type="button"
+                          class="cb-editor__swatch"
+                          role="menuitem"
+                          [style.background]="color.value"
+                          [attr.aria-label]="color.label(t())"
+                          [attr.title]="color.label(t())"
+                          [tabindex]="-1"
+                          (mousedown)="hold($event)"
+                          (click)="applyMenu(tool, color.value)"
+                        ></button>
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          } @else {
+            <button
+              type="button"
+              class="cb-editor__tool"
+              [class.cb-is-active]="isActive(tool)"
+              [disabled]="isDisabled() || (sourceMode() && tool !== 'source' && tool !== 'fullscreen')"
+              [attr.aria-label]="toolLabel(tool)"
+              [attr.title]="toolTitle(tool)"
+              [attr.aria-keyshortcuts]="ariaKeys(tool)"
+              [attr.aria-pressed]="pressable(tool) ? isActive(tool) : null"
+              (mousedown)="hold($event)"
+              (click)="run(tool)"
+            >
+              <cb-icon [name]="tool === 'fullscreen' && fullscreen() ? 'minimize' : toolIcon(tool)" [size]="16" aria-hidden="true" />
+            </button>
+          }
+        }
+        </div>
+        }
+      </div>
+    }
+
+    @if (findOpen() && !readonly()) {
+      <div class="cb-editor__link cb-editor__find" role="search" [attr.aria-label]="t().findReplace" (keydown)="onFindKeydown($event)">
+        <label class="cb-editor__link-field">
+          <span class="cb-editor__link-label">{{ t().findText }}</span>
+          <input #findInput class="cb-editor__link-input" type="text" autocomplete="off" [value]="findQuery()" (input)="setFindQuery($any($event.target).value)" />
+        </label>
+        <label class="cb-editor__link-field">
+          <span class="cb-editor__link-label">{{ t().replaceWith }}</span>
+          <input class="cb-editor__link-input cb-editor__replace-input" type="text" autocomplete="off" [value]="replaceText()" (input)="replaceText.set($any($event.target).value)" />
+        </label>
+        <div class="cb-editor__find-options">
+          <button
+            type="button"
+            class="cb-editor__tool"
+            [class.cb-is-active]="findCase()"
+            [attr.aria-pressed]="findCase()"
+            [attr.aria-label]="t().matchCase"
+            [attr.title]="t().matchCase"
+            (click)="setFindOption('case')"
+          >
+            <cb-icon name="case-sensitive" [size]="16" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="cb-editor__tool"
+            [class.cb-is-active]="findWhole()"
+            [attr.aria-pressed]="findWhole()"
+            [attr.aria-label]="t().wholeWords"
+            [attr.title]="t().wholeWords"
+            (click)="setFindOption('whole')"
+          >
+            <cb-icon name="whole-word" [size]="16" aria-hidden="true" />
+          </button>
+          <span class="cb-editor__find-count" role="status">{{ findStatus() }}</span>
+          <button type="button" class="cb-editor__tool" [disabled]="!findTotal()" [attr.aria-label]="t().findPrevious" [attr.title]="t().findPrevious + ' (Shift+Enter)'" (click)="findStep(-1)">
+            <cb-icon name="chevron-up" [size]="16" aria-hidden="true" />
+          </button>
+          <button type="button" class="cb-editor__tool" [disabled]="!findTotal()" [attr.aria-label]="t().findNext" [attr.title]="t().findNext + ' (Enter)'" (click)="findStep(1)">
+            <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
+          </button>
+        </div>
+        <div class="cb-editor__link-actions">
+          <button type="button" class="cb-editor__btn" [disabled]="!findTotal()" (click)="replaceCurrent()">{{ t().replaceOne }}</button>
+          <button type="button" class="cb-editor__btn" [disabled]="!findTotal()" (click)="replaceAllMatches()">{{ t().replaceAll }}</button>
+          <button type="button" class="cb-editor__tool" [attr.aria-label]="t().close" [attr.title]="t().close + ' (Esc)'" (click)="closeFind()">
+            <cb-icon name="x" [size]="16" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+    }
+
+    @if (draft(); as d) {
+      <div class="cb-editor__draft" role="status">
+        <span>{{ fmt(t().editorDraftFound, draftDate(d.savedAt)) }}</span>
+        <button type="button" class="cb-editor__btn cb-editor__btn--primary" (click)="restoreDraft()">{{ t().editorRestoreDraft }}</button>
+        <button type="button" class="cb-editor__btn" (click)="discardDraft()">{{ t().editorDiscardDraft }}</button>
+      </div>
+    }
+
+    @if (codeBlock() && !readonly() && !sourceMode()) {
+      <div class="cb-editor__context" role="toolbar" [attr.aria-label]="t().editorCodeTools" (keydown)="onContextKeydown($event)">
+        <span class="cb-editor__group-label" aria-hidden="true">{{ t().codeBlock }}</span>
+        <select class="cb-editor__select" tabindex="0" [attr.aria-label]="t().editorCodeLanguage" (change)="setCodeLanguage($any($event.target).value)">
+          @for (lang of codeLanguages; track lang) {
+            <option [value]="lang" [selected]="codeLanguage() === lang">{{ lang ? languageLabel(lang) : t().editorPlainText }}</option>
+          }
+        </select>
+        <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" (mousedown)="hold($event)" (click)="copyCode()">
+          <cb-icon name="copy" [size]="15" aria-hidden="true" />{{ codeCopied() ? t().editorCodeCopied : t().editorCopyCode }}
+        </button>
+      </div>
+    }
+
+    @if (tableCell() && !readonly() && !sourceMode()) {
+      <div class="cb-editor__context cb-editor__context--table" role="toolbar" [attr.aria-label]="t().tableTools" (keydown)="onContextKeydown($event)">
+        <div class="cb-editor__group" role="group" [attr.aria-label]="t().tableRow">
+          <span class="cb-editor__group-label" aria-hidden="true">{{ t().tableRow }}</span>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="0" [attr.aria-label]="t().insertRowAbove" (mousedown)="hold($event)" (click)="tableAction('rowAbove')">
+            <cb-icon name="between-horizontal-start" [size]="15" aria-hidden="true" />{{ t().above }}
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertRowBelow" (mousedown)="hold($event)" (click)="tableAction('rowBelow')">
+            <cb-icon name="between-horizontal-end" [size]="15" aria-hidden="true" />{{ t().below }}
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteRow" (mousedown)="hold($event)" (click)="tableAction('deleteRow')">
+            <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().tableDelete }}
+          </button>
+        </div>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <div class="cb-editor__group" role="group" [attr.aria-label]="t().tableColumn">
+          <span class="cb-editor__group-label" aria-hidden="true">{{ t().tableColumn }}</span>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertColumnLeft" (mousedown)="hold($event)" (click)="tableAction('colLeft')">
+            <cb-icon name="between-vertical-start" [size]="15" aria-hidden="true" />{{ t().toLeft }}
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertColumnRight" (mousedown)="hold($event)" (click)="tableAction('colRight')">
+            <cb-icon name="between-vertical-end" [size]="15" aria-hidden="true" />{{ t().toRight }}
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteColumn" (mousedown)="hold($event)" (click)="tableAction('deleteCol')">
+            <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().tableDelete }}
+          </button>
+        </div>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <div class="cb-editor__group" role="group" [attr.aria-label]="t().editorTableCells">
+          <span class="cb-editor__group-label" aria-hidden="true">{{ t().editorTableCells }}</span>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [disabled]="!cellActions().right" [attr.aria-label]="t().editorMergeRight" [attr.title]="t().editorMergeRight" (mousedown)="hold($event)" (click)="tableAction('mergeRight')">
+            <cb-icon name="table-cells-merge" [size]="15" aria-hidden="true" />→
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [disabled]="!cellActions().down" [attr.aria-label]="t().editorMergeDown" [attr.title]="t().editorMergeDown" (mousedown)="hold($event)" (click)="tableAction('mergeDown')">
+            <cb-icon name="table-cells-merge" [size]="15" aria-hidden="true" />↓
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [disabled]="!cellActions().split" [attr.aria-label]="t().editorSplitCell" [attr.title]="t().editorSplitCell" (mousedown)="hold($event)" (click)="tableAction('split')">
+            <cb-icon name="table-cells-split" [size]="15" aria-hidden="true" />{{ t().editorSplitCell }}
+          </button>
+        </div>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="cb-editor__tool cb-editor__tool--labeled"
+          tabindex="-1"
+          [class.cb-is-active]="tableHasHeader()"
+          [attr.aria-pressed]="tableHasHeader()"
+          [attr.aria-label]="t().tableHeaderRow"
+          (mousedown)="hold($event)"
+          (click)="tableAction('header')"
+        >
+          <cb-icon name="panel-top" [size]="15" aria-hidden="true" />{{ t().tableHeaderRow }}
+        </button>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <select class="cb-editor__select" tabindex="-1" [attr.aria-label]="t().tableBorders" (change)="setTableBorders($any($event.target).value, null)">
+          <option value="all" [selected]="tableBorders().borders === 'all'">{{ t().bordersAll }}</option>
+          <option value="horizontal" [selected]="tableBorders().borders === 'horizontal'">{{ t().bordersHorizontal }}</option>
+          <option value="none" [selected]="tableBorders().borders === 'none'">{{ t().bordersNone }}</option>
+        </select>
+        <select
+          class="cb-editor__select"
+          tabindex="-1"
+          [attr.aria-label]="t().borderColor"
+          [disabled]="tableBorders().borders === 'none'"
+          (change)="setTableBorders(null, $any($event.target).value)"
+        >
+          @for (color of borderColors; track color.value) {
+            <option [value]="color.value" [selected]="tableBorders().color === color.value">{{ color.label(t()) }}</option>
+          }
+        </select>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteTable" (mousedown)="hold($event)" (click)="tableAction('deleteTable')">
+          <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().deleteTable }}
+        </button>
+      </div>
+    }
+
+    @if (selectedImage() && !readonly() && !sourceMode()) {
+      <div class="cb-editor__context" role="toolbar" [attr.aria-label]="t().imageTools" (keydown)="onContextKeydown($event)">
+        @for (option of imageAligns; track option.icon; let first = $first) {
+          <button
+            type="button"
+            class="cb-editor__tool"
+            [class.cb-is-active]="imageState().align === option.align"
+            [attr.aria-pressed]="imageState().align === option.align"
+            [attr.aria-label]="option.label(t())"
+            [attr.title]="option.label(t())"
+            [tabindex]="first ? 0 : -1"
+            (mousedown)="hold($event)"
+            (click)="setImageAlign(option.align)"
+          >
+            <cb-icon [name]="option.icon" [size]="16" aria-hidden="true" />
+          </button>
+        }
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        @for (width of imageWidths; track width) {
+          <button
+            type="button"
+            class="cb-editor__tool cb-editor__tool--text"
+            [class.cb-is-active]="imageState().width === width"
+            [attr.aria-pressed]="imageState().width === width"
+            [attr.aria-label]="imageWidthLabel(width)"
+            [tabindex]="-1"
+            (mousedown)="hold($event)"
+            (click)="setImageWidth(width)"
+          >{{ width }}</button>
+        }
+        <button
+          type="button"
+          class="cb-editor__tool"
+          [class.cb-is-active]="!imageState().width"
+          [attr.aria-pressed]="!imageState().width"
+          [attr.aria-label]="t().imageOriginalSize"
+          [attr.title]="t().imageOriginalSize"
+          [tabindex]="-1"
+          (mousedown)="hold($event)"
+          (click)="setImageWidth(null)"
+        >
+          <cb-icon name="ratio" [size]="16" aria-hidden="true" />
+        </button>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <button type="button" class="cb-editor__tool cb-editor__tool--labeled" [attr.aria-label]="t().cropImage" [tabindex]="-1" (click)="openCrop()">
+          <cb-icon name="crop" [size]="15" aria-hidden="true" />{{ t().cropImage }}
+        </button>
+        <button
+          type="button"
+          class="cb-editor__tool cb-editor__tool--labeled"
+          [class.cb-is-active]="imageHasCaption()"
+          [attr.aria-pressed]="imageHasCaption()"
+          [attr.aria-label]="t().editorImageCaption"
+          [tabindex]="-1"
+          (mousedown)="hold($event)"
+          (click)="toggleCaption()"
+        >
+          <cb-icon name="captions" [size]="15" aria-hidden="true" />{{ t().editorImageCaption }}
+        </button>
+        <button type="button" class="cb-editor__tool" [attr.aria-label]="t().altText" [attr.title]="t().altText" [tabindex]="-1" (click)="openAlt()">
+          <cb-icon name="captions" [size]="16" aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          class="cb-editor__tool cb-editor__tool--danger"
+          [attr.aria-label]="t().deleteImage"
+          [attr.title]="t().deleteImage"
+          [tabindex]="-1"
+          (mousedown)="hold($event)"
+          (click)="deleteImage()"
+        >
+          <cb-icon name="trash" [size]="16" aria-hidden="true" />
+        </button>
+      </div>
+    }
+
+    @if (tablePanel()) {
+      <div class="cb-editor__link cb-editor__picker-panel" role="group" [attr.aria-label]="t().insertTable" (keydown.escape)="closeTablePanel()">
+        <div class="cb-editor__picker" (mouseleave)="pickerHover.set(null)">
+          @for (r of pickerRows; track r) {
+            <div class="cb-editor__picker-row">
+              @for (c of pickerCols; track c) {
+                <button
+                  type="button"
+                  class="cb-editor__picker-cell"
+                  [class.cb-is-on]="pickerOn(r, c)"
+                  [attr.aria-label]="tableSizeLabel(r, c)"
+                  [tabindex]="r === pickerFocus().r && c === pickerFocus().c ? 0 : -1"
+                  (mouseenter)="pickerHover.set({ r, c })"
+                  (focus)="pickerHover.set({ r, c }); pickerFocus.set({ r, c })"
+                  (keydown)="onPickerKeydown($event, r, c)"
+                  (click)="insertTable(r, c)"
+                ></button>
+              }
+            </div>
+          }
+        </div>
+        <div class="cb-editor__picker-side">
+          <span class="cb-editor__picker-size" aria-live="polite">{{ pickerHover() ? tableSizeLabel(pickerHover()!.r, pickerHover()!.c) : t().insertTable }}</span>
+          <label class="cb-editor__link-check">
+            <input type="checkbox" [checked]="tableHeader()" (change)="tableHeader.set($any($event.target).checked)" />
+            {{ t().tableHeaderRow }}
+          </label>
+          <button type="button" class="cb-editor__btn" (click)="closeTablePanel()">{{ t().cancel }}</button>
+        </div>
+      </div>
+    }
+
+    @if (crop(); as c) {
+      <div class="cb-editor__crop" role="group" [attr.aria-label]="t().cropImage" (keydown.escape)="closeCrop()">
+        <div class="cb-editor__crop-stage" #cropStage>
+          <img class="cb-editor__crop-img" [src]="c.src" alt="" draggable="false" />
+          <div
+            class="cb-editor__crop-box"
+            role="slider"
+            tabindex="0"
+            [attr.aria-label]="t().cropArea"
+            [attr.aria-valuetext]="cropValueText()"
+            [attr.aria-describedby]="cropHelpId"
+            [style.left.%]="c.rect.x * 100"
+            [style.top.%]="c.rect.y * 100"
+            [style.width.%]="c.rect.w * 100"
+            [style.height.%]="c.rect.h * 100"
+            (pointerdown)="startCropDrag($event, null)"
+            (keydown)="onCropKeydown($event)"
+          >
+            @for (corner of cropCorners; track corner) {
+              <span class="cb-editor__crop-handle" [class]="'cb-editor__crop-handle cb-editor__crop-handle--' + corner" (pointerdown)="startCropDrag($event, corner)"></span>
+            }
+          </div>
+        </div>
+        <p class="cb-editor__crop-help" [id]="cropHelpId">{{ t().cropInstructions }}</p>
+        <div class="cb-editor__link-actions">
+          @for (ratio of cropRatios; track ratio.label) {
+            <button
+              type="button"
+              class="cb-editor__btn"
+              [class.cb-is-active]="c.ratio === ratio.value"
+              [attr.aria-pressed]="c.ratio === ratio.value"
+              (click)="setCropRatio(ratio.value)"
+            >{{ ratio.value === null ? t().cropFree : ratio.label }}</button>
+          }
+          <span class="cb-editor__crop-spacer"></span>
+          <button type="button" class="cb-editor__btn cb-editor__btn--primary" [disabled]="c.busy" (click)="applyCrop()">{{ t().cropImage }}</button>
+          <button type="button" class="cb-editor__btn" (click)="closeCrop()">{{ t().cancel }}</button>
+        </div>
+        @if (c.error) {
+          <p class="cb-editor__error" role="alert">{{ t().cropError }}</p>
+        }
+      </div>
+    }
+
+    @if (altPanel()) {
+      <form class="cb-editor__link" role="group" [attr.aria-label]="t().altText" (submit)="applyAlt($event)" (keydown.escape)="closeAlt()">
+        <label class="cb-editor__link-field">
+          <span class="cb-editor__link-label">{{ t().altText }}</span>
+          <input #altInput class="cb-editor__link-input" type="text" [value]="selectedImage()?.getAttribute('alt') ?? ''" />
+        </label>
+        <div class="cb-editor__link-actions">
+          <button type="submit" class="cb-editor__btn cb-editor__btn--primary">{{ t().accept }}</button>
+          <button type="button" class="cb-editor__btn" (click)="closeAlt()">{{ t().cancel }}</button>
+        </div>
+      </form>
+    }
+
+    @if (linkPanel(); as panel) {
+      <form class="cb-editor__link" role="group" [attr.aria-label]="t().insertLink" (submit)="applyLink($event)" (keydown.escape)="closeLink()">
+        <label class="cb-editor__link-field">
+          <span class="cb-editor__link-label">{{ t().linkUrl }}</span>
+          <input
+            #linkInput
+            class="cb-editor__link-input"
+            type="text"
+            inputmode="url"
+            autocomplete="off"
+            [value]="panel.url"
+            [attr.aria-invalid]="linkError() ? 'true' : null"
+            [attr.aria-describedby]="linkError() ? linkErrorId : null"
+            (input)="linkUrl.set($any($event.target).value)"
+          />
+        </label>
+        <label class="cb-editor__link-check">
+          <input type="checkbox" [checked]="panel.newTab" (change)="linkNewTab.set($any($event.target).checked)" />
+          {{ t().openInNewTab }}
+        </label>
+        <div class="cb-editor__link-actions">
+          <button type="submit" class="cb-editor__btn cb-editor__btn--primary">{{ t().accept }}</button>
+          @if (panel.editing) {
+            <button type="button" class="cb-editor__btn" (click)="removeLink()">
+              <cb-icon name="unlink" [size]="14" aria-hidden="true" />
+              {{ t().removeLink }}
+            </button>
+          }
+          <button type="button" class="cb-editor__btn" (click)="closeLink()">{{ t().cancel }}</button>
+        </div>
+        @if (linkError()) {
+          <p class="cb-editor__error" [id]="linkErrorId" role="alert">{{ t().invalidUrl }}</p>
+        }
+      </form>
+    }
+
+    </div>
+
+    <div #body class="cb-editor__body">
+    <div
+      #surface
+      class="cb-editor__surface"
+      [id]="surfaceId"
+      role="textbox"
+      [hidden]="sourceMode()"
+      [class.cb-is-empty]="isEmpty()"
+      [attr.aria-label]="ariaLabel() ?? t().textEditor"
+      [attr.aria-disabled]="isDisabled() || null"
+      [attr.aria-readonly]="readonly() || null"
+      [attr.aria-invalid]="invalidState() ? 'true' : null"
+      [attr.aria-required]="fieldState.required() || null"
+      [attr.aria-describedby]="describedBy()"
+      aria-multiline="true"
+      [attr.aria-activedescendant]="slash() && slashItems().length ? slashOptionId(slash()!.active) : mention() && mentionResults().length ? mentionOptionId(mention()!.active) : null"
+      [attr.contenteditable]="!isDisabled() && !readonly()"
+      [attr.data-placeholder]="readonly() ? '' : (placeholder() ?? t().editorPlaceholder)"
+      [style.minHeight]="readonly() ? null : height()"
+      [style.maxHeight]="readonly() || fullscreen() ? null : maxHeight()"
+      (input)="onSurfaceInput($event)"
+      (beforeinput)="onBeforeInput($event)"
+      (keydown)="onSurfaceKeydown($event)"
+      (paste)="onPaste($event)"
+      (drop)="onDrop($event)"
+      (click)="onSurfaceClick($event)"
+      (mousedown)="pointerSelecting = true"
+      (scroll)="refreshFrame()"
+      (blur)="onBlur()"
+    ></div>
+    @if (imageFrame(); as frame) {
+      <div
+        class="cb-editor__img-frame"
+        aria-hidden="true"
+        [style.left.px]="frame.left"
+        [style.top.px]="frame.top"
+        [style.width.px]="frame.width"
+        [style.height.px]="frame.height"
+      >
+        <span class="cb-editor__img-handle" [attr.title]="t().imageResize" (pointerdown)="startResize($event)"></span>
+      </div>
+    }
+    @if (bubble(); as b) {
+      <div
+        class="cb-editor__bubble"
+        [class.cb-editor__bubble--below]="b.below"
+        role="toolbar"
+        [attr.aria-label]="t().quickFormat"
+        [style.left.px]="b.left"
+        [style.top.px]="b.top"
+        (keydown)="onContextKeydown($event)"
+      >
+        @for (tool of bubbleTools; track tool; let first = $first) {
+          <button
+            type="button"
+            class="cb-editor__tool"
+            [class.cb-is-active]="isActive(tool)"
+            [attr.aria-pressed]="pressable(tool) ? isActive(tool) : null"
+            [attr.aria-label]="toolLabel(tool)"
+            [attr.title]="toolTitle(tool)"
+            [tabindex]="first ? 0 : -1"
+            (mousedown)="hold($event)"
+            (click)="runBubble(tool)"
+          >
+            <cb-icon [name]="toolIcon(tool)" [size]="16" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    }
+    @if (mention(); as m) {
+      @if (mentionResults().length) {
+        <div class="cb-editor__slash cb-editor__mentions" role="listbox" [id]="mentionListId" [attr.aria-label]="t().editorMentions" [style.left.px]="m.left" [style.top.px]="m.top">
+          @for (item of mentionResults(); track item.id; let i = $index) {
+            <div
+              class="cb-editor__slash-item"
+              role="option"
+              [id]="mentionOptionId(i)"
+              [class.cb-is-active]="i === m.active"
+              [attr.aria-selected]="i === m.active"
+              (mousedown)="hold($event)"
+              (click)="applyMention(item)"
+            >
+              <cb-icon name="at-sign" [size]="15" aria-hidden="true" />
+              <span class="cb-editor__mention-label">{{ item.label }}</span>
+              @if (item.description) {
+                <span class="cb-editor__mention-desc">{{ item.description }}</span>
+              }
+            </div>
+          }
+        </div>
+      }
+    }
+    @if (slash(); as sl) {
+      @if (slashItems().length) {
+        <div class="cb-editor__slash" role="listbox" [id]="slashListId" [attr.aria-label]="t().insertBlock" [style.left.px]="sl.left" [style.top.px]="sl.top">
+          @for (item of slashItems(); track item.id; let i = $index) {
+            <div
+              class="cb-editor__slash-item"
+              role="option"
+              [id]="slashOptionId(i)"
+              [class.cb-is-active]="i === sl.active"
+              [attr.aria-selected]="i === sl.active"
+              (mousedown)="hold($event)"
+              (click)="applySlash(item)"
+            >
+              <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+              {{ item.label(t()) }}
+            </div>
+          }
+        </div>
+      }
+    }
+    </div>
+
+    @if (sourceMode()) {
+      <textarea
+        class="cb-editor__source"
+        spellcheck="false"
+        [attr.aria-label]="t().sourceCode"
+        [style.minHeight]="height()"
+        [value]="sourceText()"
+        (input)="sourceText.set($any($event.target).value)"
+        (blur)="onBlur()"
+      ></textarea>
+    }
+
+    @if (message() || maxLength() || (wordCount() && !readonly()) || savedAt()) {
+      <div class="cb-editor__footer">
+        @if (message()) {
+          <p class="cb-editor__error" role="alert">{{ message() }}</p>
+        }
+        @if (savedAt(); as at) {
+          <span class="cb-editor__saved">{{ fmt(t().editorDraftSaved, draftTime(at)) }}</span>
+        }
+        @if (maxLength() || (wordCount() && !readonly())) {
+          <span class="cb-editor__count" [id]="countId" [class.cb-is-over]="!!maxLength() && length() > maxLength()!">{{ countLine() }}</span>
+        }
+      </div>
+    }
+
+    <input #imageInput type="file" accept="image/png,image/jpeg,image/gif,image/webp" hidden (change)="onImageFile($event)" />
+  `, isInline: true, styles: [":host{display:block;width:100%;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);overflow:clip}.cb-editor__header{position:sticky;top:var(--cb-editor-sticky-top, 0px);z-index:3;background:var(--cb-color-surface)}.cb-editor__toolbar{display:grid;gap:.25rem;padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface))}.cb-editor__row{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem}.cb-editor__row+.cb-editor__row{padding-top:.25rem;border-top:1px dashed var(--cb-color-border)}.cb-editor__select--font{width:10.5rem}.cb-editor__select--size{width:5.5rem}.cb-editor__select{height:1.75rem;padding:0 .4rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-editor__sep{width:1px;height:1.1rem;margin:0 .25rem;background:var(--cb-color-border)}.cb-editor__tool{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);cursor:pointer}.cb-editor__tool:hover{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-editor__tool:disabled{opacity:.4;cursor:not-allowed}.cb-editor__tool:focus-visible,.cb-editor__select:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__tool.cb-is-active{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}:host-context([data-theme=\"dark\"]) .cb-editor__tool.cb-is-active{color:var(--cb-color-primary-300)}@media(forced-colors:active){.cb-editor__tool.cb-is-active{outline:2px solid Highlight}}.cb-editor__link{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--cb-space-2) var(--cb-space-3);padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface));font-size:var(--cb-text-sm)}.cb-editor__link-field{display:grid;flex:1 1 14rem;gap:.2rem}.cb-editor__link-label{font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__link-input{height:2rem;padding:0 .5rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-sm);background:var(--cb-color-bg, var(--cb-color-surface));color:var(--cb-color-text);font:inherit}.cb-editor__link-input[aria-invalid=true]{border-color:var(--cb-color-danger-500)}.cb-editor__link-input:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:0}.cb-editor__link-check{display:inline-flex;align-items:center;gap:.35rem;min-height:2rem}.cb-editor__link-actions{display:inline-flex;gap:var(--cb-space-2)}.cb-editor__btn{display:inline-flex;align-items:center;gap:.3rem;height:2rem;padding:0 .7rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-editor__btn:hover{background:var(--cb-color-surface-hover)}.cb-editor__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__btn--primary{color:#fff;background:var(--cb-color-primary-700, #047857);border-color:var(--cb-color-primary-600)}.cb-editor__btn--primary:hover{background:var(--cb-color-primary-700)}.cb-editor__error{flex-basis:100%;margin:0;font-size:var(--cb-text-xs);color:var(--cb-color-danger-600)}.cb-editor__surface{padding:var(--cb-space-3);font-family:var(--cb-editor-font-family, Carlito, Calibri, var(--cb-font-sans), sans-serif);font-size:var(--cb-editor-font-size, 16px);line-height:1.6;outline:none;overflow-y:auto}.cb-editor__surface:empty:before,.cb-editor__surface.cb-is-empty:not(:focus):before{content:attr(data-placeholder);color:var(--cb-color-text-muted);pointer-events:none}.cb-editor__surface.cb-is-empty:not(:empty):before{position:absolute}.cb-editor__surface{position:relative}.cb-editor__source{display:block;box-sizing:border-box;width:100%;padding:var(--cb-space-3);border:none;resize:vertical;background:var(--cb-color-surface-subtle, var(--cb-color-surface));color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);font-size:var(--cb-text-xs);line-height:1.6;outline:none}.cb-editor__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-1) var(--cb-space-3) var(--cb-space-2);border-top:var(--cb-border-width) solid var(--cb-color-border)}.cb-editor__count{margin-left:auto;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-editor__count.cb-is-over{color:var(--cb-color-danger-600);font-weight:var(--cb-font-weight-semibold)}:host(.cb-is-readonly){border-color:transparent;background:transparent}:host(.cb-is-readonly) .cb-editor__surface{padding:0}:host ::ng-deep .cb-editor__surface h1{font-size:1.5rem;margin:.4em 0}:host ::ng-deep .cb-editor__surface h2{font-size:1.25rem;margin:.4em 0}:host ::ng-deep .cb-editor__surface h3{font-size:1.1rem;margin:.4em 0}:host ::ng-deep .cb-editor__surface p{margin:.4em 0}:host ::ng-deep .cb-editor__surface ul,:host ::ng-deep .cb-editor__surface ol{margin:.4em 0;padding-left:1.5rem}:host ::ng-deep .cb-editor__surface blockquote{margin:.5em 0;padding:.25em .9em;border-left:3px solid var(--cb-color-primary-400, var(--cb-color-border));color:var(--cb-color-text-muted)}:host ::ng-deep .cb-editor__surface a{color:var(--cb-color-primary-text);text-decoration:underline}:host ::ng-deep .cb-editor__surface code{padding:.1em .35em;border-radius:var(--cb-radius-sm);background:var(--cb-color-surface-subtle, rgb(0 0 0 / .06));font-family:var(--cb-font-mono, monospace);font-size:.9em}:host ::ng-deep .cb-editor__surface pre{padding:var(--cb-space-3);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle, rgb(0 0 0 / .06));font-family:var(--cb-font-mono, monospace);white-space:pre-wrap}:host ::ng-deep .cb-editor__surface hr{margin:var(--cb-space-3) 0;border:none;border-top:1px solid var(--cb-color-border-strong, var(--cb-color-border))}:host ::ng-deep .cb-editor__surface img{max-width:100%;height:auto;border-radius:var(--cb-radius-sm, 4px)}:host(.cb-is-invalid){border-color:var(--cb-color-danger)}.cb-editor__context{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem;padding:var(--cb-space-1) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:color-mix(in srgb,var(--cb-color-primary-500) 6%,var(--cb-color-surface))}.cb-editor__tool--text{width:auto;padding:0 .4rem;font:inherit;font-size:var(--cb-text-xs);font-variant-numeric:tabular-nums}.cb-editor__tool--danger:hover{color:var(--cb-color-danger-600);background:color-mix(in srgb,var(--cb-color-danger-500) 12%,transparent)}.cb-editor__link-field--narrow{flex:0 0 6rem}.cb-editor__body{position:relative}:host ::ng-deep .cb-editor__surface img{cursor:pointer}.cb-editor__img-frame{position:absolute;box-sizing:border-box;border:2px solid var(--cb-color-primary-500);border-radius:2px;pointer-events:none}.cb-editor__img-handle{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border:2px solid var(--cb-color-surface);border-radius:2px;background:var(--cb-color-primary-500);cursor:nwse-resize;pointer-events:auto;touch-action:none}:host ::ng-deep .cb-editor__surface table{width:100%;margin:var(--cb-space-2) 0;border-collapse:collapse;table-layout:fixed}:host ::ng-deep .cb-editor__surface th,:host ::ng-deep .cb-editor__surface td{min-width:2rem;padding:.35rem .5rem;vertical-align:top;word-break:break-word;outline:1px dashed color-mix(in srgb,var(--cb-color-text-muted) 45%,transparent);outline-offset:-1px}:host ::ng-deep .cb-editor__surface th[style*=border],:host ::ng-deep .cb-editor__surface td[style*=border]{outline:none}:host ::ng-deep .cb-editor__surface th{font-weight:var(--cb-font-weight-semibold, 600);text-align:left}:host(.cb-is-readonly) ::ng-deep .cb-editor__surface th,:host(.cb-is-readonly) ::ng-deep .cb-editor__surface td{outline:none}:host ::ng-deep .cb-editor__surface pre code{padding:0;background:transparent;color:inherit;font-size:inherit}:host ::ng-deep .cb-editor__surface pre[data-language]:before{content:attr(data-language);float:right;margin:-.25rem -.25rem 0 .5rem;font-family:var(--cb-font-sans);font-size:.7rem;opacity:.6}.cb-editor__group{display:inline-flex;align-items:center;gap:.2rem}.cb-editor__group-label{margin-right:.15rem;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted)}.cb-editor__tool--labeled{width:auto;gap:.3rem;padding:0 .45rem;font:inherit;font-size:var(--cb-text-xs);white-space:nowrap}.cb-editor__picker-panel{align-items:flex-start}.cb-editor__picker{display:grid;gap:3px}.cb-editor__picker-row{display:flex;gap:3px}.cb-editor__picker-cell{width:1.1rem;height:1.1rem;padding:0;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:2px;background:var(--cb-color-surface);cursor:pointer}.cb-editor__picker-cell.cb-is-on{border-color:var(--cb-color-primary-600);background:color-mix(in srgb,var(--cb-color-primary-500) 35%,var(--cb-color-surface))}.cb-editor__picker-cell:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__picker-side{display:grid;gap:var(--cb-space-2);align-content:start}.cb-editor__picker-size{font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums}.cb-editor__crop{display:grid;gap:var(--cb-space-2);padding:var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface))}.cb-editor__crop-stage{position:relative;justify-self:center;max-width:100%;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}.cb-editor__crop-img{display:block;max-width:100%;max-height:22rem}.cb-editor__crop-box{position:absolute;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 9999px #0000008c;cursor:move;outline:none}.cb-editor__crop-box:focus-visible{border-color:var(--cb-color-focus-ring)}.cb-editor__crop-handle{position:absolute;width:14px;height:14px;border:2px solid var(--cb-color-primary-600);border-radius:2px;background:#fff}.cb-editor__crop-handle--nw{left:-8px;top:-8px;cursor:nwse-resize}.cb-editor__crop-handle--ne{right:-8px;top:-8px;cursor:nesw-resize}.cb-editor__crop-handle--sw{left:-8px;bottom:-8px;cursor:nesw-resize}.cb-editor__crop-handle--se{right:-8px;bottom:-8px;cursor:nwse-resize}.cb-editor__crop-help{margin:0;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__crop-spacer{flex:1}.cb-editor__btn.cb-is-active{border-color:var(--cb-color-primary-600);color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,var(--cb-color-surface))}.cb-editor__crop .cb-editor__link-actions{display:flex;flex-wrap:wrap}.cb-editor__select--size{width:7.5rem}.cb-editor__menu-wrap{position:relative;display:inline-flex}.cb-editor__menu-trigger{position:relative;width:auto;gap:1px;padding:0 .25rem}.cb-editor__color-bar{position:absolute;left:.35rem;right:1rem;bottom:.2rem;height:3px;border-radius:1px}.cb-editor__caret{opacity:.7}.cb-editor__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:10;display:grid;gap:2px;min-width:12rem;padding:.35rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12))}.cb-editor__menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .5rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm);text-align:left;cursor:pointer}.cb-editor__menu-item:hover,.cb-editor__menu-item:focus-visible{background:var(--cb-color-surface-hover);outline:none}.cb-editor__menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring)}.cb-editor__menu-item[aria-checked=true]{font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700)}.cb-editor__kbd{margin-left:auto;font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__swatches{display:grid;grid-template-columns:repeat(5,1.6rem);gap:.35rem;padding:.25rem}.cb-editor__swatch{width:1.6rem;height:1.6rem;padding:0;border:1px solid rgb(0 0 0 / .15);border-radius:var(--cb-radius-sm);cursor:pointer}.cb-editor__swatch:hover{transform:scale(1.1)}.cb-editor__swatch:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-editor__swatch--none{display:inline-block;width:1rem;height:1rem;background:linear-gradient(135deg,transparent 45%,var(--cb-color-danger-500) 45% 55%,transparent 55%),var(--cb-color-surface)}.cb-editor__surface{resize:vertical}:host(.cb-is-readonly) .cb-editor__surface{resize:none}:host(.cb-is-fullscreen){position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;border-radius:0}:host(.cb-is-fullscreen) .cb-editor__body{flex:1;min-height:0;display:flex;flex-direction:column}:host(.cb-is-fullscreen) .cb-editor__surface{flex:1;resize:none;max-width:60rem;width:100%;margin:0 auto}:host ::ng-deep .cb-editor__surface h4{margin:.75rem 0 .35rem;font-size:1rem}:host ::ng-deep .cb-editor__surface ul[data-type=taskList]{padding-left:.25rem;list-style:none}:host ::ng-deep .cb-editor__surface ul[data-type=taskList]>li{position:relative;padding-left:1.75rem}:host ::ng-deep .cb-editor__surface ul[data-type=taskList]>li:before{content:\"\";position:absolute;left:0;top:.3em;box-sizing:border-box;width:1.05rem;height:1.05rem;border:1.5px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:3px;background:var(--cb-color-surface);cursor:pointer}:host ::ng-deep .cb-editor__surface ul[data-type=taskList]>li[data-checked=true]:before{content:\"\\2713\";display:grid;place-items:center;border-color:var(--cb-color-primary-600);background:var(--cb-color-primary-700, #047857);color:#fff;font-size:.75rem;font-weight:700;line-height:1}:host ::ng-deep .cb-editor__surface ul[data-type=taskList]>li[data-checked=true]{color:var(--cb-color-text-muted);text-decoration:line-through}.cb-editor__menu--chars{left:auto;right:0;width:max-content;max-height:18rem;overflow-y:auto}.cb-editor__chars-label{display:block;padding:.35rem .25rem .15rem;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted)}.cb-editor__chars{display:grid;grid-template-columns:repeat(8,2rem);gap:2px}.cb-editor__char{width:2rem;height:2rem;padding:0;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font-size:1.05rem;line-height:1;cursor:pointer}.cb-editor__char:hover,.cb-editor__char:focus-visible{background:var(--cb-color-surface-hover);outline:none}.cb-editor__char:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring)}.cb-editor__find{align-items:flex-end}.cb-editor__find-options{display:inline-flex;align-items:center;gap:.2rem;min-height:2rem}.cb-editor__find-count{min-width:5.5rem;padding:0 .35rem;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums;text-align:center}.cb-editor__find .cb-editor__link-actions{align-items:center}.cb-editor__bubble{position:absolute;z-index:4;display:flex;gap:2px;padding:.2rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12));transform:translate(-50%,calc(-100% - 6px))}.cb-editor__bubble--below{transform:translate(-50%,6px)}.cb-editor__slash{position:absolute;z-index:4;display:grid;gap:1px;width:15rem;max-height:17rem;margin-top:4px;padding:.3rem;overflow-y:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12))}.cb-editor__slash-item{display:flex;align-items:center;gap:.55rem;padding:.4rem .5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-editor__slash-item:hover{background:var(--cb-color-surface-hover)}.cb-editor__slash-item.cb-is-active{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}:host-context([data-theme=\"dark\"]) .cb-editor__slash-item.cb-is-active{color:var(--cb-color-primary-300)}@media(forced-colors:active){.cb-editor__slash-item.cb-is-active{outline:2px solid Highlight}}:host ::ng-deep .cb-editor__surface figure{margin:.5em 0}:host ::ng-deep .cb-editor__surface figure img{display:block;max-width:100%}:host ::ng-deep .cb-editor__surface figcaption{padding-top:.35rem;color:var(--cb-color-text-muted);font-size:.875em;text-align:center}:host ::ng-deep .cb-editor__surface figcaption:empty:before,:host ::ng-deep .cb-editor__surface figcaption:has(>br:only-child):before{content:attr(data-placeholder)}:host ::ng-deep .cb-editor__surface details{margin:.5em 0;padding:.35rem .75rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md)}:host ::ng-deep .cb-editor__surface summary{font-weight:var(--cb-font-weight-semibold);cursor:pointer}:host ::ng-deep .cb-editor__surface details[open]>summary{margin-bottom:.35rem}:host ::ng-deep .cb-editor__surface nav[data-type=toc]{margin:.5em 0;padding:.5rem .9rem;border-left:3px solid var(--cb-color-primary-400, var(--cb-color-border));border-radius:0 var(--cb-radius-md) var(--cb-radius-md) 0;background:color-mix(in srgb,var(--cb-color-primary-500) 5%,transparent);-webkit-user-select:none;user-select:none}:host ::ng-deep .cb-editor__surface nav[data-type=toc] p{margin:0 0 .25rem}:host ::ng-deep .cb-editor__surface nav[data-type=toc] ol{margin:0;padding-left:1.25rem}:host ::ng-deep .cb-editor__surface nav[data-type=toc] a{cursor:pointer}:host ::ng-deep .cb-editor__surface [data-mention]{padding:0 .2rem;border-radius:var(--cb-radius-sm);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);color:var(--cb-color-primary-700);font-weight:var(--cb-font-weight-medium);white-space:nowrap}:host-context([data-theme=\"dark\"]) ::ng-deep .cb-editor__surface [data-mention]{color:var(--cb-color-primary-300)}.cb-editor__mentions{width:17rem}.cb-editor__mention-label{font-weight:var(--cb-font-weight-medium)}.cb-editor__mention-desc{margin-left:auto;overflow:hidden;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs);text-overflow:ellipsis;white-space:nowrap}.cb-editor__draft{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:color-mix(in srgb,var(--cb-color-warning-500, #f59e0b) 12%,var(--cb-color-surface));font-size:var(--cb-text-sm)}.cb-editor__draft>span{flex:1 1 14rem}.cb-editor__saved{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}\n"], dependencies: [{ kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbEditor, decorators: [{
             type: Component,
@@ -3823,599 +4737,677 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[class.cb-is-disabled]': 'isDisabled()',
                         '[class.cb-is-readonly]': 'readonly()',
                         '[class.cb-is-fullscreen]': 'fullscreen()',
-                    }, template: `
-    <div class="cb-editor__header">
-    @if (!readonly()) {
-      <div
-        #toolbar
-        class="cb-editor__toolbar"
-        role="toolbar"
-        [attr.aria-label]="t().textFormatting"
-        [attr.aria-controls]="surfaceId"
-        (keydown)="onToolbarKeydown($event)"
-        (focusin)="setActiveTool($any($event.target))"
-      >
-        @for (row of toolbarRows(); track $index) {
-        <div class="cb-editor__row">
-        @for (tool of row; track $index) {
-          @if (tool === '|') {
-            <span class="cb-editor__sep" aria-hidden="true"></span>
-          } @else if (tool === 'heading') {
-            <select
-              class="cb-editor__select"
-              [disabled]="isDisabled() || sourceMode()"
-              [attr.aria-label]="t().paragraphStyle"
-              [title]="t().paragraphStyle"
-              (change)="format($any($event.target).value)"
-            >
-              <option value="P" [selected]="state().block === 'P'">{{ t().normal }}</option>
-              <option value="H1" [selected]="state().block === 'H1'">{{ t().heading1 }}</option>
-              <option value="H2" [selected]="state().block === 'H2'">{{ t().heading2 }}</option>
-              <option value="H3" [selected]="state().block === 'H3'">{{ t().heading3 }}</option>
-              <option value="H4" [selected]="state().block === 'H4'">{{ t().heading4 }}</option>
-            </select>
-          } @else if (tool === 'fontFamily') {
-            <select
-              class="cb-editor__select cb-editor__select--font"
-              [disabled]="isDisabled() || sourceMode()"
-              [attr.aria-label]="t().fontFamily"
-              [title]="t().fontFamily"
-              (change)="setFontFamily($any($event.target).value)"
-            >
-              @for (group of fonts(); track $index) {
-                <optgroup [label]="groupLabel(group)">
-                  @for (font of group.fonts; track font.value) {
-                    <option [value]="font.value" [style.font-family]="font.value || null" [selected]="state().fontFamily === font.value">{{ font.name }}</option>
-                  }
-                </optgroup>
-              }
-            </select>
-          } @else if (tool === 'fontSize') {
-            <select
-              class="cb-editor__select cb-editor__select--size"
-              [disabled]="isDisabled() || sourceMode()"
-              [attr.aria-label]="t().fontSize"
-              [title]="t().fontSize"
-              (change)="setFontSize($any($event.target).value)"
-            >
-              <option value="" [selected]="!state().fontSize">{{ t().fontNormal }}</option>
-              @for (size of fontSizes; track size) {
-                <option [value]="size + 'px'" [selected]="state().fontSize === size + 'px'">{{ size }} px</option>
-              }
-            </select>
-          } @else if (isMenu(tool)) {
-            <div class="cb-editor__menu-wrap">
-              <button
-                type="button"
-                class="cb-editor__tool cb-editor__menu-trigger"
-                [disabled]="isDisabled() || sourceMode()"
-                aria-haspopup="menu"
-                [attr.aria-expanded]="openMenu() === tool"
-                [attr.aria-label]="toolLabel(tool)"
-                [attr.title]="toolLabel(tool)"
-                (mousedown)="hold($event)"
-                (click)="toggleMenu(tool)"
-                (keydown)="onMenuTriggerKeydown($event, tool)"
-              >
-                <cb-icon [name]="menuIcon(tool)" [size]="16" aria-hidden="true" />
-                @if (tool === 'textColor' || tool === 'highlight') {
-                  <span class="cb-editor__color-bar" [style.background]="tool === 'textColor' ? lastTextColor() : lastHighlight()"></span>
-                }
-                <cb-icon name="chevron-down" [size]="11" class="cb-editor__caret" aria-hidden="true" />
-              </button>
-              @if (openMenu() === tool) {
-                <div
-                  class="cb-editor__menu"
-                  [class.cb-editor__menu--palette]="tool === 'textColor' || tool === 'highlight'"
-                  [class.cb-editor__menu--chars]="tool === 'specialChars'"
-                  role="menu"
-                  [attr.aria-label]="toolLabel(tool)"
-                  (keydown)="onMenuKeydown($event)"
-                >
-                  @if (tool === 'alignment') {
-                    @for (option of alignments; track option) {
-                      <button
-                        type="button"
-                        class="cb-editor__menu-item"
-                        role="menuitemradio"
-                        [attr.aria-checked]="state()[option]"
-                        [tabindex]="-1"
-                        [attr.aria-keyshortcuts]="ariaKeys(option)"
-                        (mousedown)="hold($event)"
-                        (click)="applyMenu(tool, option)"
-                      >
-                        <cb-icon [name]="toolIcon(option)" [size]="16" aria-hidden="true" />
-                        <span>{{ toolLabel(option) }}</span>
-                        <kbd class="cb-editor__kbd">{{ toolKeys(option) }}</kbd>
-                      </button>
-                    }
-                  } @else if (tool === 'specialChars') {
-                    @for (group of specialChars; track $index) {
-                      <div class="cb-editor__chars-group" role="group" [attr.aria-label]="group.label(t())">
-                        <span class="cb-editor__chars-label" aria-hidden="true">{{ group.label(t()) }}</span>
-                        <div class="cb-editor__chars">
-                          @for (ch of group.chars; track ch) {
-                            <button type="button" class="cb-editor__char" role="menuitem" [tabindex]="-1" (mousedown)="hold($event)" (click)="applyMenu(tool, ch)">{{ ch }}</button>
-                          }
-                        </div>
-                      </div>
-                    }
-                  } @else {
-                    <button
-                      type="button"
-                      class="cb-editor__menu-item cb-editor__menu-item--wide"
-                      role="menuitem"
-                      [tabindex]="-1"
-                      (mousedown)="hold($event)"
-                      (click)="applyMenu(tool, null)"
-                    >
-                      <span class="cb-editor__swatch cb-editor__swatch--none" aria-hidden="true"></span>
-                      {{ tool === 'textColor' ? t().automaticColor : t().noHighlight }}
-                    </button>
-                    <div class="cb-editor__swatches">
-                      @for (color of tool === 'textColor' ? textColors : highlightColors; track color.value) {
-                        <button
-                          type="button"
-                          class="cb-editor__swatch"
-                          role="menuitem"
-                          [style.background]="color.value"
-                          [attr.aria-label]="color.label(t())"
-                          [attr.title]="color.label(t())"
-                          [tabindex]="-1"
-                          (mousedown)="hold($event)"
-                          (click)="applyMenu(tool, color.value)"
-                        ></button>
-                      }
-                    </div>
-                  }
-                </div>
-              }
-            </div>
-          } @else {
-            <button
-              type="button"
-              class="cb-editor__tool"
-              [class.cb-is-active]="isActive(tool)"
-              [disabled]="isDisabled() || (sourceMode() && tool !== 'source' && tool !== 'fullscreen')"
-              [attr.aria-label]="toolLabel(tool)"
-              [attr.title]="toolTitle(tool)"
-              [attr.aria-keyshortcuts]="ariaKeys(tool)"
-              [attr.aria-pressed]="pressable(tool) ? isActive(tool) : null"
-              (mousedown)="hold($event)"
-              (click)="run(tool)"
-            >
-              <cb-icon [name]="tool === 'fullscreen' && fullscreen() ? 'minimize' : toolIcon(tool)" [size]="16" aria-hidden="true" />
-            </button>
-          }
-        }
-        </div>
-        }
-      </div>
-    }
-
-    @if (findOpen() && !readonly()) {
-      <div class="cb-editor__link cb-editor__find" role="search" [attr.aria-label]="t().findReplace" (keydown)="onFindKeydown($event)">
-        <label class="cb-editor__link-field">
-          <span class="cb-editor__link-label">{{ t().findText }}</span>
-          <input #findInput class="cb-editor__link-input" type="text" autocomplete="off" [value]="findQuery()" (input)="setFindQuery($any($event.target).value)" />
-        </label>
-        <label class="cb-editor__link-field">
-          <span class="cb-editor__link-label">{{ t().replaceWith }}</span>
-          <input class="cb-editor__link-input cb-editor__replace-input" type="text" autocomplete="off" [value]="replaceText()" (input)="replaceText.set($any($event.target).value)" />
-        </label>
-        <div class="cb-editor__find-options">
-          <button
-            type="button"
-            class="cb-editor__tool"
-            [class.cb-is-active]="findCase()"
-            [attr.aria-pressed]="findCase()"
-            [attr.aria-label]="t().matchCase"
-            [attr.title]="t().matchCase"
-            (click)="setFindOption('case')"
-          >
-            <cb-icon name="case-sensitive" [size]="16" aria-hidden="true" />
-          </button>
-          <button
-            type="button"
-            class="cb-editor__tool"
-            [class.cb-is-active]="findWhole()"
-            [attr.aria-pressed]="findWhole()"
-            [attr.aria-label]="t().wholeWords"
-            [attr.title]="t().wholeWords"
-            (click)="setFindOption('whole')"
-          >
-            <cb-icon name="whole-word" [size]="16" aria-hidden="true" />
-          </button>
-          <span class="cb-editor__find-count" role="status">{{ findStatus() }}</span>
-          <button type="button" class="cb-editor__tool" [disabled]="!findTotal()" [attr.aria-label]="t().findPrevious" [attr.title]="t().findPrevious + ' (Shift+Enter)'" (click)="findStep(-1)">
-            <cb-icon name="chevron-up" [size]="16" aria-hidden="true" />
-          </button>
-          <button type="button" class="cb-editor__tool" [disabled]="!findTotal()" [attr.aria-label]="t().findNext" [attr.title]="t().findNext + ' (Enter)'" (click)="findStep(1)">
-            <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
-          </button>
-        </div>
-        <div class="cb-editor__link-actions">
-          <button type="button" class="cb-editor__btn" [disabled]="!findTotal()" (click)="replaceCurrent()">{{ t().replaceOne }}</button>
-          <button type="button" class="cb-editor__btn" [disabled]="!findTotal()" (click)="replaceAllMatches()">{{ t().replaceAll }}</button>
-          <button type="button" class="cb-editor__tool" [attr.aria-label]="t().close" [attr.title]="t().close + ' (Esc)'" (click)="closeFind()">
-            <cb-icon name="x" [size]="16" aria-hidden="true" />
-          </button>
-        </div>
-      </div>
-    }
-
-    @if (tableCell() && !readonly() && !sourceMode()) {
-      <div class="cb-editor__context cb-editor__context--table" role="toolbar" [attr.aria-label]="t().tableTools" (keydown)="onContextKeydown($event)">
-        <div class="cb-editor__group" role="group" [attr.aria-label]="t().tableRow">
-          <span class="cb-editor__group-label" aria-hidden="true">{{ t().tableRow }}</span>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="0" [attr.aria-label]="t().insertRowAbove" (mousedown)="hold($event)" (click)="tableAction('rowAbove')">
-            <cb-icon name="between-horizontal-start" [size]="15" aria-hidden="true" />{{ t().above }}
-          </button>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertRowBelow" (mousedown)="hold($event)" (click)="tableAction('rowBelow')">
-            <cb-icon name="between-horizontal-end" [size]="15" aria-hidden="true" />{{ t().below }}
-          </button>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteRow" (mousedown)="hold($event)" (click)="tableAction('deleteRow')">
-            <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().tableDelete }}
-          </button>
-        </div>
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        <div class="cb-editor__group" role="group" [attr.aria-label]="t().tableColumn">
-          <span class="cb-editor__group-label" aria-hidden="true">{{ t().tableColumn }}</span>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertColumnLeft" (mousedown)="hold($event)" (click)="tableAction('colLeft')">
-            <cb-icon name="between-vertical-start" [size]="15" aria-hidden="true" />{{ t().toLeft }}
-          </button>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertColumnRight" (mousedown)="hold($event)" (click)="tableAction('colRight')">
-            <cb-icon name="between-vertical-end" [size]="15" aria-hidden="true" />{{ t().toRight }}
-          </button>
-          <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteColumn" (mousedown)="hold($event)" (click)="tableAction('deleteCol')">
-            <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().tableDelete }}
-          </button>
-        </div>
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        <button
-          type="button"
-          class="cb-editor__tool cb-editor__tool--labeled"
-          tabindex="-1"
-          [class.cb-is-active]="tableHasHeader()"
-          [attr.aria-pressed]="tableHasHeader()"
-          [attr.aria-label]="t().tableHeaderRow"
-          (mousedown)="hold($event)"
-          (click)="tableAction('header')"
-        >
-          <cb-icon name="panel-top" [size]="15" aria-hidden="true" />{{ t().tableHeaderRow }}
-        </button>
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        <select class="cb-editor__select" tabindex="-1" [attr.aria-label]="t().tableBorders" (change)="setTableBorders($any($event.target).value, null)">
-          <option value="all" [selected]="tableBorders().borders === 'all'">{{ t().bordersAll }}</option>
-          <option value="horizontal" [selected]="tableBorders().borders === 'horizontal'">{{ t().bordersHorizontal }}</option>
-          <option value="none" [selected]="tableBorders().borders === 'none'">{{ t().bordersNone }}</option>
-        </select>
-        <select
-          class="cb-editor__select"
-          tabindex="-1"
-          [attr.aria-label]="t().borderColor"
-          [disabled]="tableBorders().borders === 'none'"
-          (change)="setTableBorders(null, $any($event.target).value)"
-        >
-          @for (color of borderColors; track color.value) {
-            <option [value]="color.value" [selected]="tableBorders().color === color.value">{{ color.label(t()) }}</option>
-          }
-        </select>
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteTable" (mousedown)="hold($event)" (click)="tableAction('deleteTable')">
-          <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().deleteTable }}
-        </button>
-      </div>
-    }
-
-    @if (selectedImage() && !readonly() && !sourceMode()) {
-      <div class="cb-editor__context" role="toolbar" [attr.aria-label]="t().imageTools" (keydown)="onContextKeydown($event)">
-        @for (option of imageAligns; track option.icon; let first = $first) {
-          <button
-            type="button"
-            class="cb-editor__tool"
-            [class.cb-is-active]="imageState().align === option.align"
-            [attr.aria-pressed]="imageState().align === option.align"
-            [attr.aria-label]="option.label(t())"
-            [attr.title]="option.label(t())"
-            [tabindex]="first ? 0 : -1"
-            (mousedown)="hold($event)"
-            (click)="setImageAlign(option.align)"
-          >
-            <cb-icon [name]="option.icon" [size]="16" aria-hidden="true" />
-          </button>
-        }
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        @for (width of imageWidths; track width) {
-          <button
-            type="button"
-            class="cb-editor__tool cb-editor__tool--text"
-            [class.cb-is-active]="imageState().width === width"
-            [attr.aria-pressed]="imageState().width === width"
-            [attr.aria-label]="imageWidthLabel(width)"
-            [tabindex]="-1"
-            (mousedown)="hold($event)"
-            (click)="setImageWidth(width)"
-          >{{ width }}</button>
-        }
-        <button
-          type="button"
-          class="cb-editor__tool"
-          [class.cb-is-active]="!imageState().width"
-          [attr.aria-pressed]="!imageState().width"
-          [attr.aria-label]="t().imageOriginalSize"
-          [attr.title]="t().imageOriginalSize"
-          [tabindex]="-1"
-          (mousedown)="hold($event)"
-          (click)="setImageWidth(null)"
-        >
-          <cb-icon name="ratio" [size]="16" aria-hidden="true" />
-        </button>
-        <span class="cb-editor__sep" aria-hidden="true"></span>
-        <button type="button" class="cb-editor__tool cb-editor__tool--labeled" [attr.aria-label]="t().cropImage" [tabindex]="-1" (click)="openCrop()">
-          <cb-icon name="crop" [size]="15" aria-hidden="true" />{{ t().cropImage }}
-        </button>
-        <button type="button" class="cb-editor__tool" [attr.aria-label]="t().altText" [attr.title]="t().altText" [tabindex]="-1" (click)="openAlt()">
-          <cb-icon name="captions" [size]="16" aria-hidden="true" />
-        </button>
-        <button
-          type="button"
-          class="cb-editor__tool cb-editor__tool--danger"
-          [attr.aria-label]="t().deleteImage"
-          [attr.title]="t().deleteImage"
-          [tabindex]="-1"
-          (mousedown)="hold($event)"
-          (click)="deleteImage()"
-        >
-          <cb-icon name="trash" [size]="16" aria-hidden="true" />
-        </button>
-      </div>
-    }
-
-    @if (tablePanel()) {
-      <div class="cb-editor__link cb-editor__picker-panel" role="group" [attr.aria-label]="t().insertTable" (keydown.escape)="closeTablePanel()">
-        <div class="cb-editor__picker" (mouseleave)="pickerHover.set(null)">
-          @for (r of pickerRows; track r) {
-            <div class="cb-editor__picker-row">
-              @for (c of pickerCols; track c) {
-                <button
-                  type="button"
-                  class="cb-editor__picker-cell"
-                  [class.cb-is-on]="pickerOn(r, c)"
-                  [attr.aria-label]="tableSizeLabel(r, c)"
-                  [tabindex]="r === pickerFocus().r && c === pickerFocus().c ? 0 : -1"
-                  (mouseenter)="pickerHover.set({ r, c })"
-                  (focus)="pickerHover.set({ r, c }); pickerFocus.set({ r, c })"
-                  (keydown)="onPickerKeydown($event, r, c)"
-                  (click)="insertTable(r, c)"
-                ></button>
-              }
-            </div>
-          }
-        </div>
-        <div class="cb-editor__picker-side">
-          <span class="cb-editor__picker-size" aria-live="polite">{{ pickerHover() ? tableSizeLabel(pickerHover()!.r, pickerHover()!.c) : t().insertTable }}</span>
-          <label class="cb-editor__link-check">
-            <input type="checkbox" [checked]="tableHeader()" (change)="tableHeader.set($any($event.target).checked)" />
-            {{ t().tableHeaderRow }}
-          </label>
-          <button type="button" class="cb-editor__btn" (click)="closeTablePanel()">{{ t().cancel }}</button>
-        </div>
-      </div>
-    }
-
-    @if (crop(); as c) {
-      <div class="cb-editor__crop" role="group" [attr.aria-label]="t().cropImage" (keydown.escape)="closeCrop()">
-        <div class="cb-editor__crop-stage" #cropStage>
-          <img class="cb-editor__crop-img" [src]="c.src" alt="" draggable="false" />
-          <div
-            class="cb-editor__crop-box"
-            role="slider"
-            tabindex="0"
-            [attr.aria-label]="t().cropArea"
-            [attr.aria-valuetext]="cropValueText()"
-            [attr.aria-describedby]="cropHelpId"
-            [style.left.%]="c.rect.x * 100"
-            [style.top.%]="c.rect.y * 100"
-            [style.width.%]="c.rect.w * 100"
-            [style.height.%]="c.rect.h * 100"
-            (pointerdown)="startCropDrag($event, null)"
-            (keydown)="onCropKeydown($event)"
-          >
-            @for (corner of cropCorners; track corner) {
-              <span class="cb-editor__crop-handle" [class]="'cb-editor__crop-handle cb-editor__crop-handle--' + corner" (pointerdown)="startCropDrag($event, corner)"></span>
-            }
-          </div>
-        </div>
-        <p class="cb-editor__crop-help" [id]="cropHelpId">{{ t().cropInstructions }}</p>
-        <div class="cb-editor__link-actions">
-          @for (ratio of cropRatios; track ratio.label) {
-            <button
-              type="button"
-              class="cb-editor__btn"
-              [class.cb-is-active]="c.ratio === ratio.value"
-              [attr.aria-pressed]="c.ratio === ratio.value"
-              (click)="setCropRatio(ratio.value)"
-            >{{ ratio.value === null ? t().cropFree : ratio.label }}</button>
-          }
-          <span class="cb-editor__crop-spacer"></span>
-          <button type="button" class="cb-editor__btn cb-editor__btn--primary" [disabled]="c.busy" (click)="applyCrop()">{{ t().cropImage }}</button>
-          <button type="button" class="cb-editor__btn" (click)="closeCrop()">{{ t().cancel }}</button>
-        </div>
-        @if (c.error) {
-          <p class="cb-editor__error" role="alert">{{ t().cropError }}</p>
-        }
-      </div>
-    }
-
-    @if (altPanel()) {
-      <form class="cb-editor__link" role="group" [attr.aria-label]="t().altText" (submit)="applyAlt($event)" (keydown.escape)="closeAlt()">
-        <label class="cb-editor__link-field">
-          <span class="cb-editor__link-label">{{ t().altText }}</span>
-          <input #altInput class="cb-editor__link-input" type="text" [value]="selectedImage()?.getAttribute('alt') ?? ''" />
-        </label>
-        <div class="cb-editor__link-actions">
-          <button type="submit" class="cb-editor__btn cb-editor__btn--primary">{{ t().accept }}</button>
-          <button type="button" class="cb-editor__btn" (click)="closeAlt()">{{ t().cancel }}</button>
-        </div>
-      </form>
-    }
-
-    @if (linkPanel(); as panel) {
-      <form class="cb-editor__link" role="group" [attr.aria-label]="t().insertLink" (submit)="applyLink($event)" (keydown.escape)="closeLink()">
-        <label class="cb-editor__link-field">
-          <span class="cb-editor__link-label">{{ t().linkUrl }}</span>
-          <input
-            #linkInput
-            class="cb-editor__link-input"
-            type="text"
-            inputmode="url"
-            autocomplete="off"
-            [value]="panel.url"
-            [attr.aria-invalid]="linkError() ? 'true' : null"
-            [attr.aria-describedby]="linkError() ? linkErrorId : null"
-            (input)="linkUrl.set($any($event.target).value)"
-          />
-        </label>
-        <label class="cb-editor__link-check">
-          <input type="checkbox" [checked]="panel.newTab" (change)="linkNewTab.set($any($event.target).checked)" />
-          {{ t().openInNewTab }}
-        </label>
-        <div class="cb-editor__link-actions">
-          <button type="submit" class="cb-editor__btn cb-editor__btn--primary">{{ t().accept }}</button>
-          @if (panel.editing) {
-            <button type="button" class="cb-editor__btn" (click)="removeLink()">
-              <cb-icon name="unlink" [size]="14" aria-hidden="true" />
-              {{ t().removeLink }}
-            </button>
-          }
-          <button type="button" class="cb-editor__btn" (click)="closeLink()">{{ t().cancel }}</button>
-        </div>
-        @if (linkError()) {
-          <p class="cb-editor__error" [id]="linkErrorId" role="alert">{{ t().invalidUrl }}</p>
-        }
-      </form>
-    }
-
-    </div>
-
-    <div #body class="cb-editor__body">
-    <div
-      #surface
-      class="cb-editor__surface"
-      [id]="surfaceId"
-      role="textbox"
-      [hidden]="sourceMode()"
-      [class.cb-is-empty]="isEmpty()"
-      [attr.aria-label]="ariaLabel() ?? t().textEditor"
-      [attr.aria-disabled]="isDisabled() || null"
-      [attr.aria-readonly]="readonly() || null"
-      [attr.aria-invalid]="invalidState() ? 'true' : null"
-      [attr.aria-required]="fieldState.required() || null"
-      [attr.aria-describedby]="describedBy()"
-      aria-multiline="true"
-      [attr.aria-activedescendant]="slash() && slashItems().length ? slashOptionId(slash()!.active) : null"
-      [attr.contenteditable]="!isDisabled() && !readonly()"
-      [attr.data-placeholder]="readonly() ? '' : (placeholder() ?? t().editorPlaceholder)"
-      [style.minHeight]="readonly() ? null : height()"
-      [style.maxHeight]="readonly() || fullscreen() ? null : maxHeight()"
-      (input)="onSurfaceInput($event)"
-      (beforeinput)="onBeforeInput($event)"
-      (keydown)="onSurfaceKeydown($event)"
-      (paste)="onPaste($event)"
-      (drop)="onDrop($event)"
-      (click)="onSurfaceClick($event)"
-      (mousedown)="pointerSelecting = true"
-      (scroll)="refreshFrame()"
-      (blur)="onBlur()"
-    ></div>
-    @if (imageFrame(); as frame) {
-      <div
-        class="cb-editor__img-frame"
-        aria-hidden="true"
-        [style.left.px]="frame.left"
-        [style.top.px]="frame.top"
-        [style.width.px]="frame.width"
-        [style.height.px]="frame.height"
-      >
-        <span class="cb-editor__img-handle" [attr.title]="t().imageResize" (pointerdown)="startResize($event)"></span>
-      </div>
-    }
-    @if (bubble(); as b) {
-      <div
-        class="cb-editor__bubble"
-        [class.cb-editor__bubble--below]="b.below"
-        role="toolbar"
-        [attr.aria-label]="t().quickFormat"
-        [style.left.px]="b.left"
-        [style.top.px]="b.top"
-        (keydown)="onContextKeydown($event)"
-      >
-        @for (tool of bubbleTools; track tool; let first = $first) {
-          <button
-            type="button"
-            class="cb-editor__tool"
-            [class.cb-is-active]="isActive(tool)"
-            [attr.aria-pressed]="pressable(tool) ? isActive(tool) : null"
-            [attr.aria-label]="toolLabel(tool)"
-            [attr.title]="toolTitle(tool)"
-            [tabindex]="first ? 0 : -1"
-            (mousedown)="hold($event)"
-            (click)="runBubble(tool)"
-          >
-            <cb-icon [name]="toolIcon(tool)" [size]="16" aria-hidden="true" />
-          </button>
-        }
-      </div>
-    }
-    @if (slash(); as sl) {
-      @if (slashItems().length) {
-        <div class="cb-editor__slash" role="listbox" [id]="slashListId" [attr.aria-label]="t().insertBlock" [style.left.px]="sl.left" [style.top.px]="sl.top">
-          @for (item of slashItems(); track item.id; let i = $index) {
-            <div
-              class="cb-editor__slash-item"
-              role="option"
-              [id]="slashOptionId(i)"
-              [class.cb-is-active]="i === sl.active"
-              [attr.aria-selected]="i === sl.active"
-              (mousedown)="hold($event)"
-              (click)="applySlash(item)"
-            >
-              <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" />
-              {{ item.label(t()) }}
-            </div>
-          }
-        </div>
-      }
-    }
-    </div>
-
-    @if (sourceMode()) {
-      <textarea
-        class="cb-editor__source"
-        spellcheck="false"
-        [attr.aria-label]="t().sourceCode"
-        [style.minHeight]="height()"
-        [value]="sourceText()"
-        (input)="sourceText.set($any($event.target).value)"
-        (blur)="onBlur()"
-      ></textarea>
-    }
-
-    @if (message() || maxLength() || (wordCount() && !readonly())) {
-      <div class="cb-editor__footer">
-        @if (message()) {
-          <p class="cb-editor__error" role="alert">{{ message() }}</p>
-        }
-        @if (maxLength() || (wordCount() && !readonly())) {
-          <span class="cb-editor__count" [id]="countId" [class.cb-is-over]="!!maxLength() && length() > maxLength()!">{{ countLine() }}</span>
-        }
-      </div>
-    }
-
-    <input #imageInput type="file" accept="image/png,image/jpeg,image/gif,image/webp" hidden (change)="onImageFile($event)" />
-  `, styles: [":host{display:block;width:100%;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);overflow:clip}.cb-editor__header{position:sticky;top:var(--cb-editor-sticky-top, 0px);z-index:3;background:var(--cb-color-surface)}.cb-editor__toolbar{display:grid;gap:.25rem;padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface))}.cb-editor__row{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem}.cb-editor__row+.cb-editor__row{padding-top:.25rem;border-top:1px dashed var(--cb-color-border)}.cb-editor__select--font{width:10.5rem}.cb-editor__select--size{width:5.5rem}.cb-editor__select{height:1.75rem;padding:0 .4rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-editor__sep{width:1px;height:1.1rem;margin:0 .25rem;background:var(--cb-color-border)}.cb-editor__tool{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);cursor:pointer}.cb-editor__tool:hover{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-editor__tool:disabled{opacity:.4;cursor:not-allowed}.cb-editor__tool:focus-visible,.cb-editor__select:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__tool.cb-is-active{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}:host-context([data-theme=\"dark\"]) .cb-editor__tool.cb-is-active{color:var(--cb-color-primary-300)}@media(forced-colors:active){.cb-editor__tool.cb-is-active{outline:2px solid Highlight}}.cb-editor__link{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--cb-space-2) var(--cb-space-3);padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface));font-size:var(--cb-text-sm)}.cb-editor__link-field{display:grid;flex:1 1 14rem;gap:.2rem}.cb-editor__link-label{font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__link-input{height:2rem;padding:0 .5rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-sm);background:var(--cb-color-bg, var(--cb-color-surface));color:var(--cb-color-text);font:inherit}.cb-editor__link-input[aria-invalid=true]{border-color:var(--cb-color-danger-500)}.cb-editor__link-input:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:0}.cb-editor__link-check{display:inline-flex;align-items:center;gap:.35rem;min-height:2rem}.cb-editor__link-actions{display:inline-flex;gap:var(--cb-space-2)}.cb-editor__btn{display:inline-flex;align-items:center;gap:.3rem;height:2rem;padding:0 .7rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-editor__btn:hover{background:var(--cb-color-surface-hover)}.cb-editor__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__btn--primary{color:var(--cb-color-primary-contrast);background:var(--cb-color-primary-600);border-color:var(--cb-color-primary-600)}.cb-editor__btn--primary:hover{background:var(--cb-color-primary-700)}.cb-editor__error{flex-basis:100%;margin:0;font-size:var(--cb-text-xs);color:var(--cb-color-danger-600)}.cb-editor__surface{padding:var(--cb-space-3);font-family:var(--cb-editor-font-family, Carlito, Calibri, var(--cb-font-sans), sans-serif);font-size:var(--cb-editor-font-size, 16px);line-height:1.6;outline:none;overflow-y:auto}.cb-editor__surface:empty:before,.cb-editor__surface.cb-is-empty:not(:focus):before{content:attr(data-placeholder);color:var(--cb-color-text-muted);pointer-events:none}.cb-editor__surface.cb-is-empty:not(:empty):before{position:absolute}.cb-editor__surface{position:relative}.cb-editor__source{display:block;box-sizing:border-box;width:100%;padding:var(--cb-space-3);border:none;resize:vertical;background:var(--cb-color-surface-subtle, var(--cb-color-surface));color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);font-size:var(--cb-text-xs);line-height:1.6;outline:none}.cb-editor__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-1) var(--cb-space-3) var(--cb-space-2);border-top:var(--cb-border-width) solid var(--cb-color-border)}.cb-editor__count{margin-left:auto;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-editor__count.cb-is-over{color:var(--cb-color-danger-600);font-weight:var(--cb-font-weight-semibold)}:host(.cb-is-readonly){border-color:transparent;background:transparent}:host(.cb-is-readonly) .cb-editor__surface{padding:0}.cb-editor__surface h1{font-size:1.5rem;margin:.4em 0}.cb-editor__surface h2{font-size:1.25rem;margin:.4em 0}.cb-editor__surface h3{font-size:1.1rem;margin:.4em 0}.cb-editor__surface p{margin:.4em 0}.cb-editor__surface ul,.cb-editor__surface ol{margin:.4em 0;padding-left:1.5rem}.cb-editor__surface blockquote{margin:.5em 0;padding:.25em .9em;border-left:3px solid var(--cb-color-primary-400, var(--cb-color-border));color:var(--cb-color-text-muted)}.cb-editor__surface a{color:var(--cb-color-primary-600, #059669);text-decoration:underline}.cb-editor__surface code{padding:.1em .35em;border-radius:var(--cb-radius-sm);background:var(--cb-color-surface-subtle, rgb(0 0 0 / .06));font-family:var(--cb-font-mono, monospace);font-size:.9em}.cb-editor__surface pre{padding:var(--cb-space-3);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle, rgb(0 0 0 / .06));font-family:var(--cb-font-mono, monospace);white-space:pre-wrap}.cb-editor__surface hr{margin:var(--cb-space-3) 0;border:none;border-top:1px solid var(--cb-color-border-strong, var(--cb-color-border))}.cb-editor__surface img{max-width:100%;height:auto;border-radius:var(--cb-radius-sm, 4px)}:host(.cb-is-invalid){border-color:var(--cb-color-danger)}.cb-editor__context{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem;padding:var(--cb-space-1) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:color-mix(in srgb,var(--cb-color-primary-500) 6%,var(--cb-color-surface))}.cb-editor__tool--text{width:auto;padding:0 .4rem;font:inherit;font-size:var(--cb-text-xs);font-variant-numeric:tabular-nums}.cb-editor__tool--danger:hover{color:var(--cb-color-danger-600);background:color-mix(in srgb,var(--cb-color-danger-500) 12%,transparent)}.cb-editor__link-field--narrow{flex:0 0 6rem}.cb-editor__body{position:relative}.cb-editor__surface img{cursor:pointer}.cb-editor__img-frame{position:absolute;box-sizing:border-box;border:2px solid var(--cb-color-primary-500);border-radius:2px;pointer-events:none}.cb-editor__img-handle{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border:2px solid var(--cb-color-surface);border-radius:2px;background:var(--cb-color-primary-500);cursor:nwse-resize;pointer-events:auto;touch-action:none}.cb-editor__surface table{width:100%;margin:var(--cb-space-2) 0;border-collapse:collapse;table-layout:fixed}.cb-editor__surface th,.cb-editor__surface td{min-width:2rem;padding:.35rem .5rem;vertical-align:top;word-break:break-word;outline:1px dashed color-mix(in srgb,var(--cb-color-text-muted) 45%,transparent);outline-offset:-1px}.cb-editor__surface th[style*=border],.cb-editor__surface td[style*=border]{outline:none}.cb-editor__surface th{font-weight:var(--cb-font-weight-semibold, 600);text-align:left}:host(.cb-is-readonly) .cb-editor__surface th,:host(.cb-is-readonly) .cb-editor__surface td{outline:none}.cb-editor__surface pre code{padding:0;background:transparent;color:inherit;font-size:inherit}.cb-editor__surface pre[data-language]:before{content:attr(data-language);float:right;margin:-.25rem -.25rem 0 .5rem;font-family:var(--cb-font-sans);font-size:.7rem;opacity:.6}.cb-editor__group{display:inline-flex;align-items:center;gap:.2rem}.cb-editor__group-label{margin-right:.15rem;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted)}.cb-editor__tool--labeled{width:auto;gap:.3rem;padding:0 .45rem;font:inherit;font-size:var(--cb-text-xs);white-space:nowrap}.cb-editor__picker-panel{align-items:flex-start}.cb-editor__picker{display:grid;gap:3px}.cb-editor__picker-row{display:flex;gap:3px}.cb-editor__picker-cell{width:1.1rem;height:1.1rem;padding:0;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:2px;background:var(--cb-color-surface);cursor:pointer}.cb-editor__picker-cell.cb-is-on{border-color:var(--cb-color-primary-600);background:color-mix(in srgb,var(--cb-color-primary-500) 35%,var(--cb-color-surface))}.cb-editor__picker-cell:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__picker-side{display:grid;gap:var(--cb-space-2);align-content:start}.cb-editor__picker-size{font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums}.cb-editor__crop{display:grid;gap:var(--cb-space-2);padding:var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface))}.cb-editor__crop-stage{position:relative;justify-self:center;max-width:100%;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}.cb-editor__crop-img{display:block;max-width:100%;max-height:22rem}.cb-editor__crop-box{position:absolute;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 9999px #0000008c;cursor:move;outline:none}.cb-editor__crop-box:focus-visible{border-color:var(--cb-color-focus-ring)}.cb-editor__crop-handle{position:absolute;width:14px;height:14px;border:2px solid var(--cb-color-primary-600);border-radius:2px;background:#fff}.cb-editor__crop-handle--nw{left:-8px;top:-8px;cursor:nwse-resize}.cb-editor__crop-handle--ne{right:-8px;top:-8px;cursor:nesw-resize}.cb-editor__crop-handle--sw{left:-8px;bottom:-8px;cursor:nesw-resize}.cb-editor__crop-handle--se{right:-8px;bottom:-8px;cursor:nwse-resize}.cb-editor__crop-help{margin:0;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__crop-spacer{flex:1}.cb-editor__btn.cb-is-active{border-color:var(--cb-color-primary-600);color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,var(--cb-color-surface))}.cb-editor__crop .cb-editor__link-actions{display:flex;flex-wrap:wrap}.cb-editor__select--size{width:7.5rem}.cb-editor__menu-wrap{position:relative;display:inline-flex}.cb-editor__menu-trigger{position:relative;width:auto;gap:1px;padding:0 .25rem}.cb-editor__color-bar{position:absolute;left:.35rem;right:1rem;bottom:.2rem;height:3px;border-radius:1px}.cb-editor__caret{opacity:.7}.cb-editor__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:10;display:grid;gap:2px;min-width:12rem;padding:.35rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12))}.cb-editor__menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .5rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm);text-align:left;cursor:pointer}.cb-editor__menu-item:hover,.cb-editor__menu-item:focus-visible{background:var(--cb-color-surface-hover);outline:none}.cb-editor__menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring)}.cb-editor__menu-item[aria-checked=true]{font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700)}.cb-editor__kbd{margin-left:auto;font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__swatches{display:grid;grid-template-columns:repeat(5,1.6rem);gap:.35rem;padding:.25rem}.cb-editor__swatch{width:1.6rem;height:1.6rem;padding:0;border:1px solid rgb(0 0 0 / .15);border-radius:var(--cb-radius-sm);cursor:pointer}.cb-editor__swatch:hover{transform:scale(1.1)}.cb-editor__swatch:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-editor__swatch--none{display:inline-block;width:1rem;height:1rem;background:linear-gradient(135deg,transparent 45%,var(--cb-color-danger-500) 45% 55%,transparent 55%),var(--cb-color-surface)}.cb-editor__surface{resize:vertical}:host(.cb-is-readonly) .cb-editor__surface{resize:none}:host(.cb-is-fullscreen){position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;border-radius:0}:host(.cb-is-fullscreen) .cb-editor__body{flex:1;min-height:0;display:flex;flex-direction:column}:host(.cb-is-fullscreen) .cb-editor__surface{flex:1;resize:none;max-width:60rem;width:100%;margin:0 auto}.cb-editor__surface h4{margin:.75rem 0 .35rem;font-size:1rem}.cb-editor__surface ul[data-type=taskList]{padding-left:.25rem;list-style:none}.cb-editor__surface ul[data-type=taskList]>li{position:relative;padding-left:1.75rem}.cb-editor__surface ul[data-type=taskList]>li:before{content:\"\";position:absolute;left:0;top:.3em;box-sizing:border-box;width:1.05rem;height:1.05rem;border:1.5px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:3px;background:var(--cb-color-surface);cursor:pointer}.cb-editor__surface ul[data-type=taskList]>li[data-checked=true]:before{content:\"\\2713\";display:grid;place-items:center;border-color:var(--cb-color-primary-600);background:var(--cb-color-primary-600);color:var(--cb-color-primary-contrast, #fff);font-size:.75rem;font-weight:700;line-height:1}.cb-editor__surface ul[data-type=taskList]>li[data-checked=true]{color:var(--cb-color-text-muted);text-decoration:line-through}.cb-editor__menu--chars{left:auto;right:0;width:max-content;max-height:18rem;overflow-y:auto}.cb-editor__chars-label{display:block;padding:.35rem .25rem .15rem;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted)}.cb-editor__chars{display:grid;grid-template-columns:repeat(8,2rem);gap:2px}.cb-editor__char{width:2rem;height:2rem;padding:0;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font-size:1.05rem;line-height:1;cursor:pointer}.cb-editor__char:hover,.cb-editor__char:focus-visible{background:var(--cb-color-surface-hover);outline:none}.cb-editor__char:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring)}.cb-editor__find{align-items:flex-end}.cb-editor__find-options{display:inline-flex;align-items:center;gap:.2rem;min-height:2rem}.cb-editor__find-count{min-width:5.5rem;padding:0 .35rem;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums;text-align:center}.cb-editor__find .cb-editor__link-actions{align-items:center}.cb-editor__bubble{position:absolute;z-index:4;display:flex;gap:2px;padding:.2rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12));transform:translate(-50%,calc(-100% - 6px))}.cb-editor__bubble--below{transform:translate(-50%,6px)}.cb-editor__slash{position:absolute;z-index:4;display:grid;gap:1px;width:15rem;max-height:17rem;margin-top:4px;padding:.3rem;overflow-y:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12))}.cb-editor__slash-item{display:flex;align-items:center;gap:.55rem;padding:.4rem .5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-editor__slash-item:hover{background:var(--cb-color-surface-hover)}.cb-editor__slash-item.cb-is-active{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}:host-context([data-theme=\"dark\"]) .cb-editor__slash-item.cb-is-active{color:var(--cb-color-primary-300)}@media(forced-colors:active){.cb-editor__slash-item.cb-is-active{outline:2px solid Highlight}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], wordCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "wordCount", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }], imageUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUpload", required: false }] }], maxImageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxImageSize", required: false }] }], pastePlainText: [{ type: i0.Input, args: [{ isSignal: true, alias: "pastePlainText", required: false }] }], fonts: [{ type: i0.Input, args: [{ isSignal: true, alias: "fonts", required: false }] }], fontsHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontsHref", required: false }] }], bubbleMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubbleMenu", required: false }] }], slashCommands: [{ type: i0.Input, args: [{ isSignal: true, alias: "slashCommands", required: false }] }], autolink: [{ type: i0.Input, args: [{ isSignal: true, alias: "autolink", required: false }] }], typography: [{ type: i0.Input, args: [{ isSignal: true, alias: "typography", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], imageError: [{ type: i0.Output, args: ["imageError"] }], findInputRef: [{ type: i0.ViewChild, args: ['findInput', { isSignal: true }] }], surfaceRef: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], imageInputRef: [{ type: i0.ViewChild, args: ['imageInput', { isSignal: true }] }], toolbarRef: [{ type: i0.ViewChild, args: ['toolbar', { isSignal: true }] }], linkInputRef: [{ type: i0.ViewChild, args: ['linkInput', { isSignal: true }] }], bodyRef: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], tableRowsRef: [{ type: i0.ViewChild, args: ['tableRows', { isSignal: true }] }], tableColsRef: [{ type: i0.ViewChild, args: ['tableCols', { isSignal: true }] }], tableHeaderRef: [{ type: i0.ViewChild, args: ['tableHeader', { isSignal: true }] }], altInputRef: [{ type: i0.ViewChild, args: ['altInput', { isSignal: true }] }], cropStageRef: [{ type: i0.ViewChild, args: ['cropStage', { isSignal: true }] }] } });
+                    }, template: `
+    <div class="cb-editor__header">
+    @if (!readonly()) {
+      <div
+        #toolbar
+        class="cb-editor__toolbar"
+        role="toolbar"
+        [attr.aria-label]="t().textFormatting"
+        [attr.aria-controls]="surfaceId"
+        (keydown)="onToolbarKeydown($event)"
+        (focusin)="setActiveTool($any($event.target))"
+      >
+        @for (row of toolbarRows(); track $index) {
+        <div class="cb-editor__row">
+        @for (tool of row; track $index) {
+          @if (tool === '|') {
+            <span class="cb-editor__sep" aria-hidden="true"></span>
+          } @else if (tool === 'heading') {
+            <select
+              class="cb-editor__select"
+              [disabled]="isDisabled() || sourceMode()"
+              [attr.aria-label]="t().paragraphStyle"
+              [title]="t().paragraphStyle"
+              (change)="format($any($event.target).value)"
+            >
+              <option value="P" [selected]="state().block === 'P'">{{ t().normal }}</option>
+              <option value="H1" [selected]="state().block === 'H1'">{{ t().heading1 }}</option>
+              <option value="H2" [selected]="state().block === 'H2'">{{ t().heading2 }}</option>
+              <option value="H3" [selected]="state().block === 'H3'">{{ t().heading3 }}</option>
+              <option value="H4" [selected]="state().block === 'H4'">{{ t().heading4 }}</option>
+            </select>
+          } @else if (tool === 'fontFamily') {
+            <select
+              class="cb-editor__select cb-editor__select--font"
+              [disabled]="isDisabled() || sourceMode()"
+              [attr.aria-label]="t().fontFamily"
+              [title]="t().fontFamily"
+              (change)="setFontFamily($any($event.target).value)"
+            >
+              @for (group of fonts(); track $index) {
+                <optgroup [label]="groupLabel(group)">
+                  @for (font of group.fonts; track font.value) {
+                    <option [value]="font.value" [style.font-family]="font.value || null" [selected]="state().fontFamily === font.value">{{ font.name }}</option>
+                  }
+                </optgroup>
+              }
+            </select>
+          } @else if (tool === 'fontSize') {
+            <select
+              class="cb-editor__select cb-editor__select--size"
+              [disabled]="isDisabled() || sourceMode()"
+              [attr.aria-label]="t().fontSize"
+              [title]="t().fontSize"
+              (change)="setFontSize($any($event.target).value)"
+            >
+              <option value="" [selected]="!state().fontSize">{{ t().fontNormal }}</option>
+              @for (size of fontSizes; track size) {
+                <option [value]="size + 'px'" [selected]="state().fontSize === size + 'px'">{{ size }} px</option>
+              }
+            </select>
+          } @else if (isMenu(tool)) {
+            <div class="cb-editor__menu-wrap">
+              <button
+                type="button"
+                class="cb-editor__tool cb-editor__menu-trigger"
+                [disabled]="isDisabled() || sourceMode()"
+                aria-haspopup="menu"
+                [attr.aria-expanded]="openMenu() === tool"
+                [attr.aria-label]="toolLabel(tool)"
+                [attr.title]="toolLabel(tool)"
+                (mousedown)="hold($event)"
+                (click)="toggleMenu(tool)"
+                (keydown)="onMenuTriggerKeydown($event, tool)"
+              >
+                <cb-icon [name]="menuIcon(tool)" [size]="16" aria-hidden="true" />
+                @if (tool === 'textColor' || tool === 'highlight') {
+                  <span class="cb-editor__color-bar" [style.background]="tool === 'textColor' ? lastTextColor() : lastHighlight()"></span>
+                }
+                <cb-icon name="chevron-down" [size]="11" class="cb-editor__caret" aria-hidden="true" />
+              </button>
+              @if (openMenu() === tool) {
+                <div
+                  class="cb-editor__menu"
+                  [class.cb-editor__menu--palette]="tool === 'textColor' || tool === 'highlight'"
+                  [class.cb-editor__menu--chars]="tool === 'specialChars'"
+                  role="menu"
+                  [attr.aria-label]="toolLabel(tool)"
+                  (keydown)="onMenuKeydown($event)"
+                >
+                  @if (tool === 'alignment') {
+                    @for (option of alignments; track option) {
+                      <button
+                        type="button"
+                        class="cb-editor__menu-item"
+                        role="menuitemradio"
+                        [attr.aria-checked]="state()[option]"
+                        [tabindex]="-1"
+                        [attr.aria-keyshortcuts]="ariaKeys(option)"
+                        (mousedown)="hold($event)"
+                        (click)="applyMenu(tool, option)"
+                      >
+                        <cb-icon [name]="toolIcon(option)" [size]="16" aria-hidden="true" />
+                        <span>{{ toolLabel(option) }}</span>
+                        <kbd class="cb-editor__kbd">{{ toolKeys(option) }}</kbd>
+                      </button>
+                    }
+                  } @else if (tool === 'specialChars') {
+                    @for (group of specialChars; track $index) {
+                      <div class="cb-editor__chars-group" role="group" [attr.aria-label]="group.label(t())">
+                        <span class="cb-editor__chars-label" aria-hidden="true">{{ group.label(t()) }}</span>
+                        <div class="cb-editor__chars">
+                          @for (ch of group.chars; track ch) {
+                            <button type="button" class="cb-editor__char" role="menuitem" [tabindex]="-1" (mousedown)="hold($event)" (click)="applyMenu(tool, ch)">{{ ch }}</button>
+                          }
+                        </div>
+                      </div>
+                    }
+                  } @else {
+                    <button
+                      type="button"
+                      class="cb-editor__menu-item cb-editor__menu-item--wide"
+                      role="menuitem"
+                      [tabindex]="-1"
+                      (mousedown)="hold($event)"
+                      (click)="applyMenu(tool, null)"
+                    >
+                      <span class="cb-editor__swatch cb-editor__swatch--none" aria-hidden="true"></span>
+                      {{ tool === 'textColor' ? t().automaticColor : t().noHighlight }}
+                    </button>
+                    <div class="cb-editor__swatches">
+                      @for (color of tool === 'textColor' ? textColors : highlightColors; track color.value) {
+                        <button
+                          type="button"
+                          class="cb-editor__swatch"
+                          role="menuitem"
+                          [style.background]="color.value"
+                          [attr.aria-label]="color.label(t())"
+                          [attr.title]="color.label(t())"
+                          [tabindex]="-1"
+                          (mousedown)="hold($event)"
+                          (click)="applyMenu(tool, color.value)"
+                        ></button>
+                      }
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          } @else {
+            <button
+              type="button"
+              class="cb-editor__tool"
+              [class.cb-is-active]="isActive(tool)"
+              [disabled]="isDisabled() || (sourceMode() && tool !== 'source' && tool !== 'fullscreen')"
+              [attr.aria-label]="toolLabel(tool)"
+              [attr.title]="toolTitle(tool)"
+              [attr.aria-keyshortcuts]="ariaKeys(tool)"
+              [attr.aria-pressed]="pressable(tool) ? isActive(tool) : null"
+              (mousedown)="hold($event)"
+              (click)="run(tool)"
+            >
+              <cb-icon [name]="tool === 'fullscreen' && fullscreen() ? 'minimize' : toolIcon(tool)" [size]="16" aria-hidden="true" />
+            </button>
+          }
+        }
+        </div>
+        }
+      </div>
+    }
+
+    @if (findOpen() && !readonly()) {
+      <div class="cb-editor__link cb-editor__find" role="search" [attr.aria-label]="t().findReplace" (keydown)="onFindKeydown($event)">
+        <label class="cb-editor__link-field">
+          <span class="cb-editor__link-label">{{ t().findText }}</span>
+          <input #findInput class="cb-editor__link-input" type="text" autocomplete="off" [value]="findQuery()" (input)="setFindQuery($any($event.target).value)" />
+        </label>
+        <label class="cb-editor__link-field">
+          <span class="cb-editor__link-label">{{ t().replaceWith }}</span>
+          <input class="cb-editor__link-input cb-editor__replace-input" type="text" autocomplete="off" [value]="replaceText()" (input)="replaceText.set($any($event.target).value)" />
+        </label>
+        <div class="cb-editor__find-options">
+          <button
+            type="button"
+            class="cb-editor__tool"
+            [class.cb-is-active]="findCase()"
+            [attr.aria-pressed]="findCase()"
+            [attr.aria-label]="t().matchCase"
+            [attr.title]="t().matchCase"
+            (click)="setFindOption('case')"
+          >
+            <cb-icon name="case-sensitive" [size]="16" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="cb-editor__tool"
+            [class.cb-is-active]="findWhole()"
+            [attr.aria-pressed]="findWhole()"
+            [attr.aria-label]="t().wholeWords"
+            [attr.title]="t().wholeWords"
+            (click)="setFindOption('whole')"
+          >
+            <cb-icon name="whole-word" [size]="16" aria-hidden="true" />
+          </button>
+          <span class="cb-editor__find-count" role="status">{{ findStatus() }}</span>
+          <button type="button" class="cb-editor__tool" [disabled]="!findTotal()" [attr.aria-label]="t().findPrevious" [attr.title]="t().findPrevious + ' (Shift+Enter)'" (click)="findStep(-1)">
+            <cb-icon name="chevron-up" [size]="16" aria-hidden="true" />
+          </button>
+          <button type="button" class="cb-editor__tool" [disabled]="!findTotal()" [attr.aria-label]="t().findNext" [attr.title]="t().findNext + ' (Enter)'" (click)="findStep(1)">
+            <cb-icon name="chevron-down" [size]="16" aria-hidden="true" />
+          </button>
+        </div>
+        <div class="cb-editor__link-actions">
+          <button type="button" class="cb-editor__btn" [disabled]="!findTotal()" (click)="replaceCurrent()">{{ t().replaceOne }}</button>
+          <button type="button" class="cb-editor__btn" [disabled]="!findTotal()" (click)="replaceAllMatches()">{{ t().replaceAll }}</button>
+          <button type="button" class="cb-editor__tool" [attr.aria-label]="t().close" [attr.title]="t().close + ' (Esc)'" (click)="closeFind()">
+            <cb-icon name="x" [size]="16" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+    }
+
+    @if (draft(); as d) {
+      <div class="cb-editor__draft" role="status">
+        <span>{{ fmt(t().editorDraftFound, draftDate(d.savedAt)) }}</span>
+        <button type="button" class="cb-editor__btn cb-editor__btn--primary" (click)="restoreDraft()">{{ t().editorRestoreDraft }}</button>
+        <button type="button" class="cb-editor__btn" (click)="discardDraft()">{{ t().editorDiscardDraft }}</button>
+      </div>
+    }
+
+    @if (codeBlock() && !readonly() && !sourceMode()) {
+      <div class="cb-editor__context" role="toolbar" [attr.aria-label]="t().editorCodeTools" (keydown)="onContextKeydown($event)">
+        <span class="cb-editor__group-label" aria-hidden="true">{{ t().codeBlock }}</span>
+        <select class="cb-editor__select" tabindex="0" [attr.aria-label]="t().editorCodeLanguage" (change)="setCodeLanguage($any($event.target).value)">
+          @for (lang of codeLanguages; track lang) {
+            <option [value]="lang" [selected]="codeLanguage() === lang">{{ lang ? languageLabel(lang) : t().editorPlainText }}</option>
+          }
+        </select>
+        <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" (mousedown)="hold($event)" (click)="copyCode()">
+          <cb-icon name="copy" [size]="15" aria-hidden="true" />{{ codeCopied() ? t().editorCodeCopied : t().editorCopyCode }}
+        </button>
+      </div>
+    }
+
+    @if (tableCell() && !readonly() && !sourceMode()) {
+      <div class="cb-editor__context cb-editor__context--table" role="toolbar" [attr.aria-label]="t().tableTools" (keydown)="onContextKeydown($event)">
+        <div class="cb-editor__group" role="group" [attr.aria-label]="t().tableRow">
+          <span class="cb-editor__group-label" aria-hidden="true">{{ t().tableRow }}</span>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="0" [attr.aria-label]="t().insertRowAbove" (mousedown)="hold($event)" (click)="tableAction('rowAbove')">
+            <cb-icon name="between-horizontal-start" [size]="15" aria-hidden="true" />{{ t().above }}
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertRowBelow" (mousedown)="hold($event)" (click)="tableAction('rowBelow')">
+            <cb-icon name="between-horizontal-end" [size]="15" aria-hidden="true" />{{ t().below }}
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteRow" (mousedown)="hold($event)" (click)="tableAction('deleteRow')">
+            <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().tableDelete }}
+          </button>
+        </div>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <div class="cb-editor__group" role="group" [attr.aria-label]="t().tableColumn">
+          <span class="cb-editor__group-label" aria-hidden="true">{{ t().tableColumn }}</span>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertColumnLeft" (mousedown)="hold($event)" (click)="tableAction('colLeft')">
+            <cb-icon name="between-vertical-start" [size]="15" aria-hidden="true" />{{ t().toLeft }}
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [attr.aria-label]="t().insertColumnRight" (mousedown)="hold($event)" (click)="tableAction('colRight')">
+            <cb-icon name="between-vertical-end" [size]="15" aria-hidden="true" />{{ t().toRight }}
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteColumn" (mousedown)="hold($event)" (click)="tableAction('deleteCol')">
+            <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().tableDelete }}
+          </button>
+        </div>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <div class="cb-editor__group" role="group" [attr.aria-label]="t().editorTableCells">
+          <span class="cb-editor__group-label" aria-hidden="true">{{ t().editorTableCells }}</span>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [disabled]="!cellActions().right" [attr.aria-label]="t().editorMergeRight" [attr.title]="t().editorMergeRight" (mousedown)="hold($event)" (click)="tableAction('mergeRight')">
+            <cb-icon name="table-cells-merge" [size]="15" aria-hidden="true" />→
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [disabled]="!cellActions().down" [attr.aria-label]="t().editorMergeDown" [attr.title]="t().editorMergeDown" (mousedown)="hold($event)" (click)="tableAction('mergeDown')">
+            <cb-icon name="table-cells-merge" [size]="15" aria-hidden="true" />↓
+          </button>
+          <button type="button" class="cb-editor__tool cb-editor__tool--labeled" tabindex="-1" [disabled]="!cellActions().split" [attr.aria-label]="t().editorSplitCell" [attr.title]="t().editorSplitCell" (mousedown)="hold($event)" (click)="tableAction('split')">
+            <cb-icon name="table-cells-split" [size]="15" aria-hidden="true" />{{ t().editorSplitCell }}
+          </button>
+        </div>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="cb-editor__tool cb-editor__tool--labeled"
+          tabindex="-1"
+          [class.cb-is-active]="tableHasHeader()"
+          [attr.aria-pressed]="tableHasHeader()"
+          [attr.aria-label]="t().tableHeaderRow"
+          (mousedown)="hold($event)"
+          (click)="tableAction('header')"
+        >
+          <cb-icon name="panel-top" [size]="15" aria-hidden="true" />{{ t().tableHeaderRow }}
+        </button>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <select class="cb-editor__select" tabindex="-1" [attr.aria-label]="t().tableBorders" (change)="setTableBorders($any($event.target).value, null)">
+          <option value="all" [selected]="tableBorders().borders === 'all'">{{ t().bordersAll }}</option>
+          <option value="horizontal" [selected]="tableBorders().borders === 'horizontal'">{{ t().bordersHorizontal }}</option>
+          <option value="none" [selected]="tableBorders().borders === 'none'">{{ t().bordersNone }}</option>
+        </select>
+        <select
+          class="cb-editor__select"
+          tabindex="-1"
+          [attr.aria-label]="t().borderColor"
+          [disabled]="tableBorders().borders === 'none'"
+          (change)="setTableBorders(null, $any($event.target).value)"
+        >
+          @for (color of borderColors; track color.value) {
+            <option [value]="color.value" [selected]="tableBorders().color === color.value">{{ color.label(t()) }}</option>
+          }
+        </select>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <button type="button" class="cb-editor__tool cb-editor__tool--labeled cb-editor__tool--danger" tabindex="-1" [attr.aria-label]="t().deleteTable" (mousedown)="hold($event)" (click)="tableAction('deleteTable')">
+          <cb-icon name="trash" [size]="15" aria-hidden="true" />{{ t().deleteTable }}
+        </button>
+      </div>
+    }
+
+    @if (selectedImage() && !readonly() && !sourceMode()) {
+      <div class="cb-editor__context" role="toolbar" [attr.aria-label]="t().imageTools" (keydown)="onContextKeydown($event)">
+        @for (option of imageAligns; track option.icon; let first = $first) {
+          <button
+            type="button"
+            class="cb-editor__tool"
+            [class.cb-is-active]="imageState().align === option.align"
+            [attr.aria-pressed]="imageState().align === option.align"
+            [attr.aria-label]="option.label(t())"
+            [attr.title]="option.label(t())"
+            [tabindex]="first ? 0 : -1"
+            (mousedown)="hold($event)"
+            (click)="setImageAlign(option.align)"
+          >
+            <cb-icon [name]="option.icon" [size]="16" aria-hidden="true" />
+          </button>
+        }
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        @for (width of imageWidths; track width) {
+          <button
+            type="button"
+            class="cb-editor__tool cb-editor__tool--text"
+            [class.cb-is-active]="imageState().width === width"
+            [attr.aria-pressed]="imageState().width === width"
+            [attr.aria-label]="imageWidthLabel(width)"
+            [tabindex]="-1"
+            (mousedown)="hold($event)"
+            (click)="setImageWidth(width)"
+          >{{ width }}</button>
+        }
+        <button
+          type="button"
+          class="cb-editor__tool"
+          [class.cb-is-active]="!imageState().width"
+          [attr.aria-pressed]="!imageState().width"
+          [attr.aria-label]="t().imageOriginalSize"
+          [attr.title]="t().imageOriginalSize"
+          [tabindex]="-1"
+          (mousedown)="hold($event)"
+          (click)="setImageWidth(null)"
+        >
+          <cb-icon name="ratio" [size]="16" aria-hidden="true" />
+        </button>
+        <span class="cb-editor__sep" aria-hidden="true"></span>
+        <button type="button" class="cb-editor__tool cb-editor__tool--labeled" [attr.aria-label]="t().cropImage" [tabindex]="-1" (click)="openCrop()">
+          <cb-icon name="crop" [size]="15" aria-hidden="true" />{{ t().cropImage }}
+        </button>
+        <button
+          type="button"
+          class="cb-editor__tool cb-editor__tool--labeled"
+          [class.cb-is-active]="imageHasCaption()"
+          [attr.aria-pressed]="imageHasCaption()"
+          [attr.aria-label]="t().editorImageCaption"
+          [tabindex]="-1"
+          (mousedown)="hold($event)"
+          (click)="toggleCaption()"
+        >
+          <cb-icon name="captions" [size]="15" aria-hidden="true" />{{ t().editorImageCaption }}
+        </button>
+        <button type="button" class="cb-editor__tool" [attr.aria-label]="t().altText" [attr.title]="t().altText" [tabindex]="-1" (click)="openAlt()">
+          <cb-icon name="captions" [size]="16" aria-hidden="true" />
+        </button>
+        <button
+          type="button"
+          class="cb-editor__tool cb-editor__tool--danger"
+          [attr.aria-label]="t().deleteImage"
+          [attr.title]="t().deleteImage"
+          [tabindex]="-1"
+          (mousedown)="hold($event)"
+          (click)="deleteImage()"
+        >
+          <cb-icon name="trash" [size]="16" aria-hidden="true" />
+        </button>
+      </div>
+    }
+
+    @if (tablePanel()) {
+      <div class="cb-editor__link cb-editor__picker-panel" role="group" [attr.aria-label]="t().insertTable" (keydown.escape)="closeTablePanel()">
+        <div class="cb-editor__picker" (mouseleave)="pickerHover.set(null)">
+          @for (r of pickerRows; track r) {
+            <div class="cb-editor__picker-row">
+              @for (c of pickerCols; track c) {
+                <button
+                  type="button"
+                  class="cb-editor__picker-cell"
+                  [class.cb-is-on]="pickerOn(r, c)"
+                  [attr.aria-label]="tableSizeLabel(r, c)"
+                  [tabindex]="r === pickerFocus().r && c === pickerFocus().c ? 0 : -1"
+                  (mouseenter)="pickerHover.set({ r, c })"
+                  (focus)="pickerHover.set({ r, c }); pickerFocus.set({ r, c })"
+                  (keydown)="onPickerKeydown($event, r, c)"
+                  (click)="insertTable(r, c)"
+                ></button>
+              }
+            </div>
+          }
+        </div>
+        <div class="cb-editor__picker-side">
+          <span class="cb-editor__picker-size" aria-live="polite">{{ pickerHover() ? tableSizeLabel(pickerHover()!.r, pickerHover()!.c) : t().insertTable }}</span>
+          <label class="cb-editor__link-check">
+            <input type="checkbox" [checked]="tableHeader()" (change)="tableHeader.set($any($event.target).checked)" />
+            {{ t().tableHeaderRow }}
+          </label>
+          <button type="button" class="cb-editor__btn" (click)="closeTablePanel()">{{ t().cancel }}</button>
+        </div>
+      </div>
+    }
+
+    @if (crop(); as c) {
+      <div class="cb-editor__crop" role="group" [attr.aria-label]="t().cropImage" (keydown.escape)="closeCrop()">
+        <div class="cb-editor__crop-stage" #cropStage>
+          <img class="cb-editor__crop-img" [src]="c.src" alt="" draggable="false" />
+          <div
+            class="cb-editor__crop-box"
+            role="slider"
+            tabindex="0"
+            [attr.aria-label]="t().cropArea"
+            [attr.aria-valuetext]="cropValueText()"
+            [attr.aria-describedby]="cropHelpId"
+            [style.left.%]="c.rect.x * 100"
+            [style.top.%]="c.rect.y * 100"
+            [style.width.%]="c.rect.w * 100"
+            [style.height.%]="c.rect.h * 100"
+            (pointerdown)="startCropDrag($event, null)"
+            (keydown)="onCropKeydown($event)"
+          >
+            @for (corner of cropCorners; track corner) {
+              <span class="cb-editor__crop-handle" [class]="'cb-editor__crop-handle cb-editor__crop-handle--' + corner" (pointerdown)="startCropDrag($event, corner)"></span>
+            }
+          </div>
+        </div>
+        <p class="cb-editor__crop-help" [id]="cropHelpId">{{ t().cropInstructions }}</p>
+        <div class="cb-editor__link-actions">
+          @for (ratio of cropRatios; track ratio.label) {
+            <button
+              type="button"
+              class="cb-editor__btn"
+              [class.cb-is-active]="c.ratio === ratio.value"
+              [attr.aria-pressed]="c.ratio === ratio.value"
+              (click)="setCropRatio(ratio.value)"
+            >{{ ratio.value === null ? t().cropFree : ratio.label }}</button>
+          }
+          <span class="cb-editor__crop-spacer"></span>
+          <button type="button" class="cb-editor__btn cb-editor__btn--primary" [disabled]="c.busy" (click)="applyCrop()">{{ t().cropImage }}</button>
+          <button type="button" class="cb-editor__btn" (click)="closeCrop()">{{ t().cancel }}</button>
+        </div>
+        @if (c.error) {
+          <p class="cb-editor__error" role="alert">{{ t().cropError }}</p>
+        }
+      </div>
+    }
+
+    @if (altPanel()) {
+      <form class="cb-editor__link" role="group" [attr.aria-label]="t().altText" (submit)="applyAlt($event)" (keydown.escape)="closeAlt()">
+        <label class="cb-editor__link-field">
+          <span class="cb-editor__link-label">{{ t().altText }}</span>
+          <input #altInput class="cb-editor__link-input" type="text" [value]="selectedImage()?.getAttribute('alt') ?? ''" />
+        </label>
+        <div class="cb-editor__link-actions">
+          <button type="submit" class="cb-editor__btn cb-editor__btn--primary">{{ t().accept }}</button>
+          <button type="button" class="cb-editor__btn" (click)="closeAlt()">{{ t().cancel }}</button>
+        </div>
+      </form>
+    }
+
+    @if (linkPanel(); as panel) {
+      <form class="cb-editor__link" role="group" [attr.aria-label]="t().insertLink" (submit)="applyLink($event)" (keydown.escape)="closeLink()">
+        <label class="cb-editor__link-field">
+          <span class="cb-editor__link-label">{{ t().linkUrl }}</span>
+          <input
+            #linkInput
+            class="cb-editor__link-input"
+            type="text"
+            inputmode="url"
+            autocomplete="off"
+            [value]="panel.url"
+            [attr.aria-invalid]="linkError() ? 'true' : null"
+            [attr.aria-describedby]="linkError() ? linkErrorId : null"
+            (input)="linkUrl.set($any($event.target).value)"
+          />
+        </label>
+        <label class="cb-editor__link-check">
+          <input type="checkbox" [checked]="panel.newTab" (change)="linkNewTab.set($any($event.target).checked)" />
+          {{ t().openInNewTab }}
+        </label>
+        <div class="cb-editor__link-actions">
+          <button type="submit" class="cb-editor__btn cb-editor__btn--primary">{{ t().accept }}</button>
+          @if (panel.editing) {
+            <button type="button" class="cb-editor__btn" (click)="removeLink()">
+              <cb-icon name="unlink" [size]="14" aria-hidden="true" />
+              {{ t().removeLink }}
+            </button>
+          }
+          <button type="button" class="cb-editor__btn" (click)="closeLink()">{{ t().cancel }}</button>
+        </div>
+        @if (linkError()) {
+          <p class="cb-editor__error" [id]="linkErrorId" role="alert">{{ t().invalidUrl }}</p>
+        }
+      </form>
+    }
+
+    </div>
+
+    <div #body class="cb-editor__body">
+    <div
+      #surface
+      class="cb-editor__surface"
+      [id]="surfaceId"
+      role="textbox"
+      [hidden]="sourceMode()"
+      [class.cb-is-empty]="isEmpty()"
+      [attr.aria-label]="ariaLabel() ?? t().textEditor"
+      [attr.aria-disabled]="isDisabled() || null"
+      [attr.aria-readonly]="readonly() || null"
+      [attr.aria-invalid]="invalidState() ? 'true' : null"
+      [attr.aria-required]="fieldState.required() || null"
+      [attr.aria-describedby]="describedBy()"
+      aria-multiline="true"
+      [attr.aria-activedescendant]="slash() && slashItems().length ? slashOptionId(slash()!.active) : mention() && mentionResults().length ? mentionOptionId(mention()!.active) : null"
+      [attr.contenteditable]="!isDisabled() && !readonly()"
+      [attr.data-placeholder]="readonly() ? '' : (placeholder() ?? t().editorPlaceholder)"
+      [style.minHeight]="readonly() ? null : height()"
+      [style.maxHeight]="readonly() || fullscreen() ? null : maxHeight()"
+      (input)="onSurfaceInput($event)"
+      (beforeinput)="onBeforeInput($event)"
+      (keydown)="onSurfaceKeydown($event)"
+      (paste)="onPaste($event)"
+      (drop)="onDrop($event)"
+      (click)="onSurfaceClick($event)"
+      (mousedown)="pointerSelecting = true"
+      (scroll)="refreshFrame()"
+      (blur)="onBlur()"
+    ></div>
+    @if (imageFrame(); as frame) {
+      <div
+        class="cb-editor__img-frame"
+        aria-hidden="true"
+        [style.left.px]="frame.left"
+        [style.top.px]="frame.top"
+        [style.width.px]="frame.width"
+        [style.height.px]="frame.height"
+      >
+        <span class="cb-editor__img-handle" [attr.title]="t().imageResize" (pointerdown)="startResize($event)"></span>
+      </div>
+    }
+    @if (bubble(); as b) {
+      <div
+        class="cb-editor__bubble"
+        [class.cb-editor__bubble--below]="b.below"
+        role="toolbar"
+        [attr.aria-label]="t().quickFormat"
+        [style.left.px]="b.left"
+        [style.top.px]="b.top"
+        (keydown)="onContextKeydown($event)"
+      >
+        @for (tool of bubbleTools; track tool; let first = $first) {
+          <button
+            type="button"
+            class="cb-editor__tool"
+            [class.cb-is-active]="isActive(tool)"
+            [attr.aria-pressed]="pressable(tool) ? isActive(tool) : null"
+            [attr.aria-label]="toolLabel(tool)"
+            [attr.title]="toolTitle(tool)"
+            [tabindex]="first ? 0 : -1"
+            (mousedown)="hold($event)"
+            (click)="runBubble(tool)"
+          >
+            <cb-icon [name]="toolIcon(tool)" [size]="16" aria-hidden="true" />
+          </button>
+        }
+      </div>
+    }
+    @if (mention(); as m) {
+      @if (mentionResults().length) {
+        <div class="cb-editor__slash cb-editor__mentions" role="listbox" [id]="mentionListId" [attr.aria-label]="t().editorMentions" [style.left.px]="m.left" [style.top.px]="m.top">
+          @for (item of mentionResults(); track item.id; let i = $index) {
+            <div
+              class="cb-editor__slash-item"
+              role="option"
+              [id]="mentionOptionId(i)"
+              [class.cb-is-active]="i === m.active"
+              [attr.aria-selected]="i === m.active"
+              (mousedown)="hold($event)"
+              (click)="applyMention(item)"
+            >
+              <cb-icon name="at-sign" [size]="15" aria-hidden="true" />
+              <span class="cb-editor__mention-label">{{ item.label }}</span>
+              @if (item.description) {
+                <span class="cb-editor__mention-desc">{{ item.description }}</span>
+              }
+            </div>
+          }
+        </div>
+      }
+    }
+    @if (slash(); as sl) {
+      @if (slashItems().length) {
+        <div class="cb-editor__slash" role="listbox" [id]="slashListId" [attr.aria-label]="t().insertBlock" [style.left.px]="sl.left" [style.top.px]="sl.top">
+          @for (item of slashItems(); track item.id; let i = $index) {
+            <div
+              class="cb-editor__slash-item"
+              role="option"
+              [id]="slashOptionId(i)"
+              [class.cb-is-active]="i === sl.active"
+              [attr.aria-selected]="i === sl.active"
+              (mousedown)="hold($event)"
+              (click)="applySlash(item)"
+            >
+              <cb-icon [name]="item.icon" [size]="16" aria-hidden="true" />
+              {{ item.label(t()) }}
+            </div>
+          }
+        </div>
+      }
+    }
+    </div>
+
+    @if (sourceMode()) {
+      <textarea
+        class="cb-editor__source"
+        spellcheck="false"
+        [attr.aria-label]="t().sourceCode"
+        [style.minHeight]="height()"
+        [value]="sourceText()"
+        (input)="sourceText.set($any($event.target).value)"
+        (blur)="onBlur()"
+      ></textarea>
+    }
+
+    @if (message() || maxLength() || (wordCount() && !readonly()) || savedAt()) {
+      <div class="cb-editor__footer">
+        @if (message()) {
+          <p class="cb-editor__error" role="alert">{{ message() }}</p>
+        }
+        @if (savedAt(); as at) {
+          <span class="cb-editor__saved">{{ fmt(t().editorDraftSaved, draftTime(at)) }}</span>
+        }
+        @if (maxLength() || (wordCount() && !readonly())) {
+          <span class="cb-editor__count" [id]="countId" [class.cb-is-over]="!!maxLength() && length() > maxLength()!">{{ countLine() }}</span>
+        }
+      </div>
+    }
+
+    <input #imageInput type="file" accept="image/png,image/jpeg,image/gif,image/webp" hidden (change)="onImageFile($event)" />
+  `, styles: [":host{display:block;width:100%;border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-lg);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:var(--cb-font-sans);overflow:clip}.cb-editor__header{position:sticky;top:var(--cb-editor-sticky-top, 0px);z-index:3;background:var(--cb-color-surface)}.cb-editor__toolbar{display:grid;gap:.25rem;padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface))}.cb-editor__row{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem}.cb-editor__row+.cb-editor__row{padding-top:.25rem;border-top:1px dashed var(--cb-color-border)}.cb-editor__select--font{width:10.5rem}.cb-editor__select--size{width:5.5rem}.cb-editor__select{height:1.75rem;padding:0 .4rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background:var(--cb-color-bg);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm);cursor:pointer}.cb-editor__sep{width:1px;height:1.1rem;margin:0 .25rem;background:var(--cb-color-border)}.cb-editor__tool{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);cursor:pointer}.cb-editor__tool:hover{background:color-mix(in srgb,var(--cb-color-primary-500) 12%,transparent)}.cb-editor__tool:disabled{opacity:.4;cursor:not-allowed}.cb-editor__tool:focus-visible,.cb-editor__select:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__tool.cb-is-active{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 18%,transparent)}:host-context([data-theme=\"dark\"]) .cb-editor__tool.cb-is-active{color:var(--cb-color-primary-300)}@media(forced-colors:active){.cb-editor__tool.cb-is-active{outline:2px solid Highlight}}.cb-editor__link{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--cb-space-2) var(--cb-space-3);padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface));font-size:var(--cb-text-sm)}.cb-editor__link-field{display:grid;flex:1 1 14rem;gap:.2rem}.cb-editor__link-label{font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__link-input{height:2rem;padding:0 .5rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-sm);background:var(--cb-color-bg, var(--cb-color-surface));color:var(--cb-color-text);font:inherit}.cb-editor__link-input[aria-invalid=true]{border-color:var(--cb-color-danger-500)}.cb-editor__link-input:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:0}.cb-editor__link-check{display:inline-flex;align-items:center;gap:.35rem;min-height:2rem}.cb-editor__link-actions{display:inline-flex;gap:var(--cb-space-2)}.cb-editor__btn{display:inline-flex;align-items:center;gap:.3rem;height:2rem;padding:0 .7rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-sm);background:var(--cb-color-surface);color:var(--cb-color-text);font:inherit;cursor:pointer}.cb-editor__btn:hover{background:var(--cb-color-surface-hover)}.cb-editor__btn:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__btn--primary{color:#fff;background:var(--cb-color-primary-700, #047857);border-color:var(--cb-color-primary-600)}.cb-editor__btn--primary:hover{background:var(--cb-color-primary-700)}.cb-editor__error{flex-basis:100%;margin:0;font-size:var(--cb-text-xs);color:var(--cb-color-danger-600)}.cb-editor__surface{padding:var(--cb-space-3);font-family:var(--cb-editor-font-family, Carlito, Calibri, var(--cb-font-sans), sans-serif);font-size:var(--cb-editor-font-size, 16px);line-height:1.6;outline:none;overflow-y:auto}.cb-editor__surface:empty:before,.cb-editor__surface.cb-is-empty:not(:focus):before{content:attr(data-placeholder);color:var(--cb-color-text-muted);pointer-events:none}.cb-editor__surface.cb-is-empty:not(:empty):before{position:absolute}.cb-editor__surface{position:relative}.cb-editor__source{display:block;box-sizing:border-box;width:100%;padding:var(--cb-space-3);border:none;resize:vertical;background:var(--cb-color-surface-subtle, var(--cb-color-surface));color:var(--cb-color-text);font-family:var(--cb-font-mono, monospace);font-size:var(--cb-text-xs);line-height:1.6;outline:none}.cb-editor__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-1) var(--cb-space-3) var(--cb-space-2);border-top:var(--cb-border-width) solid var(--cb-color-border)}.cb-editor__count{margin-left:auto;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums}.cb-editor__count.cb-is-over{color:var(--cb-color-danger-600);font-weight:var(--cb-font-weight-semibold)}:host(.cb-is-readonly){border-color:transparent;background:transparent}:host(.cb-is-readonly) .cb-editor__surface{padding:0}:host ::ng-deep .cb-editor__surface h1{font-size:1.5rem;margin:.4em 0}:host ::ng-deep .cb-editor__surface h2{font-size:1.25rem;margin:.4em 0}:host ::ng-deep .cb-editor__surface h3{font-size:1.1rem;margin:.4em 0}:host ::ng-deep .cb-editor__surface p{margin:.4em 0}:host ::ng-deep .cb-editor__surface ul,:host ::ng-deep .cb-editor__surface ol{margin:.4em 0;padding-left:1.5rem}:host ::ng-deep .cb-editor__surface blockquote{margin:.5em 0;padding:.25em .9em;border-left:3px solid var(--cb-color-primary-400, var(--cb-color-border));color:var(--cb-color-text-muted)}:host ::ng-deep .cb-editor__surface a{color:var(--cb-color-primary-text);text-decoration:underline}:host ::ng-deep .cb-editor__surface code{padding:.1em .35em;border-radius:var(--cb-radius-sm);background:var(--cb-color-surface-subtle, rgb(0 0 0 / .06));font-family:var(--cb-font-mono, monospace);font-size:.9em}:host ::ng-deep .cb-editor__surface pre{padding:var(--cb-space-3);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle, rgb(0 0 0 / .06));font-family:var(--cb-font-mono, monospace);white-space:pre-wrap}:host ::ng-deep .cb-editor__surface hr{margin:var(--cb-space-3) 0;border:none;border-top:1px solid var(--cb-color-border-strong, var(--cb-color-border))}:host ::ng-deep .cb-editor__surface img{max-width:100%;height:auto;border-radius:var(--cb-radius-sm, 4px)}:host(.cb-is-invalid){border-color:var(--cb-color-danger)}.cb-editor__context{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem;padding:var(--cb-space-1) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:color-mix(in srgb,var(--cb-color-primary-500) 6%,var(--cb-color-surface))}.cb-editor__tool--text{width:auto;padding:0 .4rem;font:inherit;font-size:var(--cb-text-xs);font-variant-numeric:tabular-nums}.cb-editor__tool--danger:hover{color:var(--cb-color-danger-600);background:color-mix(in srgb,var(--cb-color-danger-500) 12%,transparent)}.cb-editor__link-field--narrow{flex:0 0 6rem}.cb-editor__body{position:relative}:host ::ng-deep .cb-editor__surface img{cursor:pointer}.cb-editor__img-frame{position:absolute;box-sizing:border-box;border:2px solid var(--cb-color-primary-500);border-radius:2px;pointer-events:none}.cb-editor__img-handle{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border:2px solid var(--cb-color-surface);border-radius:2px;background:var(--cb-color-primary-500);cursor:nwse-resize;pointer-events:auto;touch-action:none}:host ::ng-deep .cb-editor__surface table{width:100%;margin:var(--cb-space-2) 0;border-collapse:collapse;table-layout:fixed}:host ::ng-deep .cb-editor__surface th,:host ::ng-deep .cb-editor__surface td{min-width:2rem;padding:.35rem .5rem;vertical-align:top;word-break:break-word;outline:1px dashed color-mix(in srgb,var(--cb-color-text-muted) 45%,transparent);outline-offset:-1px}:host ::ng-deep .cb-editor__surface th[style*=border],:host ::ng-deep .cb-editor__surface td[style*=border]{outline:none}:host ::ng-deep .cb-editor__surface th{font-weight:var(--cb-font-weight-semibold, 600);text-align:left}:host(.cb-is-readonly) ::ng-deep .cb-editor__surface th,:host(.cb-is-readonly) ::ng-deep .cb-editor__surface td{outline:none}:host ::ng-deep .cb-editor__surface pre code{padding:0;background:transparent;color:inherit;font-size:inherit}:host ::ng-deep .cb-editor__surface pre[data-language]:before{content:attr(data-language);float:right;margin:-.25rem -.25rem 0 .5rem;font-family:var(--cb-font-sans);font-size:.7rem;opacity:.6}.cb-editor__group{display:inline-flex;align-items:center;gap:.2rem}.cb-editor__group-label{margin-right:.15rem;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted)}.cb-editor__tool--labeled{width:auto;gap:.3rem;padding:0 .45rem;font:inherit;font-size:var(--cb-text-xs);white-space:nowrap}.cb-editor__picker-panel{align-items:flex-start}.cb-editor__picker{display:grid;gap:3px}.cb-editor__picker-row{display:flex;gap:3px}.cb-editor__picker-cell{width:1.1rem;height:1.1rem;padding:0;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:2px;background:var(--cb-color-surface);cursor:pointer}.cb-editor__picker-cell.cb-is-on{border-color:var(--cb-color-primary-600);background:color-mix(in srgb,var(--cb-color-primary-500) 35%,var(--cb-color-surface))}.cb-editor__picker-cell:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-editor__picker-side{display:grid;gap:var(--cb-space-2);align-content:start}.cb-editor__picker-size{font-weight:var(--cb-font-weight-semibold, 600);font-variant-numeric:tabular-nums}.cb-editor__crop{display:grid;gap:var(--cb-space-2);padding:var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:var(--cb-color-surface-subtle, var(--cb-color-surface))}.cb-editor__crop-stage{position:relative;justify-self:center;max-width:100%;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:none}.cb-editor__crop-img{display:block;max-width:100%;max-height:22rem}.cb-editor__crop-box{position:absolute;box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 9999px #0000008c;cursor:move;outline:none}.cb-editor__crop-box:focus-visible{border-color:var(--cb-color-focus-ring)}.cb-editor__crop-handle{position:absolute;width:14px;height:14px;border:2px solid var(--cb-color-primary-600);border-radius:2px;background:#fff}.cb-editor__crop-handle--nw{left:-8px;top:-8px;cursor:nwse-resize}.cb-editor__crop-handle--ne{right:-8px;top:-8px;cursor:nesw-resize}.cb-editor__crop-handle--sw{left:-8px;bottom:-8px;cursor:nesw-resize}.cb-editor__crop-handle--se{right:-8px;bottom:-8px;cursor:nwse-resize}.cb-editor__crop-help{margin:0;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__crop-spacer{flex:1}.cb-editor__btn.cb-is-active{border-color:var(--cb-color-primary-600);color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,var(--cb-color-surface))}.cb-editor__crop .cb-editor__link-actions{display:flex;flex-wrap:wrap}.cb-editor__select--size{width:7.5rem}.cb-editor__menu-wrap{position:relative;display:inline-flex}.cb-editor__menu-trigger{position:relative;width:auto;gap:1px;padding:0 .25rem}.cb-editor__color-bar{position:absolute;left:.35rem;right:1rem;bottom:.2rem;height:3px;border-radius:1px}.cb-editor__caret{opacity:.7}.cb-editor__menu{position:absolute;top:calc(100% + 4px);left:0;z-index:10;display:grid;gap:2px;min-width:12rem;padding:.35rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12))}.cb-editor__menu-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.4rem .5rem;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-sm);text-align:left;cursor:pointer}.cb-editor__menu-item:hover,.cb-editor__menu-item:focus-visible{background:var(--cb-color-surface-hover);outline:none}.cb-editor__menu-item:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring)}.cb-editor__menu-item[aria-checked=true]{font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-primary-700)}.cb-editor__kbd{margin-left:auto;font-family:var(--cb-font-sans);font-size:var(--cb-text-xs);color:var(--cb-color-text-muted)}.cb-editor__swatches{display:grid;grid-template-columns:repeat(5,1.6rem);gap:.35rem;padding:.25rem}.cb-editor__swatch{width:1.6rem;height:1.6rem;padding:0;border:1px solid rgb(0 0 0 / .15);border-radius:var(--cb-radius-sm);cursor:pointer}.cb-editor__swatch:hover{transform:scale(1.1)}.cb-editor__swatch:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-editor__swatch--none{display:inline-block;width:1rem;height:1rem;background:linear-gradient(135deg,transparent 45%,var(--cb-color-danger-500) 45% 55%,transparent 55%),var(--cb-color-surface)}.cb-editor__surface{resize:vertical}:host(.cb-is-readonly) .cb-editor__surface{resize:none}:host(.cb-is-fullscreen){position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;border-radius:0}:host(.cb-is-fullscreen) .cb-editor__body{flex:1;min-height:0;display:flex;flex-direction:column}:host(.cb-is-fullscreen) .cb-editor__surface{flex:1;resize:none;max-width:60rem;width:100%;margin:0 auto}:host ::ng-deep .cb-editor__surface h4{margin:.75rem 0 .35rem;font-size:1rem}:host ::ng-deep .cb-editor__surface ul[data-type=taskList]{padding-left:.25rem;list-style:none}:host ::ng-deep .cb-editor__surface ul[data-type=taskList]>li{position:relative;padding-left:1.75rem}:host ::ng-deep .cb-editor__surface ul[data-type=taskList]>li:before{content:\"\";position:absolute;left:0;top:.3em;box-sizing:border-box;width:1.05rem;height:1.05rem;border:1.5px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:3px;background:var(--cb-color-surface);cursor:pointer}:host ::ng-deep .cb-editor__surface ul[data-type=taskList]>li[data-checked=true]:before{content:\"\\2713\";display:grid;place-items:center;border-color:var(--cb-color-primary-600);background:var(--cb-color-primary-700, #047857);color:#fff;font-size:.75rem;font-weight:700;line-height:1}:host ::ng-deep .cb-editor__surface ul[data-type=taskList]>li[data-checked=true]{color:var(--cb-color-text-muted);text-decoration:line-through}.cb-editor__menu--chars{left:auto;right:0;width:max-content;max-height:18rem;overflow-y:auto}.cb-editor__chars-label{display:block;padding:.35rem .25rem .15rem;font-size:var(--cb-text-xs);font-weight:var(--cb-font-weight-semibold, 600);color:var(--cb-color-text-muted)}.cb-editor__chars{display:grid;grid-template-columns:repeat(8,2rem);gap:2px}.cb-editor__char{width:2rem;height:2rem;padding:0;border:none;border-radius:var(--cb-radius-sm);background:transparent;color:var(--cb-color-text);font-size:1.05rem;line-height:1;cursor:pointer}.cb-editor__char:hover,.cb-editor__char:focus-visible{background:var(--cb-color-surface-hover);outline:none}.cb-editor__char:focus-visible{box-shadow:inset 0 0 0 2px var(--cb-color-focus-ring)}.cb-editor__find{align-items:flex-end}.cb-editor__find-options{display:inline-flex;align-items:center;gap:.2rem;min-height:2rem}.cb-editor__find-count{min-width:5.5rem;padding:0 .35rem;font-size:var(--cb-text-xs);color:var(--cb-color-text-muted);font-variant-numeric:tabular-nums;text-align:center}.cb-editor__find .cb-editor__link-actions{align-items:center}.cb-editor__bubble{position:absolute;z-index:4;display:flex;gap:2px;padding:.2rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12));transform:translate(-50%,calc(-100% - 6px))}.cb-editor__bubble--below{transform:translate(-50%,6px)}.cb-editor__slash{position:absolute;z-index:4;display:grid;gap:1px;width:15rem;max-height:17rem;margin-top:4px;padding:.3rem;overflow-y:auto;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-md, 0 8px 24px rgb(0 0 0 / .12))}.cb-editor__slash-item{display:flex;align-items:center;gap:.55rem;padding:.4rem .5rem;border-radius:var(--cb-radius-sm);font-size:var(--cb-text-sm);cursor:pointer}.cb-editor__slash-item:hover{background:var(--cb-color-surface-hover)}.cb-editor__slash-item.cb-is-active{color:var(--cb-color-primary-700);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent)}:host-context([data-theme=\"dark\"]) .cb-editor__slash-item.cb-is-active{color:var(--cb-color-primary-300)}@media(forced-colors:active){.cb-editor__slash-item.cb-is-active{outline:2px solid Highlight}}:host ::ng-deep .cb-editor__surface figure{margin:.5em 0}:host ::ng-deep .cb-editor__surface figure img{display:block;max-width:100%}:host ::ng-deep .cb-editor__surface figcaption{padding-top:.35rem;color:var(--cb-color-text-muted);font-size:.875em;text-align:center}:host ::ng-deep .cb-editor__surface figcaption:empty:before,:host ::ng-deep .cb-editor__surface figcaption:has(>br:only-child):before{content:attr(data-placeholder)}:host ::ng-deep .cb-editor__surface details{margin:.5em 0;padding:.35rem .75rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md)}:host ::ng-deep .cb-editor__surface summary{font-weight:var(--cb-font-weight-semibold);cursor:pointer}:host ::ng-deep .cb-editor__surface details[open]>summary{margin-bottom:.35rem}:host ::ng-deep .cb-editor__surface nav[data-type=toc]{margin:.5em 0;padding:.5rem .9rem;border-left:3px solid var(--cb-color-primary-400, var(--cb-color-border));border-radius:0 var(--cb-radius-md) var(--cb-radius-md) 0;background:color-mix(in srgb,var(--cb-color-primary-500) 5%,transparent);-webkit-user-select:none;user-select:none}:host ::ng-deep .cb-editor__surface nav[data-type=toc] p{margin:0 0 .25rem}:host ::ng-deep .cb-editor__surface nav[data-type=toc] ol{margin:0;padding-left:1.25rem}:host ::ng-deep .cb-editor__surface nav[data-type=toc] a{cursor:pointer}:host ::ng-deep .cb-editor__surface [data-mention]{padding:0 .2rem;border-radius:var(--cb-radius-sm);background:color-mix(in srgb,var(--cb-color-primary-500) 14%,transparent);color:var(--cb-color-primary-700);font-weight:var(--cb-font-weight-medium);white-space:nowrap}:host-context([data-theme=\"dark\"]) ::ng-deep .cb-editor__surface [data-mention]{color:var(--cb-color-primary-300)}.cb-editor__mentions{width:17rem}.cb-editor__mention-label{font-weight:var(--cb-font-weight-medium)}.cb-editor__mention-desc{margin-left:auto;overflow:hidden;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs);text-overflow:ellipsis;white-space:nowrap}.cb-editor__draft{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:var(--cb-space-2) var(--cb-space-3);border-bottom:var(--cb-border-width) solid var(--cb-color-border);background:color-mix(in srgb,var(--cb-color-warning-500, #f59e0b) 12%,var(--cb-color-surface));font-size:var(--cb-text-sm)}.cb-editor__draft>span{flex:1 1 14rem}.cb-editor__saved{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], wordCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "wordCount", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], toolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolbar", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }], imageUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUpload", required: false }] }], maxImageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxImageSize", required: false }] }], pastePlainText: [{ type: i0.Input, args: [{ isSignal: true, alias: "pastePlainText", required: false }] }], fonts: [{ type: i0.Input, args: [{ isSignal: true, alias: "fonts", required: false }] }], fontsHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontsHref", required: false }] }], bubbleMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "bubbleMenu", required: false }] }], slashCommands: [{ type: i0.Input, args: [{ isSignal: true, alias: "slashCommands", required: false }] }], autolink: [{ type: i0.Input, args: [{ isSignal: true, alias: "autolink", required: false }] }], typography: [{ type: i0.Input, args: [{ isSignal: true, alias: "typography", required: false }] }], mentions: [{ type: i0.Input, args: [{ isSignal: true, alias: "mentions", required: false }] }], autosaveKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "autosaveKey", required: false }] }], autosaveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autosaveDelay", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mentionAdd: [{ type: i0.Output, args: ["mentionAdd"] }], imageError: [{ type: i0.Output, args: ["imageError"] }], findInputRef: [{ type: i0.ViewChild, args: ['findInput', { isSignal: true }] }], surfaceRef: [{ type: i0.ViewChild, args: ['surface', { isSignal: true }] }], imageInputRef: [{ type: i0.ViewChild, args: ['imageInput', { isSignal: true }] }], toolbarRef: [{ type: i0.ViewChild, args: ['toolbar', { isSignal: true }] }], linkInputRef: [{ type: i0.ViewChild, args: ['linkInput', { isSignal: true }] }], bodyRef: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }], tableRowsRef: [{ type: i0.ViewChild, args: ['tableRows', { isSignal: true }] }], tableColsRef: [{ type: i0.ViewChild, args: ['tableCols', { isSignal: true }] }], tableHeaderRef: [{ type: i0.ViewChild, args: ['tableHeader', { isSignal: true }] }], altInputRef: [{ type: i0.ViewChild, args: ['altInput', { isSignal: true }] }], cropStageRef: [{ type: i0.ViewChild, args: ['cropStage', { isSignal: true }] }] } });
+/** Índices y menciones no se editan letra a letra (el atributo no se guarda en el HTML). */
+function decorate(root) {
+    for (const el of Array.from(root.querySelectorAll('nav[data-type="toc"], span[data-mention]')))
+        el.setAttribute('contenteditable', 'false');
+}
 /** Añade una hoja de estilos al documento una sola vez. */
 function loadStylesheet(doc, href) {
     if (!doc.head || Array.from(doc.head.querySelectorAll('link[data-cb-editor-fonts]')).some((l) => l.getAttribute('href') === href))