Ir para o conteúdo principal

Referência da API

Exportações públicas de @clepit/core. Cada símbolo abaixo fornece uma assinatura tipada e um exemplo mínimo de uso.

Editor

A classe principal do editor. Editor expõe dois métodos estáticos públicos: create (a fábrica principal) e destroy. O método create() retorna um objeto EditorAPI pelo qual todos os métodos de instância são acessíveis após o editor ser montado.

MétodoAssinaturaDescrição
Editor.createEditor.create(config: EditorConfig): EditorAPICrie uma nova instância do editor e monte-a no elemento DOM com o containerId fornecido.
Editor.destroyEditor.destroy(containerId: string): voidO método destroy() no objeto EditorAPI chama Editor.destroy() para esta instância.
MétodoAssinaturaDescrição
data.extractdata.extract(): EditorDataExtraia os dados de blocos atuais de uma instância do editor como um EditorData seguro para JSON.
data.setdata.set(data: EditorData): voidSubstitua toda a lista de blocos por um novo payload de dados. Aciona uma re-renderização completa.
data.cleardata.clear(): voidLimpa tanto o conteúdo dos blocos quanto os dados de estado persistidos.
data.clearContentdata.clearContent(): voidRemove apenas os blocos, deixando os dados do store intactos.
data.clearStoragedata.clearStorage(): voidLimpa apenas os dados do store, deixando os blocos atuais intactos.
blocks.insertblocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement | nullInsira um bloco no index fornecido. Aceita o mesmo formato de dados do tipo de bloco de destino.
blocks.convertblocks.convert(blockId: string, newType: BlockToolType): voidConverta um bloco para um novo tipo no local.
blocks.removeblocks.remove(index: number): voidRemova o bloco no index fornecido.
blocks.moveblocks.move(fromIndex: number, toIndex: number): voidMove um bloco de um índice para outro.
blocks.updateblocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): voidAtualiza os dados de um bloco existente no local. O tipo permanece inalterado.
blocks.getblocks.get(blockId: string): EditorData['blocks'][number] | nullBusca um bloco pelo seu ID. Retorna null se não encontrado.
blocks.getAllblocks.getAll(): EditorData['blocks']Retorna os dados de todos os blocos como um array.
blocks.countblocks.count(): numberRetorna o número de blocos no editor.
focusfocus(): voidMove o foco para o editor, focando no primeiro bloco.
blurblur(): voidRemove qualquer foco ativo de dentro do editor.
destroydestroy(): voidO método destroy() no objeto EditorAPI chama Editor.destroy() para esta instância.
selection.getselection.get(): Selection | nullRetorna o objeto de seleção da janela ou null.
selection.setselection.set(selection: Selection): voidDefine a seleção da janela para o objeto Selection fornecido.
selection.clearselection.clear(): voidRemove todos os intervalos da seleção da janela.
ui.showBlockMenuui.showBlockMenu(block: HTMLElement): voidExibe o menu de tipo de bloco para o elemento DOM de bloco fornecido.
ui.hideBlockMenuui.hideBlockMenu(): voidOculta o menu de tipo de bloco se estiver aberto.
ui.showToolbarui.showToolbar(x: number, y: number): voidExibe a barra de ferramentas inline nas coordenadas x, y do viewport fornecidas.
ui.hideToolbarui.hideToolbar(): voidOculta a barra de ferramentas inline se estiver visível.
view.getCurrentViewview.getCurrentView(containerId: string): EditorView | nullRetorna a view atual (edit, preview ou json) para o containerId fornecido.
view.switchViewview.switchView(containerId: string, view: EditorView): voidMuda o editor para uma view especificada: edit, preview ou json.

Exemplo 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

Uma classe que converte dados de blocos salvos em HTML somente leitura dentro de um elemento DOM. Esta classe possui um método estático público: render().

MétodoAssinaturaDescrição
Renderer.renderRenderer.render(config: RendererConfig): HTMLElementRenderize o JSON de blocos salvo em um contêiner como HTML somente leitura. Use isto em qualquer lugar onde queira exibir conteúdo sem recursos de edição.

Exemplo de uso típico

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

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

StyleManager

Uma classe centralizada que gerencia o sistema de temas. Expõe três métodos estáticos públicos úteis para consumidores: subscribe (para mudanças de tema no nível do SO), getResolvedTheme (para ler o tema atual do SO) e injectStyles (para injetar CSS personalizado).

MétodoAssinaturaDescrição
StyleManager.subscribeStyleManager.subscribe(cb: (theme: 'light' | 'dark') => void): () => voidInscreva-se nas alterações de tokens de tema em tempo de execução. O listener é disparado sempre que theme ou themeOverrides mudam.
StyleManager.getResolvedThemeStyleManager.getResolvedTheme(): 'light' | 'dark'Lê o tema atual do SO ("light" ou "dark"). Retorna "light" se matchMedia não estiver disponível.
StyleManager.injectStylesStyleManager.injectStyles(styleId: string, styles: string): booleanInjeta uma string CSS no document.head (use um styleId único). Retorna false se já presente, true caso contrário.

Exemplo 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();