API viide

Avalikud ekspordid paketist @clepit/core. Iga allolev sümbol pakub tüübitud signatuuri ja minimaalse kasutusnäite.

Editor

Põhiline redaktori klass. Editoril on kaks avalikku staatiliste meetodit: create (peamine tehas) ja destroy. Meetod create() tagastab EditorAPI objekti, mille kaudu on kõik instantsimeetodid pärast redaktori paigaldamist juurdepääsetavad.

Meetod	Signatuur	Kirjeldus
Editor.create	Editor.create(config: EditorConfig): EditorAPI	Loo uus redaktori instants ja paigalda see DOM-elementi, mille containerId on antud.
Editor.destroy	Editor.destroy(containerId: string): void	EditorAPI objekti meetod destroy() kutsub välja Editor.destroy() selle instantsi jaoks.

Meetod	Signatuur	Kirjeldus
data.extract	data.extract(): EditorData	Ekstrakti redaktori instantsist praegused plokiandmed JSON-ohutu EditorData-na.
data.set	data.set(data: EditorData): void	Asenda kogu plokiloend uue andmekoormusega. Käivitab täieliku uuesti renderdamise.
data.clear	data.clear(): void	Tühjendab nii plokkide sisu kui ka salvestatud oleku andmed.
data.clearContent	data.clearContent(): void	Eemaldab ainult plokid, jättes salvestusandmed puutumata.
data.clearStorage	data.clearStorage(): void	Tühjendab ainult salvestusandmed, jättes praegused plokid puutumata.
blocks.insert	blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number, id?: string): HTMLElement \| null	Sisesta plokk antud indeksisse index. Aktsepteerib sama andmekuju kui sihtploki tüüp.
blocks.convert	blocks.convert(blockId: string, newType: BlockToolType): void	Teisenda plokk kohapeal uueks tüübiks.
blocks.remove	blocks.remove(index: number): void	Eemalda plokk antud indeksist index.
blocks.move	blocks.move(fromIndex: number, toIndex: number): void	Liigutab ploki ühest indeksist teise.
blocks.update	blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void	Uuendab olemasoleva ploki andmeid kohapeal. Tüüp jääb muutumatuks.
blocks.get	blocks.get(blockId: string): EditorData['blocks'][number] \| null	Toob ploki selle ID järgi. Tagastab null, kui ei leita.
blocks.getAll	blocks.getAll(): EditorData['blocks']	Tagastab kõigi plokkide andmed massiivina.
blocks.count	blocks.count(): number	Tagastab plokkide arvu redaktoris.
focus	focus(): void	Viib fookuse redaktorisse, fokuseerides esimese ploki.
blur	blur(): void	Eemaldab kogu aktiivse fookuse redaktori seest.
destroy	destroy(): void	EditorAPI objekti meetod destroy() kutsub välja Editor.destroy() selle instantsi jaoks.
selection.get	selection.get(): Selection \| null	Tagastab akna valikuobjekti või null.
selection.set	selection.set(selection: Selection): void	Seab akna valiku antud Selection-objektiks.
selection.clear	selection.clear(): void	Eemaldab akna valikust kõik vahemikud.
ui.showBlockMenu	ui.showBlockMenu(block: HTMLElement): void	Kuvab plokitüübi menüü antud ploki DOM-elemendi jaoks.
ui.hideBlockMenu	ui.hideBlockMenu(): void	Peidab plokitüübi menüü, kui see on avatud.
ui.showToolbar	ui.showToolbar(x: number, y: number): void	Kuvab tekstisisese tööriistariba antud x, y vaateava koordinaatidel.
ui.hideToolbar	ui.hideToolbar(): void	Peidab tekstisisese tööriistariba, kui see on nähtav.
view.getCurrentView	view.getCurrentView(containerId: string): EditorView \| null	Tagastab praeguse vaate (edit, preview või json) antud containerId jaoks.
view.switchView	view.switchView(containerId: string, view: EditorView): void	Lülitab redaktori määratud vaatele: edit, preview või json.

Tüüpiline kasutusnäide

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

