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.
hasViewSwitcher	boolean	Não	Quando false, os botões editar, pré-visualizar e JSON são retirados da barra de ações. Padrão é true.
hasDocumentActions	boolean	Não	Quando false, os botões copiar, baixar e limpar são retirados da barra de ações. Se hasViewSwitcher também for false, nenhuma barra de ações é desenhada. Padrão é true.
onClearRequest	() => Promise<boolean>	Não	Chamado quando Limpar é pressionado. A página só é limpa se resolver para true; uma rejeição mantém a página. Se ausente, Limpar limpa imediatamente.
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.
fileUploader	UploadFunction	Não	Função de upload que move anexos do bloco de arquivo para o seu armazenamento.
locale	string	Não	A única locale que o editor edita. Blocos multilíngues são achatados para esta locale.
defaultLocale	string	Não	Locale de reserva usada quando um bloco não tem conteúdo para a locale pedida.
onLocaleFallback	(info: { blockId: string; locale: string }) => void	Não	Chamado quando um bloco recai em outra locale, para o host mostrar um indicador.
onInlineRewrite	(selection: string, action: InlineRewriteAction) => Promise<string \| null>	Não	Função que reescreve o texto selecionado com IA; quando definida, a barra mostra o botão de reescrita.
inlineRewriteLabels	Partial<Record<InlineRewriteAction, string>>	Não	Sobrescreve os rótulos das ações do menu de reescrita, para localização.
inlineRewriteTooltip	string	Não	Sobrescreve a dica da varinha de reescrita na barra de ferramentas inline, para localização.
blockToolLabels	Partial<Record<BlockToolType, string>>	Não	Sobrescreve rótulos das ferramentas de bloco na caixa de ferramentas e no menu de barra, para localização.
blockToolbarLabels	Partial<Record<BlockToolbarLabel, string>>	Não	Sobrescreve textos da barra de blocos (adicionar, mover, excluir e demais) e as dicas exibidas em campos de bloco vazios, para localização.
controlLabels	Partial<Record<ControlLabel, string>>	Não	Sobrescreve os nomes dos botões da barra de ações (editar, pré-visualizar, JSON, copiar, baixar, limpar), usados como nomes acessíveis e dicas, para localização.
dialogLabels	Partial<Record<DialogLabel, string>>	Não	As palavras das caixas de diálogo de link, dica e status, por nome: títulos, rótulos dos campos, textos de exemplo, estilos de status, Cancelar e Aplicar. Em inglês se ausentes.
resolveLink	(url: string) => Promise<Partial<EmbedData>>	Não	Preenche o instantâneo de um embed colado a partir do seu servidor: título, ficheiro do Drive, ficheiros do gist ou a razão pela qual a vista ao vivo não é possível. Uma pesquisa que falha desenha o cartão como se a ferramenta não tivesse respondido, com Tentar novamente ao lado.
onEmbedAction	(action: EmbedAction, blockId: string) => void	Não	A correção ao lado da razão de um cartão que só o anfitrião pode executar: connectGoogle envia o membro a ligar a sua conta Google; retry é tratado pelo próprio editor.
disabledEmbedProviders	readonly string[]	Não	As ferramentas de embed desligadas pelo espaço de trabalho, por chave (figma, miro, loom, google_drive, github_gist); as suas ligações desenham-se como cartões que dizem porquê.
pasteEmbeds	'live' \| 'offer' \| 'card'	Não	O que colar um link suportado faz: mostrá-lo ao vivo (predefinição), propor fazê-lo, ou mostrar um cartão.
embedLabels	Partial<Record<EmbedLabel, string>>	Não	Palavras traduzidas para as linhas de razão, ações e rótulos de gist do bloco embed, indexadas por EmbedLabel; caso contrário, inglês.
resolveIssues	(urls: string[]) => Promise<Record<string, IssueSnapshot>>	Não	Responde aos links de issues de uma página com os seus instantâneos, indexados por URL. Ausente, etiquetas e cartões mantêm o que o documento guardou e nada se atualiza.
onIssueAction	(action: IssueAction, tool: string) => void	Não	A correção junto a uma razão de issue que só o anfitrião pode fazer: ligar a ferramenta, o que leva à página de Integrações do anfitrião.
issueCards	'off' \| 'on'	Não	Se um link de issue colado numa linha própria se torna um cartão; off quando ausente. Uma etiqueta numa frase é sempre uma etiqueta.
issueChip	{ assignee: boolean; status: boolean }	Não	Os dois interruptores de etiqueta do membro: a pílula de estado e o responsável. Ambos ligados quando ausente.
issueLabels	Partial<Record<IssueLabel, string>>	Não	Palavras traduzidas para a etiqueta de issue, o cartão e a tabela de issues ligadas, indexadas por IssueLabel; caso contrário, inglês.
jiraSites	readonly string[]	Não	Os URLs dos sites Jira que as ligações do espaço de trabalho alcançam, para que um link no domínio próprio de um site seja reconhecido como issue.
allowedBlockTools	readonly BlockToolType[]	Não	Os tipos de bloco que o editor oferece no menu de blocos, na sua pesquisa, no menu de conversão e ao colar. Todos os blocos registados quando ausente; um bloco guardado fora da lista continua a ser renderizado.
allowedInlineTools	readonly InlineToolType[]	Não	As marcas que a barra de ferramentas em linha oferece. Todas as marcas registadas quando ausente.
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,
});

Referência

Pacotes

Configuração

EditorConfig

RendererConfig

Estilização no nível de bloco