API Reference

co-rich-text-editor

shadow: false · scoped: false — light DOM. ProseMirror controla el DOM editable de forma imperativa.

Props

Prop	Atributo	Tipo	Default	Descripción
`accountFonts`	`account-fonts`	`string \| undefined \| { label: string; value: string; }[]`	`—`	Account/imported fonts shown in a separate "Imported fonts" section. JS property: `Array<{ label: string; value: string }>`. HTML attribute: JSON string of the same array.
`autofocus`	`autofocus`	`boolean`	`false`
`customExtensions`	—	`object[] \| undefined`	`—`	Extra Tiptap extensions appended to the preset (JS property only). Registered at editor creation — required for new schema nodes (images, tables, embeds, …) that `getEditorInstance()` cannot add afterwards.
`disabled`	`disabled`	`boolean`	`false`
`features`	`features`	`object \| string \| undefined`	`—`	Feature overrides (JSON string for HTML attr, or object via JS property).
`fontFamilies`	`font-families`	`string \| undefined \| { label: string; value: string; }[]`	`—`	Font families available in the bubble menu font selector. JS property: `Array<{ label: string; value: string }>`. HTML attribute: JSON string of the same array. If not provided, a default list of system fonts is used.
`fontLoader`	—	`(() => Promise<{ label: string; value: string; url?: string \| undefined; }[]>) \| undefined`	`—`	Async callback that loads account/imported fonts. Called once when the font dropdown opens for the first time. Must return `Array<{ label: string; value: string; url?: string }>`. If `url` is provided, the font is registered via FontFace API. JS property only — cannot be set via HTML attribute.
`fontsLoading`	`fonts-loading`	`boolean \| undefined`	`—`	Whether account fonts are currently loading.
`helperText`	`helper-text`	`string \| undefined`	`—`
`imageUpload`	—	`((file: File) => Promise<string>) \| undefined`	`—`	Host image upload handler (JS property): `(file) => Promise<url>`.
`label`	`label`	`string \| undefined`	`—`
`locale`	`locale`	`string`	`'en'`	BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English.
`maxLength`	`max-length`	`number \| undefined`	`—`
`placeholder`	`placeholder`	`string`	`''`
`preset`	`preset`	`"comment" \| "document" \| "email" \| "task"`	`'task'`	Preset controlling allowed nodes/marks, toolbar and sanitization.
`readonly`	`readonly`	`boolean`	`false`
`required`	`required`	`boolean`	`false`
`secondaryLabel`	`secondary-label`	`string \| undefined`	`—`
`showCharacterCount`	`show-character-count`	`boolean`	`false`
`status`	`status`	`"default" \| "error" \| "info" \| "success" \| "warning"`	`'default'`
`toolbar`	`toolbar`	`"auto" \| "basic" \| "compact" \| "full" \| "none"`	`'auto'`	Toolbar layout. `auto` uses the preset default.
`value`	`value`	`null \| string`	`null`	ProseMirror document as a JSON string. `null`/empty = empty editor.

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coBlur`	`void`	✓	✓
`coChange`	`RichTextOutput`	✓	✓	Emitted on blur (committed value).
`coClear`	`void`	✓	✓
`coFocus`	`void`	✓	✓
`coFontPopupHide`	`void`	✓	✓	Emitted when the font dropdown closes.
`coFontPopupShow`	`void`	✓	✓	Emitted when the font dropdown opens — host should load account fonts.
`coInput`	`RichTextOutput`	✓	✓	Emitted on every keystroke.
`coReady`	`void`	✓	✓	Emitted once the editor is mounted and ready.

Slots

Este componente no expone slots.

CSS Parts

Part	Descripción
`::part(content)`	Editable ProseMirror surface
`::part(helper)`	Helper text row
`::part(label)`	Field label
`::part(toolbar)`	Formatting toolbar
`::part(wrapper)`	Outer container

CSS Custom Properties

Este componente no expone CSS custom properties.

Props JS-only

Estas propiedades solo pueden asignarse vía JavaScript (no como atributos HTML):

Prop	Tipo	Descripción
`customExtensions`	`Extension[]`	Extensiones Tiptap adicionales (schema nuevo)
`imageUpload`	`(file: File) => Promise<string>`	Handler de subida de imágenes a CDN
`fontLoader`	`() => Promise<FontEntry[]>`	Callback async para cargar fuentes de cuenta

Métodos imperativos

Método	Retorno	Descripción
`getJSON()`	`Promise<object \| null>`	Documento ProseMirror JSON, o `null` si vacío
`getHtml()`	`Promise<string>`	HTML sanitizado
`getText()`	`Promise<string>`	Texto plano
`clear()`	`Promise<void>`	Limpia el contenido y emite `coClear`
`focusEditor()`	`Promise<void>`	Foca el editor programáticamente
`setContent(content)`	`Promise<void>`	Establece contenido (HTML string u objeto JSON)
`getEditorInstance()`	`Promise<Editor \| null>`	Instancia Tiptap — escape hatch para control avanzado

Eventos

Evento	Payload	Cuándo
`coInput`	`{ json, html, text }`	Cada cambio (keystroke)
`coChange`	`{ json, html, text }`	Al perder foco (valor confirmado)
`coFocus`	`void`	Al ganar foco
`coBlur`	`void`	Al perder foco
`coClear`	`void`	Después de `clear()`
`coReady`	`void`	Editor montado y listo
`coFontPopupShow`	`void`	Se abrió el selector de fuentes
`coFontPopupHide`	`void`	Se cerró el selector de fuentes

co-rich-text-viewer

shadow: true

Props

Prop	Atributo	Tipo	Default	Descripción
`compact`	`compact`	`boolean`	`false`	Reduced padding.
`emptyText`	`empty-text`	`string \| undefined`	`—`	Text shown when there is no content.
`format`	`format`	`"html" \| "json"`	`'html'`	Input format. `html` is the lightweight path.
`preset`	`preset`	`"comment" \| "document" \| "email" \| "task"`	`'document'`	Sanitization profile to apply.
`value`	`value`	`null \| string`	`null`	HTML string (default) or ProseMirror JSON string.

Eventos

Este componente no emite eventos personalizados.

Slots

Este componente no expone slots.

CSS Parts

Part	Descripción
`::part(content)`
`::part(empty)`

CSS Custom Properties

Este componente no expone CSS custom properties.

shadow: true — normalmente renderizado internamente por el editor.

Props

Prop	Atributo	Tipo	Default	Descripción
`disabled`	`disabled`	`boolean`	`false`
`editor`	—	`Editor \| undefined`	`—`	Editor instance (set as a property by the host editor).
`imageUpload`	—	`((file: File) => Promise<any>) \| undefined`	`—`	Image upload handler (JS property): `(file) => Promise<url \| {src, fileId}>`.
`locale`	`locale`	`string`	`'en'`	BCP-47 locale for UI strings (e.g. 'en', 'es-CO', 'pt-BR'). Default English.
`variant`	`variant`	`"basic" \| "compact" \| "full" \| "none"`	`'basic'`	Toolbar layout variant.

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coAction`	`{ action: string; payload?: unknown; }`	✓	✓	Emitted whenever a toolbar action runs (observability for hosts).
`coPopoverChange`	`{ open: boolean; }`	✓	✓	Emitted when a toolbar popover/dropdown opens or closes (host hides the selection bubble while one is open to avoid spatial overlap).

