vue-datocms 8.0.0 → 8.1.0

package/dist/index.cjs.js

@@ -679,6 +679,9 @@ const StructuredText = vue.defineComponent({
     renderBlock: {
       type: Function
     },
+    renderInlineBlock: {
+      type: Function
+    },
     metaTransformer: { type: Function },
     renderText: { type: Function },
     renderNode: { type: Function },
@@ -785,6 +788,33 @@ const StructuredText = vue.defineComponent({
               key
             );
           }),
+          datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isInlineBlock, ({ node, key }) => {
+            if (!props.renderInlineBlock) {
+              throw new datocmsStructuredTextUtils.RenderError(
+                `The Structured Text document contains an 'inlineBlock' node, but no 'renderInlineBlock' prop is specified!`,
+                node
+              );
+            }
+            if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
+              throw new datocmsStructuredTextUtils.RenderError(
+                `The Structured Text document contains an 'inlineBlock' node, but .blocks is not present!`,
+                node
+              );
+            }
+            const item = props.data.blocks.find(
+              (item2) => item2.id === node.item
+            );
+            if (!item) {
+              throw new datocmsStructuredTextUtils.RenderError(
+                `The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`,
+                node
+              );
+            }
+            return appendKeyToValidElement(
+              props.renderInlineBlock({ record: item }),
+              key
+            );
+          }),
           ...props.customNodeRules || props.customRules || []
         ]
       });

package/dist/index.d.ts

