@globalpayments/vega 2.61.0 → 2.63.0

package/dist/types/components/vega-rich-text-editor/extensions/base-toolbar-button-renderer.d.ts

@@ -1,13 +1,106 @@
-import { VegaRTECreateElementFunction, VegaRTEExtensionContext, VegaRTERenderResult } from '../interface';
+import { Nullable } from '../../../types/general';
+import { VegaRTECreateElementFunction, VegaRTEToolbarRenderContext, VegaRTERenderResult, RTEToolbarDropdownProps, RTEDropdownListItem, RTEToolbarButtonProps } from '../interface';
 /**
  * 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 declare abstract 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: VegaRTEToolbarRenderContext): boolean;
   /**
    * Renders the toolbar button.
    *
    * @param createElement Function to create elements in the rich text editor.
    * @returns {VegaRTERenderResult} Toolbar button.
    */
-  abstract render(createElement: VegaRTECreateElementFunction, editorContext?: VegaRTEExtensionContext): VegaRTERenderResult;
+  abstract render(createElement: VegaRTECreateElementFunction, editorContext?: VegaRTEToolbarRenderContext): VegaRTERenderResult;
+  /**
+   * 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.
+   */
+  protected renderDropdown(h: VegaRTECreateElementFunction, editorContext: VegaRTEToolbarRenderContext, dropdownProps: RTEToolbarDropdownProps, children: VegaRTERenderResult[]): VegaRTERenderResult;
+  /**
+   * 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.
+   */
+  protected renderDropdownListTemplate(h: VegaRTECreateElementFunction, itemList: RTEDropdownListItem[]): VegaRTERenderResult;
+  /**
+   * 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.
+   */
+  protected renderDropdownItem(h: VegaRTECreateElementFunction, item: RTEDropdownListItem): VegaRTERenderResult;
+  /**
+   * 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.
+   */
+  protected renderButton(h: VegaRTECreateElementFunction, editorContext: VegaRTEToolbarRenderContext, buttonProps: RTEToolbarButtonProps): VegaRTERenderResult;
+  /**
+   * 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.
+   */
+  protected renderButtonLabel(h: VegaRTECreateElementFunction, editorContext: VegaRTEToolbarRenderContext, label: Nullable<string>): Nullable<VegaRTERenderResult>;
+  /**
+   * 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.
+   */
+  protected isDisabled(editorContext: VegaRTEToolbarRenderContext): boolean;
+  /**
+   * 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.
+   */
+  protected isSelected(_editorContext: VegaRTEToolbarRenderContext): boolean;
+  /**
+   * 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.
+   */
+  protected preventDefault(e: MouseEvent): void;
+  /**
+   * Handles the button click event.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  protected abstract handleButtonClick(editorContext: VegaRTEToolbarRenderContext): void;
+  /**
+   * Handles the dropdown click event.
+   *
+   * @param {string} itemKey - The key of the clicked dropdown item.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  protected abstract handleDropdownClick(itemKey: string, editorContext?: VegaRTEToolbarRenderContext): void;
 }

package/dist/types/components/vega-rich-text-editor/extensions/extension.abstract.d.ts

@@ -0,0 +1,82 @@
+import { BaseRenderer } from '../../../helpers/rte-manager/dto-renderer-manager';
+import { ClassType } from '../../../types/class.type';
+import { RTEBlock } from '../dto/blocks/block.abstract';
+import { RTENode } from '../dto/nodes/node.abstract';
+import { VegaRTEToolbarButtonRenderer } from './base-toolbar-button-renderer';
+import { ElementToDTOStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
+import { Nullable } from '../../../types/general';
+import { RTEExtensionContext } from '../interface';
+import { ActionHandleStrategy } from '../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { ModifyContentAction } from '../public-api';
+/**
+ * Abstract class for Vega Rich Text Editor extensions.
+ */
+export declare abstract class VegaRTEExtension {
+  /**
+   * The context of the RTE extension, which may include references to the host editor and other relevant information.
+   */
+  protected extensionContext: Nullable<RTEExtensionContext>;
+  /**
+   * 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: string, actionType: string, strategy: ActionHandleStrategy<ModifyContentAction, RTENode | RTEBlock>): void;
+  /**
+   * Initializes the RTE extension with the provided context.
+   *
+   * @param {RTEExtensionContext} context - The context of the RTE extension.
+   */
+  initialExtension(context: RTEExtensionContext): void;
+  /**
+   * 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.
+   */
+  protected registerNode(type: string, DTOClass: ClassType<RTEBlock | RTENode>): void;
+  /**
+   * 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.
+   */
+  protected registerRenderer(type: string, renderer: BaseRenderer): void;
+  /**
+   * Register a toolbar button renderer for the extension.
+   *
+   * @param {string} type - The type of the toolbar button.
+   * @param {VegaRTEToolbarButtonRenderer} renderer - The renderer to register.
+   */
+  protected registerToolbarButtonRenderer(type: string, renderer: VegaRTEToolbarButtonRenderer): void;
+  /**
+   * 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.
+   */
+  protected registerBlockBasicStrategies(blockClassName: string): void;
+  /**
+   * Register an element to block DTO class strategy.
+   *
+   * @param {ElementToDTOStrategy} strategy - The strategy to register.
+   */
+  protected registerElementToBlockDTOClassStrategy(strategy: ElementToDTOStrategy): void;
+  /**
+   * Register an element to node DTO class strategy.
+   *
+   * @param {ElementToDTOStrategy} strategy - The strategy to register.
+   */
+  protected registerElementToNodeDTOClassStrategy(strategy: ElementToDTOStrategy): void;
+  /**
+   * Get the registered element to node DTO class strategies.
+   *
+   * @returns {ElementToDTOStrategy[]} - The registered element to node DTO class strategies.
+   */
+  protected getElementToNodeDTOClassStrategies(): ElementToDTOStrategy[];
+}

