Einbettung

Die Integration des Clepit-Editors oder -Renderers in jede Anwendung ist unkompliziert: ein DOM-Container ist der einzige Steuerungspunkt.

Den Editor einbinden

Geben Sie dem Container-Element eine id, rufen Sie `Editor.create({ containerId, ... })` auf, behalten Sie die zurückgegebene `EditorAPI` und rufen Sie beim Aufräumen `Editor.destroy(containerId)` auf.

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');

Ausgabe schreibgeschützt rendern

Rufen Sie `Renderer.render({ containerId, data })` auf. Das folgende Beispiel zeigt das echte React-Muster aus der `DocsRenderer`-Komponente: `useId` generiert eine eindeutige Container-id und `useEffect` löst das Rendering aus.

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} />;
};

Wo jede API läuft

Editor und Renderer mounten echtes DOM und laufen daher nur im Browser: Nutze für sie Effects oder die use-client-Direktive. Server-Ausgabe braucht sie nicht: renderBlocks zeichnet fertiges HTML ganz ohne DOM, siehe unten.

Rufe Editor.create oder Renderer.render nicht in einer Server-Komponente auf; sie brauchen ein echtes document. Zum Rendern auf dem Server nutze stattdessen renderBlocks.

Server-Rendering

renderBlocks zeichnet dasselbe Dokument ohne DOM zu einem fertigen HTML-String, sodass der Server echtes Markup senden kann: Crawler lesen es, und beim Mounten wird nichts neu gezeichnet. Liefere pageStylesheet() daneben aus und rufe nach dem Mounten activateBlocks auf.

TypeScript

import { activateBlocks, pageStylesheet, renderBlocks } from '@clepit/core';

// On the server: finished HTML, no DOM needed
const html = renderBlocks(doc.blocks);
const css = pageStylesheet();

// In the browser, after mount: wire the interactive blocks
const dispose = activateBlocks(container, doc.blocks);

React im Einsatz? @clepit/react verpackt genau diese Pipeline als ClepitContent, eine serverorientierte Komponente; siehe die React-Seite.

Framework-unabhängig

Das Kernpaket @clepit/core ist reines TypeScript, keine React-Abhängigkeit. Ob Sie React, Vue, Svelte, Angular oder Vanilla-TS/JS verwenden, alle nutzen dieselbe API.

Erste Schritte