kontent-rich-text-for-vue/dist/kontent-rich-text-for-vue.umd.js

A component for rendering Kentico Kontent rich text elements in vue.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('parse5')) :
  typeof define === 'function' && define.amd ? define(['exports', 'parse5'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.vueKontentRichText = {}, global.parse5));
})(this, (function (exports, parse5) { 'use strict';

  const getLinkType = (data) => {
    if (data['data-item-id']) {
      return 'content-item';
    }
    if (data['data-asset-id']) {
      return 'asset';
    }
    if (data['data-email-address']) {
      return 'email';
    }
    return 'web-url';
  };

  var linkFactory = ({getLinkComponent, getItemLinkUrl}) => ({
    name: 'rich-text-link',
    functional: true,
    props: ['block'],
    render: (createElement, context) => {
      const {data} = context.props.block;

      const itemId = data['data-item-id'];
      if (getItemLinkUrl && itemId) {
        data.href = getItemLinkUrl(itemId);
      }

      if (getLinkComponent) {
        const linkType = getLinkType(data);
        const component = getLinkComponent(linkType);
        if (component) {
          return createElement(component, {props: {link: {...data}}}, context.children);
        }
      }

      return createElement('a', {domProps: {...data}}, context.children);
    }
  });

  var script$2 = {
      name: 'rich-text-element',
      functional: true,
      props: ['block', 'linkedItemComponent', 'linkComponent'],
      render: (createElement, context) => {
        const {
          block,
          linkedItemComponent,
          linkComponent = linkFactory({})
        } = context.props;

        switch (block.type) {
          case 'OBJECT':
            return createElement(linkedItemComponent, {props: {block}});
          case 'A':
            return createElement(linkComponent, {props: {block}}, context.children);
          case '#text':
            return context._v(block.value);
          default:
            return createElement(block.type, {domProps: {...block.data}}, context.children);
        }
      }
    };

  script$2.__file = "src/components/rich-text-element.vue";

  var script$1 = {
      functional: true,
      name: 'rich-text-block',
      props: ['block', 'linkedItemComponent', 'linkComponent', 'blockComponent'],
      render: (createElement, context) => {
        const {block, linkedItemComponent, linkComponent, blockComponent} = context.props;

        return createElement(script$2, {props: {block, linkedItemComponent, linkComponent}}, block.children.map(child =>
          createElement(blockComponent, {props: {block: child, linkedItemComponent, linkComponent, blockComponent}})));
      }
    };

  script$1.__file = "src/components/rich-text-block.vue";

  const parseAttributes = (node) => {
    if (node.attrs) {
      return [...node.attrs].reduce((attributes, property) => {
        attributes[property.name] = property.value;
        return attributes;
      }, {});
    }
  };

  const parseChildren = (parent) =>
    parent.childNodes
      ? [...parent.childNodes].reduce((blocks, node) => {
        blocks.push({
          type: node.nodeName === '#text' ? node.nodeName : node.nodeName.toUpperCase(), // Let's not make a breaking change here
          value: node.value,
          children: parseChildren(node),
          data: parseAttributes(node),
        });
        return blocks;
      }, [])
      : [];

  const parseHtml = (htmlString) => {
    const documentFragment = parse5.parseFragment(htmlString);

    return parseChildren(documentFragment);
  };

  var script = {
      name: 'rich-text',
      functional: true,
      props: ['content', 'linkedItemComponent', 'linkComponent'],
      render: (createElement, context) => {
        const {content, linkedItemComponent, linkComponent} = context.props;

        // A temporary measure until the delivery API returns JSON
        const blocks = parseHtml(content);

        return blocks.map(block =>
          createElement(script$1, {
            props: {
              block,
              linkedItemComponent,
              linkComponent,
              blockComponent: script$1
            }
          }));
      }
    };

  script.__file = "src/components/rich-text.vue";

  var linkedItemFactory = (getLinkedItemComponent, getLinkedItemData) => ({
    name: 'linked-item',
    functional: true,
    props: ['block'],
    render: (createElement, context) => {
      const {block} = context.props;
      const linkedItem = getLinkedItemData(block.data['data-codename']);
      if (linkedItem) {
        const {system, ...elements} = linkedItem;
        const component = getLinkedItemComponent(system.type);
        if (component) {
          return createElement(component, {props: {item: {...elements}}}, context.children);
        }
      }

      return createElement('object', {domProps: {...block.data}}, context.children);
    }
  });

  exports.RichText = script;
  exports.linkFactory = linkFactory;
  exports.linkedItemFactory = linkedItemFactory;

  Object.defineProperty(exports, '__esModule', { value: true });

}));