@storyblok/astro 6.2.0 → 7.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -49
- package/dist/index.d.ts +2 -2
- package/dist/lib/helpers.d.ts +2 -3
- package/dist/storyblok-astro.es.js +403 -796
- package/dist/storyblok-astro.umd.js +12 -35
- package/dist/types.d.ts +3 -4
- package/package.json +42 -59
package/README.md
CHANGED
|
@@ -371,65 +371,18 @@ const renderedRichText = richTextResolver({
|
|
|
371
371
|
|
|
372
372
|
To learn more about the new `richTextResolver` API, please refer to the [storyblok-richtext docs](https://github.com/storyblok/richtext).
|
|
373
373
|
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
## Legacy Rendering Rich Text
|
|
377
|
-
|
|
378
|
-
> [!WARNING]
|
|
379
|
-
> The legacy `richTextResolver` is soon to be deprecated. We recommend migrating to the new approach described above instead.
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
> [!NOTE]
|
|
383
|
-
> While @storyblok/astro provides basic richtext rendering capabilities, for advanced use cases, it is highly recommended to use [storyblok-rich-text-astro-renderer](https://github.com/NordSecurity/storyblok-rich-text-astro-renderer).
|
|
384
|
-
|
|
385
|
-
You can easily render rich text by using either the `renderRichText` function included in `@storyblok/astro`.
|
|
386
|
-
Use `renderRichText`, which only supports parsing and returning native HTML tags, if you are not embedding `bloks` in your rich text. Then you can use the [`set:html` directive](https://docs.astro.build/en/reference/directives-reference/#sethtml):
|
|
374
|
+
Or use the `renderRichText` function to render rich text.
|
|
387
375
|
|
|
388
376
|
```jsx
|
|
389
377
|
---
|
|
390
378
|
import { renderRichText } from "@storyblok/astro";
|
|
391
379
|
|
|
392
|
-
const
|
|
393
|
-
|
|
394
|
-
const renderedRichText = renderRichText(blok.text)
|
|
380
|
+
const renderedRichText = renderRichText(data, options);
|
|
395
381
|
---
|
|
396
382
|
|
|
397
383
|
<div set:html={renderedRichText}></div>
|
|
398
384
|
```
|
|
399
385
|
|
|
400
|
-
You can also set a **custom Schema and component resolver** by passing the options as the second parameter of the `renderRichText` function:
|
|
401
|
-
|
|
402
|
-
```jsx
|
|
403
|
-
import { RichTextSchema, renderRichText } from "@storyblok/astro";
|
|
404
|
-
import cloneDeep from "clone-deep";
|
|
405
|
-
|
|
406
|
-
const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
|
|
407
|
-
// ... and edit the nodes and marks, or add your own.
|
|
408
|
-
// Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/v4/source/schema.js
|
|
409
|
-
|
|
410
|
-
const { blok } = Astro.props;
|
|
411
|
-
|
|
412
|
-
const renderedRichText = renderRichText(blok.text, {
|
|
413
|
-
schema: mySchema,
|
|
414
|
-
resolver: (component, blok) => {
|
|
415
|
-
switch (component) {
|
|
416
|
-
case "my-custom-component":
|
|
417
|
-
return `<div class="my-component-class">${blok.text}</div>`;
|
|
418
|
-
break;
|
|
419
|
-
default:
|
|
420
|
-
return `Component ${component} not found`;
|
|
421
|
-
}
|
|
422
|
-
},
|
|
423
|
-
});
|
|
424
|
-
```
|
|
425
|
-
|
|
426
|
-
### RichTextRenderer `deprecated`
|
|
427
|
-
|
|
428
|
-
~~Use the `<RichTextRenderer />` component if you are embedding `bloks` in your rich text:~~
|
|
429
|
-
|
|
430
|
-
> [!IMPORTANT]
|
|
431
|
-
> As of `@storyblok/astro` v5, the `<RichTextRenderer />` component has been removed. Use the `renderRichText` function instead.
|
|
432
|
-
|
|
433
386
|
## API
|
|
434
387
|
|
|
435
388
|
### useStoryblokApi()
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { default as storyblokIntegration } from './lib/storyblok-integration';
|
|
2
|
-
export { getLiveStory,
|
|
2
|
+
export { getLiveStory, useStoryblokApi } from './lib/helpers';
|
|
3
3
|
export { handleStoryblokMessage } from './live-preview/handleStoryblokMessage';
|
|
4
4
|
export * from './types';
|
|
5
5
|
export { toCamelCase } from './utils/toCamelCase';
|
|
6
|
-
export { loadStoryblokBridge,
|
|
6
|
+
export { loadStoryblokBridge, renderRichText, richTextResolver, storyblokEditable, } from '@storyblok/js';
|
|
7
7
|
export { storyblokIntegration as storyblok };
|
package/dist/lib/helpers.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ISbStoryData, StoryblokBridgeConfigV2, StoryblokClient } from '../types';
|
|
2
2
|
import { AstroGlobal } from 'astro';
|
|
3
3
|
export declare function useStoryblokApi(): StoryblokClient;
|
|
4
|
-
export declare function getLiveStory(Astro: Readonly<AstroGlobal>): Promise<ISbStoryData<import('
|
|
4
|
+
export declare function getLiveStory(Astro: Readonly<AstroGlobal>): Promise<ISbStoryData<import('storyblok-js-client').ISbComponentType<string> & {
|
|
5
5
|
[index: string]: any;
|
|
6
6
|
}> | null>;
|
|
7
|
-
export declare function renderRichText(data?: ISbRichtext, options?: SbRichTextOptions): string | undefined;
|
|
8
7
|
export declare function initStoryblokBridge(config: boolean | StoryblokBridgeConfigV2): string;
|