@globalpayments/vega 2.61.0 → 2.63.0

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;
+  }
+}

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

@@ -0,0 +1,38 @@
+import { RTEListItemBlock } from '../../dto/blocks/list-item-block';
+import { RTETextBlock } from '../../public-api';
+import { VegaRTEExtension } from '../extension.abstract';
+import { InsertTokenNodeStrategy } from './insert-token-node-strategy';
+import { SpanToTokenNodeStrategy } from './span-to-token-node-strategy';
+import { RTETokenNode } from './token-node';
+import { RTETokenNodeRenderer } from './token-node-renderer';
+import { RTETokenToolbarButtonRenderer } from './token-toolbar-button-renderer';
+const spanToTokenNodeStrategy = new SpanToTokenNodeStrategy();
+/**
+ * Vega Rich Text Editor Token Extension
+ */
+export class VegaRTETokenExtension extends VegaRTEExtension {
+  constructor(tokenList = []) {
+    super();
+    this.tokenRenderer = new RTETokenNodeRenderer();
+    this.registerNode('token', RTETokenNode);
+    this.registerRenderer('token', this.tokenRenderer);
+    this.tokenToolbarButtonRenderer = new RTETokenToolbarButtonRenderer(tokenList);
+    this.registerToolbarButtonRenderer('token', this.tokenToolbarButtonRenderer);
+    this.registerElementToNodeDTOClassStrategy(spanToTokenNodeStrategy);
+  }
+  /**
+   * @inheritDoc
+   */
+  initialExtension(context) {
+    super.initialExtension(context);
+    this.tokenRenderer.injectExtensionContext(context);
+    if (this.tokenToolbarButtonRenderer) {
+      this.tokenToolbarButtonRenderer.injectExtensionContext(context);
+    }
+  }
+}
+(() => {
+  const insertTokenNodeStrategy = new InsertTokenNodeStrategy();
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEListItemBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
+})();

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

@@ -0,0 +1,67 @@
+import { UpdateCursorPositionAction } from '../../public-api';
+import { VegaRTEExtensionRenderer } from '../base-extension-renderer';
+/**
+ * Token node renderer for the rich text editor.
+ */
+export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
+  constructor() {
+    super(...arguments);
+    this.extensionContext = null;
+  }
+  /**
+   * Renders the token node as a DOM element.
+   *
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @param {RTETokenNode} node - The token node to render.
+   * @param {RTERenderContext} editorContent - The editor content context.
+   * @returns {VegaRTERenderResult} - The rendered DOM element.
+   */
+  doRender(createElement, node, editorContent) {
+    const { id, token } = node;
+    return createElement('span', {
+      'key': id,
+      'template-token-key': token,
+      'token-key': token,
+      'contenteditable': 'false',
+      'style': this.getStyle(node),
+      'class': `token ${node.getClasses()}`,
+      'ref': this.useRef(node),
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      'onClick': (event) => {
+        event.preventDefault();
+        if (editorContent && editorContent.editable !== false) {
+          this.handleTokenElementClick(event, node);
+        }
+      },
+    }, node.text);
+  }
+  /**
+   * Sets the RTE extension context.
+   *
+   * @param {RTEExtensionContext} context - The context of the RTE extension.
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Get the style for the token element.
+   *
+   * @param {RTETokenNode} node - The token node.
+   * @returns {Record<string, string>} The style object for the token element.
+   */
+  getStyle(node) {
+    return Object.assign(Object.assign({}, node.getStyles()), { backgroundColor: 'var(--v-bg-status-info, #CDD1D3)', padding: '0 2px', margin: '0 1px' });
+  }
+  /**
+   * Handle the click event on the token element.
+   *
+   * @param {MouseEvent} event - The click event.
+   * @param {RTETokenNode} node - The token node that was clicked.
+   */
+  handleTokenElementClick(event, node) {
+    event.preventDefault();
+    if (this.extensionContext) {
+      this.extensionContext.host.value.apply(new UpdateCursorPositionAction(node, undefined, true));
+    }
+  }
+}