fix(Text) Fix style transfer issue on a line that is not empty

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(Text) Fix style transfer issue on a line that is not empty [#9461](https://github.com/fabricjs/fabric.js/pull/9461)
 - ci(): add a vue template [#9502](https://github.com/fabricjs/fabric.js/pull/9502)
 - refactor(): `getActiveControl` now returns the key, the corner and the coordinates [#9515](https://github.com/fabricjs/fabric.js/pull/9515)
 - fix(Controls): forbid scaling to avoid NaN issues on scaling zero sized objects. #9475 [#9563](https://github.com/fabricjs/fabric.js/pull/9563)

e2e/tests/text/adding-text/index.spec.ts

@@ -110,10 +110,18 @@ for (const splitByGrapheme of [true, false]) {
       await canvasUtil.press('Enter');
       // this part of test is valid if the new line is after a styled char,
       // and there is no style on the part of text that follows, but there is visible text.
-      await expect(await canvasUtil.screenshot()).toMatchSnapshot({
-        name: `6-after-adding-a-newline-splitByGrapheme-${splitByGrapheme}.png`,
-        maxDiffPixelRatio: 0.01,
-      });
+      await expect(page).toHaveScreenshot(
+        `6-after-adding-a-newline-splitByGrapheme-${splitByGrapheme}.png`,
+        {
+          clip: {
+            x: 0,
+            y: clickPointYellow.y - 20,
+            width: 120,
+            height: 120,
+          },
+          maxDiffPixelRatio: 0.029,
+        }
+      );
     });
   });
 }

src/shapes/IText/ITextBehavior.ts

@@ -805,9 +805,10 @@ export abstract class ITextBehavior<
     copiedStyle?: { [index: number]: TextStyleDeclaration }
   ) {
     const newLineStyles: { [index: number]: TextStyleDeclaration } = {};
-    const isEndOfLine =
-      this._unwrappedTextLines[lineIndex].length === charIndex;
-    let somethingAdded = false;
+    const originalLineLength = this._unwrappedTextLines[lineIndex].length;
+    const isEndOfLine = originalLineLength === charIndex;
+
+    let someStyleIsCarryingOver = false;
     qty || (qty = 1);
     this.shiftLineStyles(lineIndex, qty);
     const currentCharStyle = this.styles[lineIndex]
@@ -819,7 +820,7 @@ export abstract class ITextBehavior<
     for (const index in this.styles[lineIndex]) {
       const numIndex = parseInt(index, 10);
       if (numIndex >= charIndex) {
-        somethingAdded = true;
+        someStyleIsCarryingOver = true;
         newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index];
         // remove lines from the previous line since they're on a new line now
         if (!(isEndOfLine && charIndex === 0)) {
@@ -828,14 +829,16 @@ export abstract class ITextBehavior<
       }
     }
     let styleCarriedOver = false;
-    if (somethingAdded && !isEndOfLine) {
+    if (someStyleIsCarryingOver && !isEndOfLine) {
       // if is end of line, the extra style we copied
       // is probably not something we want
       this.styles[lineIndex + qty] = newLineStyles;
       styleCarriedOver = true;
     }
-    if (styleCarriedOver) {
+    if (styleCarriedOver || originalLineLength > charIndex) {
       // skip the last line of since we already prepared it.
+      // or contains text without style that we don't want to style
+      // just because it changed lines
       qty--;
     }
     // for the all the lines or all the other lines