Marejeo ya API

Mauzo ya umma kutoka @clepit/core. Kila ishara hapa chini hutoa sahihi yenye aina na mfano mdogo wa matumizi.

Editor

Darasa kuu la kihariri. Editor ina mbinu mbili za umma za tuli: create (kiwanda kikuu) na destroy. Njia ya create() inarudisha kitu cha EditorAPI ambacho kupitia kwake mbinu zote za nakala zinaweza kupatikana baada ya kihariri kupachikwa.

Njia	Saini	Maelezo
Editor.create	Editor.create(config: EditorConfig): EditorAPI	Unda nakala mpya ya kihariri na uipachike kwenye kipengele cha DOM chenye containerId iliyotolewa.
Editor.destroy	Editor.destroy(containerId: string): void	Njia ya destroy() kwenye kitu cha EditorAPI huita Editor.destroy() kwa nakala hii.

Njia	Saini	Maelezo
data.extract	data.extract(): EditorData	Toa data ya sasa ya vizuizi kutoka nakala ya kihariri kama EditorData salama kwa JSON.
data.set	data.set(data: EditorData): void	Badilisha orodha nzima ya vizuizi na mzigo mpya wa data. Huchochea uonyeshaji upya kamili.
data.clear	data.clear(): void	Husafisha maudhui ya vizuizi na data ya hali iliyohifadhiwa.
data.clearContent	data.clearContent(): void	Huondoa vizuizi tu, ukiacha data ya store bila kubadilishwa.
data.clearStorage	data.clearStorage(): void	Husafisha data ya store tu, ukiacha vizuizi vya sasa bila kubadilishwa.
blocks.insert	blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number, id?: string): HTMLElement \| null	Ingiza kizuizi kwenye index iliyotolewa. Hukubali umbo la data sawa na aina ya kizuizi lengwa.
blocks.convert	blocks.convert(blockId: string, newType: BlockToolType): void	Badilisha kizuizi kuwa aina mpya papo hapo.
blocks.remove	blocks.remove(index: number): void	Ondoa kizuizi kilicho kwenye index iliyotolewa.
blocks.move	blocks.move(fromIndex: number, toIndex: number): void	Huhamisha kizuizi kutoka index moja hadi nyingine.
blocks.update	blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void	Husasisha data ya kizuizi kilichopo papo hapo. Aina haisababishwi.
blocks.get	blocks.get(blockId: string): EditorData['blocks'][number] \| null	Huleta kizuizi kwa ID yake. Hurejesha null ikiwa haikupatikana.
blocks.getAll	blocks.getAll(): EditorData['blocks']	Inarudisha data ya vizuizi vyote kama safu.
blocks.count	blocks.count(): number	Inarudisha idadi ya vizuizi katika kihariri.
focus	focus(): void	Husogeza umakini kwenye kihariri, ukizingatia kizuizi cha kwanza.
blur	blur(): void	Huondoa umakini wowote unaofanya kazi ndani ya kihariri.
destroy	destroy(): void	Njia ya destroy() kwenye kitu cha EditorAPI huita Editor.destroy() kwa nakala hii.
selection.get	selection.get(): Selection \| null	Hurejesha kitu cha uchaguzi wa dirisha au null.
selection.set	selection.set(selection: Selection): void	Huweka uchaguzi wa dirisha kwa kitu cha Selection kilichotolewa.
selection.clear	selection.clear(): void	Huondoa safu zote kutoka kwa uchaguzi wa dirisha.
ui.showBlockMenu	ui.showBlockMenu(block: HTMLElement): void	Huonyesha menyu ya aina ya kizuizi kwa kipengele cha DOM cha kizuizi kilichopewa.
ui.hideBlockMenu	ui.hideBlockMenu(): void	Huficha menyu ya aina ya kizuizi ikiwa imefunguliwa.
ui.showToolbar	ui.showToolbar(x: number, y: number): void	Huonyesha upau wa zana wa ndani katika kuratibu x, y za eneo la mwonekano zilizotolewa.
ui.hideToolbar	ui.hideToolbar(): void	Huficha upau wa zana wa ndani ikiwa unaonekana.
view.getCurrentView	view.getCurrentView(containerId: string): EditorView \| null	Hurejesha mwonekano wa sasa (edit, preview, au json) kwa containerId iliyotolewa.
view.switchView	view.switchView(containerId: string, view: EditorView): void	Hubadilisha kihariri hadi mwonekano maalum: edit, preview, au json.

