Presets

Los presets controlan tres cosas a la vez: el schema (qué nodos/marks permite el editor), la toolbar (qué botones se muestran), y la sanitización (qué HTML sobrevive al guardar/renderizar).

Comparación

Preset	Nodos extra sobre base	Toolbar default	maxLength	Sanitización
comment	Solo base: paragraph, text, hardBreak, bold, italic, link	compact	2 000	Estricta
task	+ listas (con ListStyle), task lists (checklists), blockquote, underline, strike, code	basic	10 000	Moderada
email	+ heading(2–3), TextStyle, Color, TextAlign, ListStyle, variable	full	—	Email-safe
document	+ heading(1–4), hr, TextStyle, Color, variable, image (resizable, con fileId), task lists, tablas (resizable), YouTube, iframe (https-only), callouts, highlight multicolor, TextAlign, super/subscript, tipografía (fontSize/fontFamily/fontWeight/lineHeight/letterSpacing/indent), ListStyle	full	—	Moderada + img/tabla

Nota

Todos los presets usan StarterKit como base. Las sub-extensiones no deseadas se desactivan explícitamente por preset para mantener el schema y el sanitizador sincronizados.

Toolbar por variante

Puedes sobreescribir la toolbar del preset con el prop toolbar:

Variante	Botones
none	Sin toolbar
compact	bold, italic, link
basic	bold, italic, underline, bulletList, orderedList, link
full	dropdown de estilos, fuente y tamaño; bold, italic, underline, strike; color de texto y highlight; link, image, YouTube, iframe, tabla; alineación, interlineado, letter-spacing; list pickers (bullet/ordered/task) e indentación (−/+); blockquote, code block, hr; callout; undo, redo. Con el cursor dentro de una tabla se añaden los items contextuales de tabla.
auto	Usa la toolbar default del preset

<!-- Forzar toolbar completo en preset task -->
<co-rich-text-editor preset="task" toolbar="full"></co-rich-text-editor>

Features (overrides por preset)

El prop features permite activar/desactivar capacidades sin cambiar de preset:

<!-- Activar imágenes en el preset task -->
<co-rich-text-editor
  preset="task"
  features='{"image": true}'
></co-rich-text-editor>

interface RichTextFeatures {
  mentions?: boolean;       // Agrega MentionNode
  variables?: boolean;      // Agrega VariableNode (default true en email/document)
  image?: boolean;          // Agrega Image (default true en document)
  table?: boolean;          // Tablas (default true en document)
  youtube?: boolean;        // Embeds YouTube (default true en document)
  iframe?: boolean;         // iframe genérico https-only (default true en document)
  callout?: boolean;        // Bloques callout (default true en document)
  highlight?: boolean;      // Resaltado multicolor (default true en document)
  textAlign?: boolean;
  codeBlock?: boolean;
  characterCount?: number;  // Activa CharacterCount
  link?: boolean | {
    autolink?: boolean;
    openOnClick?: boolean;
  };
}

Precaución

features y customExtensions modifican el schema de ProseMirror, que se congela al crear el editor. No se pueden cambiar en runtime — requieren recrear el editor (desmontar y volver a montar el componente).

Cómo se construyen las extensiones

getExtensions(preset, opts) sigue este orden:

1. StarterKit.configure(STARTERKIT_CONFIG[preset]) — base con sub-extensiones on/off
2. TextStyle + Color si email/document
3. ListStyle (todos los presets salvo comment)
4. CobaltTaskList + CobaltTaskItem (task/document)
5. Tipografía FontSize/FontFamily/FontWeight/LineHeight/LetterSpacing/Indent + Superscript/Subscript (document)
6. TextAlign (document/email)
7. VariableNode si features.variables (default on en email/document)
8. MentionNode si features.mentions
9. Image (resizable, con fileId) si features.image (default on en document)
10. Table + TableRow/TableCell/TableHeader si features.table (default on en document)
11. ResizableYoutube si features.youtube (default on en document)
12. IframeEmbed si features.iframe (default on en document)
13. CalloutNode si features.callout y Highlight multicolor si features.highlight (defaults en document)
14. UI-only (si includeUiExtensions !== false): Placeholder, CharacterCount

Crear un nuevo preset

Para agregar un preset (ej. newsletter):

1. types.ts — agregar 'newsletter' al tipo RichTextPreset
2. presets.ts — agregar STARTERKIT_CONFIG.newsletter, PRESET_TOOLBAR.newsletter, PRESET_MAXLENGTH.newsletter, extras en getExtensions
3. sanitizer.ts — agregar newsletter a SANITIZE_CONFIGS
4. co-rich-text-viewer.tsx — replicar whitelist en su ALLOWED_TAGS/ALLOWED_ATTR local
5. Tests — agregar casos en presets.test.ts y sanitizer.test.ts

Peligro

Regla crítica: schema (presets) ↔ whitelist (sanitizer) ↔ viewer whitelist deben mantenerse siempre sincronizados. Un nodo permitido por el schema pero bloqueado por el sanitizador se perderá silenciosamente al guardar.