@heartlandone/vega 2.49.0 → 2.50.0-RTE-preview

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/apply-annotation-strategies/code-node-set-selection-range-strategy.js

@@ -0,0 +1,13 @@
+import { InternalAnnotationTypeEnum } from '../../annotations/annotation.abstract';
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Update the code block node annotation map strategy.
+ */
+export class CodeNodeSetSelectionRangeAnnotationStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    target.annotationMap.set(InternalAnnotationTypeEnum.SELECTION_RANGE, action.toAnnotation());
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/apply-annotation-strategies/node-update-annotation-map-strategy.js

@@ -1,9 +1,13 @@
 import { isNonNullable } from '../../../../../types/type-guard';
+import { BoldAnnotationAction } from '../../actions/bold-annotation-action';
 import { ClearFormattingAnnotationAction } from '../../actions/clear-formatting-annotation-action';
 import { CodeAnnotationAction } from '../../actions/code-annotation-action';
 import { DeleteNodeAnnotationAction } from '../../actions/delete-node-annotation-action';
+import { ItalicAnnotationAction } from '../../actions/italic-annotation-action';
 import { LinkAnnotationAction } from '../../actions/link-annotation-action';
 import { LinkGroupAnnotationAction } from '../../actions/link-group-annotation-action';
+import { StrikethroughAnnotationAction } from '../../actions/strikethrough-annotation-action';
+import { UnderlineAnnotationAction } from '../../actions/underline-annotation-action';
 import { ClearFormattingAnnotation } from '../../annotations/clear-formatting-annotation';
 import { NodeAnnotation } from '../../annotations/node-annotation.abstract';
 import { SelectionRangeAnnotation } from '../../annotations/selection-range-annotation';
@@ -40,6 +44,16 @@ export class NodeUpdateAnnotationMapStrategy extends ActionHandleStrategy {
       if (action instanceof CodeAnnotationAction) {
         this.handleAction(new ClearFormattingAnnotationAction(), target);
       }
+      if (action instanceof BoldAnnotationAction) {
+        this.updateCustomStyleAnnotation(target, ['fontWeight']);
+      }
+      if (action instanceof ItalicAnnotationAction) {
+        this.updateCustomStyleAnnotation(target, ['fontStyle']);
+      }
+      if (action instanceof UnderlineAnnotationAction ||
+        action instanceof StrikethroughAnnotationAction) {
+        this.updateCustomStyleAnnotation(target, ['textDecoration']);
+      }
       target.annotationMap.set(annotation.type, annotation);
       return;
     }

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/block-delete-text-content-strategy.js

@@ -52,7 +52,9 @@ export class BlockDeleteTextContentStrategy extends BlockDeleteNodeContentStrate
         if (startContainerNode.isEmpty()) {
           target.apply(new RemoveChildAction(startContainerNode));
         }
