@heartlandone/vega 2.34.1 → 2.35.0-RTE-preview

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

@@ -1,6 +1,4 @@
-import { h } from '@stencil/core';
 import { RTETextNode } from '../nodes/text-node';
-import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { isNonNullable } from '../../../../types/type-guard';
 import { TextStyleAnnotation } from '../annotations/text-style-annotation';
 import { ModifyContentActionType } from '../actions/modify-content-action.abstract';
@@ -36,6 +34,12 @@ export class RTETextBlock extends RTEBlock {
       this.annotationMap = new Map([TextStyleAnnotation.from('paragraph')]);
     }
   }
+  /**
+   * Converts a VegaRTETextBlock into an RTETextBlock.
+   *
+   * @param {VegaRTETextBlock} block - The block object
+   * @returns {RTETextBlock} A RTETextBlock class
+   */
   static from(block) {
     const textBlock = new RTETextBlock(block.id, block.type);
     const { annotations } = block;
@@ -70,9 +74,20 @@ export class RTETextBlock extends RTEBlock {
       return super.createAnnotationEntity(type, value);
     }
   }
+  /**
+   * Checks if a given text block type is one of the acceptable text styles.
+   *
+   * @param {VegaRTETextBlockType} type - The text block type
+   * @returns {boolean} Return a boolean value indicating whether the `type` parameter is valid.
+   */
   static isAcceptableTextStyle(type) {
     return ['title', 'subtitle', 'paragraph', 'heading-1', 'heading-2', 'heading-3'].includes(type);
   }
+  /**
+   * Merges RTETextNode nodes based on certain conditions.
+   *
+   * @param {AnnotationAction} action - AnnotationAction
+   */
   mergeNodes(action) {
     this.nodes = this.nodes.reduce((prev, cur) => {
       const lastNode = prev.at(-1);
@@ -89,38 +104,39 @@ export class RTETextBlock extends RTEBlock {
       return [...prev, cur];
     }, []);
   }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, nodes: this.nodes.map((node) => node.toJSON()) });
   }
+  /**
+   * Clone the nodes to a new block
+   *
+   * @param {RTEBlock} nodes - The nodes will be copied
+   * @returns {RTEBlock} New block
+   */
   cloneWithNodes(nodes) {
     const block = new RTETextBlock(generateUUID(), this.type);
     block.nodes = [];
     block.apply(new AppendChildNodesAction(nodes));
     return block;
   }
+  /**
+   * @inheritDoc
+   */
   isNotEmpty() {
     return this.nodes.length > 0 && this.nodes.some((node) => !node.isEmpty());
   }
+  /**
+   * @inheritDoc
+   */
   getLastNode() {
     return this.nodes[this.nodes.length - 1];
   }
