From abbd8237174ba3565d5af149c846ca99ada9d06b Mon Sep 17 00:00:00 2001
From: Gervwyk <gervwyk@gmail.com>
Date: Mon, 23 Aug 2021 07:44:51 +0200
Subject: [PATCH] fix(blockTools): RenderHtml to return span by default, closes
 #775 #777

---
 packages/blockTools/src/RenderHtml.js      | 25 +++++++---
 packages/blockTools/src/RenderHtml.test.js | 55 +++++++++++-----------
 2 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/packages/blockTools/src/RenderHtml.js b/packages/blockTools/src/RenderHtml.js
index d7b6c5891..cdebec1ea 100644
--- a/packages/blockTools/src/RenderHtml.js
+++ b/packages/blockTools/src/RenderHtml.js
@@ -34,17 +34,30 @@ class RenderHtml extends React.Component {
   }
 
   render() {
-    const { id, methods, style } = this.props;
+    const { div, html, id, methods, style } = this.props;
+    if (!html) {
+      return '';
+    }
+    if (div) {
+      return (
+        <div
+          id={id}
+          data-testid={id}
+          ref={(el) => {
+            this.div = el;
+          }}
+          className={methods.makeCssClass(style)}
+        />
+      );
+    }
     return (
-      <div
+      <span
         id={id}
         data-testid={id}
         ref={(el) => {
-          if (el) {
-            this.div = el;
-          }
+          this.div = el;
         }}
-        className={methods.makeCssClass([{ display: 'inline-block' }, style])}
+        className={methods.makeCssClass(style)}
       />
     );
   }
diff --git a/packages/blockTools/src/RenderHtml.test.js b/packages/blockTools/src/RenderHtml.test.js
index 76347ca57..53db87990 100644
--- a/packages/blockTools/src/RenderHtml.test.js
+++ b/packages/blockTools/src/RenderHtml.test.js
@@ -36,59 +36,45 @@ test('Render default', async () => {
   const wrapper = await mount(<RenderHtml methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(
-    `"<div class=\\"[{&quot;display&quot;:&quot;inline-block&quot;},null]\\"></div>"`
-  );
+  expect(wrapper.html()).toMatchInlineSnapshot(`""`);
   await wrapper.instance().componentDidUpdate();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(
-    `"<div class=\\"[{&quot;display&quot;:&quot;inline-block&quot;},null]\\"></div>"`
-  );
+  expect(wrapper.html()).toMatchInlineSnapshot(`""`);
 });
 
 test('Render default and id', async () => {
   const wrapper = await mount(<RenderHtml id="test-id" methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(
-    `"<div id=\\"test-id\\" data-testid=\\"test-id\\" class=\\"[{&quot;display&quot;:&quot;inline-block&quot;},null]\\"></div>"`
-  );
+  expect(wrapper.html()).toMatchInlineSnapshot(`""`);
 });
 
 test('Render string', async () => {
   const wrapper = await mount(<RenderHtml html="A string value" methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(
-    `"<div class=\\"[{&quot;display&quot;:&quot;inline-block&quot;},null]\\">A string value</div>"`
-  );
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span>A string value</span>"`);
 });
 
 test('Render number', async () => {
   const wrapper = await mount(<RenderHtml html={123} methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(
-    `"<div class=\\"[{&quot;display&quot;:&quot;inline-block&quot;},null]\\">123</div>"`
-  );
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span>123</span>"`);
 });
 
 test('Render boolean', async () => {
   const wrapper = await mount(<RenderHtml html={false} methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(
-    `"<div class=\\"[{&quot;display&quot;:&quot;inline-block&quot;},null]\\"></div>"`
-  );
+  expect(wrapper.html()).toMatchInlineSnapshot(`""`);
 });
 
 test('Render null', async () => {
   const wrapper = await mount(<RenderHtml html={null} methods={methods} />);
   await wrapper.instance().componentDidMount();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(
-    `"<div class=\\"[{&quot;display&quot;:&quot;inline-block&quot;},null]\\"></div>"`
-  );
+  expect(wrapper.html()).toMatchInlineSnapshot(`""`);
 });
 
 test('Render html', async () => {
@@ -101,7 +87,22 @@ test('Render html', async () => {
   await wrapper.instance().componentDidMount();
   await wrapper.update();
   expect(wrapper.html()).toMatchInlineSnapshot(
-    `"<div class=\\"[{&quot;display&quot;:&quot;inline-block&quot;},null]\\"><div style=\\"background: green; padding: 10px;\\">Content green background</div></div>"`
+    `"<span><div style=\\"background: green; padding: 10px;\\">Content green background</div></span>"`
+  );
+});
+
+test('Render html div', async () => {
+  const wrapper = await mount(
+    <RenderHtml
+      html={'<div style="background: green; padding: 10px;">Content green background</div>'}
+      methods={methods}
+      div={true}
+    />
+  );
+  await wrapper.instance().componentDidMount();
+  await wrapper.update();
+  expect(wrapper.html()).toMatchInlineSnapshot(
+    `"<div><div style=\\"background: green; padding: 10px;\\">Content green background</div></div>"`
   );
 });
 
@@ -116,7 +117,7 @@ test('Render html and style', async () => {
   await wrapper.instance().componentDidMount();
   await wrapper.update();
   expect(wrapper.html()).toMatchInlineSnapshot(
-    `"<div class=\\"[{&quot;display&quot;:&quot;inline-block&quot;},{&quot;color&quot;:&quot;red&quot;}]\\"><div style=\\"background: green; padding: 10px;\\">Content green background</div></div>"`
+    `"<span class=\\"{&quot;color&quot;:&quot;red&quot;}\\"><div style=\\"background: green; padding: 10px;\\">Content green background</div></span>"`
   );
 });
 
@@ -131,9 +132,7 @@ test('Render html iframe', async () => {
   );
   await wrapper.instance().componentDidMount();
   await wrapper.update();
-  expect(wrapper.html()).toMatchInlineSnapshot(
-    `"<div class=\\"[{&quot;display&quot;:&quot;inline-block&quot;},null]\\"></div>"`
-  );
+  expect(wrapper.html()).toMatchInlineSnapshot(`"<span></span>"`);
 });
 
 test('Render bad html', async () => {
@@ -156,7 +155,7 @@ test('Render bad html', async () => {
   await wrapper.instance().componentDidMount();
   await wrapper.update();
   expect(wrapper.html()).toMatchInlineSnapshot(`
-    "<div class=\\"[{&quot;display&quot;:&quot;inline-block&quot;},null]\\">
+    "<span>
           <h1>Link</h1><h1>
           <a href=\\"https://lowdefy.com\\">Lowdefy link</a>
           <font size=\\"+10\\">Description</font>
@@ -166,6 +165,6 @@ test('Render bad html', async () => {
             <img src=\\"x\\">
             <math><mi></mi></math>
           </div>
-          </div>"
+          </span>"
   `);
 });