fix(Textbox): implemente a fix for the style shifting issues on new l…

…ines (#9197)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(Textbox): implemente a fix for the style shifting issues on new lines [#9197](https://github.com/fabricjs/fabric.js/pull/9197)
 - Fix(Control) fix a regression in `wrap with fixed anchor`, regression from #8400 [#9326](https://github.com/fabricjs/fabric.js/pull/9326)
 - test(e2e): improve test case for line shifting and style with more colors [#9327](https://github.com/fabricjs/fabric.js/pull/9327)
 - test(e2e): node canvas visual tests [#9134](https://github.com/fabricjs/fabric.js/pull/9134)

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

@@ -6,7 +6,9 @@ import { TextUtil } from '../../../utils/TextUtil';
 
 setup();
 
-[false, true].forEach((splitByGrapheme) => {
+test.describe.configure({ mode: 'serial' });
+
+for (const splitByGrapheme of [true, false]) {
   test(`adding new lines and copy paste - splitByGrapheme: ${splitByGrapheme}`, async ({
     page,
     context,
@@ -79,4 +81,4 @@ setup();
       maxDiffPixelRatio: 0.03,
     });
   });
-});
+}

src/shapes/Text/Text.ts

@@ -529,11 +529,11 @@ export class Text<
   /**
    * Detect if a line has a linebreak and so we need to account for it when moving
    * and counting style.
-   * It return always for text and Itext.
+   * It return always 1 for text and Itext. Textbox has its own implementation
    * @return Number
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  missingNewlineOffset(lineIndex: number) {
+  missingNewlineOffset(lineIndex: number, skipWrapping?: boolean): 0 | 1;
+  missingNewlineOffset(lineIndex: number): 1 {
     return 1;
   }
 
@@ -552,7 +552,8 @@ export class Text<
           charIndex: selectionStart,
         };
       }
-      selectionStart -= lines[i].length + this.missingNewlineOffset(i);
+      selectionStart -=
+        lines[i].length + this.missingNewlineOffset(i, skipWrapping);
     }
     return {
       lineIndex: i - 1,

src/shapes/Textbox.ts

@@ -498,10 +498,12 @@ export class Textbox<
   /**
    * Detect if a line has a linebreak and so we need to account for it when moving
    * and counting style.
+   * This is important only for splitByGrapheme at the end of wrapping.
+   * If we are not wrapping the offset is always 1
    * @return Number
    */
-  missingNewlineOffset(lineIndex: number) {
-    if (this.splitByGrapheme) {
+  missingNewlineOffset(lineIndex: number, skipWrapping?: boolean): 0 | 1 {
+    if (this.splitByGrapheme && !skipWrapping) {
       return this.isEndOfWrapping(lineIndex) ? 1 : 0;
     }
     return 1;