Configuration
EditorConfig et RendererConfig sont les points d'entrée de toute personnalisation. Passez l'un ou l'autre à Editor.create() ou Renderer.render() respectivement. Seuls containerId (et data pour le renderer) sont obligatoires ; toutes les autres options ont des valeurs par défaut sûres.
EditorConfig
Passez EditorConfig comme seul argument à Editor.create(). Le containerId requis doit correspondre à un id d'élément DOM existant.
| Option | Type | Requis | Description |
|---|---|---|---|
| containerId | string | Oui | Identifiant de l'élément DOM qui hébergera l'éditeur. Doit exister dans le DOM avant l'appel à Editor.create(). |
| maxHeight | number | Non | Hauteur maximale de l'éditeur en pixels. Définissez à 0 (la valeur par défaut) pour ne pas limiter la hauteur. |
| minHeight | number | Non | Hauteur minimale de l'éditeur en pixels. Vaut 300 par défaut. |
| onChange | (data: EditorData) => void | Non | Rappel déclenché à chaque modification du document. Reçoit la capture complète de l'EditorData. |
| onReady | () => void | Non | Rappel déclenché une fois que l'éditeur est entièrement initialisé et prêt à recevoir des appels API. |
| placeholder | string | Non | Texte de remplacement affiché quand l'éditeur est vide. Vaut « Start writing... » par défaut. |
| initialData | EditorData | Non | EditorData préremplie à charger lors du montage de l'éditeur. |
| initialView | 'edit' | 'preview' | 'json' | Non | Mode d'affichage initial. L'une des valeurs : edit, preview, json. Vaut 'edit' par défaut. |
| allowJsonViewEditing | boolean | Non | Lorsque true, la vue JSON est modifiable et les modifications se propagent dans le document. Vaut false par défaut. |
| margins | BlockMargins | Non | Marge supérieure et inférieure globale (en pixels) appliquée à chaque bloc. Les configurations par bloc ont la priorité. |
| styles | EditorStyles | Non | Objet EditorStyles pour une personnalisation CSS fine de l'interface de l'éditeur (barres d'outils, boîtes de dialogue, contrôles). |
| classNames | EditorClassNames | Non | Objet EditorClassNames pour attacher des noms de classes CSS aux éléments de l'interface de l'éditeur. |
| imageUploader | UploadFunction | Non | Fonction asynchrone qui télécharge un fichier image et renvoie une URL publique sous forme de chaîne. |
| audioUploader | UploadFunction | Non | Fonction asynchrone qui télécharge un fichier audio et renvoie une URL publique sous forme de chaîne. |
| videoUploader | UploadFunction | Non | Fonction asynchrone qui télécharge un fichier vidéo et renvoie une URL publique sous forme de chaîne. |
| theme | 'auto' | 'light' | 'dark' | Non | Schéma de couleurs. L'une des valeurs : auto (suit le système), light, dark. Vaut auto par défaut. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Non | Substitutions de jetons par mode. Fournissez des cartes de jetons light et/ou dark pour personnaliser les couleurs sans remplacer le thème complet. |
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
Passez RendererConfig comme seul argument à Renderer.render(). containerId et data sont tous les deux obligatoires.
| Option | Type | Requis | Description |
|---|---|---|---|
| containerId | string | Oui | Identifiant de l'élément DOM où sera injecté le rendu. |
| data | EditorData | Oui | Le document EditorData à rendre. Obligatoire. |
| margins | BlockMargins | Non | Marge supérieure et inférieure globale (en pixels) appliquée à chaque bloc rendu. |
| styles | BlockStyles | Non | Carte BlockStyles pour la personnalisation CSS par type de bloc du rendu. |
| classNames | BlockClassNames | Non | Carte BlockClassNames pour les noms de classes CSS par type de bloc dans le rendu. |
| editorClassNames | EditorClassNames | Non | EditorClassNames transmis aux blocs qui rendent des composants interactifs (ex. : noms de classes tooltip pour les paragraphes). |
| configs | Partial<BlockTypeOutputConfigs> | Non | Carte partielle d'objets OutputConfig par bloc. Chaque entrée peut définir des marges au niveau du bloc et des noms de classes tooltip. |
| theme | 'auto' | 'light' | 'dark' | Non | Schéma de couleurs. L'une des valeurs : auto, light, dark. |
| themeOverrides | { light?: ThemeTokens; dark?: ThemeTokens } | Non | Substitutions de jetons par mode pour le rendu. |
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 },
});Style au niveau du bloc
EditorConfig et RendererConfig acceptent tous les deux styles, classNames et configs indexés par type de bloc. Utilisez-les pour des substitutions ciblées ; consultez la page Thèmes pour la référence complète par jeton.
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,
});