fix: 🐛 handle multiple space rendering when using preserveWhitespace (#…

…531) When using preserveWhitespace,   is inserted as a string instead of JSX character entity. It is hence not rendered as a whitespace. To fix this, we replace whitespace with nbsp's unicode equivalent Closes: #514
contentful · Mar 4, 2024 · 982b21b · 982b21b
1 parent 4703988
commit 982b21b
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/packages/rich-text-react-renderer/src/__test__/__snapshots__/index.test.tsx.snap b/packages/rich-text-react-renderer/src/__test__/__snapshots__/index.test.tsx.snap
@@ -497,7 +497,7 @@ Array [
 exports[`preserveWhitespace preserves spaces between words 1`] = `
 Array [
   <p>
-    hello&nbsp;&nbsp;&nbsp;&nbsp;world
+    hello    world
   </p>,
 ]
 `;
diff --git a/packages/rich-text-react-renderer/src/util/nodeListToReactComponents.tsx b/packages/rich-text-react-renderer/src/util/nodeListToReactComponents.tsx
@@ -17,7 +17,7 @@ export function nodeToReactComponent(node: CommonNode, options: Options): ReactN
 
     if (preserveWhitespace) {
       // Preserve multiple spaces.
-      nodeValue = (nodeValue as string).replace(/ {2,}/g, (match) => '&nbsp;'.repeat(match.length));
+      nodeValue = (nodeValue as string).replace(/ {2,}/g, (match) => '\u00A0'.repeat(match.length));
 
       // Preserve line breaks.
       let lines = (nodeValue as string).split('\n');