markstream-angular 0.0.7 → 0.0.9-beta.0

package/dist/fesm2022/markstream-angular.mjs

@@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component, forwardRef, inject, ChangeDetectorRef, ViewChild, ViewContainerRef, ElementRef, Renderer2, Directive, HostListener, Injectable, InjectionToken, EventEmitter, Output } from '@angular/core';
 import { normalizeCustomHtmlTags, normalizeCustomHtmlTagName, parseMarkdownToStructure, mergeCustomHtmlTags, getMarkdown, sanitizeHtmlAttrs, VOID_HTML_TAGS, BLOCKED_HTML_TAGS, isHtmlTagHardBlocked, isHtmlTagBlocked, isUnsafeHtmlUrl, shouldOpenLinkInNewTab, sanitizeImageSrc, NON_STRUCTURING_HTML_TAGS, toSafeMermaidSvgMarkup, getHtmlTagFromContent, stripCustomHtmlWrapper, STANDARD_HTML_TAGS, hasCompleteHtmlTagContent } from 'stream-markdown-parser';
-import { resolveStreamingTextState, createSmoothMarkdownStream } from 'markstream-core';
 import { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';
+import { createSmoothMarkdownStream } from 'markstream-core';
 
 const TAG_TOKEN_RE = /<\/?([A-Z][\w:-]*)(?:\s[^<>]*)?>/gi;
 function hydrateCustomTagContent(nodes, source, customHtmlTags) {
@@ -4547,35 +4547,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                 args: ['window:keydown', ['$event']]
             }] } });
 
