alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-25 23:28:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

mermaid diagrams are rendered as image tags with link to mermaid server rendering; uses pako for compression as expected

Browse Source
This commit is contained in:
Adam Teichert
2025-12-10 17:44:02 -07:00
parent f6b2427749
commit a203dc6e46
4 changed files with 45 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/services/htmlMarkdownUtils.ts
View File

@@ -2,6 +2,7 @@
import { marked } from "marked";
import DOMPurify from "isomorphic-dompurify";
import markedKatex from "marked-katex-extension";
import pako from "pako";
import { LocalCourseSettings } from "@/features/local/course/localCourseSettings";
const mermaidExtension = {
@@ -22,9 +23,17 @@ const mermaidExtension = {
}
},
renderer(token: { text: string }) {
const base64 = btoa(token.text);
const url = `https://mermaid.ink/img/${base64}?type=svg`;
console.log(token.text, url);
const data = JSON.stringify({
code: token.text,
mermaid: { theme: "default" },
});
const compressed = pako.deflate(data, { level: 9 });
const binaryString = Array.from(compressed, (byte) =>
String.fromCharCode(byte)
).join("");
const base64 = btoa(binaryString).replace(/\+/g, "-").replace(/\//g, "_");
const url = `https://mermaid.ink/img/pako:${base64}?type=svg`;
// console.log(token.text, url);
return `<img src="${url}" alt="Mermaid diagram" />`;
},
};
@@ -63,6 +72,8 @@ export function convertImagesToCanvasImages(
}, {} as { [key: string]: string });
for (const imageSrc of imageSources) {
if (imageSrc.startsWith("http://") || imageSrc.startsWith("https://"))
continue;
const destinationUrl = imageLookup[imageSrc];
if (typeof destinationUrl === "undefined") {
console.log(