Lewati ke konten utama

Panduan

Penyematan

Referensi API

Ekspor publik dari @clepit/core. Setiap simbol di bawah menyediakan tanda tangan bertipe dan contoh penggunaan minimal.

Editor

Kelas editor inti. Editor memiliki dua metode statis publik: create (pabrik utama) dan destroy. Metode create() mengembalikan objek EditorAPI yang melaluinya semua metode instance dapat diakses setelah editor dipasang.

MetodeTanda tanganDeskripsi
Editor.createEditor.create(config: EditorConfig): EditorAPIBuat instance editor baru dan pasang ke elemen DOM dengan containerId yang diberikan.
Editor.destroyEditor.destroy(containerId: string): voidMetode destroy() pada objek EditorAPI memanggil Editor.destroy() untuk instance ini.
MetodeTanda tanganDeskripsi
data.extractdata.extract(): EditorDataEkstrak data blok saat ini dari instance editor sebagai EditorData yang aman untuk JSON.
data.setdata.set(data: EditorData): voidGanti seluruh daftar blok dengan muatan data baru. Memicu render ulang penuh.
data.cleardata.clear(): voidMenghapus konten blok dan data status yang tersimpan.
data.clearContentdata.clearContent(): voidMenghapus blok saja, membiarkan data store tetap utuh.
data.clearStoragedata.clearStorage(): voidMenghapus data store saja, membiarkan blok saat ini tidak berubah.
blocks.insertblocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement | nullSisipkan blok pada index yang diberikan. Menerima bentuk data yang sama dengan tipe blok target.
blocks.convertblocks.convert(blockId: string, newType: BlockToolType): voidKonversi sebuah blok ke tipe baru di tempat.
blocks.removeblocks.remove(index: number): voidHapus blok pada index yang diberikan.
blocks.moveblocks.move(fromIndex: number, toIndex: number): voidMemindahkan blok dari satu indeks ke indeks lain.
blocks.updateblocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): voidMemperbarui data blok yang ada di tempat. Tipe tidak berubah.
blocks.getblocks.get(blockId: string): EditorData['blocks'][number] | nullMengambil blok berdasarkan ID-nya. Mengembalikan null jika tidak ditemukan.
blocks.getAllblocks.getAll(): EditorData['blocks']Mengembalikan data semua blok sebagai array.
blocks.countblocks.count(): numberMengembalikan jumlah blok di editor.
focusfocus(): voidMemindahkan fokus ke editor, memfokuskan blok pertama.
blurblur(): voidMenghapus fokus aktif apa pun dari dalam editor.
destroydestroy(): voidMetode destroy() pada objek EditorAPI memanggil Editor.destroy() untuk instance ini.
selection.getselection.get(): Selection | nullMengembalikan objek seleksi jendela atau null.
selection.setselection.set(selection: Selection): voidMenetapkan seleksi jendela ke objek Selection yang diberikan.
selection.clearselection.clear(): voidMenghapus semua rentang dari seleksi jendela.
ui.showBlockMenuui.showBlockMenu(block: HTMLElement): voidMenampilkan menu tipe blok untuk elemen DOM blok yang diberikan.
ui.hideBlockMenuui.hideBlockMenu(): voidMenyembunyikan menu tipe blok jika terbuka.
ui.showToolbarui.showToolbar(x: number, y: number): voidMenampilkan toolbar inline pada koordinat viewport x, y yang diberikan.
ui.hideToolbarui.hideToolbar(): voidMenyembunyikan toolbar inline jika terlihat.
view.getCurrentViewview.getCurrentView(containerId: string): EditorView | nullMengembalikan tampilan saat ini (edit, preview, atau json) untuk containerId yang diberikan.
view.switchViewview.switchView(containerId: string, view: EditorView): voidMengalihkan editor ke tampilan yang ditentukan: edit, preview, atau json.

Contoh penggunaan umum

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

Kelas yang mengubah data blok tersimpan menjadi HTML hanya-baca di dalam elemen DOM. Kelas ini memiliki satu metode statis publik: render().

MetodeTanda tanganDeskripsi
Renderer.renderRenderer.render(config: RendererConfig): HTMLElementRender JSON blok tersimpan ke dalam kontainer sebagai HTML hanya-baca. Gunakan ini di mana pun Anda ingin menampilkan konten tanpa kemampuan pengeditan.

Contoh penggunaan umum

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

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

StyleManager

Kelas terpusat yang mengelola sistem tema. Menyediakan tiga metode statis publik yang berguna bagi konsumen: subscribe (untuk perubahan tema tingkat OS), getResolvedTheme (untuk membaca tema OS saat ini), dan injectStyles (untuk menyuntikkan CSS kustom).

MetodeTanda tanganDeskripsi
StyleManager.subscribeStyleManager.subscribe(cb: (theme: 'light' | 'dark') => void): () => voidBerlangganan perubahan token tema runtime. Listener terpicu setiap kali theme atau themeOverrides berubah.
StyleManager.getResolvedThemeStyleManager.getResolvedTheme(): 'light' | 'dark'Membaca tema OS saat ini ("light" atau "dark"). Mengembalikan "light" jika matchMedia tidak tersedia.
StyleManager.injectStylesStyleManager.injectStyles(styleId: string, styles: string): booleanMenyuntikkan string CSS ke document.head (gunakan styleId unik). Mengembalikan false jika sudah ada, true jika belum.

Contoh penggunaan umum

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