+function settleAndMergeSegments$1(segments, segmentId) {
+    return segments.reduce((result, segment) => {
+        const nextSegment = segment.id === segmentId
+            ? { ...segment, fading: false }
+            : segment;
+        const previousSegment = result[result.length - 1];
+        if (previousSegment && !previousSegment.fading && !nextSegment.fading) {
+            result[result.length - 1] = {
+                ...previousSegment,
+                content: previousSegment.content + nextSegment.content,
+            };
+        }
+        else {
+            result.push(nextSegment);
+        }
+        return result;
+    }, []);
+}
 class InlineCodeNodeComponent {
     constructor() {
-        this.settledCode = '';
-        this.streamedDelta = '';
-        this.streamFadeVersion = 0;
+        this.segments = [];
+        this.renderedCode = '';
+        this.nextSegmentId = 0;
     }
     ngOnChanges() {
         const nextCode = getString$1(this.node?.code);
         const streamStateKey = getString$1(this.indexKey).trim();
         const textStreamState = this.context?.textStreamState;
-        const rendered = `${this.settledCode}${this.streamedDelta}`;
         const previousPersisted = streamStateKey
             ? textStreamState?.get(streamStateKey)
             : undefined;
-        const previousCode = previousPersisted ?? rendered;
-        const nextState = resolveStreamingTextState({
-            nextContent: nextCode,
-            previousContent: previousCode,
-            typewriterEnabled: this.fadeEnabled,
-        });
-        this.settledCode = nextState.settledContent;
-        this.streamedDelta = nextState.streamedDelta;
-        if (nextState.appended)
-            this.streamFadeVersion += 1;
+        const previousCode = previousPersisted ?? this.renderedCode;
+        const resumeFromPersistedCode = previousPersisted !== undefined
+            && previousPersisted !== this.renderedCode;
+        if (!this.fadeEnabled) {
+            this.setFullCode(nextCode);
+        }
+        else if (nextCode !== previousCode) {
+            if (previousCode && nextCode.startsWith(previousCode)) {
+                const appendedCode = nextCode.slice(previousCode.length);
+                const lastSegment = this.segments[this.segments.length - 1];
+                if (resumeFromPersistedCode) {
+                    this.segments = [
+                        { id: this.nextSegmentId++, content: previousCode, fading: false },
+                        { id: this.nextSegmentId++, content: appendedCode, fading: true },
+                    ];
+                }
+                else if (lastSegment?.fading) {
+                    this.segments = [
+                        ...this.segments.slice(0, -1),
+                        { ...lastSegment, content: lastSegment.content + appendedCode },
+                    ];
+                }
+                else {
+                    this.segments = [
+                        ...this.segments,
+                        { id: this.nextSegmentId++, content: appendedCode, fading: true },
+                    ];
+                }
+            }
+            else {
+                this.setFullCode(nextCode);
+            }
+        }
+        this.renderedCode = nextCode;
         if (streamStateKey)
             textStreamState?.set(streamStateKey, nextCode);
     }
-    get streamedDeltaClass() {
-        return this.streamFadeVersion % 2 === 0
+    get settledCode() {
+        return this.segments.filter(segment => !segment.fading).map(segment => segment.content).join('');
+    }
+    get streamedDelta() {
+        return this.segments.filter(segment => segment.fading).map(segment => segment.content).join('');
+    }
+    streamedDeltaClass(segment) {
+        return segment.id % 2 === 0
             ? 'markstream-angular-text__stream-delta--a'
             : 'markstream-angular-text__stream-delta--b';
     }
@@ -4593,23 +4640,31 @@ class InlineCodeNodeComponent {
             return this.context.typewriter;
         return false;
     }
-    settleStreamedDelta() {
-        if (!this.streamedDelta)
+    trackSegment(_index, segment) {
+        return segment.id;
+    }
+    settleSegment(segmentId) {
+        if (!this.segments.some(segment => segment.id === segmentId && segment.fading))
             return;
-        this.settledCode = `${this.settledCode}${this.streamedDelta}`;
-        this.streamedDelta = '';
+        this.segments = settleAndMergeSegments$1(this.segments, segmentId);
+    }
+    setFullCode(content) {
+        if (this.segments.length === 1 && !this.segments[0]?.fading && this.segments[0].content === content)
+            return;
+        this.segments = content
+            ? [{ id: this.nextSegmentId++, content, fading: false }]
+            : [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: InlineCodeNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: InlineCodeNodeComponent, isStandalone: true, selector: "markstream-angular-inline-code-node", inputs: { node: "node", context: "context", indexKey: "indexKey", typewriter: "typewriter", fade: "fade" }, usesOnChanges: true, ngImport: i0, template: `
     <code>
-      <span *ngIf="settledCode">{{ settledCode }}</span>
       <span
-        *ngIf="streamedDelta"
-        [class]="'markstream-angular-text__stream-delta ' + streamedDeltaClass"
-        (animationend)="settleStreamedDelta()"
-      >{{ streamedDelta }}</span>
+        *ngFor="let segment of segments; trackBy: trackSegment"
+        [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
+        (animationend)="segment.fading && settleSegment(segment.id)"
+      >{{ segment.content }}</span>
     </code>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: InlineCodeNodeComponent, decorators: [{
             type: Component,
@@ -4619,12 +4674,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                     imports: [CommonModule],
                     template: `
     <code>
-      <span *ngIf="settledCode">{{ settledCode }}</span>
       <span
-        *ngIf="streamedDelta"
-        [class]="'markstream-angular-text__stream-delta ' + streamedDeltaClass"
-        (animationend)="settleStreamedDelta()"
-      >{{ streamedDelta }}</span>
+        *ngFor="let segment of segments; trackBy: trackSegment"
+        [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
+        (animationend)="segment.fading && settleSegment(segment.id)"
+      >{{ segment.content }}</span>
     </code>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -4810,11 +4864,29 @@ function hideTooltip(immediate = false) {
         hideTimer = setTimeout(doHide, 120);
 }
 
+function settleAndMergeSegments(segments, segmentId) {
+    return segments.reduce((result, segment) => {
+        const nextSegment = segmentId == null || segment.id === segmentId
+            ? { ...segment, fading: false }
+            : segment;
+        const previousSegment = result[result.length - 1];
+        if (previousSegment && !previousSegment.fading && !nextSegment.fading) {
+            result[result.length - 1] = {
+                ...previousSegment,
+                content: previousSegment.content + nextSegment.content,
+            };
+        }
+        else {
+            result.push(nextSegment);
+        }
+        return result;
+    }, []);
+}
 class TextNodeComponent {
     constructor() {
-        this.settledText = '';
-        this.streamedDelta = '';
-        this.streamFadeVersion = 0;
+        this.segments = [];
+        this.renderedText = '';
+        this.nextSegmentId = 0;
     }
     ngOnChanges() {
         const nextText = getString$1(this.node?.content);
@@ -4822,41 +4894,59 @@ class TextNodeComponent {
         const textStreamState = this.context?.textStreamState;
         const streamRenderVersion = this.context?.streamRenderVersion;
         const streamRenderVersionChanged = streamRenderVersion !== this.lastStreamRenderVersion;
-        const rendered = `${this.settledText}${this.streamedDelta}`;
         const previousPersisted = streamStateKey
             ? textStreamState?.get(streamStateKey)
             : undefined;
-        const previousText = previousPersisted ?? rendered;
+        const previousText = previousPersisted ?? this.renderedText;
+        const resumeFromPersistedText = previousPersisted !== undefined
+            && previousPersisted !== this.renderedText;
         if (!this.fadeEnabled) {
-            this.settledText = nextText;
-            this.streamedDelta = '';
+            this.setFullText(nextText);
+            this.renderedText = nextText;
             if (streamStateKey)
                 textStreamState?.set(streamStateKey, nextText);
             this.lastStreamRenderVersion = streamRenderVersion;
             return;
         }
         if (nextText === previousText) {
-            if (this.streamedDelta && streamRenderVersionChanged) {
-                this.settleStreamedDelta();
+            if (this.segments.some(segment => segment.fading) && streamRenderVersionChanged) {
+                this.settleFadingSegments();
             }
-            else if (rendered !== nextText) {
-                this.settledText = nextText;
-                this.streamedDelta = '';
+            else if (this.renderedText !== nextText) {
+                this.setFullText(nextText);
             }
+            this.renderedText = nextText;
             if (streamStateKey)
                 textStreamState?.set(streamStateKey, nextText);
             this.lastStreamRenderVersion = streamRenderVersion;
             return;
         }
-        const nextState = resolveStreamingTextState({
-            nextContent: nextText,
-            previousContent: previousText,
-            typewriterEnabled: this.fadeEnabled,
-        });
-        this.settledText = nextState.settledContent;
-        this.streamedDelta = nextState.streamedDelta;
-        if (nextState.appended)
-            this.streamFadeVersion += 1;
+        if (previousText && nextText.startsWith(previousText)) {
+            const appendedText = nextText.slice(previousText.length);
+            const lastSegment = this.segments[this.segments.length - 1];
+            if (resumeFromPersistedText) {
+                this.segments = [
+                    { id: this.nextSegmentId++, content: previousText, fading: false },
+                    { id: this.nextSegmentId++, content: appendedText, fading: true },
+                ];
+            }
+            else if (lastSegment?.fading) {
+                this.segments = [
+                    ...this.segments.slice(0, -1),
+                    { ...lastSegment, content: lastSegment.content + appendedText },
+                ];
+            }
+            else {
+                this.segments = [
+                    ...this.segments,
+                    { id: this.nextSegmentId++, content: appendedText, fading: true },
+                ];
+            }
+        }
+        else {
+            this.setFullText(nextText);
+        }
+        this.renderedText = nextText;
         if (streamStateKey)
             textStreamState?.set(streamStateKey, nextText);
         this.lastStreamRenderVersion = streamRenderVersion;
@@ -4864,8 +4954,14 @@ class TextNodeComponent {
     get centered() {
         return !!this.node?.center;
     }
-    get streamedDeltaClass() {
-        return this.streamFadeVersion % 2 === 0
+    get settledText() {
+        return this.segments.filter(segment => !segment.fading).map(segment => segment.content).join('');
+    }
+    get streamedDelta() {
+        return this.segments.filter(segment => segment.fading).map(segment => segment.content).join('');
+    }
+    streamedDeltaClass(segment) {
+        return segment.id % 2 === 0
             ? 'markstream-angular-text__stream-delta--a'
             : 'markstream-angular-text__stream-delta--b';
     }
@@ -4883,35 +4979,45 @@ class TextNodeComponent {
             return this.context.typewriter;
         return false;
     }
-    settleStreamedDelta() {
-        if (!this.streamedDelta)
+    trackSegment(_index, segment) {
+        return segment.id;
+    }
+    settleSegment(segmentId) {
+        if (!this.segments.some(segment => segment.id === segmentId && segment.fading))
+            return;
+        this.segments = settleAndMergeSegments(this.segments, segmentId);
+    }
+    setFullText(content) {
+        if (this.segments.length === 1 && !this.segments[0]?.fading && this.segments[0].content === content)
             return;
-        this.settledText = `${this.settledText}${this.streamedDelta}`;
-        this.streamedDelta = '';
+        this.segments = content
+            ? [{ id: this.nextSegmentId++, content, fading: false }]
+            : [];
+    }
+    settleFadingSegments() {
+        this.segments = settleAndMergeSegments(this.segments);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TextNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: TextNodeComponent, isStandalone: true, selector: "markstream-angular-text-node", inputs: { node: "node", context: "context", indexKey: "indexKey", typewriter: "typewriter", fade: "fade" }, usesOnChanges: true, ngImport: i0, template: `
     <ng-container *ngIf="!centered; else centeredText">
       <span class="markstream-angular-text-node">
-        <span *ngIf="settledText">{{ settledText }}</span>
         <span
-          *ngIf="streamedDelta"
-          [class]="'markstream-angular-text__stream-delta ' + streamedDeltaClass"
-          (animationend)="settleStreamedDelta()"
-        >{{ streamedDelta }}</span>
+          *ngFor="let segment of segments; trackBy: trackSegment"
+          [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
+          (animationend)="segment.fading && settleSegment(segment.id)"
+        >{{ segment.content }}</span>
       </span>
     </ng-container>
     <ng-template #centeredText>
       <span class="markstream-angular-text-node markstream-angular-text--centered">
-        <span *ngIf="settledText">{{ settledText }}</span>
         <span
-          *ngIf="streamedDelta"
-          [class]="'markstream-angular-text__stream-delta ' + streamedDeltaClass"
-          (animationend)="settleStreamedDelta()"
-        >{{ streamedDelta }}</span>
+          *ngFor="let segment of segments; trackBy: trackSegment"
+          [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
+          (animationend)="segment.fading && settleSegment(segment.id)"
+        >{{ segment.content }}</span>
       </span>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TextNodeComponent, decorators: [{
             type: Component,
@@ -4922,22 +5028,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImpo
                     template: `
     <ng-container *ngIf="!centered; else centeredText">
       <span class="markstream-angular-text-node">
-        <span *ngIf="settledText">{{ settledText }}</span>
         <span
-          *ngIf="streamedDelta"
-          [class]="'markstream-angular-text__stream-delta ' + streamedDeltaClass"
-          (animationend)="settleStreamedDelta()"
-        >{{ streamedDelta }}</span>
+          *ngFor="let segment of segments; trackBy: trackSegment"
+          [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
+          (animationend)="segment.fading && settleSegment(segment.id)"
+        >{{ segment.content }}</span>
       </span>
     </ng-container>
     <ng-template #centeredText>
       <span class="markstream-angular-text-node markstream-angular-text--centered">
-        <span *ngIf="settledText">{{ settledText }}</span>
         <span
-          *ngIf="streamedDelta"
-          [class]="'markstream-angular-text__stream-delta ' + streamedDeltaClass"
-          (animationend)="settleStreamedDelta()"
-        >{{ streamedDelta }}</span>
+          *ngFor="let segment of segments; trackBy: trackSegment"
+          [class]="segment.fading ? 'markstream-angular-text__stream-delta ' + streamedDeltaClass(segment) : ''"
+          (animationend)="segment.fading && settleSegment(segment.id)"
+        >{{ segment.content }}</span>
       </span>
     </ng-template>
   `,