Konfiguration

EditorConfig und RendererConfig sind die Einstiegspunkte für jede Anpassung. Übergeben Sie eines davon an Editor.create() bzw. Renderer.render(). Nur containerId (und data für den Renderer) sind erforderlich; alle anderen Optionen haben sichere Standardwerte.

EditorConfig

Übergeben Sie EditorConfig als einziges Argument an Editor.create(). Die erforderliche containerId muss mit der Id eines vorhandenen DOM-Elements übereinstimmen.

Option	Typ	Erforderlich	Beschreibung
containerId	string	Ja	ID des DOM-Elements, das den Editor beherbergt. Muss im DOM vorhanden sein, bevor Editor.create() aufgerufen wird.
maxHeight	number	Nein	Maximale Höhe des Editors in Pixeln. Auf 0 (Standard) setzen für keine Höhenbegrenzung.
minHeight	number	Nein	Mindesthöhe des Editors in Pixeln. Standard ist 300.
onChange	(data: EditorData) => void	Nein	Rückruf, der bei jeder Dokumentänderung ausgelöst wird. Empfängt den vollständigen EditorData-Snapshot.
onReady	() => void	Nein	Rückruf, der ausgelöst wird, wenn der Editor vollständig initialisiert ist und API-Aufrufe entgegennehmen kann.
placeholder	string	Nein	Platzhaltertext, der angezeigt wird, wenn der Editor leer ist. Standard ist 'Start writing...'.
initialData	EditorData	Nein	Vorausgefüllte EditorData, die beim Mounten des Editors geladen wird.
initialView	'edit' \| 'preview' \| 'json'	Nein	Startansichtsmodus. Einer von: edit, preview, json. Standard ist 'edit'.
allowJsonViewEditing	boolean	Nein	Wenn true, ist die JSON-Ansicht bearbeitbar und Änderungen werden ins Dokument zurückgegeben. Standard ist false.
hasViewSwitcher	boolean	Nein	Wenn false, entfallen die Schaltflächen Bearbeiten, Vorschau und JSON in der Aktionsleiste. Standard ist true.
hasDocumentActions	boolean	Nein	Wenn false, entfallen die Schaltflächen Kopieren, Herunterladen und Leeren in der Aktionsleiste. Ist auch hasViewSwitcher false, wird keine Aktionsleiste gezeichnet. Standard ist true.
onClearRequest	() => Promise<boolean>	Nein	Wird aufgerufen, wenn Leeren gedrückt wird. Die Seite wird nur geleert, wenn es zu true aufgelöst wird; eine Ablehnung lässt die Seite unverändert. Fehlt es, leert Leeren sofort.
margins	BlockMargins	Nein	Globaler oberer und unterer Rand (in Pixeln), der auf jeden Block angewendet wird. Block-spezifische Konfigurationen haben Vorrang.
styles	EditorStyles	Nein	EditorStyles-Objekt für eine fein abgestufte CSS-Anpassung des Editor-Chroms (Symbolleisten, Dialoge, Steuerelemente).
classNames	EditorClassNames	Nein	EditorClassNames-Objekt zum Anhängen von CSS-Klassennamen an Editor-Chrome-Elemente.
imageUploader	UploadFunction	Nein	Asynchrone Funktion, die eine Bilddatei hochlädt und eine öffentliche URL-Zeichenfolge zurückgibt.
audioUploader	UploadFunction	Nein	Asynchrone Funktion, die eine Audiodatei hochlädt und eine öffentliche URL-Zeichenfolge zurückgibt.
videoUploader	UploadFunction	Nein	Asynchrone Funktion, die eine Videodatei hochlädt und eine öffentliche URL-Zeichenfolge zurückgibt.
fileUploader	UploadFunction	Nein	Upload-Funktion, die Dateiblock-Anhänge in deinen Speicher bringt.
locale	string	Nein	Die eine Locale, die der Editor bearbeitet. Mehrsprachige Blöcke werden auf diese Locale abgeflacht.
defaultLocale	string	Nein	Ausweich-Locale, wenn ein Block keinen Inhalt für die angeforderte Locale hat.
onLocaleFallback	(info: { blockId: string; locale: string }) => void	Nein	Wird gerufen, wenn ein Block auf eine andere Locale zurückfällt, damit der Host einen Hinweis zeigt.
onInlineRewrite	(selection: string, action: InlineRewriteAction) => Promise<string \| null>	Nein	Funktion, die den ausgewählten Text mit KI umschreibt; wenn gesetzt, zeigt die Toolbar den Umschreiben-Knopf.
inlineRewriteLabels	Partial<Record<InlineRewriteAction, string>>	Nein	Überschreibt die Beschriftungen der Umschreiben-Menüaktionen, zur Lokalisierung.
inlineRewriteTooltip	string	Nein	Überschreibt den Tooltip des Umschreiben-Zauberstabs in der Inline-Symbolleiste, zur Lokalisierung.
blockToolLabels	Partial<Record<BlockToolType, string>>	Nein	Überschreibt Blockwerkzeug-Beschriftungen in Toolbox und Slash-Menü, zur Lokalisierung.
blockToolbarLabels	Partial<Record<BlockToolbarLabel, string>>	Nein	Überschreibt Blockleisten-Texte (Hinzufügen, Verschieben, Löschen und mehr) und die Hinweise in leeren Blockfeldern, zur Lokalisierung.
controlLabels	Partial<Record<ControlLabel, string>>	Nein	Überschreibt die Namen der Schaltflächen der Aktionsleiste (Bearbeiten, Vorschau, JSON, Kopieren, Herunterladen, Leeren), die als barrierefreie Namen und Tooltips dienen, zur Lokalisierung.
dialogLabels	Partial<Record<DialogLabel, string>>	Nein	Die Wörter der Dialoge für Link, Tooltip und Status, nach Namen: Titel, Feldbeschriftungen, Platzhalter, die Statusstile, Abbrechen und Übernehmen. Fehlen sie, auf Englisch.
resolveLink	(url: string) => Promise<Partial<EmbedData>>	Nein	Füllt den Schnappschuss eines eingefügten Embeds von deinem Server: Titel, Drive-Datei, Gist-Dateien oder der Grund, warum keine Live-Ansicht möglich ist. Ein Lookup, der fehlschlägt, zeichnet die Karte so, als hätte das Tool nicht geantwortet, mit Erneut versuchen daneben.
onEmbedAction	(action: EmbedAction, blockId: string) => void	Nein	Die Abhilfe neben dem Grund einer Karte, die nur der Host ausführen kann: connectGoogle schickt das Mitglied zum Verbinden seines Google-Kontos; retry erledigt der Editor selbst.
disabledEmbedProviders	readonly string[]	Nein	Die vom Arbeitsbereich abgeschalteten Embed-Tools nach Schlüssel (figma, miro, loom, google_drive, github_gist); ihre Links werden als Karten gezeichnet, die den Grund nennen.
pasteEmbeds	'live' \| 'offer' \| 'card'	Nein	Was das Einfügen eines unterstützten Links tut: live anzeigen (Standard), anbieten oder eine Karte zeigen.
embedLabels	Partial<Record<EmbedLabel, string>>	Nein	Übersetzte Wörter für die Begründungszeilen, Aktionen und Gist-Beschriftungen des Embed-Blocks, nach EmbedLabel; sonst englische Rückfallwerte.
resolveIssues	(urls: string[]) => Promise<Record<string, IssueSnapshot>>	Nein	Beantwortet die Issue-Links einer Seite mit ihren Ständen, nach URL. Fehlt es, behalten Chips und Karten, was das Dokument gespeichert hat, und nichts wird aktualisiert.
onIssueAction	(action: IssueAction, tool: string) => void	Nein	Die Abhilfe neben einer Issue-Begründung, die nur der Host leisten kann: das Tool verbinden, was auf die Integrationsseite des Hosts führt.
issueCards	'off' \| 'on'	Nein	Ob ein in eine eigene Zeile eingefügter Issue-Link zur Karte wird; off, wenn nicht gesetzt. Ein Chip im Satz bleibt immer ein Chip.
issueChip	{ assignee: boolean; status: boolean }	Nein	Die zwei Chip-Schalter des Mitglieds: die Statuspille und die zuständige Person. Beide an, wenn nicht gesetzt.
issueLabels	Partial<Record<IssueLabel, string>>	Nein	Übersetzte Wörter für den Issue-Chip, die Karte und die Tabelle der verknüpften Issues, nach IssueLabel; sonst englische Rückfallwerte.
jiraSites	readonly string[]	Nein	Die URLs der Jira-Sites, die die Verbindungen des Arbeitsbereichs erreichen, damit ein Link auf der eigenen Domain einer Site als Issue erkannt wird.
allowedBlockTools	readonly BlockToolType[]	Nein	Die Blocktypen, die der Editor im Blockmenü, dessen Suche, dem Umwandlungsmenü und beim Einfügen anbietet. Ohne Angabe jeder registrierte Block; ein gespeicherter Block außerhalb der Liste wird weiterhin gerendert.
allowedInlineTools	readonly InlineToolType[]	Nein	Die Auszeichnungen, die die Inline-Werkzeugleiste anbietet. Ohne Angabe jede registrierte Auszeichnung.
theme	'auto' \| 'light' \| 'dark'	Nein	Farbschema. Einer von: auto (folgt dem System), light, dark. Standard ist auto.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	Nein	Pro-Modus-Token-Überschreibungen. Stellen Sie light- und/oder dark-Token-Maps bereit, um Farben anzupassen, ohne das vollständige Theme zu ersetzen.

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

