Merge pull request #341 from storyblok/fix/is-richtext-empty

fix: isRichTextEmpty now checks every node in a given RichText structure
storyblok · Aug 3, 2023 · 200d0f7 · 200d0f7
2 parents 1bcc045 + 8825822
commit 200d0f7
Show file tree

Hide file tree

Showing 4 changed files with 237 additions and 8 deletions.
diff --git a/lib/cypress/e2e/index.cy.js b/lib/cypress/e2e/index.cy.js
@@ -27,7 +27,7 @@ describe("@storyblok/js", () => {
       cy.get("@consoleError").should("not.be.called");
       cy.get("#rich-text-container").should(
         "have.html",
-        "<p>Hola<b>in bold</b></p>"
+        "<p></p><p>Hola<b>in bold</b></p><p></p><p>paragraph after empty line</p><p></p><ul><li><p>an item in a list</p></li><li><p>another item</p></li></ul><p></p><ol><li><p>item in another list</p></li><li><p>another item</p></li></ol><p></p><blockquote><p>this is a quote</p></blockquote><p></p><hr><p></p><p>some words after an &lt;hr&gt;</p><p></p><p><i>italic text</i></p><p></p><p><strike>strikethrough</strike></p><p></p><p><u>underlined</u></p><p></p><p><sup>superscript</sup></p><p></p><p><sub>subscript</sub></p><p></p><p><code>inline code</code> </p>"
       );
     });
 
@@ -38,7 +38,7 @@ describe("@storyblok/js", () => {
       cy.get(".render-rich-text").click();
       cy.get("#rich-text-container").should(
         "have.html",
-        'Holain bold<div class="custom-component">hey John</div>'
+        'Holain bold<div class="custom-component">hey John</div>paragraph after empty linean item in a listanother itemitem in another listanother itemthis is a quotesome words after an &lt;hr&gt;italic textstrikethroughunderlinedsuperscriptsubscriptinline code '
       );
     });
 
@@ -49,7 +49,7 @@ describe("@storyblok/js", () => {
       cy.get(".render-rich-text-options").click();
       cy.get("#rich-text-container").should(
         "have.html",
-        'Holain bold<div class="custom-component">hey John</div>'
+        'Holain bold<div class="custom-component">hey John</div>paragraph after empty linean item in a listanother itemitem in another listanother itemthis is a quotesome words after an &lt;hr&gt;italic textstrikethroughunderlinedsuperscriptsubscriptinline code '
       );
     });
   });

diff --git a/lib/fixtures/richTextObject.json b/lib/fixtures/richTextObject.json
@@ -1,6 +1,9 @@
 {
   "type": "doc",
   "content": [
+    {
+      "type": "paragraph"
+    },
     {
       "type": "paragraph",
       "content": [
@@ -35,6 +38,234 @@
           }
         ]
       }
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "text": "paragraph after empty line",
+          "type": "text"
+        }
+      ]
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "bullet_list",
+      "content": [
+        {
+          "type": "list_item",
+          "content": [
+            {
+              "type": "paragraph",
+              "content": [
+                {
+                  "text": "an item in a list",
+                  "type": "text"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "list_item",
+          "content": [
+            {
+              "type": "paragraph",
+              "content": [
+                {
+                  "text": "another item",
+                  "type": "text"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "ordered_list",
+      "attrs": {
+        "order": 1
+      },
+      "content": [
+        {
+          "type": "list_item",
+          "content": [
+            {
+              "type": "paragraph",
+              "content": [
+                {
+                  "text": "item in another list",
+                  "type": "text"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "list_item",
+          "content": [
+            {
+              "type": "paragraph",
+              "content": [
+                {
+                  "text": "another item",
+                  "type": "text"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "blockquote",
+      "content": [
+        {
+          "type": "paragraph",
+          "content": [
+            {
+              "text": "this is a quote",
+              "type": "text"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "horizontal_rule"
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "text": "some words after an <hr>",
+          "type": "text"
+        }
+      ]
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "text": "italic text",
+          "type": "text",
+          "marks": [
+            {
+              "type": "italic"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "text": "strikethrough",
+          "type": "text",
+          "marks": [
+            {
+              "type": "strike"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "text": "underlined",
+          "type": "text",
+          "marks": [
+            {
+              "type": "underline"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "text": "superscript",
+          "type": "text",
+          "marks": [
+            {
+              "type": "superscript"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "text": "subscript",
+          "type": "text",
+          "marks": [
+            {
+              "type": "subscript"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "paragraph"
+    },
+    {
+      "type": "paragraph",
+      "content": [
+        {
+          "text": "inline code",
+          "type": "text",
+          "marks": [
+            {
+              "type": "code"
+            }
+          ]
+        },
+        {
+          "text": " ",
+          "type": "text"
+        }
+      ]
     }
   ]
-}
+}
diff --git a/lib/index.ts b/lib/index.ts
@@ -108,7 +108,7 @@ const setComponentResolver = (resolver, resolveFn) => {
 };
 
 export const isRichTextEmpty = (data?: ISbRichtext) => {
-return !data || (data?.content?.[0].type !== "blok" && !data?.content?.[0].content);
+  return !data || !data?.content.some((node) => node.content || node.type === 'blok' || node.type === 'horizontal_rule');
 }
 
 export const renderRichText = (

diff --git a/lib/tests/__snapshots__/index.test.js.snap b/lib/tests/__snapshots__/index.test.js.snap
@@ -1,5 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`@storyblok/js > Rich Text Resolver > should return the rendered HTML when passing a RichText object 1`] = `"<p>Hola<b>in bold</b></p>"`;
-
-exports[`@storyblok/js > Rich Text Resolver > should return the rendered HTML when passing a valid RichText object 1`] = `"<p>Hola<b>in bold</b></p>"`;
+exports[`@storyblok/js > Rich Text Resolver > should return the rendered HTML when passing a valid RichText object 1`] = `"<p></p><p>Hola<b>in bold</b></p><p></p><p>paragraph after empty line</p><p></p><ul><li><p>an item in a list</p></li><li><p>another item</p></li></ul><p></p><ol><li><p>item in another list</p></li><li><p>another item</p></li></ol><p></p><blockquote><p>this is a quote</p></blockquote><p></p><hr /><p></p><p>some words after an &lt;hr&gt;</p><p></p><p><i>italic text</i></p><p></p><p><strike>strikethrough</strike></p><p></p><p><u>underlined</u></p><p></p><p><sup>superscript</sup></p><p></p><p><sub>subscript</sub></p><p></p><p><code>inline code</code> </p>"`;