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

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

Pagsisimula

Sanggunian

Server API

Mga gabay

API Reference

Editor

Tipikal na halimbawa ng paggamit

Renderer

Tipikal na halimbawa ng paggamit

StyleManager

Tipikal na halimbawa ng paggamit