From f1f9eb39da12fb1b49d90e610e3def23c24f4eb3 Mon Sep 17 00:00:00 2001
From: Nikolay Kost <JiLiZART@Gmail.com>
Date: Wed, 27 Mar 2024 03:29:16 +0200
Subject: [PATCH] fix(react): render words and spaces as single node in react
 (#226)

* fix(react): render words and spaces as single node in react

* chore: create metal-toys-heal.md
---
 .changeset/metal-toys-heal.md           |  7 ++++++
 packages/bbob-react/src/render.js       | 30 +++++++++++++------------
 packages/bbob-react/test/render.test.js |  7 ++++++
 3 files changed, 30 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/metal-toys-heal.md

diff --git a/.changeset/metal-toys-heal.md b/.changeset/metal-toys-heal.md
new file mode 100644
index 0000000..ca6816b
--- /dev/null
+++ b/.changeset/metal-toys-heal.md
@@ -0,0 +1,7 @@
+---
+"@bbob/react": patch
+---
+
+fix(react): render words and spaces as single node in react
+
+Now React properly renders string nodes with spaces as single text node for react. Thanks @WLYau
diff --git a/packages/bbob-react/src/render.js b/packages/bbob-react/src/render.js
index 6939965..3a0bd22 100644
--- a/packages/bbob-react/src/render.js
+++ b/packages/bbob-react/src/render.js
@@ -3,7 +3,7 @@ import React from 'react';
 import core from '@bbob/core';
 import * as html from '@bbob/html';
 
-import { isTagNode, isStringNode } from '@bbob/plugin-helper';
+import { isTagNode, isEOL } from '@bbob/plugin-helper';
 
 const toAST = (source, plugins, options) => core(plugins)
   .process(source, {
@@ -22,26 +22,28 @@ function tagToReactElement(node, index) {
 }
 
 function renderToReactNodes(nodes) {
-  let content = '';
   const els = [].concat(nodes).reduce((arr, node, index) => {
     if (isTagNode(node)) {
-      if (content !== '') {
-        arr.push(content);
-        content = '';
-      }
       arr.push(tagToReactElement(node, index));
-    } else if (isStringNode(node)) {
-      if (content === '') {
-        content = node;
-      } else {
-        content += node;
-      }
+      return arr;
     }
 
-    if (index === nodes.length - 1 && content !== '') {
-      arr.push(content);
+    if (isEOL(node)) {
+      arr.push(node);
+      return arr;
     }
 
+    const lastIdx = arr.length - 1;
+    const prevNode = lastIdx >= 0 ? arr[lastIdx] : null;
+
+    if (prevNode !== null && !isTagNode(prevNode) && !isEOL(prevNode)) {
+      const prevArr = arr; // stupid eslint
+      prevArr[lastIdx] += node;
+      return prevArr;
+    }
+
+    arr.push(node);
+
     return arr;
   }, []);
   return els;
diff --git a/packages/bbob-react/test/render.test.js b/packages/bbob-react/test/render.test.js
index 403aa8a..0f147e5 100644
--- a/packages/bbob-react/test/render.test.js
+++ b/packages/bbob-react/test/render.test.js
@@ -15,6 +15,13 @@ describe('@bbob/react render', () => {
   test('render simple text nodes', () => {
     const html = render('some example words');
 
+    expect(html[0]).toStrictEqual("some example words")
+  })
+  test('render simple text nodes with line break', () => {
+    const html = render(`some
+      example 
+      words`);
+
     expect(html[0]).toStrictEqual("some")
   })
 })