fix #5861 -- add mermaidjs support for all markdown in cocalc

Author: williamstein

src/packages/frontend/editors/slate/elements/code-block/index.tsx

@@ -16,6 +16,7 @@ import { DARK_GREY_BORDER } from "../../util";
 import { useFileContext } from "@cocalc/frontend/lib/file-context";
 import { Icon } from "@cocalc/frontend/components/icon";
 import { isEqual } from "lodash";
+import ShowError from "@cocalc/frontend/components/error";
 
 export interface CodeBlock extends SlateElement {
   type: "code_block";
@@ -47,6 +48,7 @@ const StaticElement: React.FC<RenderElementProps> = ({
 
   const [newValue, setNewValue] = useState<string | null>(null);
   const runRef = useRef<any>(null);
+  const mermaidRef = useRef<any>(null);
 
   const [output, setOutput] = useState<null | ReactNode>(null);
 
@@ -88,6 +90,42 @@ const StaticElement: React.FC<RenderElementProps> = ({
     }, 1);
   };
 
+  const isMermaid = temporaryInfo ?? element.info == "mermaid";
+  const [mermaidError, setMermaidError] = useState<string>("");
+
+  useEffect(() => {
+    const elt = mermaidRef.current;
+    if (!isMermaid || !elt) {
+      return;
+    }
+    (async () => {
+      try {
+        setMermaidError("");
+        const mermaid = (await import("mermaid")).default;
+        mermaid.initialize({
+          startOnLoad: false,
+        });
+        elt.removeAttribute("data-processed");
+        await mermaid.run({
+          nodes: [elt],
+        });
+      } catch (err) {
+        setMermaidError(err.str ?? `${err}`);
+      }
+    })();
+  }, [isMermaid, newValue ?? element.value]);
+
+  if (isMermaid) {
+    return (
+      <div {...attributes} style={{ marginBottom: "1em", textIndent: 0 }}>
+        <pre className="mermaid" ref={mermaidRef}>
+          {newValue ?? element.value}
+        </pre>
+        <ShowError error={mermaidError} setError={setMermaidError} />
+      </div>
+    );
+  }
+
   // textIndent: 0 is needed due to task lists -- see https://github.com/sagemathinc/cocalc/issues/6074
   // editable since even CodeMirrorStatic is editable, but meant to be *ephemeral* editing.
   return (

src/packages/frontend/editors/slate/elements/code-block/info-to-mode.ts

@@ -5,7 +5,7 @@ import detectLanguage from "@cocalc/frontend/misc/detect-language";
 // when preferKernel is true return the actual kernel name or language.
 export default function infoToMode(
   info: string | undefined | null,
-  options: { value?: string; preferKernel?: boolean } = {}
+  options: { value?: string; preferKernel?: boolean } = {},
 ): string {
   const { value, preferKernel } = options;
   info = info?.trim().toLowerCase();
@@ -14,6 +14,10 @@ export default function infoToMode(
     info = detectLanguage(value);
   }
 
+  if (info == "mermaid") {
+    return "md";
+  }
+
   // Format that seems to work well with github (unlike python-markdown and rmarkdown!), and we
   // use internally, e.g.,
   //      py {kernel='sage-9.8'}   or      py {kernel="sage-9.8"}

src/packages/frontend/package.json

@@ -122,6 +122,7 @@
     "mathjax": "^2.7.9",
     "md5": "^2",
     "memoize-one": "^5.1.1",
+    "mermaid": "^10.9.1",
     "node-forge": "^1.0.0",
     "nyc": "^15.1.0",
     "octicons": "^3.5.0",