-        previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(target));
+        if (target.type === previousNode.parentBlock.type) {
+          previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(target));
+        }
       }
       else {
         if (this.isContentFirstNode(startContainerNode) && startContainerNode.isEmpty()) {

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/block-remove-node-strategy.js

@@ -9,7 +9,7 @@ export class BlockRemoveNodeStrategy extends ActionHandleStrategy {
    * Remove the block if the block nodes is empty after delete the current node.
    *
    * @param {RemoveChildAction} action - The remove child action instance.
-   * @param {RTETextBlock | RTEImageBlock} target - The parent block of the node that will be removed.
+   * @param {RTEBlockWithNodes} target - The parent block of the node that will be removed.
    */
   handleAction(action, target) {
     const arrayFixed = target.nodes;

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/block-transform-to-code-block-strategy.js

@@ -0,0 +1,48 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { InsertBlocksBeforeAction } from '../../actions/insert-blocks-before-block';
+import { RemoveChildAction } from '../../actions/remove-child-action';
+import { RTECodeBlock } from '../../blocks/code-block';
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Transform the selected text blocks to a code block strategy.
+ */
+export 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]));
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/code-block-insert-image-strategy.js

@@ -0,0 +1,17 @@
+import { InsertBlocksAfterAction } from '../../actions/insert-blocks-after-block';
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Insert image behind after code block strategy.
+ */
+export class CodeBlockInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * Insert image block at behind of the RTE code block.
+   *
+   * @param {InsertImageToBlockAction} action - The insert image action instance.
+   * @param {RTECodeBlock} target - The code block.
+   */
+  handleAction(action, target) {
+    const imageBlock = action.imageBlockToBeInserted;
+    target.parent.apply(new InsertBlocksAfterAction(target, imageBlock));
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/code-block-remove-self-strategy.js

@@ -0,0 +1,77 @@
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalRichTextEditorSelectionRangeChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { generateUUID } from '../../../../../utils/misc';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { AppendChildNodesAction } from '../../actions/append-child-nodes-action';
+import { RemoveChildAction } from '../../actions/remove-child-action';
+import { RTETextBlock } from '../../blocks/text-block';
+import { BlockDeleteNodeContentStrategy } from './block-delete-node-content-strategy';
+/**
+ * Remove the code block from the value, call this action if want to flush value after action.
+ */
+export class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(_action, target) {
+    const node = target.nodes[0];
+    const parent = target.parent;
+    if (parent) {
+      let focusNode = this.getPreviousNode(node);
+      let offset = this.getRTENodeEndOffset(focusNode);
+      if (!focusNode) {
+        focusNode = this.getNextNode(node);
+        offset = 0;
+      }
+      parent.apply(new RemoveChildAction(target));
+      const focusElement = focusNode
+        ? stateEntityRenderingRegistry.getDOMByEntity(focusNode)
+        : null;
+      if (parent.blocks.length === 0) {
+        const defaultParagraph = RTETextBlock.from({
+          id: generateUUID(),
+          type: 'paragraph',
+          nodes: [{ id: generateUUID(), type: 'text', text: '' }],
+        });
+        target.parent.apply(new AppendChildNodesAction([defaultParagraph]));
+        focusNode = defaultParagraph.nodes[0];
+        offset = 0;
+      }
+      this.notifyUpdateSelection(focusNode, focusElement, offset, target);
+    }
+  }
+  /**
+   * Update the rich text next selection range.
+   *
+   * @param {RTENode} focusNode - The next focus node dto.
+   * @param {Nullable<HTMLElement>} focusElement - The next focus element. The update selection task could run directly when the element is exist.
+   * @param {number} offset - The next focus text offset.
+   * @param {RTECodeBlock} target - The code block dto.
+   */
+  notifyUpdateSelection(focusNode, focusElement, offset, target) {
+    const targetDom = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (targetDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(targetDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.notify(nodeSubject, {
+          node: focusNode,
+          updateDirectly: focusElement ? true : false,
+          offset,
+        });
+      }
+    }
+  }
+  /**
+   * Get the node content end offset.
+   *
+   * @param {Nullable<RTENode>} node - The RTENode.
+   * @returns {number} - The number value.
+   */
+  getRTENodeEndOffset(node) {
+    if (node && node.type !== 'CODE_BLOCK_NODE') {
+      return node['type'] !== 'IMAGE' ? node['text'].length : 1;
+    }
+    return 0;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/switch-out-from-code-block-strategy.js

@@ -0,0 +1,38 @@
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalRichTextEditorSelectionRangeChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { generateUUID } from '../../../../../utils/misc';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { InsertBlocksAfterAction } from '../../actions/insert-blocks-after-block';
+import { UpdateCodeBlockAction } from '../../actions/update-code-block-action';
+import { RTETextBlock } from '../../blocks/text-block';
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Remove the line break and insert new paragraph after code block.
+ */
+export class SwitchOutFromCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { content, language } = action;
+    const textArray = content.split('\n');
+    const updateAction = new UpdateCodeBlockAction(textArray.slice(0, textArray.length - 2).join('\n'), language);
+    updateAction.isFlushable = false;
+    target.nodes[0].apply(updateAction);
+    const textBlock = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: generateUUID(), text: '', type: 'text' }],
+    });
+    target.parent.apply(new InsertBlocksAfterAction(target, textBlock));
+    // Focus the next text node after value update.
+    const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.notify(nodeSubject, { node: textBlock.nodes[0] });
+      }
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/update-code-block-strategy.js