@@ -443,31 +443,35 @@ declare const StructuredText: vue.DefineComponent<{
     customMarkRules: {
         type: PropType<RenderMarkRule<typeof h, (text: string, _key: string) => AdapterReturn, (children: AdapterReturn[], _key: string) => AdapterReturn>[]>;
     };
-    /** Fuction that converts an 'inlineItem' node into React **/
+    /** Fuction that converts an 'inlineItem' node into a Vue component **/
     renderInlineRecord: {
         type: PropType<(context: RenderInlineRecordContext<any>) => AdapterReturn>;
     };
-    /** Fuction that converts an 'itemLink' node into React **/
+    /** Fuction that converts an 'itemLink' node into a Vue component **/
     renderLinkToRecord: {
         type: PropType<(context: RenderRecordLinkContext<any>) => AdapterReturn>;
     };
-    /** Fuction that converts a 'block' node into React **/
+    /** Fuction that converts a 'block' node into a Vue component **/
     renderBlock: {
         type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
     };
+    /** Fuction that converts an 'inlineBlock' node into a Vue component **/
+    renderInlineBlock: {
+        type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
+    };
     /** Function that converts 'link' and 'itemLink' `meta` into HTML props */
     metaTransformer: {
         type: PropType<TransformMetaFn>;
     };
-    /** Fuction that converts a simple string text into React **/
+    /** Fuction that converts a simple string text into a Vue component **/
     renderText: {
         type: PropType<(text: string, _key: string) => AdapterReturn>;
     };
-    /** React.createElement-like function to use to convert a node into React **/
+    /** React.createElement-like function to use to convert a node into a Vue component **/
     renderNode: {
         type: PropType<typeof h>;
     };
-    /** Function to use to generate a React.Fragment **/
+    /** Function to use to generate a Vue.Fragment **/
     renderFragment: {
         type: PropType<(children: AdapterReturn[], _key: string) => AdapterReturn>;
     };
@@ -488,31 +492,35 @@ declare const StructuredText: vue.DefineComponent<{
     customMarkRules: {
         type: PropType<RenderMarkRule<typeof h, (text: string, _key: string) => AdapterReturn, (children: AdapterReturn[], _key: string) => AdapterReturn>[]>;
     };
-    /** Fuction that converts an 'inlineItem' node into React **/
+    /** Fuction that converts an 'inlineItem' node into a Vue component **/
     renderInlineRecord: {
         type: PropType<(context: RenderInlineRecordContext<any>) => AdapterReturn>;
     };
-    /** Fuction that converts an 'itemLink' node into React **/
+    /** Fuction that converts an 'itemLink' node into a Vue component **/
     renderLinkToRecord: {
         type: PropType<(context: RenderRecordLinkContext<any>) => AdapterReturn>;
     };
-    /** Fuction that converts a 'block' node into React **/
+    /** Fuction that converts a 'block' node into a Vue component **/
     renderBlock: {
         type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
     };
+    /** Fuction that converts an 'inlineBlock' node into a Vue component **/
+    renderInlineBlock: {
+        type: PropType<(context: RenderBlockContext<any>) => AdapterReturn>;
+    };
     /** Function that converts 'link' and 'itemLink' `meta` into HTML props */
     metaTransformer: {
         type: PropType<TransformMetaFn>;
     };
-    /** Fuction that converts a simple string text into React **/
+    /** Fuction that converts a simple string text into a Vue component **/
     renderText: {
         type: PropType<(text: string, _key: string) => AdapterReturn>;
     };
-    /** React.createElement-like function to use to convert a node into React **/
+    /** React.createElement-like function to use to convert a node into a Vue component **/
     renderNode: {
         type: PropType<typeof h>;
     };
-    /** Function to use to generate a React.Fragment **/
+    /** Function to use to generate a Vue.Fragment **/
     renderFragment: {
         type: PropType<(children: AdapterReturn[], _key: string) => AdapterReturn>;
     };

package/dist/index.esm.mjs

@@ -2,7 +2,7 @@ import { ref, onMounted, onBeforeUnmount, defineComponent, h, watchEffect, unref
 import hypenateStyleName from 'hyphenate-style-name';
 import { render, renderNodeRule, defaultMetaTransformer } from 'datocms-structured-text-generic-html-renderer';
 export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
-import { isRoot, isInlineItem, RenderError, isStructuredText, isItemLink, isBlock } from 'datocms-structured-text-utils';
+import { isRoot, isInlineItem, RenderError, isStructuredText, isItemLink, isBlock, isInlineBlock } from 'datocms-structured-text-utils';
 export { RenderError } from 'datocms-structured-text-utils';
 import { subscribeToQuery } from 'datocms-listen';
 
@@ -655,6 +655,9 @@ const StructuredText = defineComponent({
     renderBlock: {
       type: Function
     },
+    renderInlineBlock: {
+      type: Function
+    },
     metaTransformer: { type: Function },
     renderText: { type: Function },
     renderNode: { type: Function },
@@ -761,6 +764,33 @@ const StructuredText = defineComponent({
               key
             );
           }),
+          renderNodeRule(isInlineBlock, ({ node, key }) => {
+            if (!props.renderInlineBlock) {
+              throw new RenderError(
+                `The Structured Text document contains an 'inlineBlock' node, but no 'renderInlineBlock' prop is specified!`,
+                node
+              );
+            }
+            if (!isStructuredText(props.data) || !props.data.blocks) {
+              throw new RenderError(
+                `The Structured Text document contains an 'inlineBlock' node, but .blocks is not present!`,
+                node
+              );
+            }
+            const item = props.data.blocks.find(
+              (item2) => item2.id === node.item
+            );
+            if (!item) {
+              throw new RenderError(
+                `The Structured Text document contains a 'block' node, but cannot find a record with ID ${node.item} inside .blocks!`,
+                node
+              );
+            }
+            return appendKeyToValidElement(
+              props.renderInlineBlock({ record: item }),
+              key
+            );
+          }),
           ...props.customNodeRules || props.customRules || []
         ]
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",
@@ -42,9 +42,9 @@
   },
   "dependencies": {
     "datocms-listen": "^0.1.15",
-    "datocms-structured-text-generic-html-renderer": "^4.0.1",
-    "datocms-structured-text-utils": "^4.0.1",
     "hls.js": "^1.5.17",
+    "datocms-structured-text-generic-html-renderer": "^4.1.2",
+    "datocms-structured-text-utils": "^4.1.2",
     "hyphenate-style-name": "^1.0.4"
   },
   "peerDependencies": {