diff --git a/CHANGELOG.md b/CHANGELOG.md index 1655899b713..83671320fa4 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/e2e/tests/text/adding-text/index.spec.ts b/e2e/tests/text/adding-text/index.spec.ts index 47e3e06d582..b20fcdc0a9b 100644 --- a/e2e/tests/text/adding-text/index.spec.ts +++ b/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, + } + ); }); }); } diff --git a/e2e/tests/text/adding-text/index.spec.ts-snapshots/6-after-adding-a-newline-splitByGrapheme-false.png b/e2e/tests/text/adding-text/index.spec.ts-snapshots/6-after-adding-a-newline-splitByGrapheme-false.png index 4fc10b454d4..cc2da220d5e 100644 Binary files a/e2e/tests/text/adding-text/index.spec.ts-snapshots/6-after-adding-a-newline-splitByGrapheme-false.png and b/e2e/tests/text/adding-text/index.spec.ts-snapshots/6-after-adding-a-newline-splitByGrapheme-false.png differ diff --git a/e2e/tests/text/adding-text/index.spec.ts-snapshots/6-after-adding-a-newline-splitByGrapheme-true.png b/e2e/tests/text/adding-text/index.spec.ts-snapshots/6-after-adding-a-newline-splitByGrapheme-true.png index 82837ef0e8d..693466e5e54 100644 Binary files a/e2e/tests/text/adding-text/index.spec.ts-snapshots/6-after-adding-a-newline-splitByGrapheme-true.png and b/e2e/tests/text/adding-text/index.spec.ts-snapshots/6-after-adding-a-newline-splitByGrapheme-true.png differ diff --git a/src/shapes/IText/ITextBehavior.ts b/src/shapes/IText/ITextBehavior.ts index ef8901948db..28ae386c079 100644 --- a/src/shapes/IText/ITextBehavior.ts +++ b/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