@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

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

@@ -1,106 +1,22 @@
-import { h } from '@stencil/core';
 import { InternalAnnotationTypeEnum } from '../../annotations/annotation.abstract';
 import { RTEBlockRenderer } from './block-renderer.abstract';
 import RTETextNodeRenderer from '../nodes/text-node-renderer';
-import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
-import { isNonNullable } from '../../../../../types/type-guard';
-import { generateUUID } from '../../../../../utils/misc';
-import { LinkAnnotationAction } from '../../actions/link-annotation-action';
-import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
-import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
-import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import RTELinkWrapperRenderer from './link-wrapper-renderer';
 /**
  * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
  */
 export 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
-      ? this.renderLinkNodes(block.nodes, renderContext)
+      ? RTELinkWrapperRenderer.render(block.nodes, linkGroupAnnotation, renderContext)
       : block.nodes.map((node) => RTETextNodeRenderer.render(node));
   }
-  renderLinkNodes(nodes, { editable }) {
-    const blockNodes = this.groupNodesByLink(nodes);
-    return blockNodes.flatMap((item) => {
-      if (this.isLinkGroup(item)) {
-        const linkAnnotation = item[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK);
-        return editable
-          ? this.renderLinkEditorWrapper(item, linkAnnotation)
-          : this.renderLink(item, linkAnnotation);
-      }
-      return RTETextNodeRenderer.render(item);
-    });
-  }
-  groupNodesByLink(nodes) {
-    return nodes.reduce((acc, node) => {
-      const nodeLinkAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
-      const lastGroup = acc[acc.length - 1];
-      if (isNonNullable(nodeLinkAnnotation)) {
-        if (lastGroup &&
-          this.isLinkGroup(lastGroup) &&
-          lastGroup[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK).toEqual(nodeLinkAnnotation)) {
-          lastGroup.push(node);
-        }
-        else {
-          acc.push([node]);
-        }
-      }
-      else {
-        acc.push(node);
-      }
-      return acc;
-    }, []);
-  }
-  isLinkGroup(item) {
-    return Array.isArray(item);
-  }
-  renderLinkEditorWrapper(linkNodes, linkAnnotation) {
-    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) {
-          linkWrapperRef = ref;
-          stateEntityRenderingRegistry.removeDirtyDomRef(ref);
-        }
-      } },
-      this.renderLink(linkNodes, linkAnnotation),
-      h("vega-rich-text-link-editor", { record: {
-          text: textFromNodes,
-          url: href,
-        }, ref: (ref) => {
-          if (ref) {
-            ref.target = linkWrapperRef;
-            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
-          }
-        } })));
-  }
-  renderLink(linkNodes, linkAnnotation) {
-    const { href } = linkAnnotation.link;
-    return (h("a", { class: "v-rte--link", href: href, target: "_blank" }, linkNodes.map((node) => RTETextNodeRenderer.render(node))));
-  }
 }

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

