API Reference

Mga public export mula sa @clepit/core. Bawat simbolo sa ibaba ay may typed signature at minimal na halimbawa ng paggamit.

Editor

Ang pangunahing editor class. Ang Editor ay may dalawang pampublikong static na pamamaraan: create (ang pangunahing factory) at destroy. Ang paraan ng create() ay nagbabalik ng EditorAPI na object kung saan lahat ng instance method ay accessible pagkatapos i-mount ang editor.

Pamamaraan	Lagda	Paglalarawan
Editor.create	Editor.create(config: EditorConfig): EditorAPI	Gumawa ng bagong editor instance at i-mount ito sa DOM element na may ibinigay na containerId.
Editor.destroy	Editor.destroy(containerId: string): void	Ang paraan ng destroy() sa EditorAPI object ay tumatawag ng Editor.destroy() para sa instance na ito.

Pamamaraan	Lagda	Paglalarawan
data.extract	data.extract(): EditorData	I-extract ang kasalukuyang block data mula sa isang editor instance bilang JSON-safe na EditorData.
data.set	data.set(data: EditorData): void	Palitan ang buong block list ng bagong data payload. Nagti-trigger ng buong re-render.
data.clear	data.clear(): void	Nililinis ang parehong block content at ang na-persist na state data.
data.clearContent	data.clearContent(): void	Inaalis lamang ang mga block, naiiwanang buo ang data ng store.
data.clearStorage	data.clearStorage(): void	Nililinis lamang ang store data, naiiwanang buo ang kasalukuyang mga block.
blocks.insert	blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number, id?: string): HTMLElement \| null	Mag-insert ng block sa ibinigay na index. Tumatanggap ng parehong data shape gaya ng target na block type.
blocks.convert	blocks.convert(blockId: string, newType: BlockToolType): void	I-convert ang isang block sa bagong type in-place.
blocks.remove	blocks.remove(index: number): void	Alisin ang block sa ibinigay na index.
blocks.move	blocks.move(fromIndex: number, toIndex: number): void	Inililipat ang isang block mula sa isang index papunta sa isa pa.
blocks.update	blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void	Ina-update ang data ng isang kasalukuyang block in-place. Hindi nagbabago ang type.
blocks.get	blocks.get(blockId: string): EditorData['blocks'][number] \| null	Kumukuha ng isang block sa pamamagitan ng ID nito. Nagbabalik ng null kung hindi natagpuan.
blocks.getAll	blocks.getAll(): EditorData['blocks']	Ibinabalik ang data ng lahat ng block bilang isang array.
blocks.count	blocks.count(): number	Ibinabalik ang bilang ng mga block sa editor.
focus	focus(): void	Inililipat ang focus sa editor, na nagfo-focus sa unang block.
blur	blur(): void	Inaalis ang anumang aktibong focus mula sa loob ng editor.
destroy	destroy(): void	Ang paraan ng destroy() sa EditorAPI object ay tumatawag ng Editor.destroy() para sa instance na ito.
selection.get	selection.get(): Selection \| null	Ibinabalik ang window selection object o null.
selection.set	selection.set(selection: Selection): void	Itinatakda ang window selection sa ibinigay na Selection object.
selection.clear	selection.clear(): void	Inaalis ang lahat ng range mula sa window selection.
ui.showBlockMenu	ui.showBlockMenu(block: HTMLElement): void	Ipinapakita ang block type menu para sa ibinigay na block DOM element.
ui.hideBlockMenu	ui.hideBlockMenu(): void	Itinatago ang block type menu kung bukas ito.
ui.showToolbar	ui.showToolbar(x: number, y: number): void	Ipinapakita ang inline toolbar sa ibinigay na x, y viewport coordinates.
ui.hideToolbar	ui.hideToolbar(): void	Itinatago ang inline toolbar kung ito ay nakikita.
view.getCurrentView	view.getCurrentView(containerId: string): EditorView \| null	Ibinabalik ang kasalukuyang view (edit, preview, o json) para sa ibinigay na containerId.
view.switchView	view.switchView(containerId: string, view: EditorView): void	Inililipat ang editor sa isang tinukoy na view: edit, preview, o json.

