Referencia de API

Exportaciones públicas de @clepit/core. Cada símbolo a continuación incluye una firma tipada y un ejemplo de uso mínimo.

Editor

La clase de editor principal. Editor expone dos métodos estáticos públicos: create (la fábrica principal) y destroy. El método create() devuelve un objeto EditorAPI a través del cual se accede a todos los métodos de instancia después de montar el editor.

Método	Firma	Descripción
Editor.create	Editor.create(config: EditorConfig): EditorAPI	Crea una nueva instancia del editor y móntala en el elemento DOM con el containerId proporcionado.
Editor.destroy	Editor.destroy(containerId: string): void	El método destroy() en el objeto EditorAPI llama a Editor.destroy() para esta instancia.

Método	Firma	Descripción
data.extract	data.extract(): EditorData	Extrae los datos de bloques actuales de una instancia del editor como un EditorData seguro para JSON.
data.set	data.set(data: EditorData): void	Reemplaza toda la lista de bloques con un nuevo payload de datos. Desencadena un re-renderizado completo.
data.clear	data.clear(): void	Borra tanto el contenido de los bloques como los datos de estado persistidos.
data.clearContent	data.clearContent(): void	Elimina solo los bloques, dejando los datos del store intactos.
data.clearStorage	data.clearStorage(): void	Limpia solo los datos del store, sin tocar los bloques actuales.
blocks.insert	blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number, id?: string): HTMLElement \| null	Inserta un bloque en el index dado. Acepta la misma forma de datos que el tipo de bloque de destino.
blocks.convert	blocks.convert(blockId: string, newType: BlockToolType): void	Convierte un bloque a un nuevo tipo en el lugar.
blocks.remove	blocks.remove(index: number): void	Elimina el bloque en el index dado.
blocks.move	blocks.move(fromIndex: number, toIndex: number): void	Mueve un bloque de un índice a otro.
blocks.update	blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void	Actualiza los datos de un bloque existente en su lugar. El tipo no cambia.
blocks.get	blocks.get(blockId: string): EditorData['blocks'][number] \| null	Obtiene un bloque por su ID. Devuelve null si no se encuentra.
blocks.getAll	blocks.getAll(): EditorData['blocks']	Devuelve los datos de todos los bloques como un array.
blocks.count	blocks.count(): number	Devuelve el número de bloques en el editor.
focus	focus(): void	Mueve el foco al editor, enfocando el primer bloque.
blur	blur(): void	Elimina cualquier foco activo dentro del editor.
destroy	destroy(): void	El método destroy() en el objeto EditorAPI llama a Editor.destroy() para esta instancia.
selection.get	selection.get(): Selection \| null	Devuelve el objeto de selección de la ventana o null.
selection.set	selection.set(selection: Selection): void	Establece la selección de la ventana en el objeto Selection proporcionado.
selection.clear	selection.clear(): void	Elimina todos los rangos de la selección de la ventana.
ui.showBlockMenu	ui.showBlockMenu(block: HTMLElement): void	Muestra el menú de tipo de bloque para el elemento DOM de bloque dado.
ui.hideBlockMenu	ui.hideBlockMenu(): void	Oculta el menú de tipo de bloque si está abierto.
ui.showToolbar	ui.showToolbar(x: number, y: number): void	Muestra la barra de herramientas en línea en las coordenadas x, y del viewport proporcionadas.
ui.hideToolbar	ui.hideToolbar(): void	Oculta la barra de herramientas en línea si está visible.
view.getCurrentView	view.getCurrentView(containerId: string): EditorView \| null	Devuelve la vista actual (edit, preview o json) para el containerId dado.
view.switchView	view.switchView(containerId: string, view: EditorView): void	Cambia el editor a una vista especificada: edit, preview o json.

Ejemplo de uso típico

TypeScript

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

const editor = Editor.create({
  containerId: 'editor',
  theme: 'auto',
  placeholder: 'Start writing...',
  minHeight: 300,
});

// Insert a block
editor.blocks.insert('paragraph', { html: 'Hello world' }, 0);

