@globalpayments/vega 2.61.0 → 2.62.0

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

@@ -31,6 +31,7 @@ import { InlineHtmlAnnotation } from '../annotations/inline-html-annotation';
 import { LinkGroupNodeSplitStrategy } from '../action-handle-strategies/modify-content-strategies/link-group-node-split-strategy';
 import { DeleteLinkGroupStrategy } from '../action-handle-strategies/modify-content-strategies/delete-link-group-strategy';
 import { PlainTextAnnotation } from '../annotations/plain-text-annotation';
+import { LinkAnnotationAction } from '../actions/link-annotation-action';
 /**
  * Text node
  */
@@ -63,17 +64,29 @@ export class RTETextNode extends RTENode {
     const textNode = new RTETextNode(richText.id, richText.text, parentBlock);
     const { annotations } = richText;
     if (annotations) {
-      textNode.annotationMap = new Map(Object.keys(annotations)
-        .map((type) => {
-        if (type === 'link' && annotations.link && parentBlock) {
-          parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode], 'link'));
-        }
-        return this.createAnnotationEntity(type, annotations[type], options);
-      })
-        .filter(isNonNullable));
+      textNode.annotationMap = this.generateTextAnnotationMap(annotations, options, parentBlock, textNode);
     }
     return textNode;
   }
