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

Установите пакет, смонтируйте его в любой элемент-контейнер по id и извлекайте чистый JSON, когда нужно. У Clepit нет зависимости от фреймворка, поэтому он встраивается в React, Vue, Svelte или чистый JavaScript без оберток.

Установка

Добавьте @clepit/core в свой проект. Редактор поставляется в виде единого ESM-бандла с определениями TypeScript.

bun add @clepit/core

Создать редактор

Добавьте div, затем вызовите Editor.create с нужными параметрами EditorConfig. containerId: единственное обязательное поле; всё остальное необязательно.

import { Editor } from '@clepit/core';

const editor = Editor.create({
  containerId: 'editor',
  onChange: data => console.log(data),
  placeholder: 'Start writing…',
  theme: 'auto',
});

Редактировать и сохранять

Вызовите editor.data.extract() после того, как пользователи закончат ввод, чтобы сериализовать в формат JSON EditorData. Нагрузка содержит массив { blocks } с каждым блоком.

const data = editor.data.extract();
// data: EditorData
// {
//   time: 1745000000000,
//   version: '1.0.0',
//   blocks: [
//     { id: 'abc123', type: 'paragraph', data: { html: 'Hello world' } },
//     ...
//   ]
// }

Рендеринг в режиме чтения

Используйте Renderer.render для вывода HTML из EditorData, хранящихся где угодно. Renderer не хранит состояние. Ему нужен только div с containerId.

import { Renderer } from '@clepit/core';

Renderer.render({
  containerId: 'output',
  data: savedEditorData,
  margins: { bottom: 0, top: 0 },
});

Независимость от фреймворка

@clepit/core не имеет зависимостей от сторонних фреймворков. Оба метода, Editor.create и Renderer.render, требуют только полного DOM API: React, Vue, Svelte и чистый JavaScript работают напрямую.