Slots

Este componente no expone slots.

CSS Parts

Part	Descripción
`::part(button)`	A toolbar button
`::part(toolbar)`	The toolbar container

CSS Custom Properties

Este componente no expone CSS custom properties.

Evento	Payload	Descripción
`coAction`	`{ action: string; payload?: unknown }`	Se ejecutó una acción de toolbar
`coPopoverChange`	`{ open: boolean }`	Un popover/dropdown se abrió o cerró

Package API — `@prolibu-suite/cobalt-rich-text`

Editor

import { createEditor } from '@prolibu-suite/cobalt-rich-text';

const editor = createEditor({
  preset: 'task',
  element: document.getElementById('editor'),
  content: null,
  editable: true,
  placeholder: 'Escribe aquí…',
  maxLength: 5000,
  features: { variables: true },
  imageUpload: async (file) => uploadToCDN(file),
  onUpdate: ({ editor }) => { /* ... */ },
  onFocus: () => { /* ... */ },
  onBlur: () => { /* ... */ },
});

Presets

import {
  getExtensions,
  defaultToolbarForPreset,
  maxLengthForPreset,
  PRESETS,
} from '@prolibu-suite/cobalt-rich-text';

const exts = getExtensions('email', {
  placeholder: 'Escribe tu email…',
  features: { variables: true, mentions: true },
});

defaultToolbarForPreset('task');   // 'basic'
maxLengthForPreset('comment');     // 2000
PRESETS;                           // ['comment', 'task', 'email', 'document']

Serializadores

import { jsonToHtml, htmlToJson, jsonToText } from '@prolibu-suite/cobalt-rich-text';

const html = jsonToHtml(prosemirrorDoc, 'task');   // HTML sanitizado
const json = htmlToJson(htmlString, 'task');        // sanitiza antes de parsear
const text = jsonToText(prosemirrorDoc);            // texto plano

Sanitizador

import { sanitize, SANITIZE_CONFIGS } from '@prolibu-suite/cobalt-rich-text';

const clean = sanitize(dirtyHtml, 'email');

Tipos

import type {
  RichTextPreset,       // 'comment' | 'task' | 'email' | 'document'
  ToolbarVariant,       // 'none' | 'compact' | 'basic' | 'full'
  RichTextOutput,       // { json: object; html: string; text: string }
  RichTextFeatures,     // { mentions?, variables?, image?, characterCount?, link? }
  CreateEditorOptions,
  ImageUploadHandler,
} from '@prolibu-suite/cobalt-rich-text';

API Reference

co-rich-text-editor

Props

Eventos

Slots

CSS Parts

CSS Custom Properties

Props JS-only

Métodos imperativos

Eventos

co-rich-text-viewer

Props

Eventos

Slots

CSS Parts

CSS Custom Properties

co-rich-text-toolbar

Props

Eventos

Slots

CSS Parts

CSS Custom Properties

Eventos de toolbar

Package API — @prolibu-suite/cobalt-rich-text

Editor

Presets

Serializadores

Sanitizador

Tipos

Package API — `@prolibu-suite/cobalt-rich-text`