+  /**
+   * Generates a map of text annotations for the given set of annotations.
+   *
+   * @param {VegaRTETextAnnotations} annotations - The annotations to be converted into a map.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @param {RTETextBlock} parentBlock - The parent text block.
+   * @param {RTETextNode} textNode - The text node.
+   * @returns {NodeAnnotations} The map of text annotations.
+   */
+  static generateTextAnnotationMap(annotations, options, parentBlock, textNode) {
+    return new Map(Object.keys(annotations)
+      .map((type) => {
+      if (type === 'link' && annotations.link && parentBlock && textNode) {
+        parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode], 'link'));
+      }
+      return this.createAnnotationEntity(type, annotations[type], options);
+    })
+      .filter(isNonNullable));
+  }
   /**
    * Creates different types of text annotations based on the provided type and value.
    *
@@ -200,9 +213,10 @@ export class RTETextNode extends RTENode {
       if (this.isContentEditable()) {
         ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_TEXT, dtoClassName, new NodeUpdateTextStrategy());
         ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_SELECTED_TEXT, dtoClassName, new NodeReplaceSelectedTextStrategy());
-        ActionHandleStrategyRegistry.register(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
+        ActionHandleStrategyRegistry.register(ModifyContentActionType.LINK_GROUP_NODE_SPLIT, dtoClassName, new LinkGroupNodeSplitStrategy());
+        ActionHandleStrategyRegistry.register(LinkAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
       }
-      ActionHandleStrategyRegistry.register(ModifyContentActionType.LINK_GROUP_NODE_SPLIT, dtoClassName, new LinkGroupNodeSplitStrategy());
+      ActionHandleStrategyRegistry.register(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
       ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_LINK_GROUP, dtoClassName, new DeleteLinkGroupStrategy());
       ActionHandleStrategyRegistry.register(AnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
       RTETextNode.registerActionStrategyStatus[dtoClassName] = true;
@@ -251,6 +265,18 @@ export class RTETextNode extends RTENode {
     if (!(annotation instanceof SelectionRangeAnnotation)) {
       this.syncUpSelectedNodes(node);
     }
+    /**
+     * 1. Try to get the specific strategy for the action and node type first (e.g., LinkAnnotationAction on RTETextNode).
+     * 2. If no specific strategy found, try to get the generic NodeUpdateAnnotationMapStrategy for AnnotationAction on RTETextNode.
+     *
+     * This is useful when we want to check if there is a specific strategy for an action-node combination first, we can use the specific strategy to check if the special toolbar button should be enabled or disabled.
+     * TODO: Update the other annotation actions to follow this pattern. https://gethired.atlassian.net/browse/VD-7367
+     */
+    const strategy = ActionHandleStrategyRegistry.get(action.constructor.name, node.constructor.name);
+    if (strategy) {
+      strategy.execute(action, node);
+      return;
+    }
     const updateAnnotationMapStrategy = ActionHandleStrategyRegistry.get(AnnotationAction.name, RTETextNode.name);
     if (updateAnnotationMapStrategy) {
       updateAnnotationMapStrategy.execute(action, node);

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

@@ -8,6 +8,7 @@ import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-e
 import RTETextNodeRenderer from '../nodes/text-node-renderer';
 import { isNonNullable } from '../../../../../types/type-guard';
 import { UnlinkLinkGroupAction } from '../../actions/unlink-link-group-action';
+import RTEDTORendererManager from '../../../../../helpers/rte-manager/dto-renderer-manager';
 /**
  * Renders link nodes and wraps them with link editor or anchor element based on edit mode.
  */
@@ -47,11 +48,12 @@ class RTELinkWrapperRenderer {
    * @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.
+   * @returns {VegaRTERenderResult[]} - Array of rendered HTML elements.
    */
   render(nodes, linkGroupAnnotation, { editable }) {
     const blockNodes = this.groupNodesByLink(nodes);
-    return blockNodes.flatMap((item) => {
+    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>(
@@ -69,8 +71,12 @@ class RTELinkWrapperRenderer {
           ? this.renderLinkEditorWrapper(item, linkAnnotation, linkGroupAnnotation)
           : this.renderLink(item, linkAnnotation, linkGroupAnnotation);
       }
-      return RTETextNodeRenderer.render(item);
-    });
+      const nodeRenderer = RTEDTORendererManager.getRTERenderer(item.type);
+      if (nodeRenderer) {
+        return nodeRenderer.render(item, { editable }, h);
+      }
+    })
+      .filter(isNonNullable);
   }
   groupNodesByLink(nodes) {
     return nodes.reduce((acc, node) => {

package/dist/collection/components/vega-rich-text-editor/extensions/base-toolbar-button-renderer.js

@@ -1,5 +1,150 @@
+import { DomNodeSubjectObserverFactory } from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick, VegaDropdownClick } from '../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaInternalIconManager } from '../../../helpers/icon/internal-icon-manager';
+import { isNonNullable } from '../../../types/type-guard';
 /**
  * Base class for rendering extension toolbar button in the rich text editor.
+ * The renderer provides common functionalities for rendering toolbar buttons, including:
+ * - Rendering a button with an icon, label, and optional arrow icon.
+ * - Rendering a dropdown with a list of items.
+ * - Rendering dropdown items.
+ * - Rendering template for dropdown list.
+ * - Determining if the button should be disabled based on the editor context.
+ * - Handling button and dropdown click events.
+ * Override the methods to customize the rendering and behavior of the button.
  */
 export class VegaRTEToolbarButtonRenderer {
+  /**
+   * Checks if the button should be hidden.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context for the editor.
+   * @returns {boolean} True if the button is hidden, false otherwise.
+   */
+  isHidden(editorContext) {
+    return editorContext.sourceEditMode;
+  }
+  /**
+   * Renders a dropdown component with the specified properties and children.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @param {RTEToolbarDropdownProps} dropdownProps - The properties for the dropdown.
+   * @param {VegaRTERenderResult[]} children - The children elements for the dropdown.
+   * @returns {VegaRTERenderResult} - The render result for the dropdown.
+   */
+  renderDropdown(h, editorContext, dropdownProps, children) {
+    return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, 
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (el) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, (input) => this.handleDropdownClick(input.detail, editorContext));
+      } }, dropdownProps), children);
+  }
+  /**
+   * Renders the dropdown list template.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {RTEDropdownListItem[]} itemList - The list of dropdown items.
+   * @returns {VegaRTERenderResult} - The render result for the dropdown list.
+   */
+  renderDropdownListTemplate(h, itemList) {
+    return h('div', {
+      slot: 'items',
+      onMouseDown: this.preventDefault,
+    }, itemList.map((item) => {
+      return this.renderDropdownItem(h, item);
+    }));
+  }
+  /**
+   * Renders a dropdown item for the toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {RTEDropdownListItem} item - The dropdown item.
+   * @returns {VegaRTERenderResult} - The render result for the dropdown item.
+   */
+  renderDropdownItem(h, item) {
+    return h('vega-dropdown-item', {
+      key: item.key,
+      itemKey: item.key,
+      label: item.label,
+      prefixIcon: item.icon,
+    });
+  }
+  /**
+   * Renders a common toolbar button with optional icon, label, and arrow icon.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @param {RTEToolbarButtonProps} buttonProps - The properties for the button.
+   * @returns {VegaRTERenderResult} - The render result for the button.
+   */
+  renderButton(h, editorContext, buttonProps) {
+    const { icon, label, showArrowIcon } = buttonProps;
+    const isDisabled = this.isDisabled(editorContext);
+    return h('vega-rich-text-editor-toolbar-button', {
+      disabled: isDisabled,
+      icon: icon,
+      hidden: this.isHidden(editorContext),
+      selected: this.isSelected(editorContext),
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (el) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaClick, () => this.handleButtonClick(editorContext));
+      },
+      onMouseDown: this.preventDefault,
+    }, [
+      this.renderButtonLabel(h, editorContext, label),
+      showArrowIcon
+        ? h('vega-icon', {
+          size: 'size-8',
+          color: isDisabled ? 'text-disabled' : 'text-secondary',
+          style: { marginLeft: '8px' },
+          icon: VegaInternalIconManager.getIconKey('chevron-down'),
+        })
+        : null,
+    ].filter(isNonNullable));
+  }
+  /**
+   * Renders the button label.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @param {Nullable<string>} label - The button label if exist.
+   * @returns {Nullable<VegaRTERenderResult>} - The render result for the button.
+   */
+  renderButtonLabel(h, editorContext, label) {
+    if (label) {
+      const isDisabled = this.isDisabled(editorContext);
+      return h('vega-font', {
+        variant: 'font-field-label-sm',
+        color: isDisabled ? 'text-disabled' : 'text-primary',
+      }, label);
+    }
+    return null;
+  }
+  /**
+   * Determines if the button should be disabled based on the editor context.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @returns {boolean} - True if the button should be disabled, false otherwise.
+   */
+  isDisabled(editorContext) {
+    return editorContext.host.disabled;
+  }
+  /**
+   * Checks if the button should be selected.
+   *
+   * @param {VegaRTEToolbarRenderContext} _editorContext The render context for the editor.
+   * @returns {boolean} True if the button is selected, false otherwise.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isSelected(_editorContext) {
+    return false;
+  }
+  /**
+   * Prevents the default action of the click event. This is to avoid losing focus from the editor when the button is clicked.
+   *
+   * @param {MouseEvent} e The mouse event to prevent default action for.
+   */
+  preventDefault(e) {
+    e.preventDefault();
+  }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/extension.abstract.js

