Readonly mode ?

[revskill10]

Do you know which options to view the markdown in read mode ?

[petyosi]

Hey @revskill10 - I'm going to work on this shortly. Question - how would you expect the toolbar to behave when the editor is in readonly mode?

[revskill10]

Hey @petyosi , just hide it ?

My expectation is, in read mode, i want to pre-render those mdx content, too, because i want to use it within RSC component.

[petyosi]

Thanks for elaborating, this is quite different from what I had in mind. My personal preference for rendering the resulting markdown is best done with next-mdx-remote. Here's something that I am doing on the website:

        <MDXRemote
          source={doc.content} // markdown string I read from file
          options={{
            mdxOptions: { rehypePlugins: [rehypeSlug, rehypePrism] }, // depends on which structures you use
            parseFrontmatter: true,
          }}
        />

Using the editor for that purpose would be overkill, as it has quite a lot of additional markup for the editing functionality.

[revskill10]

@petyosi I'm having a blog here . Currently i use notion to write (it has good Desktop App for that). And also i can pre-render content into html.

Iif mdx-editor supports pre-rendering, i can happily not using notion.

[EyMaddis]

I wondered the same thing and my reasoning is having the same rendering that is also used in the editor. The problem is that different markdown renderers might have different behaviours. For example markdown-to-jsx allows #Hello World as a header while mdx-editor does not. Not saying that this behaviour is correct but there are always minor differences here and there which could be avoided if the mdx-editor itself would provide a renderer (read-only) component (with tree shaking 😉).

I would like to use the editor for a public website where users want to use a "What you see is what you get" editor.

[petyosi]

@EyMaddis I think that you might have encountered some kind of a problem with your setup. Here's mdxeditor and markdown-to-jsx rendering # Hello world side by side. The only difference is the serif font, which is a matter of basic CSS styling. A wild guess I can put is that you're using tailwind and the CSS reset removes the styling from the editor.

While I do want to make sure this component has good ergonomics and makes your life easier, the actual reality is that the editor does not render markdown. It parses the markdown and renders editors for each node. You have some control over the styling of those editors (the simple ones, at least), so that you can make them look true to your actual public website rendering.

I do understand that it would be amazing magic if there's the package includes an MDX viewer that "just works". However, The configuration of the editor cannot be portable to the viewer, because they do very different things.

This being said, the markdown renderers I'm familiar with share the same underlying markdown engine as the AST parser that MDXEditor uses. You should not encounter different handling unless you go out of your way to configure them to do so.

[EyMaddis]

Thanks for the explanation, really appreciated. To be clear, I meant #Hello World without the space :)

[Melvynx]

Thanks for elaborating, this is quite different from what I had in mind. My personal preference for rendering the resulting markdown is best done with next-mdx-remote. Here's something that I am doing on the website:

        <MDXRemote
          source={doc.content} // markdown string I read from file
          options={{
            mdxOptions: { rehypePlugins: [rehypeSlug, rehypePrism] }, // depends on which structures you use
            parseFrontmatter: true,
          }}
        />

Using the editor for that purpose would be overkill, as it has quite a lot of additional markup for the editing functionality.

Hi, it's what I want to do, but I have some troubles.

When I use MdxEditor, I can add "Sandpack" inside my markdown, and it generates this:

` ``jsx live react
import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0)
  return (
    <div className="App">
      <button onClick={() => setCount(c => c + 1)}>
        {count}
      </button>
    </div>
  );
}
` ``

But when I use next-mdx-remote to render this, it doesn't work logically. I searched for a reshape plugin that can handle that but found nothing. I'm a bit confused about how I can render this using next-mdx-remote if it involves custom logic.

[petyosi]

This is more of a question for next-mdx-remote, to be honest. I believe that you can use this approach from their docs, and render the code block contents through the sandpack React component.

Apart from that, I've seen several examples that involve rehype-react.