@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

package/dist/collection/components/vega-code-block/vega-code-block.js

@@ -0,0 +1,399 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Element, Host, h, Prop, Event, Method, Watch } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { VegaCodeBlockRenderer } from './slimmers/renderers/vega-code-block-renderer';
+import { arrayToClassString } from '../../utils/ui';
+import { VegaCodeBlockContentRenderer } from './slimmers/renderers/vega-code-block-content-renderer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaChange, VegaRemove } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaCodeBlockValueController } from './slimmers/controllers/vega-code-block-value-controller';
+import { deepEqual } from '../../utils/object';
+import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { CodeContentParseController } from './slimmers/controllers/vega-code-block-content-parse-controller';
+import { VegaCodeBlockSelectionController } from './slimmers/controllers/vega-code-block-selection-controller';
+import { CodeBlockInputController } from './slimmers/controllers/vega-code-block-input-controller';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
+import { VegaCodeBlockFocusController } from './slimmers/controllers/vega-code-block-focus-controller';
+import { VegaCodeBlockCopyButtonRenderer } from './slimmers/renderers/vega-code-block-copy-button-renderer';
+import { PrismCodeHighlightParseController } from './slimmers/controllers/prism-code-highlight-parse-controller';
+import { DefaultCodeHighlightParseController } from './slimmers/controllers/default-code-highlight-parse-controller';
+import { ComponentGlobalStyleSlimmer } from '../../helpers/slimmers/component-global-style-slimmer';
+import codeColorVariable from './code-color-variable.css';
+/**
+ * A component for capturing and displaying syntax-highlighted code blocks with copy-to-clipboard functionality.
+ *
+ * @vegaVersion 2.50.0-RTE-preview
+ */
+export class VegaCodeBlock {
+  constructor() {
+    this.globalSlimmers = {};
+    //TODO: The global style should be removed after the code color change to the color token.
+    this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(codeColorVariable);
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.codeBlockRenderer = new VegaCodeBlockRenderer();
+    this.contentRenderer = new VegaCodeBlockContentRenderer();
+    this.copyButtonRenderer = new VegaCodeBlockCopyButtonRenderer();
+    this.valueController = new VegaCodeBlockValueController();
+    this.contentParseController = new CodeContentParseController();
+    this.prismCodeHighlightParser = new PrismCodeHighlightParseController();
+    this.defaultCodeHighlightParser = new DefaultCodeHighlightParseController();
+    this.selectionController = new VegaCodeBlockSelectionController();
+    this.inputController = new CodeBlockInputController();
+    this.focusController = new VegaCodeBlockFocusController();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaCodeBlock, VegaChange);
+    this.removeEventEmitter = createEventEmitSlimmer(VegaCodeBlock, VegaRemove);
+    this.eventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.codeBlockRenderer.getToolbarContainerRef());
+    /**
+     * Specifies whether the code block editor is in read-only mode.
+     *
+     * @vegaVersion 2.50.0-RTE-preview
+     */
+    this.readOnly = false;
+    /**
+     * Specifies whether the code block editor is disabled.
+     *
+     * @vegaVersion 2.50.0-RTE-preview
+     */
+    this.disabled = false;
+    /**
+     * Specifies whether to display the copy button in the code block.
+     *
+     * @vegaVersion 2.50.0-RTE-preview
+     */
+    this.showCopyButton = true;
+    /**
+     * Specifies whether to display the code line number in the code block.
+     *
+     * @vegaVersion 2.50.0-RTE-preview
+     */
+    this.showLineNumber = true;
+  }
+  watchEditableChange() {
+    methodPlaceholder();
+  }
+  /**
+   * Check the props value to avoid unnecessary updates.
+   *
+   * @param {unknown} newValue - The new props value.
+   * @param {unknown} oldValue - The old props value.
+   * @param {string} name - The property name.
+   * @returns {boolean} Return false to skip the current update flow.
+   */
+  componentShouldUpdate(newValue, oldValue, name) {
+    if (name === 'value' && deepEqual(newValue, oldValue)) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Invoke this method to focus the current code block.
+   *
+   * @vegaVersion 2.50.0-RTE-preview
+   */
+  async doFocus() {
+    methodPlaceholder();
+  }
+  render() {
+    const classNames = arrayToClassString([
+      this.readOnly ? 'readonly' : '',
+      this.disabled ? 'disabled' : '',
+      this.showLineNumber ? 'show-line-number' : '',
+      this.prismCodeHighlightParser.canParse() ? 'highlight' : '',
+    ]);
+    return sanitizeVegaComponent(h(Host, { contenteditable: false, class: classNames }, this.codeBlockRenderer.render()), this.host);
+  }
+  static get is() { return "vega-code-block"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-code-block.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-code-block.css"]
+  }; }
+  static get properties() { return {
+    "readOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0-RTE-preview"
+          }],
+        "text": "Specifies whether the code block editor is in read-only mode."
+      },
+      "attribute": "read-only",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0-RTE-preview"
+          }],
+        "text": "Specifies whether the code block editor is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showCopyButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0-RTE-preview"
+          }],
+        "text": "Specifies whether to display the copy button in the code block."
+      },
+      "attribute": "show-copy-button",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "showLineNumber": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0-RTE-preview"
+          }],
+        "text": "Specifies whether to display the code line number in the code block."
+      },
+      "attribute": "show-line-number",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "value": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "VegaCodeBlockValue",
+        "resolved": "{ language?: \"css\" | \"html\" | \"js\" | \"jsx\" | \"plainText\" | \"ts\" | \"tsx\"; code: string; }",
+        "references": {
+          "VegaCodeBlockValue": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0-RTE-preview"
+          }],
+        "text": "Specifies the content or value to be displayed in the code block."
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "vegaChange",
+      "name": "vegaChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0-RTE-preview"
+          }],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "VegaCodeBlockValue",
+        "resolved": "{ language?: \"css\" | \"html\" | \"js\" | \"jsx\" | \"plainText\" | \"ts\" | \"tsx\"; code: string; }",
+        "references": {
+          "VegaCodeBlockValue": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0-RTE-preview"
+          }, {
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "VegaCodeBlockValue",
+        "resolved": "{ language?: \"css\" | \"html\" | \"js\" | \"jsx\" | \"plainText\" | \"ts\" | \"tsx\"; code: string; }",
+        "references": {
+          "VegaCodeBlockValue": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "vegaRemove",
+      "name": "vegaRemove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0-RTE-preview"
+          }],
+        "text": "An event emitter notifying the deletion of the code block. By default, the element is removed from the page, but this behavior can be prevented."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "remove",
+      "name": "remove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0-RTE-preview"
+          }, {
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the deletion of the code block. By default, the element is removed from the page, but this behavior can be prevented."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "doFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to focus the current code block.",
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.50.0-RTE-preview"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "readOnly",
+      "methodName": "watchEditableChange"
+    }, {
+      "propName": "disabled",
+      "methodName": "watchEditableChange"
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCodeBlock.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "componentGlobalStyleSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "codeBlockRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "contentRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "copyButtonRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "valueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "contentParseController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "prismCodeHighlightParser", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "defaultCodeHighlightParser", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "selectionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "inputController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "focusController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "removeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCodeBlock.prototype, "eventPreventSlimmer", void 0);

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -15,7 +15,7 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderContainer = () => {
-      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, "aria-disabled": `${this.disabled}`, onKeyDown: createEnterKeyHandlerToTriggerClick(), onBlur: this.preventBlur },
+      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, "aria-disabled": `${this.disabled}`, onKeyDown: createEnterKeyHandlerToTriggerClick(), onBlur: this.preventBlur, part: "select-container" },
         this.renderPrefixIcon(),
         this.renderSelectContainer(),
         this.renderToggleIcon()));