package/dist/types/components/vega-rich-text-editor/extensions/languages/language-extension.d.ts

@@ -0,0 +1,50 @@
+import { RTEDropdownListItem, RTEExtensionContext, RTELanguageExtensionState } from '../../interface';
+import { VegaRTEExtension } from '../extension.abstract';
+/**
+ * Language extension for Vega Rich Text Editor.
+ * This extension allows users to switch between different languages and maintain separate content for each language.
+ */
+export declare class VegaRTELanguageExtension extends VegaRTEExtension {
+  private languageToolbarButtonRenderer;
+  private languageState;
+  constructor(languageList: RTEDropdownListItem[], languagesState?: RTELanguageExtensionState);
+  /**
+   * Initializes the language extension.
+   * Applies the content for the selected language upon initialization.
+   *
+   * @param {RTEExtensionContext} context The extension context.
+   */
+  initialExtension(context: RTEExtensionContext): void;
+  /**
+   * 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: RTELanguageExtensionState): void;
+  /**
+   * Invoked to get the language extension state.
+   *
+   * @returns {RTELanguageExtensionState} The current language extension state.
+   */
+  getState(): RTELanguageExtensionState;
+  /**
+   * Listener for language change events from the toolbar button renderer.
+   *
+   * @param {string} selectedLanguage - The newly selected language.
+   */
+  private languageChangeCallBack;
+  /**
+   * Applies the content for the selected language.
+   *
+   * @param {string} selectedLanguage - The newly selected language.
+   * @param {RTELanguageExtensionState['contentMap']} contentMap - The content map for all languages.
+   */
+  private applyLanguageContent;
+  /**
+   * 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.
+   */
+  private getRTELatestValue;
+}

package/dist/types/components/vega-rich-text-editor/extensions/languages/language-toolbar-button-renderer.d.ts

@@ -0,0 +1,54 @@
+import { RTEDropdownListItem, VegaRTECreateElementFunction, VegaRTERenderResult, VegaRTEToolbarRenderContext } from '../../interface';
+import { VegaRTEToolbarButtonRenderer } from '../base-toolbar-button-renderer';
+export declare type LanguageSelectedCallback = (selectedLanguage: string) => void;
+/**
+ * Toolbar button renderer for language selection in Vega Rich Text Editor.
+ */
+export declare class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  private languageList;
+  private selectedLanguage;
+  private labelRef;
+  private languageChangeCallback;
+  constructor(languageList: RTEDropdownListItem[], languageChangeCallback: LanguageSelectedCallback, selectedLanguage: string);
+  /**
+   * Public method to set the selected language.
+   *
+   * @param {string} language The language key to set as selected.
+   */
+  setSelectedLanguage(language: string): void;
+  /**
+   * The source edit mode does not affect the language button visibility.
+   *
+   * @returns {boolean} True if the button is hidden, false otherwise.
+   */
+  isHidden(): boolean;
+  /**
+   * @inheritDoc
+   */
+  render(createElement: VegaRTECreateElementFunction, editorContext: VegaRTEToolbarRenderContext): VegaRTERenderResult;
+  /**
+   * Override to render the button label with custom behavior.
+   *
+   * @inheritDoc
+   */
+  protected renderButtonLabel(h: VegaRTECreateElementFunction, editorContext: VegaRTEToolbarRenderContext, label: string): VegaRTERenderResult;
+  /**
+   * Handles the button click event. No need this method for language button.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  protected handleButtonClick(editorContext: VegaRTEToolbarRenderContext): void;
+  /**
+   * Handles the language selection event.
+   *
+   * @param {string} itemKey - The key of the selected language item.
+   */
+  protected handleDropdownClick: (itemKey: string) => void;
+  /**
+   * 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.
+   */
+  private getLanguageLabelByKey;
+}

