የAPI ማጣቀሻ

ከ@clepit/core የሚገኙ ይፋዊ ኤክስፖርቶች። ከታች ያለ እያንዳንዱ ምልክት የተተየበ ፊርማ እና አነስተኛ የአጠቃቀም ምሳሌ ያቀርባል።

Editor

ዋናው የአርታኢ ክፍል ነው። Editor.create() ሁለት የህዝብ static ዘዴዎችን ይዟል፦ create (ዋናው ፋብሪካ) እና destroy። create() ዘዴ EditorAPI ዕቃን ይመልሳል፣ አርታኢው ከተሸጠ በኋላ ሁሉም ዘዴዎች ሊደርሱ ይችላሉ።

ዘዴ	ፊርማ	መግለጫ
Editor.create	Editor.create(config: EditorConfig): EditorAPI	አዲስ የአርታኢ ምሳሌ ይፍጠሩ እና በተሰጠው containerId ካለው የDOM ኤለመንት ውስጥ ይጫኑት።
Editor.destroy	Editor.destroy(containerId: string): void	የ EditorAPI ዕቃ destroy() ዘዴ ለዚህ ምሳሌ Editor.destroy() ይደውላል።

ዘዴ	ፊርማ	መግለጫ
data.extract	data.extract(): EditorData	ከአርታኢ ምሳሌ የአሁኑን የብሎክ ውሂብ እንደ JSON-ደህንነቱ የተጠበቀ EditorData ያውጡ።
data.set	data.set(data: EditorData): void	ሙሉውን የብሎክ ዝርዝር በአዲስ የውሂብ ጭነት ይተኩ። ሙሉ እንደገና-ማቅረብ ያስነሳል።
data.clear	data.clear(): void	የብሎክ ይዘቱን እና የተቀመጠ ሁኔታ ዳታ ሁለቱንም ያጥፋቸዋል።
data.clearContent	data.clearContent(): void	ብሎኮቹን ብቻ ያስወግዳል፤ የ store ውስጥ ዳታ ሳይነካ ይቀርላል።
data.clearStorage	data.clearStorage(): void	የ store ውስጥ ዳታ ብቻ ይጥርጋል፤ ዓሁን ያሉ ብሎኮች ሳይነካ ይቀርላሉ።
blocks.insert	blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number, id?: string): HTMLElement \| null	በተሰጠው index ላይ ብሎክ ያስገቡ። እንደ ዒላማው የብሎክ አይነት ተመሳሳይ የውሂብ ቅርጽ ይቀበላል።
blocks.convert	blocks.convert(blockId: string, newType: BlockToolType): void	ብሎክን በቦታው ወደ አዲስ አይነት ይለውጡ።
blocks.remove	blocks.remove(index: number): void	በተሰጠው index ላይ ያለውን ብሎክ ያስወግዱ።
blocks.move	blocks.move(fromIndex: number, toIndex: number): void	ብሎክን ከአንድ index ወደ ሌላ index ያዙዋዝ።
blocks.update	blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void	ነባር ብሎክ ዳታ በቦታው ያዘምን። ዓይነቱ አይቀየርም።
blocks.get	blocks.get(blockId: string): EditorData['blocks'][number] \| null	ብሎክን በ ID ያምጣ። ካልተገኘ null ይመልሳል።
blocks.getAll	blocks.getAll(): EditorData['blocks']	ሁሉም ብሎኮች ዳታ ወደ ድርድር ይመልሳል።
blocks.count	blocks.count(): number	በአርታኢ ውስጥ ያሉ ብሎኮች ቁጥር ይመልሳል።
focus	focus(): void	ወደ አርታኢ ውስጥ ትኩረት ያቅናል፣ ለመጀመሪያ ብሎክ ትኩረት ይሰጣሉ።
blur	blur(): void	ወደ አርታኢ ውስጥ ምንም ንቁ ትኩረት ካለ ያስወግዳል።
destroy	destroy(): void	የ EditorAPI ዕቃ destroy() ዘዴ ለዚህ ምሳሌ Editor.destroy() ይደውላል።
selection.get	selection.get(): Selection \| null	የዊንዶው ምርጫ ነገር ወይም null ይመልሳል።
selection.set	selection.set(selection: Selection): void	የዊንዶው ምርጫ ወደ ሰጡት Selection ነገር ያዘጋጃሉ።
selection.clear	selection.clear(): void	የዊንዶው ምርጫ ሁሉ ክልሎቹን ያስወግዳቸዋል።
ui.showBlockMenu	ui.showBlockMenu(block: HTMLElement): void	ለተሰጠ ብሎክ DOM ኤለመንት የብሎክ ዓይነት ምናሌ ያሳያሉ።
ui.hideBlockMenu	ui.hideBlockMenu(): void	ከተከፈተ የብሎክ ዓይነት ምናሌ ይደብቃሉ።
ui.showToolbar	ui.showToolbar(x: number, y: number): void	ኢንላይን ቱልባሩን በተሰጡ x፣ y ቅርፅ አስተባባሪዎች ያሳያሉ።
ui.hideToolbar	ui.hideToolbar(): void	ይዘት-ያለው ቅጣፎ ከተለቀቀ ኢንላይን ቱልባር ይደብቃሉ።
view.getCurrentView	view.getCurrentView(containerId: string): EditorView \| null	ለተሰጠ containerId የሚሰራ ዓሁን ያለ view (edit፣ preview፣ ወይም json) ይመልሳል።
view.switchView	view.switchView(containerId: string, view: EditorView): void	ምርጦቹን view ወደ edit፣ preview፣ ወይም json ይቀይሩ።

