Справочник API

Публичные экспорты из @clepit/core. Каждый символ ниже содержит типизированную сигнатуру и минимальный пример использования.

Editor

Основной класс редактора. Editor предоставляет два публичных статических метода: create (основная фабрика) и destroy. Метод create() возвращает объект EditorAPI, через который доступны все методы экземпляра после монтирования редактора.

Метод	Сигнатура	Описание
Editor.create	Editor.create(config: EditorConfig): EditorAPI	Создайте новый экземпляр редактора и смонтируйте его в DOM-элемент с указанным containerId.
Editor.destroy	Editor.destroy(containerId: string): void	Метод destroy() на объекте EditorAPI вызывает Editor.destroy() для данного экземпляра.

Метод	Сигнатура	Описание
data.extract	data.extract(): EditorData	Извлеките текущие данные блоков из экземпляра редактора в виде безопасного для JSON EditorData.
data.set	data.set(data: EditorData): void	Замените весь список блоков новой полезной нагрузкой данных. Запускает полный повторный рендеринг.
data.clear	data.clear(): void	Очищает как содержимое блоков, так и сохранённые данные состояния.
data.clearContent	data.clearContent(): void	Удаляет только блоки, оставляя данные хранилища нетронутыми.
data.clearStorage	data.clearStorage(): void	Очищает только данные хранилища, не затрагивая текущие блоки.
blocks.insert	blocks.insert<T extends BlockToolType>(type: T, data: Block<T>['data'], index: number): HTMLElement \| null	Вставьте блок по заданному индексу index. Принимает ту же структуру данных, что и целевой тип блока.
blocks.convert	blocks.convert(blockId: string, newType: BlockToolType): void	Преобразуйте блок в новый тип на месте.
blocks.remove	blocks.remove(index: number): void	Удалите блок по заданному индексу index.
blocks.move	blocks.move(fromIndex: number, toIndex: number): void	Перемещает блок с одного индекса на другой.
blocks.update	blocks.update<T extends BlockToolType>(blockId: string, data: Block<T>['data']): void	Обновляет данные существующего блока на месте. Тип остаётся неизменным.
blocks.get	blocks.get(blockId: string): EditorData['blocks'][number] \| null	Получает блок по его ID. Возвращает null, если не найден.
blocks.getAll	blocks.getAll(): EditorData['blocks']	Возвращает данные всех блоков в виде массива.
blocks.count	blocks.count(): number	Возвращает количество блоков в редакторе.
focus	focus(): void	Перемещает фокус в редактор, фокусируясь на первом блоке.
blur	blur(): void	Убирает любой активный фокус изнутри редактора.
destroy	destroy(): void	Метод destroy() на объекте EditorAPI вызывает Editor.destroy() для данного экземпляра.
selection.get	selection.get(): Selection \| null	Возвращает объект выделения окна или null.
selection.set	selection.set(selection: Selection): void	Устанавливает выделение окна на переданный объект Selection.
selection.clear	selection.clear(): void	Убирает все диапазоны из выделения окна.
ui.showBlockMenu	ui.showBlockMenu(block: HTMLElement): void	Показывает меню типа блока для заданного DOM-элемента блока.
ui.hideBlockMenu	ui.hideBlockMenu(): void	Скрывает меню типа блока, если оно открыто.
ui.showToolbar	ui.showToolbar(x: number, y: number): void	Отображает встроенную панель инструментов в указанных координатах x, y области просмотра.
ui.hideToolbar	ui.hideToolbar(): void	Скрывает встроенную панель инструментов, если она видима.
view.getCurrentView	view.getCurrentView(containerId: string): EditorView \| null	Возвращает текущее представление (edit, preview или json) для заданного containerId.
view.switchView	view.switchView(containerId: string, view: EditorView): void	Переключает редактор на указанное представление: edit, preview или json.

Типичный пример использования

TypeScript

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

const editor = Editor.create({
  containerId: 'editor',
  theme: 'auto',
  placeholder: 'Start writing...',
  minHeight: 300,
});

// Insert a block
editor.blocks.insert('paragraph', { html: 'Hello world' }, 0);

// Extract data
const data = editor.data.extract();

// Switch view
editor.view.switchView('editor', 'preview');

// Tear down
editor.destroy();

Renderer

Класс, преобразующий сохранённые данные блоков в HTML только для чтения внутри DOM-элемента. У этого класса есть один публичный статический метод: render().

Метод	Сигнатура	Описание
Renderer.render	Renderer.render(config: RendererConfig): HTMLElement	Отрендерьте сохранённый JSON блоков в контейнер как HTML только для чтения. Используйте это везде, где нужно показать контент без возможностей редактирования.

Типичный пример использования

TypeScript

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

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

StyleManager

Централизованный класс, управляющий системой тем. Предоставляет три полезных публичных статических метода для потребителей: subscribe (для изменений темы на уровне ОС), getResolvedTheme (для чтения текущей темы ОС) и injectStyles (для инъекции пользовательского CSS).

Метод	Сигнатура	Описание
StyleManager.subscribe	StyleManager.subscribe(cb: (theme: 'light' \| 'dark') => void): () => void	Подпишитесь на изменения токенов темы во время выполнения. Слушатель срабатывает каждый раз, когда меняются theme или themeOverrides.
StyleManager.getResolvedTheme	StyleManager.getResolvedTheme(): 'light' \| 'dark'	Читает текущую тему ОС ("light" или "dark"). Возвращает "light", если matchMedia недоступна.
StyleManager.injectStyles	StyleManager.injectStyles(styleId: string, styles: string): boolean	Вставляет строку CSS в document.head (используйте уникальный styleId). Возвращает false, если уже существует, иначе true.

Типичный пример использования

TypeScript

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

// React to OS theme changes
const unsubscribe = StyleManager.subscribe(theme => {
  console.log('OS theme:', theme); // 'light' | 'dark'
});

// Read current OS theme
const current = StyleManager.getResolvedTheme();

// Inject custom CSS once
StyleManager.injectStyles('my-overrides', `
  .clepit-editor { font-family: 'Inter', sans-serif; }
`);

// Unsubscribe when done
unsubscribe();

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