Configuración

EditorConfig y RendererConfig son los puntos de entrada para toda personalización. Pase uno u otro a Editor.create() o Renderer.render() respectivamente. Solo containerId (y data para el renderer) son obligatorios; todas las demás opciones tienen valores predeterminados seguros.

EditorConfig

Pase EditorConfig como único argumento a Editor.create(). El containerId requerido debe coincidir con el id de un elemento DOM existente.

Opción	Tipo	Requerido	Descripción
containerId	string	Sí	ID del elemento DOM que alojará el editor. Debe existir en el DOM antes de que se llame a Editor.create().
maxHeight	number	No	Altura máxima del editor en píxeles. Establezca en 0 (el valor predeterminado) para no tener límite de altura.
minHeight	number	No	Altura mínima del editor en píxeles. Por defecto es 300.
onChange	(data: EditorData) => void	No	Callback que se activa cada vez que el documento cambia. Recibe la captura completa de EditorData.
onReady	() => void	No	Callback que se activa una vez que el editor está completamente inicializado y listo para aceptar llamadas API.
placeholder	string	No	Texto de marcador de posición que se muestra cuando el editor está vacío. Por defecto es 'Start writing...'.
initialData	EditorData	No	EditorData precargada para cargar cuando el editor se monta.
initialView	'edit' \| 'preview' \| 'json'	No	Modo de vista inicial. Uno de: edit, preview, json. Por defecto es 'edit'.
allowJsonViewEditing	boolean	No	Cuando es true, la vista JSON es editable y los cambios se propagan de vuelta al documento. Por defecto es false.
hasViewSwitcher	boolean	No	Cuando es false, los botones de editar, vista previa y JSON se quitan de la barra de acciones. Por defecto es true.
hasDocumentActions	boolean	No	Cuando es false, los botones de copiar, descargar y vaciar se quitan de la barra de acciones. Si hasViewSwitcher también es false, no se dibuja la barra de acciones. Por defecto es true.
onClearRequest	() => Promise<boolean>	No	Se llama al pulsar Vaciar. La página solo se vacía si se resuelve en true; un rechazo deja la página intacta. Si no se indica, Vaciar vacía al instante.
margins	BlockMargins	No	Margen superior e inferior global (en píxeles) aplicado a cada bloque. Las configuraciones por bloque tienen precedencia.
styles	EditorStyles	No	Objeto EditorStyles para personalización CSS detallada del chrome del editor (barras de herramientas, diálogos, controles).
classNames	EditorClassNames	No	Objeto EditorClassNames para adjuntar nombres de clases CSS a elementos del chrome del editor.
imageUploader	UploadFunction	No	Función asíncrona que sube un archivo de imagen y devuelve una cadena de URL pública.
audioUploader	UploadFunction	No	Función asíncrona que sube un archivo de audio y devuelve una cadena de URL pública.
videoUploader	UploadFunction	No	Función asíncrona que sube un archivo de vídeo y devuelve una cadena de URL pública.
fileUploader	UploadFunction	No	Función de subida que lleva los adjuntos del bloque de archivo a tu almacenamiento.
locale	string	No	La única locale que edita el editor. Los bloques multilingües se aplanan a esta locale.
defaultLocale	string	No	Locale de respaldo cuando un bloque no tiene contenido para la locale solicitada.
onLocaleFallback	(info: { blockId: string; locale: string }) => void	No	Se llama cuando un bloque cae a otra locale, para que el host muestre un indicador.
onInlineRewrite	(selection: string, action: InlineRewriteAction) => Promise<string \| null>	No	Función que reescribe el texto seleccionado con IA; si se define, la barra muestra el botón de reescritura.
inlineRewriteLabels	Partial<Record<InlineRewriteAction, string>>	No	Anula las etiquetas de las acciones del menú de reescritura, para localización.
inlineRewriteTooltip	string	No	Anula la descripción emergente de la varita de reescritura en la barra de herramientas en línea, para localización.
blockToolLabels	Partial<Record<BlockToolType, string>>	No	Anula las etiquetas de las herramientas de bloque en la caja y el menú slash, para localización.
blockToolbarLabels	Partial<Record<BlockToolbarLabel, string>>	No	Anula los textos de la barra de bloque (añadir, mover, eliminar y demás) y las indicaciones que se muestran en los campos de bloque vacíos, para localización.
controlLabels	Partial<Record<ControlLabel, string>>	No	Anula los nombres de los botones de la barra de acciones (editar, vista previa, JSON, copiar, descargar, vaciar), que se usan como nombres accesibles y descripciones emergentes, para localización.
dialogLabels	Partial<Record<DialogLabel, string>>	No	Las palabras de los diálogos de enlace, información emergente y estado, por nombre: títulos, etiquetas de campo, textos de ejemplo, estilos de estado, Cancelar y Aplicar. En inglés si no se indican.
resolveLink	(url: string) => Promise<Partial<EmbedData>>	No	Rellena la instantánea de un embed pegado desde tu servidor: título, archivo de Drive, archivos del gist o el motivo por el que no es posible la vista en directo. Una búsqueda que falla dibuja la tarjeta como si la herramienta no hubiera respondido, con Reintentar al lado.
onEmbedAction	(action: EmbedAction, blockId: string) => void	No	La solución junto al motivo de una tarjeta que solo el anfitrión puede realizar: connectGoogle envía al miembro a conectar su cuenta de Google; retry lo gestiona el propio editor.
disabledEmbedProviders	readonly string[]	No	Las herramientas de embed desactivadas por el espacio de trabajo, por clave (figma, miro, loom, google_drive, github_gist); sus enlaces se dibujan como tarjetas que dicen por qué.
pasteEmbeds	'live' \| 'offer' \| 'card'	No	Qué hace pegar un enlace compatible: mostrarlo en directo (por defecto), ofrecerlo o mostrar una tarjeta.
embedLabels	Partial<Record<EmbedLabel, string>>	No	Palabras traducidas para las líneas de motivo, acciones y etiquetas de gist del bloque embed, indexadas por EmbedLabel; inglés por defecto en otro caso.
resolveIssues	(urls: string[]) => Promise<Record<string, IssueSnapshot>>	No	Responde a los enlaces de incidencias de una página con sus instantáneas, indexadas por URL. Si falta, fichas y tarjetas conservan lo que el documento guardó y nada se actualiza.
onIssueAction	(action: IssueAction, tool: string) => void	No	La corrección junto a un motivo de incidencia que solo el anfitrión puede realizar: conectar la herramienta, lo que lleva a la página de Integraciones del anfitrión.
issueCards	'off' \| 'on'	No	Si un enlace de incidencia pegado en su propia línea se convierte en tarjeta; off si falta. Una ficha en una frase siempre es una ficha.
issueChip	{ assignee: boolean; status: boolean }	No	Los dos interruptores de ficha del miembro: la píldora de estado y el responsable. Ambos activos si falta.
issueLabels	Partial<Record<IssueLabel, string>>	No	Palabras traducidas para la ficha de incidencia, la tarjeta y la tabla de incidencias enlazadas, indexadas por IssueLabel; inglés por defecto en otro caso.
jiraSites	readonly string[]	No	Las URL de los sitios Jira que alcanzan las conexiones del espacio de trabajo, para que un enlace en el dominio propio de un sitio se reconozca como incidencia.
allowedBlockTools	readonly BlockToolType[]	No	Los tipos de bloque que el editor ofrece en el menú de bloques, su búsqueda, el menú de conversión y al pegar. Todos los bloques registrados si se omite; un bloque guardado fuera de la lista sigue mostrándose.
allowedInlineTools	readonly InlineToolType[]	No	Las marcas que ofrece la barra de herramientas en línea. Todas las marcas registradas si se omite.
theme	'auto' \| 'light' \| 'dark'	No	Esquema de colores. Uno de: auto (sigue el sistema), light, dark. Por defecto es auto.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	No	Sustituciones de tokens por modo. Proporcione mapas de tokens light y/o dark para personalizar colores sin reemplazar el tema completo.