Mfano wa matumizi ya kawaida

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

Darasa linaloobadilisha data ya vizuizi vilivyohifadhiwa kuwa HTML ya kusoma tu ndani ya kipengele cha DOM. Darasa hili lina njia moja ya tuli ya umma: render().

Njia	Saini	Maelezo
Renderer.render	Renderer.render(config: RendererConfig): HTMLElement	Onyesha JSON ya vizuizi iliyohifadhiwa ndani ya kontena kama HTML ya kusoma tu. Tumia hii popote unapotaka kuonyesha maudhui bila uwezo wa kuhariri.

Mfano wa matumizi ya kawaida

TypeScript

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

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

Uonyeshaji wa seva

Vipengele hivi hufanya kazi bila DOM na bila kivinjari: huchora mifuatano ya HTML iliyokamilika, hivyo hufanya kazi katika Node, mazingira ya edge, na vijenzi vya seva. Katika React, @clepit/react huvifunga kama ClepitContent.

Njia	Saini	Maelezo
renderBlocks	renderBlocks(blocks: Block[], context?: DrawContext): string	Huchora hati hadi mfuatano wa HTML uliokamilika, bila kuhitaji DOM.
renderPage	renderPage(page: PublicPage, context?: DrawContext): string	Huchora ukurasa kamili wa HTML wa umma kwa hati: alama, laha ya mitindo, metadata, na id za vizuizi zinazofikika kwa nanga.
pageStylesheet	pageStylesheet(): string	Hurejesha laha ya mitindo ya alama zilizochorwa kistatiki, kutolewa au kuwekwa ndani kando ya matokeo ya renderBlocks.
activateBlocks	activateBlocks(container: HTMLElement, blocks: readonly Block[]): () => void	Huunganisha tabia za kuingiliana kwenye alama zilizochorwa na seva baada ya kupachika (tabo za msimbo, vitufe vya kunakili, tabo za majibu ya openapi, upakuaji wa CSV wa jedwali) na kurejesha kiondoshaji.
drawBlock	drawBlock(block: Block, backing: Backing, context?: DrawContext): ClepitElement \| null	Huchora kizuizi kimoja dhidi ya backing; kwa string backing huchora bila DOM kabisa.
tokensToLightDarkBlock	tokensToLightDarkBlock(light: ThemeTokens, dark: ThemeTokens, selector: string): string	Hubadilisha jozi ya ThemeTokens ya mwanga na giza kuwa kizuizi cha vigezo vya CSS vya light-dark() kwa kichaguzi, kwa kuweka mandhari kwenye alama tuli bila StyleManager hai.

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

Darasa la kati linaloosimamia mfumo wa mandhari. Linatoa mbinu tatu za tuli za umma zinazofaa kwa watumiaji: subscribe (kwa mabadiliko ya mandhari ya kiwango cha mfumo wa uendeshaji), getResolvedTheme (kusoma mandhari ya sasa ya mfumo wa uendeshaji), na injectStyles (kuingiza CSS maalum).

Njia	Saini	Maelezo
StyleManager.subscribe	StyleManager.subscribe(cb: (theme: 'light' \| 'dark') => void): () => void	Jiandikishe kwa mabadiliko ya tokeni za mandhari wakati wa utekelezaji. Msikilizaji huwaka kila theme au themeOverrides inapobadilika.
StyleManager.getResolvedTheme	StyleManager.getResolvedTheme(): 'light' \| 'dark'	Husoma mandhari ya sasa ya mfumo wa uendeshaji ("light" au "dark"). Hurejesha "light" ikiwa matchMedia haipatikani.
StyleManager.injectStyles	StyleManager.injectStyles(styleId: string, styles: string): boolean	Huingiza mfuatano wa CSS katika document.head (tumia styleId ya kipekee). Hurejesha false ikiwa tayari ipo, true vinginevyo.

Mfano wa matumizi ya kawaida

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