Klass, mis teisendab salvestatud plokkide andmed kirjutuskaitstud HTML-ks DOM-elemendi sisse. Sellel klassil on üks avalik staatiline meetod: render().

Meetod	Signatuur	Kirjeldus
Renderer.render	Renderer.render(config: RendererConfig): HTMLElement	Renderda salvestatud plokkide JSON konteinerisse kirjutuskaitstud HTML-ina. Kasuta seda kõikjal, kus soovid sisu kuvada ilma redigeerimisvõimalusteta.

Tüüpiline kasutusnäide

TypeScript

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

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

Serveris renderdamine

Need funktsioonid töötavad ilma DOM-i ja brauserita: nad joonistavad valmis HTML-stringe, seega töötavad Node-is, edge-käituskeskkondades ja serverikomponentides. Reactis pakendab @clepit/react need ClepitContentiks.

Meetod	Signatuur	Kirjeldus
renderBlocks	renderBlocks(blocks: Block[], context?: DrawContext): string	Joonistab dokumendi valmis HTML-stringiks, DOM-i pole vaja.
renderPage	renderPage(page: PublicPage, context?: DrawContext): string	Joonistab dokumendile tervikliku avaliku HTML-lehe: märgistus, stiilileht, metaandmed ja ankruga navigeeritavad ploki-id-d.
pageStylesheet	pageStylesheet(): string	Tagastab staatiliselt joonistatud märgistuse stiililehe, mida serveerida või renderBlocks väljundi kõrvale manustada.
activateBlocks	activateBlocks(container: HTMLElement, blocks: readonly Block[]): () => void	Ühendab pärast monteerimist interaktiivsed käitumised serveris joonistatud märgistusse (koodivahelehed, kopeerimisnupud, openapi vastuste vahelehed, tabeli CSV allalaadimine) ja tagastab eemaldaja.
drawBlock	drawBlock(block: Block, backing: Backing, context?: DrawContext): ClepitElement \| null	Joonistab ühe ploki backing-u vastu; string-backing-uga joonistab üldse ilma DOM-ita.
tokensToLightDarkBlock	tokensToLightDarkBlock(light: ThemeTokens, dark: ThemeTokens, selector: string): string	Muudab heleda ja tumeda ThemeTokens paari valija jaoks light-dark() CSS-muutujate plokiks, staatilise märgistuse teemastamiseks ilma elava StyleManagerita.

TypeScript

import { activateBlocks, pageStylesheet, renderBlocks } from '@clepit/core';

// On the server: finished HTML, no DOM needed
const html = renderBlocks(doc.blocks);
const css = pageStylesheet();

// In the browser, after mount: wire the interactive blocks
const dispose = activateBlocks(container, doc.blocks);

StyleManager

Keskselt teemahaldustsüsteemi haldav klass. Pakub tarbijatele kolm kasulikku avalikku staatiliste meetodit: subscribe (OS-taseme teemamuutuste jaoks), getResolvedTheme (praeguse OS-teema lugemiseks) ja injectStyles (kohandatud CSS-i süstimiseks).

Meetod	Signatuur	Kirjeldus
StyleManager.subscribe	StyleManager.subscribe(cb: (theme: 'light' \| 'dark') => void): () => void	Telli käitusaja teema-tokenite muudatused. Kuulaja käivitub iga kord, kui theme või themeOverrides muutub.
StyleManager.getResolvedTheme	StyleManager.getResolvedTheme(): 'light' \| 'dark'	Loeb praeguse OS-teema ("light" või "dark"). Tagastab "light", kui matchMedia pole saadaval.
StyleManager.injectStyles	StyleManager.injectStyles(styleId: string, styles: string): boolean	Süstib CSS-i stringi document.head-i (kasuta unikaalset styleId). Tagastab false, kui juba olemas, muul juhul true.

Tüüpiline kasutusnäide

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

Viide

Paketid

API viide

Editor

Tüüpiline kasutusnäide

Renderer

Tüüpiline kasutusnäide

Serveris renderdamine

StyleManager

Tüüpiline kasutusnäide