@@ -0,0 +1,14 @@
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Update the language or content of code block strategy.
+ */
+export class UpdateCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { content, language } = action;
+    target.language = language;
+    target.text = content;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/custom-style-annotation-action.js

@@ -0,0 +1,20 @@
+import { AnnotationAction } from './annotation-action.abstract';
+import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
+/**
+ * Action to toggle block horizontal alignment annotation
+ */
+export class CustomStyleAnnotationAction extends AnnotationAction {
+  constructor(customStyle) {
+    super();
+    this.isFlushable = true;
+    this.customStyle = customStyle;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {CustomStyleAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new CustomStyleAnnotation(this.customStyle);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/modify-content-action.abstract.js

@@ -21,6 +21,10 @@ export var ModifyContentActionType;
   ModifyContentActionType["DELETE_BLOCK_CONTENT"] = "DELETE_BLOCK_CONTENT";
   ModifyContentActionType["INSERT_IMAGE_TO_BLOCK"] = "INSERT_IMAGE_TO_BLOCK";
   ModifyContentActionType["UPDATE_IMAGE_NODE_URL"] = "UPDATE_IMAGE_NODE_URL";
+  ModifyContentActionType["TRANSFORM_TO_CODE_BLOCK"] = "TRANSFORM_TO_CODE_BLOCK";
+  ModifyContentActionType["UPDATE_CODE_BLOCK"] = "UPDATE_CODE_BLOCK";
+  ModifyContentActionType["SWITCH_OUT_FROM_CODE_BLOCK"] = "SWITCH_OUT_FROM_CODE_BLOCK";
+  ModifyContentActionType["DELETE_CODE_BLOCK"] = "DELETE_CODE_BLOCK";
 })(ModifyContentActionType || (ModifyContentActionType = {}));
 /**
  * Abstract class for update node content, delete node, insert node

package/dist/collection/components/vega-rich-text-editor/dto/actions/remove-code-block-action.js

@@ -0,0 +1,13 @@
+import { ModifyContentAction, ModifyContentActionType } from './modify-content-action.abstract';
+/**
+ * Remove the code block from the state.
+ *
+ * @example codeBlock.parentBlock.apply(new RemoveCodeBlockAction())
+ */
+export class RemoveCodeBlockAction extends ModifyContentAction {
+  constructor() {
+    super(...arguments);
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.DELETE_CODE_BLOCK;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/switch-out-from-code-block-action.js

@@ -0,0 +1,15 @@
+import { ModifyContentAction, ModifyContentActionType } from './modify-content-action.abstract';
+/**
+ * Switch out from the code block and insert new paragraph after code block.
+ *
+ * @example codeBlock.apply(new SwitchOutFromCodeBlockAction(content, language))
+ */
+export class SwitchOutFromCodeBlockAction extends ModifyContentAction {
+  constructor(content, language) {
+    super();
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK;
+    this.content = content;
+    this.language = language;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/transform-to-code-block-action.js

@@ -0,0 +1,13 @@
+import { ModifyContentAction, ModifyContentActionType } from './modify-content-action.abstract';
+/**
+ * Transform the selected blocks to a code block.
+ *
+ * @example firstBlock.parent.apply(new TransformToCodeBlockAction(selectedBlocks))
+ */
+export class TransformToCodeBlockAction extends ModifyContentAction {
+  constructor(selectedBlocks) {
+    super();
+    this.type = ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK;
+    this.selectedBlocks = selectedBlocks;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/update-code-block-action.js

@@ -0,0 +1,15 @@
+import { ModifyContentAction, ModifyContentActionType } from './modify-content-action.abstract';
+/**
+ * Update the code block content or language action.
+ *
+ * @example codeNode.apply(new UpdateCodeBlockAction(content, language))
+ */
+export class UpdateCodeBlockAction extends ModifyContentAction {
+  constructor(content, language) {
+    super();
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.UPDATE_CODE_BLOCK;
+    this.content = content;
+    this.language = language;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/annotations/block-annotation.abstract.js

@@ -4,6 +4,7 @@ export var BlockAnnotationTypeEnum;
   BlockAnnotationTypeEnum["ALIGNMENT"] = "ALIGNMENT";
   BlockAnnotationTypeEnum["TEXT_STYLE"] = "TEXT_STYLE";
   BlockAnnotationTypeEnum["INDENT"] = "INDENT";
+  BlockAnnotationTypeEnum["LIST"] = "LIST";
 })(BlockAnnotationTypeEnum || (BlockAnnotationTypeEnum = {}));
 /**
  * BlockAnnotation is an abstract class that represents a block annotation.

package/dist/collection/components/vega-rich-text-editor/dto/annotations/bold-annotation.js

@@ -34,11 +34,19 @@ export class BoldAnnotation extends NodeAnnotation {
     return new BoldAnnotation(this.bold);
   }
   /**
-   * Generate the style for the annotation
-   *
-   * @returns {Nullable<AnnotationStyle>} Bold style
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.bold ? 'v-rte--bold' : null;
+  }
+  /**
+   * @inheritDoc
    */
-  render() {
-    return this.bold ? { 'font-weight': '700' } : null;
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.bold ? { fontWeight: '700' } : null;
   }
 }

package/dist/collection/components/vega-rich-text-editor/dto/annotations/clear-formatting-annotation.js

@@ -1,4 +1,5 @@
 import { Annotation, InternalAnnotationTypeEnum } from './annotation.abstract';
+import { CommonAnnotationTypeEnum } from './common-annotation.abstract';
 import { NodeAnnotationTypeEnum } from './node-annotation.abstract';
 /**
  * Annotation to host which annotations will be clear formatting
@@ -14,6 +15,7 @@ export class ClearFormattingAnnotation extends Annotation {
       NodeAnnotationTypeEnum.STRIKETHROUGH,
       NodeAnnotationTypeEnum.TEXT_COLOR,
       NodeAnnotationTypeEnum.CODE,
+      CommonAnnotationTypeEnum.CUSTOM_STYLE,
     ];
   }
 }

package/dist/collection/components/vega-rich-text-editor/dto/annotations/code-annotation.js

@@ -34,19 +34,24 @@ export class CodeAnnotation extends NodeAnnotation {
     return new CodeAnnotation(this.code);
   }
   /**
-   * Generate the class for the annotation
-   *
-   * @returns {Nullable<string>} - Annotation class
+   * @inheritDoc
    */
-  renderClass() {
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
     return this.code ? 'v-rte--code' : null;
   }
   /**
-   * Generate the style for the annotation
-   *
-   * @returns {Nullable<AnnotationStyle>} Bold style
+   * @inheritDoc
    */
-  render() {
-    return null;
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.code
+      ? {
+        fontFamily: 'Roboto Mono',
+        whiteSpace: 'pre-wrap',
+      }
+      : null;
   }
 }

package/dist/collection/components/vega-rich-text-editor/dto/annotations/common-annotation.abstract.js

@@ -0,0 +1,12 @@
+import { Annotation } from './annotation.abstract';
+export var CommonAnnotationTypeEnum;
+(function (CommonAnnotationTypeEnum) {
+  CommonAnnotationTypeEnum["CUSTOM_ATTRIBUTE"] = "CUSTOM_ATTRIBUTE";
+  CommonAnnotationTypeEnum["CUSTOM_CLASS"] = "CUSTOM_CLASS";
+  CommonAnnotationTypeEnum["CUSTOM_STYLE"] = "CUSTOM_STYLE";
+})(CommonAnnotationTypeEnum || (CommonAnnotationTypeEnum = {}));
+/**
+ * CommonAnnotation is an abstract class that represents common annotation for block and node.
+ */
+export class CommonAnnotation extends Annotation {
+}

package/dist/collection/components/vega-rich-text-editor/dto/annotations/custom-attribute-annotation.js

@@ -0,0 +1,65 @@
+import { isNonNullable } from '../../../../types/type-guard';
+import { CommonAnnotation, CommonAnnotationTypeEnum } from './common-annotation.abstract';
+/**
+ * Annotation to add custom attributes of element
+ */
+export class CustomAttributeAnnotation extends CommonAnnotation {
+  constructor(customAttribute) {
+    super();
+    this.type = CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE;
+    this.customAttribute = customAttribute;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {Record<string, string>} customizeAttribute - custom attribute annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE, CustomAttributeAnnotation]} Map item for the annotation
+   */
+  static from(customizeAttribute) {
+    return [CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE, new CustomAttributeAnnotation(customizeAttribute)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customAttribute: this.customAttribute,
+    };
+  }
+  /**
+   * Create a new custom attribute annotation
+   *
+   * @returns {CustomAttributeAnnotation} - Custom attribute annotation
+   */
+  clone() {
+    return new CustomAttributeAnnotation(this.customAttribute);
+  }
+  /**
+   * Generate the custom attribute of current element, excluding 'style' and 'class'
+   *
+   * @param {string[]} filterAttr - should filter these existed attrs
+   * @returns {string[]} - Custom attributes
+   */
+  toString(filterAttr = []) {
+    const filterAttrKeys = filterAttr.map((attr) => attr.split('=')[0]);
+    return Object.keys(this.customAttribute)
+      .map((key) => {
+      return !filterAttrKeys.includes(key) ? `${key}="${this.customAttribute[key]}"` : null;
+    })
+      .filter(isNonNullable);
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @param {RTERenderCustomAttributes} options - should filter these certain attrs
+   * @returns {Record<string, string>} custom attribute
+   */
+  render(options = {}) {
+    var _a;
+    const customAttribute = Object.assign({}, this.customAttribute);
+    (_a = options.filterAttributes) === null || _a === void 0 ? void 0 : _a.forEach((attr) => delete customAttribute[attr]);
+    return customAttribute;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/annotations/custom-class-annotation.js

@@ -0,0 +1,54 @@
+import { CommonAnnotation, CommonAnnotationTypeEnum } from './common-annotation.abstract';
+/**
+ * Annotation to add custom class of element
+ */
+export class CustomClassAnnotation extends CommonAnnotation {
+  constructor(customClass) {
+    super();
+    this.type = CommonAnnotationTypeEnum.CUSTOM_CLASS;
+    this.customClass = customClass;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string[]} customClass - custom class annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_CLASS, CustomClassAnnotation]} Map item for the annotation
+   */
+  static from(customClass) {
+    return [CommonAnnotationTypeEnum.CUSTOM_CLASS, new CustomClassAnnotation(customClass)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customClass: this.customClass,
+    };
+  }
+  /**
+   * Create a new custom class annotation
+   *
+   * @returns {CustomClassAnnotation} - Custom class annotation
+   */
+  clone() {
+    return new CustomClassAnnotation(this.customClass);
+  }
+  /**
+   * Generate the custom class of current element
+   *
+   * @returns {string} - Custom class
+   */
+  toString() {
+    return `class="${this.customClass.join(' ')}"`;
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @returns {string[]} custom classes
+   */
+  renderClass() {
+    return this.customClass;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/annotations/custom-style-annotation.js

@@ -0,0 +1,57 @@
+import { CommonAnnotation, CommonAnnotationTypeEnum } from './common-annotation.abstract';
+/**
+ * Annotation to add custom attributes of element
+ */
+export class CustomStyleAnnotation extends CommonAnnotation {
+  constructor(customStyle) {
+    super();
+    this.type = CommonAnnotationTypeEnum.CUSTOM_STYLE;
+    this.customStyle = customStyle;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {AnnotationStyle} customStyle - custom attribute annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_STYLE, CustomStyleAnnotation]} Map item for the annotation
+   */
+  static from(customStyle) {
+    return [CommonAnnotationTypeEnum.CUSTOM_STYLE, new CustomStyleAnnotation(customStyle)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customStyle: this.customStyle,
+    };
+  }
+  /**
+   * Create a new custom attribute annotation
+   *
+   * @returns {CustomStyleAnnotation} - Custom attribute annotation
+   */
+  clone() {
+    return new CustomStyleAnnotation(this.customStyle);
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @returns {AnnotationStyle} custom attribute
+   */
+  renderStyle() {
+    return this.customStyle;
+  }
+  /**
+   * Remove the style
+   *
+   * @param {string[]} styleKeys - custom attribute annotation
+   * @returns {AnnotationStyle} Map item for the annotation
+   */
+  removeStyles(styleKeys) {
+    const customStyle = Object.assign({}, this.customStyle);
+    styleKeys.forEach((item) => delete customStyle[item]);
+    return customStyle;
+  }
+}