Confusing about the rendering

[aboveyunhai]

Edit update: The idea itself abuses the lib, don't do it.

just bold my questions to make it easier to read.
Hi, thx for the cool lib. I'm fairly new to markdown editor. So some of my understandings might be completely wrong. Most are based on the traditional richtext editor.

So basically I was trying to use this library as a "lightweight" editor internally to create a markdown file/"string" to be rendered. Just for myself, I know the security implication behind mdx and how the string will be evaluated unsafely.

Based on the doc: overview. I should be able to use other markdown libs like @next/mdx
but at the same time I realized the default markdown render is completely based on tailwindcss, Q1: it seems like there is no way to eject tailwind typography?. Radix is for the toolbar so I was totally fine with that.

For the experimental context, I was using unocss as the global css-utility lib, which conflict and reset all the tailwind style inside the markdown render. Hence tailwindcss may or may not take effect, which is totally fine for me as I can still write custom css for the render to rule them all.

At this point, all the radix, tailwind, bundle size are not that important internally, but when it comes to externally, if I want to use the same lib as a pure render machine.

For example

<MDXEditor 
      markdown={'# Hello World'} 
      plugins={[headingsPlugin()]} 
      readonly={true} 
/>;

Q2: Will it carry out all the radix, tailwind into the page? assuming I strip off the toolbar, editing functionality in the read-only page.

If so, I still can use @next/mdx as the last resolve, mdx-editor as the editor, @next/mdx in charge of custom render + pure render. But it seems like the radix and tailwind css are always there, Q3: there is not clear way how I combine two ( mdx-editor + @next/mdx) though it got mentioned in the doc. Of course, for complex components like sandbox and tables, I never expect they can work magically if I just plug the @next/mdx into the editor, I can fairly create a plugin by myself if I want to. But the first thing is that it seems like I can't. Maybe I misunderstand something.
I was thinking I can do something like

// from next.mdx
const H1 = ({ children }) => <h1 style={{ fontSize: '100px' }}>{children}</h1>;
export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    // Allows customizing built-in components, e.g. to add styling.
    h1:  H1
  }
}

// from mdx-editor
//then just some psedo code here,
function headingsPlugin () {
 return { 
   h1:  H1
 }
} 
<MDXEditor 
      markdown={'# Hello World'} 
      plugins={[headingsPlugin()]} 
      readonly={true} 
/>;

Then both should render the same, and I can have a minimal read-only render, at least I don't need to worry about tailwind typography.

[petyosi]

Based on your questions, I'm afraid you're very mistaken about the purpose and application of this library. I'm afraid that guiding you out of that is beyond my capacity; you should take an alternative approach to your problem.

[aboveyunhai]

Thx, no worry, that's totally fine, nothing here is involving real production, just some personal experiments. I also want to be aware of not abusing the Markdown editor for the wrong purpose, as the process itself is mostly an experiment. That's why I wrote them out. So maybe people wouldn't fall into the same trap if they have the same random thought.

[vinicius507]

@petyosi, is there any way to use the MDX editor renderer for visualizing content? For example, should a microblog use MDX editor to publish new posts, is there any way to use the same MDX renderer for the posts pages?

[petyosi]

The MDX Editor has a readOnly flag - it works fine, and if it does not, I'm actively ensuring that it should. However, that's pretty much like using Google docs in read-only mode to let people read content.

[aboveyunhai]

@petyosi I think people may want to use the MDX Editor like the regular text editor (like ckeditor, tiptap). For content posting and reading inside the same editor by others publicly (the user case). Maybe they want to save that mdx remotely inside DB and then retrieve and render that markdown inside the mdx editor (as read-only). Maybe that's where the majority of the question comes from (as a read-only or renderer). Maybe your input here can reduce those confusion if it's a legit case.

[vinicius507]

I'm considering the possibility of incorporating mdx-editor for content authoring and previewing. However, my aim is to be able to render the documents in a different component while maintaining a consistent style.

For instance, take memos, a note-taking service that employs Markdown. Its note-taking editor is a RAW Markdown editor. If mdx-editor were to be utilized, how could we ensure that the notes maintain the same styling as the editor, encompassing admonitions and other additional block types?

I acknowledge that this might extend beyond the project's current scope, but if it proves feasible, it would be a fantastic enhancement.

Thanks for all the help :)

[petyosi]

If mdx-editor were to be utilized, how could we ensure that the notes maintain the same styling as the editor, encompassing admonitions and other additional block types?

I'm afraid that I don't see a tool that will solve the above for you apart from you implementing the styling in both modes.

To ensure that this is clear, this package focus is to author markdown. There are already plenty of excellent, actively developed markdown renderers (Some of them tied to Next.js, some of them baked in CMS solutions like Docusaurus, for example), so putting one in the editor itself would not add much of a value. And even if such solution was hypothetically present, it can't magically make custom blocks look the same in both modes, because an editor component is much different than a renderer. take a look at the tools available in the image and the table editor, for example. There are other factors involved here that make it unrealistic to use "one tool" for both modes, like SSR - the editor does not work with SSR at all, while markdown + SSR works great.

I hope that this is helpful for your considerations.

[vinicius507]

Awesome. Thanks you for the detailed answer and all the help. 🙏