[ASK] Best practive to make preview mode

[muslimmuda15]

I have create a project using this Editor with a lot of custom plugin and toolbar, how to make preview mode?
is just set readOnly = true?

[makcyd]

We've created our own component to render markdown, produced with MDXEditor, based on remark-gfm (our fork of remark-gfm, to be precise, because the original package maintainers refused to make autolinks plugin optional).

The result you can see here:
https://support.swarmica.com/article/en/1615-the-capabilities-of-various-llm-ai-providers-in-swarmica.html

The code we use is this:

import remarkGfm from "@swarmica/remark-gfm"
import "highlight.js/styles/a11y-dark.css"
import omit from "lodash/omit"
import { common } from "lowlight"
import Markdown, { UrlTransform } from "react-markdown"
import rehypeHighlight from "rehype-highlight"
import rehypeRaw from "rehype-raw"
import remarkBreaks from "remark-breaks"
import remarkDirective from "remark-directive"

/*
 here goes importing of our own components/hooks
*/

interface Props {
  markdown: string
  canDragTextWithCopyDirective?: boolean
}

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 GFMMarkdown: React.FC<Props> = props => {
  const { markdown, canDragTextWithCopyDirective = false } = props
  const processedText = processMarkdownText(markdown)

  useHashScroll()

  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
      components={{
        div({ children, ...rest }) {
          const props = omit(rest, "node")

          if (COPY_DIRECTIVE_ATTR in props) {
            return (
              <MarkdownCopyDirective {...props} canDragText={canDragTextWithCopyDirective}>
                {children}
              </MarkdownCopyDirective>
            )
          }

          return <div {...props}>{children}</div>
        },
        pre({ node, children, ...rest }) {
          return (
            <Copyable content={getText(node)}>
              <pre {...rest}>{children}</pre>
            </Copyable>
          )
        },
        h1({ node, ...rest }) {
          return <AnchoredTitle tag="h1" text={getText(node)} {...rest} />
        },
        h2({ node, ...rest }) {
          return <AnchoredTitle tag="h2" text={getText(node)} {...rest} />
        },
        h3({ node, ...rest }) {
          return <AnchoredTitle tag="h3" text={getText(node)} {...rest} />
        },
        h4({ node, ...rest }) {
          return <AnchoredTitle tag="h4" text={getText(node)} {...rest} />
        },
        h5({ node, ...rest }) {
          return <AnchoredTitle tag="h5" text={getText(node)} {...rest} />
        },
        h6({ node, ...rest }) {
          return <AnchoredTitle tag="h6" text={getText(node)} {...rest} />
        },
      }}
      remarkPlugins={[
        remarkBreaks,
        remarkDirective,
        remarkGfm,
        remarkAdmonitionAndVideoPlugin,
        remarkCutPlugin,
        remarkTabsPlugin,
        remarkCopyPlugin,
      ]}
      rehypePlugins={[
        rehypeRaw,
        () => {
          return rehypeHighlight({
            languages: {
              ...common,
              ...highlightjsLangs,
            },
          })
        },
      ]}
      urlTransform={encodeIframeSrc}
    >
      {processedText}
    </Markdown>
  )
}

interface Node {
  type?: string
  value?: string
  children?: Node[]
}

const getText: (node: Node | null | undefined) => string = node => {
  if (!node) return ""
  if (node.type === "text") {
    return node.value ?? ""
  }
  if (node.children) {
    return node.children.map(getText).join("")
  }
  return ""
}

export { GFMMarkdown }