@globalpayments/vega 2.34.0 → 2.35.0

package/dist/esm/vega-rich-text-content.entry.js

@@ -1,26 +1,312 @@
-import { d as MapToComponentField, V as VegaSlimmer, h, H as Host, r as registerInstance, g as getElement, I as InjectVegaSlimmer } from './global-slimmer-registry-6887a59f.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-21813c36.js';
-import { s as sanitizeVegaComponent } from './component-051a594c.js';
-import { d as VegaDarkModeStyleController } from './node.abstract-93746055.js';
-import { T as TextColorToolbarButtonSlimmer } from './text-color-toolbar-button-slimmer-d0255b98.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-0968ce04.js';
-import { f as findParent } from './ui-5600b48f.js';
-import { b as waitForComponentDidRender } from './text-node-6f7d736c.js';
+import { h, H as Host, r as registerInstance, g as getElement } from './index-187f71d1.js';
+import { c as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { s as stateEntityRenderingRegistry, B as BlockAnnotation, N as NodeAnnotation, c as NodeAnnotationTypeEnum, I as InternalAnnotationTypeEnum, e as VegaDarkModeStyleController } from './node-annotation.abstract-d7d52bce.js';
+import { T as TextNodeRenderingRegistry, I as ImageAnnotationAction, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-a8e00f28.js';
+import { Z as ZERO_WIDTH_SPACE, L as LinkAnnotationAction, b as RTETextBlock, I as ImageAnnotation, a as RTEImageBlock, R as RTEListBlock, d as waitForComponentDidRender } from './list-block-ba82c846.js';
+import { i as isNonNullable } from './type-guard-158f6d7a.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-9ab05523.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
+import { f as VegaChange } from './dom-node-subject-factory-5831cdd4.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-403cc4e7.js';
+import { f as findParent } from './ui-62e4be97.js';
 import './_commonjsHelpers-9943807e.js';
 import './static-subject-title-e06a3840.js';
-import './change-manager-8f5b72c2.js';
-import './dom-node-subject-observer-factory-80358591.js';
-import './create-public-api-runtime-metrics-slimmer-14cb4599.js';
-import './dynamic-slimmer-85746483.js';
+import './change-manager-6a7eb88c.js';
 import './vega-internal-event-id-4af5c6e9.js';
-import './internal-icon-manager-7fc7535a.js';
-import './icon-manager-3cef32e7.js';
-import './type-guard-158f6d7a.js';
+import './internal-icon-manager-900a5bb4.js';
+import './icon-manager-b889176b.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
 import './regex-dfe11abf.js';
 import './typography-396de03f.js';
-import './accessibility-e5fd0fab.js';
+import './dynamic-slimmer-90b8af32.js';
+
+class RTEBlockRenderer {
+  registerRef(ref, block) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, block);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @param {RTEBlock} block - RTE block entity
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles(block) {
+    return Array.from(block.annotationMap.values())
+      .filter((annotation) => annotation instanceof BlockAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(isNonNullable)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTEBlock} block - RTE block entity
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses(block) {
+    return Array.from(block.annotationMap.values())
+      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
+      .filter(isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' '), '');
+  }
+}
+
+class RTENodeRenderer {
+  registerRef(ref, node) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, node);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @param {RTENode} node - The DTO node
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles(node) {
+    return Array.from(node.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(Boolean)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTENode} node - The DTO node
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses(node) {
+    return Array.from(node.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
+      .filter(Boolean)
+      .reduce((pre, cur) => [pre, cur].join(' '), '');
+  }
+}
+
+class RTETextNodeRenderer extends RTENodeRenderer {
+  render(node) {
+    const codeAnnotation = node.annotationMap.get(NodeAnnotationTypeEnum.CODE);
+    if (codeAnnotation === null || codeAnnotation === void 0 ? void 0 : codeAnnotation.code) {
+      return (h("code", { style: super.getStyles(node), class: super.getClasses(node), ref: (ref) => this.registerRef(ref, node) }, node.text || ZERO_WIDTH_SPACE));
+    }
+    return (h("span", { style: super.getStyles(node), class: super.getClasses(node), ref: (ref) => this.registerRef(ref, node) }, node.text || ZERO_WIDTH_SPACE));
+  }
+  registerRef(ref, node) {
+    super.registerRef(ref, node);
+    if (ref) {
+      const textColorAnnotation = node.getAnnotationByType('TEXT_COLOR');
+      if (textColorAnnotation) {
+        TextNodeRenderingRegistry.register(ref, textColorAnnotation);
+      }
+    }
+  }
+}
+const RTETextNodeRenderer$1 = new RTETextNodeRenderer();
+
+/**
+ * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
+ */
+class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
+  renderNodes(block, renderContext) {
+    const linkGroupAnnotation = block.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    return linkGroupAnnotation
+      ? this.renderLinkNodes(block.nodes, renderContext)
+      : block.nodes.map((node) => RTETextNodeRenderer$1.render(node));
+  }
+  renderLinkNodes(nodes, { editable }) {
+    const blockNodes = this.groupNodesByLink(nodes);
+    return blockNodes.flatMap((item) => {
+      if (this.isLinkGroup(item)) {
+        const linkAnnotation = item[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        return editable
+          ? this.renderLinkEditorWrapper(item, linkAnnotation)
+          : this.renderLink(item, linkAnnotation);
+      }
+      return RTETextNodeRenderer$1.render(item);
+    });
+  }
+  groupNodesByLink(nodes) {
+    return nodes.reduce((acc, node) => {
+      const nodeLinkAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+      const lastGroup = acc[acc.length - 1];
+      if (isNonNullable(nodeLinkAnnotation)) {
+        if (lastGroup &&
+          this.isLinkGroup(lastGroup) &&
+          lastGroup[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK).toEqual(nodeLinkAnnotation)) {
+          lastGroup.push(node);
+        }
+        else {
+          acc.push([node]);
+        }
+      }
+      else {
+        acc.push(node);
+      }
+      return acc;
+    }, []);
+  }
+  isLinkGroup(item) {
+    return Array.isArray(item);
+  }
+  renderLinkEditorWrapper(linkNodes, linkAnnotation) {
+    const { href } = linkAnnotation.link;
+    const textFromNodes = linkNodes.map((node) => node.text).join('');
+    const handleChange = ({ detail, }) => {
+      switch (detail.action) {
+        case 'link': {
+          const { url, text } = detail.payload;
+          const textChanged = text !== textFromNodes;
+          const groupKey = generateUUID();
+          linkNodes.forEach((node) => {
+            const linkAnnotationAction = new LinkAnnotationAction({
+              link: { href: url, groupKey: groupKey },
+              newText: textChanged ? text : undefined,
+              needMergeNode: textChanged && linkNodes.length > 1,
+              doSplit: false,
+            });
+            node.apply(linkAnnotationAction);
+          });
+          return;
+        }
+        case 'unlink': {
+          linkNodes.forEach((node) => node.deleteAnnotationByType(NodeAnnotationTypeEnum.LINK));
+          return;
+        }
+      }
+    };
+    let linkWrapperRef;
+    return (h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
+        if (ref) {
+          linkWrapperRef = ref;
+        }
+      } },
+      this.renderLink(linkNodes, linkAnnotation),
+      h("vega-rich-text-link-editor", { record: {
+          text: textFromNodes,
+          url: href,
+        }, ref: (ref) => {
+          if (ref) {
+            ref.target = linkWrapperRef;
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
+          }
+        } })));
+  }
+  renderLink(linkNodes, linkAnnotation) {
+    const { href } = linkAnnotation.link;
+    return (h("a", { class: "v-rte--link", href: href, target: "_blank" }, linkNodes.map((node) => RTETextNodeRenderer$1.render(node))));
+  }
+}
+
+class RTETextBlockRenderer extends RTEBlockTextNodesRenderer {
+  canHandle(block) {
+    return block instanceof RTETextBlock;
+  }
+  render(block, renderContext) {
+    const BlockTag = this.getBlockTagByType(block.type);
+    return (h(BlockTag, { ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) }, super.renderNodes(block, renderContext)));
+  }
+  getBlockTagByType(type) {
+    switch (type) {
+      case 'title':
+      case 'subtitle':
+        return `div`;
+      case 'heading-1':
+        return `h1`;
+      case 'heading-2':
+        return `h2`;
+      case 'heading-3':
+        return `h3`;
+      case 'paragraph':
+        return 'p';
+    }
+  }
+}
+const RTETextBlockRenderer$1 = new RTETextBlockRenderer();
+
+class RTEImageNodeRenderer extends RTENodeRenderer {
+  constructor() {
+    super(...arguments);
+    this.handleChange = ({ detail }, node) => {
+      switch (detail.action) {
+        case 'edit': {
+          const size = detail.payload.size;
+          const alt = detail.payload.alt;
+          node.apply(new ImageAnnotationAction(size, alt));
+          break;
+        }
+        /*
+         * The below method is e2e-test covered in
+         * @see{module:vega-rich-text-editor-image-click-delete-button}
+         */
+        /* istanbul ignore next */
+        case 'delete': {
+          const event = new InputEvent('beforeinput', {
+            inputType: 'deleteContentBackward',
+            bubbles: true,
+          });
+          setTimeout(() => {
+            stateEntityRenderingRegistry.getDOMByEntity(node).dispatchEvent(event);
+          }, 50);
+          break;
+        }
+      }
+    };
+  }
+  render(node, renderContext) {
+    const imageAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    const { size, alt } = imageAnnotation || new ImageAnnotation('md', '');
+    return renderContext.editable ? (h("vega-rich-text-image-editor", { style: super.getStyles(node), size: size, alt: alt, ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => this.handleChange(e, node));
+      } }, this.renderImage(alt, node, renderContext))) : (this.renderImage(alt, node, renderContext));
+  }
+  renderImage(alt, node, renderContext) {
+    return (h("img", { style: renderContext.editable ? { width: '100%' } : super.getStyles(node), alt: alt, src: node.url, ref: (ref) => super.registerRef(ref, node) }));
+  }
+}
+const RTEImageNodeRenderer$1 = new RTEImageNodeRenderer();
+
+class RTEImageBlockRenderer extends RTEBlockRenderer {
+  canHandle(block) {
+    return block instanceof RTEImageBlock;
+  }
+  render(block, renderContext) {
+    return (h("div", { style: Object.assign({}, super.getStyles(block)), ref: (ref) => super.registerRef(ref, block), class: super.getClasses(block) }, block.nodes.map((node) => {
+      return RTEImageNodeRenderer$1.render(node, renderContext);
+    })));
+  }
+}
+const RTEImageBlockRenderer$1 = new RTEImageBlockRenderer();
+
+class RTEListItemBlockRenderer extends RTEBlockTextNodesRenderer {
+  render(block, renderContext) {
+    return (h("li", { ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) },
+      super.renderNodes(block, renderContext),
+      this.renderChildren(block.children, renderContext)));
+  }
+  renderChildren(children, renderContext) {
+    return children === null || children === void 0 ? void 0 : children.map((block) => RTEListBlockRenderer$1.render(block, renderContext));
+  }
+}
+const RTEListItemBlockRenderer$1 = new RTEListItemBlockRenderer();
+
+class RTEListBlockRenderer extends RTEBlockRenderer {
+  canHandle(block) {
+    return block instanceof RTEListBlock;
+  }
+  render(block, renderContext) {
+    const BlockTag = block.type === 'number-list' ? 'ol' : 'ul';
+    return (h(BlockTag, { ref: (ref) => super.registerRef(ref, block) }, block.blocks.map((listItemBlock) => RTEListItemBlockRenderer$1.render(listItemBlock, renderContext))));
+  }
+}
+const RTEListBlockRenderer$1 = new RTEListBlockRenderer();
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -31,6 +317,11 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
+    this.blockRenderers = [
+      RTETextBlockRenderer$1,
+      RTEImageBlockRenderer$1,
+      RTEListBlockRenderer$1,
+    ];
     VegaDarkModeStyleController.registerCustomDarkModeColor(TextColorToolbarButtonSlimmer.formatDarkModeColor());
   }
   /**
@@ -50,7 +341,16 @@ class VegaRichTextContentRenderer extends VegaSlimmer {
   }
   renderContent() {
     var _a;
-    return (_a = this.content) === null || _a === void 0 ? void 0 : _a.blocks.map((block) => block.render({ editable: this.contentEditable }));
+    const renderContext = { editable: this.contentEditable };
+    return (_a = this.content) === null || _a === void 0 ? void 0 : _a.blocks.map((block) => {
+      const blockRenderer = this.getBlockRenderer(block);
+      if (blockRenderer) {
+        return blockRenderer.render(block, renderContext);
+      }
+    });
+  }
+  getBlockRenderer(block) {
+    return this.blockRenderers.find((renderer) => renderer.canHandle(block));
   }
   shouldShowPlaceholder() {
     var _a;