@storyblok/astro 9.0.12 → 10.0.0

package/dist/components/StoryblokComponent.astro

@@ -1,6 +1,6 @@
 ---
 import options from 'virtual:storyblok-options';
-import { toCamelCase, type SbBlokData } from '@storyblok/astro';
+import { toCamelCase, type SbBlokData } from '../';
 import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
 import { storyblokComponents } from 'virtual:import-storyblok-components';
 

package/dist/components/StoryblokRichText.astro

@@ -0,0 +1,14 @@
+---
+import { type SbRichTextInput, type SbAstroRichTextRenderContext, normalizeNodes } from '../';
+import RenderChildren from './richtext/RenderChildren.astro';
+
+interface Props extends SbAstroRichTextRenderContext {
+  document: SbRichTextInput;
+}
+
+const { document, components, optimizeImage } = Astro.props;
+
+const nodes = normalizeNodes(document);
+---
+
+<RenderChildren nodes={nodes} options={{ components, optimizeImage }} />

package/dist/components/richtext/ElementTag.astro

@@ -0,0 +1,32 @@
+---
+import {
+  attrsToHtmlString,
+  buildAstroAttrs,
+  resolveTag,
+  isSelfClosing,
+  type SbRichTextMark,
+  type SbRichTextNode,
+} from '../../';
+interface Props {
+  node: Exclude<SbRichTextNode, { type: 'text' }> | SbRichTextMark;
+}
+const { node } = Astro.props;
+
+const Tag = resolveTag(node);
+const processedAttrs = buildAstroAttrs(node.type, node?.attrs ?? {});
+const selfClosing = Tag && isSelfClosing(Tag);
+---
+
+{
+  Tag ? (
+    selfClosing ? (
+      <Fragment set:html={`<${Tag}${attrsToHtmlString(processedAttrs)}>`} />
+    ) : (
+      <Tag {...processedAttrs}>
+        <slot />
+      </Tag>
+    )
+  ) : (
+    <slot />
+  )
+}

package/dist/components/richtext/RenderChildren.astro

@@ -0,0 +1,26 @@
+---
+import { type SbRichTextNode, type SbAstroRichTextRenderContext, groupLinkNodes } from '../../';
+import RenderLinkGroup from './RenderLinkGroup.astro';
+import RenderNode from './RenderNode.astro';
+
+interface Props {
+  nodes: SbRichTextNode[];
+  options: SbAstroRichTextRenderContext;
+}
+const { nodes, options } = Astro.props;
+const groups = groupLinkNodes(nodes);
+---
+
+{
+  groups.map((group) =>
+    group.linkMark ? (
+      <RenderLinkGroup
+        nodes={group.nodes.filter((node) => node.type === 'text')}
+        linkMark={group.linkMark}
+        options={options}
+      />
+    ) : (
+      <RenderNode node={group.nodes[0]} options={options} />
+    ),
+  )
+}

package/dist/components/richtext/RenderImage.astro

@@ -0,0 +1,24 @@
+---
+import { type SbRichTextNode, type SbAstroRichTextRenderContext, buildStoryblokImage } from '../../';
+import ElementTag from './ElementTag.astro';
+
+type ImageNode = SbRichTextNode & { type: 'image' };
+interface Props {
+  node: ImageNode;
+  options: SbAstroRichTextRenderContext;
+}
+const { node, options } = Astro.props;
+const optimizedNode: ImageNode =
+  options.optimizeImage && node?.attrs?.src
+    ? {
+        ...node,
+        attrs: {
+          ...node.attrs,
+          ...buildStoryblokImage(node.attrs.src as string, options.optimizeImage),
+        },
+        type: 'image',
+      }
+    : node;
+---
+
+<ElementTag node={optimizedNode} />

package/dist/components/richtext/RenderLinkGroup.astro

@@ -0,0 +1,31 @@
+---
+import {
+  type SbRichTextTextNode,
+  type SbAstroRichTextRenderContext,
+  type SbRichTextMark,
+  isValidAstroComponent,
+} from '../../';
+import RenderLinkInner from './RenderLinkInner.astro';
+import ElementTag from './ElementTag.astro';
+
+interface Props {
+  nodes: SbRichTextTextNode[];
+  linkMark: SbRichTextMark & { type: 'link' };
+  options: SbAstroRichTextRenderContext;
+}
+const { nodes, linkMark, options } = Astro.props;
+const components = options.components;
+const Custom = components ? components[linkMark.type] : undefined;
+---
+
+{
+  isValidAstroComponent(Custom) ? (
+    <Custom {...linkMark}>
+      <RenderLinkInner nodes={nodes} options={options} />
+    </Custom>
+  ) : (
+    <ElementTag node={linkMark}>
+      <RenderLinkInner nodes={nodes} options={options} />
+    </ElementTag>
+  )
+}

