@prolibu-suite/cobalt-core 0.10.4 → 0.11.1

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import * as RichText from "@prolibu-suite/cobalt-rich-text";
 import { getRichTextStrings } from "../../utils/richTextI18n";
+import { applyExternalValue, buildOutput, EchoGuard, parseEditorValue, parseFeatures, syncImageLayouts, syncToolbarEditor } from "../../utils/rich-text-host";
 /**
  * Rich text editor backed by Tiptap v3.
  *
@@ -8,11 +9,19 @@ import { getRichTextStrings } from "../../utils/richTextI18n";
  * ProseMirror builds its editable DOM imperatively — Stencil's scoped CSS would
  * never reach it. All styles live in light DOM via BEM + `--co-*` tokens.
  *
+ * Editor de texto enriquecido configurado por `preset` (tarea, comentario,
+ * notas, email, documento, impresión). Wrapper Vue: `CoRichTextEditor` de
+ * `@prolibu-suite/cobalt-vue`.
+ *
+ * @slot content-end - Zona entre el contenido y la barra inferior (adjuntos pendientes, vistas previas). Siempre montar el hijo y ocultarlo con CSS.
+ * @slot toolbar-end - Al final de la fila de la barra cuando `toolbarPosition="bottom"` (p. ej. el botón «Enviar»). Siempre montar el hijo.
+ *
  * @part wrapper - Outer container
  * @part toolbar - Formatting toolbar
  * @part content - Editable ProseMirror surface
  * @part label - Field label
  * @part helper - Helper text row
+ * @part toolbar-row - Fila de la barra inferior (`toolbarPosition="bottom"`) con el slot `toolbar-end`.
  */
 export class CoRichTextEditor {
     constructor() {
@@ -20,7 +29,9 @@ export class CoRichTextEditor {
         this.value = null;
         /** Preset controlling allowed nodes/marks, toolbar and sanitization. */
         this.preset = 'task';
+        /** Texto de ayuda del editor vacío. */
         this.placeholder = '';
+        /** Estado de validación: pinta el borde y el `helperText` con el color del estado. */
         this.status = 'default';
         /** Visual style. `flat` strips the frame's border and background so it
          *  reads as plain content instead of a boxed control — padding, label,
@@ -30,10 +41,15 @@ export class CoRichTextEditor {
          *  outer box is gone. `default` (the standard bordered box) renders
          *  identically to before this prop existed. */
         this.variant = 'default';
+        /** Deshabilita el editor. */
         this.disabled = false;
+        /** Solo lectura: sin barra ni edición; `coChange` sale en el acto (p. ej. al marcar una casilla de task-list). */
         this.readonly = false;
+        /** Campo obligatorio (marca de requerido en la etiqueta). */
         this.required = false;
+        /** Muestra el contador de caracteres aunque no haya `maxLength`. */
         this.showCharacterCount = false;
+        /** Enfoca el editor al montarse. */
         this.autofocus = false;
         /** Toolbar layout. `auto` uses the preset default. */
         this.toolbar = 'auto';
@@ -63,10 +79,8 @@ export class CoRichTextEditor {
         this._loadedAccountFonts = [];
         this._fontLoaderCalled = false;
         this._fontLoaderLoading = false;
-        /** Last emitted JSON string — guards the value Watch against feedback loops. */
-        this.lastEmittedJson = null;
-        /** Last emitted HTML string — parents often send HTML back via value prop. */
-        this.lastEmittedHtml = '';
+        /** Guarda anti-eco compartida (utils/rich-text-host). */
+        this.echo = new EchoGuard();
         /** True while applying an external value (suppresses emit). */
         this.applyingExternal = false;
         this.rt = RichText;
@@ -76,15 +90,10 @@ export class CoRichTextEditor {
             if (this.applyingExternal)
                 return;
             const out = this.buildOutput(editor);
-            // Track both JSON and HTML forms to prevent feedback loops.
-            // The parent may send back either format via the value prop.
-            this.lastEmittedJson = out.json ? JSON.stringify(out.json) : null;
-            this.lastEmittedHtml = out.html;
-            // Do NOT set this.value here — it triggers unnecessary Stencil re-renders
-            // and the Watch cycle. The parent is the source of truth for the value prop.
+            this.echo.markEmitted(out);
+            // No se asigna this.value: dispararía re-renders y el Watch. El padre es la fuente de verdad.
             this.coInput.emit(out);
-            // In readonly mode there's no blur cycle, so commit immediately
-            // (e.g. task-list checkbox toggled by onReadOnlyChecked).
+            // En readonly no hay ciclo de blur: se confirma en el acto (p. ej. checkbox de task-list).
             if (this.readonly)
                 this.coChange.emit(out);
         };
@@ -123,7 +132,7 @@ export class CoRichTextEditor {
         this.editor = this.rt.createEditor({
             preset: this.preset,
             element: this.contentEl,
-            content: this.parseValue(this.value),
+            content: parseEditorValue(this.value),
             editable: !this.disabled && !this.readonly,
             placeholder: this.placeholder,
             maxLength: this.maxLength,
@@ -176,7 +185,7 @@ export class CoRichTextEditor {
                 this.suppressBubble(!!open);
             });
         }
-        this.lastEmittedJson = (_b = this.value) !== null && _b !== void 0 ? _b : null;
+        this.echo.seed((_b = this.value) !== null && _b !== void 0 ? _b : null);
         this.ready = true;
         this.refreshCharCount();
         this.syncToolbar();
@@ -218,24 +227,17 @@ export class CoRichTextEditor {
         if (!this.editor || this.applyingExternal)
             return;
         const incoming = next !== null && next !== void 0 ? next : null;
-        // Skip if this value matches what we last emitted (JSON or HTML form).
-        // This prevents the destructive feedback loop where the parent sends
-        // back our own output and setContent resets the editor on every keystroke.
-        if (incoming === this.lastEmittedJson || incoming === this.lastEmittedHtml)
+        // El padre suele devolver nuestro propio output (JSON o HTML): re-aplicarlo
+        // reinicia el editor en cada tecla.
+        if (this.echo.isEcho(incoming))
             return;
         this.applyingExternal = true;
         try {
-            if (incoming === '' || incoming === null) {
-                this.editor.commands.clearContent(false);
-            }
-            else {
-                this.editor.commands.setContent(this.parseValue(next), { emitUpdate: false });
-            }
+            applyExternalValue(this.editor, incoming);
         }
         finally {
             this.applyingExternal = false;
-            this.lastEmittedJson = incoming;
-            this.lastEmittedHtml = '';
+            this.echo.seed(incoming);
             this.refreshCharCount();
         }
     }
@@ -244,30 +246,37 @@ export class CoRichTextEditor {
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditable(!this.disabled && !this.readonly);
     }
     /* ── Public methods (escape hatches + imperative control) ── */
+    /** Documento como JSON de ProseMirror, o `null` si está vacío. */
     async getJSON() {
         return this.editor && !this.editor.isEmpty ? this.editor.getJSON() : null;
     }
+    /** HTML sanitizado según el preset (`getHtml`, no `getHTML`, para no chocar con `HTMLElement`). */
     async getHtml() {
         return this.editor ? this.sanitizeHtml(this.editor.getHTML()) : '';
     }
+    /** Texto plano del documento. */
     async getText() {
         var _a, _b;
         return (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getText()) !== null && _b !== void 0 ? _b : '';
     }
+    /** Vacía el contenido y emite `coClear`. */
     async clear() {
         if (!this.editor)
             return;
         this.editor.commands.clearContent(true);
         this.coClear.emit();
     }
+    /** Enfoca el editor (`focusEditor`, no `focus`, para no chocar con `HTMLElement`). */
     async focusEditor() {
         var _a;
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.focus();
     }
+    /** Reemplaza el contenido: HTML (string) o JSON de ProseMirror. */
     async setContent(content) {
         var _a;
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.commands.setContent(content);
     }
+    /** Instancia Tiptap subyacente (escape hatch para control avanzado), o `null` antes de montar. */
     async getEditorInstance() {
         var _a;
         return (_a = this.editor) !== null && _a !== void 0 ? _a : null;
@@ -280,27 +289,7 @@ export class CoRichTextEditor {
         return (_a = f === null || f === void 0 ? void 0 : f.image) !== null && _a !== void 0 ? _a : this.preset === 'document';
     }
     get parsedFeatures() {
-        if (!this.features)
-            return undefined;
-        if (typeof this.features === 'string') {
-            try {
-                return JSON.parse(this.features);
-            }
-            catch (_a) {
-                return undefined;
-            }
-        }
-        return this.features;
-    }
-    parseValue(v) {
-        if (!v)
-            return '';
-        try {
-            return JSON.parse(v);
-        }
-        catch (_a) {
-            return v; // tolerate an HTML string
-        }
+        return parseFeatures(this.features);
     }
     sanitizeHtml(html) {
         // Con las MISMAS features que cargaron el schema: sin ellas, un <img> con
@@ -309,12 +298,7 @@ export class CoRichTextEditor {
         return this.rt.sanitize(html, this.preset, this.parsedFeatures);
     }
     buildOutput(editor) {
-        const empty = editor.isEmpty;
-        return {
-            json: empty ? null : editor.getJSON(),
-            html: empty ? '' : this.sanitizeHtml(editor.getHTML()),
-            text: editor.getText(),
-        };
+        return buildOutput(editor, (html) => this.sanitizeHtml(html));
     }
     /** Lock the bubble position so floating-ui doesn't reposition it. */
     lockBubblePosition(durationMs = 1000) {
@@ -423,12 +407,7 @@ export class CoRichTextEditor {
         }
     }
     syncToolbar() {
-        if (this.toolbarEl && this.editor && this.toolbarEl.editor !== this.editor) {
-            this.toolbarEl.editor = this.editor;
-        }
-        if (this.toolbarEl) {
-            this.toolbarEl.imageUpload = this.imageUpload;
-        }
+        syncToolbarEditor(this.toolbarEl, this.editor, this.imageUpload);
     }
     get resolvedToolbar() {
         if (this.toolbar !== 'auto')
@@ -1986,32 +1965,8 @@ export class CoRichTextEditor {
      * from state and write the attribute imperatively to the container.
      */
     syncImageLayouts() {
-        if (!this.editor)
-            return;
-        const view = this.editor.view;
-        this.editor.state.doc.descendants((node, pos) => {
-            var _a;
-            if (node.type.name !== 'image')
-                return true;
-            const dom = view.nodeDOM(pos);
-            const c = (((_a = dom === null || dom === void 0 ? void 0 : dom.closest) === null || _a === void 0 ? void 0 : _a.call(dom, '[data-resize-container]')) || dom);
-            if (!c)
-                return true;
-            const layout = node.attrs.imageLayout || 'inline';
-            c.dataset.imageLayout = layout;
-            // Neutralise any absolute positioning baked by the old fixed-page model.
-            c.style.position = '';
-            c.style.left = '';
-            c.style.top = '';
-            c.style.zIndex = '';
-            // The resize NodeView pins `display: inline-flex` INLINE on the container, which
-            // beats the stylesheet's `display: block` for `center` / `full-width`: the editor
-            // showed those images inline-left while the viewer (and the sent email) centred
-            // them (2026-09-17). Clear it for block layouts so the CSS rule can apply; the
-            // inline value is restored for flow layouts so the resize handles keep working.
-            c.style.display = layout === 'center' || layout === 'full-width' ? '' : 'inline-flex';
-            return true;
-        });
+        if (this.editor)
+            syncImageLayouts(this.editor);
     }
     /** Reposition only the layout bar (used during drag for performance). */
     updateImageLayoutBarPosition() {
@@ -2052,11 +2007,11 @@ export class CoRichTextEditor {
         const showToolbar = this.resolvedToolbar !== 'none' && !this.readonly && !this.disabled;
         const showCount = this.showCharacterCount || this.maxLength != null;
         const bottom = this.toolbarPosition === 'bottom';
-        const toolbar = showToolbar && (h("co-rich-text-toolbar", { key: '0df30a57a843cbcd967ffd254ae0e54bee448902', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, position: this.toolbarPosition, disabled: this.disabled || this.readonly, locale: this.locale, attachmentsEnabled: this.attachmentsEnabled, attachmentAccept: this.attachmentAccept, onCoAttachmentsSelected: (e) => {
+        const toolbar = showToolbar && (h("co-rich-text-toolbar", { key: '6bcb6ab2d8023c96062ce4aa64ef6450357c22e7', class: "co-rich-text-editor__toolbar", part: "toolbar", variant: this.resolvedToolbar, position: this.toolbarPosition, disabled: this.disabled || this.readonly, locale: this.locale, attachmentsEnabled: this.attachmentsEnabled, attachmentAccept: this.attachmentAccept, onCoAttachmentsSelected: (e) => {
                 e.stopPropagation();
                 this.coAttachmentsSelected.emit(e.detail);
             }, ref: (el) => (this.toolbarEl = el) }));
-        return (h("div", { key: '03be9df0d50d00a3cf889b3404c4f347626aa27c', class: {
+        return (h("div", { key: 'acb670aca986206aa8cae2960a9ace5723d5b710', class: {
                 'co-rich-text-editor': true,
                 'co-rich-text-editor--focused': this.hasFocus,
                 'co-rich-text-editor--disabled': this.disabled,
@@ -2065,7 +2020,7 @@ export class CoRichTextEditor {
                 [`co-rich-text-editor--${this.status}`]: this.status !== 'default',
                 'co-rich-text-editor--flat': this.variant === 'flat',
                 'co-rich-text-editor--toolbar-bottom': bottom,
-            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: 'ae732219465a376af19e771e63589c955be37c4b', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: 'd316724c4f4bcbf55adf582b8ad40c6c45fba407', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: '3cca63f6dfa2335dcd7122eb734205d4fd86a90f', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: '620bd101dd94684f7b2d533401717eeb7421593c', class: "co-rich-text-editor__frame" }, !bottom && toolbar, h("div", { key: 'a20f163022dd1c6e23dfc222786ddf0fc6f9b3ac', class: "co-rich-text-editor__box" }, h("div", { key: 'd678e095ae36610895cb466c1a15c722b46d4483', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) })), h("slot", { key: '62127cb0a34e7f43ceadcb20ef724aba0524fa69', name: "content-end" }), bottom && (h("div", { key: '99d574e7cbb2a115a243288b770cb03f1892ff93', class: "co-rich-text-editor__toolbar-row", part: "toolbar-row" }, toolbar, h("slot", { key: 'b9b971930ddda8d118c8b6d204fad8d41d25468e', name: "toolbar-end" })))), h("div", { key: 'caafa3f153192eee6efa7679dafa376dea69b150', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '8d2ab21ababab2c14c912f8ffd6945001fca62f7', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'b60df4c320b9356a87df39179c75360f91e858bf', name: this.helperIcon, size: 14 }), h("span", { key: 'd56108257c9bba2332e434d6240f4f387e2411f6' }, this.helperText))), showCount && (h("span", { key: '7973c2996e24ec991115fe4932915a9aefc1b495', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
+            }, part: "wrapper" }, (this.label || this.secondaryLabel) && (h("div", { key: '0bbda76dde378f9f9dc49593409036efa0306982', class: "co-rich-text-editor__labels" }, this.label && h("label", { key: '328d770182eeba4010337e32359f6e1f96c32e54', class: "co-rich-text-editor__label", part: "label" }, this.label), this.secondaryLabel && (h("span", { key: 'd8b3ac25a32189686226b9fe6da311f6672ca331', class: "co-rich-text-editor__secondary-label" }, this.secondaryLabel)))), h("div", { key: 'ed9d88e6e62a3defe9f302d252eb7f8dd33d4a0a', class: "co-rich-text-editor__frame" }, !bottom && toolbar, h("div", { key: '96625d0fbbc619e7a7f7812c83d1e86df8086da4', class: "co-rich-text-editor__box" }, h("div", { key: '77ce10f2902b9e758c18dabd5e91c5544c0cdd54', class: "co-rte-content", part: "content", role: "textbox", "aria-multiline": "true", "aria-label": this.label, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.status === 'error' ? 'true' : undefined, ref: (el) => (this.contentEl = el) })), h("slot", { key: '6c2fbaa3625889c4bb6a493be037f4c64b60fece', name: "content-end" }), bottom && (h("div", { key: 'eda6a58e138c36dc412a84aa995dfcbfd6d7e93f', class: "co-rich-text-editor__toolbar-row", part: "toolbar-row" }, toolbar, h("slot", { key: 'f8b01d2d2b27851d474bb174e4e42b45efd96758', name: "toolbar-end" })))), h("div", { key: 'fdffcf44d4d181d30cc6f48e073e3a18c18f48ca', class: "co-rich-text-editor__footer" }, this.helperText && (h("div", { key: '52ab70e42dad525b1fc1c4c27bdb98bedaf5cd90', class: `co-rich-text-editor__helper co-rich-text-editor__helper--${this.status}`, part: "helper" }, h("co-icon", { key: 'c7e79a0292c51c9cf7927eb504401be5fd68b767', name: this.helperIcon, size: 14 }), h("span", { key: '4a09b04c257f3cd605f9b753d12c118312cb65fc' }, this.helperText))), showCount && (h("span", { key: '7c25580b095af4d0ef11e77d13b07cedbf3e61c4', class: "co-rich-text-editor__count", ref: (el) => (this.charCountEl = el) }, this.charCount, this.maxLength != null ? ` / ${this.maxLength}` : '')))));
     }
     static get is() { return "co-rich-text-editor"; }
     static get originalStyleUrls() {
@@ -2105,7 +2060,7 @@ export class CoRichTextEditor {
                 "mutable": false,
                 "complexType": {
                     "original": "RichTextPreset",
-                    "resolved": "\"block-email\" | \"comment\" | \"document\" | \"email\" | \"notes\" | \"task\"",
+                    "resolved": "\"block-email\" | \"comment\" | \"document\" | \"email\" | \"notes\" | \"print\" | \"print-header\" | \"task\"",
                     "references": {
                         "RichTextPreset": {
                             "location": "import",
@@ -2139,7 +2094,7 @@ export class CoRichTextEditor {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto de ayuda del editor vac\u00EDo."
                 },
                 "getter": false,
                 "setter": false,
@@ -2159,7 +2114,7 @@ export class CoRichTextEditor {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Etiqueta del campo."
                 },
                 "getter": false,
                 "setter": false,
@@ -2178,7 +2133,7 @@ export class CoRichTextEditor {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto secundario junto a la etiqueta."
                 },
                 "getter": false,
                 "setter": false,
@@ -2197,7 +2152,7 @@ export class CoRichTextEditor {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Texto de ayuda o de error bajo el editor."
                 },
                 "getter": false,
                 "setter": false,
@@ -2216,7 +2171,7 @@ export class CoRichTextEditor {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Estado de validaci\u00F3n: pinta el borde y el `helperText` con el color del estado."
                 },
                 "getter": false,
                 "setter": false,
@@ -2256,7 +2211,7 @@ export class CoRichTextEditor {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Deshabilita el editor."
                 },
                 "getter": false,
                 "setter": false,
@@ -2276,7 +2231,7 @@ export class CoRichTextEditor {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Solo lectura: sin barra ni edici\u00F3n; `coChange` sale en el acto (p. ej. al marcar una casilla de task-list)."
                 },
                 "getter": false,
                 "setter": false,
@@ -2296,7 +2251,7 @@ export class CoRichTextEditor {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Campo obligatorio (marca de requerido en la etiqueta)."
                 },
                 "getter": false,
                 "setter": false,
@@ -2316,7 +2271,7 @@ export class CoRichTextEditor {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "L\u00EDmite de caracteres (sobrescribe el del preset); muestra el contador \u00ABn / max\u00BB."
                 },
                 "getter": false,
                 "setter": false,
@@ -2335,7 +2290,7 @@ export class CoRichTextEditor {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Muestra el contador de caracteres aunque no haya `maxLength`."
                 },
                 "getter": false,
                 "setter": false,
@@ -2355,7 +2310,7 @@ export class CoRichTextEditor {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Enfoca el editor al montarse."
                 },
                 "getter": false,
                 "setter": false,
@@ -2368,7 +2323,7 @@ export class CoRichTextEditor {
                 "mutable": false,
                 "complexType": {
                     "original": "ToolbarVariant",
-                    "resolved": "\"auto\" | \"basic\" | \"compact\" | \"compact-assets\" | \"email\" | \"full\" | \"none\" | \"notes\"",
+                    "resolved": "\"auto\" | \"basic\" | \"compact\" | \"compact-assets\" | \"document\" | \"email\" | \"full\" | \"none\" | \"notes\"",
                     "references": {
                         "ToolbarVariant": {
                             "location": "import",
@@ -2671,7 +2626,7 @@ export class CoRichTextEditor {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "El editor gan\u00F3 el foco."
                 },
                 "complexType": {
                     "original": "void",
@@ -2686,7 +2641,7 @@ export class CoRichTextEditor {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "El editor perdi\u00F3 el foco (lo sigue `coChange`)."
                 },
                 "complexType": {
                     "original": "void",
@@ -2701,7 +2656,7 @@ export class CoRichTextEditor {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Se vaci\u00F3 el contenido con `clear()`."
                 },
                 "complexType": {
                     "original": "void",
@@ -2790,7 +2745,7 @@ export class CoRichTextEditor {
                     "return": "Promise<object | null>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Documento como JSON de ProseMirror, o `null` si est\u00E1 vac\u00EDo.",
                     "tags": []
                 }
             },
@@ -2807,7 +2762,7 @@ export class CoRichTextEditor {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "HTML sanitizado seg\u00FAn el preset (`getHtml`, no `getHTML`, para no chocar con `HTMLElement`).",
                     "tags": []
                 }
             },
@@ -2824,7 +2779,7 @@ export class CoRichTextEditor {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Texto plano del documento.",
                     "tags": []
                 }
             },
@@ -2841,7 +2796,7 @@ export class CoRichTextEditor {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Vac\u00EDa el contenido y emite `coClear`.",
                     "tags": []
                 }
             },
@@ -2858,7 +2813,7 @@ export class CoRichTextEditor {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Enfoca el editor (`focusEditor`, no `focus`, para no chocar con `HTMLElement`).",
                     "tags": []
                 }
             },
@@ -2879,7 +2834,7 @@ export class CoRichTextEditor {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Reemplaza el contenido: HTML (string) o JSON de ProseMirror.",
                     "tags": []
                 }
             },
@@ -2902,7 +2857,7 @@ export class CoRichTextEditor {
                     "return": "Promise<Editor | null>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Instancia Tiptap subyacente (escape hatch para control avanzado), o `null` antes de montar.",
                     "tags": []
                 }
             }

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

@@ -895,3 +895,15 @@
   margin-top: 0;
   margin-bottom: var(--co-spacing-xs, 4px);
 }
+
+/* Botones del host (extraItems): llevan texto visible, así que no son icon-only. */
+.co-rich-text-toolbar__btn--extra {
+  width: auto;
+  gap: var(--co-spacing-xs);
+  padding-inline: var(--co-spacing-sm2);
+}
+
+.co-rich-text-toolbar__extra-label {
+  font-size: var(--co-font-size-13);
+  white-space: nowrap;
+}