Преобразование Markdown в HTML из компонента Rich-Text с помощью Gatsby - PullRequest
Новая
       23

Преобразование Markdown в HTML из компонента Rich-Text с помощью Gatsby

0 голосов
/ 06 мая 2019

Я использую тип Contentful Rich-Text Field для создания страниц, один из Embedded_Blocks, который у меня есть, для типа поля Markdown, который я использую для построения таблицы:

Тип поля уценки: 

| Title | Title | 
| ---------- | ---------- | 
| Cell | Cell |

Я могу получить данные Rich-Text и построить мои Embedded_Blocks следующим образом: 

[BLOCKS.EMBEDDED_ENTRY]: (node) => {
   const fields = node.data.target.fields;
   switch (node.data.target.sys.contentType.sys.id) {
      case 'video':
          const url = (fields.url['en-US']);
          return <Video url={url}/>

      // This is how I'm currently trying to convert Markdown to HTML
      ///////////////////////////////////////////////////////////////
      case 'markdown':
          const markdown = (fields.markdown['en-US']);
          console.log('markdown', markdown);
          return <div dangerouslySetInnerHTML={{ __html: markdown }} />
      default:
          return <div>Fallback</div>
   }
},

Проблема, с которой я столкнулся, заключается в том, что она просто возвращает строку, я полагаю, потому что я не преобразовал markdown в HTML перед передачей ее в dangerouslySetInnerHTML={{ __html: markdown }}.

Как я могу сохранить Markdown в HTML, чтобы я мог отобразить его, используя dangerouslySetInnerHTML={{ __html: markdown }}?

1 Ответ

0 голосов
/ 12 июня 2019

Наиболее подходящий способ сделать это внутри Gatsby - создать дочерние узлы внутри хука жизненного цикла Gatsby onCreateNode. Этот хук вызывается только в процессе nodejs и выполняет разбор уценки один раз при загрузке записи Contentful.

Это должно помочь вам начать - оно основано на коде из Gatsby's gatsby-transformer-remark

Обратите внимание, что это псевдокод - вам, конечно, придется его протестировать. 

// gatsby-node.js

var remark = require('remark')
var recommended = require('remark-preset-lint-recommended')
var html = require('remark-html')

const processor = remark()
  .use(recommended)
  .use(html)

export async function onCreateNode({ actions, node, loadNodeContent}) {
  if (!/RichText/.test(node.internal.type)) {
    return
  }

  const markdown = // somehow load the raw markdown from the node - I haven't studied RichText nodes yet

  const html = processor.process(markdown)

  const markdownNode = {
    id: createNodeId(`${node.id} >>> MarkdownRemark`),
    children: [],
    parent: node.id,
    internal: {
      content: data.content,
      type: `MarkdownRemark`,
    },
  }

  actions.createNode(markdownNode)
  actions.createParentChildLink({ parent: node, child: markdownNode })
}

Для справки, здесь, где Contentful создает узлы Rich Text внутри Gatsby:

...