Merge pull request #314 from storyblok/WEB-419-add-is-richtext-empty-…

…util-to-js-sdk

feat: add isRichTextEmpty util

lib/fixtures/emptyRichTextObject.json

@@ -0,0 +1,8 @@
+{
+  "type": "doc",
+  "content": [
+    {
+      "type": "paragraph"
+    }
+  ]
+}

lib/index.ts

@@ -107,8 +107,12 @@ const setComponentResolver = (resolver, resolveFn) => {
   });
 };
 
+export const isRichTextEmpty = (data?: ISbRichtext) => {
+return !data || (data?.content?.[0].type !== "blok" && !data?.content?.[0].content);
+}
+
 export const renderRichText = (
-  data: ISbRichtext,
+  data?: ISbRichtext,
   options?: SbRichTextOptions,
   resolverInstance?: RichtextResolver
 ): string => {
@@ -120,12 +124,7 @@ export const renderRichText = (
     return;
   }
 
-  if ((data as any) === "") {
-    return "";
-  } else if (!data) {
-    console.warn(`${data} is not a valid Richtext object. This might be because the value of the richtext field is empty.
-    
-  For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`);
+  if (isRichTextEmpty(data)) {
     return "";
   }
 

lib/tests/__snapshots__/index.test.js.snap

@@ -1,3 +1,5 @@
-// Vitest Snapshot v1
+// 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>"`;

lib/tests/index.test.js

@@ -3,10 +3,12 @@ import {
   apiPlugin,
   storyblokEditable,
   renderRichText,
+  isRichTextEmpty,
 } from "@storyblok/js";
 import { describe, it, expect, vi, afterEach } from "vitest";
 
 import richTextFixture from "../fixtures/richTextObject.json";
+import emptyRichTextFixture from "../fixtures/emptyRichTextObject.json";
 
 describe("@storyblok/js", () => {
   afterEach(() => {
@@ -66,23 +68,25 @@ describe("@storyblok/js", () => {
     });
   });
 
-  describe("Rich Text Resolver", () => {
-    it("should return the rendered HTML when passing a RichText object", () => {
+  describe("isRichTextEmpty", () => {
+    it("should return true when passing an empty or invalid RichText object", () => {
       storyblokInit({ accessToken: "wANpEQEsMYGOwLxwXQ76Ggtt", bridge: false });
-      expect(renderRichText(richTextFixture)).toMatchSnapshot();
-    });
-    it("should return an empty string and warn in console when it's a falsy value", () => {
-      const spy = vi.spyOn(console, "warn");
+      expect(isRichTextEmpty(emptyRichTextFixture)).toBe(true);
+    })
+    it("should return false when passing a valid RichText object", () => {
       storyblokInit({ accessToken: "wANpEQEsMYGOwLxwXQ76Ggtt", bridge: false });
-      expect(renderRichText(null)).toBe("");
-      expect(spy)
-        .toBeCalledWith(`null is not a valid Richtext object. This might be because the value of the richtext field is empty.
-    
-  For more info about the richtext object check https://github.com/storyblok/storyblok-js#rendering-rich-text`);
-    });
-    it("should return an empty string when the value it's an empty string", () => {
+      expect(isRichTextEmpty(richTextFixture)).toBe(false);
+    })
+    it("should return true when passing a falsy value", () => {
       storyblokInit({ accessToken: "wANpEQEsMYGOwLxwXQ76Ggtt", bridge: false });
-      expect(renderRichText(null)).toBe("");
+      expect(isRichTextEmpty("")).toBe(true);
+    })
+  })
+
+  describe("Rich Text Resolver", () => {
+    it("should return the rendered HTML when passing a valid RichText object", () => {
+      storyblokInit({ accessToken: "wANpEQEsMYGOwLxwXQ76Ggtt", bridge: false });
+      expect(renderRichText(richTextFixture)).toMatchSnapshot();
     });
   });
 });