Liigu põhisisu juurde

Juhendid

Manustamine

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.

MeetodSignatuurKirjeldus
Editor.createEditor.create(config: EditorConfig): EditorAPILoo uus redaktori instants ja paigalda see DOM-elementi, mille containerId on antud.
Editor.destroyEditor.destroy(containerId: string): voidEditorAPI objekti meetod destroy() kutsub välja Editor.destroy() selle instantsi jaoks.
MeetodSignatuurKirjeldus
data.extractdata.extract(): EditorDataEkstrakti redaktori instantsist praegused plokiandmed JSON-ohutu EditorData-na.
data.setdata.set(data: EditorData): voidAsenda kogu plokiloend uue andmekoormusega. Käivitab täieliku uuesti renderdamise.
data.cleardata.clear(): voidTühjendab nii plokkide sisu kui ka salvestatud oleku andmed.
data.clearContentdata.clearContent(): voidEemaldab ainult plokid, jättes salvestusandmed puutumata.
data.clearStoragedata.clearStorage(): voidTühjendab ainult salvestusandmed, jättes praegused plokid puutumata.
blocks.insertblocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement | nullSisesta plokk antud indeksisse index. Aktsepteerib sama andmekuju kui sihtploki tüüp.
blocks.convertblocks.convert(blockId: string, newType: BlockToolType): voidTeisenda plokk kohapeal uueks tüübiks.
blocks.removeblocks.remove(index: number): voidEemalda plokk antud indeksist index.
blocks.moveblocks.move(fromIndex: number, toIndex: number): voidLiigutab ploki ühest indeksist teise.
blocks.updateblocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): voidUuendab olemasoleva ploki andmeid kohapeal. Tüüp jääb muutumatuks.
blocks.getblocks.get(blockId: string): EditorData['blocks'][number] | nullToob ploki selle ID järgi. Tagastab null, kui ei leita.
blocks.getAllblocks.getAll(): EditorData['blocks']Tagastab kõigi plokkide andmed massiivina.
blocks.countblocks.count(): numberTagastab plokkide arvu redaktoris.
focusfocus(): voidViib fookuse redaktorisse, fokuseerides esimese ploki.
blurblur(): voidEemaldab kogu aktiivse fookuse redaktori seest.
destroydestroy(): voidEditorAPI objekti meetod destroy() kutsub välja Editor.destroy() selle instantsi jaoks.
selection.getselection.get(): Selection | nullTagastab akna valikuobjekti või null.
selection.setselection.set(selection: Selection): voidSeab akna valiku antud Selection-objektiks.
selection.clearselection.clear(): voidEemaldab akna valikust kõik vahemikud.
ui.showBlockMenuui.showBlockMenu(block: HTMLElement): voidKuvab plokitüübi menüü antud ploki DOM-elemendi jaoks.
ui.hideBlockMenuui.hideBlockMenu(): voidPeidab plokitüübi menüü, kui see on avatud.
ui.showToolbarui.showToolbar(x: number, y: number): voidKuvab tekstisisese tööriistariba antud x, y vaateava koordinaatidel.
ui.hideToolbarui.hideToolbar(): voidPeidab tekstisisese tööriistariba, kui see on nähtav.
view.getCurrentViewview.getCurrentView(containerId: string): EditorView | nullTagastab praeguse vaate (edit, preview või json) antud containerId jaoks.
view.switchViewview.switchView(containerId: string, view: EditorView): voidLü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().

MeetodSignatuurKirjeldus
Renderer.renderRenderer.render(config: RendererConfig): HTMLElementRenderda 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 },
});

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).

MeetodSignatuurKirjeldus
StyleManager.subscribeStyleManager.subscribe(cb: (theme: 'light' | 'dark') => void): () => voidTelli käitusaja teema-tokenite muudatused. Kuulaja käivitub iga kord, kui theme või themeOverrides muutub.
StyleManager.getResolvedThemeStyleManager.getResolvedTheme(): 'light' | 'dark'Loeb praeguse OS-teema ("light" või "dark"). Tagastab "light", kui matchMedia pole saadaval.
StyleManager.injectStylesStyleManager.injectStyles(styleId: string, styles: string): booleanSü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();