@globalpayments/vega 2.32.0 → 2.34.0

package/dist/esm/text-node-6f7d736c.js

@@ -0,0 +1,1055 @@
+import { W as WaitForVega, A as Annotation, I as InternalAnnotationTypeEnum, N as NodeAnnotation, a as NodeAnnotationTypeEnum, V as VegaThemeManager, M as ModifyContentAction, b as ModifyContentActionType, R as RTENode, c as NodeTypeEnum, s as stateEntityRenderingRegistry } from './node.abstract-93746055.js';
+import { O as Observer, d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory, V as VegaChange } from './dom-node-subject-observer-factory-80358591.js';
+import { C as ChangeManager } from './change-manager-8f5b72c2.js';
+import { a as VegaInternalComponentDidRender, b as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-4af5c6e9.js';
+import { h } from './global-slimmer-registry-6887a59f.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-14cb4599.js';
+import { i as isNonNullable } from './type-guard-158f6d7a.js';
+import { r as rgbToHex } from './ui-5600b48f.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+
+/* istanbul ignore next */
+/**
+ * Wait for all vega elements to be ready.
+ *
+ * The below method is e2e-test covered in @see{module:wait-for-vega-should-work-as-expected}
+ */
+const waitForVega = async () => {
+  return WaitForVega.handle();
+};
+/**
+ * Wait for the component has been rendered.
+ *
+ * @param {HTMLStencilElement} componentRef - The reference to the component that needs to be rendered.
+ * @returns {Promise<unknown>} A promise that resolves when the component has been rendered.
+ */
+const waitForComponentDidRender = async (componentRef) => {
+  return new Promise((resolve) => {
+    const observer = new Observer(isAcceptableComponentDidRender.bind(null), () => {
+      ChangeManager.unregister(domNodeSubjectFactory.getSubject(componentRef, VegaInternalComponentDidRender), observer);
+      resolve(null);
+    });
+    ChangeManager.register(domNodeSubjectFactory.getSubject(componentRef, VegaInternalComponentDidRender), observer);
+  });
+};
+/**
+ * Determines whether the observer should accept changes.
+ *
+ * @returns {boolean} Always returns true in the current implementation.
+ */
+const isAcceptableComponentDidRender = () => {
+  return true;
+};
+
+const RTE_TEXT_COLORS = [
+  {
+    key: 'black',
+    light: '#111128',
+    dark: '#E3E3E8',
+  },
+  {
+    key: 'gray',
+    light: '#5E5E6D',
+    dark: '#B9B9C1',
+  },
+  {
+    key: 'green',
+    light: '#01801F',
+    dark: '#59D977',
+  },
+  {
+    key: 'red',
+    light: '#BD2947',
+    dark: '#FFB2B5',
+  },
+  {
+    key: 'purple',
+    light: '#563D82',
+    dark: '#BEB2FF',
+  },
+  {
+    key: 'teal',
+    light: '#17758F',
+    dark: '#4CD8FF',
+  },
+];
+const ZERO_WIDTH_SPACE = '\u200b';
+
+/**
+ * Abstract class for annotation actions
+ */
+class AnnotationAction {
+}
+
+/**
+ * Abstract class for which can be splittable
+ */
+class TextSplittableAction extends AnnotationAction {
+  constructor() {
+    super(...arguments);
+    /**
+     * Whether the action should split the node
+     */
+    this.doSplit = true;
+  }
+}
+
+/**
+ * Annotation to represent a selection range
+ */
+class SelectionRangeAnnotation extends Annotation {
+  constructor(range) {
+    super();
+    this.type = InternalAnnotationTypeEnum.SELECTION_RANGE;
+    this.range = range;
+  }
+}
+
+/**
+ * This class is responsible for keeping track of the DOM elements.
+ */
+class TextNodeRenderingRegistry {
+  constructor() {
+    this.textNodeElements = new Map();
+  }
+  /**
+   * Registers a DOM element and the color annotation of the DOM element.
+   *
+   * @param {HTMLElement} dom The DOM element to register.
+   * @param {TextColorAnnotation} textColorAnnotation The text color annotation of text node to register.
+   */
+  register(dom, textColorAnnotation) {
+    this.textNodeElements.set(dom, textColorAnnotation);
+  }
+  /**
+   * Retrieves the text node elements.
+   *
+   * @returns {HTMLElement[]} The text node elements, or empty array.
+   */
+  getTextNodeElements() {
+    return this.textNodeElements;
+  }
+}
+const TextNodeRenderingRegistry$1 = new TextNodeRenderingRegistry();
+
+/**
+ * Annotation to make text with strikethrough
+ */
+class StrikethroughAnnotation extends NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = NodeAnnotationTypeEnum.STRIKETHROUGH;
+    this.strikethrough = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {Nullable<boolean>} strikethrough - Strikethrough annotation
+   * @returns {[NodeAnnotationTypeEnum.STRIKETHROUGH, StrikethroughAnnotation]} Map item for the annotation
+   */
+  static from(strikethrough) {
+    return [NodeAnnotationTypeEnum.STRIKETHROUGH, new StrikethroughAnnotation(strikethrough)];
+  }
+  /**
+   * Generate the map item for the annotation by html element
+   *
+   * @param {HTMLElement} node - An html element.
+   * @returns {[NodeAnnotationTypeEnum.STRIKETHROUGH, StrikethroughAnnotation]} Map item for the annotation
+   */
+  static fromHTML(node) {
+    return this.from(node.style.textDecoration.includes('line-through') ||
+      node.nodeName === 'S' ||
+      node.classList.contains('v-rte--strikethrough'));
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      strikethrough: this.strikethrough,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.strikethrough ? 'v-rte--strikethrough' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation to make text with underline
+ */
+class UnderlineAnnotation extends NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = NodeAnnotationTypeEnum.UNDERLINE;
+    this.underline = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} underline - Underline annotation
+   * @returns {[NodeAnnotationTypeEnum.UNDERLINE, UnderlineAnnotation]} Map item for the annotation
+   */
+  static from(underline) {
+    return [NodeAnnotationTypeEnum.UNDERLINE, new UnderlineAnnotation(underline)];
+  }
+  /**
+   * Generate the map item for the annotation by html element
+   *
+   * @param {HTMLElement} node - An html element.
+   * @returns {[NodeAnnotationTypeEnum.UNDERLINE, UnderlineAnnotation]} Map item for the annotation
+   */
+  static fromHTML(node) {
+    return this.from(node.style.textDecoration.includes('underline') ||
+      node.nodeName === 'U' ||
+      node.classList.contains('v-rte--underline'));
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      underline: this.underline,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.underline ? 'v-rte--underline' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation to make text Italic
+ */
+class ItalicAnnotation extends NodeAnnotation {
+  constructor(italic) {
+    super();
+    this.type = NodeAnnotationTypeEnum.ITALIC;
+    this.italic = italic;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} italic - Italic annotation
+   * @returns {Nullable<[NodeAnnotationTypeEnum.ITALIC, ItalicAnnotation]>} Map item for the annotation
+   */
+  static from(italic) {
+    return [NodeAnnotationTypeEnum.ITALIC, new ItalicAnnotation(italic)];
+  }
+  /**
+   * Generate the map item for the annotation by html element
+   *
+   * @param {HTMLElement} node - An html element.
+   * @returns {[NodeAnnotationTypeEnum.ITALIC, ItalicAnnotation]} Map item for the annotation
+   */
+  static fromHTML(node) {
+    return this.from(node.nodeName === 'I' || node.style.fontStyle === 'italic' || node.nodeName === 'EM');
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      italic: this.italic,
+    };
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Italic style
+   */
+  render() {
+    return this.italic ? { 'font-style': 'italic' } : null;
+  }
+}
+
+/**
+ * Annotation to make text bold
+ */
+class BoldAnnotation extends NodeAnnotation {
+  constructor(bold) {
+    super();
+    this.type = NodeAnnotationTypeEnum.BOLD;
+    this.bold = bold;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} bold - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.BOLD, BoldAnnotation]} Map item for the annotation
+   */
+  static from(bold) {
+    return [NodeAnnotationTypeEnum.BOLD, new BoldAnnotation(bold)];
+  }
+  /**
+   * Generate the map item for the annotation by html element
+   *
+   * @param {HTMLElement} node - An html element.
+   * @returns {[NodeAnnotationTypeEnum.BOLD, BoldAnnotation]} Map item for the annotation
+   */
+  static fromHTML(node) {
+    const style = node.style;
+    return this.from(node.nodeName === 'STRONG' || style.fontWeight === 'bold' || style.fontWeight === '700');
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      bold: this.bold,
+    };
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Bold style
+   */
+  render() {
+    return this.bold ? { 'font-weight': '700' } : null;
+  }
+}
+
+/**
+ * Annotation to host which annotations will be clear formatting
+ */
+class ClearFormattingAnnotation extends Annotation {
+  constructor() {
+    super(...arguments);
+    this.type = InternalAnnotationTypeEnum.CLEAR_FORMATTING;
+    this.items = [
+      NodeAnnotationTypeEnum.BOLD,
+      NodeAnnotationTypeEnum.ITALIC,
+      NodeAnnotationTypeEnum.UNDERLINE,
+      NodeAnnotationTypeEnum.STRIKETHROUGH,
+      NodeAnnotationTypeEnum.TEXT_COLOR,
+      NodeAnnotationTypeEnum.CODE,
+    ];
+  }
+}
+
+/**
+ * Annotation to make text code
+ */
+class CodeAnnotation extends NodeAnnotation {
+  constructor(code) {
+    super();
+    this.type = NodeAnnotationTypeEnum.CODE;
+    this.code = code;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} code - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.CODE, CodeAnnotation]} Map item for the annotation
+   */
+  static from(code) {
+    return [NodeAnnotationTypeEnum.CODE, new CodeAnnotation(code)];
+  }
+  /**
+   * Generate the map item for the annotation by html element
+   *
+   * @param {HTMLElement} node - An html element.
+   * @returns {[NodeAnnotationTypeEnum.CODE, CodeAnnotation]} Map item for the annotation
+   */
+  static fromHTML(node) {
+    return this.from(node.classList.contains('v-rte--code') || node.nodeName === 'CODE');
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      code: this.code,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.code ? 'v-rte--code' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Bold style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation to make text with text color
+ */
+class TextColorAnnotation extends NodeAnnotation {
+  constructor(textColor) {
+    super();
+    this.type = NodeAnnotationTypeEnum.TEXT_COLOR;
+    this.textColor = this.formatTextColor(textColor);
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string} textColor - text color annotation
+   * @returns {[NodeAnnotationTypeEnum.TEXT_COLOR, TextColorAnnotation]} Map item for the annotation
+   */
+  static from(textColor) {
+    return [NodeAnnotationTypeEnum.TEXT_COLOR, new TextColorAnnotation(textColor)];
+  }
+  /**
+   * Generate the map item for the annotation by html element
+   *
+   * @param {HTMLElement} node - An html element.
+   * @returns {[NodeAnnotationTypeEnum.TEXT_COLOR, TextColorAnnotation]} Map item for the annotation
+   */
+  static fromHTML(node) {
+    var _a;
+    const color = node.style.color;
+    const hexColor = (_a = rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    if (hexColor) {
+      const colorSchema = RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
+      if (colorSchema)
+        return this.from(colorSchema.key);
+      return null;
+    }
+    else {
+      for (const color of RTE_TEXT_COLORS) {
+        if (node.style.color.includes(color.key)) {
+          return this.from(color.key);
+        }
+      }
+      return null;
+    }
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      textColor: this.textColor.key,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return {
+      color: VegaThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
+    };
+  }
+  /**
+   * format text color
+   *
+   * @param {string} textColor - text color
+   * @returns {VegaRTEColorSchema} - VegaRTEColorSchema
+   */
+  formatTextColor(textColor) {
+    return (RTE_TEXT_COLORS.find((item) => item.key === textColor) || RTE_TEXT_COLORS[0]);
+  }
+}
+
+/**
+ * Annotation to make text a link
+ */
+class LinkAnnotation extends NodeAnnotation {
+  constructor(link) {
+    super();
+    this.type = NodeAnnotationTypeEnum.LINK;
+    this.link = link;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {VegaRTELink} link - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.LINK, LinkAnnotation]} Map item for the annotation
+   */
+  static from(link) {
+    return [
+      NodeAnnotationTypeEnum.LINK,
+      new LinkAnnotation({ href: link.href, groupKey: link.groupKey }),
+    ];
+  }
+  /**
+   * Generate the map item for the annotation by html element
+   *
+   * @param {HTMLElement} node - An html element.
+   * @returns {[NodeAnnotationTypeEnum.LINK, LinkAnnotation]} Map item for the annotation
+   */
+  static fromHTML(node) {
+    return node.hasAttribute('data-href')
+      ? this.from({
+        href: node.getAttribute('data-href'),
+        groupKey: node.getAttribute('data-group-key'),
+      })
+      : null;
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return { link: { href: this.link.href, groupKey: this.link.groupKey } };
+  }
+  /**
+   * Verify whether two link annotation is same or not
+   *
+   * @param {LinkAnnotation} annotation - Compared annotation
+   * @returns {boolean} Whether two link annotation is same or not
+   */
+  toEqual(annotation) {
+    return this.link.groupKey === annotation.link.groupKey;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Link style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Action to toggle link annotation
+ */
+class LinkAnnotationAction extends TextSplittableAction {
+  constructor({ link, newText, needMergeNode, doSplit, }) {
+    super();
+    this.isFlushable = true;
+    this.link = link;
+    this.needMergeNode = needMergeNode;
+    this.newText = newText;
+    if (isNonNullable(doSplit)) {
+      this.doSplit = doSplit;
+    }
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {LinkAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new LinkAnnotation(this.link);
+  }
+}
+
+/**
+ * Action to toggle code annotation
+ */
+class CodeAnnotationAction extends TextSplittableAction {
+  constructor(code) {
+    super();
+    this.isFlushable = true;
+    this.code = code;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {CodeAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new CodeAnnotation(this.code);
+  }
+}
+
+/**
+ * Action to toggle clear formatting
+ */
+class ClearFormattingAnnotationAction extends TextSplittableAction {
+  constructor() {
+    super(...arguments);
+    this.isFlushable = true;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {ClearFormattingAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new ClearFormattingAnnotation();
+  }
+}
+
+/**
+ * Update the text node property text action
+ *
+ * @example textNode.apply(new UpdateTextAction(newText))
+ */
+class UpdateTextAction extends ModifyContentAction {
+  constructor(text) {
+    super();
+    this.type = ModifyContentActionType.UPDATE_TEXT;
+    this.newTextContent = '';
+    this.newTextContent = text;
+  }
+}
+
+/**
+ * Annotation to represent a link of grouped nodes
+ */
+class LinkGroupAnnotation extends Annotation {
+  constructor(groupKey) {
+    super();
+    this.type = InternalAnnotationTypeEnum.LINK_GROUP;
+    this.linkGroups = new Map();
+    this.linkGroups = new Map([[groupKey, []]]);
+  }
+  renderNodes(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 item.render();
+    });
+  }
+  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) => node.render())));
+  }
+  isLinkGroup(item) {
+    return Array.isArray(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;
+    }, []);
+  }
+}
+
+/**
+ * Action to link a group of nodes
+ */
+class LinkGroupAnnotationAction extends AnnotationAction {
+  constructor(groupKey, nodes) {
+    super();
+    this.isFlushable = false;
+    this.groupKey = groupKey;
+    this.nodes = nodes;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {LinkGroupAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new LinkGroupAnnotation(this.groupKey);
+  }
+}
+
+/**
+ * Sync up selection action
+ */
+class SyncUpSelectionAction extends AnnotationAction {
+  constructor() {
+    super();
+    this.isFlushable = false;
+  }
+  /**
+   * annotation null
+   *
+   * @returns {Nullable<Annotation>} null
+   */
+  toAnnotation() {
+    return null;
+  }
+}
+
+/**
+ * Delete the node annotation by type
+ */
+class DeleteNodeAnnotationAction extends AnnotationAction {
+  constructor(annotationType) {
+    super();
+    this.isFlushable = true;
+    this.annotationType = annotationType;
+  }
+  /**
+   * Don't need this for this action
+   *
+   * @returns {Nullable<Annotation>} undefined
+   */
+  toAnnotation() {
+    return undefined;
+  }
+}
+
+class RTETextNode extends RTENode {
+  constructor(id, text, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = NodeTypeEnum.TEXT;
+    this.parentBlock = parentBlock;
+    this.text = text;
+  }
+  static from(richText, parentBlock) {
+    const textNode = new RTETextNode(richText.id, richText.text, parentBlock);
+    const { annotations } = richText;
+    if (annotations) {
+      textNode.annotationMap = new Map(Object.keys(annotations)
+        .map((type) => {
+        if (annotations.link) {
+          parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode]));
+        }
+        return this.createAnnotationEntity(type, annotations[type]);
+      })
+        .filter(isNonNullable));
+    }
+    return textNode;
+  }
+  static fromHTML(node, parentBlock) {
+    const textNode = new RTETextNode(generateUUID(), node.textContent, parentBlock);
+    if (node.nodeType !== Node.TEXT_NODE) {
+      textNode.annotationMap = new Map(Object.keys(NodeAnnotationTypeEnum)
+        .map((nodeAnnotationType) => {
+        return this.createAnnotationEntityFromHTML(nodeAnnotationType, node);
+      })
+        .filter(isNonNullable));
+      if (node.hasAttribute('data-group-key')) {
+        parentBlock.apply(new LinkGroupAnnotationAction(node.getAttribute('data-group-key'), [textNode]));
+      }
+    }
+    return textNode;
+  }
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'bold':
+        return BoldAnnotation.from(value);
+      case 'italic':
+        return ItalicAnnotation.from(value);
+      case 'underline':
+        return UnderlineAnnotation.from(value);
+      case 'strikethrough':
+        return StrikethroughAnnotation.from(value);
+      case 'code':
+        return CodeAnnotation.from(value);
+      case 'textColor':
+        return TextColorAnnotation.from(value);
+      case 'link':
+        return LinkAnnotation.from(value);
+    }
+  }
+  static createAnnotationEntityFromHTML(type, node) {
+    switch (type) {
+      case 'BOLD':
+        return BoldAnnotation.fromHTML(node);
+      case 'ITALIC':
+        return ItalicAnnotation.fromHTML(node);
+      case 'UNDERLINE':
+        return UnderlineAnnotation.fromHTML(node);
+      case 'STRIKETHROUGH':
+        return StrikethroughAnnotation.fromHTML(node);
+      case 'CODE':
+        return CodeAnnotation.fromHTML(node);
+      case 'TEXT_COLOR':
+        return TextColorAnnotation.fromHTML(node);
+      case 'LINK':
+        return LinkAnnotation.fromHTML(node);
+    }
+  }
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .reduce((record, annotation) => {
+      return Object.assign(Object.assign({}, record), annotation.toJSON());
+    }, {});
+    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'text', text: this.text });
+  }
+  cloneWithText(text) {
+    return new RTETextNode(generateUUID(), text, this.parentBlock, new Map(this.annotationMap));
+  }
+  isEmpty() {
+    return !this.text || this.text === ZERO_WIDTH_SPACE || this.text === '\n';
+  }
+  render() {
+    const codeAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.CODE);
+    if (codeAnnotation === null || codeAnnotation === void 0 ? void 0 : codeAnnotation.code) {
+      return (h("code", { style: this.getStyles(), class: this.getClasses(), ref: this.registerRef.bind(this) }, this.text || ZERO_WIDTH_SPACE));
+    }
+    return (h("span", { style: this.getStyles(), class: this.getClasses(), ref: this.registerRef.bind(this) }, this.text || ZERO_WIDTH_SPACE));
+  }
+  doAnnotationActionApply(action) {
+    const selectionRangeAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.SELECTION_RANGE);
+    if (action instanceof TextSplittableAction && action.doSplit && selectionRangeAnnotation) {
+      const { startContainer, endContainer, startOffset, endOffset } = selectionRangeAnnotation.range;
+      const noTextRangeSelected = startContainer === endContainer && startOffset === endOffset;
+      this.parentBlock.nodes = this.parentBlock.nodes.flatMap((item) => {
+        if (item.id === this.id) {
+          if (noTextRangeSelected) {
+            return this.insertNewNode(startOffset, action);
+          }
+          if (this.shouldSplitSelection(selectionRangeAnnotation.range)) {
+            return this.splitTextNode(action, selectionRangeAnnotation.range);
+          }
+          else {
+            this.applyActionToNode(this, action);
+            return this;
+          }
+        }
+        return item;
+      });
+    }
+    else {
+      this.applyActionToNode(this, action);
+    }
+    this.parentBlock.mergeNodes(action);
+  }
+  doModifyActionApply(action) {
+    switch (action.type) {
+      case ModifyContentActionType.UPDATE_TEXT:
+        this.updateText(action.newTextContent);
+        break;
+      case ModifyContentActionType.REPLACE_SELECTED_TEXT:
+        this.replaceSelectedText(action.textToBeInsert, action.currentRange);
+        break;
+    }
+  }
+  registerRef(ref) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, this);
+      const textColorAnnotation = this.getAnnotationByType('TEXT_COLOR');
+      if (textColorAnnotation) {
+        TextNodeRenderingRegistry$1.register(ref, textColorAnnotation);
+      }
+    }
+  }
+  splitTextNode(action, range) {
+    const { startContainer, endContainer, startOffset } = range;
+    const startNode = startContainer.parentElement;
+    const endNode = endContainer.parentElement;
+    const splitText = (text, startOffset, endOffset) => {
+      const beforeText = text.substring(0, startOffset);
+      const selectedText = text.substring(startOffset, endOffset);
+      const afterText = text.substring(endOffset);
+      return [
+        this.cloneWithText(beforeText),
+        this.cloneWithText(selectedText),
+        this.cloneWithText(afterText),
+      ];
+    };
+    const startItemDto = startNode && stateEntityRenderingRegistry.getEntityByDOM(startNode);
+    const endItemDto = endNode && stateEntityRenderingRegistry.getEntityByDOM(endNode);
+    if (startItemDto && startItemDto.id === this.id) {
+      const endOffset = startContainer === endContainer ? range.endOffset : this.text.length;
+      const [beforeNode, selectedNode, afterNode] = splitText(this.text, startOffset, endOffset);
+      this.applyActionToNode(selectedNode, action);
+      return [beforeNode, selectedNode, afterNode].filter((node) => !!node.text);
+    }
+    else if (endItemDto && endItemDto.id === this.id) {
+      const [beforeNode, selectedNode, afterNode] = splitText(this.text, 0, range.endOffset);
+      this.applyActionToNode(selectedNode, action);
+      return [beforeNode, selectedNode, afterNode].filter((node) => !!node.text);
+    }
+    else {
+      this.applyActionToNode(this, action);
+      return this;
+    }
+  }
+  applyActionToNode(node, action) {
+    const annotation = action.toAnnotation();
+    if (action instanceof SyncUpSelectionAction) {
+      this.syncUpSelectedNodes(node);
+      return;
+    }
+    // Sync up RTETextNode selected state to selection controller for any action apply, except selection range change.
+    if (!(annotation instanceof SelectionRangeAnnotation)) {
+      this.syncUpSelectedNodes(node);
+    }
+    if (action instanceof DeleteNodeAnnotationAction) {
+      this.annotationMap.delete(action.annotationType);
+      return;
+    }
+    if (annotation instanceof ClearFormattingAnnotation) {
+      annotation.items.forEach((item) => {
+        node.deleteAnnotationByType(item);
+      });
+      return;
+    }
+    if (annotation instanceof NodeAnnotation || annotation instanceof SelectionRangeAnnotation) {
+      if (action instanceof LinkAnnotationAction) {
+        if (isNonNullable(action.newText)) {
+          node.text = action.newText;
+        }
+        this.parentBlock.apply(new LinkGroupAnnotationAction(action.link.groupKey, [node]));
+      }
+      if (action instanceof CodeAnnotationAction) {
+        this.applyActionToNode(node, new ClearFormattingAnnotationAction());
+      }
+      node.annotationMap.set(annotation.type, annotation);
+      return;
+    }
+  }
+  replaceSelectedText(text, currentRange) {
+    if (currentRange && currentRange.startContainer && currentRange.endContainer) {
+      const { startContainer, endContainer, startOffset, endOffset } = currentRange;
+      const startNode = startContainer.parentElement;
+      const endNode = endContainer.parentElement;
+      const startItemDto = startNode && stateEntityRenderingRegistry.getEntityByDOM(startNode);
+      const endItemDto = endNode && stateEntityRenderingRegistry.getEntityByDOM(endNode);
+      let startIndex = 0, endIndex = this.text.length;
+      if (startItemDto && startItemDto === this) {
+        startIndex = startOffset;
+        endIndex = startContainer === endContainer ? endOffset : endIndex;
+      }
+      else if (endItemDto && endItemDto === this) {
+        endIndex = endOffset;
+      }
+      this.apply(new UpdateTextAction(this.text.slice(0, startIndex) + text + this.text.slice(endIndex)));
+    }
+  }
+  updateText(newText) {
+    this.text = newText;
+    // The link node should be unlink when delete all text
+    if (!this.text && this.isLinkNode()) {
+      this.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+    }
+  }
+  isLinkNode() {
+    return this.annotationMap.has('LINK');
+  }
+  shouldSplitSelection(range) {
+    const { startContainer, endContainer, startOffset, endOffset } = range;
+    const isCrossNode = startContainer !== endContainer;
+    const isPartialStart = startOffset > 0;
+    const isPartialEnd = endOffset < (endContainer.textContent ? endContainer.textContent.length : 0);
+    const isPartialSelection = isPartialStart || isPartialEnd;
+    return isCrossNode || isPartialSelection;
+  }
+  syncUpSelectedNodes(selectedNode) {
+    const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, { node: selectedNode });
+      }
+    }
+  }
+  insertNewNode(startOffset, action) {
+    if (startOffset === 0) {
+      const newNode = this.cloneWithText('');
+      this.applyActionToNode(newNode, action);
+      return [newNode, this];
+    }
+    if (startOffset === this.text.length) {
+      const newNode = this.cloneWithText('');
+      this.applyActionToNode(newNode, action);
+      return [this, newNode];
+    }
+    const beforeNode = this.cloneWithText(this.text.substring(0, startOffset));
+    const newNode = this.cloneWithText('');
+    const afterNode = this.cloneWithText(this.text.substring(startOffset));
+    this.applyActionToNode(newNode, action);
+    return [beforeNode, newNode, afterNode];
+  }
+}
+
+export { AnnotationAction as A, BoldAnnotation as B, ClearFormattingAnnotationAction as C, DeleteNodeAnnotationAction as D, ItalicAnnotation as I, LinkAnnotationAction as L, RTETextNode as R, SyncUpSelectionAction as S, TextSplittableAction as T, UpdateTextAction as U, ZERO_WIDTH_SPACE as Z, LinkGroupAnnotationAction as a, waitForComponentDidRender as b, TextColorAnnotation as c, RTE_TEXT_COLORS as d, UnderlineAnnotation as e, CodeAnnotationAction as f, StrikethroughAnnotation as g, SelectionRangeAnnotation as h, TextNodeRenderingRegistry$1 as i, waitForVega as w };