markstream-angular 2.0.14 → 2.0.16

package/dist/fesm2022/markstream-angular.mjs

@@ -2405,6 +2405,20 @@ function extractRenderedSvg(renderResult) {
     return '';
 }
 
+// D2 derives the ids and style-scope classes of its SVG output from a hash of the
+// diagram source, so two identical diagrams would otherwise emit duplicate
+// `id`/`url(#…)` targets and two document-level `.d2-<hash>` style scopes — one
+// of them then wins and the diagrams get each other's colours. D2 exposes
+// `RenderOptions.salt` for exactly this case ("useful when generating multiple
+// identical diagrams to be included in the same HTML doc"). Every render takes a
+// fresh salt from this module-scoped counter, which the block component and
+// `enhanceRenderedHtml` share, so both render paths stay unique on one page.
+let d2RenderSaltSequence = 0;
+function createD2RenderSalt(prefix = 'markstream-angular-d2') {
+    d2RenderSaltSequence += 1;
+    return `${prefix}-${d2RenderSaltSequence}`;
+}
+
 async function copyTextToClipboard(source) {
     try {
         if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
@@ -2661,6 +2675,7 @@ class D2BlockNodeComponent {
                     ...DARK_THEME_OVERRIDES$1,
                 };
             }
+            renderOptions.salt = renderOptions.salt ?? createD2RenderSalt();
             const renderResult = await instance.render(diagram, renderOptions);
             if (this.destroyed || token !== this.renderToken)
                 return;
@@ -3235,6 +3250,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                 type: Input
             }] } });
 
+// Footnote ids are derived from the markdown label (`fnref-<label>` / `fnref--<label>`), so the
+// same id can exist in several renderer trees on one page. Resolve the target inside the tree the
+// clicked element belongs to, and only fall back to the document when that tree has no match.
+const RENDERER_ROOT_SELECTOR = '.markdown-renderer';
+function toIdSelector(id) {
+    return `[id="${id.replace(/["\\]/g, '\\$&')}"]`;
+}
+function findFootnoteElement(source, id) {
+    if (typeof document === 'undefined' || typeof Element === 'undefined')
+        return null;
+    const selector = toIdSelector(id);
+    let scope = source instanceof Element ? source.closest(RENDERER_ROOT_SELECTOR) : null;
+    while (scope) {
+        const found = scope.querySelector(selector);
+        if (found)
+            return found;
+        scope = scope.parentElement?.closest(RENDERER_ROOT_SELECTOR) ?? null;
+    }
+    return document.querySelector(selector);
+}
+
 class FootnoteAnchorNodeComponent {
     get id() {
         return getString$1(this.node?.id);
@@ -3245,12 +3281,20 @@ class FootnoteAnchorNodeComponent {
     get title() {
         return `Back to reference ${this.id}`;
     }
+    handleClick(event) {
+        event.preventDefault();
+        if (typeof document === 'undefined')
+            return;
+        const target = findFootnoteElement(event.currentTarget, `fnref-${this.id}`);
+        target?.scrollIntoView({ behavior: 'smooth' });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FootnoteAnchorNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: FootnoteAnchorNodeComponent, isStandalone: true, selector: "markstream-angular-footnote-anchor-node", inputs: { node: "node" }, ngImport: i0, template: `
     <a
       class="footnote-anchor text-sm text-[#0366d6] hover:underline cursor-pointer"
       [attr.href]="href"
       [attr.title]="title"
+      (click)="handleClick($event)"
     >
       ↩︎
     </a>
@@ -3266,6 +3310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
       class="footnote-anchor text-sm text-[#0366d6] hover:underline cursor-pointer"
       [attr.href]="href"
       [attr.title]="title"
+      (click)="handleClick($event)"
     >
       ↩︎
     </a>
@@ -3334,10 +3379,17 @@ class FootnoteReferenceNodeComponent {
     get referenceId() {
         return `fnref-${this.id}`;
     }
+    handleClick(event) {
+        event.preventDefault();
+        if (typeof document === 'undefined')
+            return;
+        const target = findFootnoteElement(event.currentTarget, `fnref--${this.id}`);
+        target?.scrollIntoView({ behavior: 'smooth' });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FootnoteReferenceNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: FootnoteReferenceNodeComponent, isStandalone: true, selector: "markstream-angular-footnote-reference-node", inputs: { node: "node" }, ngImport: i0, template: `
     <sup [attr.id]="referenceId" class="markstream-nested-footnote-ref">
-      <a [attr.href]="href">[{{ id }}]</a>
+      <a [attr.href]="href" (click)="handleClick($event)">[{{ id }}]</a>
     </sup>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -3348,7 +3400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                     standalone: true,
                     template: `
     <sup [attr.id]="referenceId" class="markstream-nested-footnote-ref">
-      <a [attr.href]="href">[{{ id }}]</a>
+      <a [attr.href]="href" (click)="handleClick($event)">[{{ id }}]</a>
     </sup>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -6685,6 +6737,20 @@ async function getMermaid(initConfig) {
     }
 }
 
+// Mermaid keys both its temporary render container (`#d<id>`) and the produced
+// `<svg id>` by the id handed to `mermaid.render`, then resolves that id again
+// when it binds interactions. The id therefore has to be unique across every
+// diagram on the page, not only inside one render path: the block component and
+// `enhanceRenderedHtml` used to keep separate counters that both started at
+// `markstream-angular-mermaid-1`, so mixing the two paths on one page made
+// Mermaid delete the other render's container and leave a blank preview
+// (issue #775). Both now share this module-scoped counter.
+let mermaidRenderSequence = 0;
+function createMermaidRenderId(prefix = 'markstream-angular-mermaid') {
+    mermaidRenderSequence += 1;
+    return `${prefix}-${mermaidRenderSequence}`;
+}
+
 let worker = null;
 let workerInitError = null;
 const rpcMap = new Map();
@@ -6852,7 +6918,6 @@ function terminateWorker() {
     }
 }
 
-let mermaidRenderSequence = 0;
 let mermaidRenderQueue = Promise.resolve();
 function enqueueMermaidRender(run) {
     const next = mermaidRenderQueue.then(run, run);
@@ -7169,7 +7234,7 @@ class MermaidBlockNodeComponent {
                     return;
                 }
             }
-            const renderId = `markstream-angular-mermaid-${++mermaidRenderSequence}`;
+            const renderId = createMermaidRenderId();
             const themedSource = this.applyThemeTo(renderSource, theme);
             const rendered = await enqueueMermaidRender(() => this.withTimeout(() => Promise.resolve(mermaid.render(renderId, themedSource)), this.resolvedLoading && this.resolvedProgressiveRender
                 ? this.resolvedRenderTimeout
@@ -7265,7 +7330,7 @@ class MermaidBlockNodeComponent {
                 throw new DOMException('Aborted', 'AbortError');
             return true;
         }
-        const renderId = `markstream-angular-mermaid-parse-${++mermaidRenderSequence}`;
+        const renderId = createMermaidRenderId('markstream-angular-mermaid-parse');
         await this.withTimeout(() => Promise.resolve(anyMermaid.render(renderId, themedSource)), this.resolvedParseTimeout);
         if (this.destroyed || token !== this.renderToken)
             throw new DOMException('Aborted', 'AbortError');
@@ -8967,7 +9032,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                 type: Input
             }] } });
 
