BREAKING fix(Text): styles onInput

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 ## [next]
 
+- BREAKING fix(Text): styles `onInput` [#9096](https://github.com/fabricjs/fabric.js/pull/9096)
+  **BERAKING**: `get2DCursorLocation` => `getCursorPosition`, `getStyleCursorPosition`
+  **BREAKING**: rm `getCurrentCharFontSize`, `getCurrentCharColor`, `_getCurrentCharIndex`
+  **BREAKING**: rm `cleanStyle`, `removeStyle`, `_extendStyles`, `_setStyleDeclaration`, `_deleteStyleDeclaration`, `_getLineStyle`, `_setLineStyle`, `_deleteLineStyle`
+  **BREAKING**: rm `_getStyleDeclaration`, `getCompleteStyleDeclaration` => `getStyleDeclaration`
 - fix(): #8344 stroke projection [#8374](https://github.com/fabricjs/fabric.js/pull/8374)
 - fix(Filters) Removing type from the options passed in the constructor [#9089](https://github.com/fabricjs/fabric.js/pull/9089)
 - feat(InteractiveObject): add `getActiveControl()` to expose `__corner` [#9102](https://github.com/fabricjs/fabric.js/pull/9102)

e2e/tests/text/input+styles/index.spec.ts

@@ -0,0 +1,156 @@
+import { expect, test } from '@playwright/test';
+
+import '../../../setup';
+
+test('test', async ({ page }) => {
+  const canvas = page.locator('canvas.upper-canvas');
+  await canvas.click({
+    position: {
+      x: 156,
+      y: 65,
+    },
+    delay: 200,
+  });
+  await canvas.click({
+    position: {
+      x: 176,
+      y: 152,
+    },
+    delay: 200,
+  });
+  await page.mouse.down();
+  await page.mouse.move(60, 66, { steps: 40 });
+  await page.mouse.up();
+  await canvas.press('Control+c');
+  await canvas.click({
+    position: {
+      x: 176,
+      y: 152,
+    },
+    delay: 200,
+  });
+  await canvas.press('Enter');
+  await canvas.press('Enter');
+  await canvas.press('Control+v');
+  await canvas.click({
+    position: {
+      x: 246,
+      y: 371,
+    },
+  });
+  await canvas.press('Enter');
+  await canvas.press('Enter');
+  await canvas.press('x');
+  await canvas.click({
+    position: {
+      x: 144,
+      y: 202,
+    },
+  });
+  await canvas.press('Enter');
+  await canvas.press('Enter');
+  await canvas.press('Enter');
+  await canvas.press('Enter');
+  await canvas.press('Backspace');
+  await canvas.press('Backspace');
+  await canvas.press('ArrowUp');
+  await canvas.press('ArrowUp');
+  await canvas.press('Delete');
+  await canvas.click({
+    position: {
+      x: 170,
+      y: 203,
+    },
+  });
+  await canvas.press('Enter');
+  await canvas.click({
+    position: {
+      x: 136,
+      y: 336,
+    },
+  });
+  await canvas.press('#');
+  await canvas.click({
+    position: {
+      x: 103,
+      y: 334,
+    },
+  });
+  await canvas.press('#');
+  await canvas.click({
+    position: {
+      x: 238,
+      y: 423,
+    },
+  });
+  await canvas.press('#');
+  await canvas.click({
+    position: {
+      x: 52,
+      y: 480,
+    },
+  });
+  await canvas.press('#');
+  await canvas.click({
+    position: {
+      x: 81,
+      y: 231,
+    },
+  });
+  await canvas.press('#');
+  await canvas.click({
+    position: {
+      x: 91,
+      y: 265,
+    },
+  });
+  await canvas.press('#');
+  await canvas.click({
+    position: {
+      x: 182,
+      y: 158,
+    },
+  });
+  await canvas.press('#');
+  await canvas.click({
+    position: {
+      x: 79,
+      y: 146,
+    },
+  });
+  await canvas.press('#');
+  await canvas.click({
+    position: {
+      x: 137,
+      y: 65,
+    },
+  });
+  await canvas.press('#');
+  await canvas.click({
+    position: {
+      x: 131,
+      y: 265,
+    },
+  });
+  await expect(await canvas.screenshot()).toMatchSnapshot();
+  await canvas.press('Enter');
+  await canvas.press('Enter');
+  await canvas.press('#');
+  await canvas.press('Backspace');
+  await canvas.press('Backspace');
+  await canvas.press('Backspace');
+  await canvas.press('Backspace');
+  await canvas.press('Backspace');
+  await canvas.press('Backspace');
+  await canvas.press('Backspace');
+  await canvas.press('Backspace');
+  await canvas.press('Delete');
+  await canvas.press('Delete');
+  await canvas.press('Delete');
+  await canvas.press('Enter');
+  await canvas.press('Enter');
+  await canvas.press('Backspace');
+  await canvas.press('ArrowUp');
+  await canvas.press('Delete');
+  await expect(await canvas.screenshot()).toMatchSnapshot();
+});

e2e/tests/text/input+styles/index.ts

@@ -0,0 +1,30 @@
+import * as fabric from 'fabric';
+import { beforeAll } from 'test';
+
+beforeAll(
+  (canvas) => {
+    const textValue = 'fabric.js sandbox';
+    const text = new fabric.Textbox(textValue, {
+      originX: 'center',
+      splitByGrapheme: true,
+      width: 200,
+      top: 20,
+      styles: fabric.util.stylesFromArray(
+        [
+          {
+            style: {
+              fontWeight: 'bold',
+              fontSize: 64,
+            },
+            start: 0,
+            end: 9,
+          },
+        ],
+        textValue
+      ),
+    });
+    canvas.add(text);
+    canvas.centerObjectH(text);
+  },
+  { width: 300, height: 700 }
+);

src/env/types.ts

@@ -1,9 +1,10 @@
+import type { TextStyleDeclaration } from '../../fabric';
 import type { GLProbe } from '../filters/GLProbes/GLProbe';
 import type { DOMWindow } from 'jsdom';
 
 export type TCopyPasteData = {
   copiedText?: string;
-  copiedStyle?: Record<string, string>;
+  copiedTextStyle?: TextStyleDeclaration[];
 };
 export type TFabricEnv = {
   document: Document;

src/shapes/IText/IText.ts

@@ -7,7 +7,6 @@ import {
   keysMap,
   keysMapRtl,
 } from './constants';
-import type { TFiller } from '../../typedefs';
 import { classRegistry } from '../../ClassRegistry';
 import type { SerializedTextProps, TextProps } from '../Text/Text';
 import {
@@ -327,18 +326,6 @@ export class IText<
     return super.setSelectionStyles(styles, startIndex, endIndex);
   }
 
-  /**
-   * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
-   * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
-   * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles.
-   */
-  get2DCursorLocation(
-    selectionStart = this.selectionStart,
-    skipWrapping?: boolean
-  ) {
-    return super.get2DCursorLocation(selectionStart, skipWrapping);
-  }
-
   /**
    * @private
    * @param {CanvasRenderingContext2D} ctx Context to render on
@@ -435,7 +422,7 @@ export class IText<
   __getCursorBoundariesOffsets(index: number) {
     let topOffset = 0,
       leftOffset = 0;
-    const { charIndex, lineIndex } = this.get2DCursorLocation(index);
+    const { charIndex, lineIndex } = this.getCursorPosition(index);
 
     for (let i = 0; i < lineIndex; i++) {
       topOffset += this.getHeightOfLine(i);
@@ -496,14 +483,17 @@ export class IText<
     boundaries: CursorBoundaries,
     selectionStart: number
   ) {
-    const cursorLocation = this.get2DCursorLocation(selectionStart),
+    const cursorLocation = this.getCursorPosition(selectionStart),
       lineIndex = cursorLocation.lineIndex,
       charIndex =
         cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0,
-      charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'),
+      {
+        fontSize: charHeight,
+        deltaY: dy,
+        fill,
+      } = this.getStyleDeclaration(lineIndex, charIndex, true),
       multiplier = this.scaleX * this.canvas!.getZoom(),
       cursorWidth = this.cursorWidth / multiplier,
-      dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'),
       topOffset =
         boundaries.topOffset +
         ((1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex)) /
@@ -515,9 +505,7 @@ export class IText<
       // and why can't happen at the top of the function
       this.renderSelection(ctx, boundaries);
     }
-    ctx.fillStyle =
-      this.cursorColor ||
-      (this.getValueOfPropertyAt(lineIndex, charIndex, 'fill') as string);
+    ctx.fillStyle = this.cursorColor || (fill as string);
     ctx.globalAlpha = this._currentCursorOpacity;
     ctx.fillRect(
       boundaries.left + boundaries.leftOffset - cursorWidth / 2,
@@ -577,8 +565,8 @@ export class IText<
     const selectionStart = selection.selectionStart,
       selectionEnd = selection.selectionEnd,
       isJustify = this.textAlign.includes(JUSTIFY),
-      start = this.get2DCursorLocation(selectionStart),
-      end = this.get2DCursorLocation(selectionEnd),
+      start = this.getCursorPosition(selectionStart),
+      end = this.getCursorPosition(selectionEnd),
       startLine = start.lineIndex,
       endLine = end.lineIndex,
       startChar = start.charIndex < 0 ? 0 : start.charIndex,
@@ -651,42 +639,6 @@ export class IText<
     }
   }
 
-  /**
-   * High level function to know the height of the cursor.
-   * the currentChar is the one that precedes the cursor
-   * Returns fontSize of char at the current cursor
-   * Unused from the library, is for the end user
-   * @return {Number} Character font size
-   */
-  getCurrentCharFontSize(): number {
-    const cp = this._getCurrentCharIndex();
-    return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize');
-  }
-
-  /**
-   * High level function to know the color of the cursor.
-   * the currentChar is the one that precedes the cursor
-   * Returns color (fill) of char at the current cursor
-   * if the text object has a pattern or gradient for filler, it will return that.
-   * Unused by the library, is for the end user
-   * @return {String | TFiller} Character color (fill)
-   */
-  getCurrentCharColor(): string | TFiller | null {
-    const cp = this._getCurrentCharIndex();
-    return this.getValueOfPropertyAt(cp.l, cp.c, 'fill');
-  }
-
-  /**
-   * Returns the cursor position for the getCurrent.. functions
-   * @private
-   */
-  _getCurrentCharIndex() {
-    const cursorPosition = this.get2DCursorLocation(this.selectionStart, true),
-      charIndex =
-        cursorPosition.charIndex > 0 ? cursorPosition.charIndex - 1 : 0;
-    return { l: cursorPosition.lineIndex, c: charIndex };
-  }
-
   dispose() {
     this._exitEditing();
     this.draggableTextDelegate.dispose();

src/shapes/IText/ITextBehavior.ts

@@ -563,12 +563,8 @@ export abstract class ITextBehavior<
         ? this.compositionStart
         : this.selectionStart,
       boundaries = this._getCursorBoundaries(desiredPosition),
-      cursorLocation = this.get2DCursorLocation(desiredPosition),
-      lineIndex = cursorLocation.lineIndex,
-      charIndex = cursorLocation.charIndex,
       charHeight =
-        this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize') *
-        this.lineHeight,
+        this.getStyleValue(desiredPosition, 'fontSize') * this.lineHeight,
       leftOffset = boundaries.leftOffset,
       retinaScaling = this.getCanvasRetinaScaling(),
       upperCanvas = this.canvas.upperCanvasEl,
@@ -714,11 +710,9 @@ export abstract class ITextBehavior<
    */
   removeStyleFromTo(start: number, end: number) {
     const { lineIndex: lineStart, charIndex: charStart } =
-        this.get2DCursorLocation(start, true),
-      { lineIndex: lineEnd, charIndex: charEnd } = this.get2DCursorLocation(
-        end,
-        true
-      );
+        this.getStyleCursorPosition(start),
+      { lineIndex: lineEnd, charIndex: charEnd } =
+        this.getStyleCursorPosition(end);
     if (lineStart !== lineEnd) {
       // step1 remove the trailing of lineStart
       if (this.styles[lineStart]) {
@@ -926,7 +920,7 @@ export abstract class ITextBehavior<
     start: number,
     copiedStyle?: TextStyleDeclaration[]
   ) {
-    const cursorLoc = this.get2DCursorLocation(start, true),
+    const cursorLoc = this.getStyleCursorPosition(start),
       addedLines = [0];
     let linesLength = 0;
     // get an array of how many char per lines are being added.