package/dist/types/components/vega-rich-text-editor/extensions/tokens/insert-token-node-action.d.ts

@@ -0,0 +1,16 @@
+import { Nullable } from '../../../../types/general';
+import { ModifyContentAction } from '../../dto/actions/modify-content-action.abstract';
+import { RTERange } from '../../dto/range';
+import { RTEDropdownListItem } from '../../interface';
+/**
+ * Action to insert a token node at a specified range in the Rich Text Editor.
+ *
+ * @example block.apply(new InsertTokenNodeAction(rteRange, tokenNode));
+ */
+export declare class InsertTokenNodeAction extends ModifyContentAction {
+  type: string;
+  token: RTEDropdownListItem;
+  rteRange: Nullable<RTERange>;
+  actionHandleResult: boolean;
+  constructor(rteRange: Nullable<RTERange>, token: RTEDropdownListItem);
+}

package/dist/types/components/vega-rich-text-editor/extensions/tokens/insert-token-node-strategy.d.ts

@@ -0,0 +1,12 @@
+import { ActionHandleStrategy } from '../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import type { RTETextBlock } from '../../dto/blocks/text-block';
+import { InsertTokenNodeAction } from './insert-token-node-action';
+/**
+ * Strategy to handle the insertion of a token node into the nearest root block.
+ */
+export declare class InsertTokenNodeStrategy extends ActionHandleStrategy<InsertTokenNodeAction, RTETextBlock> {
+  /**
+   * @inheritDoc
+   */
+  protected handleAction(action: InsertTokenNodeAction, block: RTETextBlock): void;
+}

package/dist/types/components/vega-rich-text-editor/extensions/tokens/span-to-token-node-strategy.d.ts

@@ -0,0 +1,24 @@
+import { Nullable } from '../../../../types/general';
+import { VegaRTECustomNode } from '../../interface';
+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 declare class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray: HTMLElement[], currentIndex: number): number;
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray: HTMLElement[]): Nullable<VegaRTECustomNode>;
+  /**
+   * @inheritDoc
+   */
+  appendChildBlocks(): void;
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren(): boolean;
+}

package/dist/types/components/vega-rich-text-editor/extensions/tokens/token-extension.d.ts

@@ -0,0 +1,14 @@
+import { RTEDropdownListItem, RTEExtensionContext } from '../../interface';
+import { VegaRTEExtension } from '../extension.abstract';
+/**
+ * Vega Rich Text Editor Token Extension
+ */
+export declare class VegaRTETokenExtension extends VegaRTEExtension {
+  private tokenRenderer;
+  private tokenToolbarButtonRenderer;
+  constructor(tokenList?: RTEDropdownListItem[]);
+  /**
+   * @inheritDoc
+   */
+  initialExtension(context: RTEExtensionContext): void;
+}

package/dist/types/components/vega-rich-text-editor/extensions/tokens/token-node-renderer.d.ts

@@ -0,0 +1,38 @@
+import { RTEExtensionContext, RTERenderContext, VegaRTECreateElementFunction, VegaRTERenderResult } from '../../interface';
+import { VegaRTEExtensionRenderer } from '../base-extension-renderer';
+import { RTETokenNode } from './token-node';
+/**
+ * Token node renderer for the rich text editor.
+ */
+export declare class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
+  private extensionContext;
+  /**
+   * 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: VegaRTECreateElementFunction, node: RTETokenNode, editorContent?: RTERenderContext): VegaRTERenderResult;
+  /**
+   * Sets the RTE extension context.
+   *
+   * @param {RTEExtensionContext} context - The context of the RTE extension.
+   */
+  injectExtensionContext(context: RTEExtensionContext): void;
+  /**
+   * Get the style for the token element.
+   *
+   * @param {RTETokenNode} node - The token node.
+   * @returns {Record<string, string>} The style object for the token element.
+   */
+  protected getStyle(node: RTETokenNode): Record<string, string>;
+  /**
+   * Handle the click event on the token element.
+   *
+   * @param {MouseEvent} event - The click event.
+   * @param {RTETokenNode} node - The token node that was clicked.
+   */
+  private handleTokenElementClick;
+}

