RepoRadar Domternal: набор инструментов для создания текстовых редакторов на ProseMirror
Domternal — это современный набор инструментов для создания богатых текстовых редакторов на основе ProseMirror. Он предлагает как классические, так и редакторы в стиле Notion сразу "из коробки", а также возможность комбинировать более 65 расширений для сборки кастомного редактора.
Основное преимущество Domternal — это его гибкость: ты можешь использовать главное ядро в любом проекте, включая Angular, React, Vue и Vanilla JS, с возможностью тонкой настройки. В комплекте идут элементы управления, такие как панели инструментов и меню, а также поддержка drag-and-drop и многое другое. Все экспортируемые модули удобно настраиваются благодаря tree-shakeable архитектуре.
Проект имеет MIT лицензию, поэтому ты можешь использовать его в коммерческих целях. Но учти, что некоторые компоненты требуют актуальные версии фреймворков: Angular 17.1+, React 18+ и Vue 3.3+. Запустить можно, установив пакет @domternal/core через npm. Для подробностей загляни в документацию на сайте.
Domternal — это набор инструментов для создания текстовых редакторов на основе библиотеки ProseMirror. Проект предлагает «безголовую» архитектуру (headless core) и компоненты для популярных фреймворков, таких как Angular, React и Vue, а также для чистого JavaScript.
Domternal предоставляет основные функциональные возможности для редактирования текста, включая блок-редактирование в стиле Notion, меню с возможностью ввода команд и плавающую оглавление. Редактор может быть настроен с использованием готовой темы или отдельной панели инструментов. Библиотека оптимизирована для современных приложений, позволяя импортировать только те зависимости, которые необходимы, а также включает темы как единую CSS таблицу стилей.
Установка и начало работы
Чтобы начать работу с Domternal, добавь нужный пакет с помощью npm:
pnpm add @domternal/coreПосле установки, вот пример кода для создания простого текстового редактора:
import { Editor, Document, Text, Paragraph, Bold, Italic, Underline } from '@domternal/core';
const editor = new Editor({
element: document.getElementById('editor')!,
extensions: [Document, Text, Paragraph, Bold, Italic, Underline],
content: 'Hello World!
',
});Для более полного решения можно использовать StarterKit, который включает заголовки, списки, блоки кода и историю изменений.
Основные функции
- Безголовая архитектура — совместимость с любой платформой или чистым JS/TS.
- Поддержка популярных фреймворков — компоненты для Angular, React и Vue, использования которых значительно упрощает интеграцию.
- Многочисленные расширения — поддержка блоков, таблиц, Latex-математики и Markdown.
- Поддержка локализации — возможность задавать текстовые метки на разных языках, включая немецкий.
- Поддержка печати — возможность печати документа на бумаге или в формате PDF без лишних элементов интерфейса.
Ограничения
Хотя Domternal довольно мощный, у него есть некоторые ограничения. Например, текущая версия требует Node.js версии 22 и выше. Полная поддержка всех функций может потребовать дополнительных настроек и использования нескольких пакетов для решения специфических задач.
Более подробную информацию о проекте, включая документацию и живые примеры, можно найти на официальном сайте domternal.dev.
Открыть на GitHub: domternal/domternal →
