From 84c64768b3b6f4793c296b6177504684c7d64608 Mon Sep 17 00:00:00 2001
From: Jacob Jewell <jakesjews@gmail.com>
Date: Fri, 14 Oct 2022 14:01:49 -0400
Subject: [PATCH] include textBackgroundColor check in hasStyleChanged (#8365)

* include textBackgroundColor check in hasStyleChanged

* fix assert message and add changelog entry
---
 CHANGELOG.md                |  1 +
 src/util/misc/textStyles.ts |  1 +
 test/unit/text.js           | 11 +++++++++++
 3 files changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8c9ad05ab2..96c8d97c8ee 100644
--- 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
index 8ef3bd04d69..437b87f8dbf 100644
--- 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
index e8ab5726b29..2ffdaa84b15 100644
--- 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();