Here is an example how editor vs preview looks:

We also use react-markdown to render code produced by MDXeditor. The challenge was to support embedded videos (e.g. from Youtube) and admonitions.

As the result, here is the code of our component, that renders markdown:

import React from "react"
import { ADMONITION_TYPES } from "@mdxeditor/editor"
import Markdown, { UrlTransform } from "react-markdown"
import remarkBreaks from "remark-breaks"
import remarkDirective from "remark-directive"
import remarkGfm from "remark-gfm"
import rehypeRaw from "rehype-raw"
import { h } from "hastscript"
import { visit } from "unist-util-visit"
import type { Root as ITree } from "mdast"

interface Props {
  markdown: string
}

const processMarkdownText = (markdownText: string) =>
  markdownText
    // Replacing  <iframe/> with a <iframe></iframe> and adding <p></p> after each <iframe></iframe>
    .replace(/<iframe(.*?)\/>/g, "<iframe$1></iframe><p></p>")

const admonitionPlugin = () => {
  return (tree: ITree) => {
    visit(tree, node => {
      const { type: nodeType } = node
      if (nodeType === "textDirective") {
        const data = node.data || (node.data = {})
        data.hName = "span"
        data.hChildren = [{ type: "text", value: `:${node.name}` }]
      } else if (nodeType === "leafDirective" || nodeType === "containerDirective") {
        const { name: nodeName } = node
        const data = node.data || (node.data = {})
        if (nodeType === "leafDirective" && nodeName === "video") {
          data.hName = "video"
          data.hProperties = h("video", node.attributes || {}).properties
          return
        }

        const tagName = "div"
        data.hName = tagName
        data.hProperties = {
          className: ADMONITION_TYPES.includes(nodeName as (typeof ADMONITION_TYPES)[number])
            ? `admonition-${nodeName}`
            : null,
          ...h(tagName, node.attributes || {}).properties,
        }
      }
    })
  }
}

export const GFMMarkdown: React.FC<Props> = ({ markdown }) => {
  const processedText = processMarkdownText(markdown)

  const encodeIframeSrc: UrlTransform = (url, key, node) => {
    if (node.tagName === "iframe" && key === "src") {
      const u = new URL(url, window.location.href)
      if (/^https?:$/.exec(u.protocol)) {
        return encodeURI(url)
      }
    }
    return url
  }

  return (
    <Markdown
      remarkPlugins={[remarkBreaks, remarkDirective, remarkGfm, admonitionPlugin]}
      rehypePlugins={[rehypeRaw]}
      urlTransform={encodeIframeSrc}
    >
      {processedText}
    </Markdown>
  )
}

PS: You may not need the same monstrous component though, the minimal set is:

* remarkBreaks (to properly render single linebreaks from an "incorrect" markdown, produced by MDXeditor)

* remarkGfm

* rehypeRaw - if you have a mixture of Markdown and HTML to render

Is it possible to achieve the same results but without having to render the Markdown in a "preview" mode?
I mean, what do I actually need in order to create a youtube directive, for example?
I tried, several times, to create a DirectiveDescriptor, but it sems that not the only thing I need to do.

Example:

const youtubeDirectiveDescriptor: DirectiveDescriptor = {
  type: "containerDirective",
  name: "youtube",
  testNode: (node) => node.name === "youtube",
  attributes: ["videoId"],
  // How to render this node in the editor/preview
  Editor: (props) => {
    console.log(props)
    return <YoutubeEmbed videoId="FfigYiI2fKc?si=kWOl06RY1ZbVhyvO" />
  },
  hasChildren: false
}

This directive does nothing to my markdown. It doesn't parse it to html.
Am I missing something?

Do I need to register it as a plugin (e.g: just like what we have with the block quote plugin, for example?)