React-markdown: [<some-text>] rendered as link in React

[vincentreynaud]

Hi!

react-markdown renders square brackets with text in them as links, although they are not followed by the appropriate syntax, i.e. a link inside parentheses .
expected: --> <a><some-text></a>
unexpected: [] --> <a><some-text></a>

It means my input needs to escape the square brackets if i want them to be rendered normally. If i gave this task to a developer i wouldn't mind but if the input comes from someone else, it becomes a new source of trouble.

Do you have an option to overcome this or a way to fix it?

[taylor-verys]

+1 seeing the same issue, also noticed that it is not captured by the link renderer method, it skips over anything without an href defined

[taylor-verys]

@vincentreynaud did some digging and found this https://github.com/rexxars/react-markdown/issues/115#issuecomment-357953459

linkReference: (reference: Object): Node => {
          if (!reference.href) {
            return `[${get(reference.children[0], 'props.children', '')}]`
          }
          return <a href={reference.$ref}>{reference.children}</a>
        },

[vincentreynaud]

ok thank's very much for the workaround @taylor-verys. I had resorted to using the gatsby-transformer-remark plugin as i was doing a better job at parsing.

[amirouche]

I stumbled upon the same bug, the workaround is at https://github.com/amirouche/omop-schema-viz/commit/ac98713978d2e31156c98343ff2fb271a2e815f4

[ibrahima]

Here's a simple, Fragmenty workaround renderer (not sure if children can ever have more than one child, but this avoids having to use format strings and get the props value as in some of the other solutions).

const linkReferenceRenderer = (reference) => {
  if (!reference.href) {
    return <React.Fragment>[{reference.children}]</React.Fragment>;
  }
  return <a href={reference.$ref}>{reference.children}</a>
};

pass that into the renderers property as desired.

Also worth noting that if you are whitelisting allowed element types, you'll need to make sure you're allowing linkReference if you weren't already, otherwise it'll still get ignored.

---

Hmm, out of curiosity, why are y'all using reference.$ref instead of reference.href? I just copied the same thing but I'm a little confused by that. Original renderer is at https://github.com/rexxars/react-markdown/blob/master/src/ast-to-react.js#L130..L136.

I guess it's easiest to just do something like <a {...reference} /> and spread all the props to get closer to that original implementation.

[RichardLitt]

Related: The Markdown spec (I think this is it) says you should be able to escape brackets by putting a slash in front of them. This currently doesn't work, here.

[ChristianMurphy]

I tried

\[some text]

in the playground and it escapes as expected https://remarkjs.github.io/react-markdown/