Does Milkdown Crepe support Mermaid charts

[shebnem29]

I encountered an issue while using the Crepe editor with Milkdown. When I try to create a Mermaid chart using the ```mermaid syntax, nothing happens. This functionality works as expected in the standard Milkdown editor with the diagram plugin, but seems to be broken or unsupported in Crepe.

Could you please let me know if Mermaid charts are supported in Crepe, and if so, how I can get them working? If they are not currently supported, are there any plans to add this feature in the future?

[Saul-Mirone]

I'll consider to support it after footnote and math blocks. The current blocker is that I can't find a well defined codemirror language support for mermaid.

[yswang0927]

The current blocker is that I can't find a well defined codemirror language support for mermaid

I think it doesn't matter.

What everyone wants is a mermaid chart, not mermaid code syntax highlighting.

It's also fine to use plain-text language.

[LarryZhu-dev]

may I ask if there any progress now

[s-elo]

currently I think if not considering the syntax highlighting, can just use renderPreview config to compile the mermaid code to render.

import mermaid from 'mermaid';

new Crepe({
    featureConfigs: {
      [Crepe.Feature.CodeMirror]: {
        renderPreview: (language, content) => {
          if (language === 'mermaid') {
            const container = document.createElement('div');
            const containerId = `mermaid-preview-container-${uid() as string}`;
            container.setAttribute('id', containerId);

            const placeholderDom = document.createElement('div');
            const placeholderDomId = `mermaid-preview-${uid() as string}`;
            placeholderDom.setAttribute('id', placeholderDomId);
            container.appendChild(placeholderDom);

            nextTick(() => {
              void mermaid.render(placeholderDomId, content).then(({ svg, bindFunctions }) => {
                const santifiedContainer = document.getElementById(containerId);
                if (!santifiedContainer) return;
                santifiedContainer.innerHTML = svg;
                bindFunctions?.(santifiedContainer);
              });
            });

            return container;
          }
          return null;
        },
      },
    },
  });

BTW, if can make the previewOnly mode as default for read-only mode? @Saul-Mirone

[Saul-Mirone]

Currently no... But I think it's not hard to make it.

[sakiyomi-ai]

The following code worked as expected.

  new Crepe({
       [CrepeFeature.CodeMirror]: {
         renderPreview: (language, content, applyPreview) => {
           if (language === "mermaid" && content) {
             const id = uid();
             const dom = document.createElement("div");
             dom.className = "mermaid";
             dom.id = `mermaid-${id}`;

             const svgId = `mermaid-svg-${id}`;
             mermaid
               .render(svgId, content)
               .then((output: any) => {
                 applyPreview(output.svg);
               })
               .catch((err) => {
                 console.error(err.message);
               });
             return dom;
           }
           return null;
         },
       },
     },
   });

[sakiyomi-ai]

Fix an issue where text is not rendered.

import React, { useEffect, useCallback } from "react";

import { Crepe, CrepeFeature } from "@milkdown/crepe";

import "@milkdown/crepe/theme/common/style.css";
import "@milkdown/crepe/theme/frame.css";

import mermaid from "mermaid";

type Props = {
  value: string;
  onInit: (crepe: any) => void;
};

export const MarkdownNoteEditor = (props: Props): React.JSX.Element => {

  const renderMermaid = useCallback((content: string, applyPreview: any) => {
    (async () => {
      try {
        const rr = await mermaid.render("mermaid-svg", content);
        if (rr.svg) {
          const bytes = new TextEncoder().encode(rr.svg);
          const binString = String.fromCodePoint(...bytes);
          const encoded = btoa(binString);
          const img = new Image();
          img.src = "data:image/svg+xml;charset=utf-8;base64," + encoded;
          applyPreview(img);
        }
      } catch (e: any) {
        applyPreview(`<span style="color:#DC362E">${e.message}</span>`);
      }
    })();
  }, []);

  useEffect(() => {
    mermaid.initialize({
      startOnLoad: true,
      theme: "neutral",
    });
    const crepe = new Crepe({
      root: "#crepe",
      featureConfigs: {
        [CrepeFeature.CodeMirror]: {
          renderPreview: (language, content, applyPreview) => {
            if (language === "mermaid" && content) {
              return renderMermaid(content, applyPreview);
            }
            return null;
          },
        },
      },
      defaultValue: props.value,
    });

    const createCrepe = async () => {
      await crepe.create();
    };
    createCrepe();

    props.onInit(crepe);
    return () => {
      if (crepe) crepe.destroy();
    };
    //eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props.value]);

  return (<div id="crepe"></div>);
};

[westlakem]

Any idea when this will be put in?

[hakan-77]

@Saul-Mirone I see some mermaid related PRs, which is great news. Is there a plan to officially support mermaid? Or, are the changes related to solutions like the above?

BTW, in my case the above solution did not work. 1) all code blocks starting showing empty "preview" 2) page started getting plenty of mermaid syntax error messages.

EDIT: I was able to resolve the above issues.
issue 1) tweak mermaid to disable errors suppressErrorRendering: true
issue 2) for featureConfigs non-mermaid should return null, not undefined.