feat: file explorer

frontend/src/utils/markdown.js

@@ -0,0 +1,29 @@
+/**
+ * Preprocesses markdown content to support extended image size syntax:
+ *
+ *   ![alt](url =WIDTHxHEIGHT)
+ *   ![alt](url "title" =WIDTHxHEIGHT)
+ *
+ * WIDTH and HEIGHT are pixel values or percentages (e.g. 50%).
+ * Either can be omitted:
+ *   =200x   → width 200 only
+ *   =x150   → height 150 only
+ *
+ * The syntax is transformed into a plain <img> tag before passing to marked
+ * because CommonMark terminates the link destination at whitespace, making it
+ * impossible for marked to see the size spec otherwise.
+ */
+export function preprocessMarkdown(content) {
+    if (!content) return content;
+    return content.replace(
+        /!\[([^\]]*)\]\(([^\s)"]+)(?:\s+"([^"]*)")?\s+=(\d*%?)[xX](\d*%?)\)/gi,
+        (_, alt, url, title, w, h) => {
+            const safeAlt = alt.replace(/"/g, "&quot;");
+            let attrs = `src="${url}" alt="${safeAlt}"`;
+            if (title) attrs += ` title="${title.replace(/"/g, "&quot;")}"`;
+            if (w) attrs += ` width="${w}"`;
+            if (h) attrs += ` height="${h}"`;
+            return `<img ${attrs}>`;
+        },
+    );
+}