Olddevs UI3.38.0
Рецепты

Своя панель экрана

Панель экрана вместо Панели кита — на хуке 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".

На этой странице