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)
 - feat(util): expose `calcPlaneRotation` [#9419](https://github.com/fabricjs/fabric.js/pull/9419)
 - refactor(Canvas): BREAKING remove button from mouse events, delegate to event.button property [#9449](https://github.com/fabricjs/fabric.js/pull/9449)
 - patch(Canvas): move event mouse:up:before earlier in the logic for more control [#9434](https://github.com/fabricjs/fabric.js/pull/9434)

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

@@ -8,7 +8,7 @@ setup();
 
 test.describe.configure({ mode: 'serial' });
 
-for (const splitByGrapheme of [true, false]) {
+for (const splitByGrapheme of [false, true]) {
   test(`adding new lines and copy paste - splitByGrapheme: ${splitByGrapheme}`, async ({
     page,
     context,
@@ -57,6 +57,8 @@ for (const splitByGrapheme of [true, false]) {
     await expect(await canvasUtil.screenshot()).toMatchSnapshot({
       name: `2-before-deleting-${splitByGrapheme}.png`,
     });
+    // continuos line deletion are a part of the test,
+    // an old bug was shifting style and then deleting it all at once
     await canvasUtil.press('Backspace');
     await canvasUtil.press('Backspace');
     await expect(await canvasUtil.screenshot()).toMatchSnapshot({
@@ -66,11 +68,10 @@ for (const splitByGrapheme of [true, false]) {
     await canvasUtil.press('b');
     await canvasUtil.press('c');
     await canvasUtil.press('Enter');
-    await canvasUtil.press('Enter');
     await expect(await canvasUtil.screenshot()).toMatchSnapshot({
-      name: `4-before-pasting-splitByGrapheme-${splitByGrapheme}.png`,
+      name: `4-after-typing-${splitByGrapheme}.png`,
     });
-    const pastePoint = await textBoxutil.getCanvasCursorPositionAt(36);
+    const pastePoint = await textBoxutil.getCanvasCursorPositionAt(35);
     await canvasUtil.click({
       position: pastePoint,
       delay: 200,
@@ -80,5 +81,29 @@ for (const splitByGrapheme of [true, false]) {
       name: `5-after-pasting-splitByGrapheme-${splitByGrapheme}.png`,
       maxDiffPixelRatio: 0.03,
     });
+    // go back where we have 2 empty lines, after abc.
+    const clickPointEnd = await textBoxutil.getCanvasCursorPositionAt(20);
+    await canvasUtil.click({
+      position: clickPointEnd,
+      delay: 200,
+    });
+    await page.mouse.down();
+    await page.mouse.move(1, clickPointEnd.y + 150, { steps: 15 });
+    await page.mouse.up();
+    // we remove them because space is finishing
+    await canvasUtil.press('Backspace');
+    // lets click where style end to show that we can add new line without carrying over
+    const clickPointYellow = await textBoxutil.getCanvasCursorPositionAt(45);
+    await canvasUtil.click({
+      position: clickPointYellow,
+      delay: 200,
+    });
+    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.03,
+    });
   });
 }

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 someStyleIsCarringOver = 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;
+        someStyleIsCarringOver = 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 (someStyleIsCarringOver && !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 becuase it changed line
       qty--;
     }
     // for the all the lines or all the other lines