Встраивание

Интеграция редактора или рендерера 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 })`. Пример ниже показывает реальный React-паттерн из компонента `DocsRenderer`: `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 и потому работают только в браузере: используйте для них эффекты или директиву use client. Серверному выводу они не нужны: renderBlocks рисует готовый HTML вообще без DOM, см. ниже.

Не вызывайте Editor.create или Renderer.render внутри серверного компонента; им нужен настоящий document. Для отрисовки на сервере используйте renderBlocks.

Серверный рендеринг

renderBlocks рисует тот же документ в готовую HTML-строку без DOM, поэтому сервер может отправлять настоящую разметку: краулеры её читают, и при монтировании ничего не перерисовывается. Отдавайте рядом 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.

Начало работы

Руководства