package/dist/components/richtext/RenderLinkInner.astro

@@ -0,0 +1,18 @@
+---
+import type { SbAstroRichTextRenderContext, SbRichTextTextNode } from '../../';
+import { getInnerMarks } from '../../';
+import RenderTextNodeWithMarks from './RenderTextNodeWithMarks.astro';
+
+interface Props {
+  nodes: SbRichTextTextNode[];
+  options: SbAstroRichTextRenderContext;
+}
+const { nodes, options } = Astro.props;
+---
+
+{
+  nodes.map((node) => {
+    const innermarks = getInnerMarks(node);
+    return <RenderTextNodeWithMarks node={node} marks={innermarks} options={options} />;
+  })
+}

package/dist/components/richtext/RenderNode.astro

@@ -0,0 +1,46 @@
+---
+import {
+  type SbRichTextNode,
+  type SbAstroRichTextRenderContext,
+  isValidAstroComponent,
+  getStaticChildren,
+} from '../../';
+import StoryblokComponent from '../StoryblokComponent.astro';
+import RenderChildren from './RenderChildren.astro';
+import ElementTag from './ElementTag.astro';
+import RenderImage from './RenderImage.astro';
+import RenderStaticChildren from './RenderStaticChildren.astro';
+import RenderTable from './RenderTable.astro';
+import RenderTextNodeWithMarks from './RenderTextNodeWithMarks.astro';
+
+interface Props {
+  node: SbRichTextNode;
+  options: SbAstroRichTextRenderContext;
+}
+const { node, options } = Astro.props;
+const components = options.components;
+const Custom = components && node.type !== 'text' ? components[node.type] : undefined;
+---
+
+{
+  node.type === 'text' ? (
+    <RenderTextNodeWithMarks node={node} marks={node.marks} options={options} />
+  ) : isValidAstroComponent(Custom) ? (
+    <Custom {...node} context={options}>
+      {node.content && <RenderChildren nodes={node.content} options={options} />}
+    </Custom>
+  ) : node.type === 'image' ? (
+    <RenderImage node={node} options={options} />
+  ) : node.type === 'blok' ? (
+    <Fragment>
+      {Array.isArray(node.attrs?.body) &&
+        node.attrs.body.map((blok, index) => <StoryblokComponent blok={blok} key={blok._uid || index} />)}
+    </Fragment>
+  ) : node.type === 'table' ? (
+    <RenderTable node={node} options={options} />
+  ) : getStaticChildren(node) ? (
+    <RenderStaticChildren node={node} options={options} />
+  ) : (
+    <ElementTag node={node}>{node.content && <RenderChildren nodes={node.content} options={options} />}</ElementTag>
+  )
+}

package/dist/components/richtext/RenderStaticChildren.astro

@@ -0,0 +1,23 @@
+---
+import { type SbAstroRichTextRenderContext, type SbRichTextNode, getStaticChildren, resolveTag } from '../../';
+import RenderChildren from './RenderChildren.astro';
+import RenderStaticStructure from './RenderStaticStructure.astro';
+
+interface Props {
+  node: Exclude<SbRichTextNode, { type: 'text' }>;
+  options: SbAstroRichTextRenderContext;
+}
+const { node, options } = Astro.props;
+const staticChildren = getStaticChildren(node);
+const OuterTag = resolveTag(node);
+---
+
+{
+  staticChildren && OuterTag ? (
+    <OuterTag>
+      <RenderStaticStructure type={node.type} specs={staticChildren} parentAttrs={node.attrs}>
+        {node.content && <RenderChildren nodes={node.content} options={options} />}
+      </RenderStaticStructure>
+    </OuterTag>
+  ) : null
+}

package/dist/components/richtext/RenderStaticStructure.astro

