include textBackgroundColor check in hasStyleChanged (fabricjs#8365)

* include textBackgroundColor check in hasStyleChanged * fix assert message and add changelog entry
cgwire · Jan 6, 2023 · 84c6476 · 84c6476
1 parent 20ef561
commit 84c6476
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(textStyles): Handle style objects with only a textBackgroundColor property in stylesToArray [#8365](https://github.com/fabricjs/fabric.js/pull/8365)
 - chore(): fix typos in intersection file [#8345](https://github.com/fabricjs/fabric.js/pull/8345)
 - fix(textStyles): Handle empty style object in stylesToArray [#8357](https://github.com/fabricjs/fabric.js/pull/8357)
 - ci(build): safeguard concurrent unlocking [#8309](https://github.com/fabricjs/fabric.js/pull/8309)

diff --git a/src/util/misc/textStyles.ts b/src/util/misc/textStyles.ts
@@ -19,6 +19,7 @@ export const hasStyleChanged = (
   prevStyle.fontFamily !== thisStyle.fontFamily ||
   prevStyle.fontWeight !== thisStyle.fontWeight ||
   prevStyle.fontStyle !== thisStyle.fontStyle ||
+  prevStyle.textBackgroundColor !== thisStyle.textBackgroundColor ||
   prevStyle.deltaY !== thisStyle.deltaY ||
   (forTextSpans &&
     (prevStyle.overline !== thisStyle.overline ||

diff --git a/test/unit/text.js b/test/unit/text.js
@@ -394,6 +394,17 @@
     assert.deepEqual(obj.styles, [], 'empty style object has been removed');
   });
 
+  QUnit.test('text toObject can handle style objects with only a textBackgroundColor property', function(assert) {
+    var text = new fabric.Text('xxx');
+    text.styles = { 0: { 0: { textBackgroundColor: 'blue' } } };
+    var obj = text.toObject();
+    assert.deepEqual(
+      obj.styles,
+      [{ start: 0, end: 1, style: { textBackgroundColor: 'blue' }}],
+      'styles with only a textBackgroundColor property do not throw an error'
+    );
+  });
+
   QUnit.test('getFontCache works with fontWeight numbers', function(assert) {
     var text = new fabric.Text('xxx', { fontWeight: 400 });
     text.initDimensions();