Usanidi

EditorConfig na RendererConfig ni vituo vya kuingilia kwa kila ubinafsishaji. Pita moja kati yake kwa Editor.create() au Renderer.render() ipasavyo. Ni containerId tu (na data kwa renderer) inayohitajika, chaguzi zote nyingine zina mipangilio salama ya chaguo-msingi.

EditorConfig

Pita EditorConfig kama hoja pekee kwa Editor.create(). containerId inayohitajika lazima ilingane na id ya kipengele cha DOM kilichopo.

Chaguo	Aina	Inahitajika	Maelezo
containerId	string	Ndiyo	ID ya kipengele cha DOM ambacho kitaandaa kihariri. Lazima kiwepo kwenye DOM kabla ya Editor.create() kuitwa.
maxHeight	number	Hapana	Urefu wa juu zaidi wa kihariri kwa pixels. Weka 0 (chaguo-msingi) kwa hakuna kikomo cha urefu.
minHeight	number	Hapana	Urefu wa chini zaidi wa kihariri kwa pixels. Chaguo-msingi ni 300.
onChange	(data: EditorData) => void	Hapana	Callback inayowaka kila wakati hati inabadilika. Inapokea picha kamili ya EditorData.
onReady	() => void	Hapana	Callback inayowaka mara kihariri kimekamilika kuanzishwa na kiko tayari kukubali simu za API.
placeholder	string	Hapana	Maandishi ya mpangilio yaliyoonyeshwa wakati kihariri kiko tupu. Chaguo-msingi ni 'Start writing...'.
initialData	EditorData	Hapana	EditorData iliyojazwa awali kupakia wakati kihariri kinawekwa.
initialView	'edit' \| 'preview' \| 'json'	Hapana	Hali ya mwanzo ya mtazamo. Moja ya: edit, preview, json. Chaguo-msingi ni 'edit'.
allowJsonViewEditing	boolean	Hapana	Iwapo true, mtazamo wa JSON unaweza kuhaririwa na mabadiliko yanaenea nyuma kwenye hati. Chaguo-msingi ni false.
hasViewSwitcher	boolean	Hapana	Iwapo false, vitufe vya kuhariri, kuhakiki na JSON huondolewa kwenye upau wa vitendo. Chaguo-msingi ni true.
hasDocumentActions	boolean	Hapana	Iwapo false, vitufe vya kunakili, kupakua na kufuta huondolewa kwenye upau wa vitendo. Iwapo hasViewSwitcher pia ni false, upau wa vitendo hauchorwi. Chaguo-msingi ni true.
onClearRequest	() => Promise<boolean>	Hapana	Huitwa Futa inapobonyezwa. Ukurasa hufutwa tu ikiwa itarudisha true; kukataliwa kunaacha ukurasa ulivyo. Isipokuwepo, Futa hufuta mara moja.
margins	BlockMargins	Hapana	Pembezoni ya juu na chini ya ulimwenguni (kwa pixels) inayotumika kwa kila block. Mipangilio ya kila block ina kipaumbele.
styles	EditorStyles	Hapana	Kitu cha EditorStyles kwa ubinafsishaji wa CSS wa kina wa chrome ya kihariri (mwambaa wa zana, mazungumzo, vidhibiti).
classNames	EditorClassNames	Hapana	Kitu cha EditorClassNames kuambatanisha majina ya darasa la CSS kwa vipengele vya chrome ya kihariri.
imageUploader	UploadFunction	Hapana	Kazi ya async inayopakia faili la picha na kurudisha mfuatano wa URL ya umma.
audioUploader	UploadFunction	Hapana	Kazi ya async inayopakia faili la sauti na kurudisha mfuatano wa URL ya umma.
videoUploader	UploadFunction	Hapana	Kazi ya async inayopakia faili la video na kurudisha mfuatano wa URL ya umma.
fileUploader	UploadFunction	Hapana	Kipengele cha kupakia kinachohamisha viambatisho vya kizuizi cha faili kwenye hifadhi yako.
locale	string	Hapana	Lugha moja pekee ambayo kihariri huhariri. Vizuizi vya lugha nyingi husawazishwa hadi lugha hii.
defaultLocale	string	Hapana	Lugha mbadala inayotumika wakati kizuizi hakina maudhui ya lugha iliyoombwa.
onLocaleFallback	(info: { blockId: string; locale: string }) => void	Hapana	Huitwa wakati kizuizi kinaporudi kwenye lugha nyingine, ili mwenyeji aonyeshe kiashiria.
onInlineRewrite	(selection: string, action: InlineRewriteAction) => Promise<string \| null>	Hapana	Kipengele kinachoandika upya maandishi yaliyochaguliwa kwa AI; kikiwekwa, upau wa zana huonyesha kitufe cha kuandika upya.
inlineRewriteLabels	Partial<Record<InlineRewriteAction, string>>	Hapana	Hubadilisha lebo za vitendo vya menyu ya kuandika upya, kwa utafsiri.
inlineRewriteTooltip	string	Hapana	Hubadilisha kidokezo cha fimbo ya kuandika upya kwenye upau wa vifaa wa ndani ya mstari, kwa utafsiri.
blockToolLabels	Partial<Record<BlockToolType, string>>	Hapana	Hubadilisha lebo za zana za vizuizi kwenye kisanduku cha zana na menyu ya mkwaju, kwa utafsiri.
blockToolbarLabels	Partial<Record<BlockToolbarLabel, string>>	Hapana	Hubadilisha maandishi ya upau wa zana wa kizuizi (ongeza, hamisha, futa, na mengineyo) na vidokezo vinavyoonyeshwa katika sehemu tupu za kizuizi, kwa utafsiri.
controlLabels	Partial<Record<ControlLabel, string>>	Hapana	Hubadilisha majina ya vitufe vya upau wa vitendo (hariri, hakiki, JSON, nakili, pakua, futa), yanayotumika kama majina yao yanayofikika na vidokezo, kwa utafsiri.
dialogLabels	Partial<Record<DialogLabel, string>>	Hapana	Maneno yanayoonyeshwa na vidirisha vya kiungo, kidokezo na hali, kwa jina: vichwa, lebo za sehemu, maandishi ya mfano, mitindo ya hali, Ghairi na Tumia. Kiingereza yakikosekana.
resolveLink	(url: string) => Promise<Partial<EmbedData>>	Hapana	Hujaza picha ya haraka ya kipachiko kilichobandikwa kutoka kwa seva yako: kichwa, faili ya Drive, faili za gist, au sababu mwonekano wa moja kwa moja hauwezekani. Utafutaji unaoshindwa huchora kadi kama zana haikujibu, na Jaribu tena kando yake.
onEmbedAction	(action: EmbedAction, blockId: string) => void	Hapana	Suluhisho kando ya sababu ya kadi ambalo mwenyeji pekee anaweza kufanya: connectGoogle humtuma mwanachama kuunganisha akaunti yake ya Google; retry hushughulikiwa na kihariri chenyewe.
disabledEmbedProviders	readonly string[]	Hapana	Zana za kupachika zilizozimwa na nafasi ya kazi kwa ufunguo (figma, miro, loom, google_drive, github_gist); viungo vyake huchorwa kama kadi zinazosema kwa nini.
pasteEmbeds	'live' \| 'offer' \| 'card'	Hapana	Kinachotokea unapobandika kiungo kinachotumika: kuonyesha moja kwa moja (chaguo-msingi), kutoa pendekezo, au kuonyesha kadi.
embedLabels	Partial<Record<EmbedLabel, string>>	Hapana	Maneno yaliyotafsiriwa kwa mistari ya sababu, vitendo na lebo za gist za kizuizi cha kupachika, kwa ufunguo EmbedLabel; vinginevyo Kiingereza.
resolveIssues	(urls: string[]) => Promise<Record<string, IssueSnapshot>>	Hapana	Hujibu viungo vya masuala vya ukurasa kwa picha zao, kwa ufunguo wa URL. Ikikosekana, chipu na kadi huhifadhi kile hati ilihifadhi na hakuna kinachosasishwa.
onIssueAction	(action: IssueAction, tool: string) => void	Hapana	Marekebisho kando ya sababu ya suala ambayo mwenyeji pekee anaweza kufanya: kuunganisha zana, ambayo hupeleka kwenye ukurasa wa Miunganisho wa mwenyeji.
issueCards	'off' \| 'on'	Hapana	Ikiwa kiungo cha suala kilichobandikwa kwenye mstari wake kinakuwa kadi; off ikikosekana. Chipu ndani ya sentensi daima ni chipu.
issueChip	{ assignee: boolean; status: boolean }	Hapana	Swichi mbili za chipu za mwanachama: kidonge cha hali na mhusika. Zote zimewashwa ikikosekana.
issueLabels	Partial<Record<IssueLabel, string>>	Hapana	Maneno yaliyotafsiriwa kwa chipu ya suala, kadi na jedwali la masuala yaliyounganishwa, kwa ufunguo IssueLabel; vinginevyo Kiingereza.
jiraSites	readonly string[]	Hapana	URL za tovuti za Jira ambazo miunganisho ya eneo la kazi hufikia, ili kiungo kwenye kikoa cha tovuti yenyewe kitambulike kama suala.
allowedBlockTools	readonly BlockToolType[]	Hapana	Aina za vitalu ambazo kihariri hutoa kwenye menyu ya vitalu, utafutaji wake, menyu ya kubadilisha na wakati wa kubandika. Kila kitalu kilichosajiliwa ikikosekana; kitalu kilichohifadhiwa nje ya orodha bado kinaonyeshwa.
allowedInlineTools	readonly InlineToolType[]	Hapana	Alama ambazo upau wa zana wa ndani ya mstari hutoa. Kila alama iliyosajiliwa ikikosekana.
theme	'auto' \| 'light' \| 'dark'	Hapana	Mpango wa rangi. Moja ya: auto (inafuata mfumo), light, dark. Chaguo-msingi ni auto.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	Hapana	Ubatilishaji wa token kwa kila hali. Toa ramani za token za light na/au dark kubinafsisha rangi bila kubadilisha mandhari nzima.

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

