Merge pull request #6 from moveyourdigital/fix-html-render-quote-block

Fix html render quote block
moveyourdigital · Jan 14, 2021 · c4599fc · c4599fc
2 parents 1589280 + ee4d1c6
commit c4599fc
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 17 deletions.
diff --git a/src/renderers/list/__snapshots__/index.test.tsx.snap b/src/renderers/list/__snapshots__/index.test.tsx.snap
@@ -20,7 +20,11 @@ exports[`<List /> when receives a list unordered block renders a <ul> block 1`]
     It is a block-styled editor
   </li>
   <li>
-    It returns clean data output in JSON
+    It returns clean 
+    <b>
+      data output
+    </b>
+     in JSON
   </li>
   <li>
     Designed to be extendable and pluggable with a simple API

diff --git a/src/renderers/list/index.test.tsx b/src/renderers/list/index.test.tsx
@@ -8,7 +8,7 @@ describe('<List />', () => {
       style: 'unordered',
       items: [
         'It is a block-styled editor',
-        'It returns clean data output in JSON',
+        'It returns clean <b>data output</b> in JSON',
         'Designed to be extendable and pluggable with a simple API',
       ],
     };

diff --git a/src/renderers/paragraph/__snapshots__/index.test.tsx.snap b/src/renderers/paragraph/__snapshots__/index.test.tsx.snap
@@ -2,6 +2,10 @@
 
 exports[`<Paragraph /> when receives a paragraph block renders a <p> tag 1`] = `
 <p>
-  Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration.
+  Hey. Meet the new 
+  <b>
+    Editor
+  </b>
+  . On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration.
 </p>
 `;
diff --git a/src/renderers/paragraph/index.test.tsx b/src/renderers/paragraph/index.test.tsx
@@ -6,7 +6,7 @@ describe('<Paragraph />', () => {
   describe('when receives a paragraph block', () => {
     const data: ParagraphBlockData = {
       text:
-        'Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration.',
+        'Hey. Meet the new <b>Editor</b>. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration.',
     };
 
     it('renders a <p> tag', () => {

diff --git a/src/renderers/quote/__snapshots__/index.test.tsx.snap b/src/renderers/quote/__snapshots__/index.test.tsx.snap
@@ -5,12 +5,21 @@ exports[`<Quote /> when receives a Quote block renders a <blockquote> block with
   className="text-align-center special-quote"
 >
   <p>
-    Esse ea consectetur est fugiat ut dolor pariatur ex voluptate ad Lorem Lorem sit sunt.
-  </p>
-  <p>
-    Eiusmod voluptate ullamco laborum minim elit.
+    <i>
+      Esse ea consectetur est fugiat ut dolor pariatur ex voluptate ad Lorem Lorem sit sunt.
+    </i>
   </p>
   <p>
+    <i>
+      Eiusmod voluptate 
+      <b>
+        ullamco
+      </b>
+       laborum minim elit.
+    </i>
+    <i>
+      <br />
+    </i>
     Cillum ullamco fugiat tempor dolore enim.
     <br />
     Excepteur exercitation amet aliqua proident labore qui sint do dolore sint nulla aute.

diff --git a/src/renderers/quote/index.test.tsx b/src/renderers/quote/index.test.tsx
@@ -6,7 +6,7 @@ describe('<Quote />', () => {
   describe('when receives a Quote block', () => {
     const data: QuoteBlockData = {
       text:
-        'Esse ea consectetur est fugiat ut dolor pariatur ex voluptate ad Lorem Lorem sit sunt.\n\nEiusmod voluptate ullamco laborum minim elit.\n\nCillum ullamco fugiat tempor dolore enim.\nExcepteur exercitation amet aliqua proident labore qui sint do dolore sint nulla aute.',
+        '<i>Esse ea consectetur est fugiat ut dolor pariatur ex voluptate ad Lorem Lorem sit sunt.</i>\n\n<i>Eiusmod voluptate <b>ullamco</b> laborum minim elit.</i><i><br></i>Cillum ullamco fugiat tempor dolore enim.\nExcepteur exercitation amet aliqua proident labore qui sint do dolore sint nulla aute.</i>',
       caption: 'Carpe Diem, <cite>Lorem ipusm dolor</cite>.',
       alignment: 'center',
     };

diff --git a/src/renderers/quote/index.tsx b/src/renderers/quote/index.tsx
@@ -39,14 +39,13 @@ const Quote = ({
   return (
     <blockquote {...blockquoteprops}>
       {data.text &&
-        data.text.split('\n\n').map((paragraph, i) => (
-          <p key={i}>
-            {paragraph
-              .split('\n')
-              // @ts-ignore
-              .reduce((total, line, j) => [total, <br key={j} />, line])}
-          </p>
-        ))}
+        data.text
+          .split('\n\n')
+          .map((paragraph, i) => (
+            <p key={i}>
+              {ReactHtmlParser(paragraph.split('\n').reduce((total, line) => [total, '<br />', line].join('')))}
+            </p>
+          ))}
       {data.caption && <footer>{ReactHtmlParser(data.caption)}</footer>}
     </blockquote>
   );