chore: update .gitignore to include Nx workspace caches and remove specific cache path

fix: enhance marked.utils.ts to support new table and image rendering logic

chore: update package-lock.json with new dependencies and versions

chore: update package.json to include @tailwindcss/postcss and adjust esbuild dependency

fix: correct postcss.config.js to use array format for plugins

Author: a-klos

.gitignore

@@ -158,3 +158,6 @@ dmypy.json
 cython_debug/
 
 **/.DS_Store
+
+# Nx workspace caches (frontend uses a nested Nx workspace)
+**/.nx/

services/frontend/.gitignore

@@ -37,4 +37,4 @@ testem.log
 .DS_Store
 Thumbs.db
 
-.nx/cache
+.nx/

services/frontend/libs/shared/utils/src/lib/marked.utils.ts

@@ -4,8 +4,19 @@ import { newUid } from "./uuid.util";
 export const initializeMarkdown = () => {
     const renderer = new marked.Renderer();
 
-    renderer.table = (header, body) => {
-        return `<table class="table table-xs">${header}${body}</table>`;
+    // Preserve default behavior while injecting our own CSS classes.
+    const anyRenderer = renderer as unknown as Record<string, any>;
+    const originalTable = anyRenderer['table']?.bind(renderer) as ((...args: any[]) => string) | undefined;
+    anyRenderer['table'] = (...args: any[]): string => {
+        // Marked >= v16 provides a token argument; older versions pass (header, body)
+        if (args.length === 1 && typeof args[0] === 'object') {
+            const html = originalTable ? originalTable(args[0]) : '';
+            return html
+                ? html.replace('<table>', '<table class="table table-xs">')
+                : '<table class="table table-xs"></table>';
+        }
+        const [header, body] = args as [string, string];
+        return `<table class="table table-xs">${header ?? ''}${body ?? ''}</table>`;
     };
 
     const toggleModal = (modalId: string) => {
@@ -15,25 +26,43 @@ export const initializeMarkdown = () => {
         }
     };
 
-    document.addEventListener('click', (event: any) => {
-        if (event?.target?.matches('.image-modal-trigger')) {
-            const modalId = event.target.getAttribute('data-modal-id');
-            toggleModal(modalId);
+    document.addEventListener('click', (event: MouseEvent) => {
+        const target = event.target as HTMLElement | null;
+        if (target && target.matches('.image-modal-trigger')) {
+            const modalId = target.getAttribute('data-modal-id');
+            if (modalId) toggleModal(modalId);
         }
     });
 
-    renderer.image = (href, title, text) => {
+    const originalImage = anyRenderer['image']?.bind(renderer) as ((...args: any[]) => string) | undefined;
+    anyRenderer['image'] = (...args: any[]): string => {
+        let href = '' as string | undefined;
+        let title = null as string | null;
+        let text = '' as string | undefined;
+        // token form
+        if (args.length === 1 && typeof args[0] === 'object') {
+            const token = args[0] as { href?: string; title?: string | null; text?: string };
+            href = token.href;
+            title = token.title ?? null;
+            text = token.text;
+        } else {
+            // legacy form (href, title, text)
+            [href, title, text] = args as [string, string | null, string];
+        }
         const imageId = newUid();
+        const titleAttr = title ? ` title="${title}"` : '';
+        const src = href ?? '';
+        const alt = text ?? '';
         return `
         <div class="py-2 mb-1">
-            <img src="${href}" alt="${text}" title="${title}" class="cursor-pointer w-full image-modal-trigger" data-modal-id="${imageId}"/>
+            <img src="${src}" alt="${alt}"${titleAttr} class="cursor-pointer w-full image-modal-trigger" data-modal-id="${imageId}"/>
         </div>
-        <dialog id="${imageId}" className="modal" style="width:80%;">
-            <div className="modal-box w-full">
+        <dialog id="${imageId}" class="modal" style="width:80%;">
+            <div class="modal-box w-full">
             <form method="dialog">
             <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
           </form>
-            <img src="${href}" alt="${text}" class="w-full min-w-96"/>
+            <img src="${src}" alt="${alt}" class="w-full min-w-96"/>
             </div>
         </dialog>
            `;