How can I allow HTML-style <br> tags in markdown destined for React?

[tremby]

I'm currently using this:

const schema = {
  ...githubSchema, // hast-util-sanitize/lib/github.json
  attributes: {
    ...githubSchema.attributes,
    code: [
      // @ts-expect-error: this may exist some time in future
      ...(githubSchema.attributes.code ?? []),
      "className",
    ],
  },
  clobberPrefix: "",
};

return unified()
  .use(parse) // remark-parse
  .use(gfm) // remark-gfm
  .use(slug) // remark-slug
  .use(remarkToReact, { // remark-react
    sanitize: schema,
    remarkReactComponents: {
      // some custom components, no problems here
    },
  })
  .processSync(data).result as React.ReactElement;

If I'm reading the Github scheme correctly, it looks like br tags should be allowed.

But we noticed that <br> or <br /> or <br/> is disappearing rather than being allowed through.

Ending a line with a double space, however, is resulting in a line break.

Is there something I can do to allow HTML-style line breaks too?

[ChristianMurphy]

Short answer the flow is missing the option allowDangerousHtml and plugin rehype-raw, so HTML nodes aren't being passed through or parsed.
What you are looking for sounds a lot like https://github.com/remarkjs/react-remark, specifically https://remarkjs.github.io/react-remark/?path=/story/remark-component--mixed-html-sanitized and https://github.com/remarkjs/react-remark/blob/e9a248b672a69cec4deef4c8235b40d53ac52970/stories/remark-hook.stories.tsx#L76-L79

[ChristianMurphy]

also be aware that remark-react is slated to be deprecated unifiedjs/unified#121 (comment)

[tremby]

Oh dear. Thanks for pointing that out.

I'm thoroughly confused with so many packages in this ecosystem, especially when there are things like separate packages called remark-react and react-remark.

I don't remember precisely but I think I chose the particular stack I'm using because of some requirement of one of the pieces. I have a feeling it was remark-react-lowlight.

What I need:

• Replace particular output elements with my own custom React components, such as a, table, code, blockquote.
• One of those (code) needs to highlight GFM-style fenced code. I only want the bundle to include the parsers for the small set of languages I'm expecting.
• GFM, tables in particular.
• Run remark-slug (actually a slightly-modified version).
• A small enough bundle that this can all happen on the front end at runtime.
• But it also needs to correctly render in full at static site generation time.

Can I do all of that with react-remark?

[ChristianMurphy]

Replace particular output elements with my own custom React components

https://github.com/rehypejs/rehype-react#optionscomponents other packages like react-remark and remark-react pass though to this option.

One of those (code) needs to highlight GFM-style fenced code. I only want the bundle to include the parsers for the small set of languages I'm expecting.

https://github.com/inlinestyle/remark-react-lowlight could still be used, or something like https://github.com/rehypejs/rehype-highlight could also work

GFM, tables in particular

remark-gfm has got you covered.

A small enough bundle that this can all happen on the front end at runtime.

Setting aside for a moment that bundle size isn't a great metric for determining quality or performance of a web application.
Bundle size between, remark-react ,react-remark, or calling unified directly (https://github.com/remarkjs/react-remark/blob/e9a248b672a69cec4deef4c8235b40d53ac52970/src/index.ts#L42-L53) isn't dramatically different.

But it also needs to correctly render in full at static site generation time

Depends on what you are using to render, it may work today, or it may work after the improvement for remarkjs/react-remark#16 is merged.

[tremby]

OK, thank you very much for your patience. I'll give switching over a shot.

[tremby]

Unfortunately it does not render at static generation time (I'm using Next) -- I guess I'll have to wait on remarkjs/react-remark#16