Использование плагина `rexxars / react-markdown` или альтернатива для рендеринга React markdown

Question

Я пытаюсь визуализировать html, сохраненный в БД, и поместить компонент внутрь.

Это будет выглядеть так:

import ReactMarkdown from 'react-markdown/with-html'; 
const inlineCode = (props) => <Gist id={props.value} />;
const source = '`7df0c9a5d794504a28bd3256b7bf5c4f` <p>asdasdasd</p><h1>title</h1>';

ReactMarkdown используется следующим образом:

<ReactMarkdown source={source} renderers={{ inlineCode }} escapeHtml={false} />

Результат отображается правильно, и блок также, но не так, содержимое находится за пределами блока.

Если я обертываю весь source с<div>, <Gist/> отображается как текст, а <p> / <h1> отображается правильно.

Чего мне не хватает?Я пытаюсь хранить HTML с пользовательскими компонентами внутри, <Gist/> это просто пример.Предложения по (более) подходящей библиотеке также приветствуются.Пример идеального source Я хотел бы сохранить в БД, а затем отрендерить в компоненте React:

<div>
  <p>
    <CustomReactComponent/>
    <br/>
    test
  </p>
  <Gist/>
</div>

Answer 1

Хорошо, я нашел эту библиотеку: https://github.com/probablyup/markdown-to-jsx

Если ваш источник выглядит так:

const source = `<gist id="yourIdHere" /> <h1>asdasdasd</h1>`;

<Markdown
  options={{
    overrides: {
      gist: {
        component: renderGist,
      },
    },
  }}
>
  {content}
</Markdown>

Он отображает и <Gist>, и обычный <h1> как <h1,Похоже, что теги абзаца добавляются автоматически, если вы добавляете разрывы строк и что-то вроде # Title также автоматически переносится.

<Gist> в источнике преобразуется в нижний регистр, поэтому это будет иметь значение только для объекта overrides (снова в нижнем регистре).Обрабатывает все мои пользовательские вещи и HTML предсказуемо.