📝 Rich Text Editors для PeopleDo

Обстоятельное исследование: какой редактор стилей интегрировать в приложение для описания услуг специалистов

📋 Контекст задачи

Tiptap

Headless rich text editor framework

ueberdosis (Berlin) Осн. 2019 ProseMirror-based
MIT / Бесплатно React ✓ Mobile ✓ JSON output

Headless (без встроенного UI) фреймворк на основе ProseMirror. Полная свобода дизайна — тулбар, стили, поведение настраиваются полностью. Используется в Notion, GitLab, Substack и тысячах продуктов.

✓ React-биндинги из коробки
✓ JSON + HTML output
✓ 100+ расширений
✓ TypeScript
✓ Headless — полный контроль UI
✓ Мобильный touch-friendly
✓ Коллаборация (Yjs)
✓ AI-расширения
✓ Markdown shortcuts
✓ Slash-команды
✓ Drag & drop блоков
✓ Mentions (@users)
37K+
GitHub ⭐
~30KB
gzip
2M+
npm/неделя
MIT
Лицензия
Linux F.
Бэкер

Плюсы

  • Идеальная React-интеграция
  • JSON-формат = гибкий рендер на любой платформе
  • Можно сделать toolbar точно под наш дизайн
  • 100+ готовых расширений
  • Активное сообщество, Linux Foundation
  • Поддержка AI-расширений (будущее)
  • Миграция HTML→Tiptap JSON проста

Минусы

  • Headless = нужно делать свой тулбар
  • Чуть сложнее начальная настройка vs Quill
  • Pro-расширения платные (не нужны нам)
📖 Документация ⭐ GitHub ⚛️ React Setup 💰 Pricing

Quill

Modern WYSIWYG editor

Slab (San Francisco) Осн. 2012 Собственный движок
BSD-3 / Бесплатно React (обёртка) Mobile ✓ Delta JSON

Классический WYSIWYG-редактор. Самый простой в подключении — 2 строки кода. Используется в Salesforce, LinkedIn, Microsoft, Slack. Встроенный UI с готовыми темами (Snow, Bubble).

✓ Минимальная настройка
✓ Готовый UI из коробки
✓ Delta-формат (JSON)
✓ Модульная архитектура
~ React через react-quill
✓ Мобильная поддержка
✗ Нет slash-команд
✗ Нет drag & drop блоков
44K+
GitHub ⭐
~40KB
gzip
2.5M+
npm/неделя
BSD-3
Лицензия
Slab
Мейнтейнер

Плюсы

  • Самый быстрый старт (30 минут)
  • Готовые темы — не нужен свой дизайн
  • Проверен временем (12+ лет)
  • Хорошая документация
  • Самый популярный по npm

Минусы

  • React-обёртка не official (react-quill)
  • Delta-формат менее распространён
  • Кастомизация UI ограничена CSS
  • Нет блочного редактирования
  • Менее активная разработка
📖 Документация ⭐ GitHub 🎮 Playground

Lexical

Meta's extensible text editor framework

Meta (Facebook) Осн. 2022 Собственный движок
MIT / Бесплатно React ✓ Mobile ✓ JSON + MD + HTML

Современный фреймворк от Meta. Пришёл на замену Draft.js. Immutable state model, отличная доступность (WCAG). Используется в Facebook, Instagram, WhatsApp Web.

✓ Official React-биндинги
✓ JSON / Markdown / HTML
✓ TypeScript
✓ Undo/Redo из коробки
✓ Коллаборация (Yjs)
✓ Immutable state
~ Headless — нужен свой UI
~ Сложнее кривая обучения
20K+
GitHub ⭐
~25KB
gzip
800K+
npm/неделя
MIT
Лицензия
Meta
Бэкер

Плюсы

  • Meta — мощная поддержка
  • Лучшая accessibility (WCAG)
  • Самый лёгкий (~25KB)
  • Immutable state = предсказуемость
  • Используется в масштабе Meta

Минусы

  • Самая крутая кривая обучения
  • Меньше готовых расширений
  • Документация слабее чем у Tiptap/Quill
  • Overkill для простого форматирования
  • Молодой проект — меньше экосистема
📖 Документация ⭐ GitHub 🎮 Playground

Editor.js

Block-style editor (как Notion)

CodeX (Россия 🇷🇺) Осн. 2018 Блочный движок
Apache 2.0 / Бесплатно React (обёртка) Mobile ~ Clean JSON

Блочный редактор — каждый элемент (параграф, заголовок, список, картинка) является отдельным блоком. Чистый JSON на выходе. Интерфейс в стиле Notion/Medium. Российская разработка (CodeX).

✓ Блочная архитектура
✓ Чистый JSON output
✓ Плагинная система
✓ Inline Toolbar
~ React через react-editor-js
~ Мобильный ограничен
✗ Нет коллаборации
✗ Нет TypeScript
29K+
GitHub ⭐
~25KB
gzip
300K+
npm/неделя
Apache
Лицензия
CodeX
Мейнтейнер

Плюсы

  • Красивый Notion-like UI
  • Самый чистый JSON
  • Российская разработка
  • Простой Plugin API