Tipikal na halimbawa ng paggamit

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

Isang klase na nagko-convert ng naka-save na block data sa read-only na HTML sa loob ng isang DOM element. Ang klase na ito ay may isang pampublikong static na pamamaraan: render().

Pamamaraan	Lagda	Paglalarawan
Renderer.render	Renderer.render(config: RendererConfig): HTMLElement	I-render ang naka-save na block JSON sa isang container bilang read-only na HTML. Gamitin ito saanman gusto mong ipakita ang nilalaman nang walang editing affordances.

Tipikal na halimbawa ng paggamit

TypeScript

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

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

Server rendering

Tumatakbo ang mga function na ito nang walang DOM at walang browser: gumuguhit sila ng tapos na HTML string, kaya gumagana sa Node, edge runtime, at mga server component. Sa React, binabalot sila ng @clepit/react bilang ClepitContent.

Pamamaraan	Lagda	Paglalarawan
renderBlocks	renderBlocks(blocks: Block[], context?: DrawContext): string	Gumuguhit ng dokumento sa tapos na HTML string, walang kailangang DOM.
renderPage	renderPage(page: PublicPage, context?: DrawContext): string	Gumuguhit ng kumpletong pampublikong HTML page para sa isang dokumento: markup, stylesheet, metadata, at mga block id na nana-navigate sa anchor.
pageStylesheet	pageStylesheet(): string	Ibinabalik ang stylesheet para sa statically na iginuhit na markup, para ihain o i-inline sa tabi ng renderBlocks output.
activateBlocks	activateBlocks(container: HTMLElement, blocks: readonly Block[]): () => void	Ikinakabit ang mga interactive na behavior sa markup na iginuhit ng server pagkatapos ng mount (mga code tab, copy button, openapi response tab, table CSV download) at nagbabalik ng disposer.
drawBlock	drawBlock(block: Block, backing: Backing, context?: DrawContext): ClepitElement \| null	Gumuguhit ng isang block laban sa isang backing; sa string backing ay gumuguhit ito nang walang anumang DOM.
tokensToLightDarkBlock	tokensToLightDarkBlock(light: ThemeTokens, dark: ThemeTokens, selector: string): string	Ginagawang light-dark() na CSS variable block para sa isang selector ang pares ng light at dark na ThemeTokens, para sa theming ng static na markup nang walang live na StyleManager.

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

Isang sentralisadong klase na namamahala sa sistema ng tema. Nagbibigay ng tatlong kapaki-pakinabang na pampublikong static na pamamaraan para sa mga consumer: subscribe (para sa mga pagbabago ng tema sa antas ng OS), getResolvedTheme (para mabasa ang kasalukuyang tema ng OS), at injectStyles (para mag-inject ng custom na CSS).

Pamamaraan	Lagda	Paglalarawan
StyleManager.subscribe	StyleManager.subscribe(cb: (theme: 'light' \| 'dark') => void): () => void	Mag-subscribe sa mga pagbabago ng runtime theme token. Nagfa-fire ang listener tuwing nagbabago ang theme o themeOverrides.
StyleManager.getResolvedTheme	StyleManager.getResolvedTheme(): 'light' \| 'dark'	Binabasa ang kasalukuyang tema ng OS ("light" o "dark"). Nagbabalik ng "light" kung hindi available ang matchMedia.
StyleManager.injectStyles	StyleManager.injectStyles(styleId: string, styles: string): boolean	Nag-inject ng CSS string sa document.head (gumamit ng natatanging styleId). Nagbabalik ng false kung mayroon na, true kung hindi.

Tipikal na halimbawa ng paggamit

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

Sanggunian

Mga package

API Reference

Editor

Tipikal na halimbawa ng paggamit

Renderer

Tipikal na halimbawa ng paggamit

Server rendering

StyleManager

Tipikal na halimbawa ng paggamit