vue-datocms 1.0.1 → 1.1.0

package/README.md

@@ -4,12 +4,18 @@
 
 A set of components and utilities to work faster with [DatoCMS](https://www.datocms.com/) in Vue.js environments. Integrates seamlessy with [DatoCMS's GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api).
 
-- Works with both Vue 2 and Vue 3;
+- Works with both Vue 2 (only on JS projects, not TypeScript) and Vue 3;
 - TypeScript ready;
 - Compatible with any data-fetching library (axios, Apollo);
 - Usable both client and server side;
 - Compatible with vanilla Vue, Nuxt.js and pretty much any other Vue-based solution;
 
+<br /><br />
+<a href="https://www.datocms.com/">
+<img src="https://www.datocms.com/images/full_logo.svg" height="60">
+</a>
+<br /><br />
+
 ## Table of Contents
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
@@ -47,7 +53,7 @@ A set of components and utilities to work faster with [DatoCMS](https://www.dato
 npm install vue-datocms
 ```
 
-In Vue 2, also install `@vue/composition-api` as a dependency. Everything else should be similar to the example above for Vue 3.
+In Vue 2, also install `@vue/composition-api` as a dependency. Everything else should be similar to the example above for Vue 3. Please note that with Vue 2 support is limited to JS-only projects. TypeScript + Vue 2 is not supported at the moment, sorry.
 
 ## Live real-time updates
 
@@ -73,19 +79,25 @@ In Vue.js v3, `subscribeToQuery` can be used to implement a custom hook. Please
 
 ### Out-of-the-box features
 
-- Offer WebP version of images for browsers that support the format
-- Generate multiple smaller images so smartphones and tablets don’t download desktop-sized images
-- Efficiently lazy load images to speed initial page load and save bandwidth
-- Use either blur-up or background color techniques to show a preview of the image while it loads
-- Hold the image position so your page doesn’t jump while images load
+- Offers WebP version of images for browsers that support the format
+- Generates multiple smaller images so smartphones and tablets don’t download desktop-sized images
+- Efficiently lazy loads images to speed initial page load and save bandwidth
+- Holds the image position so your page doesn’t jump while images load
+- Uses either blur-up or background color techniques to show a preview of the image while it loads
+
+## Intersection Observer
+
+Intersection Observer is the API used to determine if the image is inside the viewport or not. [Browser support is really good](https://caniuse.com/intersectionobserver) - With Safari adding support in 12.1, all major browsers now support Intersection Observers natively.
+
+If the IntersectionObserver object is not available, the component treats the image as it's always visible in the viewport. Feel free to add a [polyfill](https://www.npmjs.com/package/intersection-observer) so that it will also 100% work on older versions of iOS and IE11.
 
 ### Setup
 
 You can register the component globally so it's available in all your apps:
 
 ```js
-import Vue from "vue";
-import { DatocmsImagePlugin } from "vue-datocms";
+import Vue from 'vue';
+import { DatocmsImagePlugin } from 'vue-datocms';
 
 Vue.use(DatocmsImagePlugin);
 ```
@@ -93,11 +105,11 @@ Vue.use(DatocmsImagePlugin);
 Or use it locally in any of your components:
 
 ```js
-import { Image } from "vue-datocms";
+import { Image } from 'vue-datocms';
 
 export default {
   components: {
-    "datocms-image": Image,
+    'datocms-image': Image,
   },
 };
 ```
@@ -124,8 +136,8 @@ For a fully working example take a look at our [examples directory](https://gith
 </template>
 
 <script>
-import { request } from "./lib/datocms";
-import { Image } from "vue-datocms";
+import { request } from './lib/datocms';
+import { Image } from 'vue-datocms';
 
 const query = gql`
   query {
@@ -163,7 +175,7 @@ const query = gql`
 
 export default {
   components: {
-    "datocms-image": Image,
+    'datocms-image': Image,
   },
   data() {
     return {
@@ -243,8 +255,8 @@ For a working example take a look at our [examples directory](https://github.com
 </template>
 
 <script>
-import { request } from "./lib/datocms";
-import { toHead } from "vue-datocms";
+import { request } from './lib/datocms';
+import { toHead } from 'vue-datocms';
 
 const query = gql`
   query {
@@ -295,8 +307,8 @@ export default {
 You can register the component globally so it's available in all your apps:
 
 ```js
-import Vue from "vue";
-import { DatocmsStructuredTextPlugin } from "vue-datocms";
+import Vue from 'vue';
+import { DatocmsStructuredTextPlugin } from 'vue-datocms';
 
 Vue.use(DatocmsStructuredTextPlugin);
 ```
@@ -304,11 +316,11 @@ Vue.use(DatocmsStructuredTextPlugin);
 Or use it locally in any of your components:
 
 ```js
-import { StructuredText } from "vue-datocms";
+import { StructuredText } from 'vue-datocms';
 
 export default {
   components: {
-    "datocms-structured-text": StructuredText,
+    'datocms-structured-text': StructuredText,
   },
 };
 ```
@@ -330,8 +342,8 @@ export default {
 </template>
 
 <script>
-import { request } from "./lib/datocms";
-import { StructuredText } from "vue-datocms";
+import { request } from './lib/datocms';
+import { StructuredText } from 'vue-datocms';
 
 const query = gql`
   query {
@@ -346,7 +358,7 @@ const query = gql`
 
 export default {
   components: {
-    "datocms-structured-text": StructuredText,
+    'datocms-structured-text': StructuredText,
   },
   data() {
     return {
@@ -419,9 +431,9 @@ You can also pass custom renderers for special nodes (inline records, record lin
 </template>
 
 <script>
-import { request } from "./lib/datocms";
-import { StructuredText, Image } from "vue-datocms";
-import { h } from "vue-demi";
+import { request } from './lib/datocms';
+import { StructuredText, Image } from 'vue-datocms';
+import { h } from 'vue-demi';
 
 const query = gql`
   query {
@@ -442,7 +454,9 @@ const query = gql`
           ... on ImageRecord {
             id
             image {
-              responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
+              responsiveImage(
+                imgixParams: { fit: crop, w: 300, h: 300, auto: format }
+              ) {
                 srcSet
                 webpSrcSet
                 sizes
@@ -464,8 +478,8 @@ const query = gql`
 
 export default {
   components: {
-    "datocms-structured-text": StructuredText,
-    "datocms-image": Image,
+    'datocms-structured-text': StructuredText,
+    'datocms-image': Image,
   },
   data() {
     return {
@@ -475,21 +489,17 @@ export default {
   methods: {
     renderInlineRecord: ({ record }) => {
       switch (record.__typename) {
-        case "TeamMemberRecord":
-          return h(
-            "a",
-            { href: `/team/${record.slug}` },
-            record.firstName,
-          );
+        case 'TeamMemberRecord':
+          return h('a', { href: `/team/${record.slug}` }, record.firstName);
         default:
           return null;
       }
     },
     renderLinkToRecord: ({ record, children, transformedMeta }) => {
       switch (record.__typename) {
-        case "TeamMemberRecord":
+        case 'TeamMemberRecord':
           return h(
-            "a",
+            'a',
             { ...transformedMeta, href: `/team/${record.slug}` },
             children,
           );
@@ -499,8 +509,8 @@ export default {
     },
     renderBlock: ({ record }) => {
       switch (record.__typename) {
-        case "ImageRecord":
-          return h("datocms-image", {
+        case 'ImageRecord':
+          return h('datocms-image', {
             data: record.image.responsiveImage,
           });
         default:
@@ -570,14 +580,85 @@ export default {
 </script>
 ```
 
+## Override default rendering of nodes
+
+This component automatically renders all nodes except for `inline_item`, `item_link` and `block` using a set of default rules, but you might want to customize those. For example:
+
+- For `heading` nodes, you might want to add an anchor;
+- For `code` nodes, you might want to use a custom sytax highlighting component;
+
+In this case, you can easily override default rendering rules with the `customNodeRules` and `customMarkRules` props.
+
+```vue
+<template>
+  <datocms-structured-text
+    :data="data.blogPost.content"
+    :customNodeRules="customNodeRules"
+    :customMarkRules="customMarkRules"
+  />
+</template>
+
+<script>
+import { StructuredText, renderNodeRule, renderMarkRule } from "vue-datocms";
+import { isHeading, isCode } from "datocms-structured-text-utils";
+import { render as toPlainText } from 'datocms-structured-text-to-plain-text';
+import SyntaxHighlight from './components/SyntaxHighlight';
+
+export default {
+  components: {
+    "datocms-structured-text": StructuredText,
+    "syntax-highlight": SyntaxHighlight,
+  },
+  data() {
+    return {
+      data: /* ... */,
+      customNodeRules: [
+        renderNodeRule(isHeading, ({ adapter: { renderNode: h }, node, children, key }) => {
+          const anchor = toPlainText(node)
+            .toLowerCase()
+            .replace(/ /g, '-')
+            .replace(/[^\w-]+/g, '');
+
+          return h(
+            `h${node.level}`, { key }, [
+              ...children,
+              h('a', { attrs: { id: anchor } }, []),
+              h('a', { attrs: { href: `#${anchor}` } }, []),
+            ]
+          );
+        }),
+        renderNodeRule(isCode, ({ adapter: { renderNode: h }, node, key }) => {
+          return h('syntax-highlight', {
+            key,
+            code: node.code,
+            language: node.language,
+            linesToBeHighlighted: node.highlight,
+          }, []);
+        }),
+      ],
+      customMarkRules: [
+        // convert "strong" marks into <b> tags
+        renderMarkRule('strong', ({ adapter: { renderNode: h }, mark, children, key }) => {
+          return h('b', {key}, children);
+        }),
+      ],
+    };
+  },
+};
+</script>
+```
+
+Note: if you override the rules for `inline_item`, `item_link` or `block` nodes, then the `renderInlineRecord`, `renderLinkToRecord` and `renderBlock` props won't be considered!
+
 ## Props
 
-| prop               | type                                                     | required                                              | description                                                                                      | default                                                                                                              |
-| ------------------ | -------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
-| data               | `StructuredTextGraphQlResponse \| DastNode`              | :white_check_mark:                                    | The actual [field value](https://www.datocms.com/docs/structured-text/dast) you get from DatoCMS |                                                                                                                      |
-| renderInlineRecord | `({ record }) => VNode \| null`                          | Only required if document contains `inlineItem` nodes | Convert an `inlineItem` DAST node into a VNode                                                     | `[]`                                                                                                                 |
-| renderLinkToRecord | `({ record, children, transformedMeta }) => VNode \| null`                | Only required if document contains `itemLink` nodes   | Convert an `itemLink` DAST node into a VNode                                                       | `null`                                                                                                               |
-| renderBlock        | `({ record }) => VNode \| null`                          | Only required if document contains `block` nodes      | Convert a `block` DAST node into a VNode                                                           | `null`                                                                                                               |
-| metaTransformer    | `({ node, meta }) => Object \| null`                     | :x:                                                   | Transform `link` and `itemLink` meta property into HTML props                                    | [See function](https://github.com/datocms/structured-text/blob/main/packages/generic-html-renderer/src/index.ts#L61) |
-| customRules        | `Array<RenderRule>`                                      | :x:                                                   | Customize how document is converted in JSX (use `renderRule()` to generate)                      | `null`                                                                                                               |
-| renderText         | `(text: string, key: string) => VNode \| string \| null` | :x:                                                   | Convert a simple string text into a VNode                                                          | `(text) => text`                                                                                                     |
+| prop               | type                                                       | required                                              | description                                                                                      | default                                                                                                              |
+| ------------------ | ---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
+| data               | `StructuredTextGraphQlResponse \| DastNode`                | :white_check_mark:                                    | The actual [field value](https://www.datocms.com/docs/structured-text/dast) you get from DatoCMS |                                                                                                                      |
+| renderInlineRecord | `({ record }) => VNode \| null`                            | Only required if document contains `inlineItem` nodes | Convert an `inlineItem` DAST node into a VNode                                                   | `[]`                                                                                                                 |
+| renderLinkToRecord | `({ record, children, transformedMeta }) => VNode \| null` | Only required if document contains `itemLink` nodes   | Convert an `itemLink` DAST node into a VNode                                                     | `null`                                                                                                               |
+| renderBlock        | `({ record }) => VNode \| null`                            | Only required if document contains `block` nodes      | Convert a `block` DAST node into a VNode                                                         | `null`                                                                                                               |
+| metaTransformer    | `({ node, meta }) => Object \| null`                       | :x:                                                   | Transform `link` and `itemLink` meta property into HTML props                                    | [See function](https://github.com/datocms/structured-text/blob/main/packages/generic-html-renderer/src/index.ts#L61) |
+| customNodeRules    | `Array<RenderRule>`                                        | :x:                                                   | Customize how nodes are converted in JSX (use `renderNodeRule()` to generate)                    | `null`                                                                                                               |
+| customMarkRules    | `Array<RenderMarkRule>`                                    | :x:                                                   | Customize how marks are converted in JSX (use `renderMarkRule()` to generate)                    | `null`                                                                                                               |
+| renderText         | `(text: string, key: string) => VNode \| string \| null`   | :x:                                                   | Convert a simple string text into a VNode                                                        | `(text) => text`                                                                                                     |

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as vue_demi from 'vue-demi';
 import { PropType, VNodeProps, VNode } from 'vue-demi';
-import { TransformedMeta, TransformMetaFn } from 'datocms-structured-text-generic-html-renderer';
-export { renderRule } from 'datocms-structured-text-generic-html-renderer';
+import { TransformedMeta, RenderMarkRule, TransformMetaFn } from 'datocms-structured-text-generic-html-renderer';
+export { renderMarkRule, renderNodeRule, renderNodeRule as renderRule } from 'datocms-structured-text-generic-html-renderer';
 import { Record as Record$1, RenderResult, StructuredText as StructuredText$1, Document, Node, RenderRule } from 'datocms-structured-text-utils';
 export { RenderError, Document as StructuredTextDocument, StructuredText as StructuredTextGraphQlResponse } from 'datocms-structured-text-utils';
 
@@ -125,10 +125,18 @@ declare const StructuredText: vue_demi.DefineComponent<{
     data: {
         type: PropType<StructuredText$1<Record$1> | Document | Node | null | undefined>;
     };
-    /** A set of additional rules to convert the document to JSX **/
+    /** @deprecated use customNodeRules **/
     customRules: {
         type: PropType<RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
     };
+    /** A set of additional rules to convert the document to JSX **/
+    customNodeRules: {
+        type: PropType<RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
+    };
+    /** A set of additional rules to convert the document to JSX **/
+    customMarkRules: {
+        type: PropType<RenderMarkRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[]>;
+    };
     /** Fuction that converts an 'inlineItem' node into React **/
     renderInlineRecord: {
         type: PropType<(context: RenderInlineRecordContext) => AdapterReturn>;
@@ -160,6 +168,8 @@ declare const StructuredText: vue_demi.DefineComponent<{
 }, () => RenderResult<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, Record<string, any>, string, VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<{} & {
     data?: StructuredText$1<Record$1> | Document | Node | null | undefined;
     customRules?: RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[] | undefined;
+    customNodeRules?: RenderRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[] | undefined;
+    customMarkRules?: RenderMarkRule<(tagName: string, props?: VNodeProps | undefined, childOrChildren?: AdapterReturn | AdapterReturn[] | undefined) => AdapterReturn, (text: string, key: string) => AdapterReturn, (children: AdapterReturn[], key: string) => AdapterReturn>[] | undefined;
     renderInlineRecord?: ((context: RenderInlineRecordContext) => AdapterReturn) | undefined;
     renderLinkToRecord?: ((context: RenderRecordLinkContext) => AdapterReturn) | undefined;
     renderBlock?: ((context: RenderBlockContext) => AdapterReturn) | undefined;

package/dist/index.esm.js

@@ -1,9 +1,9 @@
 import hypenateStyleName from 'hyphenate-style-name';
-import { isVue3, h, defineComponent, ref, onMounted, onBeforeUnmount, isVNode, cloneVNode } from 'vue-demi';
-import { render, renderRule, defaultMetaTransformer } from 'datocms-structured-text-generic-html-renderer';
-export { renderRule } from 'datocms-structured-text-generic-html-renderer';
-import { isInlineItem, RenderError, isStructuredText, isItemLink, isBlock } from 'datocms-structured-text-utils';
-export { RenderError, Document as StructuredTextDocument, StructuredText as StructuredTextGraphQlResponse } from 'datocms-structured-text-utils';
+import { isVue3, h, defineComponent, ref, onMounted, onBeforeUnmount } from 'vue-demi';
+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';
+export { RenderError } from 'datocms-structured-text-utils';
 
 var __defProp$2 = Object.defineProperty;
 var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
@@ -348,11 +348,12 @@ const hAdapter = (tagName, props, childOrChildren) => {
 const defaultAdapter = {
   renderNode: hAdapter,
   renderMark: hAdapter,
-  renderFragment: (children, key) => crossH("div", {key}, children),
+  renderFragment: (children, key) => children,
   renderText: (text, key) => text
 };
 function appendKeyToValidElement(element, key) {
   if (isVue3) {
+    const {isVNode, cloneVNode} = require("vue");
     if (isVNode(element) && element.key === null) {
       return cloneVNode(element, {key});
     }
@@ -371,6 +372,12 @@ const StructuredText = defineComponent({
     customRules: {
       type: Array
     },
+    customNodeRules: {
+      type: Array
+    },
+    customMarkRules: {
+      type: Array
+    },
     renderInlineRecord: {
       type: Function
     },
@@ -387,58 +394,67 @@ const StructuredText = defineComponent({
   },
   setup(props) {
     return () => {
-      return render({
-        renderText: props.renderText || defaultAdapter.renderText,
-        renderNode: props.renderNode || defaultAdapter.renderNode,
-        renderFragment: props.renderFragment || defaultAdapter.renderFragment
-      }, props.data, [
-        renderRule(isInlineItem, ({node, key}) => {
-          if (!props.renderInlineRecord) {
-            throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
-          }
-          if (!isStructuredText(props.data) || !props.data.links) {
-            throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
-          }
-          const item = props.data.links.find((item2) => item2.id === node.item);
-          if (!item) {
-            throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
-          }
-          return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
-        }),
-        renderRule(isItemLink, ({node, key, children}) => {
-          if (!props.renderLinkToRecord) {
-            throw new RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
-          }
-          if (!isStructuredText(props.data) || !props.data.links) {
-            throw new RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
-          }
-          const item = props.data.links.find((item2) => item2.id === node.item);
-          if (!item) {
-            throw new RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
-          }
-          return appendKeyToValidElement(props.renderLinkToRecord({
-            record: item,
-            children,
-            transformedMeta: node.meta ? (props.metaTransformer || defaultMetaTransformer)({
-              node,
-              meta: node.meta
-            }) : null
-          }), key);
-        }),
-        renderRule(isBlock, ({node, key}) => {
-          if (!props.renderBlock) {
-            throw new RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
-          }
-          if (!isStructuredText(props.data) || !props.data.blocks) {
-            throw new RenderError(`The Structured Text document contains a 'block' 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.renderBlock({record: item}), key);
-        })
-      ].concat(props.customRules || []), props.metaTransformer);
+      return render(props.data, {
+        adapter: {
+          renderText: props.renderText || defaultAdapter.renderText,
+          renderNode: props.renderNode || defaultAdapter.renderNode,
+          renderFragment: props.renderFragment || defaultAdapter.renderFragment
+        },
+        metaTransformer: props.metaTransformer,
+        customMarkRules: props.customMarkRules,
+        customNodeRules: [
+          renderNodeRule(isRoot, ({adapter: {renderNode}, key, children}) => {
+            return renderNode("div", {key}, children);
+          }),
+          renderNodeRule(isInlineItem, ({node, key}) => {
+            if (!props.renderInlineRecord) {
+              throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
+            }
+            if (!isStructuredText(props.data) || !props.data.links) {
+              throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
+            }
+            const item = props.data.links.find((item2) => item2.id === node.item);
+            if (!item) {
+              throw new RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
+            }
+            return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
+          }),
+          renderNodeRule(isItemLink, ({node, key, children}) => {
+            if (!props.renderLinkToRecord) {
+              throw new RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
+            }
+            if (!isStructuredText(props.data) || !props.data.links) {
+              throw new RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
+            }
+            const item = props.data.links.find((item2) => item2.id === node.item);
+            if (!item) {
+              throw new RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
+            }
+            return appendKeyToValidElement(props.renderLinkToRecord({
+              record: item,
+              children,
+              transformedMeta: node.meta ? (props.metaTransformer || defaultMetaTransformer)({
+                node,
+                meta: node.meta
+              }) : null
+            }), key);
+          }),
+          renderNodeRule(isBlock, ({node, key}) => {
+            if (!props.renderBlock) {
+              throw new RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
+            }
+            if (!isStructuredText(props.data) || !props.data.blocks) {
+              throw new RenderError(`The Structured Text document contains a 'block' 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.renderBlock({record: item}), key);
+          }),
+          ...props.customNodeRules || props.customRules || []
+        ]
+      });
     };
   }
 });

package/dist/index.min.js

@@ -337,13 +337,14 @@ const hAdapter = (tagName, props, childOrChildren) => {
 const defaultAdapter = {
   renderNode: hAdapter,
   renderMark: hAdapter,
-  renderFragment: (children, key) => crossH("div", {key}, children),
+  renderFragment: (children, key) => children,
   renderText: (text, key) => text
 };
 function appendKeyToValidElement(element, key) {
   if (vueDemi.isVue3) {
-    if (vueDemi.isVNode(element) && element.key === null) {
-      return vueDemi.cloneVNode(element, {key});
+    const {isVNode, cloneVNode} = require("vue");
+    if (isVNode(element) && element.key === null) {
+      return cloneVNode(element, {key});
     }
   } else if (element && typeof element === "object" && (element.key === null || element.key === void 0)) {
     element.key = key;
@@ -360,6 +361,12 @@ const StructuredText = vueDemi.defineComponent({
     customRules: {
       type: Array
     },
+    customNodeRules: {
+      type: Array
+    },
+    customMarkRules: {
+      type: Array
+    },
     renderInlineRecord: {
       type: Function
     },
@@ -376,58 +383,67 @@ const StructuredText = vueDemi.defineComponent({
   },
   setup(props) {
     return () => {
-      return datocmsStructuredTextGenericHtmlRenderer.render({
-        renderText: props.renderText || defaultAdapter.renderText,
-        renderNode: props.renderNode || defaultAdapter.renderNode,
-        renderFragment: props.renderFragment || defaultAdapter.renderFragment
-      }, props.data, [
-        datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isInlineItem, ({node, key}) => {
-          if (!props.renderInlineRecord) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
-          }
-          if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
-          }
-          const item = props.data.links.find((item2) => item2.id === node.item);
-          if (!item) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
-          }
-          return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
-        }),
-        datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isItemLink, ({node, key, children}) => {
-          if (!props.renderLinkToRecord) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
-          }
-          if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
-          }
-          const item = props.data.links.find((item2) => item2.id === node.item);
-          if (!item) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
-          }
-          return appendKeyToValidElement(props.renderLinkToRecord({
-            record: item,
-            children,
-            transformedMeta: node.meta ? (props.metaTransformer || datocmsStructuredTextGenericHtmlRenderer.defaultMetaTransformer)({
-              node,
-              meta: node.meta
-            }) : null
-          }), key);
-        }),
-        datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isBlock, ({node, key}) => {
-          if (!props.renderBlock) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
-          }
-          if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' 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.renderBlock({record: item}), key);
-        })
-      ].concat(props.customRules || []), props.metaTransformer);
+      return datocmsStructuredTextGenericHtmlRenderer.render(props.data, {
+        adapter: {
+          renderText: props.renderText || defaultAdapter.renderText,
+          renderNode: props.renderNode || defaultAdapter.renderNode,
+          renderFragment: props.renderFragment || defaultAdapter.renderFragment
+        },
+        metaTransformer: props.metaTransformer,
+        customMarkRules: props.customMarkRules,
+        customNodeRules: [
+          datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isRoot, ({adapter: {renderNode}, key, children}) => {
+            return renderNode("div", {key}, children);
+          }),
+          datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isInlineItem, ({node, key}) => {
+            if (!props.renderInlineRecord) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
+            }
+            if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
+            }
+            const item = props.data.links.find((item2) => item2.id === node.item);
+            if (!item) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
+            }
+            return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
+          }),
+          datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isItemLink, ({node, key, children}) => {
+            if (!props.renderLinkToRecord) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
+            }
+            if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
+            }
+            const item = props.data.links.find((item2) => item2.id === node.item);
+            if (!item) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
+            }
+            return appendKeyToValidElement(props.renderLinkToRecord({
+              record: item,
+              children,
+              transformedMeta: node.meta ? (props.metaTransformer || datocmsStructuredTextGenericHtmlRenderer.defaultMetaTransformer)({
+                node,
+                meta: node.meta
+              }) : null
+            }), key);
+          }),
+          datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isBlock, ({node, key}) => {
+            if (!props.renderBlock) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
+            }
+            if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' 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.renderBlock({record: item}), key);
+          }),
+          ...props.customNodeRules || props.customRules || []
+        ]
+      });
     };
   }
 });
@@ -473,4 +489,4 @@ const toHead = (...args) => {
       });
     })
   };
-};Object.defineProperty(exports,'renderRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderRule;}});Object.defineProperty(exports,'RenderError',{enumerable:true,get:function(){return datocmsStructuredTextUtils.RenderError;}});Object.defineProperty(exports,'StructuredTextDocument',{enumerable:true,get:function(){return datocmsStructuredTextUtils.Document;}});Object.defineProperty(exports,'StructuredTextGraphQlResponse',{enumerable:true,get:function(){return datocmsStructuredTextUtils.StructuredText;}});exports.DatocmsImagePlugin=DatocmsImagePlugin;exports.DatocmsStructuredTextPlugin=DatocmsStructuredTextPlugin;exports.Image=Image;exports.StructuredText=StructuredText;exports.appendKeyToValidElement=appendKeyToValidElement;exports.defaultAdapter=defaultAdapter;exports.toHead=toHead;Object.defineProperty(exports,'__esModule',{value:true});return exports;}({},hypenateStyleName,VueDemi,datocmsStructuredTextGenericHtmlRenderer,datocmsStructuredTextUtils));
+};Object.defineProperty(exports,'renderMarkRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderMarkRule;}});Object.defineProperty(exports,'renderNodeRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderNodeRule;}});Object.defineProperty(exports,'renderRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderNodeRule;}});Object.defineProperty(exports,'RenderError',{enumerable:true,get:function(){return datocmsStructuredTextUtils.RenderError;}});exports.DatocmsImagePlugin=DatocmsImagePlugin;exports.DatocmsStructuredTextPlugin=DatocmsStructuredTextPlugin;exports.Image=Image;exports.StructuredText=StructuredText;exports.appendKeyToValidElement=appendKeyToValidElement;exports.defaultAdapter=defaultAdapter;exports.toHead=toHead;Object.defineProperty(exports,'__esModule',{value:true});return exports;}({},hypenateStyleName,VueDemi,datocmsStructuredTextGenericHtmlRenderer,datocmsStructuredTextUtils));

package/dist/index.umd.js

@@ -337,13 +337,14 @@ const hAdapter = (tagName, props, childOrChildren) => {
 const defaultAdapter = {
   renderNode: hAdapter,
   renderMark: hAdapter,
-  renderFragment: (children, key) => crossH("div", {key}, children),
+  renderFragment: (children, key) => children,
   renderText: (text, key) => text
 };
 function appendKeyToValidElement(element, key) {
   if (vueDemi.isVue3) {
-    if (vueDemi.isVNode(element) && element.key === null) {
-      return vueDemi.cloneVNode(element, {key});
+    const {isVNode, cloneVNode} = require("vue");
+    if (isVNode(element) && element.key === null) {
+      return cloneVNode(element, {key});
     }
   } else if (element && typeof element === "object" && (element.key === null || element.key === void 0)) {
     element.key = key;
@@ -360,6 +361,12 @@ const StructuredText = vueDemi.defineComponent({
     customRules: {
       type: Array
     },
+    customNodeRules: {
+      type: Array
+    },
+    customMarkRules: {
+      type: Array
+    },
     renderInlineRecord: {
       type: Function
     },
@@ -376,58 +383,67 @@ const StructuredText = vueDemi.defineComponent({
   },
   setup(props) {
     return () => {
-      return datocmsStructuredTextGenericHtmlRenderer.render({
-        renderText: props.renderText || defaultAdapter.renderText,
-        renderNode: props.renderNode || defaultAdapter.renderNode,
-        renderFragment: props.renderFragment || defaultAdapter.renderFragment
-      }, props.data, [
-        datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isInlineItem, ({node, key}) => {
-          if (!props.renderInlineRecord) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
-          }
-          if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
-          }
-          const item = props.data.links.find((item2) => item2.id === node.item);
-          if (!item) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
-          }
-          return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
-        }),
-        datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isItemLink, ({node, key, children}) => {
-          if (!props.renderLinkToRecord) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
-          }
-          if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
-          }
-          const item = props.data.links.find((item2) => item2.id === node.item);
-          if (!item) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
-          }
-          return appendKeyToValidElement(props.renderLinkToRecord({
-            record: item,
-            children,
-            transformedMeta: node.meta ? (props.metaTransformer || datocmsStructuredTextGenericHtmlRenderer.defaultMetaTransformer)({
-              node,
-              meta: node.meta
-            }) : null
-          }), key);
-        }),
-        datocmsStructuredTextGenericHtmlRenderer.renderRule(datocmsStructuredTextUtils.isBlock, ({node, key}) => {
-          if (!props.renderBlock) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
-          }
-          if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
-            throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' 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.renderBlock({record: item}), key);
-        })
-      ].concat(props.customRules || []), props.metaTransformer);
+      return datocmsStructuredTextGenericHtmlRenderer.render(props.data, {
+        adapter: {
+          renderText: props.renderText || defaultAdapter.renderText,
+          renderNode: props.renderNode || defaultAdapter.renderNode,
+          renderFragment: props.renderFragment || defaultAdapter.renderFragment
+        },
+        metaTransformer: props.metaTransformer,
+        customMarkRules: props.customMarkRules,
+        customNodeRules: [
+          datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isRoot, ({adapter: {renderNode}, key, children}) => {
+            return renderNode("div", {key}, children);
+          }),
+          datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isInlineItem, ({node, key}) => {
+            if (!props.renderInlineRecord) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but no 'renderInlineRecord' prop is specified!`, node);
+            }
+            if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but .links is not present!`, node);
+            }
+            const item = props.data.links.find((item2) => item2.id === node.item);
+            if (!item) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'inlineItem' node, but cannot find a record with ID ${node.item} inside .links!`, node);
+            }
+            return appendKeyToValidElement(props.renderInlineRecord({record: item}), key);
+          }),
+          datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isItemLink, ({node, key, children}) => {
+            if (!props.renderLinkToRecord) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but no 'renderLinkToRecord' prop is specified!`, node);
+            }
+            if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.links) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but .links is not present!`, node);
+            }
+            const item = props.data.links.find((item2) => item2.id === node.item);
+            if (!item) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains an 'itemLink' node, but cannot find a record with ID ${node.item} inside .links!`, node);
+            }
+            return appendKeyToValidElement(props.renderLinkToRecord({
+              record: item,
+              children,
+              transformedMeta: node.meta ? (props.metaTransformer || datocmsStructuredTextGenericHtmlRenderer.defaultMetaTransformer)({
+                node,
+                meta: node.meta
+              }) : null
+            }), key);
+          }),
+          datocmsStructuredTextGenericHtmlRenderer.renderNodeRule(datocmsStructuredTextUtils.isBlock, ({node, key}) => {
+            if (!props.renderBlock) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' node, but no 'renderBlock' prop is specified!`, node);
+            }
+            if (!datocmsStructuredTextUtils.isStructuredText(props.data) || !props.data.blocks) {
+              throw new datocmsStructuredTextUtils.RenderError(`The Structured Text document contains a 'block' 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.renderBlock({record: item}), key);
+          }),
+          ...props.customNodeRules || props.customRules || []
+        ]
+      });
     };
   }
 });
@@ -473,4 +489,4 @@ const toHead = (...args) => {
       });
     })
   };
-};Object.defineProperty(exports,'renderRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderRule;}});Object.defineProperty(exports,'RenderError',{enumerable:true,get:function(){return datocmsStructuredTextUtils.RenderError;}});Object.defineProperty(exports,'StructuredTextDocument',{enumerable:true,get:function(){return datocmsStructuredTextUtils.Document;}});Object.defineProperty(exports,'StructuredTextGraphQlResponse',{enumerable:true,get:function(){return datocmsStructuredTextUtils.StructuredText;}});exports.DatocmsImagePlugin=DatocmsImagePlugin;exports.DatocmsStructuredTextPlugin=DatocmsStructuredTextPlugin;exports.Image=Image;exports.StructuredText=StructuredText;exports.appendKeyToValidElement=appendKeyToValidElement;exports.defaultAdapter=defaultAdapter;exports.toHead=toHead;Object.defineProperty(exports,'__esModule',{value:true});})));
+};Object.defineProperty(exports,'renderMarkRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderMarkRule;}});Object.defineProperty(exports,'renderNodeRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderNodeRule;}});Object.defineProperty(exports,'renderRule',{enumerable:true,get:function(){return datocmsStructuredTextGenericHtmlRenderer.renderNodeRule;}});Object.defineProperty(exports,'RenderError',{enumerable:true,get:function(){return datocmsStructuredTextUtils.RenderError;}});exports.DatocmsImagePlugin=DatocmsImagePlugin;exports.DatocmsStructuredTextPlugin=DatocmsStructuredTextPlugin;exports.Image=Image;exports.StructuredText=StructuredText;exports.appendKeyToValidElement=appendKeyToValidElement;exports.defaultAdapter=defaultAdapter;exports.toHead=toHead;Object.defineProperty(exports,'__esModule',{value:true});})));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",
@@ -12,6 +12,7 @@
   "module": "./dist/index.esm.js",
   "unpkg": "./dist/index.min.js",
   "types": "./dist/index.d.ts",
+  "license": "MIT",
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -27,8 +28,8 @@
     "test": "jest src"
   },
   "dependencies": {
-    "datocms-structured-text-generic-html-renderer": "^1.0.14",
-    "datocms-structured-text-utils": "^1.0.14",
+    "datocms-structured-text-generic-html-renderer": "^1.3.0",
+    "datocms-structured-text-utils": "^1.1.0",
     "hyphenate-style-name": "^1.0.4",
     "vue-demi": "^0.7.5"
   },