Saltar al contenido principal

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étodoFirmaDescripción
Editor.createEditor.create(config: EditorConfig): EditorAPICrea una nueva instancia del editor y móntala en el elemento DOM con el containerId proporcionado.
Editor.destroyEditor.destroy(containerId: string): voidEl método destroy() en el objeto EditorAPI llama a Editor.destroy() para esta instancia.
MétodoFirmaDescripción
data.extractdata.extract(): EditorDataExtrae los datos de bloques actuales de una instancia del editor como un EditorData seguro para JSON.
data.setdata.set(data: EditorData): voidReemplaza toda la lista de bloques con un nuevo payload de datos. Desencadena un re-renderizado completo.
data.cleardata.clear(): voidBorra tanto el contenido de los bloques como los datos de estado persistidos.
data.clearContentdata.clearContent(): voidElimina solo los bloques, dejando los datos del store intactos.
data.clearStoragedata.clearStorage(): voidLimpia solo los datos del store, sin tocar los bloques actuales.
blocks.insertblocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement | nullInserta un bloque en el index dado. Acepta la misma forma de datos que el tipo de bloque de destino.
blocks.convertblocks.convert(blockId: string, newType: BlockToolType): voidConvierte un bloque a un nuevo tipo en el lugar.
blocks.removeblocks.remove(index: number): voidElimina el bloque en el index dado.
blocks.moveblocks.move(fromIndex: number, toIndex: number): voidMueve un bloque de un índice a otro.
blocks.updateblocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): voidActualiza los datos de un bloque existente en su lugar. El tipo no cambia.
blocks.getblocks.get(blockId: string): EditorData['blocks'][number] | nullObtiene un bloque por su ID. Devuelve null si no se encuentra.
blocks.getAllblocks.getAll(): EditorData['blocks']Devuelve los datos de todos los bloques como un array.
blocks.countblocks.count(): numberDevuelve el número de bloques en el editor.
focusfocus(): voidMueve el foco al editor, enfocando el primer bloque.
blurblur(): voidElimina cualquier foco activo dentro del editor.
destroydestroy(): voidEl método destroy() en el objeto EditorAPI llama a Editor.destroy() para esta instancia.
selection.getselection.get(): Selection | nullDevuelve el objeto de selección de la ventana o null.
selection.setselection.set(selection: Selection): voidEstablece la selección de la ventana en el objeto Selection proporcionado.
selection.clearselection.clear(): voidElimina todos los rangos de la selección de la ventana.
ui.showBlockMenuui.showBlockMenu(block: HTMLElement): voidMuestra el menú de tipo de bloque para el elemento DOM de bloque dado.
ui.hideBlockMenuui.hideBlockMenu(): voidOculta el menú de tipo de bloque si está abierto.
ui.showToolbarui.showToolbar(x: number, y: number): voidMuestra la barra de herramientas en línea en las coordenadas x, y del viewport proporcionadas.
ui.hideToolbarui.hideToolbar(): voidOculta la barra de herramientas en línea si está visible.
view.getCurrentViewview.getCurrentView(containerId: string): EditorView | nullDevuelve la vista actual (edit, preview o json) para el containerId dado.
view.switchViewview.switchView(containerId: string, view: EditorView): voidCambia 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étodoFirmaDescripción
Renderer.renderRenderer.render(config: RendererConfig): HTMLElementRenderiza 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 },
});

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étodoFirmaDescripción
StyleManager.subscribeStyleManager.subscribe(cb: (theme: 'light' | 'dark') => void): () => voidSuscrí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.getResolvedThemeStyleManager.getResolvedTheme(): 'light' | 'dark'Lee el tema actual del sistema operativo ("light" o "dark"). Devuelve "light" si matchMedia no está disponible.
StyleManager.injectStylesStyleManager.injectStyles(styleId: string, styles: string): booleanInyecta 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();