@heartlandone/vega 2.49.0 → 2.50.0-RTE-preview

package/dist/esm/vega-radio_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-187f71d1.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d0a47531.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
@@ -7,32 +7,32 @@ import { O as Observer } from './observer-3959f9dd.js';
 import { f as findParent } from './ui-ed1283bb.js';
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-b7d511f6.js';
-import { d as domNodeSubjectFactory, f as VegaChange, A as VegaFocus, B as VegaBlur } from './dom-node-subject-factory-f77cf9cc.js';
-import { c as VegaInternalFieldErrorStateChange } from './vega-internal-event-id-85ad403f.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-480d3b54.js';
+import { d as domNodeSubjectFactory, f as VegaChange, A as VegaFocus, B as VegaBlur } from './dom-node-subject-factory-eb6bba5d.js';
+import { c as VegaInternalFieldErrorStateChange } from './vega-internal-event-id-820393ad.js';
 import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
 import { C as ComponentLoadRequired } from './component-load-required-db42032a.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-e7dc3db1.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-bfb4034d.js';
 import { C as ChildNodesNotifyObserverSlimmer } from './child-nodes-notify-observer-slimmer-ddaad39a.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-d3a94ef2.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-1142fb79.js';
 import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-42bf9773.js';
 import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-6cef9549.js';
-import { T as TagNameMutationFilter } from './mutation-observer-filters-7ee2b410.js';
+import { T as TagNameMutationFilter } from './mutation-observer-filters-1a054fb0.js';
 import './dynamic-slimmer-90b8af32.js';
-import './dom-node-subject-observer-factory-715dccf9.js';
-import './internal-vega-event-manager-87dc436c.js';
+import './dom-node-subject-observer-factory-6083d518.js';
+import './internal-vega-event-manager-56c6469a.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
-import './string-be824360.js';
+import './string-a953eafc.js';
 import './create-public-api-runtime-metrics-slimmer-8ada793f.js';
-import './translation-cf7f020a.js';
+import './translation-71e0711d.js';
 import './page-resize-observer-slimmer-15a84d26.js';
 import './ui-8424715a.js';
 import './breakpoints-d9faf11c.js';
-import './array-3113609f.js';
+import './array-7888f339.js';
 import './number-4398f2e1.js';
-import './sub-state-observer-slimmer-be7a6ce3.js';
+import './sub-state-observer-slimmer-b4c2ddc3.js';
 import './vega-env-manager-8f8dc473.js';
-import './feature-flag-controller-690eac1d.js';
+import './feature-flag-controller-0fbe8fb0.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
 import './keyboard-manager-262be5ce.js';

package/dist/esm/vega-rich-text-content.entry.js

