init elas atelier

frontend/src/lib/markdown.ts

@@ -5,6 +5,15 @@ import { gfmHeadingId } from 'marked-gfm-heading-id';
 import hljs from 'highlight.js';
 import DOMPurify from 'isomorphic-dompurify';
 
+function escapeHtml(s: string): string {
+  return s
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
 const renderer = new Marked()
   .setOptions({ gfm: true, breaks: false })
   .use(gfmHeadingId())
@@ -17,7 +26,22 @@ const renderer = new Marked()
       },
     }),
   )
-  .use(markedKatex({ throwOnError: false, nonStandard: true }));
+  .use(markedKatex({ throwOnError: false, nonStandard: true }))
+  .use({
+    renderer: {
+      image({ href, title, text }: { href: string; title: string | null; text: string }) {
+        const safeHref = escapeHtml(href);
+        const safeAlt = escapeHtml(text || '');
+        const safeTitle = title ? escapeHtml(title) : '';
+        const caption = title || text || '';
+        const figcaption = caption.trim()
+          ? `<figcaption>${escapeHtml(caption)}</figcaption>`
+          : '';
+        const titleAttr = safeTitle ? ` title="${safeTitle}"` : '';
+        return `<figure><img src="${safeHref}" alt="${safeAlt}"${titleAttr} loading="lazy" />${figcaption}</figure>`;
+      },
+    },
+  });
 
 const KATEX_TAGS = [
   'math', 'annotation', 'semantics', 'mrow', 'mi', 'mo', 'mn', 'mtext',
@@ -29,7 +53,7 @@ const KATEX_TAGS = [
 export function renderMarkdown(src: string): string {
   const html = renderer.parse(src, { async: false }) as string;
   return DOMPurify.sanitize(html, {
-    ADD_TAGS: KATEX_TAGS,
-    ADD_ATTR: ['aria-hidden', 'style', 'id', 'class', 'encoding', 'mathvariant', 'displaystyle', 'scriptlevel'],
+    ADD_TAGS: [...KATEX_TAGS, 'figure', 'figcaption'],
+    ADD_ATTR: ['aria-hidden', 'style', 'id', 'class', 'encoding', 'mathvariant', 'displaystyle', 'scriptlevel', 'loading'],
   });
 }