@@ -0,0 +1,35 @@
+---
+import { attrsToHtmlString, buildAstroAttrs, isSelfClosing, type RenderSpec, type SbRichTextElement } from '../../';
+
+interface Props {
+  type: SbRichTextElement;
+  specs: readonly RenderSpec[];
+  parentAttrs?: Record<string, unknown>;
+}
+
+const { type, specs, parentAttrs } = Astro.props;
+---
+
+{
+  specs.map((spec) => {
+    const { tag, children, attrs: specAttrs } = spec;
+    const Tag = tag;
+    const mergedAttrs = { ...specAttrs, ...parentAttrs };
+    const processedAttrs = buildAstroAttrs(type, mergedAttrs);
+
+    if (isSelfClosing(Tag)) {
+      return <Fragment set:html={`<${tag}${attrsToHtmlString(processedAttrs)}>`} />;
+    }
+    return (
+      <Tag {...processedAttrs}>
+        {children ? (
+          <Astro.self type={type} specs={children} parentAttrs={parentAttrs}>
+            <slot />
+          </Astro.self>
+        ) : (
+          <slot />
+        )}
+      </Tag>
+    );
+  })
+}

package/dist/components/richtext/RenderTable.astro

@@ -0,0 +1,20 @@
+---
+import { type SbRichTextNode, type SbAstroRichTextRenderContext, splitTableRows } from '../../';
+import ElementTag from './ElementTag.astro';
+import RenderNode from './RenderNode.astro';
+interface Props {
+  node: SbRichTextNode & { type: 'table' };
+  options: SbAstroRichTextRenderContext;
+}
+const { node, options } = Astro.props;
+const { headerRows, bodyRows } = splitTableRows(node.content);
+---
+
+<ElementTag node={node}>
+  {
+    headerRows.length > 0 && (<thead>{headerRows.map((row) => <RenderNode node={row} options={options} />)}</thead>)
+  }
+  {
+    bodyRows.length > 0 && (<tbody>{bodyRows.map((row) => <RenderNode node={row} options={options} />)}</tbody>)
+  }
+</ElementTag>

package/dist/components/richtext/RenderTextNodeWithMarks.astro

@@ -0,0 +1,34 @@
+---
+import {
+  type SbRichTextTextNode,
+  type SbRichTextMark,
+  type SbAstroRichTextRenderContext,
+  isValidAstroComponent,
+} from '../../';
+import ElementTag from './ElementTag.astro';
+
+interface Props {
+  node: SbRichTextTextNode;
+  marks?: SbRichTextMark[];
+  options: SbAstroRichTextRenderContext;
+}
+const { node, marks = [], options } = Astro.props;
+const reversedMarks = [...marks].reverse();
+const [mark, ...rest] = reversedMarks;
+const components = options.components;
+const MarkComponent = mark && components ? components[mark.type] : undefined;
+---
+
+{
+  reversedMarks.length === 0 ? (
+    node.text
+  ) : isValidAstroComponent(MarkComponent) ? (
+    <MarkComponent {...mark}>
+      <Astro.self node={node} marks={rest} options={options} />
+    </MarkComponent>
+  ) : (
+    <ElementTag node={mark}>
+      <Astro.self node={node} marks={rest} options={options} />
+    </ElementTag>
+  )
+}

package/dist/index.d.ts

@@ -6,7 +6,10 @@ export type { IntegrationOptions } from './lib/storyblok-integration';
 export { handleStoryblokMessage } from './live-preview/handleStoryblokMessage';
 export * from './types';
 export { isEditorRequest } from './utils/isEditorRequest';
+export { buildAstroAttrs, isValidAstroComponent, type SbAstroRichTextComponentMap, type SbAstroRichTextProps, type SbAstroRichTextRenderContext } from './utils/richtext-helpers';
 export { toCamelCase } from './utils/toCamelCase';
-export { loadStoryblokBridge, renderRichText, richTextResolver, segmentStoryblokRichText, storyblokEditable, } from '@storyblok/js';
 export { storyblokIntegration as storyblok };
-export { apiPlugin, storyblokInit } from '@storyblok/js';
+export { apiPlugin, loadStoryblokBridge, storyblokEditable, storyblokInit, } from '@storyblok/js';
+export { buildStoryblokImage, renderRichText, splitTableRows } from '@storyblok/richtext';
+export type { SbRichTextDoc, SbRichTextImageOptions, SbRichTextMark, SbRichTextNode, SbRichTextProps, SbRichTextRenderContext, } from '@storyblok/richtext';
+export { attrsToHtmlString, getInnerMarks, getStaticChildren, groupLinkNodes, isSelfClosing, normalizeNodes, processAttrs, type RenderSpec, resolveTag, type SbRichTextElement, type SbRichTextInput, type SbRichTextTextNode, styleToString } from '@storyblok/richtext';