@@ -24,8 +24,8 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
       return this.vegaInputSelectPrefixIconRenderer.render();
     };
     this.renderToggleIcon = () => {
-      return (h("div", { class: "vega-input-select-toggle-icon" },
-        h("vega-icon", { icon: VegaInternalIconManager.getIconKey(this.isDropdownShow ? 'chevron-up' : 'chevron-down') })));
+      return (h("div", { class: "vega-input-select-toggle-icon", part: "toggle-icon-container" },
+        h("vega-icon", { part: "toggle-icon", icon: VegaInternalIconManager.getIconKey(this.isDropdownShow ? 'chevron-up' : 'chevron-down') })));
     };
     this.renderSelectContainer = () => {
       return (h("div", { class: "vega-input-select-select-container" },
@@ -44,10 +44,10 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
     this.renderSingleSelected = () => {
       const item = this.sourceController.getItem(this.value);
       if (item) {
-        return h("span", { class: "vega-input-select-selected" }, item.displayName);
+        return (h("span", { class: "vega-input-select-selected", part: "selected-box" }, item.displayName));
       }
       else {
-        return (h("div", { class: "vega-input-select-placeholder" }, this.translationSlimmer.t(this.placeholder)));
+        return (h("div", { class: "vega-input-select-placeholder", part: "placeholder" }, this.translationSlimmer.t(this.placeholder)));
       }
     };
     this.getVegaDropdownProperties = () => {

package/dist/collection/components/vega-rich-text-content/slimmers/renderers/vega-rich-text-content-renderer.js

@@ -12,10 +12,12 @@ import RTETextBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/b
 import RTEImageBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/image-block-renderer';
 import RTEListBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/list-block-renderer';
 import { VegaRTEContent } from '../../../vega-rich-text-editor/dto/content-state';
+import RTECodeBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/code-block-renderer';
 export class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
     this.blockRenderers = [
+      RTECodeBlockRenderer,
       RTETextBlockRenderer,
       RTEImageBlockRenderer,
       RTEListBlockRenderer,

package/dist/collection/components/vega-rich-text-content/vega-rich-text-content.css

@@ -115,14 +115,11 @@
   vertical-align: bottom;
   cursor: pointer;
 }
-:host .rich-text-content ul {
+:host .rich-text-content ul.v-rte--list,
+:host .rich-text-content ol.v-rte--list {
   padding-left: 8px;
   margin-left: 16px;
 }
-:host .rich-text-content ol {
-  padding-left: 8px;
-  list-style-position: inside;
-}
 :host .rich-text-content .link-editor-wrapper {
   position: relative;
   outline: 2px solid transparent;
@@ -133,4 +130,62 @@
   bottom: 0;
   left: 0;
   right: 0;
+}
+:host .rich-text-content .code-block-container {
+  margin-top: 22px;
+  margin-bottom: 22px;
+}
+:host .rich-text-content vega-code-block.focus {
+  outline: none;
+}
+:host .rich-text-content .v-rte--bold {
+  font-weight: 700;
+}
+:host .rich-text-content .v-rte--italic {
+  font-style: italic;
+}
+:host .rich-text-content .v-rte--image-size-sm {
+  width: 25%;
+}
+:host .rich-text-content .v-rte--image-size-md {
+  width: 50%;
+}
+:host .rich-text-content .v-rte--image-size-lg {
+  width: 100%;
+}
+:host .rich-text-content .v-rte--text-style-paragraph {
+  font-family: "Inter";
+  font-size: 16px;
+  line-height: 22px;
+  font-weight: 500;
+}
+:host .rich-text-content .v-rte--text-style-title {
+  font-family: "Inter";
+  font-size: 36px;
+  line-height: 40px;
+  font-weight: 500;
+}
+:host .rich-text-content .v-rte--text-style-subtitle {
+  font-family: "Inter";
+  font-size: 28px;
+  line-height: 32px;
+  font-weight: 500;
+}
+:host .rich-text-content .v-rte--text-style-heading-1 {
+  font-family: "Inter";
+  font-size: 22px;
+  line-height: 24px;
+  font-weight: 500;
+}
+:host .rich-text-content .v-rte--text-style-heading-2 {
+  font-family: "Inter";
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 500;
+}
+:host .rich-text-content .v-rte--text-style-heading-3 {
+  font-family: "Inter";
+  font-size: 18px;
+  line-height: 22px;
+  font-weight: 500;
 }

package/dist/collection/components/vega-rich-text-editor/assets/file-code.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M64 464c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H224v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm97 289c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L79 303c-9.4 9.4-9.4 24.6 0 33.9l48 48c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31 31-31zM257 255c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l48-48c9.4-9.4 9.4-24.6 0-33.9l-48-48z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/assets/rectangle-code.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill='currentColor' d="M320.1 175L384.1 239C394.3 248.4 394.3 263.6 384.1 272.1L320.1 336.1C311.6 346.3 296.4 346.3 287 336.1C277.7 327.6 277.7 312.4 287 303L334.1 256L287 208.1C277.7 199.6 277.7 184.4 287 175C296.4 165.7 311.6 165.7 320.1 175V175zM177.9 256L224.1 303C234.3 312.4 234.3 327.6 224.1 336.1C215.6 346.3 200.4 346.3 191 336.1L127 272.1C117.7 263.6 117.7 248.4 127 239L191 175C200.4 165.7 215.6 165.7 224.1 175C234.3 184.4 234.3 199.6 224.1 208.1L177.9 256zM448 32C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H448zM448 80H64C55.16 80 48 87.16 48 96V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V96C464 87.16 456.8 80 448 80z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/action-handle-strategy.abstract.js

@@ -1,4 +1,6 @@
 import { LogUtility } from '../../../../utils/log';
+import { CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstract';
+import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 /**
  * The base action handle strategy class, use to modify the rich text node content or modify the annotation.
  */
@@ -61,4 +63,26 @@ export class ActionHandleStrategy {
     const lastNode = target.nodes[target.nodes.length - 1];
     return node === lastNode && startOffset === 1;
   }
+  /**
+   * Update the custom style annotation of a block or node
+   *
+   * @param {RTEBlock | RTETextNode} item - block or node
+   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
+   */
+  updateCustomStyleAnnotation(item, styleKeys) {
+    const customStyleAnnotation = item.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_STYLE);
+    if (customStyleAnnotation && this.isCustomStyle(customStyleAnnotation, styleKeys)) {
+      item.annotationMap.set(customStyleAnnotation.type, new CustomStyleAnnotation(customStyleAnnotation.removeStyles(styleKeys)));
+    }
+  }
+  /**
+   * Determines if the custom style annotation includes any the custom style.
+   *
+   * @param {CustomStyleAnnotation} customStyleAnnotation - custom style annotation
+   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
+   * @returns {boolean} - True if the custom key includes the custom style, false otherwise.
+   */
+  isCustomStyle(customStyleAnnotation, styleKeys) {
+    return styleKeys.some((item) => Object.keys(customStyleAnnotation.customStyle).includes(item));
+  }
 }

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

@@ -0,0 +1,15 @@
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Update the text block and image block horizontal alignment strategy.
+ */
+export class BlockUpdateHorizontalAlignmentStrategy extends ActionHandleStrategy {
+  /**
+   * Updating the horizontal alignment of a block requires cascading updates to the custom style.
+   *
+   * @param {HorizontalAlignmentAnnotationAction} _action - The horizontal alignment annotation action.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['textAlign']);
+  }
+}

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

@@ -0,0 +1,15 @@
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Update the text block and image block horizontal alignment strategy.
+ */
+export class BlockUpdateIndentStrategy extends ActionHandleStrategy {
+  /**
+   * Updating the indent of a block requires cascading updates to the custom style.
+   *
+   * @param {IndentAnnotationAction} _action - The indent annotation action.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['marginLeft']);
+  }
+}

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

@@ -28,5 +28,6 @@ export class BlockUpdateTextStyleStrategy extends ActionHandleStrategy {
         node.apply(new DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
       });
     }
+    this.updateCustomStyleAnnotation(target, ['fontFamily', 'lineHeight', 'fontWeight', 'fontSize']);
   }
 }

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()) {