የተለመደ አጠቃቀም

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

የተቀመጠ ብሎክ ዳታን ወደ DOM ኤለመንት ውስጥ እንደ ለንባብ-ብቻ HTML የሚቀይር ክፍል ነው። ለዚህ ክፍል አንድ ብቸኛ የህዝብ static ዘዴ አለ፦ render()።

ዘዴ	ፊርማ	መግለጫ
Renderer.render	Renderer.render(config: RendererConfig): HTMLElement	የተቀመጠ የብሎክ JSON ን ወደ መያዣ እንደ ለንባብ-ብቻ HTML ያቅርቡ። ይዘትን ያለ የአርታኢ ምቹነቶች ለማሳየት በሚፈልጉበት ቦታ ሁሉ ይህን ይጠቀሙ።

የተለመደ አጠቃቀም

TypeScript

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

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

የአገልጋይ ማሳያ

እነዚህ ተግባራት ያለ DOM እና ያለ አሳሽ ይሰራሉ፦ ዝግጁ የ HTML ሕብረቁምፊዎችን ይሳላሉ፣ ስለዚህ በ Node፣ በ edge ማስኬጃዎች እና በአገልጋይ ክፍሎች ውስጥ ይሰራሉ። በ React ውስጥ @clepit/react እንደ ClepitContent ያጠቃልላቸዋል።

ዘዴ	ፊርማ	መግለጫ
renderBlocks	renderBlocks(blocks: Block[], context?: DrawContext): string	ሰነድን ወደ ዝግጁ የ HTML ሕብረቁምፊ ይሳላል፣ DOM ሳያስፈልግ።
renderPage	renderPage(page: PublicPage, context?: DrawContext): string	ለሰነድ ሙሉ የሕዝብ HTML ገጽ ይሳላል፦ ምልክት፣ ስታይል ሉህ፣ ሜታዳታ እና በመልህቅ የሚጓዙ የብሎክ መታወቂያዎች።
pageStylesheet	pageStylesheet(): string	ለስታቲክ የተሳለ ምልክት ስታይል ሉህን ይመልሳል፣ ከ renderBlocks ውጤት አጠገብ ለማቅረብ ወይም ለማካተት።
activateBlocks	activateBlocks(container: HTMLElement, blocks: readonly Block[]): () => void	ከመጫን በኋላ በአገልጋይ በተሳለ ምልክት ውስጥ በይነተገናኝ ባህሪያትን ያገናኛል (የኮድ ትሮች፣ የቅዳ አዝራሮች፣ የ openapi ምላሽ ትሮች፣ የሰንጠረዥ CSV ማውረድ) እና አስወጋጅ ይመልሳል።
drawBlock	drawBlock(block: Block, backing: Backing, context?: DrawContext): ClepitElement \| null	አንድን ብሎክ በ backing ላይ ይሳላል፤ በ string backing ሙሉ በሙሉ ያለ DOM ይሳላል።
tokensToLightDarkBlock	tokensToLightDarkBlock(light: ThemeTokens, dark: ThemeTokens, selector: string): string	የብርሃንና የጨለማ ThemeTokens ጥንድን ለመራጭ ወደ light-dark() የ CSS ተለዋዋጭ ብሎክ ይለውጣል፣ ስታቲክ ምልክትን ያለ ቀጥታ 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

የቲም ስርዓቱን የሚያስተዳድር ማዕከላዊ ክፍል ነው። ለሸማቾች ሦስት ጠቃሚ የህዝብ static ዘዴዎችን ያቀርባል፦ subscribe (ለ OS-ደረጃ ቲም ለውጦች)፣ getResolvedTheme (አሁን ያለውን OS ቲም ለማወቅ) እና injectStyles (ብጁ CSS ለማስወተት)።

ዘዴ	ፊርማ	መግለጫ
StyleManager.subscribe	StyleManager.subscribe(cb: (theme: 'light' \| 'dark') => void): () => void	ለሩጫ-ጊዜ የገጽታ token ለውጦች ይመዝገቡ። theme ወይም themeOverrides በተቀየረ ቁጥር listener ይተኮሳል።
StyleManager.getResolvedTheme	StyleManager.getResolvedTheme(): 'light' \| 'dark'	አሁን ያለ OS ቲም ያነሳሉ ("light" ወይም "dark")። matchMedia ካልተገኘ "light" ነው ሚመልስ።
StyleManager.injectStyles	StyleManager.injectStyles(styleId: string, styles: string): boolean	የCSS ሃረን ወደ document.head ያስወቁታሉ (ሲአሌ ዩናክ styleId ይጠቀሙ)። ቀደም ሲል ካለ false ይመልሳሉ፣ ካልሆነ true ይመልሳሉ።

የተለመደ አጠቃቀም

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