-let mermaidRenderId = 0;
 const rootHandles = new WeakMap();
 const DARK_THEME_OVERRIDES = {
     N1: '#E5E7EB',
@@ -9193,7 +9257,7 @@ async function renderMermaid(root, cleanupFns, options, isActive) {
                     sourceToRender = prefix;
                 }
             }
-            const renderId = `markstream-angular-mermaid-${++mermaidRenderId}`;
+            const renderId = createMermaidRenderId();
             const rendered = await withTimeout(() => Promise.resolve(mermaid.render(renderId, applyMermaidThemeTo(sourceToRender, theme))), options.final === false
                 ? Number(options.mermaidProps?.renderTimeoutMs ?? 2500)
                 : Number(options.mermaidProps?.fullRenderTimeoutMs ?? 4000));
@@ -9248,7 +9312,7 @@ async function canParseMermaidWithFallback(source, theme, mermaid, options) {
         await withTimeout(() => Promise.resolve(mermaid.parse(themedSource)), parseTimeout);
         return true;
     }
-    const renderId = `markstream-angular-mermaid-parse-${++mermaidRenderId}`;
+    const renderId = createMermaidRenderId('markstream-angular-mermaid-parse');
     await withTimeout(() => Promise.resolve(mermaid.render(renderId, themedSource)), parseTimeout);
     return true;
 }
@@ -9401,6 +9465,7 @@ async function renderD2(root, cleanupFns, options, isActive) {
                     ...(baseOverrides || {}),
                 };
             }
+            renderOptions.salt = renderOptions.salt ?? createD2RenderSalt();
             const renderResult = await instance.render(diagram, renderOptions);
             if (!isActive())
                 return;