@heartlandone/vega 2.34.0 → 2.35.0-RTE-preview

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

@@ -2,29 +2,313 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-019d3c00.js');
-const component = require('./component-63af66ea.js');
-const node_abstract = require('./node.abstract-f8075f84.js');
-const textColorToolbarButtonSlimmer = require('./text-color-toolbar-button-slimmer-b1c9f40e.js');
-const subStateObserverSlimmer = require('./sub-state-observer-slimmer-10c0d402.js');
-const ui = require('./ui-b5906704.js');
-const textNode = require('./text-node-0d12da5a.js');
+const index = require('./index-09acd3c9.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
+const component = require('./component-73a88c4e.js');
+const nodeAnnotation_abstract = require('./node-annotation.abstract-e5d3a859.js');
+const imageAnnotationAction = require('./image-annotation-action-d3e1699c.js');
+const listBlock = require('./list-block-91116257.js');
+const typeGuard = require('./type-guard-4ba85fdc.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
+const accessibility = require('./accessibility-bfa227f6.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5f0eae19.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-b97e46b5.js');
+const ui = require('./ui-5fd9b267.js');
 require('./_commonjsHelpers-537d719a.js');
 require('./static-subject-title-d66b88fb.js');
-require('./change-manager-bda1d107.js');
-require('./dom-node-subject-observer-factory-093462f1.js');
-require('./create-public-api-runtime-metrics-slimmer-8c6a8fb7.js');
-require('./dynamic-slimmer-dc30600a.js');
+require('./change-manager-a297e4d2.js');
 require('./vega-internal-event-id-85b68849.js');
-require('./internal-icon-manager-2282a62f.js');
-require('./icon-manager-36dcfb65.js');
-require('./type-guard-4ba85fdc.js');
+require('./internal-icon-manager-5ccb9443.js');
+require('./icon-manager-edc2400b.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./accessibility-bfa227f6.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+
+class RTEBlockRenderer {
+  constructor(block, renderContext) {
+    this.block = block;
+    this.renderContext = renderContext;
+  }
+  registerRef(ref) {
+    if (ref) {
+      nodeAnnotation_abstract.stateEntityRenderingRegistry.register(ref, this.block);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles() {
+    return Array.from(this.block.annotationMap.values())
+      .filter((annotation) => annotation instanceof nodeAnnotation_abstract.BlockAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(typeGuard.isNonNullable)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses() {
+    return Array.from(this.block.annotationMap.values())
+      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
+      .filter(typeGuard.isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' '), '');
+  }
+}
+
+class RTENodeRenderer {
+  constructor(node, renderContext) {
+    this.node = node;
+    this.renderContext = renderContext;
+  }
+  registerRef(ref) {
+    if (ref) {
+      nodeAnnotation_abstract.stateEntityRenderingRegistry.register(ref, this.node);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles() {
+    return Array.from(this.node.annotationMap.values())
+      .filter((annotation) => annotation instanceof nodeAnnotation_abstract.NodeAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(Boolean)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses() {
+    return Array.from(this.node.annotationMap.values())
+      .filter((annotation) => annotation instanceof nodeAnnotation_abstract.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 {
+  constructor(node, renderContext) {
+    super(node, renderContext);
+  }
+  render() {
+    const codeAnnotation = this.node.annotationMap.get(nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE);
+    if (codeAnnotation === null || codeAnnotation === void 0 ? void 0 : codeAnnotation.code) {
+      return (index.h("code", { style: super.getStyles(), class: super.getClasses(), ref: (ref) => this.registerRef(ref) }, this.node.text || listBlock.ZERO_WIDTH_SPACE));
+    }
+    return (index.h("span", { style: super.getStyles(), class: super.getClasses(), ref: (ref) => this.registerRef(ref) }, this.node.text || listBlock.ZERO_WIDTH_SPACE));
+  }
+  registerRef(ref) {
+    super.registerRef(ref);
+    if (ref) {
+      const textColorAnnotation = this.node.getAnnotationByType('TEXT_COLOR');
+      if (textColorAnnotation) {
+        imageAnnotationAction.TextNodeRenderingRegistry.register(ref, textColorAnnotation);
+      }
+    }
+  }
+}
+
+class RTETextBlockRenderer extends RTEBlockRenderer {
+  constructor(block, renderContext) {
+    super(block, renderContext);
+  }
+  render() {
+    const BlockTag = this.getBlockTagByType(this.block.type);
+    return (index.h(BlockTag, { ref: (ref) => super.registerRef(ref), style: super.getStyles(), class: super.getClasses() }, this.renderNodes()));
+  }
+  renderNodes() {
+    const linkGroupAnnotation = this.block.getAnnotationByType(nodeAnnotation_abstract.InternalAnnotationTypeEnum.LINK_GROUP);
+    return linkGroupAnnotation
+      ? this.renderLinkNodes(this.block.nodes, this.renderContext)
+      : this.block.nodes.map((node) => new RTETextNodeRenderer(node, this.renderContext).render());
+  }
+  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';
+    }
+  }
+  renderLinkNodes(nodes, { editable }) {
+    const blockNodes = this.groupNodesByLink(nodes);
+    return blockNodes.flatMap((item) => {
+      if (this.isLinkGroup(item)) {
+        const linkAnnotation = item[0].getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK);
+        return editable
+          ? this.renderLinkEditorWrapper(item, linkAnnotation)
+          : this.renderLink(item, linkAnnotation);
+      }
+      return new RTETextNodeRenderer(item).render();
+    });
+  }
+  groupNodesByLink(nodes) {
+    return nodes.reduce((acc, node) => {
+      const nodeLinkAnnotation = node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK);
+      const lastGroup = acc[acc.length - 1];
+      if (typeGuard.isNonNullable(nodeLinkAnnotation)) {
+        if (lastGroup &&
+          this.isLinkGroup(lastGroup) &&
+          lastGroup[0].getAnnotationByType(nodeAnnotation_abstract.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 = createPublicApiRuntimeMetricsSlimmer.generateUUID();
+          linkNodes.forEach((node) => {
+            const linkAnnotationAction = new listBlock.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(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK));
+          return;
+        }
+      }
+    };
+    let linkWrapperRef;
+    return (index.h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
+        if (ref) {
+          linkWrapperRef = ref;
+        }
+      } },
+      this.renderLink(linkNodes, linkAnnotation),
+      index.h("vega-rich-text-link-editor", { record: {
+          text: textFromNodes,
+          url: href,
+        }, ref: (ref) => {
+          if (ref) {
+            ref.target = linkWrapperRef;
+            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, handleChange);
+          }
+        } })));
+  }
+  renderLink(linkNodes, linkAnnotation) {
+    const { href } = linkAnnotation.link;
+    return (index.h("a", { class: "v-rte--link", href: href, target: "_blank" }, linkNodes.map((node) => new RTETextNodeRenderer(node).render())));
+  }
+}
+
+class RTEImageNodeRenderer extends RTENodeRenderer {
+  constructor(node, renderContext) {
+    super(node, renderContext);
+    this.handleChange = ({ detail, }) => {
+      switch (detail.action) {
+        case 'edit': {
+          const size = detail.payload.size;
+          const alt = detail.payload.alt;
+          this.node.apply(new imageAnnotationAction.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(() => {
+            nodeAnnotation_abstract.stateEntityRenderingRegistry.getDOMByEntity(this.node).dispatchEvent(event);
+          }, 50);
+          break;
+        }
+      }
+    };
+  }
+  render() {
+    const imageAnnotation = this.node.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE);
+    const { size, alt } = imageAnnotation || new listBlock.ImageAnnotation('md', '');
+    return this.renderContext.editable ? (index.h("vega-rich-text-image-editor", { style: super.getStyles(), size: size, alt: alt, ref: (ref) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, this.handleChange);
+      } }, this.renderImage(alt))) : (this.renderImage(alt));
+  }
+  renderImage(alt) {
+    return (index.h("img", { style: this.renderContext.editable ? { width: '100%' } : super.getStyles(), alt: alt, src: this.node.url, ref: (ref) => super.registerRef(ref) }));
+  }
+}
+
+class RTEImageBlockRenderer extends RTEBlockRenderer {
+  constructor(block, renderContext) {
+    super(block, renderContext);
+  }
+  render() {
+    return (index.h("div", { style: Object.assign({}, super.getStyles()), ref: (ref) => super.registerRef(ref), class: super.getClasses() }, this.block.nodes.map((node) => {
+      return new RTEImageNodeRenderer(node, this.renderContext).render();
+    })));
+  }
+}
+
+class RTEListItemBlockRenderer extends RTETextBlockRenderer {
+  constructor(block, renderContext) {
+    super(block, renderContext);
+  }
+  render() {
+    return (index.h("li", { ref: (ref) => super.registerRef(ref), style: super.getStyles(), class: super.getClasses() },
+      super.renderNodes(),
+      this.renderChildren(this.block.children)));
+  }
+  renderChildren(children) {
+    return children === null || children === void 0 ? void 0 : children.map((block) => new RTEListBlockRenderer(block, this.renderContext).render());
+  }
+}
+
+class RTEListBlockRenderer extends RTEBlockRenderer {
+  constructor(block, renderContext) {
+    super(block, renderContext);
+  }
+  render() {
+    const BlockTag = this.block.type === 'number-list' ? 'ol' : 'ul';
+    return (index.h(BlockTag, { ref: (ref) => super.registerRef(ref) }, this.block.blocks.map((listItemBlock) => new RTEListItemBlockRenderer(listItemBlock, this.renderContext).render())));
+  }
+}
 
 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;
@@ -35,7 +319,7 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 class VegaRichTextContentRenderer extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
     super();
-    node_abstract.VegaDarkModeStyleController.registerCustomDarkModeColor(textColorToolbarButtonSlimmer.TextColorToolbarButtonSlimmer.formatDarkModeColor());
+    nodeAnnotation_abstract.VegaDarkModeStyleController.registerCustomDarkModeColor(imageAnnotationAction.TextColorToolbarButtonSlimmer.formatDarkModeColor());
   }
   /**
    * Get the rich text content element
@@ -46,15 +330,29 @@ class VegaRichTextContentRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.richTextContentRef;
   }
   render() {
-    return globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.renderRichTextContent());
+    return index.h(index.Host, null, this.renderRichTextContent());
   }
   renderRichTextContent() {
     const showPlaceholder = this.shouldShowPlaceholder();
-    return (globalSlimmerRegistry.h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable }, this.renderContent()));
+    return (index.h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable }, this.renderContent()));
   }
   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) => {
+      return this.getBlockRenderer(block, renderContext).render();
+    });
+  }
+  getBlockRenderer(block, renderContext) {
+    if (block instanceof listBlock.RTETextBlock && !(block instanceof listBlock.RTEListItemBlock)) {
+      return new RTETextBlockRenderer(block, renderContext);
+    }
+    else if (block instanceof listBlock.RTEListBlock) {
+      return new RTEListBlockRenderer(block, renderContext);
+    }
+    else if (block instanceof listBlock.RTEImageBlock) {
+      return new RTEImageBlockRenderer(block, renderContext);
+    }
   }
   shouldShowPlaceholder() {
     var _a;
@@ -133,7 +431,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaRichTextContent = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.vegaRichTextContentRenderer = new VegaRichTextContentRenderer();
@@ -154,13 +452,13 @@ const VegaRichTextContent = class {
     this.vegaRichTextContentRenderer.getRichTextContentRef().focus();
     const richTextEditorRef = ui.findParent(this.host, 'vega-rich-text-editor');
     if (richTextEditorRef) {
-      await textNode.waitForComponentDidRender(richTextEditorRef);
+      await listBlock.waitForComponentDidRender(richTextEditorRef);
     }
   }
   render() {
     return component.sanitizeVegaComponent(this.vegaRichTextContentRenderer.render(), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
 };
 __decorate([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()