-  render(renderContext, children) {
-    const BlockTag = this.getBlockTagByType(this.type);
-    return (h(BlockTag, { ref: this.registerRef.bind(this), style: this.getStyles(), class: super.getClasses() },
-      this.renderNodes(renderContext),
-      children));
-  }
-  registerRef(ref) {
-    if (ref) {
-      stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
-  renderNodes(renderConfig = {}) {
-    const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
-    return linkGroupAnnotation
-      ? linkGroupAnnotation.renderNodes(this.nodes, renderConfig)
-      : this.nodes.map((node) => node.render());
-  }
+  /**
+   * @inheritDoc
+   */
   doAnnotationActionApply(action) {
     if (action instanceof TextStyleAnnotationAction) {
       if (this.type !== 'list-item') {
@@ -202,6 +218,13 @@ export class RTETextBlock extends RTEBlock {
         break;
     }
   }
+  /**
+   * Splits a text node at a specified offset within a block of nodes and returns a new block with the split nodes.
+   *
+   * @param {RTETextNode} splitNode - The text node that will be split
+   * @param {number} startOffsetOfNode - The index at which will split the text content of the `splitNode`.
+   * @returns {Nullable<RTEBlock>} return either an RTEBlock object or null.
+   */
   splitTextNodeBlock(splitNode, startOffsetOfNode) {
     if (splitNode) {
       const beforeText = splitNode.text.slice(0, startOffsetOfNode);
@@ -223,13 +246,34 @@ export class RTETextBlock extends RTEBlock {
       }
     }
   }
+  /**
+   * Checks if the caret position is at the start of a specified RTETextNode.
+   *
+   * @param {RTETextNode} node - `RTETextNode` - a node representing an image in a rich text editor.
+   * @param {number} startOffset - The position within the text node where the caret is located.
+   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTETextNode.
+   */
   isCaretPositionAtStart(node, startOffset) {
     return node === this.nodes[0] && startOffset === 0;
   }
+  /**
+   * Checks if the caret position is at the end of a specified RTETextNode.
+   *
+   * @param {RTETextNode} node - `RTETextNode` - a node representing an image in a rich text editor.
+   * @param {number} startOffset - The position within the text node where the caret is located.
+   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTETextNode.
+   */
   isCaretPositionAtEnd(node, startOffset) {
     const lastNode = this.nodes[this.nodes.length - 1];
     return node === lastNode && (node.isEmpty() || startOffset === lastNode.text.length);
   }
+  /**
+   * lineBreakSingleBlock
+   *
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @returns {Nullable<RTETextNode>} Nullable<RTETextNode>
+   */
   lineBreakSingleBlock(splitNode, startOffsetOfNode) {
     if (splitNode) {
       const lineBreakNode = new RTETextNode(generateUUID(), '\n', this);
@@ -250,6 +294,12 @@ export class RTETextBlock extends RTEBlock {
       return lineBreakNode;
     }
   }
+  /**
+   * lineBreakMultipleBlocks
+   *
+   * @param {RTEBlock[]} selectedBlocks -
+   * @returns {Nullable<RTETextNode>} Nullable<RTETextNode>
+   */
   lineBreakMultipleBlocks(selectedBlocks) {
     const beforeNodes = this['nodes'];
     const lineBreakNode = new RTETextNode(generateUUID(), '\n', this);
@@ -257,6 +307,11 @@ export class RTETextBlock extends RTEBlock {
     this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes);
     return lineBreakNode;
   }
+  /**
+   * deleteNodeContent
+   *
+   * @param {DeleteBlockContentAction} action - ModifyContentAction
+   */
   deleteNodeContent(action) {
     const startContainerNode = action.startContainerNode;
     const startOffset = action.startOffset;
@@ -298,6 +353,7 @@ export class RTETextBlock extends RTEBlock {
         }
         /**
          * Remove line break
+         *
          * @example caret at the first line
          * \n
          * test
@@ -307,6 +363,7 @@ export class RTETextBlock extends RTEBlock {
         }
         /**
          * Remove line break
+         *
          * @example caret at the begin of second line
          * \n
          * test
@@ -332,35 +389,37 @@ export class RTETextBlock extends RTEBlock {
       }
     }
   }
+  /**
+   * Remove the child node
+   *
+   * @param {RemoveChildAction} action - Modify action
+   */
   removeChildNode(action) {
     this.nodes = this.nodes.filter((node) => node !== action.entityToBeRemoved);
     if (this.nodes.length === 0) {
       this.parent.apply(new RemoveChildAction(this));
     }
   }
+  /**
+   * mergeLineBreakNodes
+   *
+   * @param {RTENode[]} beforeNodes -
+   * @param {RTETextNode} lineBreakNode -
+   * @param {RTENode[]} afterNodes -
+   */
   mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes) {
     if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
       afterNodes.push(new RTETextNode(generateUUID(), '\n', this, beforeNodes[beforeNodes.length - 1] && beforeNodes[beforeNodes.length - 1].annotationMap));
     }
     this.apply(new ReplaceChildNodesAction([...beforeNodes, lineBreakNode, ...afterNodes]));
   }
-  getBlockTagByType(type) {
-    switch (type) {
-      case 'title':
-      case 'subtitle':
-        return `div`;
-      case 'heading-1':
-        return `h1`;
-      case 'heading-2':
-        return `h2`;
-      case 'heading-3':
-        return `h3`;
-      case 'paragraph':
-        return 'p';
-      case 'list-item':
-        return 'li';
-    }
-  }
+  /**
+   * breakSingleTextBlock
+   *
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @returns {Nullable<RTEBlock>} Nullable<RTEBlock>
+   */
   breakSingleTextBlock(splitNode, startOffsetOfNode) {
     const newParagraph = this.copyInlineStyleToNewParagraph(splitNode);
     if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
@@ -376,6 +435,11 @@ export class RTETextBlock extends RTEBlock {
     }
     return newParagraph;
   }
+  /**
+   * convertParagraphToList
+   *
+   * @param {TransformListAction} action - ModifyContentAction
+   */
   convertParagraphToList(action) {
     const bulletList = this.parent.createList(action.listType);
     const listItems = action.selectedBlocks.map((node) => this.parent.toListItem(node));
@@ -385,6 +449,11 @@ export class RTETextBlock extends RTEBlock {
       node.parent.apply(new RemoveChildAction(node));
     });
   }
+  /**
+   * insertImage
+   *
+   * @param {InsertImageToBlockAction} action - ModifyContentAction
+   */
   insertImage(action) {
     const splitNode = action.splitPointNode;
     const startOffsetOfNode = action.startOffsetOfNode;
@@ -401,6 +470,12 @@ export class RTETextBlock extends RTEBlock {
       this.parent.apply(new InsertBlocksAfterAction(this, newImageBlock));
     }
   }
+  /**
+   * copyInlineStyleToNewParagraph
+   *
+   * @param {RTETextNode} needCopedNode -
+   * @returns {RTETextBlock} RTETextBlock
+   */
   copyInlineStyleToNewParagraph(needCopedNode) {
     const textNode = needCopedNode.cloneWithText('');
     // The link annotation don't need inherited

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

@@ -1,13 +1,11 @@
-import { h } from '@stencil/core';
 import { NodeTypeEnum, RTENode } from './node.abstract';
-import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import { ImageAnnotation } from '../annotations/image-annotation';
-import { ImageAnnotationAction } from '../actions/image-annotation-action';
 import { methodPlaceholder } from 'vega-slimmer/core';
 import { NodeAnnotationTypeEnum } from '../annotations/node-annotation.abstract';
 import { isNonNullable } from '../../../../types/type-guard';
-import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
+/**
+ * Image node
+ */
 export class RTEImageNode extends RTENode {
   constructor(id, url, parentBlock, annotationMap) {
     super(id, annotationMap);
@@ -15,20 +13,30 @@ export class RTEImageNode extends RTENode {
     this.url = url;
     this.parentBlock = parentBlock;
   }
-  static from(image, parentBlock) {
-    const imageNode = new RTEImageNode(image.id, image.url, parentBlock);
+  /**
+   * Converts a VegaRTEImageNode into an RTEImageNode by mapping nodes and creating annotations.
+   *
+   * @param {VegaRTEImageNode} node - The node to be converted.
+   * @param {RTEImageBlock} parentBlock - The parent block
+   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   */
+  static from(node, parentBlock) {
+    const imageNode = new RTEImageNode(node.id, node.url, parentBlock);
     let annotations;
-    if (!image.annotations || Object.keys(image.annotations).length === 0) {
+    if (!node.annotations || Object.keys(node.annotations).length === 0) {
       annotations = { size: 'md' };
     }
     else {
-      annotations = image.annotations;
+      annotations = node.annotations;
     }
     imageNode.annotationMap = new Map(Object.keys(annotations)
       .map(() => ImageAnnotation.from(annotations.size, annotations.alt))
       .filter(isNonNullable));
     return imageNode;
   }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
     const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
     const annotations = {};
@@ -40,54 +48,19 @@ export class RTEImageNode extends RTENode {
     }
     return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
   }
-  render({ editable } = {}) {
-    const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
-    const size = imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size;
-    const alt = imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt;
-    const handleChange = ({ detail, }) => {
-      switch (detail.action) {
-        case 'edit': {
-          const size = detail.payload.size;
-          const alt = detail.payload.alt;
-          this.apply(new ImageAnnotationAction(size, alt));
-          break;
-        }
-        /*
-         * The below method is e2e-test covered in
-         * @see{module:vega-rich-text-editor-image-click-delete-button}
-         */
-        /* istanbul ignore next */
-        case 'delete': {
-          const event = new InputEvent('beforeinput', {
-            inputType: 'deleteContentBackward',
-            bubbles: true,
-          });
-          setTimeout(() => {
-            stateEntityRenderingRegistry.getDOMByEntity(this).dispatchEvent(event);
-          }, 50);
-          break;
-        }
-      }
-    };
-    return editable ? (h("vega-rich-text-image-editor", { style: this.getStyles(), size: size, alt: alt, ref: (ref) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
-      } }, this.renderImage(editable, alt))) : (this.renderImage(editable, alt));
-  }
+  /**
+   * @inheritDoc
+   */
   doAnnotationActionApply(action) {
     const annotation = action.toAnnotation();
     this.annotationMap.set(annotation.type, annotation);
   }
   // placeholder method
   /* istanbul ignore next */
+  /**
+   * @inheritDoc
+   */
   doModifyActionApply(action) {
     methodPlaceholder(action);
   }
-  registerRef(ref) {
-    if (ref) {
-      stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
-  renderImage(editable, alt) {
-    return (h("img", { style: editable ? { width: '100%' } : this.getStyles(), alt: alt, src: this.url, ref: this.registerRef.bind(this) }));
-  }
 }

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

@@ -1,4 +1,3 @@
-import { NodeAnnotation } from '../annotations/node-annotation.abstract';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
@@ -64,30 +63,6 @@ export class RTENode {
       this.doAnnotationActionApply(action);
     }
   }
-  /**
-   * Get styles from annotations
-   *
-   * @returns {AnnotationStyle} - Annotation style
-   */
-  getStyles() {
-    return Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof NodeAnnotation)
-      .map((annotation) => annotation.render())
-      .filter(Boolean)
-      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
-  }
-  /**
-   * Get classes from annotations
-   *
-   * @returns {AnnotationStyle} - Annotation style
-   */
-  getClasses() {
-    return Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof NodeAnnotation)
-      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
-      .filter(Boolean)
-      .reduce((pre, cur) => [pre, cur].join(' '), '');
-  }
   /**
    * Flush the value change
    */

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

@@ -1,10 +1,8 @@
-import { h } from '@stencil/core';
 import { NodeTypeEnum, RTENode } from './node.abstract';
 import { NodeAnnotation, NodeAnnotationTypeEnum } from '../annotations/node-annotation.abstract';
 import { TextSplittableAction } from '../actions/splittable-action.abstract';
 import { SelectionRangeAnnotation } from '../annotations/selection-range-annotation';
 import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
-import TextNodeElementRenderingRegistry from '../../slimmers/controllers/text-node-rendering-registry';
 import { generateUUID } from '../../../../utils/misc';
 import { InternalAnnotationTypeEnum } from '../annotations/annotation.abstract';
 import { StrikethroughAnnotation } from '../annotations/strikethrough-annotation';
@@ -28,6 +26,9 @@ import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import { ZERO_WIDTH_SPACE } from '../../constants/constant';
 import { SyncUpSelectionAction } from '../actions/sync-up-selection-action';
 import { DeleteNodeAnnotationAction } from '../actions/delete-node-annotation-action';
+/**
+ * Text node
+ */
 export class RTETextNode extends RTENode {
   constructor(id, text, parentBlock, annotationMap) {
     super(id, annotationMap);
@@ -35,6 +36,13 @@ export class RTETextNode extends RTENode {
     this.parentBlock = parentBlock;
     this.text = text;
   }
+  /**
+   * Creates an RTETextNode from a VegaRTETextNode with annotations and a parent RTETextBlock.
+   *
+   * @param {VegaRTETextNode} richText - A rich text node
+   * @param {RTETextBlock} parentBlock - Parent block
+   * @returns {RTETextNode} an RTETextNode
+   */
   static from(richText, parentBlock) {
     const textNode = new RTETextNode(richText.id, richText.text, parentBlock);
     const { annotations } = richText;
@@ -50,6 +58,14 @@ export class RTETextNode extends RTENode {
     }
     return textNode;
   }
+  /**
+   * Creates different types of text annotations based on the provided type and value.
+   *
+   * @param {keyof VegaRTETextAnnotations} type - The key of the type.
+   * @param {unknown} value - The value that will be used to create the specific type of annotation entity based on the `type` provided.
+   * @returns {Nullable<[RTENodeAnnotationMapKey, RTENodeAnnotationMapValue]>} Returning a nullable tuple containing a key and a
+   * value from the `RTENodeAnnotationMapKey` and `RTENodeAnnotationMapValue` types.
+   */
   static createAnnotationEntity(type, value) {
     switch (type) {
       case 'bold':
@@ -68,6 +84,9 @@ export class RTETextNode extends RTENode {
         return LinkAnnotation.from(value);
     }
   }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
     const annotations = Array.from(this.annotationMap.values())
       .filter((annotation) => annotation instanceof NodeAnnotation)
@@ -76,19 +95,26 @@ export class RTETextNode extends RTENode {
     }, {});
     return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'text', text: this.text });
   }
+  /**
+   * Creates a new RTETextNode with the specified text and copies the parent block and annotation map from the original node.
+   *
+   * @param {string} text - The text content of the RTETextNode that will be created.
+   * @returns {RTETextNode} An new RTETextNode
+   */
   cloneWithText(text) {
     return new RTETextNode(generateUUID(), text, this.parentBlock, new Map(this.annotationMap));
   }
+  /**
+   * Checks if a node is empty
+   *
+   * @returns {boolean}  It returns `true` if the node is empty
+   */
   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));
-  }
+  /**
+   * @inheritDoc
+   */
   doAnnotationActionApply(action) {
     const selectionRangeAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.SELECTION_RANGE);
     if (action instanceof TextSplittableAction && action.doSplit && selectionRangeAnnotation) {
@@ -115,6 +141,9 @@ export class RTETextNode extends RTENode {
     }
     this.parentBlock.mergeNodes(action);
   }
