markup map

package.json

@@ -24,6 +24,9 @@
     "dangerously-set-html-content": "^1.1.0",
     "dompurify": "^3.1.5",
     "framer-motion": "^11.2.13",
+    "markmap-common": "^0.17.0",
+    "markmap-lib": "^0.17.0",
+    "markmap-toolbar": "^0.17.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
     "react-collapsed": "^4.1.2",

src/components/mindmap/mindmap-hooks.tsx

+import React, { useState, useRef, useEffect } from 'react';
+import { Markmap } from 'markmap-view';
+import { transformer } from './mindmap';
+import 'markmap-toolbar/dist/style.css';
+
+const initValue = `# markmap
+
+- beautiful
+- useful
+- easy
+- interactive
+`;
+
+
+
+export default function MarkmapHooks() {
+  const [value, setValue] = useState(initValue);
+  // Ref for SVG element
+  const refSvg = useRef<SVGSVGElement>();
+  // Ref for markmap object
+  const refMm = useRef<Markmap>();
+
+  useEffect(() => {
+    // Create markmap and save to refMm
+    if (refMm.current) return;
+    const mm = Markmap.create(refSvg.current);
+    refMm.current = mm;
+  }, [refSvg.current]);
+
+  useEffect(() => {
+    // Update data for markmap once value is changed
+    const mm = refMm.current;
+    if (!mm) return;
+    const { root } = transformer.transform(value);
+    mm.setData(root);
+    mm.fit();
+  }, [refMm.current, value]);
+
+
+
+  return (
+    <React.Fragment>
+      <div className="flex-1">
+      </div>
+      <svg className="flex-1" ref={refSvg} />
+    </React.Fragment>
+  );
+}

src/components/mindmap/mindmap.ts

+import { loadCSS, loadJS } from 'markmap-common';
+import { Transformer } from 'markmap-lib';
+
+export const transformer = new Transformer();
+const { scripts, styles } = transformer.getAssets();
+loadCSS(styles);
+loadJS(scripts);

src/contents/human-practices.tsx

@@ -13,6 +13,7 @@ import { AllPopus } from "../components/HorizontalTimeline";
 import { BFHStyleTabs, ButtonRowTabs } from "../components/Tabs";
 import { TabButtonRow, openTab } from "../components/Buttons";
 import { BlockQuoteB } from "../components/Quotes";
+import MarkmapHooks from "../components/mindmap/mindmap-hooks";
 
 
 let timelinebuttonrowdata = [
@@ -126,7 +127,7 @@ export function HumanPractices() {
     <div className="center">
       <h3 className="col personalstyleone">Overview</h3>
     </div>
-    
+    <MarkmapHooks/>
     <div className="center">
       <h3 className="col personalstyleone">Timeline</h3>
     </div>