Passer au contenu principal

Intégration

L'intégration de l'éditeur ou du rendu Clepit dans n'importe quelle application est simple : un conteneur DOM est le seul point de contrôle.

Montage de l'éditeur

Donnez un identifiant à l'élément conteneur, appelez `Editor.create({ containerId, ... })`, conservez l'`EditorAPI` retourné et appelez `Editor.destroy(containerId)` lors du nettoyage.

TypeScript
import { Editor } from '@clepit/core';
import type { EditorAPI } from '@clepit/core';

// 1. Give your container a stable id
// <div id="my-editor"></div>

// 2. Create the editor and hold the returned API
const editor: EditorAPI = Editor.create({
  containerId: 'my-editor',
  minHeight: 400,
  placeholder: 'Start writing...',
  theme: 'auto',
  onChange: data => console.log(data),
  onReady: () => console.log('Editor ready'),
});

// 3. Extract content any time
const data = editor.data.extract();

// 4. Destroy on teardown (e.g. component unmount)
Editor.destroy('my-editor');

Rendu de la sortie en lecture seule

Appelez `Renderer.render({ containerId, data })`. L'exemple ci-dessous montre le vrai motif React du composant `DocsRenderer` : `useId` génère un identifiant de conteneur unique et `useEffect` déclenche le rendu.

TSX
import { Renderer } from '@clepit/core';
import type { EditorData } from '@clepit/core';
import { useEffect, useId } from 'react';

type Props = { content: EditorData };

const ReadOnlyView = ({ content }: Props) => {
  // useId produces a stable, unique id per component instance
  const containerId = useId().replace(/[^a-z0-9]/gi, '');

  useEffect(() => {
    Renderer.render({
      containerId,
      data: content,
      margins: { bottom: 0, top: 0 },
    });
  }, [containerId, content]);

  return <div id={containerId} />;
};

Rendu côté client uniquement / SSR

L'éditeur et le rendu fonctionnent tous les deux sur le DOM, ils s'exécutent donc uniquement dans le navigateur : utilisez les effets (`useEffect`) ou la directive `'use client'`. Ils ne fonctionnent pas lors du SSR.

N'appelez pas `Editor.create` ni `Renderer.render` en dehors de `useEffect` ou dans un composant serveur ; cela provoquera une erreur "document is not defined".

Indépendant du framework

Le package principal @clepit/core est du TypeScript pur, aucune dépendance à React. Que vous utilisiez React, Vue, Svelte, Angular ou du TS/JS vanille, tous utilisent la même API.