Редактор
Поле форматированного текста кита Olddevs UI — и API, через которое продукт добавляет в него своё.
RichTextEditor из @olddevs/ui/editor — поле для Документа с форматированием: заголовки,
списки, таблицы, картинки, код. Документ хранится HTML-строкой и чистится одной Схемой и в
браузере, и на сервере.
Что умеет Редактор
Примеры взяты из Storybook кита и собраны на встроенных Инструментах, без своего кода: только пропсы и HTML Документа.
Меню выделения вместо Панели
toolbar="bubble" убирает Панель над полем: компактное меню появляется над выделенными словами,
как в Notion. Оно стоит на инверсной поверхности — тёмное в светлой теме и светлое в тёмной.
Таблицы
Строка заголовка, выравнивание столбцов, слияние ячеек и сортировка — в меню «Таблица», которое
открывается, когда каретка стоит в ячейке. Выравнивание пишется в HTML как data-align, без style.
Блоки кода
Подсветка по языку, кнопка языка в шапке блока и «Копировать». Подсветка приходит отдельным
чанком вместе с первым блоком кода, а в RichTextView её можно сделать на сервере.
Колонки и Обёртки
Раскладка — один Блок с колонками: 50-50, 33-33-33, 60-40 и другие. Обёртка группирует Блоки,
чтобы они двигались, дублировались и удалялись вместе.
Лист для печати
surface="paper" показывает Документ светлым листом в любой теме — для писем, шаблонов и всего,
что уйдёт из приложения светлым. Интерфейс вокруг остаётся в теме приложения.
Что здесь есть
- Быстрый старт — подключить кит и показать первый Редактор.
- Справочник — контракт компонента и API расширения. Страницы приходят из пакета кита той версии, что указана в шапке.
- Рецепты — девятнадцать задач, решённых публичным API: свои Блоки и Метки, упоминания и видео, шаблоны и команда ассистента, своя панель и форма, серверная очистка, свой бренд, загрузчик Части для движка. У каждой — Живой пример.
- Справочник типов — публичные типы Редактора, построенные из его TypeScript.