@globalpayments/vega 2.33.0 → 2.34.1

package/dist/collection/components/vega-rich-text-editor/dto/blocks/text-block.js

@@ -0,0 +1,412 @@
+import { h } from '@stencil/core';
+import { RTETextNode } from '../nodes/text-node';
+import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
+import { isNonNullable } from '../../../../types/type-guard';
+import { TextStyleAnnotation } from '../annotations/text-style-annotation';
+import { ModifyContentActionType } from '../actions/modify-content-action.abstract';
+import { RemoveChildAction } from '../actions/remove-child-action';
+import { AppendChildNodesAction } from '../actions/append-child-nodes-action';
+import { RTEBlock } from './block.abstract';
+import { InternalAnnotationTypeEnum } from '../annotations/annotation.abstract';
+import { TextStyleAnnotationAction } from '../actions/text-style-annotation-action';
+import { BoldAnnotationAction } from '../actions/bold-annotation-action';
+import { NodeAnnotationTypeEnum } from '../annotations/node-annotation.abstract';
+import { LinkAnnotationAction } from '../actions/link-annotation-action';
+import { LinkGroupAnnotationAction } from '../actions/link-group-annotation-action';
+import { SplitBlockWithNodeAction } from '../actions/split-block-with-node-action';
+import { generateUUID } from '../../../../utils/misc';
+import { ReplaceChildNodesAction } from '../actions/replace-child-nodes-action';
+import { MergeTwoBlocksNodesAction } from '../actions/merge-two-blocks-nodes-action';
+import { InsertBlocksAfterAction } from '../actions/insert-blocks-after-block';
+import { InsertBlocksBeforeAction } from '../actions/insert-blocks-before-block';
+import { UpdateTextAction } from '../actions/update-text-action';
+import { DeleteNodeAnnotationAction } from '../actions/delete-node-annotation-action';
+/**
+ * Text block
+ */
+export class RTETextBlock extends RTEBlock {
+  constructor(id, type) {
+    super(id);
+    this.nodes = [];
+    this.type = type;
+    if (RTETextBlock.isAcceptableTextStyle(type)) {
+      this.annotationMap = new Map([TextStyleAnnotation.from(type)]);
+    }
+    else {
+      this.annotationMap = new Map([TextStyleAnnotation.from('paragraph')]);
+    }
+  }
+  static from(block) {
+    const textBlock = new RTETextBlock(block.id, block.type);
+    const { annotations } = block;
+    textBlock.nodes = block.nodes.map((richText) => RTETextNode.from(richText, textBlock));
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          textBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    return textBlock;
+  }
+  /**
+   * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
+   * and value.
+   *
+   * @param {keyof VegaRTEBlockAnnotations} type - The `type` parameter is a key of the `VegaRTEBlockAnnotations` enum, which specifies
+   * the type of annotation entity to create.
+   * @param {unknown} value - The `value` parameter in the `createAnnotationEntity` function is the value
+   * that will be used to create the annotation entity. It can be of any type depending on the specific
+   * annotation being created.
+   * @returns {Nullable<[BlockAnnotationTypeEnum, BlockAnnotation]>} The `createAnnotationEntity` function returns a nullable tuple containing a
+   * `BlockAnnotationTypeEnum` and a `BlockAnnotation` object.
+   */
+  static createAnnotationEntity(type, value) {
+    if (type === 'textStyle') {
+      return TextStyleAnnotation.from(value);
+    }
+    else {
+      return super.createAnnotationEntity(type, value);
+    }
+  }
+  static isAcceptableTextStyle(type) {
+    return ['title', 'subtitle', 'paragraph', 'heading-1', 'heading-2', 'heading-3'].includes(type);
+  }
+  mergeNodes(action) {
+    this.nodes = this.nodes.reduce((prev, cur) => {
+      const lastNode = prev.at(-1);
+      if (action instanceof LinkAnnotationAction && action.needMergeNode) {
+        const lastNodeLinkAnnotation = lastNode === null || lastNode === void 0 ? void 0 : lastNode.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        const curNodeLinkAnnotation = cur.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        if (lastNodeLinkAnnotation &&
+          curNodeLinkAnnotation &&
+          lastNodeLinkAnnotation.toEqual(curNodeLinkAnnotation)) {
+          return prev;
+        }
+      }
+      // TODO: handle other cases like merge bold nodes
+      return [...prev, cur];
+    }, []);
+  }
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, nodes: this.nodes.map((node) => node.toJSON()) });
+  }
+  cloneWithNodes(nodes) {
+    const block = new RTETextBlock(generateUUID(), this.type);
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+  isNotEmpty() {
+    return this.nodes.length > 0 && this.nodes.some((node) => !node.isEmpty());
+  }
+  getLastNode() {
+    return this.nodes[this.nodes.length - 1];
+  }
+  render(renderContext, children) {
+    const BlockTag = this.getBlockTagByType(this.type);
+    return (h(BlockTag, { ref: this.registerRef.bind(this), style: this.getStyles(), class: super.getClasses() },
+      this.renderNodes(renderContext),
+      children));
+  }
+  registerRef(ref) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, this);
+    }
+  }
+  renderNodes(renderConfig = {}) {
+    const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    return linkGroupAnnotation
+      ? linkGroupAnnotation.renderNodes(this.nodes, renderConfig)
+      : this.nodes.map((node) => node.render());
+  }
+  doAnnotationActionApply(action) {
+    if (action instanceof TextStyleAnnotationAction) {
+      if (this.type !== 'list-item') {
+        this.type = action.textStyle;
+      }
+      if (action.bold) {
+        this.nodes.forEach((node) => {
+          const boldAnnotationAction = new BoldAnnotationAction(true);
+          boldAnnotationAction.doSplit = false;
+          node.apply(boldAnnotationAction);
+        });
+      }
+      else {
+        this.nodes.forEach((node) => {
+          node.apply(new DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
+        });
+      }
+      return;
+    }
+    if (action instanceof LinkGroupAnnotationAction) {
+      const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+      if (linkGroupAnnotation) {
+        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
+        linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+        this.annotationMap.set(InternalAnnotationTypeEnum.LINK_GROUP, linkGroupAnnotation);
+      }
+      return;
+    }
+  }
+  /**
+   * Apply a modify action to block
+   *
+   * @param {ModifyContentAction} action - Modify action
+   */
+  doModifyActionApply(action) {
+    switch (action.type) {
+      case ModifyContentActionType.DELETE_CHILD:
+        this.removeChildNode(action);
+        break;
+      case ModifyContentActionType.APPEND_CHILD_NODES:
+        this.appendChildNodes(action.entityToBeAppended);
+        break;
+      case ModifyContentActionType.CLEAR_CHILD_NODES:
+        this.nodes = [];
+        break;
+      case ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
+        action.newBlock = this.splitTextNodeBlock(action.splitPointNode, action.startOffsetOfNode);
+        break;
+      case ModifyContentActionType.REPLACE_CHILD_NODES:
+        this.nodes = [];
+        this.appendChildNodes(action.newChildNodes);
+        break;
+      case ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
+        this.mergeTwoBlocksNodes(action.blockNeedToBeMerged);
+        break;
+      case ModifyContentActionType.BREAK_SINGLE_BLOCK:
+        action.newBlock = this.breakSingleTextBlock(action.startContainerNode, action.startOffset);
+        break;
+      case ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
+        action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset);
+        break;
+      case ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
+        action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks);
+        break;
+      case ModifyContentActionType.TRANSFORM_LIST_BLOCK:
+        this.convertParagraphToList(action);
+        break;
+      case ModifyContentActionType.DELETE_BLOCK_CONTENT:
+        this.deleteNodeContent(action);
+        break;
+      case ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+        this.insertImage(action);
+        break;
+      case ModifyContentActionType.INSERT_NODES_BEFORE:
+        this.replaceNodeWithNodes(action.referNode, [
+          ...action.nodesToBeInserted,
+          action.referNode,
+        ]);
+        break;
+    }
+  }
+  splitTextNodeBlock(splitNode, startOffsetOfNode) {
+    if (splitNode) {
+      const beforeText = splitNode.text.slice(0, startOffsetOfNode);
+      const afterText = splitNode.text.slice(startOffsetOfNode);
+      const nodesSplitIndex = this.nodes.indexOf(splitNode);
+      if (nodesSplitIndex > -1) {
+        const beforeNodes = this.nodes.slice(0, nodesSplitIndex);
+        const afterNodes = this.nodes.slice(nodesSplitIndex + 1);
+        if (beforeText) {
+          beforeNodes.push(splitNode.cloneWithText(beforeText));
+        }
+        if (afterText) {
+          afterNodes.unshift(splitNode.cloneWithText(afterText));
+        }
+        this.apply(new ReplaceChildNodesAction(beforeNodes));
+        const newBlock = this.cloneWithNodes(afterNodes);
+        this.parent.apply(new InsertBlocksAfterAction(this, newBlock));
+        return newBlock;
+      }
+    }
+  }
+  isCaretPositionAtStart(node, startOffset) {
+    return node === this.nodes[0] && startOffset === 0;
+  }
+  isCaretPositionAtEnd(node, startOffset) {
+    const lastNode = this.nodes[this.nodes.length - 1];
+    return node === lastNode && (node.isEmpty() || startOffset === lastNode.text.length);
+  }
+  lineBreakSingleBlock(splitNode, startOffsetOfNode) {
+    if (splitNode) {
+      const lineBreakNode = new RTETextNode(generateUUID(), '\n', this);
+      const beforeText = splitNode.text.slice(0, startOffsetOfNode);
+      const afterText = splitNode.text.slice(startOffsetOfNode);
+      const nodesSplitIndex = this.nodes.indexOf(splitNode);
+      if (nodesSplitIndex > -1) {
+        const beforeNodes = this.nodes.slice(0, nodesSplitIndex);
+        const afterNodes = this.nodes.slice(nodesSplitIndex + 1);
+        if (beforeText) {
+          beforeNodes.push(splitNode.cloneWithText(beforeText));
+        }
+        if (afterText) {
+          afterNodes.unshift(splitNode.cloneWithText(afterText));
+        }
+        this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes);
+      }
+      return lineBreakNode;
+    }
+  }
+  lineBreakMultipleBlocks(selectedBlocks) {
+    const beforeNodes = this['nodes'];
+    const lineBreakNode = new RTETextNode(generateUUID(), '\n', this);
+    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
+    this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes);
+    return lineBreakNode;
+  }
+  deleteNodeContent(action) {
+    const startContainerNode = action.startContainerNode;
+    const startOffset = action.startOffset;
+    if (startOffset !== 0 && !startContainerNode.isEmpty()) {
+      const newText = startContainerNode.text.slice(0, startOffset - 1) +
+        startContainerNode.text.slice(startOffset);
+      startContainerNode.apply(new UpdateTextAction(newText));
+      if (newText) {
+        action.previousNode = startContainerNode;
+        return;
+      }
+      else {
+        const previousNode = this.getPreviousNode(startContainerNode);
+        // Remove the last character will not delete paragraph, the paragraph will removed after press delete again
+        if ((previousNode && previousNode.parentBlock === this && previousNode['text'] === '\n') ||
+          this.nodes.length === 1) {
+          action.previousNode = startContainerNode;
+          return;
+        }
+        else {
+          this.apply(new RemoveChildAction(startContainerNode));
+          action.previousNode = previousNode;
+          return;
+        }
+      }
+    }
+    else {
+      let previousNode = this.getPreviousNode(startContainerNode);
+      let nextNode = null;
+      if (this.nodes.length && previousNode && previousNode.parentBlock !== this) {
+        if (startContainerNode.isEmpty()) {
+          this.apply(new RemoveChildAction(startContainerNode));
+        }
+        previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(this));
+      }
+      else {
+        if (this.isContentFirstNode(startContainerNode) && startContainerNode.isEmpty()) {
+          nextNode = this.getNextNode(startContainerNode);
+        }
+        /**
+         * Remove line break
+         * @example caret at the first line
+         * \n
+         * test
+         */
+        if (startContainerNode.isEmpty()) {
+          this.apply(new RemoveChildAction(startContainerNode));
+        }
+        /**
+         * Remove line break
+         * @example caret at the begin of second line
+         * \n
+         * test
+         */
+        if (previousNode instanceof RTETextNode && previousNode.isEmpty()) {
+          const shouldRemoveNode = previousNode;
+          previousNode = this.getPreviousNode(previousNode);
+          shouldRemoveNode.parentBlock.apply(new RemoveChildAction(shouldRemoveNode));
+          if (!previousNode) {
+            nextNode = startContainerNode;
+          }
+        }
+      }
+      //Remove the paragraph block if the content is empty
+      if (this.nodes.length === 0) {
+        this.parent.apply(new RemoveChildAction(this));
+      }
+      if (previousNode) {
+        action.previousNode = previousNode;
+      }
+      else if (nextNode) {
+        action.nextNode = nextNode;
+      }
+    }
+  }
+  removeChildNode(action) {
+    this.nodes = this.nodes.filter((node) => node !== action.entityToBeRemoved);
+    if (this.nodes.length === 0) {
+      this.parent.apply(new RemoveChildAction(this));
+    }
+  }
+  mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes) {
+    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
+      afterNodes.push(new RTETextNode(generateUUID(), '\n', this, beforeNodes[beforeNodes.length - 1] && beforeNodes[beforeNodes.length - 1].annotationMap));
+    }
+    this.apply(new ReplaceChildNodesAction([...beforeNodes, lineBreakNode, ...afterNodes]));
+  }
+  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';
+      case 'list-item':
+        return 'li';
+    }
+  }
+  breakSingleTextBlock(splitNode, startOffsetOfNode) {
+    const newParagraph = this.copyInlineStyleToNewParagraph(splitNode);
+    if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksAfterAction(this, newParagraph));
+    }
+    else if (this.isCaretPositionAtStart(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksBeforeAction(this, newParagraph));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      this.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
+    }
+    return newParagraph;
+  }
+  convertParagraphToList(action) {
+    const bulletList = this.parent.createList(action.listType);
+    const listItems = action.selectedBlocks.map((node) => this.parent.toListItem(node));
+    bulletList.apply(new AppendChildNodesAction(listItems));
+    this.parent.apply(new InsertBlocksAfterAction(action.selectedBlocks[0], bulletList));
+    action.selectedBlocks.forEach((node) => {
+      node.parent.apply(new RemoveChildAction(node));
+    });
+  }
+  insertImage(action) {
+    const splitNode = action.splitPointNode;
+    const startOffsetOfNode = action.startOffsetOfNode;
+    const newImageBlock = action.imageBlockToBeInserted;
+    if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksAfterAction(this, newImageBlock));
+    }
+    else if (this.isCaretPositionAtStart(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksBeforeAction(this, newImageBlock));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      this.apply(splitBlockAction);
+      this.parent.apply(new InsertBlocksAfterAction(this, newImageBlock));
+    }
+  }
+  copyInlineStyleToNewParagraph(needCopedNode) {
+    const textNode = needCopedNode.cloneWithText('');
+    // The link annotation don't need inherited
+    textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+    const newParagraph = new RTETextBlock(generateUUID(), 'paragraph');
+    newParagraph.apply(new AppendChildNodesAction([textNode]));
+    return newParagraph;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/content-state.js

@@ -0,0 +1,135 @@
+import { RTEImageBlock } from './blocks/image-block';
+import { RTEListBlock } from './blocks/list-block';
+import { RTETextBlock } from './blocks/text-block';
+import { ModifyContentActionType } from './actions/modify-content-action.abstract';
+import { AppendChildNodesAction } from './actions/append-child-nodes-action';
+import { generateUUID } from '../../../utils/misc';
+import { BlockBaseOperator } from './helper/block-base-operator';
+import { RTEListItemBlock } from './blocks/list-item-block';
+import { SyncUpSelectionAction } from './actions/sync-up-selection-action';
+/**
+ * Class representing the content state of the rich text editor.
+ */
+export class VegaRTEContent extends BlockBaseOperator {
+  constructor(blocks) {
+    super();
+    blocks.forEach((block) => {
+      block.parent = this;
+    });
+    this.blocks = blocks;
+  }
+  /**
+   * Converts a JSON array of blocks to a class array of RTEContentBlock.
+   *
+   * @param {VegaRTEContentBlock[]} value The JSON array of blocks to convert.
+   * @returns {RTEContentBlock[]} The converted array of RTEContentBlock.
+   */
+  static fromJSON(value) {
+    const blocks = value.map((block) => {
+      switch (block.type) {
+        case 'paragraph':
+        case 'title':
+        case 'subtitle':
+        case 'heading-1':
+        case 'heading-2':
+        case 'heading-3': {
+          return RTETextBlock.from(block);
+        }
+        case 'image':
+          return RTEImageBlock.from(block);
+        case 'bullet-list':
+        case 'number-list':
+          return RTEListBlock.from(block);
+        default: {
+          throw new Error(`[Vega] Unknown block type: ${block.type}`);
+        }
+      }
+    });
+    return new VegaRTEContent(blocks);
+  }
+  /**
+   * Create an empty content state
+   *
+   * @returns {VegaRTEContent} An empty content state
+   */
+  static createEmptyContent() {
+    return VegaRTEContent.fromJSON([
+      {
+        id: generateUUID(),
+        type: 'paragraph',
+        nodes: [
+          {
+            id: generateUUID(),
+            type: 'text',
+            text: '',
+          },
+        ],
+      },
+    ]);
+  }
+  /**
+   * Clones the content state.
+   *
+   * @returns {VegaRTEContent} The cloned content state.
+   */
+  clone() {
+    return new VegaRTEContent([...this.blocks]);
+  }
+  /**
+   * Converts the content state to a JSON array of blocks.
+   *
+   * @returns {VegaRTEContentBlock[]} The JSON array of blocks.
+   */
+  toJSON() {
+    return this.blocks.map((block) => block.toJSON());
+  }
+  /**
+   * Internal method to add the block item, remove the block item
+   *
+   * @param {ModifyContentAction} action - Modify content action
+   */
+  apply(action) {
+    switch (action.type) {
+      case ModifyContentActionType.DELETE_CHILD:
+        this.removeChildBlock(action.entityToBeRemoved);
+        break;
+      case ModifyContentActionType.APPEND_CHILD_NODES:
+        this.appendChildBlocks(action.entityToBeAppended);
+        break;
+      case ModifyContentActionType.INSERT_BLOCKS_AFTER:
+        this.replaceBlockWithBlocks(action.referBlock, [
+          action.referBlock,
+          ...action.blocksToBeInserted,
+        ]);
+        break;
+      case ModifyContentActionType.INSERT_BLOCKS_BEFORE:
+        this.replaceBlockWithBlocks(action.referBlock, [
+          ...action.blocksToBeInserted,
+          action.referBlock,
+        ]);
+        break;
+    }
+  }
+  /**
+   * Convert text to list.
+   *
+   * @param {RTETextBlock} block - block
+   * @returns {RTEListItemBlock} list item block dto.
+   */
+  toListItem(block) {
+    block.nodes.map((node) => node.apply(new SyncUpSelectionAction()));
+    const listItemBlock = new RTEListItemBlock(generateUUID());
+    listItemBlock.apply(new AppendChildNodesAction(block['nodes']));
+    listItemBlock['annotationMap'] = block['annotationMap'];
+    return listItemBlock;
+  }
+  /**
+   * create list.
+   *
+   * @param {ListType} type - type
+   * @returns {RTEListBlock} list block dto.
+   */
+  createList(type) {
+    return new RTEListBlock(generateUUID(), type);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/helper/block-base-operator.js

@@ -0,0 +1,47 @@
+/** The class contains some common method to modify the blocks property */
+export class BlockBaseOperator {
+  /**
+   * Replaces a specific block with an array of blocks within a RTEContentBlock array.
+   *
+   * @param {RTEBlock} referBlock - Used as a reference block to identify the block that needs to be replaced in the `blocks` array.
+   * @param {RTEBlock[]} blocks - An array of RTEBlock objects that you want to replace the `referBlock` with in the `blocks` array.
+   */
+  replaceBlockWithBlocks(referBlock, blocks) {
+    if (this.blocks) {
+      blocks.forEach((block) => {
+        block.parent = this;
+      });
+      this.blocks = this.blocks.flatMap((block) => {
+        if (block === referBlock) {
+          return blocks;
+        }
+        else {
+          return block;
+        }
+      });
+    }
+  }
+  /**
+   * Appends new blocks to an array and sets their parent property to a specific type.
+   *
+   * @param {RTEBlock[]} newBlocks - An array of `RTEBlock` objects that are being passed to the `appendChildBlocks` method.
+   */
+  appendChildBlocks(newBlocks) {
+    if (this.blocks) {
+      newBlocks.forEach((block) => {
+        block.parent = this;
+      });
+      this.blocks = this.blocks.concat(newBlocks);
+    }
+  }
+  /**
+   * Removes a specified RTEBlock from an array of blocks.
+   *
+   * @param {RTEBlock} blockToBeRemoved - The block that needs to be removed from the `blocks` array.
+   */
+  removeChildBlock(blockToBeRemoved) {
+    if (this.blocks) {
+      this.blocks = this.blocks.filter((block) => block !== blockToBeRemoved);
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/nodes/image-node.js

@@ -0,0 +1,93 @@
+import { h } from '@stencil/core';
+import { NodeTypeEnum, RTENode } from './node.abstract';
+import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
+import { ImageAnnotation } from '../annotations/image-annotation';
+import { ImageAnnotationAction } from '../actions/image-annotation-action';
+import { methodPlaceholder } from 'vega-slimmer/core';
+import { NodeAnnotationTypeEnum } from '../annotations/node-annotation.abstract';
+import { isNonNullable } from '../../../../types/type-guard';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
+export class RTEImageNode extends RTENode {
+  constructor(id, url, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = NodeTypeEnum.IMAGE;
+    this.url = url;
+    this.parentBlock = parentBlock;
+  }
+  static from(image, parentBlock) {
+    const imageNode = new RTEImageNode(image.id, image.url, parentBlock);
+    let annotations;
+    if (!image.annotations || Object.keys(image.annotations).length === 0) {
+      annotations = { size: 'md' };
+    }
+    else {
+      annotations = image.annotations;
+    }
+    imageNode.annotationMap = new Map(Object.keys(annotations)
+      .map(() => ImageAnnotation.from(annotations.size, annotations.alt))
+      .filter(isNonNullable));
+    return imageNode;
+  }
+  toJSON() {
+    const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
+    const annotations = {};
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size) {
+      annotations.size = imageAnnotation.size;
+    }
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt) {
+      annotations.alt = imageAnnotation.alt;
+    }
+    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
+  }
+  render({ editable } = {}) {
+    const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
+    const size = imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size;
+    const alt = imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt;
+    const handleChange = ({ detail, }) => {
+      switch (detail.action) {
+        case 'edit': {
+          const size = detail.payload.size;
+          const alt = detail.payload.alt;
+          this.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(this).dispatchEvent(event);
+          }, 50);
+          break;
+        }
+      }
+    };
+    return editable ? (h("vega-rich-text-image-editor", { style: this.getStyles(), size: size, alt: alt, ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
+      } }, this.renderImage(editable, alt))) : (this.renderImage(editable, alt));
+  }
+  doAnnotationActionApply(action) {
+    const annotation = action.toAnnotation();
+    this.annotationMap.set(annotation.type, annotation);
+  }
+  // placeholder method
+  /* istanbul ignore next */
+  doModifyActionApply(action) {
+    methodPlaceholder(action);
+  }
+  registerRef(ref) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, this);
+    }
+  }
+  renderImage(editable, alt) {
+    return (h("img", { style: editable ? { width: '100%' } : this.getStyles(), alt: alt, src: this.url, ref: this.registerRef.bind(this) }));
+  }
+}