Übergeben Sie RendererConfig als einziges Argument an Renderer.render(). Sowohl containerId als auch data sind erforderlich.

Option	Typ	Erforderlich	Beschreibung
containerId	string	Ja	ID des DOM-Elements, in das die gerenderte Ausgabe injiziert wird.
data	EditorData	Ja	Das zu rendernde EditorData-Dokument. Erforderlich.
margins	BlockMargins	Nein	Globaler oberer und unterer Rand (in Pixeln), der auf jeden gerenderten Block angewendet wird.
styles	BlockStyles	Nein	BlockStyles-Map für die CSS-Anpassung pro Blocktyp der gerenderten Ausgabe.
classNames	BlockClassNames	Nein	BlockClassNames-Map für CSS-Klassennamen pro Blocktyp der gerenderten Ausgabe.
editorClassNames	EditorClassNames	Nein	EditorClassNames, die an Blöcke weitergegeben werden, die interaktive Komponenten rendern (z.B. Tooltip-Klassennamen für Absätze).
configs	Partial<BlockTypeOutputConfigs>	Nein	Partielle Karte von OutputConfig-Objekten pro Block. Jeder Eintrag kann Ränder auf Blockebene und Tooltip-Klassennamen festlegen.
theme	'auto' \| 'light' \| 'dark'	Nein	Farbschema. Einer von: auto, light, dark.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	Nein	Pro-Modus-Token-Überschreibungen für die gerenderte Ausgabe.

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 },
});

Styling auf Blockebene

Sowohl EditorConfig als auch RendererConfig akzeptieren styles, classNames und configs, die nach Blocktyp geschlüsselt sind. Verwenden Sie diese für gezielte Überschreibungen; die vollständige Token-Referenz finden Sie auf der Themes-Seite.

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,
});