0

I have a need to use a custom code editor in docusaurus. I am trying to put together a react component so that I can use the following syntax in the mdx document.

<REPL>
return 42;
</REPL>

I had problems making this work (which I will explain below) and then I tried

<REPL code="return 42;"/>

This later approach works but the code can be multiple lines and can have indentation. The code prop is received without the newline and spaces being preserved. How to fix this?

Though the second approach seems to work, it doesn't feel natural. The problem I faced trying the first approach above is, if the code contains something like const { x } = obj; the code being a child component is first interpreted by mdx and it tries to evaluate { x } and says that the variable is not found. Also, I had to render the props.children to a dom and then extract the text from there which seems unnecessary. So, what's the best way to pass any arbitrary code as string to the react component as children?

I currently have a 3rd working approach which is even more verbose. It is

export example = `return
42; // can be multiple lines and indentation
`

<REPL code={example}/>
Siva
  • 1,096
  • 7
  • 20

1 Answers1

0

I finally settled for the following

<REPL>

\`\`\`js
return 42;
\`\`\`

</REPL>

\' above should be without \ and there should be a newline surrounding the code to avoid the code being evaluated which I believe is a limitation of MDX.

Siva
  • 1,096
  • 7
  • 20