@@ -1,30 +1,32 @@
-import { h, H as Host, r as registerInstance, g as getElement } from './index-187f71d1.js';
+import { h, H as Host, r as registerInstance, g as getElement } from './index-d0a47531.js';
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { a as VegaDarkModeStyleController } from './dark-mode-style-controller-2ada8e22.js';
-import { T as TextNodeRenderingRegistry, I as ImageAnnotationAction, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-1aa938ab.js';
-import { s as stateEntityRenderingRegistry, B as BlockAnnotation, N as NodeAnnotation, h as NodeAnnotationTypeEnum, Z as ZERO_WIDTH_SPACE, I as InternalAnnotationTypeEnum, L as LinkAnnotationAction, R as RTETextBlock, i as ImageAnnotation, a as RTEImageBlock, c as RTEListBlock, V as VegaRTEContent } from './content-state-dbc9f635.js';
-import { i as isNonNullable } from './type-guard-158f6d7a.js';
+import { T as TextNodeRenderingRegistry, I as ImageAnnotationAction, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-a8b860ad.js';
+import { F as stateEntityRenderingRegistry, N as NodeAnnotationTypeEnum, Z as ZERO_WIDTH_SPACE, L as LinkAnnotationAction, G as InternalAnnotationTypeEnum, d as RTETextBlock, J as ImageAnnotation, K as CommonAnnotationTypeEnum, O as NodeAnnotation, M as ModifyContentAction, f as ModifyContentActionType, U as UpdateCodeBlockAction, P as SelectionChangeAction, z as RTECodeBlock } from './code-block-8b5bd928.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8ada793f.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-715dccf9.js';
-import { f as VegaChange } from './dom-node-subject-factory-f77cf9cc.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-be7a6ce3.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-6083d518.js';
+import { f as VegaChange, k as VegaRemove } from './dom-node-subject-factory-eb6bba5d.js';
+import { i as isNonNullable } from './type-guard-158f6d7a.js';
+import { R as RTEImageBlock, b as RTEListBlock, V as VegaRTEContent } from './content-state-8c3f862b.js';
+import { o as VegaInternalCodeBlockSelectionChange } from './vega-internal-event-id-820393ad.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-b4c2ddc3.js';
 import { f as findParent } from './ui-ed1283bb.js';
-import { a as waitForComponentDidRender } from './index-4aa167d6.js';
+import { a as waitForComponentDidRender } from './index-db0ec3ee.js';
 import './static-subject-title-ca83d6b6.js';
 import './change-manager-6a7eb88c.js';
 import './observer-3959f9dd.js';
 import './_commonjsHelpers-9943807e.js';
 import './internal-icon-manager-58cf8aa6.js';
 import './icon-manager-638dd4d4.js';
-import './vega-internal-event-id-85ad403f.js';
+import './string-a953eafc.js';
+import './dynamic-slimmer-90b8af32.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
 import './regex-dfe11abf.js';
 import './typography-396de03f.js';
-import './dynamic-slimmer-90b8af32.js';
 import './wait-for-vega-handler-b18eb955.js';
 
 class RTEBlockRenderer {
@@ -34,29 +36,14 @@ class RTEBlockRenderer {
     }
   }
   /**
-   * Get styles from annotations
-   *
-   * @param {RTEBlock} block - RTE block entity
-   * @returns {AnnotationStyle} - Annotation style
-   */
-  getStyles(block) {
-    return Array.from(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
+   * The attributes of the element rendered by the block
    *
    * @param {RTEBlock} block - RTE block entity
-   * @returns {string} - Annotation style
+   * @returns {Record<string, string>} - element  props
    */
-  getClasses(block) {
-    return Array.from(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(' '), '');
+  getCustomAttrs(block) {
+    var _a;
+    return ((_a = block.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()) || {};
   }
 }
 
@@ -66,41 +53,16 @@ class RTENodeRenderer {
       stateEntityRenderingRegistry.register(ref, node);
     }
   }
-  /**
-   * Get styles from annotations
-   *
-   * @param {RTENode} node - The DTO node
-   * @returns {AnnotationStyle} - Annotation style
-   */
-  getStyles(node) {
-    return Array.from(node.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
-   *
-   * @param {RTENode} node - The DTO node
-   * @returns {string} - Annotation style
-   */
-  getClasses(node) {
-    return Array.from(node.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(' '), '');
-  }
 }
 
 class RTETextNodeRenderer extends RTENodeRenderer {
   render(node) {
+    var _a, _b;
     const codeAnnotation = node.annotationMap.get(NodeAnnotationTypeEnum.CODE);
     if (codeAnnotation === null || codeAnnotation === void 0 ? void 0 : codeAnnotation.code) {
-      return (h("code", { key: node.id, style: super.getStyles(node), class: super.getClasses(node), ref: (ref) => this.registerRef(ref, node) }, node.text || ZERO_WIDTH_SPACE));
+      return (h("code", Object.assign({}, (_a = node.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render(), { key: node.id, style: node.getStyles(), class: node.getClasses(), ref: (ref) => this.registerRef(ref, node) }), node.text || ZERO_WIDTH_SPACE));
     }
-    return (h("span", { key: node.id, style: super.getStyles(node), class: super.getClasses(node), ref: (ref) => this.registerRef(ref, node) }, node.text || ZERO_WIDTH_SPACE));
+    return (h("span", Object.assign({}, (_b = node.getCustomAttributesAnnotation()) === null || _b === void 0 ? void 0 : _b.render(), { key: node.id, style: node.getStyles(), class: node.getClasses(), ref: (ref) => this.registerRef(ref, node) }), node.text || ZERO_WIDTH_SPACE));
   }
   registerRef(ref, node) {
     super.registerRef(ref, node);
@@ -115,23 +77,61 @@ class RTETextNodeRenderer extends RTENodeRenderer {
 const RTETextNodeRenderer$1 = new RTETextNodeRenderer();
 
 /**
- * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
+ * Renders link nodes and wraps them with link editor or anchor element based on edit mode.
  */
-class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
-  renderNodes(block, renderContext) {
-    const linkGroupAnnotation = block.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
-    return linkGroupAnnotation
-      ? this.renderLinkNodes(block.nodes, renderContext)
-      : block.nodes.map((node) => RTETextNodeRenderer$1.render(node));
+class RTELinkWrapperRenderer {
+  constructor() {
+    this.handleChange = ({ detail }, textFromNodes, linkNodes) => {
+      switch (detail.action) {
+        case 'link': {
+          const { url, text } = detail.payload;
+          const textChanged = text !== textFromNodes;
+          const groupKey = generateUUID();
+          linkNodes.forEach((node) => {
+            const linkAnnotationAction = new LinkAnnotationAction({
+              link: { href: url, groupKey: groupKey },
+              newText: textChanged ? text : undefined,
+              needMergeNode: textChanged && linkNodes.length > 1,
+              doSplit: false,
+            });
+            node.apply(linkAnnotationAction);
+          });
+          return;
+        }
+        case 'unlink': {
+          linkNodes.forEach((node) => node.deleteAnnotationByType(NodeAnnotationTypeEnum.LINK));
+          return;
+        }
+      }
+    };
   }
-  renderLinkNodes(nodes, { editable }) {
+  /**
+   * Render link nodes, grouping them by link group annotation if necessary.
+   *
+   * @param {RTETextNode[]} nodes - Array of text nodes to render.
+   * @param {LinkGroupAnnotation} linkGroupAnnotation - link group annotation
+   * @param {RTERenderContext} context - Context containing render options.
+   * @returns {HTMLElement[]} - Array of rendered HTML elements.
+   */
+  render(nodes, linkGroupAnnotation, { editable }) {
     const blockNodes = this.groupNodesByLink(nodes);
     return blockNodes.flatMap((item) => {
       if (this.isLinkGroup(item)) {
-        const linkAnnotation = item[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        // TODO: should revert to above code while https://gethired.atlassian.net/browse/VD-6513 have be fixed.
+        // 	const linkAnnotation: LinkAnnotation = item[0].getAnnotationByType<LinkAnnotation>(
+        // 		NodeAnnotationTypeEnum.LINK,
+        // 	) as LinkAnnotation;
+        let linkAnnotation;
+        item.find((node) => {
+          const link = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+          if (link) {
+            linkAnnotation = link;
+            return true;
+          }
+        });
         return editable
-          ? this.renderLinkEditorWrapper(item, linkAnnotation)
-          : this.renderLink(item, linkAnnotation);
+          ? this.renderLinkEditorWrapper(item, linkAnnotation, linkGroupAnnotation)
+          : this.renderLink(item, linkAnnotation, linkGroupAnnotation);
       }
       return RTETextNodeRenderer$1.render(item);
     });
@@ -159,32 +159,9 @@ class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
   isLinkGroup(item) {
     return Array.isArray(item);
   }
-  renderLinkEditorWrapper(linkNodes, linkAnnotation) {
+  renderLinkEditorWrapper(linkNodes, linkAnnotation, linkGroupAnnotation) {
     const { href } = linkAnnotation.link;
     const textFromNodes = linkNodes.map((node) => node.text).join('');
-    const handleChange = ({ detail, }) => {
-      switch (detail.action) {
-        case 'link': {
-          const { url, text } = detail.payload;
-          const textChanged = text !== textFromNodes;
-          const groupKey = generateUUID();
-          linkNodes.forEach((node) => {
-            const linkAnnotationAction = new LinkAnnotationAction({
-              link: { href: url, groupKey: groupKey },
-              newText: textChanged ? text : undefined,
-              needMergeNode: textChanged && linkNodes.length > 1,
-              doSplit: false,
-            });
-            node.apply(linkAnnotationAction);
-          });
-          return;
-        }
-        case 'unlink': {
-          linkNodes.forEach((node) => node.deleteAnnotationByType(NodeAnnotationTypeEnum.LINK));
-          return;
-        }
-      }
-    };
     let linkWrapperRef;
     return (h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
         if (ref) {
@@ -192,20 +169,41 @@ class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
           stateEntityRenderingRegistry.removeDirtyDomRef(ref);
         }
       } },
-      this.renderLink(linkNodes, linkAnnotation),
+      this.renderLink(linkNodes, linkAnnotation, linkGroupAnnotation),
       h("vega-rich-text-link-editor", { record: {
           text: textFromNodes,
           url: href,
         }, ref: (ref) => {
           if (ref) {
             ref.target = linkWrapperRef;
-            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
+              this.handleChange(e, textFromNodes, linkNodes);
+            });
           }
         } })));
   }
-  renderLink(linkNodes, linkAnnotation) {
-    const { href } = linkAnnotation.link;
-    return (h("a", { class: "v-rte--link", href: href, target: "_blank" }, linkNodes.map((node) => RTETextNodeRenderer$1.render(node))));
+  renderLink(linkNodes, linkAnnotation, linkGroupAnnotation) {
+    return (h("a", Object.assign({}, linkGroupAnnotation.toJsx(linkAnnotation)), linkNodes.map((node) => RTETextNodeRenderer$1.render(node))));
+  }
+}
+const RTELinkWrapperRenderer$1 = new RTELinkWrapperRenderer();
+
+/**
+ * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
+ */
+class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
+  /**
+   * Renders the text nodes of the block(RTETextBlock, RTEListItemBlock), applying link group annotation rendering if present.
+   *
+   * @param {RTETextBlock} block - The text block containing nodes to render.
+   * @param {RTERenderContext} renderContext - The context for rendering.
+   * @returns {HTMLElement[]} An array of rendered HTMLElements.
+   */
+  renderNodes(block, renderContext) {
+    const linkGroupAnnotation = block.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    return linkGroupAnnotation
+      ? RTELinkWrapperRenderer$1.render(block.nodes, linkGroupAnnotation, renderContext)
+      : block.nodes.map((node) => RTETextNodeRenderer$1.render(node));
   }
 }
 
@@ -214,29 +212,8 @@ class RTETextBlockRenderer extends RTEBlockTextNodesRenderer {
     return block instanceof RTETextBlock;
   }
   render(block, renderContext) {
-    const BlockTag = this.getBlockTagByType(block.type);
-    return (h(BlockTag, { key: block.id, ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) }, super.renderNodes(block, renderContext)));
-  }
-  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 'heading-4':
-        return `h4`;
-      case 'heading-5':
-        return `h5`;
-      case 'heading-6':
-        return `h6`;
-      case 'paragraph':
-        return 'p';
-    }
+    const BlockTag = block.getBlockTag();
+    return (h(BlockTag, Object.assign({}, this.getCustomAttrs(block), { key: block.id, ref: (ref) => super.registerRef(ref, block), style: block.getStyles(), class: block.getClasses() }), super.renderNodes(block, renderContext)));
   }
 }
 const RTETextBlockRenderer$1 = new RTETextBlockRenderer();
@@ -271,14 +248,52 @@ class RTEImageNodeRenderer extends RTENodeRenderer {
     };
   }
   render(node, renderContext) {
-    const imageAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    const { size, alt } = imageAnnotation || new ImageAnnotation('md', '');
-    return renderContext.editable ? (h("vega-rich-text-image-editor", { key: node.id, style: super.getStyles(node), size: size, alt: alt, ref: (ref) => {
+    const imageAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE) ||
+      new ImageAnnotation('md', '');
+    return renderContext.editable ? (h("vega-rich-text-image-editor", { key: node.id, class: this.getClasses(node), size: imageAnnotation.size, alt: imageAnnotation.alt, ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => this.handleChange(e, node));
-      } }, this.renderImage(alt, node, renderContext))) : (this.renderImage(alt, node, renderContext));
+      } }, this.renderImage(imageAnnotation, node, renderContext))) : (this.renderImage(imageAnnotation, node, renderContext));
   }
-  renderImage(alt, node, renderContext) {
-    return (h("img", { style: renderContext.editable ? { width: '100%' } : super.getStyles(node), alt: alt, src: node.url, ref: (ref) => super.registerRef(ref, node) }));
+  /**
+   * The function will render an image.
+   * In edit mode, it will be placed in the "vega-rich-text-image-editor" component as a slot.
+   * In view mode, the img image will be displayed directly.
+   *
+   * @param {ImageAnnotation} imageAnnotation - the image annotation of the image node
+   * @param {RTEImageNode} node  - the current image node
+   * @returns {HTMLElement} return a image element
+   */
+  renderImage(imageAnnotation, node, renderContext) {
+    var _a;
+    return (h("img", Object.assign({}, (_a = node.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render({ filterAttributes: ['width', 'height'] }), { class: renderContext.editable ? this.getCommonClasses(node) : node.getClasses(), style: renderContext.editable
+        ? Object.assign(Object.assign({}, node.getStyles()), { width: '100%' }) : Object.assign(Object.assign({}, node.getStyles()), imageAnnotation.renderStyle({ standalone: true })), alt: imageAnnotation.alt, "data-size": imageAnnotation.size, src: node.url, ref: (ref) => super.registerRef(ref, node) })));
+  }
+  /**
+   * Get the custom class string of the current RTEImageNode.
+   *
+   * @returns {Nullable<string>} A string of classes.
+   */
+  getCommonClasses(node) {
+    const customClassAnnotation = node.getAnnotationByType(CommonAnnotationTypeEnum.CUSTOM_CLASS);
+    if (customClassAnnotation) {
+      return customClassAnnotation.customClass
+        .filter(isNonNullable)
+        .reduce((pre, cur) => [pre, cur].join(' ').trim(), '');
+    }
+    return null;
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {string} - Annotation style
+   */
+  getClasses(node, options = { standalone: false }) {
+    return Array.from(node.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .map((annotation) => annotation.renderClass(options))
+      .filter(isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' ').trim(), '');
   }
 }
 const RTEImageNodeRenderer$1 = new RTEImageNodeRenderer();
@@ -288,7 +303,7 @@ class RTEImageBlockRenderer extends RTEBlockRenderer {
     return block instanceof RTEImageBlock;
   }
   render(block, renderContext) {
-    return (h("div", { key: block.id, style: Object.assign({}, super.getStyles(block)), ref: (ref) => super.registerRef(ref, block), class: super.getClasses(block) }, block.nodes.map((node) => {
+    return (h("div", Object.assign({}, this.getCustomAttrs(block), { key: block.id, ref: (ref) => super.registerRef(ref, block), style: block.getStyles(), class: block.getClasses() }), block.nodes.map((node) => {
       return RTEImageNodeRenderer$1.render(node, renderContext);
     })));
   }
@@ -297,7 +312,7 @@ const RTEImageBlockRenderer$1 = new RTEImageBlockRenderer();
 
 class RTEListItemBlockRenderer extends RTEBlockTextNodesRenderer {
   render(block, renderContext) {
-    return (h("li", { key: block.id, ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) },
+    return (h("li", Object.assign({}, this.getCustomAttrs(block), { key: block.id, ref: (ref) => super.registerRef(ref, block), style: block.getStyles(), class: block.getClasses() }),
       super.renderNodes(block, renderContext),
       this.renderChildren(block.children, renderContext)));
   }
@@ -313,11 +328,169 @@ class RTEListBlockRenderer extends RTEBlockRenderer {
   }
   render(block, renderContext) {
     const BlockTag = block.type === 'number-list' ? 'ol' : 'ul';
-    return (h(BlockTag, { key: block.id, ref: (ref) => super.registerRef(ref, block) }, block.blocks.map((listItemBlock) => RTEListItemBlockRenderer$1.render(listItemBlock, renderContext))));
+    return (h(BlockTag, Object.assign({}, this.getCustomAttrs(block), { key: block.id, ref: (ref) => super.registerRef(ref, block), style: block.getStyles(), class: block.getClasses() }), block.blocks.map((listItemBlock) => RTEListItemBlockRenderer$1.render(listItemBlock, renderContext))));
   }
 }
 const RTEListBlockRenderer$1 = new RTEListBlockRenderer();
 
+/**
+ * Switch out from the code block and insert new paragraph after code block.
+ *
+ * @example codeBlock.apply(new SwitchOutFromCodeBlockAction(content, language))
+ */
+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;
+  }
+}
+
+/**
+ * Remove the code block from the state.
+ *
+ * @example codeBlock.parentBlock.apply(new RemoveCodeBlockAction())
+ */
+class RemoveCodeBlockAction extends ModifyContentAction {
+  constructor() {
+    super(...arguments);
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.DELETE_CODE_BLOCK;
+  }
+}
+
+class RTECodeBlockNodeRenderer extends RTENodeRenderer {
+  render(node, renderContext) {
+    const { text: code, language } = node;
+    return (h("vega-code-block", { key: node.id, value: { code, language }, readOnly: !renderContext.editable, "data-content": code, "data-language": language, ref: (ref) => {
+        this.registerRef(ref, node);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => this.handleCodeContentChange(input.detail, node));
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaRemove, (input) => this.handleCodeBlockRemove(input, node));
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalCodeBlockSelectionChange, (input) => this.handleSelectionChange(input.detail, node));
+      } }));
+  }
+  /**
+   * Sync the code block DTO language and content when the component change event emit.
+   *
+   * @param {VegaCodeBlockValue} codeBlockValue - The code block value.
+   * @param {RTECodeBlockNode} node - The DTO class instance.
+   */
+  handleCodeContentChange(codeBlockValue, node) {
+    const { code, language } = codeBlockValue;
+    if (this.shouldSwitchOutOfCodeBlock(node.text, code)) {
+      const switchAction = new SwitchOutFromCodeBlockAction(code, language);
+      node.parentBlock.apply(switchAction);
+    }
+    else {
+      node.apply(new UpdateCodeBlockAction(code, language));
+    }
+  }
+  /**
+   * Remove the code block from RTE value when the component remove event emit.
+   *
+   * @param {ChangeManagerEventLike<unknown>} input - The internal event payload object.
+   * @param {RTECodeBlockNode} node - The DTO class instance.
+   */
+  handleCodeBlockRemove(input, node) {
+    input.preventDefault();
+    node.parentBlock.apply(new RemoveCodeBlockAction());
+  }
+  /**
+   * The cursor should jump out of code block if enter three line breaks at the end.
+   *
+   * @param {string} oldCode - The old code content.
+   * @param {string} newCode - The new code content.
+   * @returns {boolean} - Boolean value.
+   */
+  shouldSwitchOutOfCodeBlock(oldCode, newCode) {
+    const newCodes = newCode.split('\n');
+    if (newCode.length > oldCode.length &&
+      newCodes.length > 3 &&
+      newCodes
+        .slice(newCodes.length - 3)
+        .join('')
+        .trim() === '') {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Apply the selection action to code node or remove from the annotation map.
+   *
+   * @param {boolean} isSelected - The code block is focus or not.
+   * @param {RTECodeBlockNode} node - The DTO class instance.
+   */
+  handleSelectionChange(isSelected, node) {
+    if (isSelected) {
+      node.apply(new SelectionChangeAction(null));
+    }
+    else {
+      node.annotationMap.delete(InternalAnnotationTypeEnum.SELECTION_RANGE);
+    }
+  }
+}
+const RTECodeBlockNodeRenderer$1 = new RTECodeBlockNodeRenderer();
+
+/**
+ * The code block renderer.
+ */
+class RTECodeBlockRenderer extends RTEBlockRenderer {
+  /**
+   * Check the input block type.
+   *
+   * @param {RTEBlock} block - The input block.
+   * @returns {boolean} - Return true if the input block is a code block.
+   */
+  canHandle(block) {
+    return block instanceof RTECodeBlock;
+  }
+  /**
+   * Render the code block.
+   *
+   * @param {RTECodeBlock} block - The code block.
+   * @param {RTERenderContext} renderContext - The render context.
+   * @returns {HTMLElement} - The code block container element and code node elements.
+   */
+  render(block, renderContext) {
+    const { id, nodes } = block;
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    h("pre", { key: id, class: "code-block-container", ref: (node) => this.registerRef(node, block), onKeyDown: this.preventParentDoFocus, onClick: this.preventParentDoFocus, "data-language": nodes[0].language },
+      this.renderPlaceholderElement('TOP'),
+      RTECodeBlockNodeRenderer$1.render(nodes[0], renderContext),
+      this.renderPlaceholderElement('BOTTOM')));
+  }
+  /**
+   * The current element used to define the upper and lower bounds of a code block and to ensure that they are reflected in the range object when the code block is selected.
+   *
+   * @param {'TOP' | 'BOTTOM'} position - The element position.
+   * @returns {HTMLElement} - The empty span element.
+   */
+  renderPlaceholderElement(position) {
+    const marginTop = position === 'BOTTOM' ? '-1px' : '0px';
+    const marginBottom = position === 'BOTTOM' ? '0px' : '-1px';
+    return (h("span", { class: RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME, style: {
+        display: 'block',
+        height: '1px',
+        overflow: 'hidden',
+        zIndex: '1',
+        marginTop,
+        marginBottom,
+      } }, ZERO_WIDTH_SPACE));
+  }
+  /**
+   * Prevent the click event bubble, avoid the rich text content trigger focus event.
+   *
+   * @param {MouseEvent} e - The event object.
+   */
+  preventParentDoFocus(e) {
+    e.stopPropagation();
+  }
+}
+const RTECodeBlockRenderer$1 = new RTECodeBlockRenderer();
+
 var __decorate$2 = (undefined && undefined.__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);
@@ -328,6 +501,7 @@ class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
     this.blockRenderers = [
+      RTECodeBlockRenderer$1,
       RTETextBlockRenderer$1,
       RTEImageBlockRenderer$1,
       RTEListBlockRenderer$1,
@@ -442,7 +616,7 @@ __decorate$1([
   MapToComponentField({ writable: true })
 ], VegaRichTextContentStateController.prototype, "contentEditable", void 0);
 
-const vegaRichTextContentCss = ":host{display:flex;flex-direction:column;width:100%}:host .rich-text-content{position:relative;height:100%;outline:2px solid transparent;outline-offset:2px;font-family:\"Inter\", sans-serif;font-weight:500;color:var(--v-rich-text-editor-black, #111128);overflow-wrap:break-word;white-space:pre-wrap}:host .rich-text-content.showPlaceholder::before{position:absolute;content:attr(data-placeholder);font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .rich-text-content h1,:host .rich-text-content h2,:host .rich-text-content h3,:host .rich-text-content h4,:host .rich-text-content h5,:host .rich-text-content h6,:host .rich-text-content p{margin:0}:host .rich-text-content a.v-rte--link{color:rgba(var(--v-text-link, 19, 98, 226, 1));outline:none}:host .rich-text-content a.v-rte--link:visited{color:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}:host .rich-text-content a.v-rte--link:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host .rich-text-content a.v-rte--link:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host .rich-text-content a.v-rte--link:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));border-radius:8px}:host .rich-text-content .v-rte--underline{text-decoration:underline}:host .rich-text-content .v-rte--strikethrough{text-decoration:line-through}:host .rich-text-content .v-rte--underline.v-rte--strikethrough{text-decoration:underline line-through}:host .rich-text-content .v-rte--horizontal-alignment-right{text-align:right}:host .rich-text-content .v-rte--horizontal-alignment-left{text-align:left}:host .rich-text-content .v-rte--horizontal-alignment-center{text-align:center}:host .rich-text-content .v-rte--horizontal-alignment-justify{text-align:justify}:host .rich-text-content .v-rte--code{font-family:\"Roboto Mono\";white-space:pre-wrap}:host .rich-text-content img{vertical-align:bottom;cursor:pointer}:host .rich-text-content ul{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;outline-offset:2px}:host .rich-text-content .link-editor-wrapper vega-rich-text-link-editor{position:absolute;bottom:0;left:0;right:0}";
+const vegaRichTextContentCss = ":host{display:flex;flex-direction:column;width:100%}:host .rich-text-content{position:relative;height:100%;outline:2px solid transparent;outline-offset:2px;font-family:\"Inter\", sans-serif;font-weight:500;color:var(--v-rich-text-editor-black, #111128);overflow-wrap:break-word;white-space:pre-wrap}:host .rich-text-content.showPlaceholder::before{position:absolute;content:attr(data-placeholder);font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-content.showPlaceholder::before{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .rich-text-content h1,:host .rich-text-content h2,:host .rich-text-content h3,:host .rich-text-content h4,:host .rich-text-content h5,:host .rich-text-content h6,:host .rich-text-content p{margin:0}:host .rich-text-content a.v-rte--link{color:rgba(var(--v-text-link, 19, 98, 226, 1));outline:none}:host .rich-text-content a.v-rte--link:visited{color:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}:host .rich-text-content a.v-rte--link:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host .rich-text-content a.v-rte--link:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host .rich-text-content a.v-rte--link:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));border-radius:8px}:host .rich-text-content .v-rte--underline{text-decoration:underline}:host .rich-text-content .v-rte--strikethrough{text-decoration:line-through}:host .rich-text-content .v-rte--underline.v-rte--strikethrough{text-decoration:underline line-through}:host .rich-text-content .v-rte--horizontal-alignment-right{text-align:right}:host .rich-text-content .v-rte--horizontal-alignment-left{text-align:left}:host .rich-text-content .v-rte--horizontal-alignment-center{text-align:center}:host .rich-text-content .v-rte--horizontal-alignment-justify{text-align:justify}:host .rich-text-content .v-rte--code{font-family:\"Roboto Mono\";white-space:pre-wrap}:host .rich-text-content img{vertical-align:bottom;cursor:pointer}: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 .link-editor-wrapper{position:relative;outline:2px solid transparent;outline-offset:2px}:host .rich-text-content .link-editor-wrapper vega-rich-text-link-editor{position:absolute;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}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;