Remark-MDX plugin

[leo-petrucci]

I followed the iframe guide to try and get Milkdown to see React components but I haven't been able to get it working.
I don't necessarily want to display React components in Milkdown, but I'd like Milkdown to be able to tell me "This is where component X is in the markdown".

This is my understanding of the guide:

1. remarkPlugins tells Milkdown how to parse nodes
2. If it finds something that can be parsed by the plugin specified it will add its AST structure and pass it to the toMarkdown method whenever a matching one is found
3. Here I can tell Milkdown if that node matches my custom plugin

I'm pretty sure my code should work, however console.loging the nodes doesn't show any of the expected AST formats remark-mdx specifies.

remark-mdx uses mdast-util-mdx-jsx which has the following AST structure:

{
  type: 'mdxJsxFlowElement',
  name: 'w',
  attributes: [{type: 'mdxJsxAttribute', name: 'x', value: 'y'}],
  children: [{type: 'paragraph', children: [{type: 'text', value: 'z'}]}]
}

Am I misunderstanding how plugins are supposed to work or is the issue with remark-mdx?

Edit:

When passing just HTML to Milkdown without any plugins (e.g. <div>\nTest\n</div>), that text seems to not appear at all. Does Milkdown parse and eliminate any HTML/JSX before displaying text in the editor?

Edit2:

I think I found the culprit. preset-commonmark is filtering the HTML out. I'll try reimplementing it and see if I can get it working.

[leo-petrucci]

HTML seems to be appearing by removing filterHTMLPlugin, however I still can't get my plugin to work correctly. When parsing Milkdown still isn't finding any AST nodes related to components.

I tried adding the remark-mdx plugin to the list of remarkPlugins in my custom preset-commonmark and that seems to have done the trick.

/* Copyright 2021, Milkdown by Mirone. */
import { createPlugin } from "@milkdown/utils";
import links from "remark-inline-links";

import { addOrderInList } from "./add-order-in-list";
import { filterHTMLPlugin } from "./filter-html";
import { getInlineNodesCursorPlugin } from "./inline-nodes-cursor";
import { getInlineSyncPlugin, inlineSyncConfigCtx } from "./inline-sync";
import remarkMdx from "remark-mdx";

export { inlineSyncConfigCtx };
export const commonmarkPlugins = [
  createPlugin(() => ({
    injectSlices: [inlineSyncConfigCtx],
    prosePlugins: (_, ctx) => [
      getInlineNodesCursorPlugin(),
      getInlineSyncPlugin(ctx),
    ],
    remarkPlugins: () => [remarkMdx, links, filterHTMLPlugin, addOrderInList],
  }))(),
];

What's the reason behind this?

[leo-petrucci]

I'm an idiot, I had remarkPlugins in the wrong place 🤦‍♂️

However I'm still having issues with an unspecified error when creating a Prosemirror node during parseMarkdown.

MilkdownError: Create prosemirror node from remark failed in parser, {"content":"block+","parseMarkdown":{"match":"[Function]","runner":"[Function]"},"toMarkdown":{"match":"[Function]","runner":"[Function]"}}, {"type":"mdxJsxFlowElement","content":[{"type":"text","text":"Component here"}]}

My first thought is that the NodeType isn't a valid Dom element, but I'm unsure how to make it into a valid dom element. I can successfully create a paragraph where the MDX was with:

      parseMarkdown: {
        match: (node) => {
          return node.type === "mdxJsxFlowElement";
        },
        runner: (state, node, type) => {
          const paragraph = state.schema.nodes.paragraph;
          state.openNode(paragraph);
          state.addText("Component here");
          state.closeNode();
        },
      },

But then that gets parsed as a paragraph whenever I convert back to markdown which is not great.

I just need to show a div where the MDX was, any idea how to do that? Prosemirror docs didn't help much :/

https://codesandbox.io/s/milkdown-remark-mdx-o8p1dx?file=/src/mdx/index.ts

[Saul-Mirone]

🚀 Great work! I'm really happy to see someone would try to build something like this.

BTW, I'm working on the HTML and MDX. Although it's still far from complete, it's a major direction of the project.

[leo-petrucci]

I've pretty much hit a wall with this 😂

Let me know if you need any help with the MDX, maybe I can give a hand!