Pagsasaayos
Ang EditorConfig at RendererConfig ang mga entry point para sa bawat customisasyon. Ipasa ang alinman sa Editor.create() o Renderer.render() ayon sa pagkakasunod. Ang containerId lamang (at data para sa renderer) ang kinakailangan, lahat ng iba pang opsyon ay may ligtas na mga default.
EditorConfig
Ipasa ang EditorConfig bilang nag-iisang argumento sa Editor.create(). Ang kinakailangang containerId ay dapat tumugma sa isang umiiral na DOM element id.
| Opsyon | Uri | Kinakailangan | Paglalarawan |
|---|---|---|---|
| containerId | string | Oo | ID ng DOM element na mag-ho-host ng editor. Dapat mayroon na sa DOM bago tawagin ang Editor.create(). |
| maxHeight | number | Hindi | Pinakamataas na taas ng editor sa pixels. Itakda sa 0 (ang default) para walang limitasyon sa taas. |
| minHeight | number | Hindi | Pinakamababang taas ng editor sa pixels. Naka-default sa 300. |
| onChange | (data: EditorData) => void | Hindi | Callback na nagpapaputok sa tuwing nagbabago ang dokumento. Tumatanggap ng buong EditorData snapshot. |
| onReady | () => void | Hindi | Callback na nagpapaputok kapag ganap nang na-initialize ang editor at handa nang tumanggap ng mga API call. |
| placeholder | string | Hindi | Placeholder na teksto na ipinapakita kapag walang laman ang editor. Naka-default sa 'Start writing...'. |
| initialData | EditorData | Hindi | Pre-populated na EditorData na ilo-load kapag nag-mount ang editor. |
| initialView | 'edit' | 'preview' | 'json' | Hindi | Panimulang view mode. Isa sa: edit, preview, json. Naka-default sa 'edit'. |
| allowJsonViewEditing | boolean | Hindi | Kapag true, maaaring i-edit ang JSON view at ang mga pagbabago ay nagpapalipat pabalik sa dokumento. Naka-default sa false. |
| margins | BlockMargins | Hindi | Pandaigdigang itaas at ibabang margin (sa pixels) na inilalapat sa bawat block. Ang mga per-block na config ay may priyoridad. |
| styles | EditorStyles | Hindi | EditorStyles object para sa detalyadong CSS customisasyon ng editor chrome (mga toolbar, dialog, kontrol). |
| classNames | EditorClassNames | Hindi | EditorClassNames object para mag-attach ng mga CSS class name sa mga editor chrome element. |
| imageUploader | UploadFunction | Hindi | Async function na nag-a-upload ng image file at nagbabalik ng public URL string. |
| audioUploader | UploadFunction | Hindi | Async function na nag-a-upload ng audio file at nagbabalik ng public URL string. |
| videoUploader | UploadFunction | Hindi | Async function na nag-a-upload ng video file at nagbabalik ng public URL string. |
| theme | 'auto' | 'light' | 'dark' | Hindi | Kulay na scheme. Isa sa: auto (sumusunod sa system), light, dark. Naka-default sa auto. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Hindi | Per-mode na token overrides. Magbigay ng light at/o dark na token map para i-customize ang mga kulay nang hindi pinapalitan ang buong tema. |
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
Ipasa ang RendererConfig bilang nag-iisang argumento sa Renderer.render(). Parehong containerId at data ang kinakailangan.
| Opsyon | Uri | Kinakailangan | Paglalarawan |
|---|---|---|---|
| containerId | string | Oo | ID ng DOM element kung saan iniinjeksyon ang rendered output. |
| data | EditorData | Oo | Ang EditorData document na ire-render. Kinakailangan. |
| margins | BlockMargins | Hindi | Pandaigdigang itaas at ibabang margin (sa pixels) na inilalapat sa bawat rendered na block. |
| styles | BlockStyles | Hindi | BlockStyles map para sa per-block-type na CSS customisasyon ng rendered output. |
| classNames | BlockClassNames | Hindi | BlockClassNames map para sa per-block-type na CSS class name sa rendered output. |
| editorClassNames | EditorClassNames | Hindi | EditorClassNames na ipinasa sa mga block na nag-rerender ng mga interactive na component (hal. tooltip classNames para sa mga talata). |
| configs | Partial<BlockTypeOutputConfigs> | Hindi | Partial na mapa ng per-block na OutputConfig object. Maaaring itakda ng bawat entry ang mga block-level na margin at tooltip class name. |
| theme | 'auto' | 'light' | 'dark' | Hindi | Kulay na scheme. Isa sa: auto, light, dark. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Hindi | Per-mode na token overrides para sa rendered output. |
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 },
});Block-level na styling
Parehong tinatanggap ng EditorConfig at RendererConfig ang mga styles, classNames, at configs na naka-key ayon sa block type. Gamitin ang mga ito para sa mga targeted na override; tingnan ang pahina ng Themes para sa kumpletong per-token na sanggunian.
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,
});