Markdown mermaid

source/common/modules/markdown-editor/context-menu/link-image-menu.ts

@@ -35,20 +35,25 @@ const ipcRenderer = window.ipc
  *
  * @return  {string}              The URL string, or undefined
  */
-function getURLForNode (node: SyntaxNode, state: EditorState): string|undefined {
-  if (node.type.name === 'URL') {
-    return state.sliceDoc(node.from, node.to)
-  }
+function getURLForNode(node: SyntaxNode, state: EditorState): string | undefined {
+    // Check if the node itself is of type 'URL'
+    if (node.type.name === 'URL') {
+        return state.sliceDoc(node.from, node.to);
+    }
 
-  const child = node.getChild('URL')
+    // If the node has children, recursively search for a node of type 'URL'
+    if (node.firstChild !== null) {
+        for (let child of node.children) {
+            const url = getURLForNode(child, state);
+            if (url !== undefined) {
+                return url;
+            }
+        }
+    }
 
-  if (child === null) {
-    return undefined
-  } else {
-    return state.sliceDoc(child.from, child.to)
-  }
+    // If no 'URL' node is found in the children, return undefined
+    return undefined;
 }
-
 /**
  * Shows a context menu appropriate for a link or image using the given node
  *

source/renderer/markdown.ts

@@ -0,0 +1,10 @@
+import MarkdownIt from 'markdown-it';
+import MarkdownItCustomBlock from 'markdown-it-custom-block';
+
+const md = new MarkdownIt();
+
+md.use(MarkdownItCustomBlock, {
+  chart: function (content: string) {
+    return `<canvas class="chartjs-render" data-config='${content}'></canvas>`;
+  }
+});

source/renderer/renderChart.ts

@@ -0,0 +1,5 @@
+import Chart from 'chart.js/auto';
+
+export function renderChart(ctx: CanvasRenderingContext2D, config: any) {
+  new Chart(ctx, config);
+}

source/renderer/renderer.ts

@@ -0,0 +1,25 @@
+import { renderChart } from './renderChart';
+import MarkdownIt from 'markdown-it';
+import MarkdownItCustomBlock from 'markdown-it-custom-block';
+
+const md = new MarkdownIt();
+md.use(MarkdownItCustomBlock, {
+  chart: function (content: string) {
+    return `<canvas class="chartjs-render" data-config='${content}'></canvas>`;
+  }
+});
+
+export function renderMarkdownWithCharts(markdown: string): string {
+  const html = md.render(markdown);
+  const container = document.getElementById('markdown-container');
+  if (container) {
+    container.innerHTML = html;
+    const chartBlocks = container.querySelectorAll('.chartjs-render');
+    chartBlocks.forEach(block => {
+      const config = JSON.parse(block.getAttribute('data-config') || '{}');
+      const canvas = block as HTMLCanvasElement;
+      renderChart(canvas.getContext('2d')!, config);
+    });
+  }
+  return html;
+}