Рецепты
Своя панель экрана
Панель экрана вместо Панели кита — на хуке useRichTextEditorState и Хэндле.
Иногда кнопки форматирования должны жить в шапке экрана, а не над полем. toolbar="none"
убирает Панель кита, а свою панель экран рисует на useRichTextEditorState и командах движка.
Как устроено
- Срез состояния.
useRichTextEditorState(ref, selector)перерисовывает панель только когда изменился срез — набор текста, который не меняет «жирный» и «можно отменить», панель не трогает. До движка и на сервере хук отдаётnull. - Команды —
ref.current.editor.chain().focus()…run(), тот же язык, что у своих Инструментов.undo(),redo()иinsertHTML()есть прямо в Хэндле. preventDefaultнаmousedown. Клик по кнопке иначе увёл бы фокус из Документа, и выделение пропало бы для Меню выделения и плавающей Панели.
Команды вроде toggleBold и undo расширения Tiptap объявляют дополнением модуля. Чтобы
TypeScript их увидел, подключите типы: import type {} from "@tiptap/starter-kit".