@@ -0,0 +1,62 @@
+import { h } from '@stencil/core';
+import { RTEBlockRenderer } from './block-renderer.abstract';
+import { RTECodeBlock } from '../../blocks/code-block';
+import RTECodeBlockNodeRenderer from '../nodes/code-block-node-renderer';
+import { ZERO_WIDTH_SPACE } from '../../../constants/constant';
+/**
+ * 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.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();
+  }
+}
+export default new RTECodeBlockRenderer();

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

@@ -7,7 +7,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.render(node, renderContext);
     })));
   }

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

@@ -0,0 +1,121 @@
+import { h } from '@stencil/core';
+import { generateUUID } from '../../../../../utils/misc';
+import { LinkAnnotationAction } from '../../actions/link-annotation-action';
+import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import RTETextNodeRenderer from '../nodes/text-node-renderer';
+import { isNonNullable } from '../../../../../types/type-guard';
+/**
+ * Renders link nodes and wraps them with link editor or anchor element based on edit mode.
+ */
+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;
+        }
+      }
+    };
+  }
+  /**
+   * 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)) {
+        // 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, linkGroupAnnotation)
+          : this.renderLink(item, linkAnnotation, linkGroupAnnotation);
+      }
+      return RTETextNodeRenderer.render(item);
+    });
+  }
+  groupNodesByLink(nodes) {
+    return nodes.reduce((acc, node) => {
+      const nodeLinkAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+      const lastGroup = acc[acc.length - 1];
+      if (isNonNullable(nodeLinkAnnotation)) {
+        if (lastGroup &&
+          this.isLinkGroup(lastGroup) &&
+          lastGroup[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK).toEqual(nodeLinkAnnotation)) {
+          lastGroup.push(node);
+        }
+        else {
+          acc.push([node]);
+        }
+      }
+      else {
+        acc.push(node);
+      }
+      return acc;
+    }, []);
+  }
+  isLinkGroup(item) {
+    return Array.isArray(item);
+  }
+  renderLinkEditorWrapper(linkNodes, linkAnnotation, linkGroupAnnotation) {
+    const { href } = linkAnnotation.link;
+    const textFromNodes = linkNodes.map((node) => node.text).join('');
+    let linkWrapperRef;
+    return (h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
+        if (ref) {
+          linkWrapperRef = ref;
+          stateEntityRenderingRegistry.removeDirtyDomRef(ref);
+        }
+      } },
+      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, (e) => {
+              this.handleChange(e, textFromNodes, linkNodes);
+            });
+          }
+        } })));
+  }
+  renderLink(linkNodes, linkAnnotation, linkGroupAnnotation) {
+    return (h("a", Object.assign({}, linkGroupAnnotation.toJsx(linkAnnotation)), linkNodes.map((node) => RTETextNodeRenderer.render(node))));
+  }
+}
+export default new RTELinkWrapperRenderer();

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

@@ -8,7 +8,7 @@ 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.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.render(listItemBlock, renderContext))));
   }
 }
 export default new RTEListBlockRenderer();

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

@@ -3,7 +3,7 @@ import RTEListBlockRenderer from './list-block-renderer';
 import { RTEBlockTextNodesRenderer } from './block-text-nodes-renderer.abstract';
 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)));
   }

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

@@ -6,29 +6,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)));
   }
 }
 export default new RTETextBlockRenderer();

package/dist/collection/components/vega-rich-text-editor/dto/renderers/nodes/code-block-node-renderer.js

@@ -0,0 +1,81 @@
+import { h } from '@stencil/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaChange, VegaRemove } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { RTENodeRenderer } from './node-renderer.abstract';
+import { SwitchOutFromCodeBlockAction } from '../../actions/switch-out-from-code-block-action';
+import { UpdateCodeBlockAction } from '../../actions/update-code-block-action';
+import { SelectionChangeAction } from '../../actions/selection-change-action';
+import { InternalAnnotationTypeEnum } from '../../annotations/annotation.abstract';
+import { VegaInternalCodeBlockSelectionChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { RemoveCodeBlockAction } from '../../actions/remove-code-block-action';
+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);
+    }
+  }
+}
+export default new RTECodeBlockNodeRenderer();

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

@@ -1,11 +1,13 @@
 import { h } from '@stencil/core';
 import { ImageAnnotation } from '../../annotations/image-annotation';
-import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
+import { NodeAnnotation, NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
 import { ImageAnnotationAction } from '../../actions/image-annotation-action';
 import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 import { RTENodeRenderer } from './node-renderer.abstract';
+import { isNonNullable } from '../../../../../types/type-guard';
+import { CommonAnnotationTypeEnum } from '../../annotations/common-annotation.abstract';
 class RTEImageNodeRenderer extends RTENodeRenderer {
   constructor() {
     super(...arguments);
@@ -36,14 +38,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(), '');
   }
 }
 export default new RTEImageNodeRenderer();

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

@@ -1,35 +1,8 @@
 import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
-import { NodeAnnotation } from '../../annotations/node-annotation.abstract';
 export class RTENodeRenderer {
   registerRef(ref, node) {
     if (ref) {
       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(' '), '');
-  }
 }

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

@@ -5,11 +5,12 @@ import { ZERO_WIDTH_SPACE } from '../../../constants/constant';
 import TextNodeElementRenderingRegistry from '../../../slimmers/controllers/text-node-rendering-registry';
 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);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/delete-selected-nodes-controller.js

@@ -16,6 +16,7 @@ import { InsertBlocksBeforeAction } from '../../dto/actions/insert-blocks-before
 import { generateUUID } from '../../../../utils/misc';
 import { AppendChildNodesAction } from '../../dto/actions/append-child-nodes-action';
 import { UpdateTextAction } from '../../dto/actions/update-text-action';
+import { RTECodeBlockNode } from '../../dto/nodes/code-block-node';
 /**
  * The `DeleteSelectedNodesController` class provides methods to delete selected nodes.
  */
@@ -68,7 +69,10 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
     if (selectedNodes.length > 1) {
       // Remove all selected nodes except start node and end node(the end image node will be removed), the start node need to get the index of the block
       const shouldRemovedItems = selectedNodes.filter((item) => {
-        if (item.type !== 'IMAGE') {
+        if (item instanceof RTECodeBlockNode) {
+          return item !== startNode;
+        }
+        else if (item.type !== 'IMAGE') {
           return item !== startNode && item !== endNode;
         }
         else {
@@ -82,7 +86,8 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
     this.removeRangeStartAndEndSelectedText();
     /**
      * if the range start node is image and the item is selected, so we need remove the image item, the image block will be removed if the item is the only item.
-     * but before remove the image block, we need insert a paragraph to make sure the start block and start node could be get correct before insert text or break paragraph action
+     * but before remove the image block, we need insert a paragraph to make sure the start block and start node could be get correct before insert text or break paragraph action.
+     * the code block node should do the same logic.
      */
     if (startNode instanceof RTEImageNode &&
       startOffset !== 1 &&
@@ -100,6 +105,12 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
         return startNode.parentBlock.nodes[0];
       }
     }
+    else if (startNode instanceof RTECodeBlockNode) {
+      const paragraph = this.createEmptyParagraph();
+      startNode.parentBlock.parent.apply(new InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
+      startNode.parentBlock.apply(new RemoveChildAction(startNode));
+      return paragraph.nodes[0];
+    }
     return startNode;
   }
   /**
@@ -149,7 +160,9 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
               endRTENode.parentBlock.apply(new RemoveChildAction(endRTENode.parentBlock.nodes[0]));
             }
           }
-          if (startRTENode.parentBlock !== endRTENode.parentBlock) {
+          if (startRTENode instanceof RTETextNode &&
+            endRTENode instanceof RTETextNode &&
+            startRTENode.parentBlock !== endRTENode.parentBlock) {
             startRTENode.parentBlock.apply(new AppendChildNodesAction(endBlock.nodes));
             endBlock.nodes = [];
           }
@@ -170,7 +183,9 @@ export class DeleteSelectedNodesController extends VegaSlimmer {
   shouldMergeTextNode(nodeA, nodeB) {
     const { annotations: annotationsA } = nodeA.toJSON();
     const { annotations: annotationsB } = nodeB.toJSON();
-    return JSON.stringify(annotationsA) === JSON.stringify(annotationsB);
+    return (nodeA instanceof RTETextNode &&
+      nodeB instanceof RTETextNode &&
+      JSON.stringify(annotationsA) === JSON.stringify(annotationsB));
   }
 }
 __decorate([