+  /**
+   * @inheritDoc
+   */
   doModifyActionApply(action) {
     switch (action.type) {
       case ModifyContentActionType.UPDATE_TEXT:
@@ -125,19 +154,25 @@ export class RTETextNode extends RTENode {
         break;
     }
   }
-  registerRef(ref) {
-    if (ref) {
-      stateEntityRenderingRegistry.register(ref, this);
-      const textColorAnnotation = this.getAnnotationByType('TEXT_COLOR');
-      if (textColorAnnotation) {
-        TextNodeElementRenderingRegistry.register(ref, textColorAnnotation);
-      }
-    }
-  }
+  /**
+   * Split text node with range
+   *
+   * @param {TextSplittableAction} action - Annotation action
+   * @param {Range} range - Selection range
+   * @returns {RTETextNode[] | this} RTETextNode array
+   */
   splitTextNode(action, range) {
     const { startContainer, endContainer, startOffset } = range;
     const startNode = startContainer.parentElement;
     const endNode = endContainer.parentElement;
+    /**
+     * Split the text from the start offset to the end offset
+     *
+     * @param {string} text - The text string
+     * @param {number} startOffset - The start offset position
+     * @param {number} endOffset - The end offset position
+     * @returns {RTETextNode[]} - The split text node array
+     */
     const splitText = (text, startOffset, endOffset) => {
       const beforeText = text.substring(0, startOffset);
       const selectedText = text.substring(startOffset, endOffset);
@@ -166,6 +201,12 @@ export class RTETextNode extends RTENode {
       return this;
     }
   }
+  /**
+   * Apply action to node
+   *
+   * @param {RTETextNode} node - Text node
+   * @param {AnnotationAction} action - AnnotationAction
+   */
   applyActionToNode(node, action) {
     const annotation = action.toAnnotation();
     if (action instanceof SyncUpSelectionAction) {
@@ -200,6 +241,12 @@ export class RTETextNode extends RTENode {
       return;
     }
   }
+  /**
+   * Replaces the selected text within a given range with a new text in a TypeScript class.
+   *
+   * @param {string} text - The new text that will replace the currently selected text within the specified range.
+   * @param {RTERange} currentRange - A range of text within a Rich Text Editor (RTE).
+   */
   replaceSelectedText(text, currentRange) {
     if (currentRange && currentRange.startContainer && currentRange.endContainer) {
       const { startContainer, endContainer, startOffset, endOffset } = currentRange;
@@ -218,16 +265,33 @@ export class RTETextNode extends RTENode {
       this.apply(new UpdateTextAction(this.text.slice(0, startIndex) + text + this.text.slice(endIndex)));
     }
   }
+  /**
+   * Updates the text content of a node and unlink the node if it is a link node and the text is deleted.
+   *
+   * @param {string} newText - The new text string
+   */
   updateText(newText) {
     this.text = newText;
-    // The link node should be unlink when delete all text
+    // The link node should unlink when delete all text
     if (!this.text && this.isLinkNode()) {
       this.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
     }
   }
+  /**
+   * Checks if a node has an annotation with the key 'LINK'.
+   *
+   * @returns {boolean} A boolean value indicating whether the `annotationMap` has a key 'LINK'.
+   */
   isLinkNode() {
     return this.annotationMap.has('LINK');
   }
+  /**
+   * Whether a given range should be split based on various conditions within the range.
+   *
+   * @param {Range} range - Selection range
+   * @returns {boolean} Returns a boolean value indicating whether the
+   * selection range should be split.
+   */
   shouldSplitSelection(range) {
     const { startContainer, endContainer, startOffset, endOffset } = range;
     const isCrossNode = startContainer !== endContainer;
@@ -236,6 +300,11 @@ export class RTETextNode extends RTENode {
     const isPartialSelection = isPartialStart || isPartialEnd;
     return isCrossNode || isPartialSelection;
   }
+  /**
+   * Sync up the selected node by change manager
+   *
+   * @param {RTETextNode} selectedNode - The selected node
+   */
   syncUpSelectedNodes(selectedNode) {
     const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(this);
     if (currentNodeDom) {
@@ -245,6 +314,13 @@ export class RTETextNode extends RTENode {
       }
     }
   }
+  /**
+   * Insert the new node at the start offset
+   *
+   * @param {number} startOffset - The start position offset
+   * @param {AnnotationAction} action - AnnotationAction
+   * @returns {RTETextNode[]} - RTETextNode array
+   */
   insertNewNode(startOffset, action) {
     if (startOffset === 0) {
       const newNode = this.cloneWithText('');

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

@@ -0,0 +1,37 @@
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { BlockAnnotation } from '../../annotations/block-annotation.abstract';
+import { isNonNullable } from '../../../../../types/type-guard';
+export class RTEBlockRenderer {
+  constructor(block, renderContext) {
+    this.block = block;
+    this.renderContext = renderContext;
+  }
+  registerRef(ref) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, this.block);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles() {
+    return Array.from(this.block.annotationMap.values())
+      .filter((annotation) => annotation instanceof BlockAnnotation)
+      .map((annotation) => annotation.render())
+      .filter(isNonNullable)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses() {
+    return Array.from(this.block.annotationMap.values())
+      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
+      .filter(isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' '), '');
+  }
+}