Merge pull request #558 from storyblok/feature/PRO-423-add-new-richtext

feat: pro 423 add new richtext

lib/index.ts

@@ -90,6 +90,7 @@ export const storyblokInit = (pluginOptions: SbSDKOptions = {}) => {
   }
 
   // Rich Text resolver
+  // TODO: replace with @storyblok/richtext package on v4.x
   richTextResolver = new RichtextResolver(richText.schema);
   if (richText.resolver) {
     setComponentResolver(richTextResolver, richText.resolver);
@@ -134,12 +135,13 @@ export const renderRichText = (
   }
 
   if (options) {
+    // TODO: replace with @storyblok/richtext package on v4.x
     localResolver = new RichtextResolver(options.schema);
     if (options.resolver) {
       setComponentResolver(localResolver, options.resolver);
     }
   }
-
+  // NOTE: This will warn the user about deprecation of legacy Richtext when https://github.com/storyblok/storyblok-js-client/pull/845 is merged
   return localResolver.render(data);
 };
 
@@ -157,3 +159,18 @@ export {
 
 // Reexport all types so users can have access to them
 export * from "./types";
+
+// New Richtext Resolver
+export {
+  BlockTypes,
+  MarkTypes,
+  richTextResolver,
+  TextTypes,
+  type StoryblokRichTextOptions,
+  type StoryblokRichTextDocumentNode,
+  type StoryblokRichTextNodeTypes,
+  type StoryblokRichTextNode,
+  type StoryblokRichTextResolvers,
+  type StoryblokRichTextNodeResolver,
+  type StoryblokRichTextImageOptimizationOptions,
+} from "@storyblok/richtext"

lib/package.json

@@ -28,6 +28,7 @@
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "dependencies": {
+    "@storyblok/richtext": "^2.0.0",
     "storyblok-js-client": "^6.9.0"
   },
   "devDependencies": {

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

@@ -1,3 +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 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><s>strikethrough</s></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>"`;
+exports[`@storyblok/js > Legacy 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><s>strikethrough</s></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>"`;

lib/tests/index.test.js

@@ -83,7 +83,9 @@ describe("@storyblok/js", () => {
     })
   })
 
-  describe("Rich Text Resolver", () => {
+  // TODO: This might change when legacy rich text resolver is removed and 
+  // the new rich text resolver is implemented instead
+  describe("Legacy Rich Text Resolver", () => {
     it("should return the rendered HTML when passing a valid RichText object", () => {
       storyblokInit({ accessToken: "wANpEQEsMYGOwLxwXQ76Ggtt", bridge: false });
       expect(renderRichText(richTextFixture)).toMatchSnapshot();

package.json

@@ -24,7 +24,7 @@
     "@tsconfig/recommended": "^1.0.7",
     "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.1.0",
-    "husky": "^9.1.5",
+    "husky": "^9.0.11",
     "lint-staged": "^15.2.9",
     "prettier": "^3.3.3"
   },

playground/index.html

@@ -31,6 +31,9 @@
     >
       renderRichTextWithOptions
     </button>
+    <button class="render-new-rich-text" onclick="newRichTextResolver()">
+      newRichTextRenderer
+    </button>
     <h3>Rich Text Renderer</h3>
     <div id="rich-text-container"></div>
     <script type="module" src="/main.ts"></script>

playground/main.ts

@@ -4,6 +4,8 @@ import {
   renderRichText,
   useStoryblokBridge,
   apiPlugin,
+  richTextResolver,
+  StoryblokRichTextOptions
 } from "@storyblok/js";
 import richTextFixture from "../lib/fixtures/richTextObject.json";
 
@@ -43,6 +45,7 @@ declare global {
     initCustomRichText: any;
     renderRichText: any;
     renderRichTextWithOptions: any;
+    newRichTextResolver: any
   }
 }
 
@@ -104,3 +107,28 @@ window.renderRichTextWithOptions = () => {
 window.loadStoryblokBridgeScript = () => {
   loadStoryblokBridge();
 };
+
+window.newRichTextResolver = () => {
+  const options: StoryblokRichTextOptions = {
+    resolvers: {
+      custom_link: (node) => {
+        const attrs = { ...node.attrs };
+
+        return {
+          tag: [
+            {
+              tag: "a",
+              attrs: attrs,
+            },
+          ],
+        };
+      },
+    }
+  }
+  const html = richTextResolver(options).render(richTextFixture as any);
+  const richTextContainer = document.getElementById(
+    "rich-text-container"
+  ) as any;
+
+  richTextContainer.innerHTML = html;
+}