Минусы

  • Мобильная поддержка слабее
  • React-обёртка не official
  • Inline-стили ограничены (жирный+курсив)
  • Меньше сообщество
  • Нет TypeScript
📖 Документация ⭐ GitHub 🚀 Getting Started

Slate

Completely customizable framework

Ian Storm Taylor Осн. 2016 Собственный движок
MIT / Бесплатно React (only) Mobile ~ JSON

Низкоуровневый фреймворк для построения кастомных редакторов. React-native. Абсолютная свобода — но всё нужно строить самому. Используется в Airtable, Grafana, Miro.

✓ Нативный React
✓ Максимальная кастомизация
✓ JSON model
✓ TypeScript
✗ Нет готовых расширений
✗ Нет готового UI
~ Мобильный нестабилен
~ Документация неполная
30K+
GitHub ⭐
~35KB
gzip
600K+
npm/неделя
MIT
Лицензия
Community
Мейнтейнер

Плюсы

  • React-first архитектура
  • Абсолютный контроль
  • Хорош для нестандартных кейсов

Минусы

  • Всё нужно строить с нуля
  • Мобильный ввод — известные баги
  • Большое время интеграции (дни-недели)
  • Документация фрагментарная
  • Overkill для описаний услуг
📖 Документация ⭐ GitHub

📊 Сравнительная таблица

Критерий Tiptap 🏆 Quill Lexical Editor.js Slate
React-интеграция Official ✓ Обёртка ~ Official ✓ Обёртка ~ Native ✓
Мобильность Отличная Хорошая Хорошая Средняя Слабая
Время интеграции 1-2 часа 30 минут 3-5 часов 1-2 часа 3-7 дней
Формат данных JSON + HTML Delta JSON JSON + MD + HTML Clean JSON JSON
Готовый UI Headless Snow / Bubble Headless Inline toolbar Headless
Расширения 100+ ~20 ~30 ~40 0 (свои)
TypeScript ✓ ✗ ✓ ✗ ✓
Миграция HTML Простая Средняя Средняя Сложная Сложная
Кастомизация дизайна Полная CSS только Полная Ограничена Полная
Slash-команды ✓ ✗ Плагин ✓ ✗
Mentions (@) ✓ Плагин Плагин ✗ Своё
Будущее: AI-фичи AI Toolkit ✗ Можно ✗ Можно
Лицензия MIT BSD-3 MIT Apache 2 MIT
Цена $0 $0 $0 $0 $0

🏆 Вердикт: Tiptap

Для PeopleDo однозначно рекомендуем Tiptap. Вот почему:

  1. Official React-биндинги — не нужна сторонняя обёртка, нативная поддержка
  2. JSON output — сохраняем в базу, рендерим где угодно (web, mobile, email)
  3. Headless = наш дизайн — тулбар полностью под стиль PeopleDo
  4. Миграция — Tiptap умеет парсить HTML в свой JSON, старый контент мигрируется легко
  5. Mentions (@users) — в будущем можно тегать других специалистов в описаниях
  6. AI-ready — есть AI Toolkit для автозаполнения, переписывания, улучшения текстов
  7. Мобильность — критично для PeopleDo, Tiptap отлично работает на touch-устройствах
  8. Масштаб — Linux Foundation, 37K+ звёзд, используется в GitLab и Substack

Второй вариант (запасной): Quill — если нужно максимально быстро (30 минут) и без кастомизации UI. Но для продукта уровня PeopleDo Tiptap даст больше свободы и возможностей роста.

⚡ План интеграции Tiptap в PeopleDo

1. Установка

// Базовый пакет + React + стартовый набор расширений
npm install @tiptap/react @tiptap/starter-kit @tiptap/pm

2. Компонент редактора

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

const ServiceEditor = ({ content, onChange }) => {
  const editor = useEditor({
    extensions: [StarterKit],
    content,
    onUpdate: ({ editor }) => onChange(editor.getJSON()),
  })

  return <EditorContent editor={editor} />
}

3. Бэкенд

// Сохранение: JSON → база данных (одно поле)
await db.services.update(id, {
  description: JSON.stringify(tiptapContent)
})

// Загрузка: база → JSON → Tiptap
const content = JSON.parse(service.description)

4. Миграция старого контента

import { generateJSON } from '@tiptap/html'

// Конвертация старого HTML в Tiptap JSON
const json = generateJSON(oldHtmlContent, [StarterKit])
await db.services.update(id, { description: JSON.stringify(json) })

📅 Таймлайн интеграции

1

Установка + базовый компонент

npm install, создать ServiceEditor, подключить StarterKit

1 час
2

Toolbar UI

Кнопки: Bold, Italic, H2, H3, список, цитата. Стилизация под дизайн PeopleDo

1-2 часа
3

Бэкенд

API endpoints: сохранение JSON, загрузка, валидация

30 мин
4

Read-only рендер

Отображение описаний на страницах услуг (generateHTML)

30 мин
5

Миграция контента

Скрипт конвертации старого HTML → Tiptap JSON

1-2 часа
6

Тестирование

Mobile, desktop, разные браузеры, edge-cases

1-2 часа

Итого: ~1 рабочий день