Configuração

EditorConfig e RendererConfig são os pontos de entrada para toda personalização. Passe um deles para Editor.create() ou Renderer.render() respectivamente. Apenas containerId (e data para o renderer) são obrigatórios; todas as outras opções têm padrões seguros.

EditorConfig

Passe EditorConfig como único argumento para Editor.create(). O containerId obrigatório deve corresponder a um id de elemento DOM existente.

Opção	Tipo	Obrigatório	Descrição
containerId	string	Sim	ID do elemento DOM que hospedará o editor. Deve existir no DOM antes de Editor.create() ser chamado.
maxHeight	number	Não	Altura máxima do editor em pixels. Defina como 0 (o padrão) para sem limite de altura.
minHeight	number	Não	Altura mínima do editor em pixels. Padrão é 300.
onChange	(data: EditorData) => void	Não	Callback acionado sempre que o documento muda. Recebe o snapshot completo do EditorData.
onReady	() => void	Não	Callback acionado uma vez que o editor está completamente inicializado e pronto para aceitar chamadas de API.
placeholder	string	Não	Texto de espaço reservado exibido quando o editor está vazio. Padrão é 'Start writing...'.
initialData	EditorData	Não	EditorData pré-preenchida para carregar quando o editor monta.
initialView	'edit' \| 'preview' \| 'json'	Não	Modo de exibição inicial. Um dos valores: edit, preview, json. Padrão é 'edit'.
allowJsonViewEditing	boolean	Não	Quando true, a visualização JSON é editável e as alterações se propagam de volta ao documento. Padrão é false.
margins	BlockMargins	Não	Margem superior e inferior global (em pixels) aplicada a cada bloco. Configurações por bloco têm precedência.
styles	EditorStyles	Não	Objeto EditorStyles para personalização CSS detalhada do chrome do editor (barras de ferramentas, diálogos, controles).
classNames	EditorClassNames	Não	Objeto EditorClassNames para anexar nomes de classes CSS a elementos do chrome do editor.
imageUploader	UploadFunction	Não	Função assíncrona que carrega um arquivo de imagem e retorna uma string de URL pública.
audioUploader	UploadFunction	Não	Função assíncrona que carrega um arquivo de áudio e retorna uma string de URL pública.
videoUploader	UploadFunction	Não	Função assíncrona que carrega um arquivo de vídeo e retorna uma string de URL pública.
theme	'auto' \| 'light' \| 'dark'	Não	Esquema de cores. Um dos valores: auto (segue o sistema), light, dark. Padrão é auto.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	Não	Substituições de token por modo. Forneça mapas de tokens light e/ou dark para personalizar cores sem substituir o 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

Passe RendererConfig como único argumento para Renderer.render(). Tanto containerId quanto data são obrigatórios.

Opção	Tipo	Obrigatório	Descrição
containerId	string	Sim	ID do elemento DOM onde o output renderizado será injetado.
data	EditorData	Sim	O documento EditorData a ser renderizado. Obrigatório.
margins	BlockMargins	Não	Margem superior e inferior global (em pixels) aplicada a cada bloco renderizado.
styles	BlockStyles	Não	Mapa BlockStyles para personalização CSS por tipo de bloco do output renderizado.
classNames	BlockClassNames	Não	Mapa BlockClassNames para nomes de classes CSS por tipo de bloco no output renderizado.
editorClassNames	EditorClassNames	Não	EditorClassNames passados para blocos que renderizam componentes interativos (ex. classNames de tooltip para parágrafos).
configs	Partial<BlockTypeOutputConfigs>	Não	Mapa parcial de objetos OutputConfig por bloco. Cada entrada pode definir margens no nível de bloco e nomes de classes de tooltip.
theme	'auto' \| 'light' \| 'dark'	Não	Esquema de cores. Um dos valores: auto, light, dark.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	Não	Substituições de token por modo para o 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 },
});

Estilização no nível de bloco

Tanto EditorConfig quanto RendererConfig aceitam styles, classNames e configs indexados por tipo de bloco. Use-os para substituições direcionadas; consulte a página Themes para a referência 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,
});

Começando

Referência

API do servidor

Guias

Configuração

EditorConfig

RendererConfig

Estilização no nível de bloco