API-Referenz
Öffentliche Exporte aus @clepit/core. Jedes Symbol unten liefert eine typisierte Signatur und ein minimales Anwendungsbeispiel.
Editor
Die Kern-Editor-Klasse. Editor bietet zwei öffentliche statische Methoden: create (die Hauptfabrik) und destroy. Die Methode create() gibt ein EditorAPI-Objekt zurück, über das alle Instanzmethoden nach dem Einbinden des Editors zugänglich sind.
| Methode | Signatur | Beschreibung |
|---|---|---|
| Editor.create | Editor.create(config: EditorConfig): EditorAPI | Erstellen Sie eine neue Editor-Instanz und binden Sie sie in das DOM-Element mit der angegebenen containerId ein. |
| Editor.destroy | Editor.destroy(containerId: string): void | Die Methode destroy() auf dem EditorAPI-Objekt ruft Editor.destroy() für diese Instanz auf. |
| Methode | Signatur | Beschreibung |
|---|---|---|
| data.extract | data.extract(): EditorData | Extrahieren Sie die aktuellen Blockdaten aus einer Editor-Instanz als JSON-sicheres EditorData. |
| data.set | data.set(data: EditorData): void | Ersetzen Sie die gesamte Blockliste durch eine neue Datennutzlast. Löst ein vollständiges Neu-Rendern aus. |
| data.clear | data.clear(): void | Löscht sowohl den Blockinhalt als auch die gespeicherten Zustandsdaten. |
| data.clearContent | data.clearContent(): void | Entfernt nur Blöcke und lässt die Store-Daten unangetastet. |
| data.clearStorage | data.clearStorage(): void | Löscht nur die Store-Daten und lässt aktuelle Blöcke unberührt. |
| blocks.insert | blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement | null | Fügen Sie einen Block am angegebenen Index index ein. Akzeptiert dieselbe Datenstruktur wie der Zielblocktyp. |
| blocks.convert | blocks.convert(blockId: string, newType: BlockToolType): void | Konvertieren Sie einen Block an Ort und Stelle in einen neuen Typ. |
| blocks.remove | blocks.remove(index: number): void | Entfernen Sie den Block am angegebenen Index index. |
| blocks.move | blocks.move(fromIndex: number, toIndex: number): void | Verschiebt einen Block von einem Index zu einem anderen. |
| blocks.update | blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void | Aktualisiert die Daten eines vorhandenen Blocks an Ort und Stelle. Der Typ bleibt unverändert. |
| blocks.get | blocks.get(blockId: string): EditorData['blocks'][number] | null | Ruft einen Block anhand seiner ID ab. Gibt null zurück, wenn nicht gefunden. |
| blocks.getAll | blocks.getAll(): EditorData['blocks'] | Gibt die Daten aller Blöcke als Array zurück. |
| blocks.count | blocks.count(): number | Gibt die Anzahl der Blöcke im Editor zurück. |
| focus | focus(): void | Bewegt den Fokus in den Editor und fokussiert den ersten Block. |
| blur | blur(): void | Entfernt jeden aktiven Fokus innerhalb des Editors. |
| destroy | destroy(): void | Die Methode destroy() auf dem EditorAPI-Objekt ruft Editor.destroy() für diese Instanz auf. |
| selection.get | selection.get(): Selection | null | Gibt das Auswahlobjekt des Fensters oder null zurück. |
| selection.set | selection.set(selection: Selection): void | Setzt die Fensterauswahl auf das bereitgestellte Selection-Objekt. |
| selection.clear | selection.clear(): void | Entfernt alle Bereiche aus der Fensterauswahl. |
| ui.showBlockMenu | ui.showBlockMenu(block: HTMLElement): void | Zeigt das Blocktyp-Menü für das angegebene Block-DOM-Element an. |
| ui.hideBlockMenu | ui.hideBlockMenu(): void | Versteckt das Blocktyp-Menü, wenn es geöffnet ist. |
| ui.showToolbar | ui.showToolbar(x: number, y: number): void | Zeigt die Inline-Symbolleiste an den angegebenen x-, y-Anzeigebereich-Koordinaten an. |
| ui.hideToolbar | ui.hideToolbar(): void | Versteckt die Inline-Symbolleiste, wenn sie sichtbar ist. |
| view.getCurrentView | view.getCurrentView(containerId: string): EditorView | null | Gibt die aktuelle Ansicht (edit, preview oder json) für die angegebene containerId zurück. |
| view.switchView | view.switchView(containerId: string, view: EditorView): void | Schaltet den Editor auf eine bestimmte Ansicht um: edit, preview oder json. |
Typisches Verwendungsbeispiel
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
Eine Klasse, die gespeicherte Blockdaten in schreibgeschütztes HTML innerhalb eines DOM-Elements umwandelt. Diese Klasse hat eine öffentliche statische Methode: render().
| Methode | Signatur | Beschreibung |
|---|---|---|
| Renderer.render | Renderer.render(config: RendererConfig): HTMLElement | Rendern Sie gespeichertes Block-JSON als schreibgeschütztes HTML in einen Container. Verwenden Sie dies überall dort, wo Sie Inhalte ohne Bearbeitungsmöglichkeiten anzeigen möchten. |
Typisches Verwendungsbeispiel
TypeScript
import { Renderer } from '@clepit/core';
Renderer.render({
containerId: 'output',
data,
theme: 'auto',
margins: { bottom: 12, top: 0 },
});StyleManager
Eine zentrale Klasse, die das Theme-System verwaltet. Sie bietet drei nützliche öffentliche statische Methoden für Verbraucher: subscribe (für OS-Themen-Änderungen), getResolvedTheme (zum Lesen des aktuellen OS-Themas) und injectStyles (zum Einfügen von benutzerdefiniertem CSS).
| Methode | Signatur | Beschreibung |
|---|---|---|
| StyleManager.subscribe | StyleManager.subscribe(cb: (theme: 'light' | 'dark') => void): () => void | Abonnieren Sie Änderungen von Theme-Tokens zur Laufzeit. Der Listener wird ausgelöst, wenn theme oder themeOverrides sich ändern. |
| StyleManager.getResolvedTheme | StyleManager.getResolvedTheme(): 'light' | 'dark' | Liest das aktuelle OS-Theme ("light" oder "dark"). Gibt "light" zurück, wenn matchMedia nicht verfügbar ist. |
| StyleManager.injectStyles | StyleManager.injectStyles(styleId: string, styles: string): boolean | Fügt eine CSS-Zeichenkette in document.head ein (verwenden Sie eine eindeutige styleId). Gibt false zurück, wenn bereits vorhanden, sonst true. |
Typisches Verwendungsbeispiel
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();