@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

package/dist/esm/content-state-8c3f862b.js

@@ -0,0 +1,2489 @@
+import { B as BlockDeleteNodeContentStrategy, R as RemoveChildAction, a as RTEImageNode, A as ActionHandleStrategy, b as ReplaceChildNodesAction, I as InsertBlocksAfterAction, c as AppendChildNodesAction, d as RTETextBlock, e as InsertBlocksBeforeAction, S as SplitBlockWithNodeAction, M as ModifyContentAction, f as ModifyContentActionType, g as RTETextNode, h as BlockReplaceNodeWithNodesStrategy, i as RTEBlock, j as ActionHandleStrategyRegistry, k as BlockMergeNodesStrategy, l as BlockRemoveNodeStrategy, m as BlockAppendNodesStrategy, n as BlockReplaceNodesStrategy, o as BlockInsertNodesBeforeNodeStrategy, H as HorizontalAlignmentAnnotationAction, p as BlockUpdateHorizontalAlignmentStrategy, q as BlockDeleteTextContentStrategy, N as NodeAnnotationTypeEnum, r as BlockInsertLineBreakStrategy, s as BlockInsertLineBreakWithBlocksStrategy, t as BlockSplitWithTextNodeStrategy, u as SyncUpSelectionAction, v as BlockAnnotation, w as BlockAnnotationTypeEnum, C as CustomStyleAnnotation, x as CustomClassAnnotation, y as CustomAttributeAnnotation, z as RTECodeBlock, D as RTE_TEXT_COLORS } from './code-block-8b5bd928.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8ada793f.js';
+import { i as isNonNullable } from './type-guard-158f6d7a.js';
+import { d as dashCaseToCamel } from './string-a953eafc.js';
+import { r as rgbToHex } from './ui-ed1283bb.js';
+
+/**
+ * The image block delete the image node strategy.
+ */
+class BlockDeleteImageStrategy extends BlockDeleteNodeContentStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.deleteNodeContent(action, target);
+  }
+  /**
+   * Deletes content from a block node based on specific conditions.
+   *
+   * @param {DeleteBlockContentAction} action - Delete block content action
+   * @param {RTEImageBlock} target - The image block.
+   */
+  deleteNodeContent(action, target) {
+    const startContainerNode = action
+      .startContainerNode, startOffset = action.startOffset;
+    let previousNode = this.getPreviousNode(startContainerNode);
+    let nextNode = null;
+    if (startOffset === 1) {
+      const parentBlock = target;
+      if (this.isContentFirstNode(startContainerNode)) {
+        nextNode = this.getNextNode(startContainerNode);
+      }
+      if (parentBlock.nodes.length === 1) {
+        parentBlock.parent.apply(new RemoveChildAction(parentBlock));
+      }
+      else {
+        parentBlock.apply(new RemoveChildAction(startContainerNode));
+      }
+    }
+    else {
+      const shouldRemoveNode = previousNode;
+      if (shouldRemoveNode && shouldRemoveNode instanceof RTEImageNode) {
+        previousNode = this.getPreviousNode(shouldRemoveNode);
+        shouldRemoveNode.parentBlock.apply(new RemoveChildAction(shouldRemoveNode));
+        if (!previousNode) {
+          action.nextNode = startContainerNode;
+        }
+      }
+    }
+    if (previousNode) {
+      action.previousNode = previousNode;
+    }
+    else if (nextNode) {
+      action.nextNode = nextNode;
+    }
+  }
+}
+
+/**
+ * Split the current image block with a special position strategy.
+ */
+class BlockSplitWithImageNodeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode, target);
+  }
+  /**
+   * The image offset should be 0 or 1
+   * <vega-rich-text-image-editor><img /></vega-rich-text-image-editor>
+   *
+   * @param {RTEImageNode} imageNode The split point image node.
+   * @param {number} imageOffset The cursor point 0 | 1.
+   * @param {RTEImageBlock} target The image block.
+   * @returns {Nullable<RTEBlock>} The new block after split
+   */
+  splitImageNodes(imageNode, imageOffset, target) {
+    const nodesSplitIndex = target.nodes.indexOf(imageNode);
+    if (nodesSplitIndex > -1) {
+      const beforeNodes = target.nodes.slice(0, nodesSplitIndex + imageOffset);
+      const afterNodes = target.nodes.slice(nodesSplitIndex + imageOffset);
+      target.apply(new ReplaceChildNodesAction(beforeNodes));
+      const newBlock = this.cloneWithNodes(afterNodes, target);
+      target.parent.apply(new InsertBlocksAfterAction(target, newBlock));
+      return newBlock;
+    }
+  }
+  /**
+   * Creates a new RTEImageBlock instance with the provided RTEImageNode instances appended to it.
+   *
+   * @param {RTEImageNode[]} nodes - An array of RTEImageNode objects that will be used to create a new RTEImageBlock instance.
+   * @param {RTEImageBlock} target The image block.
+   * @returns {RTEImageBlock} A new `RTEImageBlock` object with the provided `nodes` appended to it.
+   */
+  cloneWithNodes(nodes, target) {
+    const block = target.createNewImageBlock();
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+}
+
+/**
+ * Insert a new paragraph at the image block special position strategy.
+ */
+class ImageInsertNewParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.breakSingleBlock(action.startContainerNode, action.startOffset, target);
+  }
+  /**
+   * Used to split a block of text at a specific position and insert a new paragraph block.
+   *
+   * @param {RTEImageNode} splitNode - The node that needs to be split into separate blocks.
+   * @param {number} startOffsetOfNode - The index or position within the `splitNode` where the block should be broken or split.
+   * @param {RTEImageBlock} target - The image block.
+   * @returns {Nullable<RTEBlock>} Returns either a new paragraph block or the new block created after splitting the original block.
+   */
+  breakSingleBlock(splitNode, startOffsetOfNode, target) {
+    const newParagraph = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: generateUUID(), type: 'text', text: '' }],
+    });
+    if (this.isCaretPositionAtImageBlockEnd(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksAfterAction(target, newParagraph));
+    }
+    else if (this.isCaretPositionAtImageBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksBeforeAction(target, newParagraph));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      target.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
+    }
+    return newParagraph;
+  }
+}
+
+/**
+ * Break the current block after press enter, this action is similar with the SplitBlockWithNodeAction,
+ * The SplitBlockWithNodeAction split the current block to two same type blocks, but this action will create new paragraph or list item when break at start or end.
+ * The property `newBlock` use to store the new create block if need.
+ *
+ * @example currentBlock.apply(new BreakSingleBlockAction(startContainerNode, startOffset))
+ */
+class BreakSingleBlockAction extends ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = ModifyContentActionType.BREAK_SINGLE_BLOCK;
+    this.startContainerNode = startContainerNode;
+    this.startOffset = startOffset;
+  }
+}
+
+/**
+ * The image block insert line break strategy.
+ */
+class ImageInsertLineBreakStrategy extends ActionHandleStrategy {
+  /**
+   * The image block not support insert the line break node, so invoke the insert new paragraph logic directly.
+   *
+   * @param {LineBreakSingleBlockAction} action - The action instance.
+   * @param {RTEImageBlock} target - The image block.
+   */
+  handleAction(action, target) {
+    const insertNewParagraphAction = new BreakSingleBlockAction(action.startContainerNode, action.startOffset);
+    target.apply(insertNewParagraphAction);
+    const newBlock = insertNewParagraphAction.newBlock;
+    if (newBlock) {
+      action.lineBreakNode = newBlock.nodes[0];
+    }
+  }
+}
+
+/**
+ * Insert a line break node into multiple blocks selection at special position strategy.
+ */
+class ImageInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks, target);
+  }
+  /**
+   * Inserts a new paragraph block with a line break after a selected block of text in a rich text editor.
+   *
+   * @param {RTEBlock[]} selectedBlocks - An array of RTEBlock objects that represent the blocks that have been selected for a specific action in the Rich Text Editor.
+   * @param {RTEImageBlock} target - The image block.
+   * @returns {Nullable<RTETextNode>} Returns a Nullable RTETextNode.
+   */
+  lineBreakMultipleBlocks(selectedBlocks, target) {
+    const newParagraph = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: generateUUID(), type: 'text', text: '\n' }],
+    });
+    target.parent.apply(new InsertBlocksAfterAction(target, newParagraph));
+    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
+    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
+      afterNodes.push(new RTETextNode(generateUUID(), '\n', newParagraph));
+    }
+    newParagraph.apply(new AppendChildNodesAction(afterNodes));
+    return newParagraph['nodes'][0];
+  }
+  /**
+   * Concat the child nodes of multiple RTEBlocks if both are not images.
+   *
+   * @param {RTEBlock[]} blocks - multiple block of content in a rich text editor, such as a paragraph, heading, image, etc.
+   * @returns {RTENode[]} Array of connected block nodes
+   */
+  concatBlocksNodes(blocks) {
+    const nodes = [];
+    blocks.map((block) => {
+      if (block.type !== 'image') {
+        nodes.push(...block['nodes']);
+        block.parent.apply(new RemoveChildAction(block));
+      }
+    });
+    return nodes;
+  }
+}
+
+/**
+ * Insert a image node at the special position of image block.
+ */
+class ImageBlockInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const splitNode = action.splitPointNode;
+    const startOffsetOfNode = action.startOffsetOfNode;
+    const newImageBlock = action.imageBlockToBeInserted;
+    const newImageNodes = newImageBlock.nodes;
+    if (target.nodes.length < 1) {
+      target.apply(new AppendChildNodesAction(newImageNodes));
+    }
+    else if (this.isCaretPositionAtImageBlockEnd(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksAfterAction(target, newImageBlock));
+    }
+    else if (this.isCaretPositionAtImageBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksBeforeAction(target, newImageBlock));
+    }
+    else {
+      target.apply(new SplitBlockWithNodeAction(splitNode, startOffsetOfNode));
+      target.parent.apply(new InsertBlocksAfterAction(target, newImageBlock));
+    }
+  }
+}
+
+/**
+ * Insert some text nodes at the behind of the node strategy.
+ */
+class BlockInsertNodesAfterNodeStrategy extends BlockReplaceNodeWithNodesStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const referNode = action.referNode;
+    const nodes = [referNode, ...action.nodesToBeInserted];
+    this.replaceNodeWithNodes(target, referNode, nodes);
+  }
+}
+
+/**
+ * Image block
+ */
+class RTEImageBlock extends RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'image';
+    this.nodes = [];
+  }
+  /**
+   * Converts a VegaRTEImageBlock object into an RTEImageBlock object by mapping nodes and creating annotations.
+   *
+   * @param {VegaRTEImageBlock} block - The block object to be converted.
+   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   */
+  static from(block) {
+    const imageBlock = new RTEImageBlock(block.id);
+    const { annotations } = block;
+    imageBlock.nodes = block.nodes.map((image) => RTEImageNode.from(image, imageBlock));
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          imageBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    return imageBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.nodes.map((node) => node.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const attrStr = super.generateAttributeString();
+    return [
+      `<div${attrStr}>`,
+      this.nodes.map((node) => node.toHtml()).join(''),
+      `</div>`,
+    ].join('');
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.nodes.length > 0 && this.nodes.some((node) => node.url.length > 0);
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.nodes[this.nodes.length - 1];
+  }
+  /**
+   * Create a new image block.
+   *
+   * @returns {RTEImageBlock} - The empty image block.
+   */
+  createNewImageBlock() {
+    return new RTEImageBlock(generateUUID());
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    const clonedBlock = new RTEImageBlock(this.id);
+    clonedBlock.nodes = this.nodes.map((node) => {
+      const clonedNode = node.clone();
+      clonedNode.parentBlock = clonedBlock;
+      return clonedNode;
+    });
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    clonedBlock.parent = this.parent;
+    return clonedBlock;
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_BLOCK_CONTENT, RTEImageBlock.name, new BlockDeleteImageStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEImageBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, RTEImageBlock.name, new BlockRemoveNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, RTEImageBlock.name, new BlockAppendNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTEImageBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEImageBlock.name, new BlockSplitWithImageNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertNewParagraphStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEImageBlock.name, new ImageInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name, new ImageBlockInsertImageStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODES_BEFORE, RTEImageBlock.name, new BlockInsertNodesBeforeNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODES_AFTER, RTEImageBlock.name, new BlockInsertNodesAfterNodeStrategy());
+  ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTEImageBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
+})();
+
+/**
+ * The list item block block delete text content strategy.
+ */
+class ListItemDeleteTextContentStrategy extends BlockDeleteTextContentStrategy {
+  /**
+   * Delete the list item content and delete the parent list after delete the last item.
+   *
+   * @param {DeleteBlockContentAction} action - The delete block content action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    const listBlock = target.parent;
+    this.deleteNodeContent(action, target);
+    if (listBlock.blocks.length === 0) {
+      listBlock.parent.apply(new RemoveChildAction(listBlock));
+    }
+  }
+}
+
+/**
+ * Remove list item child node strategy.
+ */
+class ListItemRemoveNodeStrategy extends ActionHandleStrategy {
+  /**
+   * Remove child node from the list item, remove the list item if the list item is empty.
+   *
+   * @param {RemoveChildAction} action - The remove child action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    target.nodes = target.nodes.filter((node) => node !== action.entityToBeRemoved);
+    if (target.nodes.length === 0 && (!target.children || !target.children.length)) {
+      target.parent.apply(new RemoveChildAction(target));
+    }
+  }
+}
+
+/**
+ * Remove list item nest list block strategy.
+ */
+class ListItemRemoveNestListStrategy extends ActionHandleStrategy {
+  /**
+   * Remove the nest list block from the list item, clear the property children when the children is empty.
+   *
+   * @param {RemoveNestListAction} action - The action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    if (target.children) {
+      if (target.children.length > 1) {
+        target.children = target.children.filter((child) => child !== action.nestListBlockToBeRemoved);
+      }
+      else {
+        target.children = undefined;
+      }
+    }
+  }
+}
+
+/**
+ * Replace list item nest list strategy.
+ */
+class ListItemReplaceNestListStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newList.forEach((listBlock) => {
+      listBlock.parent = target;
+    });
+    target.children = action.newList;
+  }
+}
+
+/**
+ * Insert new paragraph into current list item block at special position.
+ */
+class ListItemInsertNewParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.breakSingleListItemBlock(action.startContainerNode, action.startOffset, target);
+  }
+  /**
+   * Breaks a single list item block at a specific position.
+   *
+   * @param {RTETextNode} splitNode - The node that needs to be split within a list item block.
+   * @param {number} startOffsetOfNode - The index within the `splitNode` where the break operation should occur.
+   * @param {RTEListItemBlock} target - The list item block.
+   * @returns {Nullable<RTEBlock>} Returns either a new `RTEListItemBlock` if the caret
+   * position is at the end of the `splitNode`, or it returns the result of splitting the block at the
+   * caret position if it is neither at the start nor at the end.
+   */
+  breakSingleListItemBlock(splitNode, startOffsetOfNode, target) {
+    const newListItem = target.createNewListItem();
+    const newBreakNode = this.copyInlineStyleToNewNode(splitNode);
+    newListItem.apply(new AppendChildNodesAction([newBreakNode]));
+    if (this.isCaretPositionAtTextBlockEnd(target, splitNode, startOffsetOfNode)) {
+      return this.breakListItemAtEnd(newListItem, target);
+    }
+    else if (this.isCaretPositionAtTextBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksBeforeAction(target, newListItem));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      target.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
+    }
+    return newListItem;
+  }
+  /**
+   * Breaks a list item at the end and handles the insertion of a new list item or paragraph accordingly.
+   *
+   * @param {RTEListItemBlock} newListItem - Item that represents a new list item to be added to the existing list.
+   * @param {RTEListItemBlock} target - The list item block.
+   * @returns {RTEBlock} Returns a `RTEBlock`.
+   */
+  breakListItemAtEnd(newListItem, target) {
+    const lastItem = target.parent.blocks[target.parent.blocks.length - 1];
+    const currentItemIsEmpty = target.nodes.length === 1 && target.nodes[0].isEmpty();
+    if (target === lastItem && currentItemIsEmpty) {
+      const parentParent = target.parent.parent;
+      if (parentParent['type'] !== 'list-item') {
+        const newParagraph = RTETextBlock.from({
+          id: generateUUID(),
+          type: 'paragraph',
+          nodes: [],
+        });
+        newParagraph.apply(new AppendChildNodesAction(newListItem.nodes));
+        parentParent.apply(new InsertBlocksAfterAction(target.parent, newParagraph));
+        target.parent.apply(new RemoveChildAction(target));
+        return newParagraph;
+      }
+      else {
+        parentParent.parent.apply(new InsertBlocksAfterAction(parentParent, newListItem));
+        target.parent.apply(new RemoveChildAction(target));
+      }
+    }
+    else {
+      target.parent.apply(new InsertBlocksAfterAction(target, newListItem));
+    }
+    return newListItem;
+  }
+  /**
+   * Copy the inline style to new node
+   *
+   * @param {RTETextNode} needCopedNode - The node that needed to be copied to
+   * @returns {RTETextNode} Returns a `RTETextNode`.
+   */
+  copyInlineStyleToNewNode(needCopedNode) {
+    const textNode = needCopedNode.cloneWithText('');
+    // The link annotation doesn't need to inherit
+    textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+    return textNode;
+  }
+}
+
+/**
+ * Insert image node to list item block strategy.
+ */
+class ListItemInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * The image node can not insert into list item block, so insert image after parent list block.
+   *
+   * @param {InsertImageToBlockAction} action - The action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    target.parent.apply(action);
+  }
+}
+
+/**
+ * List item block
+ */
+class RTEListItemBlock extends RTETextBlock {
+  constructor(id, children) {
+    super(id, 'list-item');
+    this.children = [];
+    this.children = children;
+  }
+  /**
+   * Converts a VegaRTEListItemBlock object to an RTEListItemBlock
+   *
+   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListItemBlock` object into an `RTEListItemBlock`.
+   * @returns {RTEListItemBlock} Return an instance of `RTEListItemBlock`
+   */
+  static from(block) {
+    const listItemBlock = new RTEListItemBlock(block.id);
+    listItemBlock.nodes = block.nodes.map((richText) => RTETextNode.from(richText, listItemBlock));
+    if (block.children) {
+      listItemBlock.children = block.children.map((child) => {
+        const listBlock = RTEListBlock.from(child);
+        listBlock.parent = listItemBlock;
+        return listBlock;
+      });
+    }
+    const { annotations } = block;
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          listItemBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    return listItemBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    var _a;
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'list-item', children: (_a = this.children) === null || _a === void 0 ? void 0 : _a.map((block) => block.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const attrStr = super.generateAttributeString();
+    return [
+      `<li${attrStr}>`,
+      this.nodes.map((node) => node.toHtml()).join(''),
+      `</li>`,
+    ].join('');
+  }
+  /**
+   * @inheritDoc
+   */
+  cloneWithNodes(nodes) {
+    const block = new RTEListItemBlock(generateUUID());
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    if (this.children && this.children.length > 0) {
+      const childListBlock = this.children[this.children.length - 1];
+      return childListBlock.getLastNode();
+    }
+    return super.getLastNode();
+  }
+  /**
+   * Create a new list item block.
+   *
+   * @returns {RTEListItemBlock} - A list item block.
+   */
+  createNewListItem() {
+    return new RTEListItemBlock(generateUUID());
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    var _a;
+    const block = new RTEListItemBlock(this.id);
+    block.nodes = this.nodes.map((node) => {
+      const clonedNode = node.clone();
+      clonedNode.parentBlock = block;
+      return clonedNode;
+    });
+    block.annotationMap = super.cloneAnnotations();
+    block.children = (_a = this.children) === null || _a === void 0 ? void 0 : _a.map((child) => {
+      const clonedChild = child.clone();
+      clonedChild.parent = block;
+      return clonedChild;
+    });
+    block.parent = this.parent;
+    return block;
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_BLOCK_CONTENT, RTEListItemBlock.name, new ListItemDeleteTextContentStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new BlockInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEListItemBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, RTEListItemBlock.name, new ListItemRemoveNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_NEST_LIST, RTEListItemBlock.name, new ListItemRemoveNestListStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, RTEListItemBlock.name, new BlockAppendNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEListItemBlock.name, new BlockSplitWithTextNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTEListItemBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_NEST_LIST, RTEListItemBlock.name, new ListItemReplaceNestListStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEListItemBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new ListItemInsertNewParagraphStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListItemBlock.name, new ListItemInsertImageStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODES_BEFORE, RTEListItemBlock.name, new BlockInsertNodesBeforeNodeStrategy());
+})();
+
+/**
+ * Insert block array at the front of the block strategy.
+ */
+class BlockInsertBlocksBeforeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.replaceBlockWithBlocks(target, action.referBlock, [
+      ...action.blocksToBeInserted,
+      action.referBlock,
+    ]);
+  }
+  /**
+   * Replaces a specific block with an array of blocks within a RTEContentBlock array.
+   *
+   * @param {RTEListBlock|VegaRTEContent} target - The list block or the VegaRTEContent instance.
+   * @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(target, referBlock, blocks) {
+    if (target.blocks) {
+      blocks.forEach((block) => {
+        block.parent = target;
+      });
+      const arrayFixed = target.blocks;
+      target.blocks = arrayFixed.flatMap((block) => {
+        if (block === referBlock) {
+          return blocks;
+        }
+        else {
+          return block;
+        }
+      });
+    }
+  }
+}
+
+/**
+ * Insert block array at the behind of the block strategy.
+ */
+class BlockInsertBlocksAfterStrategy extends BlockInsertBlocksBeforeStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.replaceBlockWithBlocks(target, action.referBlock, [
+      action.referBlock,
+      ...action.blocksToBeInserted,
+    ]);
+  }
+}
+
+/**
+ * Append new block array to list block or VegaRTEContent instance strategy.
+ */
+class BlockAppendBlocksStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const newBlocks = action.entityToBeAppended;
+    if (target.blocks) {
+      newBlocks.forEach((block) => {
+        block.parent = target;
+      });
+      const arrayFixed = target.blocks;
+      target.blocks = arrayFixed.concat(newBlocks);
+    }
+  }
+}
+
+/**
+ * Delete the nest list block action
+ *
+ * @example needRemovedNestList.parent.apply(new RemoveNestListAction(needRemovedNestList))
+ */
+class RemoveNestListAction extends ModifyContentAction {
+  constructor(childList) {
+    super();
+    this.type = ModifyContentActionType.DELETE_NEST_LIST;
+    this.nestListBlockToBeRemoved = childList;
+  }
+}
+
+/**
+ * List block or VegaRTEContent remove child block strategy.
+ */
+class BlockRemoveChildBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const blockToBeRemoved = action.entityToBeRemoved;
+    if (target.blocks) {
+      target.blocks = target.blocks.filter((block) => block !== blockToBeRemoved);
+    }
+  }
+}
+
+/**
+ * List remove list item strategy.
+ */
+class ListRemoveListItemStrategy extends BlockRemoveChildBlockStrategy {
+  /**
+   * Remove the list item, check the list item and remove self if the list item is empty.
+   *
+   * @param {RemoveChildAction} action - The remove action instance.
+   * @param {RTEListBlock} target - The list block.
+   */
+  handleAction(action, target) {
+    super.handleAction(action, target);
+    const parent = target.parent;
+    if (target.blocks.length === 0 && parent) {
+      // The parent is a list item mean the current block is a nest list, so we need to use RemoveNestListAction to remove the item
+      if (parent['type'] === 'list-item') {
+        parent.apply(new RemoveNestListAction(target));
+      }
+      else {
+        parent.apply(new RemoveChildAction(target));
+      }
+    }
+  }
+}
+
+/**
+ * Convert the selected blocks to list strategy.
+ */
+class ListTransformToListStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const selectedBlocks = action.selectedBlocks;
+    const bulletList = target.parent.createList(action.listType);
+    const isSameList = selectedBlocks.every((block) => block.parent === target);
+    if (isSameList) {
+      // Select one or more list items belonging to the same list, and all items in this list should be updated
+      bulletList.apply(new AppendChildNodesAction(target.blocks));
+      target.parent.apply(new InsertBlocksAfterAction(target, bulletList));
+      target.parent.apply(new RemoveChildAction(target));
+      selectedBlocks.forEach((block) => block.nodes.map((node) => node.apply(new SyncUpSelectionAction())));
+    }
+    else {
+      const listItems = action.selectedBlocks.map((block) => target.parent.toListItem(block));
+      bulletList.apply(new AppendChildNodesAction(listItems));
+      target.parent.apply(new InsertBlocksAfterAction(target, bulletList));
+      action.selectedBlocks.forEach((block) => {
+        block.parent.apply(new RemoveChildAction(block));
+      });
+      if (target.blocks.length === 0) {
+        target.parent.apply(new RemoveChildAction(target));
+      }
+    }
+  }
+}
+
+/**
+ * Convert the selected list block to paragraph strategy.
+ */
+class ListTransformToParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    let isSelectedFirstBlock = false;
+    let isSelectedLastBlock = false;
+    const selectedBlocks = action.selectedBlocks;
+    const currentParagraph = selectedBlocks.map((block) => {
+      block.nodes.map((node) => node.apply(new SyncUpSelectionAction()));
+      if (block === target.blocks[0])
+        isSelectedFirstBlock = true;
+      if (block === target.blocks[target.blocks.length - 1])
+        isSelectedLastBlock = true;
+      return this.toParagraph(block);
+    });
+    if (isSelectedFirstBlock) {
+      target.parent.apply(new InsertBlocksBeforeAction(target, ...currentParagraph));
+    }
+    else if (isSelectedLastBlock) {
+      target.parent.apply(new InsertBlocksAfterAction(target, ...currentParagraph));
+    }
+    else {
+      const startIndex = target.blocks.indexOf(selectedBlocks[0]);
+      const lastIndex = target.blocks.indexOf(selectedBlocks[selectedBlocks.length - 1]);
+      const firstBulletList = target.parent.createList(target.type);
+      firstBulletList.apply(new AppendChildNodesAction(target.blocks.slice(0, startIndex)));
+      const lastBulletList = target.parent.createList(target.type);
+      lastBulletList.apply(new AppendChildNodesAction(target.blocks.slice(lastIndex + 1)));
+      target.parent.apply(new InsertBlocksBeforeAction(target, firstBulletList, ...currentParagraph, lastBulletList));
+      target.parent.apply(new RemoveChildAction(target));
+    }
+    selectedBlocks.map((block) => {
+      target.apply(new RemoveChildAction(block));
+    });
+    if (target.blocks.length === 0) {
+      target.parent.apply(new RemoveChildAction(target));
+    }
+  }
+  /**
+   * Converts a RTEListItemBlock to a RTETextBlock representing a paragraph.
+   *
+   * @param {RTEListItemBlock} block - The block that will be covered
+   * @returns {RTETextBlock} Returns a `RTETextBlock`.
+   */
+  toParagraph(block) {
+    const textBlock = new RTETextBlock(generateUUID(), 'paragraph');
+    textBlock.apply(new AppendChildNodesAction(block['nodes']));
+    textBlock['annotationMap'] = block['annotationMap'];
+    return textBlock;
+  }
+}
+
+/**
+ * Insert image to list block strategy.
+ */
+class ListInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * Insert image block at behind of the list item block.
+   *
+   * @param {InsertImageToBlockAction} action - The insert image action instance.
+   * @param {RTEListBlock} target - The list block.
+   */
+  handleAction(action, target) {
+    const imageBlock = action.imageBlockToBeInserted;
+    if (target.parent['type'] !== 'list-item') {
+      target.parent.apply(new InsertBlocksAfterAction(target, imageBlock));
+    }
+    else {
+      target.parent.apply(action);
+    }
+  }
+}
+
+/**
+ * List annotation
+ */
+class ListAnnotation extends BlockAnnotation {
+  constructor() {
+    super(...arguments);
+    this.type = BlockAnnotationTypeEnum.LIST;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return {
+      paddingLeft: '8px',
+      marginLeft: '16px',
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return 'v-rte--list';
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new ListAnnotation();
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return undefined;
+  }
+}
+
+/**
+ * List block
+ */
+class RTEListBlock extends RTEBlock {
+  constructor(id, type) {
+    super(id);
+    this.type = 'bullet-list';
+    this.blocks = [];
+    this.type = type;
+    this.annotationMap.set(BlockAnnotationTypeEnum.LIST, new ListAnnotation());
+  }
+  /**
+   * Converts a VegaRTEListBlock object to an RTEListBlock
+   *
+   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListBlock` object into an `RTEListBlock`.
+   * @returns {RTEListBlock} Return an instance of `RTEListBlock`
+   */
+  static from(block) {
+    const listBlock = new RTEListBlock(block.id, block.type);
+    const { annotations } = block;
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          listBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    listBlock.blocks = block.blocks.map((item) => {
+      const listItemBlock = RTEListItemBlock.from(item);
+      listItemBlock.parent = listBlock;
+      return listItemBlock;
+    });
+    return listBlock;
+  }
+  /**
+   * 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<BlockAnnotationsEntity>} The `createAnnotationEntity` function returns a nullable tuple containing a
+   * `BlockAnnotationTypeEnum` and a `BlockAnnotation` object.
+   */
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'customAttribute':
+        return CustomAttributeAnnotation.from(value);
+      case 'customClass':
+        return CustomClassAnnotation.from(value);
+      case 'customStyle':
+        return CustomStyleAnnotation.from(value);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, blocks: this.blocks.map((block) => block.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const BlockTag = this.type === 'number-list' ? 'ol' : 'ul';
+    const attrStr = super.generateAttributeString();
+    return [
+      `<${BlockTag}${attrStr}>`,
+      this.blocks.map((block) => block.toHtml()).join(''),
+      `</${BlockTag}>`,
+    ].join('');
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.blocks.length > 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.blocks[this.blocks.length - 1].getLastNode();
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    const clonedListBlock = new RTEListBlock(this.id, this.type);
+    clonedListBlock.blocks = this.blocks.map((item) => {
+      const clonedListItemBlock = item.clone();
+      clonedListItemBlock.parent = clonedListBlock;
+      return clonedListItemBlock;
+    });
+    clonedListBlock.annotationMap = super.cloneAnnotations();
+    clonedListBlock.parent = this.parent;
+    return clonedListBlock;
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, RTEListBlock.name, new ListRemoveListItemStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_BEFORE, RTEListBlock.name, new BlockInsertBlocksBeforeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_AFTER, RTEListBlock.name, new BlockInsertBlocksAfterStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, RTEListBlock.name, new BlockAppendBlocksStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTEListBlock.name, new ListTransformToListStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK, RTEListBlock.name, new ListTransformToParagraphStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListBlock.name, new ListInsertImageStrategy());
+})();
+
+/**
+ * Transform the selected text blocks to a code block strategy.
+ */
+class BlockTransformToCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * Get the all select text and create a new code block.
+   *
+   * @param {TransformToCodeBlockAction} action - The action instance.
+   * @param {VegaRTEContent} target - The block top parent instance.
+   */
+  handleAction(action, target) {
+    const selectedBlocks = action.selectedBlocks;
+    const codeBlock = new RTECodeBlock(generateUUID(), this.getCodeContent(selectedBlocks), 'plainText');
+    target.apply(new InsertBlocksBeforeAction(selectedBlocks[0], codeBlock));
+    action.newCodeBlock = codeBlock;
+    this.removeSelectBlocks(selectedBlocks, target);
+  }
+  /**
+   * Get the selected text block text content.
+   *
+   * @param {RTEBlock[]} selectedBlocks - The selected blocks.
+   * @returns {string} - The selected text content.
+   */
+  getCodeContent(selectedBlocks) {
+    const selectedTextBlocks = selectedBlocks.filter((item) => item.type !== 'image' && item.type !== 'list-item');
+    return selectedTextBlocks
+      .map((block) => {
+      return block.nodes.map((node) => node.text).join('');
+    })
+      .join('\n');
+  }
+  /**
+   * Remove the selected blocks after append new code block.
+   *
+   * @param {RTEBlock[]} selectedBlocks - The selected blocks.
+   * @param {VegaRTEContent} target - The selected block top parent object.
+   */
+  removeSelectBlocks(selectedBlocks, target) {
+    for (let i = 0; i < selectedBlocks.length; i++) {
+      target.apply(new RemoveChildAction(selectedBlocks[i]));
+    }
+  }
+}
+
+/**
+ * Abstract class to define strategies for processing HTML elements
+ */
+class ElementToDTOStrategy {
+}
+/**
+ * Class to represent the output of a strategy applied to HTML elements
+ */
+class ElementToDTOStrategyOutput {
+  constructor(currentStrategy, currentElements) {
+    this.childrenOutput = [];
+    this.currentStrategy = currentStrategy;
+    this.currentElements = currentElements;
+  }
+  /**
+   * Set children output.
+   *
+   * @param {ElementToDTOStrategyOutput[]} childrenOutput - children outputs.
+   */
+  setChildrenOutput(childrenOutput) {
+    this.childrenOutput = childrenOutput;
+  }
+  /**
+   * Transform current output and children output to DTO
+   *
+   * @returns {Nullable<RTEContentBlock>} - DTO.
+   */
+  toDto() {
+    const currentBlock = this.currentStrategy.handle(this.currentElements);
+    if (this.childrenOutput.length > 0 && currentBlock) {
+      this.currentStrategy.appendChildBlocks(currentBlock, this.childrenOutput
+        .map((childOutput) => childOutput.toDto())
+        .filter(isNonNullable));
+    }
+    return currentBlock;
+  }
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+/** Abstract class for block html element to RTE block dto */
+class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
+  /**
+   * Generate child nodes of block element, this will inherit all annotations from parent to text node and
+   *   flat the child nodes.
+   *
+   * Example:
+   *   <li>
+   *     <u><i>text1</i></u>
+   *     <span style='font-weight: bold;'><span>text2</span></span>
+   *     text3
+   *   </li>
+   * will tranform to:
+   *   <li>
+   *     <span>text1</span> // with underline and italic annotations
+   *     <span>text2</span> // with bold annotations
+   *     <span>text3</span> // no annotations
+   *   </li>
+   *
+   * @param {HTMLElement[]} elements - Child elements.
+   * @param {VegaRTETextAnnotations} annotations - Parent annotations.
+   * @returns {VegaRTETextNode[]} - Text node DTO.
+   */
+  generateChildNodes(elements, annotations = {}) {
+    const childNodes = [];
+    elements.forEach((child) => {
+      if (child.nodeType === Node.TEXT_NODE) {
+        if (this.isInvalidTextNode(child))
+          return;
+        childNodes.push({
+          id: generateUUID(),
+          type: 'text',
+          text: String(child.textContent),
+          annotations: annotations,
+        });
+      }
+      else {
+        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), this.inheritAndGenerateTextNodeAnnotations(child, annotations)));
+      }
+    });
+    return childNodes;
+  }
+  /**
+   * Generate annotations map for block element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRTEBlockAnnotations} - Text block annotations.
+   */
+  generateBlockAnnotations(element) {
+    const annotations = {};
+    const textAlign = this.getTextAlign(element);
+    const indent = this.getIndent(element);
+    if (textAlign)
+      annotations.textAlign = textAlign;
+    if (indent)
+      annotations.indent = indent;
+    this.generateCommonAnnotations(element, annotations);
+    return annotations;
+  }
+  /**
+   * Obtain the custom attributes of element, excluding 'style' and 'class'.
+   *
+   * @param {HTMLElement} element - current element.
+   * @param {string[]} attributes - the custom attributes of current element.
+   * @returns {Record<string, string>} - Record<string, string>.
+   */
+  generateCustomAttrAnnotations(element, attributes) {
+    return attributes.reduce((acc, item) => {
+      acc[item] = element.getAttribute(item);
+      return acc;
+    }, {});
+  }
+  /**
+   * Obtain and format the style of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {AnnotationStyle} - Record<string, string>.
+   */
+  generateCustomStyleAnnotations(element) {
+    const customStyle = element.getAttribute('style');
+    const styleValue = customStyle.split(';').filter(Boolean);
+    return styleValue
+      .filter((key) => key !== ' ')
+      .map((key) => {
+      // to remove redundant quote pairs if needed, for example: ['fontFamily: "Roboto Mono"'] will be updated to ['fontFamily: Roboto Mono']
+      const styleObject = key.replace(/(['"])((?:\\\1|[^\1])*?)\1/g, '$2').split(':');
+      const styleKey = dashCaseToCamel(styleObject[0].trim());
+      return {
+        [styleKey]: styleObject[1].trim().replace(';', ''),
+      };
+    })
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Inherit annotation from block should not include custom annotation.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRTETextAnnotations} - Inherit node annotations.
+   */
+  generateBlockInheritAnnotations(element) {
+    const annotations = this.generateTextNodeAnnotations(element);
+    return this.filterOutCustomAnnotation(annotations);
+  }
+  /**
+   * Generate custom attribute, custom class and custom style annotation.
+   *
+   * @param {HTMLElement} element - current element.
+   * @param {VegaRTEBlockAnnotations} annotations - current element.
+   * @returns {VegaRTETextAnnotations} - Inherit node annotations.
+   */
+  generateCommonAnnotations(element, annotations = {}) {
+    const customAttributes = this.getCustomAttributeName(element);
+    const customClass = this.getCustomClass(element);
+    if (customAttributes.length > 0)
+      annotations.customAttribute = this.generateCustomAttrAnnotations(element, customAttributes);
+    if (customClass.length > 0)
+      annotations.customClass = customClass;
+    if (element.getAttribute('style'))
+      annotations.customStyle = this.generateCustomStyleAnnotations(element);
+    return annotations;
+  }
+  /**
+   * Inherit and generate text node annotations.
+   *
+   * @param {HTMLElement} element - current element.
+   * @param {VegaRTETextAnnotations} parentAnnotations - parent annotations
+   * @returns {VegaRTETextAnnotations} - Inherit node annotations.
+   */
+  inheritAndGenerateTextNodeAnnotations(element, parentAnnotations) {
+    const inheritedAnnotation = this.filterOutCustomAnnotation(parentAnnotations);
+    const currentNodeAnnotation = this.generateTextNodeAnnotations(element);
+    parentAnnotations.bold && (currentNodeAnnotation.bold = true);
+    parentAnnotations.underline && (currentNodeAnnotation.underline = true);
+    parentAnnotations.italic && (currentNodeAnnotation.italic = true);
+    parentAnnotations.strikethrough && (currentNodeAnnotation.strikethrough = true);
+    return Object.assign({}, inheritedAnnotation, currentNodeAnnotation);
+  }
+  /**
+   * Generate annotations map for text node element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRTETextAnnotations} - Text node annotations.
+   */
+  generateTextNodeAnnotations(element) {
+    const annotations = {
+      bold: this.isBold(element),
+      italic: this.isItalic(element),
+      underline: this.isUnderline(element),
+      strikethrough: this.isStrikethrough(element),
+      code: this.isCode(element),
+    };
+    const color = this.getColor(element);
+    const link = this.getLink(element);
+    if (color)
+      annotations.textColor = color;
+    // while have link, the custom attribute, class and style have already generated in link annotation,
+    // so we not need generate it again.
+    if (link) {
+      annotations.link = link;
+    }
+    else {
+      this.generateCommonAnnotations(element, annotations);
+    }
+    return annotations;
+  }
+  /**
+   * Filter out custom annotations.
+   *
+   * @param {VegaRTETextAnnotations} annotations - Annotations.
+   * @returns {VegaRTETextAnnotations} - Filtered annotations.
+   */
+  filterOutCustomAnnotation(annotations) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const filteredAnnotation = __rest(annotations, ["customAttribute", "customClass", "customStyle"]);
+    return filteredAnnotation;
+  }
+  /**
+   * Get the custom class
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {string[]} - the class after .
+   */
+  getCustomClass(element) {
+    return element.classList
+      .toString()
+      .split(' ')
+      .filter((item) => !item.includes('v-rte') && item !== '');
+  }
+  /**
+   * Check is a invalid text node.
+   *
+   * @param {HTMLElement} element - Current node element.
+   * @returns {boolean} - boolean.
+   */
+  isInvalidTextNode(element) {
+    if (element.nodeValue && element.nodeValue.includes('\t')) {
+      const value = element.nodeValue.replace(/\n|\t/gm, '');
+      if (value.length === 0)
+        return true;
+    }
+    return false;
+  }
+  /**
+   * Is code element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isCode(element) {
+    return (element.classList.contains('v-rte--code') ||
+      element.nodeName === 'CODE' ||
+      element.nodeName === 'PRE' ||
+      element.style.fontFamily === 'monospace');
+  }
+  /**
+   * Is bold element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isBold(element) {
+    return (element.nodeName === 'STRONG' ||
+      element.nodeName === 'B' ||
+      element.style.fontWeight === 'bold' ||
+      element.style.fontWeight === '700' ||
+      element.classList.contains('v-rte--bold'));
+  }
+  /**
+   * Is italic element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isItalic(element) {
+    return (element.nodeName === 'I' ||
+      element.style.fontStyle === 'italic' ||
+      element.nodeName === 'EM' ||
+      element.classList.contains('v-rte--italic'));
+  }
+  /**
+   * Is underline element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isUnderline(element) {
+    return (element.style.textDecoration.includes('underline') ||
+      element.nodeName === 'U' ||
+      element.nodeName === 'INS' ||
+      element.classList.contains('v-rte--underline'));
+  }
+  /**
+   * Is strikethrough element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isStrikethrough(element) {
+    return (element.style.textDecoration.includes('line-through') ||
+      element.nodeName === 'S' ||
+      element.nodeName === 'DEL' ||
+      element.classList.contains('v-rte--strikethrough'));
+  }
+  /**
+   * Get current color of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<string>} - color.
+   */
+  getColor(element) {
+    var _a;
+    const color = element.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 colorSchema.key;
+      return null;
+    }
+    else {
+      for (const color of RTE_TEXT_COLORS) {
+        if (element.style.color.includes(color.key)) {
+          return color.key;
+        }
+      }
+      return null;
+    }
+  }
+  /**
+   * Get current link of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRTELink>} - link.
+   */
+  getLink(element) {
+    if (element.nodeName === 'A') {
+      const link = {
+        href: element.href,
+        groupKey: generateUUID(),
+      };
+      const customAttributes = this.getCustomAttributeName(element);
+      const customClass = this.getCustomClass(element);
+      if (customAttributes.length > 0) {
+        link.customAttribute = this.generateCustomAttrAnnotations(element, customAttributes);
+      }
+      if (customClass.length > 0) {
+        link.customClass = customClass;
+      }
+      if (element.getAttribute('style')) {
+        link.customStyle = this.generateCustomStyleAnnotations(element);
+      }
+      return link;
+    }
+    return null;
+  }
+  /**
+   * Get text align of current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRTEBlockAlignment>} - Text align.
+   */
+  getTextAlign(element) {
+    const classList = element.classList;
+    if (classList.contains(`v-rte--horizontal-alignment-left`)) {
+      return 'left';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-center`)) {
+      return 'center';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-right`)) {
+      return 'right';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-justify`)) {
+      return 'justify';
+    }
+    const style = element.style;
+    switch (style.textAlign) {
+      case 'center':
+        return 'center';
+      case 'right':
+        return 'right';
+      case 'justify':
+        return 'justify';
+      case 'left':
+        return 'left';
+      default:
+        return null;
+    }
+  }
+  /**
+   * Get indent of current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<number>} - Indent.
+   */
+  getIndent(element) {
+    const style = element.style;
+    let marginLeft;
+    if (style.marginLeft) {
+      marginLeft = style.marginLeft;
+    }
+    else if (style.margin) {
+      const margins = style.margin.split(' ');
+      switch (margins.length) {
+        case 4:
+          marginLeft = margins[3];
+          break;
+        case 2:
+        case 3:
+          marginLeft = margins[1];
+          break;
+        default:
+          marginLeft = margins[0];
+          break;
+      }
+    }
+    else {
+      return null;
+    }
+    const marginLeftNumber = Number(marginLeft.replace('px', ''));
+    return marginLeftNumber && marginLeftNumber >= 0 ? Math.floor(marginLeftNumber / 16) : null;
+  }
+  /**
+   * Get custom attribute of current element, excluding 'style' and 'class'.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {string[]} - Text align.
+   */
+  getCustomAttributeName(element) {
+    return element.getAttributeNames().filter((attr) => attr !== 'style' && attr !== 'class');
+  }
+}
+
+/** Transform continue inline block elements to text block DTO */
+class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    let count = 0;
+    for (let i = currentIndex; i < elementsArray.length; i++) {
+      const element = elementsArray[i];
+      if (element.nodeType === Node.TEXT_NODE ||
+        (ContinueInlineToRTETextBlockStrategy.canHandleTags.includes(element.nodeName) &&
+          !(element.textContent === '' && element.querySelector('IMG')))) {
+        count++;
+      }
+      else {
+        break;
+      }
+    }
+    return count;
+  }
+  /**
+   * Parse to a text block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray) {
+    const parent = elementsArray[0].parentElement;
+    const nodes = this.generateChildNodes(elementsArray, this.generateBlockInheritAnnotations(parent));
+    if (nodes.length === 0)
+      return null;
+    return RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: nodes,
+      annotations: this.generateBlockAnnotations(parent),
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+ContinueInlineToRTETextBlockStrategy.canHandleTags = [
+  'SPAN',
+  'STRONG',
+  'CODE',
+  'I',
+  'EM',
+  'S',
+  'U',
+  'A',
+  'VEGA-RICH-TEXT-LINK-EDITOR',
+  'B',
+  'INS',
+  'DEL',
+  'PRE',
+];
+
+/** Transform ul element to list block DTO */
+class UlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'UL' ? 1 : 0;
+  }
+  /**
+   * Parse to a block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Bullet list block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'bullet-list',
+      blocks: [],
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
+  }
+  /**
+   * Append child list item blocks to current list block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEContentBlock[]} childBlocks - Current list item blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.blocks = childBlocks.filter((block) => block instanceof RTEListItemBlock);
+    childBlocks.forEach((block) => (block.parent = currentBlock));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}
+
+/** Transform li element to list item block DTO */
+class LiToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'LI' ? 1 : 0;
+  }
+  /**
+   * Parse to a list item block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListItemBlock.from({
+      id: generateUUID(),
+      type: 'list-item',
+      nodes: this.generateChildNodes(Array.from(elementsArray[0].childNodes).filter((item) => !['UL', 'OL'].includes(item.nodeName)), this.generateBlockInheritAnnotations(elementsArray[0])),
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
+  }
+  /**
+   * Append child list blocks to current list item block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list item block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.filter((block) => ['bullet-list', 'number-list'].includes(block.type));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}
+
+/** Transform inline block element to text block DTO */
+class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return [
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+      'title',
+      'subtitle',
+    ].includes(this.getElementType(elementsArray[currentIndex]))
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a text block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray) {
+    const nodes = this.generateChildNodes(Array.from(elementsArray[0].childNodes));
+    if (nodes.length === 0)
+      return null;
+    return RTETextBlock.from({
+      id: generateUUID(),
+      type: this.getElementType(elementsArray[0]),
+      nodes: nodes,
+      annotations: Object.assign(Object.assign({}, this.generateBlockAnnotations(elementsArray[0])), { textStyle: this.getElementType(elementsArray[0]) }),
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Get the node type of element. The element type is determined in the following
+   * order: "data-type" attribute, node name, font size and class name.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {string} - node type.
+   */
+  getElementType(element) {
+    const byDataType = this.getElementTypeByDataType(element);
+    if (byDataType)
+      return byDataType;
+    const byNodeName = this.getElementTypeByNodeName(element);
+    if (byNodeName)
+      return byNodeName;
+    const byFontSize = this.getElementTypeByFontSize(element);
+    if (byFontSize)
+      return byFontSize;
+    const byClassName = this.getElementTypeByClassName(element);
+    if (byClassName)
+      return byClassName;
+    return 'paragraph';
+  }
+  /**
+   * Get the element type by data-type attribute.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<string>} - element type or null if not found.
+   */
+  getElementTypeByDataType(element) {
+    if (element.nodeType !== Node.TEXT_NODE && element.hasAttribute('data-type')) {
+      return element.getAttribute('data-type');
+    }
+    return null;
+  }
+  /**
+   * Get the element type by font size.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<string>} - element type or null if not found.
+   */
+  getElementTypeByFontSize(element) {
+    var _a;
+    switch ((_a = element.style) === null || _a === void 0 ? void 0 : _a.fontSize) {
+      case '36px':
+        return 'title';
+      case '28px':
+        return 'subtitle';
+      case '22px':
+        return 'heading-1';
+      case '20px':
+        return 'heading-2';
+      case '18px':
+        return 'heading-3';
+      default:
+        return null;
+    }
+  }
+  /**
+   * Get the element type by node name.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<string>} - element type or null if not found.
+   */
+  getElementTypeByNodeName(element) {
+    switch (element.nodeName) {
+      case 'H1':
+        return 'heading-1';
+      case 'H2':
+        return 'heading-2';
+      case 'H3':
+        return 'heading-3';
+      case 'H4':
+        return 'heading-4';
+      case 'H5':
+        return 'heading-5';
+      case 'H6':
+        return 'heading-6';
+      default:
+        return null;
+    }
+  }
+  /**
+   * Get the element type by class name.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<string>} - element type or null if not found.
+   */
+  getElementTypeByClassName(element) {
+    if (element.className) {
+      const match = /\bv-rte--text-style-(title|subtitle|heading-1|heading-2|heading-3|paragraph)\b/.exec(element.className);
+      if (match) {
+        return match[1];
+      }
+    }
+    return null;
+  }
+}
+
+/** Abstract class for block html element to RTE block dto */
+class ElementToRTEImageBlockStrategyAbstract extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Determine the image display size based on the width of the current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRichTextImageEditorSizeType} -Image size, default 'md'.
+   */
+  getImageSize(element) {
+    if (element.getAttribute('data-size'))
+      return element.getAttribute('data-size');
+    return 'md';
+  }
+  /**
+   * Create a RTE Image block according to the img element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {RTEImageBlock} -RTE Image block.
+   */
+  createRTEImageBlock(element) {
+    return RTEImageBlock.from({
+      id: generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: generateUUID(),
+          type: 'image',
+          url: element.src,
+          annotations: Object.assign({ size: this.getImageSize(element), alt: element.alt }, this.generateCommonAnnotations(element)),
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element.parentElement),
+    });
+  }
+}
+
+/** Transform img element to image block DTO */
+class ImgToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'IMG' ? 1 : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    return this.createRTEImageBlock(element);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform vega-rich-text-image-editor element to image block DTO */
+class VegaImageToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'VEGA-RICH-TEXT-IMAGE-EDITOR' ? 1 : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    const image = element.querySelector('img');
+    if (isNonNullable(image)) {
+      return RTEImageBlock.from({
+        id: generateUUID(),
+        type: 'image',
+        nodes: [
+          {
+            id: generateUUID(),
+            type: 'image',
+            url: image.src,
+            annotations: Object.assign({ size: this.getImageSize(element), alt: element.alt }, this.generateCommonAnnotations(element)),
+          },
+        ],
+        annotations: this.generateBlockAnnotations(element.parentElement),
+      });
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform ol element to list block DTO */
+class OlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'OL' ? 1 : 0;
+  }
+  /**
+   * Parse to a number list block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Number list block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'number-list',
+      blocks: [],
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
+  }
+  /**
+   * Append child list item blocks to current list block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEContentBlock[]} childBlocks - Current list item blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.blocks = childBlocks.filter((block) => block instanceof RTEListItemBlock);
+    childBlocks.forEach((block) => (block.parent = currentBlock));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}
+
+/** Transform img in span or other inline element to image block DTO */
+class SpanImageToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element.nodeType === Node.ELEMENT_NODE &&
+      element.textContent === '' &&
+      element.querySelector('img')
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0].querySelector('img');
+    return this.createRTEImageBlock(element);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform child element of UL element which are not LI element to list item block DTO */
+class ULNotLiChildToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    const parent = element.parentElement;
+    const isLiNode = element.nodeName !== 'LI';
+    // while child is empty text node like newline or empty string, we should not covert it.
+    const isEmptyNode = element.nodeType === Node.TEXT_NODE && element.textContent.trim() === '';
+    // The node must be in list item.
+    const isInList = isNonNullable(parent) && ['UL', 'OL'].includes(parent.nodeName);
+    return isLiNode && !isEmptyNode && isInList ? 1 : 0;
+  }
+  /**
+   * Parse to a list item block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray) {
+    const nodes = this.generateChildNodes(elementsArray);
+    return RTEListItemBlock.from({
+      id: generateUUID(),
+      type: 'list-item',
+      nodes: nodes,
+      annotations: {},
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform other editor code element which has attribute data-language to RTE code block DTO */
+class JiraCodeToRTECodeBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return (elementsArray[currentIndex].tagName === 'PRE' ||
+      elementsArray[currentIndex].tagName === 'CODE') &&
+      elementsArray[currentIndex].hasAttribute('data-language')
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray) {
+    const codeRef = elementsArray[0];
+    if (codeRef) {
+      const content = codeRef.textContent;
+      const language = codeRef.dataset
+        .language;
+      return RTECodeBlock.from({
+        id: generateUUID(),
+        type: 'code-block',
+        content,
+        language,
+      });
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform vega-code-block element to code block DTO */
+class VegaCodeBlockToRTECodeBlockStrategy extends JiraCodeToRTECodeBlockStrategy {
+  /**
+   * Can be handle.
+   *
+   * TODO: Update the browser clipboard data to fix the issue with nested vega-code-block elements.
+   * In safari the html snippet will be like: <vega-code-block><p><span>paragraph</span></p><vega-code-block></vega-code-block></vega-code-block>
+   * The vega-code-block nested inside the vega-code-block, so we need to check the child element.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return (elementsArray[currentIndex].tagName === 'VEGA-CODE-BLOCK' &&
+      !!elementsArray[currentIndex].querySelector('vega-code-block') === false) ||
+      this.isCodeBlockContainer(elementsArray[currentIndex])
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray) {
+    const codeBlockElement = this.isCodeBlockContainer(elementsArray[0])
+      ? elementsArray[0].querySelector('vega-code-block')
+      : elementsArray[0];
+    const code = codeBlockElement.querySelector('code');
+    if (code) {
+      return super.handle([code]); // Call the parent method to handle the code element
+    }
+    else if (codeBlockElement.hasAttribute('data-content')) {
+      // The code element in shadow dom could be empty in firefox.
+      const code = document.createElement('code');
+      code.textContent = codeBlockElement.dataset.content;
+      code.dataset.language = codeBlockElement.dataset.language;
+      return super.handle([code]); // Call the parent method to handle the code element
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Checks if the given element is a code block container.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} - Boolean result.
+   */
+  isCodeBlockContainer(element) {
+    return (element.tagName === 'PRE' &&
+      element.classList.contains('code-block-container') &&
+      element.querySelectorAll('vega-code-block').length === 1);
+  }
+}
+
+/** Element to DTO processor */
+class ElementToDtoStrategyProcessor {
+  constructor() {
+    this.elementStrategies = [
+      new UlToRTEListBlockStrategy(),
+      new OlToRTEListBlockStrategy(),
+      new ULNotLiChildToRTEListItemBlockStrategy(),
+      new LiToRTEListItemBlockStrategy(),
+      new VegaCodeBlockToRTECodeBlockStrategy(),
+      new JiraCodeToRTECodeBlockStrategy(),
+      new InlineBlockToRTETextBlockStrategy(),
+      new ImgToRTEImageBlockStrategy(),
+      new VegaImageToRTEImageBlockStrategy(),
+      new SpanImageToRTEImageBlockStrategy(),
+      new ContinueInlineToRTETextBlockStrategy(),
+    ];
+  }
+  /**
+   * Transform process.
+   *
+   * @param {HTMLElement[]} elements - Current elements.
+   * @returns {ElementToDTOStrategyOutput[]} - outputs.
+   */
+  process(elements) {
+    const outputs = [];
+    for (let i = 0; i < elements.length; i++) {
+      if (this.isInvalidElement(elements[i]))
+        continue;
+      let canHandledCount = 0;
+      for (const strategy of this.elementStrategies) {
+        canHandledCount = strategy.canHandle(elements, i);
+        if (canHandledCount > 0) {
+          const handledElements = elements.slice(i, i + canHandledCount);
+          const output = new ElementToDTOStrategyOutput(strategy, handledElements);
+          if (canHandledCount === 1 && strategy.shouldProceedToElementChildren()) {
+            output.setChildrenOutput(this.process(Array.from(handledElements[0].childNodes)));
+          }
+          outputs.push(output);
+          i += canHandledCount - 1;
+          break;
+        }
+      }
+      if (canHandledCount === 0 && i < elements.length) {
+        const elementChildren = Array.from(elements[i].childNodes);
+        const childrenOutputs = this.process(Array.from(elementChildren));
+        if (childrenOutputs.length > 0) {
+          outputs.push(...childrenOutputs);
+        }
+      }
+    }
+    return outputs;
+  }
+  /**
+   * Checks if the given element is valid to parse.
+   *
+   * @param {HTMLElement} element - The pasted element.
+   * @returns {boolean} Is valid
+   */
+  isInvalidElement(element) {
+    if (element.nodeType === Node.COMMENT_NODE)
+      return true;
+    return ['META', 'BUTTON', 'STYLE'].includes(element.nodeName);
+  }
+}
+const ElementToDtoStrategyProcessor$1 = new ElementToDtoStrategyProcessor();
+
+/**
+ * Class representing the content state of the rich text editor.
+ */
+class VegaRTEContent {
+  constructor(blocks) {
+    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 {VegaRTEContent} 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);
+        case 'code-block':
+          return RTECodeBlock.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: '',
+          },
+        ],
+      },
+    ]);
+  }
+  /**
+   * Converts HTML content to a VegaRTEContent instance.
+   *
+   * @param {string} html - The HTML string to convert.
+   * @returns {VegaRTEContent} The converted content state.
+   */
+  static fromHtml(html) {
+    const body = new DOMParser().parseFromString(html, 'text/html').body;
+    const blocks = ElementToDtoStrategyProcessor$1.process(Array.from(body.childNodes))
+      .filter(isNonNullable)
+      .map((output) => output.toDto())
+      .filter(isNonNullable);
+    return new VegaRTEContent(blocks);
+  }
+  /**
+   * Clones the content state.
+   *
+   * @param {boolean} deep - If true, performs a deep clone of the content state.
+   * @returns {VegaRTEContent} The cloned content state.
+   */
+  clone(deep = false) {
+    return deep
+      ? new VegaRTEContent(this.blocks.map((block) => block.clone()))
+      : 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());
+  }
+  /**
+   * Converts the content state to HTML.
+   *
+   * @returns {string} The HTML representation of the content state.
+   */
+  toHtml() {
+    return this.blocks.map((block) => block.toHtml()).join('');
+  }
+  /**
+   * Internal method to add the block item, remove the block item
+   *
+   * @param {ModifyContentAction} action - Modify content action
+   */
+  apply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+  /**
+   * 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);
+  }
+  /**
+   * Finds a node by its ID in the content.
+   *
+   * @param {string} id - The ID of the node to find.
+   * @returns {Nullable<RTENode>} The found node or null if not found.
+   */
+  findNodeById(id) {
+    return this.findNodeInBlocksById(id, this.blocks);
+  }
+  /**
+   * Recursively searches for a node by its ID in the given blocks.
+   *
+   * @param {string} id - The ID of the node to find.
+   * @param {RTEContentBlock[]} blocks - The blocks to search within.
+   * @returns {Nullable<RTENode>} The found node or null if not found.
+   */
+  findNodeInBlocksById(id, blocks) {
+    for (const block of blocks) {
+      if ('nodes' in block) {
+        for (const node of block.nodes) {
+          if (node.id === id) {
+            return node;
+          }
+        }
+      }
+      if (block instanceof RTEListItemBlock && block.children) {
+        for (const cBlock of block.children) {
+          const foundNode = this.findNodeInBlocksById(id, cBlock.blocks);
+          if (foundNode) {
+            return foundNode;
+          }
+        }
+      }
+      if (block instanceof RTEListBlock && block.blocks) {
+        const foundNode = this.findNodeInBlocksById(id, block.blocks);
+        if (foundNode) {
+          return foundNode;
+        }
+      }
+    }
+    return null;
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, VegaRTEContent.name, new BlockRemoveChildBlockStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, VegaRTEContent.name, new BlockAppendBlocksStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_BEFORE, VegaRTEContent.name, new BlockInsertBlocksBeforeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_AFTER, VegaRTEContent.name, new BlockInsertBlocksAfterStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, VegaRTEContent.name, new BlockTransformToCodeBlockStrategy());
+})();
+
+export { BreakSingleBlockAction as B, ElementToDtoStrategyProcessor$1 as E, RTEImageBlock as R, VegaRTEContent as V, RTEListItemBlock as a, RTEListBlock as b };