Olddevs UI3.38.0
Рецепты

Своя Метка: комментарии к тексту

Метка с автором и текстом комментария, кнопка в Меню выделения и Карточка у текста под отмеченными словами.

Комментарий привязан к словам, а не к Блоку, поэтому это Метка. Её атрибуты — автор и текст. Показывает комментарий Карточка у текста: рамка под отмеченными словами, пока в них стоит каретка.

Поставьте каретку в «by 42%» — под словами появится Карточка. Выделите другие слова и нажмите кнопку комментария в Меню выделения.

Как устроено

  • Метка и её правила. Mark.create задаёт поведение (inclusive: false — набор на краю не продлевает комментарий), а правила Схемы — какие значения допустимы. Текст комментария — шаблон [^<>]{1,200}: HTML в атрибуте не бывает.
  • Кнопка в двух местах. selectionMenu: true ставит её и на Панель, и в Меню выделения. can выключает её без выделения, isActive подсвечивает на отмеченном тексте.
  • Карточка у текста (callouts). rangeAt: markRange("acme_comment") — готовый помощник кита: отрезок с этой Меткой вокруг каретки. Кит держит рамку, переворот у края окна, Escape и фразу для скринридера, а render рисует только тело.
  • Немодальна. Фокус остаётся в Документе, печать продолжается; Alt+F10 ведёт в Карточку, Escape возвращает каретку.

Карточки работают и с readOnly: читать комментарии можно без правки. В RichTextView Карточек нет — там показывается очищенный HTML без движка.

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