Seadistamine

EditorConfig ja RendererConfig on kõigi kohanduste sisenemispunktid. Edasta need vastavalt Editor.create() või Renderer.render() meetodile. Ainult containerId (ja andmete jaoks data) on nõutavad, kõigil muudel valikutel on turvalised vaikeväärtused.

EditorConfig

Edasta EditorConfig ainus argument Editor.create() meetodile. Nõutav containerId peab vastama olemasolevale DOM-elemendi id-le.

Valik	Tüüp	Nõutav	Kirjeldus
containerId	string	Jah	DOM-elemendi ID, mis majutab redaktorit. Peab eksisteerima DOM-is enne Editor.create() kutsumist.
maxHeight	number	Ei	Redaktori maksimaalne kõrgus pikslites. Määra 0 (vaikimisi) kõrguspiirangu puudumiseks.
minHeight	number	Ei	Redaktori minimaalne kõrgus pikslites. Vaikimisi 300.
onChange	(data: EditorData) => void	Ei	Tagasihelistamine, mis käivitatakse iga kord, kui dokument muutub. Saab täieliku EditorData hetktõmmise.
onReady	() => void	Ei	Tagasihelistamine, mis käivitatakse, kui redaktor on täielikult lähtestatud ja valmis API-kutseid vastu võtma.
placeholder	string	Ei	Kohatäite tekst, mis kuvatakse, kui redaktor on tühi. Vaikimisi 'Start writing...'.
initialData	EditorData	Ei	Eelnevalt täidetud EditorData, mida laaditakse redaktori monteerimisel.
initialView	'edit' \| 'preview' \| 'json'	Ei	Algusvaatem. Üks järgmistest: edit, preview, json. Vaikimisi 'edit'.
allowJsonViewEditing	boolean	Ei	Kui true, on JSON-vaade redigeeritav ja muudatused kanduvad tagasi dokumenti. Vaikimisi false.
hasViewSwitcher	boolean	Ei	Kui false, jäetakse toiminguribalt välja muutmise, eelvaate ja JSON-i nupud. Vaikimisi true.
hasDocumentActions	boolean	Ei	Kui false, jäetakse toiminguribalt välja kopeerimise, allalaadimise ja tühjendamise nupud. Kui ka hasViewSwitcher on false, toiminguriba ei joonistata. Vaikimisi true.
onClearRequest	() => Promise<boolean>	Ei	Kutsutakse, kui vajutatakse tühjendamise nuppu. Leht tühjendatakse ainult siis, kui see lahendub väärtuseks true; tagasilükkamine jätab lehe alles. Kui puudub, tühjendatakse kohe.
margins	BlockMargins	Ei	Globaalne ülemine ja alumine veerised (pikslites), mida rakendatakse igale plokile. Plokitaseme seaded on ülimuslikud.
styles	EditorStyles	Ei	EditorStyles objekt redaktori kroomi (tööriistaribad, dialoogid, juhtelemendid) peene CSS-kohanduse jaoks.
classNames	EditorClassNames	Ei	EditorClassNames objekt CSS-klassinimede lisamiseks redaktori kroomi elementidele.
imageUploader	UploadFunction	Ei	Asünkroonne funktsioon, mis laadib üles pildifaili ja tagastab avaliku URL-stringi.
audioUploader	UploadFunction	Ei	Asünkroonne funktsioon, mis laadib üles helifaili ja tagastab avaliku URL-stringi.
videoUploader	UploadFunction	Ei	Asünkroonne funktsioon, mis laadib üles videofaili ja tagastab avaliku URL-stringi.
fileUploader	UploadFunction	Ei	Üleslaadimisfunktsioon, mis viib failiploki manused sinu salvestusse.
locale	string	Ei	Ainus lokaat, mida redaktor muudab. Mitmekeelsed plokid lamendatakse sellesse lokaati.
defaultLocale	string	Ei	Varulokaat, mida kasutatakse, kui plokil pole soovitud lokaadi sisu.
onLocaleFallback	(info: { blockId: string; locale: string }) => void	Ei	Kutsutakse, kui plokk langeb tagasi teise lokaati, et host saaks näidata indikaatorit.
onInlineRewrite	(selection: string, action: InlineRewriteAction) => Promise<string \| null>	Ei	Funktsioon, mis kirjutab valitud teksti AI-ga ümber; kui määratud, näitab tööriistariba ümberkirjutamise nuppu.
inlineRewriteLabels	Partial<Record<InlineRewriteAction, string>>	Ei	Kirjutab ümber ümberkirjutamismenüü tegevuste sildid, lokaliseerimiseks.
inlineRewriteTooltip	string	Ei	Kirjutab ümber tekstisisese tööriistariba ümberkirjutamisvõlukepi kohtspikri, lokaliseerimiseks.
blockToolLabels	Partial<Record<BlockToolType, string>>	Ei	Kirjutab ümber plokitööriistade sildid tööriistakastis ja kaldkriipsumenüüs, lokaliseerimiseks.
blockToolbarLabels	Partial<Record<BlockToolbarLabel, string>>	Ei	Kirjutab ümber plokitööriistariba tekstid (lisa, liiguta, kustuta jm) ja tühjades plokiväljades näidatavad vihjed, lokaliseerimiseks.
controlLabels	Partial<Record<ControlLabel, string>>	Ei	Kirjutab ümber toiminguriba nuppude nimed (muuda, eelvaade, JSON, kopeeri, laadi alla, tühjenda), mida kasutatakse nende ligipääsetava nime ja kohtspikrina, lokaliseerimiseks.
dialogLabels	Partial<Record<DialogLabel, string>>	Ei	Lingi, kohtspikri ja oleku dialoogide sõnad nime järgi: pealkirjad, väljade sildid, kohatäited, oleku stiilid, Tühista ja Rakenda. Kui puuduvad, inglise keeles.
resolveLink	(url: string) => Promise<Partial<EmbedData>>	Ei	Täidab kleebitud manuse hetktõmmise sinu serverist: pealkiri, Drive’i fail, gisti failid või põhjus, miks otsevaade pole võimalik. Vea viskav otsing joonistab kaardi kui tööriist ei vastanud, kõrval Proovi uuesti.
onEmbedAction	(action: EmbedAction, blockId: string) => void	Ei	Kaardi põhjuse kõrval olev parandus, mida saab teha ainult host: connectGoogle saadab liikme oma Google’i kontot ühendama; retry käsitleb redaktor ise.
disabledEmbedProviders	readonly string[]	Ei	Tööruumi välja lülitatud manustamistööriistad võtme järgi (figma, miro, loom, google_drive, github_gist); nende lingid joonistuvad kaartidena, mis ütlevad miks.
pasteEmbeds	'live' \| 'offer' \| 'card'	Ei	Mida toetatud lingi kleepimine teeb: näitab otse (vaikimisi), pakub seda või näitab kaarti.
embedLabels	Partial<Record<EmbedLabel, string>>	Ei	Tõlgitud sõnad manustamisploki põhjuseridade, toimingute ja gisti siltide jaoks, võtmega EmbedLabel; muidu ingliskeelsed varuväärtused.
resolveIssues	(urls: string[]) => Promise<Record<string, IssueSnapshot>>	Ei	Vastab lehe teemalinkidele nende hetktõmmistega, võtmega URL. Puudumisel jäävad kiibid ja kaardid dokumendi salvestatu juurde ja midagi ei värskendata.
onIssueAction	(action: IssueAction, tool: string) => void	Ei	Teema põhjuse kõrval olev parandus, mida saab teha ainult host: tööriista ühendamine, mis viib hosti integratsioonide lehele.
issueCards	'off' \| 'on'	Ei	Kas omaette reale kleebitud teemalink muutub kaardiks; puudumisel off. Kiip lauses on alati kiip.
issueChip	{ assignee: boolean; status: boolean }	Ei	Liikme kaks kiibilülitit: oleku pill ja vastutaja. Puudumisel on mõlemad sees.
issueLabels	Partial<Record<IssueLabel, string>>	Ei	Tõlgitud sõnad teemakiibi, kaardi ja seotud teemade tabeli jaoks, võtmega IssueLabel; muidu ingliskeelsed varuväärtused.
jiraSites	readonly string[]	Ei	Jira saitide URL-id, kuhu tööruumi ühendused ulatuvad, et saidi oma domeenil olev link tuntaks ära teemana.
allowedBlockTools	readonly BlockToolType[]	Ei	Plokitüübid, mida redaktor pakub plokimenüüs, selle otsingus, teisendusmenüüs ja kleepimisel. Puudumisel iga registreeritud plokk; loendist väljas salvestatud plokk renderdatakse endiselt.
allowedInlineTools	readonly InlineToolType[]	Ei	Märgistused, mida reasisene tööriistariba pakub. Puudumisel iga registreeritud märgistus.
theme	'auto' \| 'light' \| 'dark'	Ei	Värviskeem. Üks järgmistest: auto (järgib süsteemi), light, dark. Vaikimisi auto.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	Ei	Režiimipõhised tokeni alistamised. Esita light ja/või dark tokenkaardid värvide kohandamiseks ilma täielikku teemat asendamata.

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

