埋め込み

Clepit エディターまたはレンダラーをアプリに統合するのは簡単です: DOM コンテナが唯一の制御ポイントです。

エディターのマウント

コンテナ要素に id を付与し、`Editor.create({ containerId, ... })` を呼び出し、返された `EditorAPI` を保持して、破棄時に `Editor.destroy(containerId)` を呼び出します。

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

出力を読み取り専用でレンダリング

`Renderer.render({ containerId, data })` を呼び出します。以下の例は `DocsRenderer` コンポーネントの実際の React パターンを示しています: `useId` がユニークなコンテナ id を生成し、`useEffect` がレンダリングをトリガーします。

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

各 API が動く場所

Editor と Renderer はライブ DOM をマウントするため、ブラウザでのみ動きます。これらには effects か use client ディレクティブを使ってください。サーバー出力には不要です。renderBlocks は DOM なしで完成した HTML を描画します (下記参照)。

サーバーコンポーネント内で Editor.create や Renderer.render を呼ばないでください。実際の document が必要です。サーバーで描画するには代わりに renderBlocks を使います。

サーバーレンダリング

renderBlocks は同じドキュメントを DOM なしで完成した HTML 文字列に描画します。サーバーは本物のマークアップを送信でき、クローラーが読め、マウント時に再描画されません。pageStylesheet() を併せて配信し、マウント後に activateBlocks を呼びます。

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 をお使いですか。@clepit/react はまさにこのパイプラインを、サーバーファーストのコンポーネント ClepitContent として提供します。React のページをご覧ください。

フレームワーク非依存

コア @clepit/core パッケージは純粋な TypeScript です。React への依存はありません。React、Vue、Svelte、Angular、あるいはバニラ TS/JS を使用しても、すべて同じ API を利用します。

はじめに

ガイド