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;
         },
       },
     },
   });