feat: make nested text inherit background colors (#2504)

* feat: make nested text inherit background colors * chore: add changeset
diegomura · Jan 17, 2024 · e705d98 · e705d98
1 parent 96ea576
commit e705d98
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 2 deletions.
diff --git a/.changeset/cold-tips-work.md b/.changeset/cold-tips-work.md
@@ -0,0 +1,5 @@
+---
+'@react-pdf/layout': patch
+---
+
+feat: nested text inherit background color
diff --git a/packages/layout/src/steps/resolveInheritance.js b/packages/layout/src/steps/resolveInheritance.js
@@ -1,7 +1,7 @@
 import * as P from '@react-pdf/primitives';
 import { pick, compose } from '@react-pdf/fns';
 
-const INHERITED_PROPERTIES = [
+const BASE_INHERITABLE_PROPERTIES = [
   'color',
   'fontFamily',
   'fontSize',
@@ -17,8 +17,15 @@ const INHERITED_PROPERTIES = [
   'wordSpacing',
 ];
 
+const TEXT_INHERITABLE_PROPERTIES = [
+  ...BASE_INHERITABLE_PROPERTIES,
+  'backgroundColor',
+];
+
 const isSvg = node => node.type === P.Svg;
 
+const isText = node => node.type === P.Text;
+
 // Merge style values
 const mergeValues = (styleName, value, inheritedValue) => {
   switch (styleName) {
@@ -67,9 +74,14 @@ const mergeStyles = inheritedStyles => node => {
  */
 const resolveInheritance = node => {
   if (isSvg(node)) return node;
+
   if (!node.children) return node;
 
-  const inheritStyles = pick(INHERITED_PROPERTIES, node.style || {});
+  const inheritableProperties = isText(node)
+    ? TEXT_INHERITABLE_PROPERTIES
+    : BASE_INHERITABLE_PROPERTIES;
+
+  const inheritStyles = pick(inheritableProperties, node.style || {});
 
   const resolveChild = compose(resolveInheritance, mergeStyles(inheritStyles));
 

diff --git a/packages/layout/tests/steps/resolveInhritance.test.js b/packages/layout/tests/steps/resolveInhritance.test.js
@@ -111,6 +111,32 @@ describe('layout resolveInheritance', () => {
     );
   });
 
+  test('Should inherit background color for text childs', () => {
+    const root = {
+      type: 'DOCUMENT',
+      children: [
+        {
+          type: 'PAGE',
+          style: {},
+          children: [
+            {
+              type: 'TEXT',
+              style: { backgroundColor: 'red' },
+              children: [{ type: 'TEXT' }],
+            },
+          ],
+        },
+      ],
+    };
+
+    const result = resolveInheritance(root);
+    const text1 = result.children[0].children[0];
+    const text2 = text1.children[0];
+
+    expect(text1.style).toHaveProperty('backgroundColor', 'red');
+    expect(text2.style).toHaveProperty('backgroundColor', 'red');
+  });
+
   test('Should inherit color value', shouldInherit('color'));
   test('Should inherit fontFamily value', shouldInherit('fontFamily'));
   test('Should inherit fontSize value', shouldInherit('fontSize'));