feat: mermaid diagram integration (#202)

apps/client/src/features/editor/components/code-block/code-block-view.tsx

@@ -1,17 +1,34 @@
 import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { ActionIcon, CopyButton, Group, Select, Tooltip } from "@mantine/core";
-import { useState } from "react";
-import classes from "./code-block.module.css";
+import { useEffect, useState } from "react";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
-import { useHover } from "@mantine/hooks";
+import MermaidView from "@/features/editor/components/code-block/mermaid-view.tsx";
+import classes from "./code-block.module.css";
 
 export default function CodeBlockView(props: NodeViewProps) {
-  const { node, updateAttributes, extension, editor, selected } = props;
+  const { node, updateAttributes, extension, editor, getPos } = props;
   const { language } = node.attrs;
   const [languageValue, setLanguageValue] = useState<string | null>(
     language || null,
   );
-  const { hovered, ref } = useHover();
+  const [isSelected, setIsSelected] = useState(false);
+
+  useEffect(() => {
+    const updateSelection = () => {
+      const { state } = editor;
+      const { from, to } = state.selection;
+      // Check if the selection intersects with the node's range
+      const isNodeSelected =
+        (from >= getPos() && from < getPos() + node.nodeSize) ||
+        (to > getPos() && to <= getPos() + node.nodeSize);
+      setIsSelected(isNodeSelected);
+    };
+
+    editor.on("selectionUpdate", updateSelection);
+    return () => {
+      editor.off("selectionUpdate", updateSelection);
+    };
+  }, [editor, getPos(), node.nodeSize]);
 
   function changeLanguage(language: string) {
     setLanguageValue(language);
@@ -21,10 +38,10 @@ export default function CodeBlockView(props: NodeViewProps) {
   }
 
   return (
-    <NodeViewWrapper className="codeBlock" ref={ref}>
-      <Group justify="flex-end">
+    <NodeViewWrapper className="codeBlock">
+      <Group justify="flex-end" contentEditable={false}>
         <Select
-          placeholder="Auto"
+          placeholder="auto"
           checkIconPosition="right"
           data={extension.options.lowlight.listLanguages()}
           value={languageValue}
@@ -54,9 +71,18 @@ export default function CodeBlockView(props: NodeViewProps) {
         </CopyButton>
       </Group>
 
-      <pre spellCheck="false">
+      <pre
+        spellCheck="false"
+        hidden={
+          ((language === "mermaid" && !editor.isEditable) ||
+            (language === "mermaid" && !isSelected)) &&
+          node.textContent.length > 0
+        }
+      >
         <NodeViewContent as="code" className={`language-${language}`} />
       </pre>
+
+      {language === "mermaid" && <MermaidView props={props} />}
     </NodeViewWrapper>
   );
 }

apps/client/src/features/editor/components/code-block/code-block.module.css

@@ -2,3 +2,17 @@
     height: 25px;
     min-height: 25px;
 }
+
+.error {
+    color: light-dark(var(--mantine-color-red-8), var(--mantine-color-red-7));
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-gray-8));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mermaid {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

apps/client/src/features/editor/components/code-block/mermaid-view.tsx

@@ -0,0 +1,50 @@
+import { NodeViewProps } from "@tiptap/react";
+import { useEffect, useState } from "react";
+import mermaid from "mermaid";
+import { v4 as uuidv4 } from "uuid";
+import classes from "./code-block.module.css";
+
+mermaid.initialize({
+  startOnLoad: false,
+  suppressErrorRendering: true,
+});
+
+interface MermaidViewProps {
+  props: NodeViewProps;
+}
+
+export default function MermaidView({ props }: MermaidViewProps) {
+  const { node } = props;
+  const [preview, setPreview] = useState<string>("");
+
+  useEffect(() => {
+    const id = `mermaid-${uuidv4()}`;
+
+    if (node.textContent.length > 0) {
+      mermaid
+        .render(id, node.textContent)
+        .then((item) => {
+          setPreview(item.svg);
+        })
+        .catch((err) => {
+          if (props.editor.isEditable) {
+            setPreview(
+              `<div class="${classes.error}">Mermaid diagram error: ${err}</div>`,
+            );
+          } else {
+            setPreview(
+              `<div class="${classes.error}">Invalid Mermaid Diagram</div>`,
+            );
+          }
+        });
+    }
+  }, [node.textContent]);
+
+  return (
+    <div
+      className={classes.mermaid}
+      contentEditable={false}
+      dangerouslySetInnerHTML={{ __html: preview }}
+    ></div>
+  );
+}