markstream-angular 2.0.0 → 2.0.2

package/dist/fesm2022/markstream-angular.mjs

@@ -1100,6 +1100,12 @@ class CodeBlockNodeComponent {
         this.destroyed = false;
         this.copyTimer = null;
         this.deferredHeightSyncRaf = null;
+        this.hasEditorInput = false;
+        this.lastEditorIsDiff = false;
+        this.lastEditorOriginalCode = '';
+        this.lastEditorResolvedCode = '';
+        this.lastEditorLanguage = '';
+        this.lastEditorShowLoadingPlaceholder = false;
         this.lastRuntimeHostKey = '';
         this.closeInlinePreview = () => {
             this.inlinePreviewOpen = false;
@@ -1326,13 +1332,31 @@ class CodeBlockNodeComponent {
             themes[1],
             this.resolvedShowLineNumbers ? 'lines' : 'no-lines',
         ].join('\u0000');
-        if (nextOptions !== this.lastCodeBlockOptions || runtimeHostKey !== this.lastRuntimeHostKey) {
+        const runtimeChanged = nextOptions !== this.lastCodeBlockOptions || runtimeHostKey !== this.lastRuntimeHostKey;
+        if (runtimeChanged) {
             this.lastCodeBlockOptions = nextOptions;
             this.lastRuntimeHostKey = runtimeHostKey;
             this.disposeRuntimeHelpers();
         }
+        const isDiff = this.isDiff;
+        const originalCode = this.originalCode;
+        const resolvedCode = this.resolvedCode;
+        const language = this.language;
+        const showLoadingPlaceholder = this.showLoadingPlaceholder;
+        const editorInputChanged = !this.hasEditorInput
+            || isDiff !== this.lastEditorIsDiff
+            || originalCode !== this.lastEditorOriginalCode
+            || resolvedCode !== this.lastEditorResolvedCode
+            || language !== this.lastEditorLanguage
+            || showLoadingPlaceholder !== this.lastEditorShowLoadingPlaceholder;
+        this.hasEditorInput = true;
+        this.lastEditorIsDiff = isDiff;
+        this.lastEditorOriginalCode = originalCode;
+        this.lastEditorResolvedCode = resolvedCode;
+        this.lastEditorLanguage = language;
+        this.lastEditorShowLoadingPlaceholder = showLoadingPlaceholder;
         this.applyInitialFontSize();
-        if (!this.viewReady)
+        if (!this.viewReady || (!runtimeChanged && !editorInputChanged))
             return;
         void this.syncEditorState();
     }
@@ -4389,6 +4413,7 @@ class InfographicBlockNodeComponent {
         this.viewReady = false;
         this.destroyed = false;
         this.renderToken = 0;
+        this.renderScheduled = false;
         this.copyTimer = null;
         this.infographicInstance = null;
     }
@@ -4469,17 +4494,18 @@ class InfographicBlockNodeComponent {
     }
     ngAfterViewInit() {
         this.viewReady = true;
-        queueMicrotask(() => void this.renderInfographic());
+        this.scheduleInfographicRender();
     }
     ngOnChanges() {
         if (!this.viewReady)
             return;
         this.containerMinHeight = '';
-        queueMicrotask(() => void this.renderInfographic());
+        this.scheduleInfographicRender();
     }
     ngOnDestroy() {
         this.destroyed = true;
         this.renderToken += 1;
+        this.renderScheduled = false;
         if (this.copyTimer != null && typeof window !== 'undefined')
             window.clearTimeout(this.copyTimer);
         this.destroyInfographic();
@@ -4537,7 +4563,7 @@ class InfographicBlockNodeComponent {
     toggleCollapsed() {
         this.collapsed = !this.collapsed;
         if (!this.collapsed)
-            queueMicrotask(() => void this.renderInfographic());
+            this.scheduleInfographicRender();
         this.cdr.markForCheck();
     }
     adjustZoom(delta) {
@@ -4548,6 +4574,16 @@ class InfographicBlockNodeComponent {
         this.zoom = 1;
         this.cdr.markForCheck();
     }
+    scheduleInfographicRender() {
+        if (this.destroyed || this.renderScheduled)
+            return;
+        this.renderScheduled = true;
+        queueMicrotask(() => {
+            this.renderScheduled = false;
+            if (!this.destroyed)
+                void this.renderInfographic();
+        });
+    }
     async renderInfographic() {
         if (this.destroyed || !this.viewReady || this.collapsed || this.showSource)
             return;
@@ -4565,32 +4601,61 @@ class InfographicBlockNodeComponent {
             this.renderToken += 1;
             this.rendering = true;
             this.error = '';
-            this.svgMarkup = '';
-            clearElement(host);
             this.cdr.markForCheck();
             return;
         }
+        const final = !this.resolvedLoading;
         const token = ++this.renderToken;
         this.rendering = true;
         this.error = '';
         this.cdr.markForCheck();
+        let nextInstance = null;
+        let previousChildren = null;
         try {
             const InfographicClass = await getInfographic();
             if (!InfographicClass)
                 throw new Error('Infographic renderer is not available.');
             if (this.destroyed || token !== this.renderToken)
                 return;
-            this.destroyInfographic();
-            clearElement(host);
-            const instance = new InfographicClass({
+            previousChildren = Array.from(host.childNodes);
+            nextInstance = new InfographicClass({
                 container: host,
                 width: '100%',
                 height: '100%',
             });
-            this.infographicInstance = instance;
-            instance.render(source);
+            let renderErrorMessage = '';
+            let renderCompleted = false;
+            nextInstance.on?.('error', (error) => {
+                const errors = Array.isArray(error) ? error : [error];
+                renderErrorMessage = errors
+                    .map((item) => {
+                    if (item instanceof Error)
+                        return item.message;
+                    if (typeof item === 'string')
+                        return item;
+                    if (item && typeof item === 'object' && 'message' in item)
+                        return String(item.message ?? '');
+                    return String(item ?? '');
+                })
+                    .filter(Boolean)
+                    .join('; ');
+            });
+            nextInstance.on?.('rendered', () => {
+                renderCompleted = true;
+            });
+            nextInstance.render(source);
+            if (renderErrorMessage)
+                throw new Error(renderErrorMessage);
+            const nextChildren = Array.from(host.childNodes);
+            const replacedChildren = nextChildren.length > 0 && (nextChildren.length !== previousChildren.length
+                || nextChildren.some((child, index) => child !== previousChildren?.[index]));
+            if (!renderCompleted && !replacedChildren)
+                throw new Error('Infographic render returned empty output.');
             if (this.destroyed || token !== this.renderToken)
                 return;
+            this.infographicInstance?.destroy?.();
+            this.infographicInstance = nextInstance;
+            nextInstance = null;
             const svg = host.querySelector('svg');
             this.svgMarkup = svg ? svg.outerHTML : '';
             const measuredHeight = host.scrollHeight;
@@ -4601,13 +4666,21 @@ class InfographicBlockNodeComponent {
         catch (error) {
             if (this.destroyed || token !== this.renderToken)
                 return;
-            this.destroyInfographic();
-            this.svgMarkup = '';
-            this.showSource = true;
-            this.error = error instanceof Error ? error.message : 'Failed to render infographic.';
-            clearElement(host);
+            nextInstance?.destroy?.();
+            nextInstance = null;
+            if (final && !this.resolvedLoading && source === this.code.trim()) {
+                this.destroyInfographic();
+                this.svgMarkup = '';
+                this.showSource = true;
+                this.error = error instanceof Error ? error.message : 'Failed to render infographic.';
+                clearElement(host);
+            }
+            else if (previousChildren) {
+                host.replaceChildren(...previousChildren);
+            }
         }
         finally {
+            nextInstance?.destroy?.();
             if (token === this.renderToken) {
                 this.rendering = false;
                 this.cdr.markForCheck();
@@ -4739,7 +4812,9 @@ class InfographicBlockNodeComponent {
           #previewHost
           class="infographic-render"
           [style.minHeight]="resolvedContainerMinHeight"
-        ></div>
+        >
+          <pre *ngIf="!svgMarkup && !error" class="markstream-angular-enhanced-block__source infographic-pending-source"><code translate="no">{{ code }}</code></pre>
+        </div>
 
         <pre *ngIf="showSource" class="markstream-angular-enhanced-block__source"><code translate="no">{{ code }}</code></pre>
 
@@ -4872,7 +4947,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
           #previewHost
           class="infographic-render"
           [style.minHeight]="resolvedContainerMinHeight"
-        ></div>
+        >
+          <pre *ngIf="!svgMarkup && !error" class="markstream-angular-enhanced-block__source infographic-pending-source"><code translate="no">{{ code }}</code></pre>
+        </div>
 
         <pre *ngIf="showSource" class="markstream-angular-enhanced-block__source"><code translate="no">{{ code }}</code></pre>