@jrichman/ink 6.6.9 → 7.0.0-beta.1

package/build/styled-line.js

@@ -6,6 +6,33 @@
 import { FULL_WIDTH_MASK, INVERSE_MASK } from './tokenize.js';
 const OFFSET_MASK = 0x3f_ff_ff_ff;
 const FULL_WIDTH_FLAG = 0x40_00_00_00;
+function hasAnyStyles(formatFlags, fgColor, bgColor, link) {
+    return ((formatFlags & ~FULL_WIDTH_MASK) !== 0 ||
+        fgColor !== undefined ||
+        bgColor !== undefined ||
+        link !== undefined);
+}
+function spanHasStyles(span) {
+    return hasAnyStyles(span.formatFlags, span.fgColor, span.bgColor, span.link);
+}
+function spansHaveStyles(spans) {
+    if (!spans)
+        return false;
+    for (const s of spans) {
+        if (spanHasStyles(s))
+            return true;
+    }
+    return false;
+}
+function isDefaultCharData(charData, length) {
+    if (!charData)
+        return true;
+    for (let i = 0; i < length; i++) {
+        if (charData[i] !== i)
+            return false;
+    }
+    return true;
+}
 export class StyledLine {
     static empty(length) {
         if (length <= 0) {
@@ -18,17 +45,10 @@ export class StyledLine {
         const line = new StyledLine();
         line.length = length;
         line.text = ' '.repeat(length);
-        line.charData = Array.from({ length });
-        for (let i = 0; i < length; i++) {
-            line.charData[i] = i;
-        }
-        line.spans = [{ length, formatFlags: 0 }];
         line._cachedTrimmedLength = 0;
         if (StyledLine.emptyCache.size > 100) {
             StyledLine.emptyCache.clear();
         }
-        Object.freeze(line.spans[0]);
-        Object.freeze(line.spans);
         Object.freeze(line);
         StyledLine.emptyCache.set(length, line);
         return line.clone();
@@ -44,12 +64,50 @@ export class StyledLine {
     charData;
     spans;
     _cachedTrimmedLength;
+    _spansDirty = false;
     constructor() {
         this.length = 0;
     }
+    padTo(targetLength) {
+        if (targetLength <= this.length)
+            return;
+        this._cachedTrimmedLength = undefined;
+        this.ensureInitialized();
+        const diff = targetLength - this.length;
+        if (this.charData === undefined) {
+            this.text += ' '.repeat(diff);
+        }
+        else {
+            const offset = this.text.length;
+            this.text += ' '.repeat(diff);
+            for (let i = 0; i < diff; i++) {
+                this.charData.push(offset + i);
+            }
+        }
+        if (this.spans !== undefined) {
+            const lastSpan = this.spans.at(-1);
+            if (lastSpan &&
+                lastSpan.formatFlags === 0 &&
+                lastSpan.fgColor === undefined &&
+                lastSpan.bgColor === undefined &&
+                lastSpan.link === undefined) {
+                lastSpan.length += diff;
+            }
+            else {
+                this.spans.push({
+                    length: diff,
+                    formatFlags: 0,
+                });
+            }
+        }
+        this.length = targetLength;
+    }
     getValue(index) {
         if (this.text === undefined || index < 0 || index >= this.length)
             return '';
+        if (this.charData === undefined) {
+            return this.text[index];
+        }
         const start = this.charData[index] & OFFSET_MASK;
         const end = index + 1 < this.length
             ? this.charData[index + 1] & OFFSET_MASK
@@ -73,13 +131,12 @@ export class StyledLine {
         return (this.charData[index] & FULL_WIDTH_FLAG) !== 0;
     }
     hasStyles(index) {
+        if (this.spans === undefined)
+            return false;
         const span = this.getSpan(index);
         if (!span)
             return false;
-        return ((span.formatFlags & ~FULL_WIDTH_MASK) !== 0 ||
-            span.fgColor !== undefined ||
-            span.bgColor !== undefined ||
-            span.link !== undefined);
+        return spanHasStyles(span);
     }
     getFormatFlags(index) {
         let flags = this.getSpan(index)?.formatFlags ?? 0;
@@ -102,6 +159,7 @@ export class StyledLine {
             return;
         this._cachedTrimmedLength = undefined;
         this.ensureInitialized();
+        this.ensureSpans();
         this.splitSpansAt(index);
         this.splitSpansAt(index + 1);
         let current = 0;
@@ -117,13 +175,14 @@ export class StyledLine {
             }
             current += span.length;
         }
-        this.mergeSpans();
+        this._spansDirty = true;
     }
     setBackgroundColor(index, color) {
         if (index < 0 || index >= this.length)
             return;
         this._cachedTrimmedLength = undefined;
         this.ensureInitialized();
+        this.ensureSpans();
         this.splitSpansAt(index);
         this.splitSpansAt(index + 1);
         let current = 0;
@@ -134,13 +193,14 @@ export class StyledLine {
             }
             current += span.length;
         }
-        this.mergeSpans();
+        this._spansDirty = true;
     }
     setForegroundColor(index, color) {
         if (index < 0 || index >= this.length)
             return;
         this._cachedTrimmedLength = undefined;
         this.ensureInitialized();
+        this.ensureSpans();
         this.splitSpansAt(index);
         this.splitSpansAt(index + 1);
         let current = 0;
@@ -151,7 +211,26 @@ export class StyledLine {
             }
             current += span.length;
         }
-        this.mergeSpans();
+        this._spansDirty = true;
+    }
+    replaceAt(index, chars) {
+        if (chars.length === 0 || index >= this.length)
+            return;
+        this.ensureInitialized();
+        chars.ensureInitialized();
+        const start = Math.max(0, index);
+        const end = Math.min(this.length, start + chars.length);
+        const replacementLen = end - start;
+        const slicedChars = chars.length > replacementLen ? chars.slice(0, replacementLen) : chars;
+        const left = this.slice(0, start);
+        const right = this.slice(end);
+        const combined = left.combine(slicedChars, right);
+        this.length = combined.length;
+        this.text = combined.text;
+        this.charData = combined.charData;
+        this.spans = combined.spans;
+        this._spansDirty = combined._spansDirty;
+        this._cachedTrimmedLength = undefined;
     }
     // eslint-disable-next-line max-params
     setChar(index, value, formatFlags, fgColor, bgColor, link) {
@@ -161,26 +240,105 @@ export class StyledLine {
         this.ensureInitialized();
         const isFullWidth = (formatFlags & FULL_WIDTH_MASK) !== 0;
         const cleanFormatFlags = formatFlags & ~FULL_WIDTH_MASK;
-        const start = this.charData[index] & OFFSET_MASK;
-        const end = index + 1 < this.length
-            ? this.charData[index + 1] & OFFSET_MASK
-            : this.text.length;
-        const oldLen = end - start;
+        const hasStyles = hasAnyStyles(formatFlags, fgColor, bgColor, link);
         const newLen = value.length;
-        if (oldLen === newLen) {
-            this.text = this.text.slice(0, start) + value + this.text.slice(end);
+        if (this.charData === undefined) {
+            if (newLen === 1 && !isFullWidth) {
+                this.text =
+                    this.text.slice(0, index) + value + this.text.slice(index + 1);
+            }
+            else {
+                this.ensureCharData();
+            }
         }
-        else {
-            this.text = this.text.slice(0, start) + value + this.text.slice(end);
-            const diff = newLen - oldLen;
-            for (let i = index + 1; i < this.length; i++) {
-                const data = this.charData[i];
-                const oldOffset = data & OFFSET_MASK;
-                const fw = data & FULL_WIDTH_FLAG;
-                this.charData[i] = (oldOffset + diff) | fw;
+        if (this.charData !== undefined) {
+            const start = this.charData[index] & OFFSET_MASK;
+            const end = index + 1 < this.length
+                ? this.charData[index + 1] & OFFSET_MASK
+                : this.text.length;
+            const oldLen = end - start;
+            if (oldLen === newLen) {
+                this.text = this.text.slice(0, start) + value + this.text.slice(end);
+            }
+            else {
+                this.text = this.text.slice(0, start) + value + this.text.slice(end);
+                const diff = newLen - oldLen;
+                for (let i = index + 1; i < this.length; i++) {
+                    const data = this.charData[i];
+                    const oldOffset = data & OFFSET_MASK;
+                    const fw = data & FULL_WIDTH_FLAG;
+                    this.charData[i] = (oldOffset + diff) | fw;
+                }
+            }
+            this.charData[index] = start | (isFullWidth ? FULL_WIDTH_FLAG : 0);
+        }
+        if (this.spans === undefined) {
+            if (!hasStyles) {
+                return;
+            }
+            this.ensureSpans();
+        }
+        // Fast path: Find the span containing this index
+        let currentOffset = 0;
+        let spanIndex = -1;
+        let span;
+        for (let i = 0; i < this.spans.length; i++) {
+            const s = this.spans[i];
+            if (currentOffset <= index && currentOffset + s.length > index) {
+                spanIndex = i;
+                span = s;
+                break;
+            }
+            currentOffset += s.length;
+        }
+        if (span) {
+            const isMatch = span.formatFlags === cleanFormatFlags &&
+                span.fgColor === fgColor &&
+                span.bgColor === bgColor &&
+                span.link === link;
+            if (isMatch) {
+                return; // Style already matches, no need to touch spans
+            }
+            // If it's the very first character of the span, check if we can merge with the previous span
+            if (index === currentOffset && spanIndex > 0) {
+                const prevSpan = this.spans[spanIndex - 1];
+                const prevMatch = prevSpan.formatFlags === cleanFormatFlags &&
+                    prevSpan.fgColor === fgColor &&
+                    prevSpan.bgColor === bgColor &&
+                    prevSpan.link === link;
+                if (prevMatch) {
+                    prevSpan.length += 1;
+                    if (span.length === 1) {
+                        this.spans.splice(spanIndex, 1);
+                    }
+                    else {
+                        span.length -= 1;
+                    }
+                    this._spansDirty = true;
+                    return;
+                }
+            }
+            // If it's the very last character of the span, check if we can merge with the next span
+            if (index === currentOffset + span.length - 1 &&
+                spanIndex < this.spans.length - 1) {
+                const nextSpan = this.spans[spanIndex + 1];
+                const nextMatch = nextSpan.formatFlags === cleanFormatFlags &&
+                    nextSpan.fgColor === fgColor &&
+                    nextSpan.bgColor === bgColor &&
+                    nextSpan.link === link;
+                if (nextMatch) {
+                    nextSpan.length += 1;
+                    if (span.length === 1) {
+                        this.spans.splice(spanIndex, 1);
+                    }
+                    else {
+                        span.length -= 1;
+                    }
+                    this._spansDirty = true;
+                    return;
+                }
             }
         }
-        this.charData[index] = start | (isFullWidth ? FULL_WIDTH_FLAG : 0);
         this.splitSpansAt(index);
         this.splitSpansAt(index + 1);
         let current = 0;
@@ -198,7 +356,7 @@ export class StyledLine {
             }
             current += span.length;
         }
-        this.mergeSpans();
+        this._spansDirty = true;
     }
     // eslint-disable-next-line max-params
     pushChar(value, formatFlags, fgColor, bgColor, link) {
@@ -206,9 +364,28 @@ export class StyledLine {
         this.ensureInitialized();
         const isFullWidth = (formatFlags & FULL_WIDTH_MASK) !== 0;
         const cleanFormatFlags = formatFlags & ~FULL_WIDTH_MASK;
-        const offset = this.text.length;
-        this.text += value;
-        this.charData.push(offset | (isFullWidth ? FULL_WIDTH_FLAG : 0));
+        const hasStyles = hasAnyStyles(formatFlags, fgColor, bgColor, link);
+        const newLen = value.length;
+        if (this.charData === undefined) {
+            if (newLen === 1 && !isFullWidth) {
+                this.text += value;
+            }
+            else {
+                this.ensureCharData();
+            }
+        }
+        if (this.charData !== undefined) {
+            const offset = this.text.length;
+            this.text += value;
+            this.charData.push(offset | (isFullWidth ? FULL_WIDTH_FLAG : 0));
+        }
+        if (this.spans === undefined) {
+            if (!hasStyles) {
+                this.length++;
+                return;
+            }
+            this.ensureSpans();
+        }
         const lastSpan = this.spans.at(-1);
         if (lastSpan &&
             lastSpan.formatFlags === cleanFormatFlags &&
@@ -229,19 +406,17 @@ export class StyledLine {
         this.length++;
     }
     clone() {
-        if (this.charData === undefined)
-            return new StyledLine();
+        this.ensureSpansMerged();
         const result = new StyledLine();
         result.length = this.length;
         result.text = this.text;
-        result.charData = [...this.charData];
-        result.spans = this.spans.map(span => ({ ...span }));
+        result.charData = this.charData ? [...this.charData] : undefined;
+        result.spans = this.spans ? this.spans.map(span => ({ ...span })) : undefined;
         result._cachedTrimmedLength = this._cachedTrimmedLength;
         return result;
     }
     slice(start, end) {
-        if (this.charData === undefined)
-            return new StyledLine();
+        this.ensureSpansMerged();
         const actualStart = Math.max(0, start);
         const actualEnd = end === undefined ? this.length : Math.min(this.length, end);
         if (actualStart >= actualEnd)
@@ -251,40 +426,53 @@ export class StyledLine {
         }
         const result = new StyledLine();
         result.length = actualEnd - actualStart;
-        result.charData = Array.from({ length: result.length });
-        const textStart = this.charData[actualStart] & OFFSET_MASK;
-        const textEnd = actualEnd < this.length
-            ? this.charData[actualEnd] & OFFSET_MASK
-            : this.text.length;
-        result.text = this.text.slice(textStart, textEnd);
-        for (let i = 0; i < result.length; i++) {
-            const oldData = this.charData[actualStart + i];
-            const oldOffset = oldData & OFFSET_MASK;
-            const fw = oldData & FULL_WIDTH_FLAG;
-            result.charData[i] = (oldOffset - textStart) | fw;
+        if (this.charData === undefined) {
+            if (this.text !== undefined) {
+                result.text = this.text.slice(actualStart, actualEnd);
+            }
         }
-        const newSpans = [];
-        let current = 0;
-        for (const span of this.spans) {
-            const spanStart = current;
-            const spanEnd = current + span.length;
-            const intersectStart = Math.max(actualStart, spanStart);
-            const intersectEnd = Math.min(actualEnd, spanEnd);
-            if (intersectStart < intersectEnd) {
-                newSpans.push({
-                    ...span,
-                    length: intersectEnd - intersectStart,
-                });
+        else {
+            result.charData = Array.from({ length: result.length });
+            const textStart = this.charData[actualStart] & OFFSET_MASK;
+            const textEnd = actualEnd < this.length
+                ? this.charData[actualEnd] & OFFSET_MASK
+                : this.text.length;
+            result.text = this.text.slice(textStart, textEnd);
+            for (let i = 0; i < result.length; i++) {
+                const oldData = this.charData[actualStart + i];
+                const oldOffset = oldData & OFFSET_MASK;
+                const fw = oldData & FULL_WIDTH_FLAG;
+                result.charData[i] = (oldOffset - textStart) | fw;
             }
-            current += span.length;
-            if (current >= actualEnd)
-                break;
         }
-        result.spans = newSpans;
-        result.mergeSpans();
+        if (this.spans !== undefined) {
+            const newSpans = [];
+            let current = 0;
+            for (const span of this.spans) {
+                const spanStart = current;
+                const spanEnd = current + span.length;
+                const intersectStart = Math.max(actualStart, spanStart);
+                const intersectEnd = Math.min(actualEnd, spanEnd);
+                if (intersectStart < intersectEnd) {
+                    newSpans.push({
+                        ...span,
+                        length: intersectEnd - intersectStart,
+                    });
+                }
+                current += span.length;
+                if (current >= actualEnd)
+                    break;
+            }
+            result.spans = newSpans;
+            result.mergeSpans();
+        }
         return result;
     }
     combine(...others) {
+        this.ensureSpansMerged();
+        for (const other of others) {
+            other.ensureSpansMerged();
+        }
         if (others.length === 0)
             return this.clone();
         const allLines = [this, ...others].filter(l => l.length > 0);
@@ -299,49 +487,72 @@ export class StyledLine {
         const result = new StyledLine();
         result.length = totalChars;
         result.text = allLines.map(l => l.getText()).join('');
-        result.charData = Array.from({ length: totalChars });
-        let currentChar = 0;
-        let currentOffset = 0;
-        for (const line of allLines) {
-            const lineCharData = line.charData;
-            const lineText = line.getText();
-            if (lineCharData) {
-                for (let i = 0; i < line.length; i++) {
-                    const data = lineCharData[i];
-                    const offset = data & OFFSET_MASK;
-                    const fw = data & FULL_WIDTH_FLAG;
-                    result.charData[currentChar + i] = (currentOffset + offset) | fw;
+        const anyHasCharData = allLines.some(l => l.charData !== undefined);
+        if (anyHasCharData) {
+            result.charData = Array.from({ length: totalChars });
+            let currentChar = 0;
+            let currentOffset = 0;
+            for (const line of allLines) {
+                const lineCharData = line.charData;
+                const lineText = line.getText();
+                if (lineCharData) {
+                    for (let i = 0; i < line.length; i++) {
+                        const data = lineCharData[i];
+                        const offset = data & OFFSET_MASK;
+                        const fw = data & FULL_WIDTH_FLAG;
+                        result.charData[currentChar + i] = (currentOffset + offset) | fw;
+                    }
                 }
-            }
-            else {
-                for (let i = 0; i < line.length; i++) {
-                    result.charData[currentChar + i] = currentOffset + i;
+                else {
+                    for (let i = 0; i < line.length; i++) {
+                        result.charData[currentChar + i] = currentOffset + i;
+                    }
                 }
+                currentChar += line.length;
+                currentOffset += lineText.length;
             }
-            currentChar += line.length;
-            currentOffset += lineText.length;
         }
-        result.spans = allLines.flatMap(l => l.getSpans().map(s => ({ ...s })));
-        result.mergeSpans();
+        const anyHasSpans = allLines.some(l => l.spans !== undefined);
+        if (anyHasSpans) {
+            result.spans = allLines.flatMap(l => l.getSpans().map(s => ({ ...s })));
+            result.mergeSpans();
+        }
         return result;
     }
     getTrimmedLength() {
         if (this.length === 0)
             return 0;
-        if (this.text === undefined || this.charData === undefined)
+        if (this.text === undefined)
             return 0;
+        this.ensureSpansMerged();
         let currentIdx = this.length - 1;
         if (this.spans) {
             for (let s = this.spans.length - 1; s >= 0; s--) {
                 const span = this.spans[s];
-                const hasStyles = (span.formatFlags & ~FULL_WIDTH_MASK) !== 0 ||
-                    span.fgColor !== undefined ||
-                    span.bgColor !== undefined ||
-                    span.link !== undefined;
+                const hasStyles = spanHasStyles(span);
                 if (hasStyles) {
                     return currentIdx + 1;
                 }
                 for (let i = 0; i < span.length; i++) {
+                    if (this.charData) {
+                        const start = this.charData[currentIdx] & OFFSET_MASK;
+                        const end = currentIdx + 1 < this.length
+                            ? this.charData[currentIdx + 1] & OFFSET_MASK
+                            : this.text.length;
+                        if (end - start !== 1 || this.text[start] !== ' ') {
+                            return currentIdx + 1;
+                        }
+                    }
+                    else if (this.text[currentIdx] !== ' ') {
+                        return currentIdx + 1;
+                    }
+                    currentIdx--;
+                }
+            }
+        }
+        else {
+            while (currentIdx >= 0) {
+                if (this.charData) {
                     const start = this.charData[currentIdx] & OFFSET_MASK;
                     const end = currentIdx + 1 < this.length
                         ? this.charData[currentIdx + 1] & OFFSET_MASK
@@ -349,8 +560,11 @@ export class StyledLine {
                     if (end - start !== 1 || this.text[start] !== ' ') {
                         return currentIdx + 1;
                     }
-                    currentIdx--;
                 }
+                else if (this.text[currentIdx] !== ' ') {
+                    return currentIdx + 1;
+                }
+                currentIdx--;
             }
         }
         return 0;
@@ -370,24 +584,44 @@ export class StyledLine {
             return true;
         if (this.getText() !== other.getText())
             return false;
-        const s1 = this.getSpans();
-        const s2 = other.getSpans();
-        if (s1.length !== s2.length)
-            return false;
-        for (let i = 0; i < s1.length; i++) {
-            const sp1 = s1[i];
-            const sp2 = s2[i];
-            if (sp1.length !== sp2.length ||
-                sp1.formatFlags !== sp2.formatFlags ||
-                sp1.fgColor !== sp2.fgColor ||
-                sp1.bgColor !== sp2.bgColor ||
-                sp1.link !== sp2.link) {
+        this.ensureSpansMerged();
+        other.ensureSpansMerged();
+        const thisSpans = this.internalGetSpans();
+        const otherSpans = other.internalGetSpans();
+        if (thisSpans === undefined && otherSpans !== undefined) {
+            if (spansHaveStyles(otherSpans))
+                return false;
+        }
+        else if (thisSpans !== undefined && otherSpans === undefined) {
+            if (spansHaveStyles(thisSpans))
+                return false;
+        }
+        else if (thisSpans !== undefined && otherSpans !== undefined) {
+            if (thisSpans.length !== otherSpans.length)
                 return false;
+            for (let i = 0; i < thisSpans.length; i++) {
+                const sp1 = thisSpans[i];
+                const sp2 = otherSpans[i];
+                if (sp1.length !== sp2.length ||
+                    sp1.formatFlags !== sp2.formatFlags ||
+                    sp1.fgColor !== sp2.fgColor ||
+                    sp1.bgColor !== sp2.bgColor ||
+                    sp1.link !== sp2.link) {
+                    return false;
+                }
             }
         }
-        const thisCharData = this.charData;
-        const otherCharData = other.charData;
-        if (thisCharData && otherCharData) {
+        const thisCharData = this.internalGetCharData();
+        const otherCharData = other.internalGetCharData();
+        if (thisCharData === undefined && otherCharData !== undefined) {
+            if (!isDefaultCharData(otherCharData, this.length))
+                return false;
+        }
+        else if (thisCharData !== undefined && otherCharData === undefined) {
+            if (!isDefaultCharData(thisCharData, this.length))
+                return false;
+        }
+        else if (thisCharData !== undefined && otherCharData !== undefined) {
             for (let i = 0; i < this.length; i++) {
                 if (thisCharData[i] !== otherCharData[i])
                     return false;
@@ -399,7 +633,12 @@ export class StyledLine {
         return this.text ?? '';
     }
     getSpans() {
-        return this.spans ?? [];
+        this.ensureSpansMerged();
+        if (this.spans !== undefined)
+            return this.spans;
+        if (this.length > 0)
+            return [{ length: this.length, formatFlags: 0 }];
+        return [];
     }
     getValues() {
         return Array.from({ length: this.length }, (_, i) => this.getValue(i));
@@ -435,18 +674,36 @@ export class StyledLine {
             }
         }
     }
+    internalGetCharData() {
+        return this.charData;
+    }
+    internalGetSpans() {
+        return this.spans;
+    }
+    ensureSpansMerged() {
+        if (this._spansDirty) {
+            this.mergeSpans();
+            this._spansDirty = false;
+        }
+    }
     ensureInitialized() {
+        if (this.text === undefined) {
+            this.text = this.length > 0 ? ' '.repeat(this.length) : '';
+        }
+    }
+    ensureCharData() {
+        this.ensureInitialized();
         if (this.charData === undefined) {
-            this.text = '';
             this.charData = Array.from({ length: this.length });
+            for (let i = 0; i < this.length; i++) {
+                this.charData[i] = i;
+            }
+        }
+    }
+    ensureSpans() {
+        if (this.spans === undefined) {
             this.spans =
                 this.length > 0 ? [{ length: this.length, formatFlags: 0 }] : [];
-            if (this.length > 0 && this.text.length === 0) {
-                this.text = ' '.repeat(this.length);
-                for (let i = 0; i < this.length; i++) {
-                    this.charData[i] = i;
-                }
-            }
         }
     }
     applyValuesAndSpans(values, spans) {
@@ -454,36 +711,60 @@ export class StyledLine {
         const visibleChars = values.length;
         this.length = visibleChars;
         this.text = values.join('');
-        this.charData = Array.from({ length: this.length });
-        let currentOffset = 0;
-        let spanIdx = 0;
-        let spanPos = 0;
+        let needsCharData = false;
         for (let i = 0; i < visibleChars; i++) {
-            const val = values[i];
-            let isFullWidth = false;
-            if (spans.length > 0 && spanIdx < spans.length) {
-                const span = spans[spanIdx];
+            if (values[i].length !== 1) {
+                needsCharData = true;
+                break;
+            }
+        }
+        if (!needsCharData && spans.length > 0) {
+            for (const span of spans) {
                 if ((span.formatFlags & FULL_WIDTH_MASK) !== 0) {
-                    isFullWidth = true;
+                    needsCharData = true;
+                    break;
                 }
-                spanPos++;
-                if (spanPos >= span.length) {
-                    spanIdx++;
-                    spanPos = 0;
+            }
+        }
+        if (needsCharData) {
+            this.charData = Array.from({ length: this.length });
+            let currentOffset = 0;
+            let spanIdx = 0;
+            let spanPos = 0;
+            for (let i = 0; i < visibleChars; i++) {
+                const val = values[i];
+                let isFullWidth = false;
+                if (spans.length > 0 && spanIdx < spans.length) {
+                    const span = spans[spanIdx];
+                    if ((span.formatFlags & FULL_WIDTH_MASK) !== 0) {
+                        isFullWidth = true;
+                    }
+                    spanPos++;
+                    if (spanPos >= span.length) {
+                        spanIdx++;
+                        spanPos = 0;
+                    }
                 }
+                this.charData[i] = currentOffset | (isFullWidth ? FULL_WIDTH_FLAG : 0);
+                currentOffset += val.length;
             }
-            this.charData[i] = currentOffset | (isFullWidth ? FULL_WIDTH_FLAG : 0);
-            currentOffset += val.length;
         }
-        this.spans = spans.map(s => ({
-            ...s,
-            formatFlags: s.formatFlags & ~FULL_WIDTH_MASK,
-        }));
-        this.mergeSpans();
+        const hasStyles = spansHaveStyles(spans);
+        if (hasStyles) {
+            this.spans = spans.map(s => ({
+                ...s,
+                formatFlags: s.formatFlags & ~FULL_WIDTH_MASK,
+            }));
+            this._spansDirty = true;
+        }
+        else {
+            this.spans = undefined;
+        }
     }
     splitSpansAt(index) {
         if (this.spans === undefined || index <= 0 || index >= this.length)
             return;
+        this.ensureSpansMerged();
         let current = 0;
         for (let i = 0; i < this.spans.length; i++) {
             const span = this.spans[i];