feat: new richtext composable and component

storyblok · Aug 1, 2024 · d5916c8 · d5916c8
1 parent bdb8191
commit d5916c8
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 51 deletions.
diff --git a/lib/components/SbRichText.vue b/lib/components/SbRichText.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { VNode } from "vue";
+import type { SbRichTextNode } from "@storyblok/vue";
 import { useSbRichText } from "../composables/useRichText";
 import type { SbRichTextProps } from "../types";
 
@@ -8,7 +10,7 @@ const { render } = useSbRichText({
   resolvers: props.resolvers,
 });
 
-const root = () => render(props.doc);
+const root = () => render(props.doc as SbRichTextNode<VNode>);
 </script>
 
 <template>

diff --git a/lib/composables/useRichText.ts b/lib/composables/useRichText.ts
@@ -3,9 +3,9 @@ import { createTextVNode, h } from "vue";
 import type {
   SbRichTextNode,
   SbRichTextNodeResolver,
-  SbRichTextOptions,
-} from "@storyblok/richtext";
-import { BlockTypes, richTextResolver } from "@storyblok/richtext";
+  newSbRichTextOptions,
+} from "@storyblok/js";
+import { BlockTypes, richTextResolver } from "@storyblok/js";
 import StoryblokComponent from "../StoryblokComponent.vue";
 
 const componentResolver: SbRichTextNodeResolver<VNode> = (
@@ -21,8 +21,8 @@ const componentResolver: SbRichTextNodeResolver<VNode> = (
   );
 };
 
-export function useSbRichText(options: SbRichTextOptions<VNode>) {
-  const mergedOptions: SbRichTextOptions<VNode> = {
+export function useSbRichText(options: newSbRichTextOptions<VNode>) {
+  const mergedOptions: newSbRichTextOptions<VNode> = {
     renderFn: h,
     textFn: createTextVNode,
     resolvers: {

diff --git a/lib/index.ts b/lib/index.ts
@@ -16,24 +16,22 @@ import type {
 } from "./types";
 
 export {
+  useStoryblokBridge,
+  apiPlugin,
+  renderRichText,
+  RichTextSchema,
+  RichTextResolver,
   BlockTypes,
   MarkTypes,
   richTextResolver,
   TextTypes,
+  type SbRichTextDocumentNode,
   type SbRichTextNodeTypes,
   type SbRichTextNode,
   type SbRichTextOptions,
   type SbRichTextResolvers,
   type SbRichTextNodeResolver,
   type SbRichTextImageOptimizationOptions,
-} from "@storyblok/richtext";
-
-export {
-  useStoryblokBridge,
-  apiPlugin,
-  renderRichText,
-  RichTextSchema,
-  RichTextResolver,
 } from "@storyblok/js";
 
 import StoryblokComponent from "./StoryblokComponent.vue";

diff --git a/lib/package.json b/lib/package.json
@@ -25,8 +25,7 @@
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "dependencies": {
-    "@storyblok/js": "^3.0.8",
-    "@storyblok/richtext": "^0.3.0"
+    "@storyblok/js": "^3.1.0-next.2"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

diff --git a/lib/types.ts b/lib/types.ts
@@ -1,6 +1,9 @@
 import type { SbBlokData, SbSDKOptions } from "@storyblok/js";
 import type StoryblokComponent from "./StoryblokComponent.vue";
-import type { SbRichTextNode, SbRichTextResolvers } from "@storyblok/richtext";
+import type {
+  SbRichTextDocumentNode,
+  SbRichTextResolvers,
+} from "@storyblok/richtext";
 import type { VNode } from "vue";
 
 declare module "@vue/runtime-core" {
@@ -55,6 +58,6 @@ export interface SbComponentProps {
 }
 
 export interface SbRichTextProps {
-  doc: SbRichTextNode<VNode>;
+  doc: SbRichTextDocumentNode;
   resolvers?: SbRichTextResolvers<VNode>;
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/playground/pages/Home.vue b/playground/pages/Home.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { onMounted, ref, VNode } from "vue";
+import { onMounted, ref } from "vue";
 import {
   useStoryblokBridge,
   useStoryblokApi,
   SbRichText,
-  SbRichTextNode,
+  SbRichTextDocumentNode,
   BlockTypes,
 } from "@storyblok/vue";
 
@@ -22,7 +22,7 @@ onMounted(() => {
   useStoryblokBridge(story.value.id, (evStory) => (story.value = evStory));
 });
 
-const doc: SbRichTextNode<VNode> = {
+const doc: SbRichTextDocumentNode = {
   [BlockTypes.DOCUMENT]: "doc",
   content: [
     {