Pita RendererConfig kama hoja pekee kwa Renderer.render(). containerId na data zote mbili zinahitajika.

Chaguo	Aina	Inahitajika	Maelezo
containerId	string	Ndiyo	ID ya kipengele cha DOM ambapo matokeo yaliyochapishwa yataingizwa.
data	EditorData	Ndiyo	Hati ya EditorData ya kuchapishwa. Inahitajika.
margins	BlockMargins	Hapana	Pembezoni ya juu na chini ya ulimwenguni (kwa pixels) inayotumika kwa kila block iliyochapishwa.
styles	BlockStyles	Hapana	Ramani ya BlockStyles kwa ubinafsishaji wa CSS wa kila aina ya block ya matokeo yaliyochapishwa.
classNames	BlockClassNames	Hapana	Ramani ya BlockClassNames kwa majina ya darasa la CSS ya kila aina ya block kwenye matokeo yaliyochapishwa.
editorClassNames	EditorClassNames	Hapana	EditorClassNames zilizopitishwa kwa blocks ambazo zinaonyesha vipengele vya mwingiliano (mf. classNames za tooltip kwa aya).
configs	Partial<BlockTypeOutputConfigs>	Hapana	Ramani ya sehemu ya vitu vya OutputConfig kwa kila block. Kila ingizo linaweza kuweka pembezoni za ngazi ya block na majina ya darasa la tooltip.
theme	'auto' \| 'light' \| 'dark'	Hapana	Mpango wa rangi. Moja ya: auto, light, dark.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	Hapana	Ubatilishaji wa token kwa kila hali kwa matokeo yaliyochapishwa.

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 },
});

Uundaji wa mtindo wa ngazi ya block

Zote EditorConfig na RendererConfig zinakubali styles, classNames, na configs zilizofungwa kwa aina ya block. Tumia hizi kwa ubatilishaji uliolenga; angalia ukurasa wa Themes kwa marejeo kamili ya kila token.

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,
});

Marejeo

Vifurushi

Usanidi

EditorConfig

RendererConfig

Uundaji wa mtindo wa ngazi ya block