[ENG-9234] P10.1 - Bring back support for table of contents in wiki markdown

angular.json

@@ -29,6 +29,8 @@
               "cedar-embeddable-editor",
               "cedar-artifact-viewer",
               "markdown-it-video",
+              "markdown-it-anchor",
+              "markdown-it-toc-done-right",
               "ace-builds/src-noconflict/ext-language_tools",
               "@traptitech/markdown-it-katex",
               "@citation-js/core",

package.json

@@ -59,6 +59,8 @@
     "chart.js": "^4.4.9",
     "diff": "^8.0.2",
     "markdown-it": "^14.1.0",
+    "markdown-it-anchor": "^9.2.0",
+    "markdown-it-toc-done-right": "^4.2.0",
     "markdown-it-video": "^0.6.3",
     "ngx-captcha": "^13.0.0",
     "ngx-cookie-service": "^19.1.2",

src/@types/markdown-it-toc-done-right.d.ts

@@ -0,0 +1,27 @@
+declare module 'markdown-it-toc-done-right' {
+  import { PluginWithOptions } from 'markdown-it';
+
+  export interface TocOptions {
+    placeholder: string;
+    slugify: (s: string) => string;
+    uniqueSlugStartIndex: number;
+    containerClass: string;
+    containerId: string;
+    listClass: string;
+    itemClass: string;
+    linkClass: string;
+    level: number | number[];
+    listType: 'ol' | 'ul';
+    format: (s: string) => string;
+    callback: (tocCode: string, ast: TocAst) => void;
+  }
+
+  export interface TocAst {
+    l: number;
+    n: string;
+    c: TocAst[];
+  }
+
+  const markdownItTocDoneRight: PluginWithOptions<Partial<TocOptions>>;
+  export default markdownItTocDoneRight;
+}

src/app/shared/components/markdown/markdown.component.html

@@ -1 +1 @@
-<div class="md-editor-container" [innerHTML]="renderedHtml()"></div>
+<div #container class="md-editor-container" [innerHTML]="renderedHtml()"></div>

src/app/shared/components/markdown/markdown.component.ts

@@ -1,9 +1,22 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, Signal } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  ElementRef,
+  inject,
+  input,
+  Signal,
+  ViewChild,
+} from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 import { legacyImgSize } from '@mdit/plugin-img-size';
 import markdownItKatex from '@traptitech/markdown-it-katex';
 import MarkdownIt from 'markdown-it';
+import markdownItAnchor from 'markdown-it-anchor';
+import markdownItTocDoneRight from 'markdown-it-toc-done-right';
 import markdownItVideo from 'markdown-it-video';
 
 @Component({
@@ -13,11 +26,15 @@ import markdownItVideo from 'markdown-it-video';
   styleUrl: './markdown.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MarkdownComponent {
+export class MarkdownComponent implements AfterViewInit {
   markdownText = input<string>('');
 
+  @ViewChild('container', { static: false }) containerRef?: ElementRef<HTMLElement>;
+
   private md: MarkdownIt;
   private sanitizer = inject(DomSanitizer);
+  private destroyRef = inject(DestroyRef);
+  private clickHandler?: (event: MouseEvent) => void;
 
   renderedHtml: Signal<SafeHtml> = computed(() => {
     const result = this.md.render(this.markdownText());
@@ -39,6 +56,42 @@ export class MarkdownComponent {
         output: 'mathml',
         throwOnError: false,
       })
+      .use(markdownItAnchor)
+      .use(markdownItTocDoneRight, {
+        placeholder: '@\\[toc\\]',
+        listType: 'ul',
+      })
       .use(legacyImgSize);
   }
+
+  ngAfterViewInit(): void {
+    this.setupClickHandler();
+  }
+
+  private setupClickHandler(): void {
+    if (!this.containerRef?.nativeElement) {
+      return;
+    }
+
+    const container = this.containerRef.nativeElement;
+
+    this.clickHandler = (event: MouseEvent) => {
+      const anchor = (event.target as HTMLElement).closest('a');
+      if (!anchor?.hash) {
+        return;
+      }
+
+      const targetElement = document.getElementById(anchor.hash.substring(1));
+      if (targetElement) {
+        event.preventDefault();
+        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    };
+
+    container.addEventListener('click', this.clickHandler);
+
+    this.destroyRef.onDestroy(() => {
+      container.removeEventListener('click', this.clickHandler!);
+    });
+  }
 }