package/dist/types/components/vega-rich-text-editor/extensions/tokens/token-node.d.ts

@@ -0,0 +1,39 @@
+import { RTETextBlock } from '../../dto/blocks/text-block';
+import { RTETextNode } from '../../dto/nodes/text-node';
+import { RTENodeAnnotationMapKey, RTENodeAnnotationMapValue, VegaRTETokenNode } from '../../interface';
+/**
+ * Token node for the Vega Rich Text Editor.
+ */
+export declare class RTETokenNode extends RTETextNode {
+  type: string;
+  token: string;
+  constructor(id: string, token: string, text: string, parentBlock: RTETextBlock, annotations?: Map<RTENodeAnnotationMapKey, RTENodeAnnotationMapValue>);
+  /**
+   * @inheritDoc
+   */
+  static from(value: VegaRTETokenNode, parent: RTETextBlock): RTETokenNode;
+  /**
+   * Converts the token node to a JSON representation.
+   *
+   * @returns {VegaRTETokenNode} - The JSON representation of the token node.
+   */
+  toJSON(): VegaRTETokenNode;
+  /**
+   * Determines if the token node is content editable.
+   *
+   * @returns {boolean} - Always returns false for token nodes.
+   */
+  isContentEditable(): boolean;
+  /**
+   * Clones the token node.
+   *
+   * @returns {RTETokenNode} - The cloned token node.
+   */
+  clone(): RTETokenNode;
+  /**
+   * Converts the token node to an HTML representation.
+   *
+   * @returns {string} - The HTML representation of the token node.
+   */
+  toHtml(): string;
+}

package/dist/types/components/vega-rich-text-editor/extensions/tokens/token-toolbar-button-renderer.d.ts

@@ -0,0 +1,47 @@
+import { RTEExtensionContext, VegaRTECreateElementFunction, VegaRTEToolbarRenderContext, VegaRTERenderResult, RTEDropdownListItem } from '../../interface';
+import { VegaRTEToolbarButtonRenderer } from '../base-toolbar-button-renderer';
+/**
+ * Renderer for the token toolbar button in the Vega Rich Text Editor.
+ */
+export declare class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  private tokenList;
+  private extensionContext;
+  constructor(tokenList: RTEDropdownListItem[]);
+  /**
+   * Sets the RTE extension context.
+   *
+   * @param {RTEExtensionContext} context - The context of the RTE extension.
+   */
+  injectExtensionContext(context: RTEExtensionContext): void;
+  /**
+   * Renders the token toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} createElement Function to create elements in the rich text editor.
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context for the editor.
+   * @returns {VegaRTERenderResult} Token toolbar button.
+   */
+  render(createElement: VegaRTECreateElementFunction, editorContext: VegaRTEToolbarRenderContext): VegaRTERenderResult;
+  /**
+   * Checks if the token toolbar button is disabled.
+   *
+   * @returns {boolean} True if the button is disabled, false otherwise.
+   */
+  protected isDisabled(): boolean;
+  /**
+   * Handles the button click event. No need this method for token button.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  protected handleButtonClick(editorContext: VegaRTEToolbarRenderContext): void;
+  /**
+   * Handles the token item click event from the dropdown.
+   *
+   * @param {string} itemKey - The key of the clicked token item.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  protected handleDropdownClick(itemKey: string, editorContext: VegaRTEToolbarRenderContext): void;
+  /**
+   * Refreshes the editor UI.
+   */
+  private flushEditorUI;
+}

package/dist/types/components/vega-rich-text-editor/interface.d.ts

@@ -18,6 +18,7 @@ import { RTEHtmlBlock } from './dto/blocks/html-block';
 import { InlineHtmlAnnotation } from './dto/annotations/inline-html-annotation';
 import type { RTERange } from './dto/range';
 import type { RTENode } from './dto/nodes/node.abstract';
