📑Задача: “Нужно добавить возможность на доску редактировать текст внутри текстового элемента: Зачёркивание Подчёркивание нижнее Курсив Жирный Ссылка Иконки взять из storybook, менять можно как отдельные части текста внутри элемента, так и весь текст сразу”

👻Важные нюансы: два разных контекста при работе с фигурами, содержащими внутри себя пропс richText. За каждый контекст отвечают разные библиотеки, которые тесно связаны друг с другом и вынесены нами в отдельную библиотеку для проекта.

☑️Решение: Функционал инструмента для форматирования текста позволяет: Применить стили к тексту: жирный, курсив, зачеркнутый, подчеркивание, выделение, список, ссылка. Список 4-х уровневый, уровни переключаются кнопкой “Tab”. В фигурах, которые поддерживают текст разные ссылки возможно применить к любому текстовому узлу. Переход по ссылке происходит при клике на текстовый узел, который содержит ссылку. Чтобы убрать форматирование со всего текста используется тулбар в editor tldraw. Чтобы убрать форматирование с части текстового узла во всем тексте, используется тулбар внутри tiptap editor, который появляется при выделении нужного текстового узла. Также текстовому узлу можно задать все типы форматирования, кроме стиля список. Так как список является разметкой абзаца, при выделении текстового узла или всего текста, стиль установится в начале предложения, а в начале текстового узла - если тот разделен переносом строки. (Это внутренняя логика библиотеки).

💭В ходе обсуждения по задаче рассматривали возможность отображения ссылки при наведении на текстовый узел как в Miro. Можно забрать содержание link через рекурсивный обход глубоковложенных объектов или применив итеративный подход с явным стеком. Но каким образом сопоставить данные из массива link с текстовыми узлами, у которых активный hover? Библиотека не предоставляет готовые методы, чтобы забрать содержание link при hover на текстовый узел, только на весь richText.