TypeScript

import { Editor } from '@clepit/core';

const editor = Editor.create({
  containerId: 'editor',
  minHeight: 400,
  placeholder: 'Start writing...',
  theme: 'auto',
  onChange: data => console.log(data),
  onReady: () => console.log('Editor ready'),
  imageUploader: async file => {
    const form = new FormData();
    form.append('file', file);
    const res = await fetch('/api/upload', { body: form, method: 'POST' });
    const { url } = await res.json();
    return url;
  },
});

RendererConfig

Pase RendererConfig como único argumento a Renderer.render(). Tanto containerId como data son obligatorios.

Opción	Tipo	Requerido	Descripción
containerId	string	Sí	ID del elemento DOM donde se inyectará el resultado renderizado.
data	EditorData	Sí	El documento EditorData a renderizar. Obligatorio.
margins	BlockMargins	No	Margen superior e inferior global (en píxeles) aplicado a cada bloque renderizado.
styles	BlockStyles	No	Mapa BlockStyles para personalización CSS por tipo de bloque del output renderizado.
classNames	BlockClassNames	No	Mapa BlockClassNames para nombres de clases CSS por tipo de bloque en el output renderizado.
editorClassNames	EditorClassNames	No	EditorClassNames pasados a bloques que renderizan componentes interactivos (p.ej. classNames de tooltip para párrafos).
configs	Partial<BlockTypeOutputConfigs>	No	Mapa parcial de objetos OutputConfig por bloque. Cada entrada puede establecer márgenes a nivel de bloque y nombres de clases de tooltip.
theme	'auto' \| 'light' \| 'dark'	No	Esquema de colores. Uno de: auto, light, dark.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	No	Sustituciones de tokens por modo para el output renderizado.

TypeScript

import { Renderer } from '@clepit/core';
import type { EditorData } from '@clepit/core';

const data: EditorData = await fetch('/api/content/123').then(r => r.json());

Renderer.render({
  containerId: 'output',
  data,
  theme: 'auto',
  margins: { bottom: 16, top: 16 },
});

Estilo a nivel de bloque

Tanto EditorConfig como RendererConfig aceptan styles, classNames y configs indexados por tipo de bloque. Úselos para sustituciones específicas; consulte la página de Themes para la referencia completa por token.

TypeScript

import { Editor, Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames, EditorStyles } from '@clepit/core';

const editorStyles: EditorStyles = {
  blockToolbar: { container: { borderRadius: '8px' } },
};

const blockStyles: BlockStyles = {
  header: { h1: { fontFamily: 'Georgia, serif' } },
  paragraph: { lineHeight: '1.75' },
  table: { cell: { padding: '8px 12px' } },
};

const blockClassNames: BlockClassNames = {
  paragraph: 'prose-paragraph',
  header: { h1: 'prose-h1', h2: 'prose-h2' },
  alert: { info: 'alert-info', error: 'alert-error' },
};

Editor.create({
  containerId: 'editor',
  styles: editorStyles,
});

Renderer.render({
  containerId: 'output',
  data,
  styles: blockStyles,
  classNames: blockClassNames,
});

Referencia

Paquetes

Configuración

EditorConfig

RendererConfig

Estilo a nivel de bloque