chore: update Angular cache with new TypeScript definitions

src/components/note-viewer/note-viewer.component.ts

@@ -142,6 +142,8 @@ export class NoteViewerComponent implements OnDestroy {
   private mermaidLib: MermaidLib | null = null;
   private readonly dateFormatter = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' });
   private readonly metadataKeysToExclude = new Set(['tags', 'tag', 'keywords']);
+  private attachmentErrorCleanup: (() => void) | null = null;
+  private attachmentHandlersScheduled = false;
   readonly metadataExpanded = signal(false);
   readonly maxMetadataPreviewItems = 3;
 
@@ -205,6 +207,7 @@ export class NoteViewerComponent implements OnDestroy {
     effect(() => {
       this.noteHtmlContent();
       this.scheduleMermaidRender();
+      this.scheduleAttachmentHandlers();
     });
 
     afterNextRender(() => {
@@ -247,6 +250,7 @@ export class NoteViewerComponent implements OnDestroy {
 
       this.setupMermaidObservation();
       this.scheduleMermaidRender();
+      this.scheduleAttachmentHandlers();
     });
   }
 
@@ -255,6 +259,8 @@ export class NoteViewerComponent implements OnDestroy {
     this.mermaidObserver = null;
     this.mermaidLib = null;
     this.mermaidLoader = null;
+    this.attachmentErrorCleanup?.();
+    this.attachmentErrorCleanup = null;
   }
 
   getFrontmatterKeys(frontmatter: { [key: string]: any }): string[] {
@@ -312,6 +318,69 @@ export class NoteViewerComponent implements OnDestroy {
     });
   }
 
+  private scheduleAttachmentHandlers(): void {
+    if (this.attachmentHandlersScheduled) {
+      return;
+    }
+
+    this.attachmentHandlersScheduled = true;
+    queueMicrotask(() => {
+      this.attachmentHandlersScheduled = false;
+      this.attachAttachmentErrorHandlers();
+    });
+  }
+
+  private attachAttachmentErrorHandlers(): void {
+    this.attachmentErrorCleanup?.();
+    this.attachmentErrorCleanup = null;
+
+    const host = this.elementRef.nativeElement as HTMLElement;
+    const images = Array.from(host.querySelectorAll<HTMLImageElement>('img.md-attachment-image'));
+
+    if (!images.length) {
+      return;
+    }
+
+    const cleanupCallbacks: Array<() => void> = [];
+    const noteId = this.note()?.id ?? 'unknown-note';
+
+    for (const image of images) {
+      const handleError = () => {
+        image.removeEventListener('error', handleError);
+
+        const attachmentName = image.dataset.attachmentName?.trim() || image.alt || 'attachment';
+        const fallbackMarkup = image.dataset.errorMessage || `<div class=\"missing-attachment text-center text-sm text-red-500 dark:text-red-400\">‼️Attachement ${attachmentName} introuvable</div>`;
+
+        console.warn('[ObsiViewer] Attachment missing', {
+          noteId,
+          attachmentName,
+          src: image.currentSrc || image.src,
+        });
+
+        try {
+          image.outerHTML = fallbackMarkup;
+        } catch {
+          const wrapper = document.createElement('div');
+          wrapper.innerHTML = fallbackMarkup;
+          const parent = image.parentElement;
+          const nodes = Array.from(wrapper.childNodes);
+          if (parent) {
+            nodes.forEach(node => parent.insertBefore(node, image));
+            image.remove();
+          }
+        }
+      };
+
+      image.addEventListener('error', handleError, { once: true });
+      cleanupCallbacks.push(() => image.removeEventListener('error', handleError));
+    }
+
+    this.attachmentErrorCleanup = () => {
+      cleanupCallbacks.forEach(fn => fn());
+      this.attachmentErrorCleanup = null;
+    };
+  }
+
   private ensureMermaid(): Promise<MermaidLib> {
     if (this.mermaidLib) {
       return Promise.resolve(this.mermaidLib);