when you using mdx with custom component and user input, you should close everything after you opened it.

Example:

Hello World

Produce:

<p>Hello World</p> // <--- here everything is closed

When adding a component now to it the p tag should be closed first:

Hello World <Test />

Produce:

<p>Hello world </p> // <--- close first
<div>My Test component</div>

So instead of nesting them into another (what you doing rn) you should close everything first to prevent issues

Yes i agree with that. The fact is that i do not control what the user provide. Neither how next-mdx-remote will process the input.

Hello world <Test/>

If this input is provided to the MDXRemote component, the result will be nested and i cannot detect it properly rn -> that's the issue.
What i would want to do is to prevent user to save the document if this kind of errors happens.

how do you want to detect if there are errors?

That's the all point. I tried to check if window.onerror would trigger but that's not the case 😦

I guess the best way would be to pre-render the html and pass it to a validator like [this one](https://www.npmjs.com/package/html-validate)

It would be possible with pure markdown and a package like marked but with mdx i cannot find a package that will do MDX to HTML without producing a component. And NextJS does not let me import from react-dom/server

@Mini Satin why don't you create a html parser and parse the "new" html and check if there are any errors?

You can create a parser like this:

const doc = new DOMParser().parseFromString(html, "text/html");

Because i cannot retrieve my html into a string form, pure markdown is given to the MDXRemote component like this :

<MDXRemote source={"Hello world <Test/>"} components={{ Test }} />

I would need a way to first parse the mdx to have an HTML string then i would be able to do what you say

when you are using the remote option of MDX you will retrieve the source first. This "source" will be also saved somewhere and somewhen. During this time, you can do the same: read it, check for Component (for example with regex) and check against that

What do you mean by "remote option" ?

you can either use MDX as remote, so you load text from somewhere and pass it into it (see attached). Or you can configure nextjs so it creates automatically pages for MDX files

Hum yeah ok.
My user does not have a direct access to the repository so i cannot use the build in feature of NextJS with page.mdx files.
That's why i'm using MDXRemote only.

The rendering code is that :

const Test = () => <div>My Test component</div>;

export default async function MyPage() {
  const markdown = await fetchMarkdownFromDb();
  return <MDXRemote source={markdown} components={{ Test }} />; // Transform the Markdown into a React component
}

I would like to validate the input when i save, here is my server action to save :

"use server";
import { compile } from "@mdx-js/mdx";
import { transformToHtml } from "some_html_transformer";
import { saveToDatabase } from "../myDatabaseStuff";

export const saveMarkdownServerAction = async (markdown: string) => {
  // working code to detect markdown syntax error :
  try {
    await compile(markdown);
  } catch (e) {
    return `Compilation failed ! {e.message}`;
  }
  
  // When i come at this point i know that the markdown syntax is okay
  // Here what i would need to prevent HTML errors, or something equivalent :
  try {
    await transformToHtml(markdown);
  } catch (e) {
    return `HTML transformation failed ! {e.message}`;
  }

  await saveToDb(markdown);
  return null;
};

Maybe i should get closer to unified as showed [here](https://nextjs.org/docs/app/building-your-application/configuring/mdx#deep-dive-how-do-you-transform-markdown-into-html)...

Yea, why not doing this: https://nextjs-forum.com/post/1313543272618000439#message-1313558507080912957

I could prevent some component to be used on the same line as regular markdown by parsing the mdx source but that would mean i could not have inline components and/or can lead to have heavy logic.
Maybe i'm not understanding well what you said here though...
Let's say i've got another component that produce <strong>Some text</strong> then this one is valid when used in a p tag whereas the other with the div is not valid.
Imo if i can parse directly the output html this would be less error prone and more effective.

Correct, if you need to you can build your own parser that allows specific components inline and others not

Ok i'm gonna check my customer and see what we'll do about this.
Thanks for your time and help ❤️

happy to help. Please mark solution if there is one[:](https://cdn.discordapp.com/attachments/1043615796787683408/1117191182133501962/image.png?ex=6750bdde&is=674f6c5e&hm=972af2fa4b9141dbafd363ce3d44deb9c1e4192de4b2ba1014853d546314d216&)