// Extract data
const data = editor.data.extract();

// Switch view
editor.view.switchView('editor', 'preview');

// Tear down
editor.destroy();

Renderer

Una clase que convierte datos de bloques guardados en HTML de solo lectura dentro de un elemento DOM. Esta clase tiene un método estático público: render().

Método	Firma	Descripción
Renderer.render	Renderer.render(config: RendererConfig): HTMLElement	Renderiza el JSON de bloques guardado en un contenedor como HTML de solo lectura. Úsalo en cualquier lugar donde quieras mostrar contenido sin funciones de edición.

Ejemplo de uso típico

TypeScript

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

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

Renderizado en el servidor

Estas funciones corren sin DOM y sin navegador: dibujan cadenas HTML terminadas, así que funcionan en Node, runtimes edge y componentes de servidor. En React, @clepit/react las envuelve como ClepitContent.

Método	Firma	Descripción
renderBlocks	renderBlocks(blocks: Block[], context?: DrawContext): string	Dibuja un documento en una cadena HTML terminada, sin requerir DOM.
renderPage	renderPage(page: PublicPage, context?: DrawContext): string	Dibuja una página HTML pública completa para un documento: marcado, hoja de estilos, metadatos e ids de bloque navegables por ancla.
pageStylesheet	pageStylesheet(): string	Devuelve la hoja de estilos del marcado dibujado estáticamente, para servirla o insertarla junto a la salida de renderBlocks.
activateBlocks	activateBlocks(container: HTMLElement, blocks: readonly Block[]): () => void	Conecta los comportamientos interactivos al marcado dibujado en el servidor tras el montaje (pestañas de código, botones de copiar, pestañas de respuestas openapi, descarga CSV de tablas) y devuelve un liberador.
drawBlock	drawBlock(block: Block, backing: Backing, context?: DrawContext): ClepitElement \| null	Dibuja un bloque contra un backing; con el string backing dibuja sin DOM alguno.
tokensToLightDarkBlock	tokensToLightDarkBlock(light: ThemeTokens, dark: ThemeTokens, selector: string): string	Convierte un par de ThemeTokens claro y oscuro en un bloque de variables CSS light-dark() para un selector, para tematizar marcado estático sin un StyleManager vivo.

TypeScript

import { activateBlocks, pageStylesheet, renderBlocks } from '@clepit/core';

// On the server: finished HTML, no DOM needed
const html = renderBlocks(doc.blocks);
const css = pageStylesheet();

// In the browser, after mount: wire the interactive blocks
const dispose = activateBlocks(container, doc.blocks);

StyleManager

Una clase centralizada que gestiona el sistema de temas. Expone tres métodos estáticos públicos útiles para los consumidores: subscribe (para cambios de tema a nivel del sistema operativo), getResolvedTheme (para leer el tema actual del sistema operativo) e injectStyles (para inyectar CSS personalizado).

Método	Firma	Descripción
StyleManager.subscribe	StyleManager.subscribe(cb: (theme: 'light' \| 'dark') => void): () => void	Suscríbete a los cambios de tokens de tema en tiempo de ejecución. El listener se dispara cada vez que theme o themeOverrides cambian.
StyleManager.getResolvedTheme	StyleManager.getResolvedTheme(): 'light' \| 'dark'	Lee el tema actual del sistema operativo ("light" o "dark"). Devuelve "light" si matchMedia no está disponible.
StyleManager.injectStyles	StyleManager.injectStyles(styleId: string, styles: string): boolean	Inyecta una cadena CSS en document.head (usa un styleId único). Devuelve false si ya está presente, true en caso contrario.

Ejemplo de uso típico

TypeScript

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

// React to OS theme changes
const unsubscribe = StyleManager.subscribe(theme => {
  console.log('OS theme:', theme); // 'light' | 'dark'
});

// Read current OS theme
const current = StyleManager.getResolvedTheme();

// Inject custom CSS once
StyleManager.injectStyles('my-overrides', `
  .clepit-editor { font-family: 'Inter', sans-serif; }
`);

// Unsubscribe when done
unsubscribe();