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. |
| 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. |
| 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,
});