use original code for mermaid

apps/app/src/features/mermaid/components/MermaidViewer.tsx

@@ -5,25 +5,26 @@ import mermaid from 'mermaid';
 
 type MermaidViewerProps = {
   children: ReactNode,
+  value: string
 }
 
 export const MermaidViewer = React.memo((props: MermaidViewerProps): JSX.Element => {
-  const { children } = props;
+  const { children, value } = props;
 
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    if (ref.current != null && children != null) {
+    if (ref.current != null && value != null) {
       mermaid.initialize({});
       mermaid.run({ nodes: [ref.current] });
     }
-  }, [children]);
+  }, [value]);
 
   return (
     children
       ? (
         <div ref={ref} key={children as string}>
-          {children}
+          {value}
         </div>
       )
       : <div key={children as string}></div>

apps/app/src/features/mermaid/services/mermaid.ts

@@ -7,6 +7,9 @@ function rewriteNode(node: Node) {
   // replace node
   const data = node.data ?? (node.data = {});
   data.hName = 'mermaid';
+  data.hProperties = {
+    value: node.value,
+  };
 }
 
 export const remarkPlugin: Plugin = function() {
@@ -21,4 +24,7 @@ export const remarkPlugin: Plugin = function() {
 
 export const sanitizeOption: SanitizeOption = {
   tagNames: ['mermaid'],
+  attributes: {
+    mermaid: ['value'],
+  },
 };