Merge pull request #96 from storyblok/renderRichText

Feat: Render rich text

README.md

@@ -190,6 +190,16 @@ sbBridge.on(["input", "published", "change"], (event) => {
 });
 ```
 
+#### Rendering Rich Text
+
+You can easily render rich text by using the `renderRichText` function that comes with `@storyblok/js`:
+
+```js
+import { renderRichText } from "@storyblok/js";
+
+const renderedRichText = renderRichText(blok.richtext);
+```
+
 ## 🔗 Related Links
 
 - **[Storyblok Technology Hub](https://www.storyblok.com/technologies?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js)**: Storyblok integrates with every framework so that you are free to choose the best fit for your project. We prepared the technology hub so that you can find selected beginner tutorials, videos, boilerplates, and even cheatsheets all in one place.

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@storyblok/js Rich Text Resolver should return an empty string and warn in console when it's a falsy value 1`] = `
+Array [
+  Array [
+    "warn",
+    "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",
+  ],
+]
+`;
+
+exports[`@storyblok/js Rich Text Resolver should return the rendered HTML when passing a RichText object 1`] = `"<p>Experiamur igitur, inquit, etsi habet haec Stoicorum ratio difficilius quiddam et obscurius. Non enim iam stirpis bonum quaeret, sed animalis. <b>Quia dolori non voluptas contraria est, sed doloris privatio.</b> Quis enim confidit semper sibi illud stabile et firmum permansurum, quod fragile et caducum sit? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Hic ambiguo ludimur.</p>"`;

lib/__tests__/index.test.js

@@ -1,5 +1,12 @@
 import { getLog } from "jest-console";
-import { storyblokInit, apiPlugin, storyblokEditable } from "@storyblok/js";
+import {
+  storyblokInit,
+  apiPlugin,
+  storyblokEditable,
+  renderRichText,
+} from "@storyblok/js";
+
+import richTextFixture from "../fixtures/richTextObject.json";
 
 describe("@storyblok/js", () => {
   describe("Api", () => {
@@ -56,4 +63,17 @@ describe("@storyblok/js", () => {
       expect(editableResult["data-blok-uid"]).toBeDefined();
     });
   });
+
+  describe("Rich Text Resolver", () => {
+    it("should return the rendered HTML when passing a RichText object", () => {
+      expect(renderRichText(richTextFixture)).toMatchSnapshot();
+    });
+    it("should return an empty string and warn in console when it's a falsy value", () => {
+      expect(renderRichText(null)).toBe("");
+      expect(getLog().logs).toMatchSnapshot();
+    });
+    it("should return an empty string when the value it's an empty string", () => {
+      expect(renderRichText(null)).toBe("");
+    });
+  });
 });

lib/fixtures/richTextObject.json

@@ -0,0 +1,27 @@
+{
+	"type": "doc",
+	"content": [
+		{
+			"type": "paragraph",
+			"content": [
+				{
+					"text": "Experiamur igitur, inquit, etsi habet haec Stoicorum ratio difficilius quiddam et obscurius. Non enim iam stirpis bonum quaeret, sed animalis. ",
+					"type": "text"
+				},
+				{
+					"text": "Quia dolori non voluptas contraria est, sed doloris privatio.",
+					"type": "text",
+					"marks": [
+						{
+							"type": "bold"
+						}
+					]
+				},
+				{
+					"text": " Quis enim confidit semper sibi illud stabile et firmum permansurum, quod fragile et caducum sit? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Hic ambiguo ludimur.",
+					"type": "text"
+				}
+			]
+		}
+	]
+}

lib/index.ts

@@ -5,9 +5,14 @@ import {
   StoryblokBridgeV2,
   StoryData,
   SbInitResult,
+  Richtext,
   StoryblokComponentType
 } from "./types";
 
+import RichTextResolver from "storyblok-js-client/source/richTextResolver"
+
+const resolver = new RichTextResolver;
+
 const bridgeLatest = "https://app.storyblok.com/f/storyblok-v2-latest.js";
 
 export const useStoryblokBridge = <T extends StoryblokComponentType<string> = any>(
@@ -68,9 +73,20 @@ export const storyblokInit = (pluginOptions: SbSDKOptions = {}) => {
   return result;
 };
 
-export const loadStoryblokBridge = () => {
-  return loadBridge(bridgeLatest);
-};
+export const renderRichText = (text: Richtext) : string => {
+  if (text as any === '') {
+    return ""
+  }
+  else if(!text) {
+    console.warn(`${text} 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`)
+    return ""; 
+  }
+  return resolver.render(text)
+}
+
+export const loadStoryblokBridge = () => loadBridge(bridgeLatest)
 
 // Reexport all types so users can have access to them
 export * from "./types";