added markmap support to the markdown-renderer (#572)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/markdown-renderer/full-markdown-renderer.tsx

@@ -47,6 +47,7 @@ import { HighlightedCodeReplacer } from './replace-components/highlighted-fence/
 import { ImageReplacer } from './replace-components/image/image-replacer'
 import { KatexReplacer } from './replace-components/katex/katex-replacer'
 import { LinemarkerReplacer } from './replace-components/linemarker/linemarker-replacer'
+import { MarkmapReplacer } from './replace-components/markmap/markmap-replacer'
 import { MermaidReplacer } from './replace-components/mermaid/mermaid-replacer'
 import { PdfReplacer } from './replace-components/pdf/pdf-replacer'
 import { PossibleWiderReplacer } from './replace-components/possible-wider/possible-wider-replacer'
@@ -95,6 +96,7 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
       new FlowchartReplacer(),
       new MermaidReplacer(),
       new GraphvizReplacer(),
+      new MarkmapReplacer(),
       new VegaReplacer(),
       new HighlightedCodeReplacer(),
       new QuoteOptionsReplacer(),

src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx

@@ -0,0 +1,25 @@
+import { transform } from 'markmap-lib/dist/transform'
+import { Markmap } from 'markmap-lib/dist/view'
+import React, { useEffect, useRef } from 'react'
+
+export interface MarkmapFrameProps {
+  code: string
+}
+
+export const MarkmapFrame: React.FC<MarkmapFrameProps> = ({ code }) => {
+  const diagramContainer = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!diagramContainer.current) {
+      return
+    }
+    const svg: SVGSVGElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.setAttribute('width', '100%')
+    diagramContainer.current.querySelectorAll('svg').forEach(child => child.remove())
+    diagramContainer.current.appendChild(svg)
+    const data = transform(code)
+    Markmap.create(svg, {}, data)
+  }, [code])
+
+  return <div className={'text-center'} ref={diagramContainer}/>
+}

src/components/markdown-renderer/replace-components/markmap/markmap-replacer.tsx

@@ -0,0 +1,16 @@
+import { DomElement } from 'domhandler'
+import React from 'react'
+import { ComponentReplacer } from '../ComponentReplacer'
+import { MarkmapFrame } from './markmap-frame'
+
+export class MarkmapReplacer implements ComponentReplacer {
+  getReplacement (codeNode: DomElement): React.ReactElement | undefined {
+    if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || codeNode.attribs['data-highlight-language'] !== 'markmap' || !codeNode.children || !codeNode.children[0]) {
+      return
+    }
+
+    const code = codeNode.children[0].data as string
+
+    return <MarkmapFrame code={code}/>
+  }
+}