Merge pull request #538 from storyblok/bugfix/new-sbrichtextoptions-t…

…ype-is-not-generic

fix: new sbrichtextoptions type is not generic

.github/ISSUE_TEMPLATE/config.yml

@@ -1 +1 @@
-blank_issues_enabled: false
+blank_issues_enabled: false

.github/sb-templates/config.yml

@@ -1 +1 @@
-blank_issues_enabled: false
+blank_issues_enabled: false

README.md

@@ -31,6 +31,7 @@
 </p>
 
 ## Kickstart a new project
+
 Are you eager to dive into coding? **[Follow these steps to kickstart a new project with Storyblok and a JavaScript frontend framework](https://www.storyblok.com/technologies?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js)**, and get started in just a few minutes!
 
 ## Installation
@@ -144,7 +145,7 @@ You can pass [Bridge options](https://www.storyblok.com/docs/Guides/storyblok-la
 ```js
 useStoryblokBridge(story.id, (story) => (state.story = story), {
   resolveRelations: ["Article.author"],
-  resolveLinks: "url"
+  resolveLinks: "url",
 });
 ```
 

lib/cypress.config.js

@@ -1,14 +1,16 @@
-const { defineConfig } = require('cypress')
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const { defineConfig } = require("cypress");
 
 module.exports = defineConfig({
   integration: {
-    testFiles: '**/*.spec.js',
+    testFiles: "**/*.spec.js",
   },
   e2e: {
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.js')(on, config)
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      return require("./cypress/plugins/index.js")(on, config);
     },
   },
-})
+});

lib/cypress/e2e/index.cy.js

@@ -1,4 +1,4 @@
-global.fetch.bind(global)
+global.fetch.bind(global);
 
 describe("@storyblok/js", () => {
   describe("RichText", () => {

lib/fixtures/richTextObject.json

@@ -268,4 +268,4 @@
       ]
     }
   ]
-}
+}

lib/index.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line
+import { type SbRichTextOptions as stdSbRichTextOptions } from "@storyblok/richtext";
 import { loadBridge } from "./modules/bridge";
 import {
   SbSDKOptions,
@@ -10,28 +12,23 @@ import {
   SbRichTextOptions,
 } from "./types";
 
-import { RichtextResolver } from "storyblok-js-client";
-
-import { type SbRichTextOptions as stdSbRichTextOptions} from "@storyblok/richtext";
-
+import { ISbConfig, RichtextResolver } from "storyblok-js-client";
 
 let richTextResolver;
 
 let bridgeLatest = "https://app.storyblok.com/f/storyblok-v2-latest.js";
 
 export const useStoryblokBridge = <
-  T extends StoryblokComponentType<string> = any
+  T extends StoryblokComponentType<string> = any,
 >(
-  id: Number,
+  id: number,
   cb: (newStory: ISbStoryData<T>) => void,
   options: StoryblokBridgeConfigV2 = {}
 ) => {
   const isServer = typeof window === "undefined";
   const isBridgeLoaded =
     !isServer && typeof window.storyblokRegisterEvent !== "undefined";
-  const storyId = new URL(window.location?.href).searchParams.get(
-    "_storyblok"
-  );
+  const storyId = new URL(window.location?.href).searchParams.get("_storyblok");
   const inStory = +storyId === id;
 
   if (!isBridgeLoaded || !inStory) {
@@ -65,29 +62,38 @@ export const storyblokInit = (pluginOptions: SbSDKOptions = {}) => {
     use = [],
     apiOptions = {},
     richText = {},
-    bridgeUrl
+    bridgeUrl,
   } = pluginOptions;
 
   apiOptions.accessToken = apiOptions.accessToken || accessToken;
 
   // Initialize plugins
   const options = { bridge, apiOptions };
+  // eslint-disable-next-line
   let result: SbInitResult = {};
 
-  use.forEach((pluginFactory: Function) => {
-    result = { ...result, ...pluginFactory(options) };
-  });
+  use.forEach(
+    (
+      pluginFactory: (options: any) => {
+        bridge: boolean;
+        apiOptions: ISbConfig;
+      }
+    ) => {
+      result = { ...result, ...pluginFactory(options) };
+    }
+  );
 
   if (bridgeUrl) {
     bridgeLatest = bridgeUrl;
   }
 
   /*
-  ** Load bridge if you are on the Visual Editor
-  ** For more security: https://www.storyblok.com/faq/how-to-verify-the-preview-query-parameters-of-the-visual-editor
-  */
+   ** Load bridge if you are on the Visual Editor
+   ** For more security: https://www.storyblok.com/faq/how-to-verify-the-preview-query-parameters-of-the-visual-editor
+   */
   const isServer = typeof window === "undefined";
-  const inEditor = !isServer && window.location?.search?.includes('_storyblok_tk');
+  const inEditor =
+    !isServer && window.location?.search?.includes("_storyblok_tk");
   if (bridge !== false && inEditor) {
     loadBridge(bridgeLatest);
   }
@@ -117,8 +123,14 @@ const setComponentResolver = (resolver, resolveFn) => {
 };
 
 export const isRichTextEmpty = (data?: ISbRichtext) => {
-  return !data || !data?.content.some((node) => node.content || node.type === 'blok' || node.type === 'horizontal_rule');
-}
+  return (
+    !data ||
+    !data?.content.some(
+      (node) =>
+        node.content || node.type === "blok" || node.type === "horizontal_rule"
+    )
+  );
+};
 
 export const renderRichText = (
   data?: ISbRichtext,
@@ -167,7 +179,10 @@ export * from "./types";
  * This is a temporaly class to avoid type collision with the legacy richtext resolver.
  * It will become ~~`newSbRichTextOptions`~~ -> `SbRichTextOptions` on v4.x
  */
-export type newSbRichTextOptions = stdSbRichTextOptions;
+export type newSbRichTextOptions<
+  T = string,
+  S = (tag: string, attrs: Record<string, any>, text: string) => T,
+> = stdSbRichTextOptions<T, S>;
 
 // New Richtext Resolver
 export {
@@ -181,4 +196,4 @@ export {
   type SbRichTextResolvers,
   type SbRichTextNodeResolver,
   type SbRichTextImageOptimizationOptions,
-} from "@storyblok/richtext"
+} from "@storyblok/richtext";

lib/modules/editable.ts

@@ -17,7 +17,7 @@ export default (blok: SbBlokData) => {
       };
     }
 
-    return {};    
+    return {};
   } catch {
     return {};
   }

lib/tests/index.test.js

@@ -72,18 +72,18 @@ describe("@storyblok/js", () => {
     it("should return true when passing an empty or invalid RichText object", () => {
       storyblokInit({ accessToken: "wANpEQEsMYGOwLxwXQ76Ggtt", bridge: false });
       expect(isRichTextEmpty(emptyRichTextFixture)).toBe(true);
-    })
+    });
     it("should return false when passing a valid RichText object", () => {
       storyblokInit({ accessToken: "wANpEQEsMYGOwLxwXQ76Ggtt", bridge: false });
       expect(isRichTextEmpty(richTextFixture)).toBe(false);
-    })
+    });
     it("should return true when passing a falsy value", () => {
       storyblokInit({ accessToken: "wANpEQEsMYGOwLxwXQ76Ggtt", bridge: false });
       expect(isRichTextEmpty("")).toBe(true);
-    })
-  })
+    });
+  });
 
-  // TODO: This might change when legacy rich text resolver is removed and 
+  // 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", () => {

lib/tests/setup.js

@@ -1 +1 @@
-import 'isomorphic-fetch'
+import "isomorphic-fetch";