@@ -0,0 +1,97 @@
+import RTEDTOClassManager from '../../../helpers/rte-manager/dto-class-manager';
+import RTEDTORendererManager from '../../../helpers/rte-manager/dto-renderer-manager';
+import RTEDTOActionStrategyManager from '../../../helpers/rte-manager/dto-action-strategy-manager';
+import ElementToDTOClassStrategyManager from '../../../helpers/rte-manager/element-dto-class-strategy-manager';
+import { ActionHandleStrategyRegistry } from '../dto/action-handle-strategies/action-handle-strategy-registry';
+/**
+ * Abstract class for Vega Rich Text Editor extensions.
+ */
+export class VegaRTEExtension {
+  constructor() {
+    /**
+     * The context of the RTE extension, which may include references to the host editor and other relevant information.
+     */
+    this.extensionContext = null;
+  }
+  /**
+   * Registers an action handle strategy for a specific node or block class.
+   *
+   * @param {string} nodeOrBlockClassName - The name of the node or block class.
+   * @param {string} actionType - The type of the action.
+   * @param {ActionHandleStrategy<ModifyContentAction, RTENode | RTEBlock>} strategy - The strategy to register.
+   */
+  static registerActionHandleStrategy(nodeOrBlockClassName, actionType, strategy) {
+    ActionHandleStrategyRegistry.register(actionType, nodeOrBlockClassName, strategy);
+  }
+  /**
+   * Initializes the RTE extension with the provided context.
+   *
+   * @param {RTEExtensionContext} context - The context of the RTE extension.
+   */
+  initialExtension(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Register a node type with the extension.
+   *
+   * @param {string} type - The type of the node or block. The type should be a string that uniquely identifies the node or block.
+   * @param {ClassType<RTEBlock | RTENode>} DTOClass - The DTO class to register.
+   */
+  registerNode(type, DTOClass) {
+    RTEDTOClassManager.registerRTEDTOClass(type, DTOClass);
+  }
+  /**
+   * Register a renderer for a node type with the extension.
+   *
+   * @param {string} type - The type of the node or block. The type should be a string that uniquely identifies the node or block.
+   * @param {BaseRenderer} renderer - The renderer to register.
+   */
+  registerRenderer(type, renderer) {
+    RTEDTORendererManager.registerRTEDTORenderer(type, renderer);
+  }
+  /**
+   * Register a toolbar button renderer for the extension.
+   *
+   * @param {string} type - The type of the toolbar button.
+   * @param {VegaRTEToolbarButtonRenderer} renderer - The renderer to register.
+   */
+  registerToolbarButtonRenderer(type, renderer) {
+    RTEDTORendererManager.registerRTEToolbarButtonRenderer(type, renderer);
+  }
+  /**
+   * This is a helper method that utilizes RTEUtils to register common strategies.
+   * Call the method with the class name of the block to make it support basic strategies like:
+   * - Delete children
+   * - Append the children
+   * - Delete the block children content
+   *
+   * @param {string} blockClassName - The class name of the block to register strategies for.
+   */
+  registerBlockBasicStrategies(blockClassName) {
+    RTEDTOActionStrategyManager.registerBlockBasicStrategies(blockClassName);
+  }
+  /**
+   * Register an element to block DTO class strategy.
+   *
+   * @param {ElementToDTOStrategy} strategy - The strategy to register.
+   */
+  registerElementToBlockDTOClassStrategy(strategy) {
+    ElementToDTOClassStrategyManager.registerElementToBlockStrategy(strategy);
+  }
+  /**
+   * Register an element to node DTO class strategy.
+   *
+   * @param {ElementToDTOStrategy} strategy - The strategy to register.
+   */
+  registerElementToNodeDTOClassStrategy(strategy) {
+    ElementToDTOClassStrategyManager.registerElementToNodeStrategy(strategy);
+  }
+  /**
+   * Get the registered element to node DTO class strategies.
+   *
+   * @returns {ElementToDTOStrategy[]} - The registered element to node DTO class strategies.
+   */
+  getElementToNodeDTOClassStrategies() {
+    return ElementToDTOClassStrategyManager.getElementToNodeStrategies();
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/languages/language-extension.js

@@ -0,0 +1,113 @@
+import { VegaRTEContent } from '../../dto/content-state';
+import { VegaRTEExtension } from '../extension.abstract';
+import { RTELanguageToolbarButtonRenderer } from './language-toolbar-button-renderer';
+/**
+ * Language extension for Vega Rich Text Editor.
+ * This extension allows users to switch between different languages and maintain separate content for each language.
+ */
+export class VegaRTELanguageExtension extends VegaRTEExtension {
+  constructor(languageList, languagesState) {
+    super();
+    this.languageState = {
+      selectedLanguage: '',
+      contentMap: {},
+    };
+    /**
+     * Listener for language change events from the toolbar button renderer.
+     *
+     * @param {string} selectedLanguage - The newly selected language.
+     */
+    this.languageChangeCallBack = (selectedLanguage) => {
+      const previousLanguage = this.languageState.selectedLanguage;
+      if (this.extensionContext && previousLanguage) {
+        this.languageState.contentMap[previousLanguage] = this.getRTELatestValue(this.extensionContext.host);
+      }
+      this.languageState.selectedLanguage = selectedLanguage;
+      this.applyLanguageContent(selectedLanguage, this.languageState.contentMap);
+    };
+    if (languagesState) {
+      this.languageState = Object.assign(Object.assign({}, this.languageState), languagesState);
+    }
+    if (!this.languageState.selectedLanguage && languageList.length > 0) {
+      this.languageState.selectedLanguage = languageList[0].key;
+    }
+    this.languageToolbarButtonRenderer = new RTELanguageToolbarButtonRenderer(languageList, this.languageChangeCallBack, this.languageState.selectedLanguage);
+    this.registerToolbarButtonRenderer('languages', this.languageToolbarButtonRenderer);
+  }
+  /**
+   * Initializes the language extension.
+   * Applies the content for the selected language upon initialization.
+   *
+   * @param {RTEExtensionContext} context The extension context.
+   */
+  initialExtension(context) {
+    super.initialExtension(context);
+    const { selectedLanguage, contentMap } = this.languageState;
+    if (contentMap && contentMap[selectedLanguage]) {
+      this.applyLanguageContent(this.languageState.selectedLanguage, this.languageState.contentMap);
+    }
+  }
+  /**
+   * Invoked to set the language extension state. The method used if the state can not be provide when the editor is initialized.
+   *
+   * @param {RTELanguageExtensionState} state The language extension state to set.
+   */
+  setState(state) {
+    const { selectedLanguage, contentMap } = state;
+    this.languageToolbarButtonRenderer.setSelectedLanguage(selectedLanguage);
+    this.languageState.selectedLanguage = selectedLanguage;
+    this.languageState.contentMap = Object.assign({}, contentMap);
+    this.applyLanguageContent(selectedLanguage, contentMap);
+  }
+  /**
+   * Invoked to get the language extension state.
+   *
+   * @returns {RTELanguageExtensionState} The current language extension state.
+   */
+  getState() {
+    const { selectedLanguage, contentMap } = this.languageState;
+    if (this.extensionContext) {
+      contentMap[selectedLanguage] = this.getRTELatestValue(this.extensionContext.host);
+    }
+    return this.languageState;
+  }
+  /**
+   * Applies the content for the selected language.
+   *
+   * @param {string} selectedLanguage - The newly selected language.
+   * @param {RTELanguageExtensionState['contentMap']} contentMap - The content map for all languages.
+   */
+  applyLanguageContent(selectedLanguage, contentMap) {
+    if (this.extensionContext && contentMap) {
+      let content = contentMap[selectedLanguage];
+      if (content) {
+        content = content instanceof VegaRTEContent ? content : VegaRTEContent.fromJSON(content);
+      }
+      else {
+        content = VegaRTEContent.createEmptyContent();
+      }
+      const { host, flushValue } = this.extensionContext;
+      if (host.value !== content) {
+        flushValue(content, true);
+      }
+    }
+  }
+  /**
+   * Get the RTE latest value. The value is from the code block when in source edit mode; otherwise, it's from the host value.
+   *
+   * @param {HTMLElement} host - The host element of the rich text editor.
+   * @returns {VegaRTEContent} - The content.
+   */
+  getRTELatestValue(host) {
+    let result = host.value;
+    if (this.extensionContext && this.extensionContext.isSourceEditMode() && host.shadowRoot) {
+      const codeBlock = host.shadowRoot.querySelector('.source-view-container vega-code-block');
+      if (codeBlock) {
+        result = VegaRTEContent.fromHtml(codeBlock.value.code, {
+          autoMatchFormat: host.sourceEditConfig.autoMatchFormat,
+        });
+      }
+    }
+    return result;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/languages/language-toolbar-button-renderer.js

@@ -0,0 +1,90 @@
+import { methodPlaceholder } from 'vega-slimmer/core';
+import { VegaRTEToolbarButtonRenderer } from '../base-toolbar-button-renderer';
+/**
+ * Toolbar button renderer for language selection in Vega Rich Text Editor.
+ */
+export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor(languageList, languageChangeCallback, selectedLanguage) {
+    super();
+    this.languageList = [];
+    this.selectedLanguage = 'Select Language';
+    this.labelRef = null;
+    /**
+     * Handles the language selection event.
+     *
+     * @param {string} itemKey - The key of the selected language item.
+     */
+    this.handleDropdownClick = (itemKey) => {
+      this.setSelectedLanguage(itemKey);
+      if (typeof this.languageChangeCallback === 'function') {
+        this.languageChangeCallback(this.selectedLanguage);
+      }
+    };
+    this.languageList = languageList;
+    this.selectedLanguage = selectedLanguage;
+    this.languageChangeCallback = languageChangeCallback;
+  }
+  /**
+   * Public method to set the selected language.
+   *
+   * @param {string} language The language key to set as selected.
+   */
+  setSelectedLanguage(language) {
+    this.selectedLanguage = language;
+    if (this.labelRef) {
+      this.labelRef.textContent = this.getLanguageLabelByKey(language);
+    }
+  }
+  /**
+   * The source edit mode does not affect the language button visibility.
+   *
+   * @returns {boolean} True if the button is hidden, false otherwise.
+   */
+  isHidden() {
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  render(createElement, editorContext) {
+    return this.renderDropdown(createElement, editorContext, { source: this.languageList }, [
+      this.renderButton(createElement, editorContext, {
+        label: this.getLanguageLabelByKey(this.selectedLanguage),
+        showArrowIcon: true,
+      }),
+    ]);
+  }
+  /**
+   * Override to render the button label with custom behavior.
+   *
+   * @inheritDoc
+   */
+  renderButtonLabel(h, editorContext, label) {
+    const isDisabled = this.isDisabled(editorContext);
+    return h('vega-font', {
+      variant: 'font-field-label-sm',
+      color: isDisabled ? 'text-disabled' : 'text-primary',
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (el) => (this.labelRef = el),
+    }, label);
+  }
+  /* istanbul ignore next */
+  /**
+   * Handles the button click event. No need this method for language button.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  handleButtonClick(editorContext) {
+    methodPlaceholder(editorContext);
+  }
+  /**
+   * Gets the label of a language by its key.
+   *
+   * @param {string} key The language key to look up.
+   * @returns {string} The label of the language, or the key if not found.
+   */
+  getLanguageLabelByKey(key) {
+    const language = this.languageList.find((item) => item.key === key);
+    return language.label;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/insert-token-node-action.js

@@ -0,0 +1,16 @@
+import { ModifyContentAction } from '../../dto/actions/modify-content-action.abstract';
+/**
+ * Action to insert a token node at a specified range in the Rich Text Editor.
+ *
+ * @example block.apply(new InsertTokenNodeAction(rteRange, tokenNode));
+ */
+export class InsertTokenNodeAction extends ModifyContentAction {
+  constructor(rteRange, token) {
+    super();
+    this.type = 'INSERT_TOKEN_NODE';
+    this.rteRange = null;
+    this.actionHandleResult = false;
+    this.rteRange = rteRange;
+    this.token = token;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/insert-token-node-strategy.js

@@ -0,0 +1,20 @@
+import { generateUUID } from '../../../../utils/misc';
+import { ActionHandleStrategy } from '../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { InsertNodeToNearestRootAction } from '../../dto/actions/insert-node-to-nearest-root-action';
+import { RTETokenNode } from './token-node';
+/**
+ * Strategy to handle the insertion of a token node into the nearest root block.
+ */
+export class InsertTokenNodeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, block) {
+    const { rteRange, token } = action;
+    if (rteRange && rteRange.startNode) {
+      const tokenNode = new RTETokenNode(generateUUID(), token.key, token.label, block);
+      block.apply(new InsertNodeToNearestRootAction(rteRange, tokenNode));
+      action.actionHandleResult = true;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/span-to-token-node-strategy.js

@@ -0,0 +1,60 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { generateUUID } from '../../../../utils/misc';
+import { ElementToDTOStrategy } from '../../slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
+/**
+ * Strategy to convert <span class="token" token-key="...">...</span> to a token node
+ */
+export class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    if (element.nodeName === 'SPAN' &&
+      element.classList.contains('token') &&
+      element.hasAttribute('token-key')) {
+      return 1;
+    }
+    return 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    const tokenKey = element.getAttribute('token-key');
+    const text = element.textContent;
+    const annotations = this.generateTextStyleAnnotations(element);
+    // Exclude customAttribute and customClass from annotations
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { customAttribute, customClass } = annotations, restAnnotations = __rest(annotations, ["customAttribute", "customClass"]);
+    return {
+      id: generateUUID(),
+      type: 'token',
+      token: tokenKey,
+      text,
+      annotations: Object.assign({}, restAnnotations),
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}