Using Custom Components in MDX - mdx-js/react

[muescha]

the goal is to use Custom Components with MDX

i am try to use mdx-js/react with this example:

https://github.com/remarkjs/remark-react#use

import React from 'react'
import ReactDom from 'react-dom'
import unified from 'unified'
import parse from 'remark-parse'
import remark2react from 'remark-react'

class App extends React.Component {
  constructor() {
    super()
    this.state = { text: '# hello world\nthis is <Bold>bold</Bold> text' }
    this.onChange = this.onChange.bind(this)
  }
  onChange(e) {
    this.setState({ text: e.target.value })
  }
  render() {
    return (
      <div>
        <textarea value={this.state.text} onChange={this.onChange} />
        <div id="preview">
          {
            unified()
              .use(parse)
              .use(remark2react)
              .processSync(this.state.text).result
          }
        </div>
      </div>
    )
  }
}

ReactDom.render(<App />, document.getElementById('root'))

and replace the part compile part:

 unified()
              .use(parse)
              .use(remark2react)
              .processSync(this.state.text).result

but i get it not working somehow ...

Way 1

having some unified processor:

              .use(parse)
              .use(remarkMdx)
              .use(remark2react, { sanitize:false, remarkReactComponents: { bold: () => <div>ABC</div>)}, toHast: { handlers: { html: ... } } })
              .processSync(this.state.text).result

but then i have 2x the Bold replacement :/

Way 2

replacing it with

<MDX components={components}>{this.state.text}<MDX>

i get always a:

mdx runtime Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.

Solution?

i guess there is an easy solution, but i don't get it.
I go throug all the examples - the create-react-app example only use an importMDX from mdx.macro but not the text itself :/ the playground uses the react-live component, which i try to avoid.

what i am looking for is having 2 ways:

• one is processing so i have at the end like process(text).html or process(text).react
• or a react component which display it

[muescha]

ok - @mdx-js/runtime is the way to go for "Way 2"

i lost so many times because of wrong import results in the error mdx runtime Error: Element type is invalid:

// ok 
import MDXRuntime from "@mdx-js/runtime";

// wrong
const MDXRuntime = require('@mdx-js/runtime')

i added:

          <MDXRuntime components={components} scope={scope}>
            {this.state.text}
          </MDXRuntime>

[muescha]

i see there is a problem, when i type in some unfinished html: in the moment i type <D i get an react error:

unknown: Unexpected token (15:4)

[ChristianMurphy]

@muescha you're asking a few different semi-related questions here:

Question 1: how to use the MDX compiler programmatically

import unified from 'unified'
import parse from 'remark-parse'
import remark2react from 'remark-react'

unified()
  .use(parse)
  .use(remark2react)
  .processSync(this.state.text).result

This doesn't support MDX syntax because you aren't using MDX
See https://mdxjs.com/advanced/api#compiler on how to use the compiler programmatically.

Question 2: how to use MDX as a React component in the Runtime

<MDX components={components}>{this.state.text}<MDX>

I'm not sure what you have set to MDX in the above example.
Runtime is the way to parse and transform directly in the browser https://mdxjs.com/advanced/runtime

Question 3: how to handle incomplete JSX with MDX Runtime

i see there is a problem, when i type in some unfinished html: in the moment i type <D i get an react error:
unknown: Unexpected token (15:4)

A couple notes, it isn't HTML, it's JSX, which has stricter more XML like parsing restrictions, the error is correct the content is currently invalid.
For making the experience seamless for live authoring, where content may be invalid for a time, consider wrapping the parse in try catch if it is programmatically used, or https://reactjs.org/docs/error-boundaries.html if Runtime is being used.
Also consider trying out MDX 2 (#1041) which has a new and improved parser.

Question 4: How to include custom components

Using the components property of https://mdxjs.com/advanced/components#mdxprovider or https://mdxjs.com/advanced/runtime

[muescha]

thanks a lot for reply

i expected somehow that not valid html is ignored like in this playground: https://probablyup.com/markdown-to-jsx/

text is rendered normal until your html is valid

i can write there for example this code for the custom Component MyComponent:

# This is Markdown

#### You can edit me!

<MyComponent>and more</MyComponent>
and 
<MyComponent>this</MyComponent

[Markdown](http://daringfireball.net/projects/markdown/) lets you write content in a really natural way.

(Note: the missing >)

[ChristianMurphy]

Again, see question 3 above, JSX is not the same as HTML.
MDX uses CommonMark + JSX syntax, it gives support for things like import, export, and dynamic props, to do this it needs to add some restrictions on correctness of tags.
https://probablyup.com/markdown-to-jsx, and the remark equivalent https://github.com/rexxars/react-markdown, parse CommonMark + HTML, this loses some of the abilities of JSX, but brings the more forgiving soft recovery features of HTML.

[ChristianMurphy]

Some of the current behavior around JSX parsing, and exception handling may have changed for MDX 2 (#1041).
@wooorm may be able to comment on that.

[muescha]

the idea was to give a user an input box and show a rendered preview it while he is typing.
And a user input (even an advanced user) produce always incorrect code while the user is typing and seeing the rendered preview.

and using two different libraries for preview editor and in production makes not much sense, because each library can have some different edge-cases.

(if this "editor preview mode" or not that strict mode comes with MDX2 then it is fine for me)