Skip to content

Commit

Permalink
fix: add missing RichTextSchema and docs
Browse files Browse the repository at this point in the history
  • Loading branch information
alexjoverm committed Sep 7, 2022
1 parent 994ac5d commit 8682bb7
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 1 deletion.
46 changes: 46 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,52 @@ You can easily render rich text by using the `renderRichText` function that come
</script>
```

You can set a **custom Schema and component resolver globally** at init time by using the `richText` init option:

```js
import { RichTextSchema, StoryblokVue } from "@storyblok/vue";
import cloneDeep from "clone-deep";

const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
// ... and edit the nodes and marks, or add your own.
// Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/master/source/schema.js

app.use(StoryblokVue, {
accessToken: "YOUR_ACCESS_TOKEN",
use: [apiPlugin],
richText: {
schema: mySchema,
resolver: (component, blok) => {
switch (component) {
case "my-custom-component":
return `<div class="my-component-class">${blok.text}</div>`;
default:
return "Resolver not defined";
}
},
},
});
```

You can also set a **custom Schema and component resolver only once** by passing the options as the second parameter to `renderRichText` function:

```js
import { renderRichText } from "@storyblok/vue";

renderRichText(blok.richTextField, {
schema: mySchema,
resolver: (component, blok) => {
switch (component) {
case "my-custom-component":
return `<div class="my-component-class">${blok.text}</div>`;
break;
default:
return `Component ${component} not found`;
}
},
});
```

#### Long Form

##### 1. Fetching Content
Expand Down
7 changes: 6 additions & 1 deletion lib/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,12 @@ export const useStoryblokApi = (): StoryblokClient => {
return storyblokApiInstance;
};

export { useStoryblokBridge, apiPlugin, renderRichText } from "@storyblok/js";
export {
useStoryblokBridge,
apiPlugin,
renderRichText,
RichTextSchema,
} from "@storyblok/js";
import StoryblokComponent from "./StoryblokComponent.vue";
export { default as StoryblokComponent } from "./StoryblokComponent.vue";

Expand Down

0 comments on commit 8682bb7

Please sign in to comment.