Konfigurasi
EditorConfig dan RendererConfig adalah titik masuk untuk setiap kustomisasi. Berikan salah satunya ke Editor.create() atau Renderer.render() masing-masing. Hanya containerId (dan data untuk renderer) yang diperlukan, semua opsi lainnya memiliki nilai default yang aman.
EditorConfig
Berikan EditorConfig sebagai satu-satunya argumen ke Editor.create(). containerId yang diperlukan harus cocok dengan id elemen DOM yang sudah ada.
| Opsi | Tipe | Diperlukan | Deskripsi |
|---|---|---|---|
| containerId | string | Ya | ID elemen DOM yang akan menampung editor. Harus ada di DOM sebelum Editor.create() dipanggil. |
| maxHeight | number | Tidak | Tinggi maksimum editor dalam piksel. Atur ke 0 (default) untuk tidak ada batas tinggi. |
| minHeight | number | Tidak | Tinggi minimum editor dalam piksel. Default-nya 300. |
| onChange | (data: EditorData) => void | Tidak | Callback yang dipicu setiap kali dokumen berubah. Menerima snapshot EditorData lengkap. |
| onReady | () => void | Tidak | Callback yang dipicu setelah editor sepenuhnya diinisialisasi dan siap menerima panggilan API. |
| placeholder | string | Tidak | Teks placeholder yang ditampilkan saat editor kosong. Default-nya 'Start writing...'. |
| initialData | EditorData | Tidak | EditorData yang sudah terisi sebelumnya untuk dimuat saat editor di-mount. |
| initialView | 'edit' | 'preview' | 'json' | Tidak | Mode tampilan awal. Salah satu dari: edit, preview, json. Default-nya 'edit'. |
| allowJsonViewEditing | boolean | Tidak | Jika true, tampilan JSON dapat diedit dan perubahan menyebar kembali ke dokumen. Default-nya false. |
| margins | BlockMargins | Tidak | Margin atas dan bawah global (dalam piksel) yang diterapkan ke setiap blok. Konfigurasi per-blok lebih diutamakan. |
| styles | EditorStyles | Tidak | Objek EditorStyles untuk kustomisasi CSS yang detail dari chrome editor (toolbar, dialog, kontrol). |
| classNames | EditorClassNames | Tidak | Objek EditorClassNames untuk melampirkan nama kelas CSS ke elemen chrome editor. |
| imageUploader | UploadFunction | Tidak | Fungsi async yang mengunggah file gambar dan mengembalikan string URL publik. |
| audioUploader | UploadFunction | Tidak | Fungsi async yang mengunggah file audio dan mengembalikan string URL publik. |
| videoUploader | UploadFunction | Tidak | Fungsi async yang mengunggah file video dan mengembalikan string URL publik. |
| theme | 'auto' | 'light' | 'dark' | Tidak | Skema warna. Salah satu dari: auto (mengikuti sistem), light, dark. Default-nya auto. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Tidak | Override token per mode. Sediakan peta token light dan/atau dark untuk menyesuaikan warna tanpa mengganti tema lengkap. |
TypeScript
import { Editor } from '@clepit/core';
const editor = Editor.create({
containerId: 'editor',
minHeight: 400,
placeholder: 'Start writing...',
theme: 'auto',
onChange: data => console.log(data),
onReady: () => console.log('Editor ready'),
imageUploader: async file => {
const form = new FormData();
form.append('file', file);
const res = await fetch('/api/upload', { body: form, method: 'POST' });
const { url } = await res.json();
return url;
},
});RendererConfig
Berikan RendererConfig sebagai satu-satunya argumen ke Renderer.render(). Baik containerId maupun data diperlukan.
| Opsi | Tipe | Diperlukan | Deskripsi |
|---|---|---|---|
| containerId | string | Ya | ID elemen DOM tempat output yang dirender akan disuntikkan. |
| data | EditorData | Ya | Dokumen EditorData yang akan dirender. Diperlukan. |
| margins | BlockMargins | Tidak | Margin atas dan bawah global (dalam piksel) yang diterapkan ke setiap blok yang dirender. |
| styles | BlockStyles | Tidak | Peta BlockStyles untuk kustomisasi CSS per-jenis-blok dari output yang dirender. |
| classNames | BlockClassNames | Tidak | Peta BlockClassNames untuk nama kelas CSS per-jenis-blok pada output yang dirender. |
| editorClassNames | EditorClassNames | Tidak | EditorClassNames yang diteruskan ke blok yang merender komponen interaktif (mis. classNames tooltip untuk paragraf). |
| configs | Partial<BlockTypeOutputConfigs> | Tidak | Peta parsial objek OutputConfig per blok. Setiap entri dapat menetapkan margin tingkat blok dan nama kelas tooltip. |
| theme | 'auto' | 'light' | 'dark' | Tidak | Skema warna. Salah satu dari: auto, light, dark. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Tidak | Override token per mode untuk output yang dirender. |
TypeScript
import { Renderer } from '@clepit/core';
import type { EditorData } from '@clepit/core';
const data: EditorData = await fetch('/api/content/123').then(r => r.json());
Renderer.render({
containerId: 'output',
data,
theme: 'auto',
margins: { bottom: 16, top: 16 },
});Styling tingkat blok
Baik EditorConfig maupun RendererConfig menerima styles, classNames, dan configs yang diberi kunci berdasarkan jenis blok. Gunakan ini untuk penggantian yang ditargetkan; lihat halaman Themes untuk referensi per-token lengkap.
TypeScript
import { Editor, Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames, EditorStyles } from '@clepit/core';
const editorStyles: EditorStyles = {
blockToolbar: { container: { borderRadius: '8px' } },
};
const blockStyles: BlockStyles = {
header: { h1: { fontFamily: 'Georgia, serif' } },
paragraph: { lineHeight: '1.75' },
table: { cell: { padding: '8px 12px' } },
};
const blockClassNames: BlockClassNames = {
paragraph: 'prose-paragraph',
header: { h1: 'prose-h1', h2: 'prose-h2' },
alert: { info: 'alert-info', error: 'alert-error' },
};
Editor.create({
containerId: 'editor',
styles: editorStyles,
});
Renderer.render({
containerId: 'output',
data,
styles: blockStyles,
classNames: blockClassNames,
});