HTML P tags are not handled correctly

[pawelmidur]

After pasting HTML as the default value, an error appears when trying to edit:

TypeError
Cannot read properties of null (reading 'append')

https://codesandbox.io/p/sandbox/mdx-editor-paste-html-ld5366?file=%2Fsrc%2FApp.tsx%3A20%2C21-20%2C29

something is with the parsing, because the <p> tag without attributes wraps the whole content or every tag <p> is wraped by other <p> without attributes

[petyosi]

Nesting paragraphs is certainly not correct, but I want to get the obvious question out first - what's the purpose of P tags in a markdown file? White you can (quite inconveniently) edit HTML with the editor, there are much better tools for that purpose. And if you want to convert an exsiting HTML content to markdown, you will be much better off pre-processing it firstbefore passing it into the editor.

Apart from that, I can't reproduce a problem, but likely I'm missing something - what do you mean by "pasting"?

[pawelmidur]

The example is in the sandbox, the link does not work? https://codesandbox.io/p/sandbox/mdx-editor-paste-html-ld5366?file=%2Fsrc%2FApp.tsx%3A20%2C21-20%2C29

"pasting" wrong word, sorry, I meant to simply add the initial value as HTML

Preparing data from HTML to Markdown is probably the only solution in that case

[pawelmidur]

import "@mdxeditor/editor/style.css";
import { MDXEditor, headingsPlugin } from "@mdxeditor/editor";

const fromDB = `<p>Lorem Ipsum is simply dummy text of the printing and</p>
  \n<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  \n<p>desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
  \n<p>'Content here, content here', making it look like readable English.</p>
  \n<p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  \n<p><strong>lorem bold impsum!</strong>.</p>
  \n`;

const otherFromDB = `<p>Lorem Ipsum is simply dummy text of the printing and</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
  <p>desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
  <p>'Content here, content here', making it look like readable English.</p>
  <p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  <p><strong>lorem bold impsum!</strong>.</p>`;

function App() {
  return <MDXEditor markdown={otherFromDB} plugins={[headingsPlugin()]} />;
}

export default App;

[petyosi]

I opened the link, but then I'm not sure what I'm supposed to do there to trigger the error. I see no errors in the console, and I can type in the editor just fine.

[pawelmidur]

Try pressing "Enter" e.g. after "Lorem Ipsum"

[petyosi]

Got it. I will fix that at some point, probably a matter of handling the P paragraphs explicitly. But in general, you are still better off converting the HTML explicitly, given the whitespace specifics of the markdown.