marky/renderers.js at main · Tommertom/marky · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
// Initialize Mermaid with theme support
const currentTheme =
  document.documentElement.getAttribute("data-theme") || "light";
if (window.mermaid) {
  mermaid.initialize({
    startOnLoad: false,
    theme: currentTheme === "dark" ? "dark" : "default",
    securityLevel: "loose",
    fontFamily:
      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',
  });
}

// Mermaid diagram counter for unique IDs
let mermaidCounter = 0;

/**
 * Render all mermaid code blocks in the given container
 * Converts <pre><code class="language-mermaid"> to rendered SVG diagrams
 */
async function renderMermaidDiagrams(container) {
  if (!window.mermaid) return;
  const mermaidBlocks = container.querySelectorAll("pre code.language-mermaid");

  for (const codeBlock of mermaidBlocks) {
    const pre = codeBlock.parentElement;
    const source = codeBlock.textContent.trim();

    if (!source) continue;

    const wrapper = document.createElement("div");
    wrapper.className = "mermaid-wrapper";
    wrapper.setAttribute("contenteditable", "false");

    // Store source in hidden element for markdown conversion
    const sourceElement = document.createElement("pre");
    sourceElement.className = "mermaid-source";
    sourceElement.textContent = source;
    wrapper.appendChild(sourceElement);

    const diagramContainer = document.createElement("div");
    diagramContainer.className = "mermaid-diagram";
    wrapper.appendChild(diagramContainer);

    try {
      const id = `mermaid-${Date.now()}-${mermaidCounter++}`;
      const { svg } = await mermaid.render(id, source);
      diagramContainer.innerHTML = svg;
    } catch (error) {
      console.error("[Mermaid] Render error:", error);
      const errorDiv = document.createElement("div");
      errorDiv.className = "mermaid-error";
      errorDiv.textContent = `Mermaid Error: ${
        error.message || "Failed to render diagram"
      }`;
      diagramContainer.appendChild(errorDiv);

      // Also show the source code when there's an error
      const codeDisplay = document.createElement("pre");
      codeDisplay.style.textAlign = "left";
      codeDisplay.style.marginTop = "1rem";
      codeDisplay.innerHTML = `<code>${source
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")}</code>`;
      diagramContainer.appendChild(codeDisplay);
    }

    pre.parentNode.replaceChild(wrapper, pre);
  }
}

/**
 * Re-render all mermaid diagrams with new theme
 */
async function reRenderMermaidWithTheme(theme) {
  if (!window.mermaid) return;
  mermaid.initialize({
    startOnLoad: false,
    theme: theme === "dark" ? "dark" : "default",
    securityLevel: "loose",
    fontFamily:
      '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif',
  });

  const wrappers = editor.querySelectorAll(".mermaid-wrapper");
  for (const wrapper of wrappers) {
    const sourceElement = wrapper.querySelector(".mermaid-source");
    if (!sourceElement) continue;

    const source = sourceElement.textContent.trim();
    const diagramContainer = wrapper.querySelector(".mermaid-diagram");

    try {
      const id = `mermaid-${Date.now()}-${mermaidCounter++}`;
      const { svg } = await mermaid.render(id, source);
      diagramContainer.innerHTML = svg;
    } catch (error) {
      console.error("[Mermaid] Re-render error:", error);
    }
  }
}

function containsLatex(text) {
  // Matches: \\( ... \\), \\[ ... \\], $$ ... $$, $ ... $
  return /(\\\\\([\s\S]+?\\\\\)|\\\\\[[\s\S]+?\\\\\]|\$\$[\s\S]+?\$\$|(^|[^\\\\$])\$(?!\$)(?:[^$\n]|\\\\\$)+?\$(?!\$))/m.test(
    text || "",
  );
}

async function renderLatex(container) {
  if (!window.MathJax || typeof window.MathJax.typesetPromise !== "function")
    return;
  if (!containsLatex(container.textContent)) return;

  try {
    await window.MathJax.typesetPromise([container]);
  } catch (error) {
    console.error("[MathJax] Render error:", error);
  }
}