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.
hasViewSwitcher	boolean	Tidak	Jika false, tombol edit, pratinjau, dan JSON tidak ditampilkan di bilah aksi. Default-nya true.
hasDocumentActions	boolean	Tidak	Jika false, tombol salin, unduh, dan kosongkan tidak ditampilkan di bilah aksi. Jika hasViewSwitcher juga false, bilah aksi tidak digambar. Default-nya true.
onClearRequest	() => Promise<boolean>	Tidak	Dipanggil saat Kosongkan ditekan. Halaman hanya dikosongkan jika ini menghasilkan true; penolakan membiarkan halaman tetap. Jika tidak ada, Kosongkan langsung mengosongkan.
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.
fileUploader	UploadFunction	Tidak	Fungsi unggah yang memindahkan lampiran blok berkas ke penyimpanan Anda.
locale	string	Tidak	Satu-satunya locale yang disunting editor. Blok multibahasa diratakan ke locale ini.
defaultLocale	string	Tidak	Locale cadangan saat blok tidak punya konten untuk locale yang diminta.
onLocaleFallback	(info: { blockId: string; locale: string }) => void	Tidak	Dipanggil saat sebuah blok jatuh ke locale lain, agar host bisa menampilkan indikator.
onInlineRewrite	(selection: string, action: InlineRewriteAction) => Promise<string \| null>	Tidak	Fungsi yang menulis ulang teks terpilih dengan AI; bila diatur, bilah alat menampilkan tombol tulis ulang.
inlineRewriteLabels	Partial<Record<InlineRewriteAction, string>>	Tidak	Menimpa label aksi menu tulis ulang, untuk pelokalan.
inlineRewriteTooltip	string	Tidak	Menimpa tooltip tongkat tulis ulang di bilah alat sebaris, untuk pelokalan.
blockToolLabels	Partial<Record<BlockToolType, string>>	Tidak	Menimpa label alat blok di kotak alat dan menu garis miring, untuk pelokalan.
blockToolbarLabels	Partial<Record<BlockToolbarLabel, string>>	Tidak	Menimpa teks bilah alat blok (tambah, pindah, hapus, dan lainnya) serta petunjuk yang tampil di kolom blok kosong, untuk pelokalan.
controlLabels	Partial<Record<ControlLabel, string>>	Tidak	Menimpa nama tombol bilah aksi (edit, pratinjau, JSON, salin, unduh, kosongkan), yang dipakai sebagai nama aksesibel dan tooltip-nya, untuk pelokalan.
dialogLabels	Partial<Record<DialogLabel, string>>	Tidak	Kata-kata yang ditampilkan dialog tautan, tooltip, dan status, menurut nama: judul, label kolom, placeholder, gaya status, Batal, dan Terapkan. Bahasa Inggris jika tidak ada.
resolveLink	(url: string) => Promise<Partial<EmbedData>>	Tidak	Mengisi snapshot embed yang ditempel dari server Anda: judul, file Drive, file gist, atau alasan tampilan langsung tidak memungkinkan. Pencarian yang gagal menggambar kartu sebagai alat tidak merespons, dengan Coba lagi di sampingnya.
onEmbedAction	(action: EmbedAction, blockId: string) => void	Tidak	Perbaikan di samping alasan kartu yang hanya bisa dilakukan host: connectGoogle mengirim anggota untuk menghubungkan akun Google-nya; retry ditangani editor sendiri.
disabledEmbedProviders	readonly string[]	Tidak	Alat embed yang dimatikan ruang kerja menurut kunci kawat (figma, miro, loom, google_drive, github_gist); tautannya digambar sebagai kartu yang menyebut alasannya.
pasteEmbeds	'live' \| 'offer' \| 'card'	Tidak	Apa yang terjadi saat menempel tautan yang didukung: tampilkan langsung (default), tawarkan, atau tampilkan kartu.
embedLabels	Partial<Record<EmbedLabel, string>>	Tidak	Kata terjemahan untuk baris alasan, aksi, dan label gist blok embed, dikunci oleh EmbedLabel; jika tidak, fallback bahasa Inggris.
resolveIssues	(urls: string[]) => Promise<Record<string, IssueSnapshot>>	Tidak	Menjawab tautan isu halaman dengan snapshot-nya, dikunci oleh URL. Jika tidak ada, chip dan kartu mempertahankan yang disimpan dokumen dan tidak ada yang diperbarui.
onIssueAction	(action: IssueAction, tool: string) => void	Tidak	Perbaikan di samping alasan isu yang hanya dapat dilakukan host: menghubungkan alat, yang membawa ke halaman Integrasi host.
issueCards	'off' \| 'on'	Tidak	Apakah tautan isu yang ditempel di barisnya sendiri menjadi kartu; off jika tidak ada. Chip di dalam kalimat selalu chip.
issueChip	{ assignee: boolean; status: boolean }	Tidak	Dua sakelar chip anggota: pil status dan penerima tugas. Keduanya aktif jika tidak ada.
issueLabels	Partial<Record<IssueLabel, string>>	Tidak	Kata terjemahan untuk chip isu, kartu, dan tabel isu tertaut, dikunci oleh IssueLabel; jika tidak, fallback bahasa Inggris.
jiraSites	readonly string[]	Tidak	URL situs Jira yang dijangkau koneksi ruang kerja, agar tautan di domain situs sendiri dikenali sebagai isu.
allowedBlockTools	readonly BlockToolType[]	Tidak	Tipe blok yang ditawarkan editor di menu blok, pencariannya, menu konversi dan saat menempel. Setiap blok terdaftar bila tidak diisi; blok tersimpan di luar daftar tetap dirender.
allowedInlineTools	readonly InlineToolType[]	Tidak	Tanda yang ditawarkan bilah alat sebaris. Setiap tanda terdaftar bila tidak diisi.
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,
});

Referensi

Paket

Konfigurasi

EditorConfig

RendererConfig

Styling tingkat blok