Техническое задание: Кастомный рендеринг в ReactMarkdown
В существующем проекте используется библиотека react-markdown для отображения контента в формате Markdown. Требуется расширить её функциональность для обработки пользовательских директив.
Основная задача
Реализовать систему, при которой в исходном Markdown-тексте можно размещать специальные ключи (идентификаторы). В момент рендеринга эти ключи должны автоматически заменяться на соответствующие HTML-фрагменты, которые хранятся во внешнем источнике данных (например, базе данных).
Ключевые требования
- Анализ текста Markdown на наличие специальных меток (например,
{{snippet_id}} или [embed:unique_key]). - Разработка компонента или функции для ReactMarkdown (через систему плагинов или кастомные компоненты), который будет перехватывать эти метки.
- Организация асинхронной загрузки HTML-фрагмента из базы данных по найденному идентификатору.
- Безопасная вставка полученного HTML-кода в итоговый рендер, с учётом рекомендаций React по использованию
dangerouslySetInnerHTML или более безопасных альтернатив. - Обработка состояний загрузки и возможных ошибок (если фрагмент не найден).
Ожидаемый результат
Пользователь, добавляя в Markdown запись вида «Здесь будет наш виджет: [widget:promo_banner]», в интерфейсе видит на этом месте актуальный HTML-контент, загруженный по ключу promo_banner из базы.