Техническое задание: Кастомный рендеринг в ReactMarkdown

В существующем проекте используется библиотека react-markdown для отображения контента в формате Markdown. Требуется расширить её функциональность для обработки пользовательских директив.

Основная задача

Реализовать систему, при которой в исходном Markdown-тексте можно размещать специальные ключи (идентификаторы). В момент рендеринга эти ключи должны автоматически заменяться на соответствующие HTML-фрагменты, которые хранятся во внешнем источнике данных (например, базе данных).

Ключевые требования

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

Ожидаемый результат

Пользователь, добавляя в Markdown запись вида «Здесь будет наш виджет: [widget:promo_banner]», в интерфейсе видит на этом месте актуальный HTML-контент, загруженный по ключу promo_banner из базы.