From 666e83f947efd6fbd5b9401401361daa45fd25e4 Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Wed, 31 Jul 2024 10:41:05 +0200 Subject: [PATCH 01/10] feat: add new `@storyblok/richtext` exports with retro-compatibilty with legacy `RichTextResolver` --- lib/index.ts | 26 +++++++++++++++++++++++++- lib/package.json | 1 + package-lock.json | 31 +++++++++++++++++++++++++++++++ 3 files changed, 57 insertions(+), 1 deletion(-) diff --git a/lib/index.ts b/lib/index.ts index b1c0422..578e532 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -12,6 +12,28 @@ import { import { RichtextResolver } from "storyblok-js-client"; +import { type SbRichTextOptions as stdSbRichTextOptions} from "@storyblok/richtext"; + +/** + * 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; + +// New Richtext Resolver +export { + BlockTypes, + MarkTypes, + richTextResolver, + TextTypes, + type SbRichTextDocumentNode, + type SbRichTextNodeTypes, + type SbRichTextNode, + type SbRichTextResolvers, + type SbRichTextNodeResolver, + type SbRichTextImageOptimizationOptions, +} from "@storyblok/richtext" + let richTextResolver; let bridgeLatest = "https://app.storyblok.com/f/storyblok-v2-latest.js"; @@ -90,6 +112,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 +157,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); }; diff --git a/lib/package.json b/lib/package.json index 9aad7b0..6089b8e 100644 --- a/lib/package.json +++ b/lib/package.json @@ -28,6 +28,7 @@ "prepublishOnly": "npm run build && cp ../README.md ./" }, "dependencies": { + "@storyblok/richtext": "^1.0.0", "storyblok-js-client": "^6.7.2" }, "devDependencies": { diff --git a/package-lock.json b/package-lock.json index e755ced..51f9f4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "name": "@storyblok/js", "version": "2.0.6", "dependencies": { + "@storyblok/richtext": "^1.0.0", "storyblok-js-client": "^6.7.2" }, "devDependencies": { @@ -1775,6 +1776,14 @@ "resolved": "playground", "link": true }, + "node_modules/@storyblok/richtext": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@storyblok/richtext/-/richtext-1.0.0.tgz", + "integrity": "sha512-zzdgyJuoOTw9jldtj1/0+S1952NnherH7M5iXQRq7ehg7RDz01RGZEBSwcwrDmkXjfa6i7yaZrBdqD3BLUb34A==", + "dependencies": { + "consola": "^3.2.3" + } + }, "node_modules/@storyblok/vue-playground": { "resolved": "playground-vue", "link": true @@ -2751,6 +2760,14 @@ "dev": true, "license": "MIT" }, + "node_modules/consola": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz", + "integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==", + "engines": { + "node": "^14.18.0 || >=16.10.0" + } + }, "node_modules/conventional-changelog-angular": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-7.0.0.tgz", @@ -8000,6 +8017,7 @@ "@storyblok/js": { "version": "file:lib", "requires": { + "@storyblok/richtext": "^1.0.0", "@tsconfig/recommended": "^1.0.6", "cypress": "^13.7.3", "eslint-plugin-cypress": "^2.15.1", @@ -8019,6 +8037,14 @@ "vite": "^5.2.8" } }, + "@storyblok/richtext": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@storyblok/richtext/-/richtext-1.0.0.tgz", + "integrity": "sha512-zzdgyJuoOTw9jldtj1/0+S1952NnherH7M5iXQRq7ehg7RDz01RGZEBSwcwrDmkXjfa6i7yaZrBdqD3BLUb34A==", + "requires": { + "consola": "^3.2.3" + } + }, "@storyblok/vue-playground": { "version": "file:playground-vue", "requires": { @@ -8724,6 +8750,11 @@ "version": "0.0.1", "dev": true }, + "consola": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/consola/-/consola-3.2.3.tgz", + "integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==" + }, "conventional-changelog-angular": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/conventional-changelog-angular/-/conventional-changelog-angular-7.0.0.tgz", From ed74a525856f55e97262f854eb725d76758804df Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Wed, 31 Jul 2024 13:35:22 +0200 Subject: [PATCH 02/10] feat: storyblok js-client next --- lib/package.json | 2 +- package-lock.json | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/lib/package.json b/lib/package.json index 6089b8e..dba8388 100644 --- a/lib/package.json +++ b/lib/package.json @@ -29,7 +29,7 @@ }, "dependencies": { "@storyblok/richtext": "^1.0.0", - "storyblok-js-client": "^6.7.2" + "storyblok-js-client": "^6.9.0-next.1" }, "devDependencies": { "@tsconfig/recommended": "^1.0.6", diff --git a/package-lock.json b/package-lock.json index 51f9f4d..1721378 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "version": "2.0.6", "dependencies": { "@storyblok/richtext": "^1.0.0", - "storyblok-js-client": "^6.7.2" + "storyblok-js-client": "^6.9.0-next.1" }, "devDependencies": { "@tsconfig/recommended": "^1.0.6", @@ -6108,9 +6108,9 @@ "dev": true }, "node_modules/storyblok-js-client": { - "version": "6.7.2", - "resolved": "https://registry.npmjs.org/storyblok-js-client/-/storyblok-js-client-6.7.2.tgz", - "integrity": "sha512-5+cCZQhvIPSP5fin7jMUyyiAfV3FSbhH2q0YmDpb8NqxsY0pog6r+igHshVXNHed5yB5AZcVn0Mduao0X1MdBA==" + "version": "6.9.0-next.1", + "resolved": "https://registry.npmjs.org/storyblok-js-client/-/storyblok-js-client-6.9.0-next.1.tgz", + "integrity": "sha512-70O9TtuRN0O3V4ZmJrQ5qKCT4nGTIQLEEWvJRLfhv84AbMiLGyKJy9rglvhS0Ijjx4WdlYAqTG/b2ujuABhBlg==" }, "node_modules/stream-combiner": { "version": "0.0.4", @@ -8024,7 +8024,7 @@ "eslint-plugin-jest": "^28.2.0", "isomorphic-fetch": "^3.0.0", "start-server-and-test": "^2.0.3", - "storyblok-js-client": "^6.7.2", + "storyblok-js-client": "^6.9.0-next.1", "vite": "^5.2.8", "vitest": "^1.5.0" } @@ -10968,9 +10968,9 @@ "dev": true }, "storyblok-js-client": { - "version": "6.7.2", - "resolved": "https://registry.npmjs.org/storyblok-js-client/-/storyblok-js-client-6.7.2.tgz", - "integrity": "sha512-5+cCZQhvIPSP5fin7jMUyyiAfV3FSbhH2q0YmDpb8NqxsY0pog6r+igHshVXNHed5yB5AZcVn0Mduao0X1MdBA==" + "version": "6.9.0-next.1", + "resolved": "https://registry.npmjs.org/storyblok-js-client/-/storyblok-js-client-6.9.0-next.1.tgz", + "integrity": "sha512-70O9TtuRN0O3V4ZmJrQ5qKCT4nGTIQLEEWvJRLfhv84AbMiLGyKJy9rglvhS0Ijjx4WdlYAqTG/b2ujuABhBlg==" }, "stream-combiner": { "version": "0.0.4", From 7a30413c7d1ef45202ecd8ad62b69ed62e510573 Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Wed, 31 Jul 2024 15:14:58 +0200 Subject: [PATCH 03/10] chore(tests): marked todo on legacy richtext resolver test --- lib/tests/index.test.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/tests/index.test.js b/lib/tests/index.test.js index fd09e33..ffa1d0b 100644 --- a/lib/tests/index.test.js +++ b/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(); From 8324e10b12eb480ec643ab68ec6ab317faf63fd7 Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Wed, 31 Jul 2024 15:21:19 +0200 Subject: [PATCH 04/10] chore(playground): added example with new richtext resolver --- playground/index.html | 3 +++ playground/main.ts | 28 ++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+) diff --git a/playground/index.html b/playground/index.html index 5b629ce..5d333ca 100644 --- a/playground/index.html +++ b/playground/index.html @@ -31,6 +31,9 @@ > renderRichTextWithOptions +

Rich Text Renderer

diff --git a/playground/main.ts b/playground/main.ts index d4c855a..79f0f2d 100644 --- a/playground/main.ts +++ b/playground/main.ts @@ -4,6 +4,8 @@ import { renderRichText, useStoryblokBridge, apiPlugin, + richTextResolver, + newSbRichTextOptions } 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: newSbRichTextOptions = { + 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; +} From 53d1b43c19cfb5ad25ed12d5a3a5ae181875cdcb Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Wed, 31 Jul 2024 15:27:58 +0200 Subject: [PATCH 05/10] chore: move exports to end of file --- lib/index.ts | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/lib/index.ts b/lib/index.ts index 578e532..e12b773 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -14,25 +14,6 @@ import { RichtextResolver } from "storyblok-js-client"; import { type SbRichTextOptions as stdSbRichTextOptions} from "@storyblok/richtext"; -/** - * 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; - -// New Richtext Resolver -export { - BlockTypes, - MarkTypes, - richTextResolver, - TextTypes, - type SbRichTextDocumentNode, - type SbRichTextNodeTypes, - type SbRichTextNode, - type SbRichTextResolvers, - type SbRichTextNodeResolver, - type SbRichTextImageOptimizationOptions, -} from "@storyblok/richtext" let richTextResolver; @@ -181,3 +162,23 @@ export { // Reexport all types so users can have access to them 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; + +// New Richtext Resolver +export { + BlockTypes, + MarkTypes, + richTextResolver, + TextTypes, + type SbRichTextDocumentNode, + type SbRichTextNodeTypes, + type SbRichTextNode, + type SbRichTextResolvers, + type SbRichTextNodeResolver, + type SbRichTextImageOptimizationOptions, +} from "@storyblok/richtext" From e2ffe864432f8c6aa51b4e486185291ad2cabdd5 Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Mon, 26 Aug 2024 16:03:10 +0200 Subject: [PATCH 06/10] =chore: update to stable js-client v6.9 --- lib/package.json | 2 +- package-lock.json | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/package.json b/lib/package.json index 5dba97b..e337b3d 100644 --- a/lib/package.json +++ b/lib/package.json @@ -29,7 +29,7 @@ }, "dependencies": { "@storyblok/richtext": "^1.0.0", - "storyblok-js-client": "^6.9.0-next.1" + "storyblok-js-client": "^6.9.0" }, "devDependencies": { "@tsconfig/recommended": "^1.0.7", diff --git a/package-lock.json b/package-lock.json index d2843e3..7fc230c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,7 +28,7 @@ "version": "2.0.6", "dependencies": { "@storyblok/richtext": "^1.0.0", - "storyblok-js-client": "^6.9.0-next.1" + "storyblok-js-client": "^6.9.0" }, "devDependencies": { "@tsconfig/recommended": "^1.0.7", @@ -6185,9 +6185,9 @@ "dev": true }, "node_modules/storyblok-js-client": { - "version": "6.9.0-next.1", - "resolved": "https://registry.npmjs.org/storyblok-js-client/-/storyblok-js-client-6.9.0-next.1.tgz", - "integrity": "sha512-70O9TtuRN0O3V4ZmJrQ5qKCT4nGTIQLEEWvJRLfhv84AbMiLGyKJy9rglvhS0Ijjx4WdlYAqTG/b2ujuABhBlg==" + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/storyblok-js-client/-/storyblok-js-client-6.9.0.tgz", + "integrity": "sha512-8X+NYa9RWxX61iWCCjB32qS3aBTEdzqwBN/vthFpRpMOnwXEtBDNaBpjTz8Orrefu0gKJGXLZtdqWidVe9OV0Q==" }, "node_modules/stream-combiner": { "version": "0.0.4", From 04738f4a8f7a7083846b2a40cb0f959648581233 Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Tue, 27 Aug 2024 13:30:02 +0200 Subject: [PATCH 07/10] feat: use new type naming convention to avoid collision --- lib/index.ts | 22 +++++++--------------- lib/package.json | 2 +- package-lock.json | 8 ++++---- 3 files changed, 12 insertions(+), 20 deletions(-) diff --git a/lib/index.ts b/lib/index.ts index e12b773..c957115 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -12,9 +12,6 @@ import { import { RichtextResolver } from "storyblok-js-client"; -import { type SbRichTextOptions as stdSbRichTextOptions} from "@storyblok/richtext"; - - let richTextResolver; let bridgeLatest = "https://app.storyblok.com/f/storyblok-v2-latest.js"; @@ -163,22 +160,17 @@ export { // Reexport all types so users can have access to them 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; - // New Richtext Resolver export { BlockTypes, MarkTypes, richTextResolver, TextTypes, - type SbRichTextDocumentNode, - type SbRichTextNodeTypes, - type SbRichTextNode, - type SbRichTextResolvers, - type SbRichTextNodeResolver, - type SbRichTextImageOptimizationOptions, + type StoryblokRichTextOptions, + type StoryblokRichTextDocumentNode, + type StoryblokRichTextNodeTypes, + type StoryblokRichTextNode, + type StoryblokRichTextResolvers, + type StoryblokRichTextNodeResolver, + type StoryblokRichTextImageOptimizationOptions, } from "@storyblok/richtext" diff --git a/lib/package.json b/lib/package.json index e337b3d..192a4a3 100644 --- a/lib/package.json +++ b/lib/package.json @@ -28,7 +28,7 @@ "prepublishOnly": "npm run build && cp ../README.md ./" }, "dependencies": { - "@storyblok/richtext": "^1.0.0", + "@storyblok/richtext": "^2.0.0", "storyblok-js-client": "^6.9.0" }, "devDependencies": { diff --git a/package-lock.json b/package-lock.json index 7fc230c..647ec60 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "name": "@storyblok/js", "version": "2.0.6", "dependencies": { - "@storyblok/richtext": "^1.0.0", + "@storyblok/richtext": "^2.0.0", "storyblok-js-client": "^6.9.0" }, "devDependencies": { @@ -1280,9 +1280,9 @@ "link": true }, "node_modules/@storyblok/richtext": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@storyblok/richtext/-/richtext-1.0.0.tgz", - "integrity": "sha512-zzdgyJuoOTw9jldtj1/0+S1952NnherH7M5iXQRq7ehg7RDz01RGZEBSwcwrDmkXjfa6i7yaZrBdqD3BLUb34A==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@storyblok/richtext/-/richtext-2.0.0.tgz", + "integrity": "sha512-yJm5BgWrCRGUdwZtviPgGno3rLXcnEvjK1bL1Ut4GmU1UOEVLC42m543EtrrOBVGDZdRPD9dK8ObgyHp6zNwqw==", "dependencies": { "consola": "^3.2.3" } From 2b253c78cc3e6987170a1ab3aa22f5daadc0b9da Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Tue, 27 Aug 2024 13:36:57 +0200 Subject: [PATCH 08/10] chore(tests): update snapshots --- lib/tests/__snapshots__/index.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/tests/__snapshots__/index.test.js.snap b/lib/tests/__snapshots__/index.test.js.snap index b33d8c4..5af99b8 100644 --- a/lib/tests/__snapshots__/index.test.js.snap +++ b/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`] = `"

Holain bold

paragraph after empty line

  • an item in a list

  • another item

  1. item in another list

  2. another item

this is a quote

some words after an <hr>

italic text

strikethrough

underlined

superscript

subscript

inline code

"`; +exports[`@storyblok/js > Legacy Rich Text Resolver > should return the rendered HTML when passing a valid RichText object 1`] = `"

Holain bold

paragraph after empty line

  • an item in a list

  • another item

  1. item in another list

  2. another item

this is a quote

some words after an <hr>

italic text

strikethrough

underlined

superscript

subscript

inline code

"`; From b78eb9eb13d5d221c22ffd7ed674c4e294d2e302 Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Tue, 27 Aug 2024 13:45:12 +0200 Subject: [PATCH 09/10] chore(e2e): fix test richtext --- playground/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playground/index.html b/playground/index.html index 5d333ca..0ad3f60 100644 --- a/playground/index.html +++ b/playground/index.html @@ -31,7 +31,7 @@ > renderRichTextWithOptions -

Rich Text Renderer

From 49a042d2c13be12f265fd648bdca1c161d82106d Mon Sep 17 00:00:00 2001 From: alvarosabu Date: Tue, 27 Aug 2024 14:48:48 +0200 Subject: [PATCH 10/10] chore(playground): use correct type import --- playground/main.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/playground/main.ts b/playground/main.ts index 79f0f2d..69b5dea 100644 --- a/playground/main.ts +++ b/playground/main.ts @@ -5,7 +5,7 @@ import { useStoryblokBridge, apiPlugin, richTextResolver, - newSbRichTextOptions + StoryblokRichTextOptions } from "@storyblok/js"; import richTextFixture from "../lib/fixtures/richTextObject.json"; @@ -109,7 +109,7 @@ window.loadStoryblokBridgeScript = () => { }; window.newRichTextResolver = () => { - const options: newSbRichTextOptions = { + const options: StoryblokRichTextOptions = { resolvers: { custom_link: (node) => { const attrs = { ...node.attrs };