markstream-angular 2.0.7 → 2.0.9

package/dist/fesm2022/markstream-angular.mjs

@@ -2377,7 +2377,7 @@ function scrubSvgElement(svgEl) {
         }
     }
 }
-function toSafeSvgMarkup(svg) {
+function toSafeSvgMarkup(svg, rootClass) {
     if (typeof DOMParser === 'undefined')
         return '';
     if (!svg)
@@ -2389,6 +2389,8 @@ function toSafeSvgMarkup(svg) {
         return '';
     const svgElement = svgEl;
     scrubSvgElement(svgElement);
+    if (rootClass)
+        svgElement.classList.add(rootClass);
     return svgElement.outerHTML;
 }
 function extractRenderedSvg(renderResult) {
@@ -2547,8 +2549,12 @@ class D2BlockNodeComponent {
             return this.mergedProps.showTooltips;
         return this.context?.showTooltips !== false;
     }
-    get resolvedMaxHeight() {
-        return resolveCssSize(this.mergedProps.maxHeight, '500px');
+    get resolvedRenderStyle() {
+        const maxHeight = this.mergedProps.maxHeight;
+        if (maxHeight == null || maxHeight === '')
+            return null;
+        const max = resolveCssSize(maxHeight);
+        return `max-height: ${max}; --ms-d2-render-max-height: ${max}`;
     }
     get resolvedLoading() {
         if (typeof this.mergedProps.loading === 'boolean')
@@ -2658,7 +2664,7 @@ class D2BlockNodeComponent {
             const renderResult = await instance.render(diagram, renderOptions);
             if (this.destroyed || token !== this.renderToken)
                 return;
-            const safeSvg = toSafeSvgMarkup(extractRenderedSvg(renderResult));
+            const safeSvg = toSafeSvgMarkup(extractRenderedSvg(renderResult), 'markstream-d2-root-svg');
             if (!safeSvg)
                 throw new Error('D2 render returned empty output.');
             this.svgMarkup = safeSvg;
@@ -2757,7 +2763,7 @@ class D2BlockNodeComponent {
         </div>
       </div>
 
-      <div *ngIf="!collapsed" class="markstream-angular-enhanced-block__body d2-block-body" [style.maxHeight]="resolvedMaxHeight">
+      <div *ngIf="!collapsed" class="markstream-angular-enhanced-block__body d2-block-body" [style]="resolvedRenderStyle">
         <div *ngIf="rendering && !showSource" class="mermaid-loading">
           <span class="mermaid-spinner" aria-hidden="true"></span>
           <span>Rendering D2...</span>
@@ -2846,7 +2852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
         </div>
       </div>
 
-      <div *ngIf="!collapsed" class="markstream-angular-enhanced-block__body d2-block-body" [style.maxHeight]="resolvedMaxHeight">
+      <div *ngIf="!collapsed" class="markstream-angular-enhanced-block__body d2-block-body" [style]="resolvedRenderStyle">
         <div *ngIf="rendering && !showSource" class="mermaid-loading">
           <span class="mermaid-spinner" aria-hidden="true"></span>
           <span>Rendering D2...</span>
@@ -4461,7 +4467,20 @@ class InfographicBlockNodeComponent {
         return resolveCssSize(this.mergedProps.maxHeight, '500px');
     }
     get estimatedPreviewHeightPx() {
-        return clampPreviewHeight(parsePositiveNumber(this.mergedProps.estimatedPreviewHeightPx) ?? estimateInfographicPreviewHeight(this.code), undefined, this.maxPreviewHeight);
+        return clampPreviewHeight(parsePositiveNumber(this.mergedProps.estimatedPreviewHeightPx) ?? estimateInfographicPreviewHeight(this.code), this.resolveDiagramMinHeight(), this.maxPreviewHeight);
+    }
+    /**
+     * Resolve the diagram preview minimum height from the density CSS token
+     * (--ms-size-diagram-min-height), falling back to the built-in default.
+     * Mirrors MermaidBlockNode's resolveDiagramMinHeight; SSR falls back to the
+     * constant because getComputedStyle is browser-only.
+     */
+    resolveDiagramMinHeight() {
+        const el = this.previewHost?.nativeElement;
+        if (!el || typeof window === 'undefined' || typeof window.getComputedStyle !== 'function')
+            return INFOGRAPHIC_PREVIEW_MIN_HEIGHT;
+        const raw = window.getComputedStyle(el).getPropertyValue('--ms-size-diagram-min-height').trim();
+        return parsePositiveNumber(raw) ?? INFOGRAPHIC_PREVIEW_MIN_HEIGHT;
     }
     get resolvedContainerMinHeight() {
         return this.containerMinHeight || `${this.estimatedPreviewHeightPx}px`;
@@ -6826,7 +6845,20 @@ class MermaidBlockNodeComponent {
         return resolveCssSize(this.mergedProps.maxHeight, '500px');
     }
     get estimatedPreviewHeightPx() {
-        return clampPreviewHeight(parsePositiveNumber(this.mergedProps.estimatedPreviewHeightPx) ?? estimateMermaidPreviewHeight(this.code), undefined, this.maxPreviewHeight);
+        return clampPreviewHeight(parsePositiveNumber(this.mergedProps.estimatedPreviewHeightPx) ?? estimateMermaidPreviewHeight(this.code), this.resolveDiagramMinHeight(), this.maxPreviewHeight);
+    }
+    /**
+     * Resolve the diagram preview minimum height from the density CSS token
+     * (--ms-size-diagram-min-height), falling back to the built-in default.
+     * Mirrors the vue3 renderer's resolveMinContainerHeight; SSR falls back to
+     * the constant because getComputedStyle is browser-only.
+     */
+    resolveDiagramMinHeight() {
+        const el = this.previewHost?.nativeElement;
+        if (!el || typeof window === 'undefined' || typeof window.getComputedStyle !== 'function')
+            return MERMAID_PREVIEW_MIN_HEIGHT;
+        const raw = window.getComputedStyle(el).getPropertyValue('--ms-size-diagram-min-height').trim();
+        return parsePositiveNumber(raw) ?? MERMAID_PREVIEW_MIN_HEIGHT;
     }
     get maxPreviewHeight() {
         if (this.mergedProps.maxHeight == null || this.mergedProps.maxHeight === 'none')