Edasta RendererConfig ainus argument Renderer.render() meetodile. Nii containerId kui ka data on nõutavad.

Valik	Tüüp	Nõutav	Kirjeldus
containerId	string	Jah	DOM-elemendi ID, kuhu renderdatud väljund süstitakse.
data	EditorData	Jah	Renderdatav EditorData dokument. Nõutav.
margins	BlockMargins	Ei	Globaalne ülemine ja alumine veerised (pikslites), mida rakendatakse igale renderdatud plokile.
styles	BlockStyles	Ei	BlockStyles kaart renderdatud väljundi plokitüübipõhiseks CSS-kohanduseks.
classNames	BlockClassNames	Ei	BlockClassNames kaart renderdatud väljundi plokitüübipõhiste CSS-klassinimede jaoks.
editorClassNames	EditorClassNames	Ei	EditorClassNames, mis edastatakse plokkidele, mis renderdavad interaktiivseid komponente (nt lõigu tooltip-klassinimed).
configs	Partial<BlockTypeOutputConfigs>	Ei	Osaline kaart plokipõhistest OutputConfig objektidest. Iga kirje saab seada plokitaseme veerised ja tooltip-klassinimed.
theme	'auto' \| 'light' \| 'dark'	Ei	Värviskeem. Üks järgmistest: auto, light, dark.
themeOverrides	{ light?: ThemeTokens; dark?: ThemeTokens }	Ei	Renderdatud väljundi režiimipõhised tokeni alistamised.

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

Plokitaseme stiilimine

Nii EditorConfig kui ka RendererConfig aktsepteerivad styles, classNames ja configs plokitüübi järgi võtmestatud. Kasuta neid sihitud alistamisteks; täieliku tokenite viite leiad Themes lehelt.

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

Viide

Paketid

Seadistamine

EditorConfig

RendererConfig

Plokitaseme stiilimine