fix: parse HTML flow tags correctly out of the box

Fixes #277

package.json

@@ -78,6 +78,7 @@
     "micromark-extension-gfm-table": "^2.0.0",
     "micromark-extension-gfm-task-list-item": "^2.0.1",
     "micromark-extension-mdx-jsx": "^3.0.0",
+    "micromark-extension-mdx-md": "^2.0.0",
     "micromark-extension-mdxjs": "^3.0.0",
     "react-hook-form": "^7.44.2",
     "unidiff": "^1.0.2"

src/examples/html.tsx

@@ -22,6 +22,24 @@ const markdownWithSpan = `
 
   A paragraph with <span style="color: red" class="some">some red text <span style="color: blue">with some blue nesting.</span> in here.</span> in it.
 `
+export function HTag() {
+  return (
+    <>
+      <MDXEditor
+        markdown={`
+Hello world
+
+<h1>hello world</h1>
+
+`}
+        plugins={[headingsPlugin(), diffSourcePlugin()]}
+        onChange={(md) => {
+          console.log('change', md)
+        }}
+      />
+    </>
+  )
+}
 
 export function SpanWithColor() {
   return (

src/importMarkdownToLexical.ts

@@ -14,12 +14,12 @@ export type MdastExtensions = Options['mdastExtensions']
  * @typeParam UN - The type of the mdast node that is being visited.
  * @group Markdown Processing
  */
-export interface MdastImportVisitor<UN extends Mdast.Content> {
+export interface MdastImportVisitor<UN extends Mdast.Nodes> {
   /**
    * The test function that determines if this visitor should be used for the given node.
    * As a convenience, you can also pass a string here, which will be compared to the node's type.
    */
-  testNode: ((mdastNode: Mdast.Content | Mdast.Root) => boolean) | string
+  testNode: ((mdastNode: Mdast.Nodes) => boolean) | string
   visitNode(params: {
     /**
      * The node that is currently being visited.
@@ -51,13 +51,13 @@ export interface MdastImportVisitor<UN extends Mdast.Content> {
        * Adds formatting as a context for the current node and its children.
        * This is necessary due to mdast treating formatting as a node, while lexical considering it an attribute of a node.
        */
-      addFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.Content): void
+      addFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.RootContent): void
 
       /**
        * Removes formatting as a context for the current node and its children.
        * This is necessary due to mdast treating formatting as a node, while lexical considering it an attribute of a node.
        */
-      removeFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.Content): void
+      removeFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.RootContent): void
       /**
        * Access the current formatting context.
        */
@@ -80,7 +80,7 @@ function isParent(node: unknown): node is Mdast.Parent {
  */
 export interface MdastTreeImportOptions {
   root: LexicalRootNode
-  visitors: MdastImportVisitor<Mdast.Content>[]
+  visitors: MdastImportVisitor<Mdast.RootContent>[]
   mdastRoot: Mdast.Root
 }
 
@@ -167,7 +167,7 @@ export function importMdastTreeToLexical({ root, mdastRoot, visitors }: MdastTre
     mdastNode.children.forEach((child) => visit(child, lexicalParent, mdastNode))
   }
 
-  function visit(mdastNode: Mdast.Content | Mdast.Root, lexicalParent: LexicalNode, mdastParent: Mdast.Parent | null) {
+  function visit(mdastNode: Mdast.RootContent | Mdast.Root, lexicalParent: LexicalNode, mdastParent: Mdast.Parent | null) {
     const visitor = visitors.find((visitor) => {
       if (typeof visitor.testNode === 'string') {
         return visitor.testNode === mdastNode.type

src/plugins/core/MdastHTMLNode.ts

@@ -41,7 +41,7 @@ export type MdxNodeType = MdastHTMLNode['type']
  * Determines if the given node is a HTML MDAST node.
  * @group HTML
  */
-export function isMdastHTMLNode(node: Mdast.Parent | Mdast.Content | Mdast.Root): node is MdastHTMLNode {
+export function isMdastHTMLNode(node: Mdast.Nodes): node is MdastHTMLNode {
   return (
     MDX_NODE_TYPES.includes(node.type as unknown as MdxNodeType) &&
     (htmlTags as readonly string[]).includes((node as MdastHTMLNode).name?.toLowerCase() ?? '')

src/plugins/core/index.ts

@@ -32,8 +32,10 @@ import {
   createCommand
 } from 'lexical'
 import * as Mdast from 'mdast'
+
 import { mdxJsxFromMarkdown, mdxJsxToMarkdown } from 'mdast-util-mdx-jsx'
 import { mdxJsx } from 'micromark-extension-mdx-jsx'
+import { mdxMd } from 'micromark-extension-mdx-md'
 import React from 'react'
 import { LexicalConvertOptions, exportMarkdownFromLexical } from '../../exportMarkdownFromLexical'
 import {
@@ -210,7 +212,7 @@ const markdownSignal$ = Signal<string>((r) => {
 
 // import configuration
 /** @internal */
-export const importVisitors$ = Cell<MdastImportVisitor<Mdast.Content>[]>([])
+export const importVisitors$ = Cell<MdastImportVisitor<Mdast.Nodes>[]>([])
 /** @internal */
 export const syntaxExtensions$ = Cell<MarkdownParseOptions['syntaxExtensions']>([])
 /** @internal */
@@ -791,7 +793,7 @@ export const corePlugin = realmPlugin<{
     if (!params?.suppressHtmlProcessing) {
       r.pubIn({
         [addMdastExtension$]: mdxJsxFromMarkdown(),
-        [addSyntaxExtension$]: mdxJsx(),
+        [addSyntaxExtension$]: [mdxJsx(), mdxMd()],
         [addToMarkdownExtension$]: mdxJsxToMarkdown(),
         [addImportVisitor$]: MdastHTMLVisitor
       })

src/plugins/jsx/index.ts

@@ -98,7 +98,7 @@ export interface JsxEditorProps {
  * Determines wether the given node is a JSX node.
  * @group JSX
  */
-export function isMdastJsxNode(node: Mdast.Content | Mdast.Parent | Mdast.Root): node is MdastJsx {
+export function isMdastJsxNode(node: Mdast.Nodes): node is MdastJsx {
   return node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement'
 }