+import type { VegaRTEContent } from './dto/content-state';
 
 export type ToolbarButtonConfig = {
 	icon: string;
@@ -302,7 +303,7 @@ export type VegaRTECreateElementFunction = <
 	children?: VegaRTERenderNode | VegaRTERenderNode[],
 ) => VegaRTERenderResult;
 
-export type VegaRTEExtensionContext = {
+export type VegaRTEToolbarRenderContext = {
 	host: HTMLVegaRichTextEditorElement;
 	rteRange: RTERange;
 	sourceEditMode: boolean;
@@ -320,3 +321,53 @@ export type FocusNodeRangeState = {
 	startNode: RTENode;
 	startOffset: number;
 };
+
+export type RTEExtensionContext = {
+	host: HTMLVegaRichTextEditorElement;
+	/**
+	 * Check if the editor is in source edit mode.
+	 *
+	 * @returns {boolean} - Whether the editor is in source edit mode.
+	 */
+	isSourceEditMode: () => boolean;
+	/**
+	 * Get the currently selected nodes in the editor.
+	 *
+	 * @returns {RTENode[]} - An array of currently selected RTENode objects.
+	 */
+	getSelectedNodes: () => RTENode[];
+	/**
+	 * Flush the editor value to the host. Auto focus the last node if autoFocusLastNode is true.
+	 * Sometimes, the editor will lose focus after change the editor value, so we need to focus the last node again.
+	 * Or apply the update cursor position action to focus the cursor to the specified position.
+	 *
+	 * @example flushValue(newValue, true);
+	 * @example flushValue(newValue); host.value.apply(new UpdateCursorPositionAction(node, offset));
+	 * @param {VegaRTEContent} value - The content value to flush.
+	 * @param {boolean} autoFocusLastNode - Whether to auto-focus the last node after flushing.
+	 */
+	flushValue: (value: VegaRTEContent, autoFocusLastNode?: boolean) => void;
+};
+
+export type RTEToolbarButtonProps = {
+	icon?: string;
+	label?: string;
+	showArrowIcon?: boolean;
+};
+
+export type RTEDropdownListItem = { key: string; label: string; icon?: string };
+
+export type RTEToolbarDropdownProps = {
+	source?: RTEDropdownListItem[];
+	selectType?: 'none' | 'single';
+	selectedSourceKey?: string;
+	maxHeight?: number;
+	alignment?: 'start' | 'center' | 'end';
+};
+
+export type RTELanguageContentMap = Record<string, VegaRTEContent | VegaRTEContentBlock[] | undefined>;
+
+export type RTELanguageExtensionState = {
+	selectedLanguage: string;
+	contentMap: RTELanguageContentMap;
+};

package/dist/types/components/vega-rich-text-editor/public-api.d.ts

@@ -0,0 +1,29 @@
+export { VegaRTEContent } from './dto/content-state';
+export { RTENode } from './dto/nodes/node.abstract';
+export { RTEDecoratorNode } from './dto/nodes/decorator-node';
+export { RTETextNode } from './dto/nodes/text-node';
+export { RTETextBlock } from './dto/blocks/text-block';
+export { RTEBlock } from './dto/blocks/block.abstract';
+export { VegaRTEExtension } from './extensions/extension.abstract';
+export { VegaRTEExtensionRenderer } from './extensions/base-extension-renderer';
+export { VegaRTEToolbarButtonRenderer } from './extensions/base-toolbar-button-renderer';
+export { RTETokenToolbarButtonRenderer } from './extensions/tokens/token-toolbar-button-renderer';
+export { RTETokenNode } from './extensions/tokens/token-node';
+export { RTETokenNodeRenderer } from './extensions/tokens/token-node-renderer';
+export { VegaRTETokenExtension } from './extensions/tokens/token-extension';
+export { RTELanguageToolbarButtonRenderer } from './extensions/languages/language-toolbar-button-renderer';
+export { VegaRTELanguageExtension } from './extensions/languages/language-extension';
+export { ModifyContentAction } from './dto/actions/modify-content-action.abstract';
+export { AppendChildrenAction } from './dto/actions/append-child-nodes-action';
+export { RemoveChildrenAction } from './dto/actions/remove-child-action';
+export { InsertChildrenAfterAction } from './dto/actions/insert-children-after-block';
+export { InsertChildrenBeforeAction } from './dto/actions/insert-children-before-block';
+export { InsertNodeToNearestRootAction } from './dto/actions/insert-node-to-nearest-root-action';
+export { UpdateCursorPositionAction } from './dto/actions/update-cursor-position-action';
+export { CustomAttributeAnnotation } from './dto/annotations/custom-attribute-annotation';
+export { CustomClassAnnotation } from './dto/annotations/custom-class-annotation';
+export { CustomStyleAnnotation } from './dto/annotations/custom-style-annotation';
+export { ActionHandleStrategy } from './dto/action-handle-strategies/action-handle-strategy.abstract';
+export { RTERange } from './dto/range';
+export { ElementToDTOStrategy } from './slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
+export { VegaRTEPresetToolbarItems } from './constants/constant';

package/dist/types/components/vega-rich-text-editor/slimmers/controllers/extension-controller.d.ts

@@ -0,0 +1,44 @@
+import { VegaSlimmer } from '../../../../vega-slimmer/vega-slimmer-core';
+import { VegaRichTextEditor } from '../../vega-rich-text-editor';
+import { VegaRTEExtension } from '../../extensions/extension.abstract';
+/**
+ * Inject the editor context to the extensions.
+ */
+export declare class RTEExtensionController extends VegaSlimmer {
+  protected extensions: VegaRichTextEditor['extensions'];
+  protected host: HTMLVegaRichTextEditorElement;
+  protected sourceView: VegaRichTextEditor['sourceView'];
+  protected valueController: VegaRichTextEditor['valueController'];
+  protected selectionController: VegaRichTextEditor['selectionController'];
+  /**
+   * Initializes the extension context for all registered extensions.
+   * This method is called when the component is connected and whenever the extensions property changes.
+   */
+  protected initialExtensionContext(): void;
+  /**
+   * Update extension context when extensions property changes.
+   *
+   * @param {VegaRTEExtension[]} newValue - New extensions array.
+   * @param {VegaRTEExtension[]} oldValue - Old extensions array.
+   */
+  protected handleExtensionsChange(newValue: VegaRTEExtension[], oldValue: VegaRTEExtension[]): void;
+  /**
+   * Flush the editor value to the host. Auto focus the last node if autoFocusLastNode is true.
+   *
+   * @param {VegaRTEContent} value - The content value to flush.
+   * @param {boolean} autoFocusLastNode - Whether to auto-focus the last node after flushing.
+   */
+  private flushValue;
+  /**
+   * Check if the editor is in source edit mode.
+   *
+   * @returns {boolean} - Whether the editor is in source edit mode.
+   */
+  private isSourceEditMode;
+  /**
+   * Get the currently selected nodes in the editor.
+   *
+   * @returns {RTENode[]} - An array of currently selected RTENode objects.
+   */
+  private getSelectedNodes;
+}

package/dist/types/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract.d.ts

@@ -1,10 +1,19 @@
 import { Nullable } from '../../../../../../types/general';
-import { RTEContentBlock, VegaRTECustomNode, VegaRTETextAnnotations, VegaRTETransformOptions } from '../../../../interface';
+import { RTEContentBlock, VegaRTEAnnotations, VegaRTECustomNode, VegaRTETextAnnotations, VegaRTETransformOptions } from '../../../../interface';
 import { RTEBlock } from '../../../../dto/blocks/block.abstract';
+import { HtmlElementToAnnotationGenerateOptions } from './annotation-handler/html-element-to-annotation-generator';
 /**
  * Abstract class to define strategies for processing HTML elements
  */
 export declare abstract class ElementToDTOStrategy {
+  /**
+   * Convert element style attributes to text annotations.
+   *
+   * @param {HTMLElement} element - Current html element.
+   * @param {HtmlElementToAnnotationGenerateOptions} options - Options for generating annotations.
+   * @returns {VegaRTEAnnotations} - Generated annotations.
+   */
+  protected generateTextStyleAnnotations(element: HTMLElement, options?: HtmlElementToAnnotationGenerateOptions): VegaRTEAnnotations;
   abstract canHandle(elementsArray: HTMLElement[], currentIndex: number, options: VegaRTETransformOptions): number;
   abstract handle(elementsArray: HTMLElement[], options?: VegaRTETransformOptions, parentTextAnnotations?: VegaRTETextAnnotations): Nullable<RTEBlock | VegaRTECustomNode>;
   abstract appendChildBlocks(currentBlock: RTEContentBlock, childBlocks: RTEContentBlock[]): void;