fix: Add support for non-breaking space (#359)

fixes #293.

---------

Co-authored-by: Shu Ding <[email protected]>

src/utils.ts

@@ -175,9 +175,35 @@ export function segment(
     })
   }
 
-  return granularity === 'word'
-    ? [...wordSegmenter.segment(content)].map((seg) => seg.segment)
-    : [...graphemeSegmenter.segment(content)].map((seg) => seg.segment)
+  if (granularity === 'grapheme') {
+    return [...graphemeSegmenter.segment(content)].map((seg) => seg.segment)
+  } else {
+    const segmented = [...wordSegmenter.segment(content)].map(
+      (seg) => seg.segment
+    ) as string[]
+
+    const output = []
+
+    let i = 0
+    // When there is a non-breaking space, join the previous and next words together.
+    // This change causes them to be treated as a single segment.
+    while (i < segmented.length) {
+      const s = segmented[i]
+
+      if (s == '\u00a0') {
+        const previousWord = i === 0 ? '' : output.pop()
+        const nextWord = i === segmented.length - 1 ? '' : segmented[i + 1]
+
+        output.push(previousWord + '\u00a0' + nextWord)
+        i += 2
+      } else {
+        output.push(s)
+        i++
+      }
+    }
+
+    return output
+  }
 }
 
 export function buildXMLString(

test/word-break.test.tsx

@@ -55,6 +55,31 @@ describe('word-break', () => {
     })
   })
 
+  it('should support non-breaking space', async () => {
+    const text = `She weighs around blah 50\u00a0kg`
+    const svg = await satori(
+      <div
+        style={{
+          color: 'red',
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          wordBreak: 'normal',
+        }}
+      >
+        <span>{text}</span>
+        <span>{text.replaceAll('\u00A0', ' ')}</span>
+      </div>,
+      {
+        width: 200,
+        height: 100,
+        fonts,
+      }
+    )
+
+    expect(toImage(svg, 200)).toMatchImageSnapshot()
+  })
+
   describe('break-all', () => {
     it('should always break words eagerly', async () => {
       const svg = await satori(