@globalpayments/vega 2.87.0 → 2.88.0

package/dist/collection/components/vega-rich-text-editor/extensions/special-characters/vega-rich-text-special-characters-panel/slimmers/renderers/special-characters-panel-renderer.js

@@ -0,0 +1,210 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+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 { ALL_CATEGORY_KEY, GRID_COLUMNS } from '../../constants';
+/**
+ * Renderer slimmer for the Special Characters panel.
+ */
+export class SpecialCharactersPanelRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.gridRef = null;
+    this.selectRef = null;
+    /**
+     * Suppresses the default mousedown behavior inside the panel so that the
+     * RTE keeps focus and its current selection range stays intact — without
+     * it, clicking a character would blur the editor and the insertion point
+     * would be lost before `insertCharacter` runs.
+     */
+    this.preventLostFocus = (event) => {
+      event.preventDefault();
+    };
+    this.handleCellMouseEnter = (event) => {
+      var _a;
+      const index = Number(event.currentTarget.dataset.index);
+      this.hoveredItem = (_a = this.getActiveCharacters()[index]) !== null && _a !== void 0 ? _a : null;
+    };
+    this.handleCellMouseLeave = () => {
+      this.hoveredItem = null;
+    };
+    this.handleCellFocus = (event) => {
+      const index = Number(event.currentTarget.dataset.index);
+      if (Number.isFinite(index)) {
+        // Updates both roving-tabindex anchor and footer preview in one write.
+        this.focusedCellIndex = index;
+      }
+    };
+    this.handleCellClick = (event) => {
+      const index = Number(event.currentTarget.dataset.index);
+      const item = this.getActiveCharacters()[index];
+      if (item) {
+        this.focusedCellIndex = index;
+        this.clickEventEmitter.emit(item.character);
+      }
+    };
+  }
+  /**
+   * Resets the panel to its initial state and moves focus to the category select.
+   * Called via {@link VegaRichTextSpecialCharactersPanel.resetPanel} whenever the popover opens.
+   */
+  resetPanel() {
+    this.activeCategoryKey = ALL_CATEGORY_KEY;
+    this.hoveredItem = null;
+    this.focusedCellIndex = null;
+    this.focusSelect();
+  }
+  /**
+   * Returns the rendered grid container element (or null if not yet
+   * mounted). Used by the keyboard controller to scope its listeners
+   * to the grid only.
+   */
+  getGridRef() {
+    return this.gridRef;
+  }
+  /**
+   * Returns the number of cells currently rendered in the grid (i.e.
+   * the character count of the active category view).
+   */
+  getCellCount() {
+    return this.getActiveCharacters().length;
+  }
+  getActiveCellIndex() {
+    var _a;
+    return (_a = this.focusedCellIndex) !== null && _a !== void 0 ? _a : 0;
+  }
+  /**
+   * Updates the roving-tabindex pointer and focuses the targeted cell.
+   * No-ops when the index is out of range.
+   */
+  focusCellByIndex(index) {
+    this.focusedCellIndex = index;
+    if (this.gridRef) {
+      const cell = this.gridRef.querySelector(`[data-index="${index}"]`);
+      if (cell) {
+        cell.focus();
+      }
+    }
+  }
+  render() {
+    return (h("div", { class: "panel", role: "presentation", onMouseDown: this.preventLostFocus },
+      this.renderHeader(),
+      h("vega-divider", { direction: "horizontal" }),
+      h("div", { class: "panel__body" },
+        this.renderCategorySelect(),
+        this.renderCharacterGrid()),
+      h("vega-divider", { direction: "horizontal" }),
+      this.renderFooter()));
+  }
+  /**
+   * Moves focus to the category select trigger so the user can immediately
+   * change the category or Tab into the grid. The select is a custom element
+   * whose trigger button lives in its shadow root.
+   */
+  focusSelect() {
+    if (this.selectRef && this.selectRef.shadowRoot) {
+      const trigger = this.selectRef.shadowRoot.querySelector('[tabindex="0"], button');
+      if (trigger) {
+        trigger.focus();
+      }
+    }
+  }
+  renderHeader() {
+    return (h("div", { class: "panel__header" },
+      h("vega-font", null, this.translationSlimmer.t('Special Characters'))));
+  }
+  renderCategorySelect() {
+    const allOption = {
+      id: ALL_CATEGORY_KEY,
+      displayName: this.translationSlimmer.t('All'),
+    };
+    return (h("vega-input-select", { class: "panel__select", size: "small", source: [
+        allOption,
+        ...this.categories.map((cat) => ({
+          id: cat.key,
+          displayName: this.translationSlimmer.t(cat.label),
+        })),
+      ], value: this.activeCategoryKey, ref: (ref) => {
+        if (ref) {
+          this.selectRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (payload) => {
+            this.activeCategoryKey = payload.detail;
+            this.hoveredItem = null;
+            this.focusedCellIndex = null;
+          });
+        }
+      } }));
+  }
+  renderCharacterGrid() {
+    var _a;
+    const characters = this.getActiveCharacters();
+    const activeIndex = (_a = this.focusedCellIndex) !== null && _a !== void 0 ? _a : 0;
+    return (h("div", { class: "panel__grid", role: "grid", "aria-label": this.translationSlimmer.t('Special Characters'), style: { '--vega-special-characters-grid-columns': String(GRID_COLUMNS) }, ref: (ref) => {
+        this.gridRef = ref;
+      } }, characters.map((item, flatIndex) => {
+      const isActive = flatIndex === activeIndex;
+      const title = this.translationSlimmer.t(item.title);
+      return (h("button", { key: item.character, class: "panel__cell", role: "gridcell", "aria-label": title, title: title, "data-index": flatIndex, tabindex: isActive ? 0 : -1, onMouseEnter: this.handleCellMouseEnter, onMouseLeave: this.handleCellMouseLeave, onFocus: this.handleCellFocus, onClick: this.handleCellClick }, item.character));
+    })));
+  }
+  renderFooter() {
+    var _a;
+    // Hover wins over focus when both exist (matches mouse-driven preview
+    // expectations), otherwise fall back to the focused cell so keyboard
+    // users still see the character name + code point.
+    const focusedItem = this.focusedCellIndex !== null ? this.getActiveCharacters()[this.focusedCellIndex] : null;
+    const previewItem = (_a = this.hoveredItem) !== null && _a !== void 0 ? _a : focusedItem;
+    const codePoint = previewItem ? this.getCodePoint(previewItem.character) : '';
+    const previewTitle = previewItem
+      ? this.translationSlimmer.t(previewItem.title)
+      : '';
+    return (h("div", { class: "panel__footer" },
+      h("vega-font", { class: "panel__footer-name", variant: "font-footnote1-long", color: "text-secondary" }, previewTitle),
+      h("vega-font", { class: "panel__footer-code", variant: "font-footnote1-long", color: "text-secondary" }, codePoint)));
+  }
+  /**
+   * Formats a character's Unicode code point as `U+XXXX`,
+   * padded to at least 4 hex digits (e.g. `U+00E0`, `U+1F600`).
+   */
+  getCodePoint(character) {
+    const codePoint = character.codePointAt(0);
+    if (codePoint === undefined) {
+      return '';
+    }
+    return `U+${codePoint.toString(16).toUpperCase().padStart(4, '0')}`;
+  }
+  getActiveCharacters() {
+    if (this.activeCategoryKey === ALL_CATEGORY_KEY) {
+      return this.categories.flatMap((cat) => cat.characters);
+    }
+    const category = this.categories.find((cat) => cat.key === this.activeCategoryKey);
+    return category ? category.characters : [];
+  }
+}
+__decorate([
+  MapToComponentField()
+], SpecialCharactersPanelRenderer.prototype, "categories", void 0);
+__decorate([
+  MapToComponentField()
+], SpecialCharactersPanelRenderer.prototype, "clickEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], SpecialCharactersPanelRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], SpecialCharactersPanelRenderer.prototype, "activeCategoryKey", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], SpecialCharactersPanelRenderer.prototype, "hoveredItem", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], SpecialCharactersPanelRenderer.prototype, "focusedCellIndex", void 0);
+__decorate([
+  MapToComponentMethod('resetPanel')
+], SpecialCharactersPanelRenderer.prototype, "resetPanel", null);

package/dist/collection/components/vega-rich-text-editor/extensions/special-characters/vega-rich-text-special-characters-panel/vega-rich-text-special-characters-panel.css

@@ -0,0 +1,66 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host .panel {
+  box-sizing: border-box;
+  width: 320px;
+}
+:host .panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 12px;
+}
+:host .panel__body {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+:host .panel__select {
+  margin-bottom: 8px;
+}
+:host .panel__grid {
+  display: grid;
+  gap: 2px;
+  overflow-y: auto;
+  grid-template-columns: repeat(var(--vega-special-characters-grid-columns), 1fr);
+  max-height: 240px;
+}
+:host .panel__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  border-radius: 4px;
+  cursor: pointer;
+  border: none;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  font-family: "Inter";
+  font-size: 16px;
+  line-height: 1;
+}
+:host .panel__cell:hover {
+  background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+}
+:host .panel__cell:active {
+  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
+  background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
+}
+:host .panel__cell:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: -2px;
+}
+:host .panel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 8px;
+  min-height: 20px;
+}
+:host .panel__footer-name {
+  text-transform: uppercase;
+}

package/dist/collection/components/vega-rich-text-editor/extensions/special-characters/vega-rich-text-special-characters-panel/vega-rich-text-special-characters-panel.js

@@ -0,0 +1,174 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Element, Event, h, Host, State, Prop, Method } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../../../../utils/component';
+import { InjectVegaSlimmer, InjectVegaGlobalSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../../../helpers/slimmers/component-usage-runtime-metrics';
+import { createEventEmitSlimmer, } from '../../../../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { SpecialCharactersPanelRenderer } from './slimmers/renderers/special-characters-panel-renderer';
+import { SpecialCharactersPanelKeyboardController } from './slimmers/controllers/special-characters-panel-keyboard-controller';
+import { ALL_CATEGORY_KEY } from './constants';
+import { TranslationSlimmer } from '../../../../../helpers/slimmers/translation';
+/**
+ * Internal panel component for the Special Characters extension.
+ * Renders a category select, character grid, and info footer.
+ *
+ * @vegaVersion 2.88.0
+ */
+export class VegaRichTextSpecialCharactersPanel {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.translationSlimmer = new TranslationSlimmer();
+    this.clickEventEmitter = createEventEmitSlimmer(VegaRichTextSpecialCharactersPanel, VegaClick);
+    this.renderer = new SpecialCharactersPanelRenderer();
+    this.keyboardController = new SpecialCharactersPanelKeyboardController();
+    this.activeCategoryKey = ALL_CATEGORY_KEY;
+    this.hoveredItem = null;
+    /**
+     * Index of the grid cell that currently has DOM focus (or null when no cell
+     * has been focused yet). Drives both the roving-tabindex anchor and the
+     * footer character preview during keyboard navigation.
+     */
+    this.focusedCellIndex = null;
+    /**
+     * The special character categories to display.
+     *
+     * @vegaVersion 2.88.0
+     */
+    this.categories = [];
+  }
+  /**
+   * Resets the panel to its initial state (all categories, no hovered item)
+   * and moves focus to the category select. Called whenever the popover opens.
+   *
+   * @vegaVersion 2.88.0
+   */
+  async resetPanel() {
+    methodPlaceholder();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  static get is() { return "vega-rich-text-special-characters-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-rich-text-special-characters-panel.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-rich-text-special-characters-panel.css"]
+  }; }
+  static get properties() { return {
+    "categories": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaRTESpecialCharacterCategory[]",
+        "resolved": "VegaRTESpecialCharacterCategory[]",
+        "references": {
+          "VegaRTESpecialCharacterCategory": {
+            "location": "import",
+            "path": "../types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "The special character categories to display."
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "activeCategoryKey": {},
+    "hoveredItem": {},
+    "focusedCellIndex": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaClick",
+      "name": "vegaClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "Emitted when a character cell is clicked. The payload is the Unicode character string."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "click",
+      "name": "click",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "Emitted when a character cell is clicked. The payload is the Unicode character string."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "resetPanel": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Resets the panel to its initial state (all categories, no hovered item)\nand moves focus to the category select. Called whenever the popover opens.",
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextSpecialCharactersPanel.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextSpecialCharactersPanel.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextSpecialCharactersPanel.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextSpecialCharactersPanel.prototype, "clickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextSpecialCharactersPanel.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextSpecialCharactersPanel.prototype, "keyboardController", void 0);

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotation-handler/table-annotation-handler.js

@@ -8,7 +8,7 @@ export class TableAnnotationHandler extends TableAnnotationHandlerBase {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETableBlock';
+    return targetDto.dtoName === 'RTETableBlock';
   }
   /**
    * Handle annotation extraction from table element.

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotation-handler/table-cell-annotation-handler.js

@@ -8,7 +8,7 @@ export class TableCellAnnotationHandler extends TableAnnotationHandlerBase {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETableCellBlock';
+    return targetDto.dtoName === 'RTETableCellBlock';
   }
   /**
    * Handle annotation extraction from table cell element.

package/dist/collection/components/vega-rich-text-editor/extensions/table/annotation-handler/table-head-cell-annotation-handler.js

@@ -9,6 +9,6 @@ export class TableHeadCellAnnotationHandler extends TableCellAnnotationHandler {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETableHeadCellBlock';
+    return targetDto.dtoName === 'RTETableHeadCellBlock';
   }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/table/dto/table-block.js

@@ -7,6 +7,7 @@ import { isNonNullable } from '../../../../../types/type-guard';
 export class RTETableBlock extends RTEBlock {
   constructor(id, options) {
     super(id);
+    this.dtoName = RTETableBlock.dtoName;
     this.type = 'table-block';
     this.children = [];
     const { autoMatchFormat } = options || { autoMatchFormat: true };
@@ -117,3 +118,4 @@ export class RTETableBlock extends RTEBlock {
     return isNonNullable(this.getCaption());
   }
 }
+RTETableBlock.dtoName = 'RTETableBlock';

package/dist/collection/components/vega-rich-text-editor/extensions/table/dto/table-body-block.js

@@ -5,6 +5,7 @@ import { RTEBlock } from '../../../dto/blocks/block.abstract';
 export class RTETableBodyBlock extends RTEBlock {
   constructor(id) {
     super(id);
+    this.dtoName = RTETableBodyBlock.dtoName;
     this.type = 'table-body';
     this.children = [];
   }
@@ -54,3 +55,4 @@ export class RTETableBodyBlock extends RTEBlock {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
   }
 }
+RTETableBodyBlock.dtoName = 'RTETableBodyBlock';

package/dist/collection/components/vega-rich-text-editor/extensions/table/dto/table-caption-block.js

@@ -22,6 +22,7 @@ import { RTETableCaptionAnnotation } from '../annotations/table-caption-annotati
 export class RTETableCaptionBlock extends RTEBlock {
   constructor(id, options) {
     super(id);
+    this.dtoName = RTETableCaptionBlock.dtoName;
     this.type = 'table-caption';
     const { autoMatchFormat } = options || { autoMatchFormat: true };
     if (autoMatchFormat) {
@@ -84,3 +85,4 @@ export class RTETableCaptionBlock extends RTEBlock {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_BEFORE, RTETableCaptionBlock.name, new InsertChildrenBeforeStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.PASTE_CONTENT, RTETableCaptionBlock.name, new PasteContentStrategy());
 })();
+RTETableCaptionBlock.dtoName = 'RTETableCaptionBlock';

package/dist/collection/components/vega-rich-text-editor/extensions/table/dto/table-cell-block.js

@@ -7,6 +7,7 @@ import { RTETableExtensionAnnotationTypeEnum } from '../annotations/table-annota
 export class RTETableCellBlock extends RTEBlock {
   constructor(id, options) {
     super(id);
+    this.dtoName = RTETableCellBlock.dtoName;
     this.type = 'table-cell';
     this.children = [];
     const { autoMatchFormat } = options || { autoMatchFormat: true };
@@ -95,3 +96,4 @@ export class RTETableCellBlock extends RTEBlock {
     }
   }
 }
+RTETableCellBlock.dtoName = 'RTETableCellBlock';

package/dist/collection/components/vega-rich-text-editor/extensions/table/dto/table-head-block.js

@@ -5,6 +5,7 @@ import { RTEBlock } from '../../../dto/blocks/block.abstract';
 export class RTETableHeadBlock extends RTEBlock {
   constructor(id) {
     super(id);
+    this.dtoName = RTETableHeadBlock.dtoName;
     this.type = 'table-head';
     this.children = [];
   }
@@ -58,3 +59,4 @@ export class RTETableHeadBlock extends RTEBlock {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
   }
 }
+RTETableHeadBlock.dtoName = 'RTETableHeadBlock';

package/dist/collection/components/vega-rich-text-editor/extensions/table/dto/table-head-cell-block.js

@@ -7,6 +7,7 @@ import { RTETableHeadCellAnnotation } from '../annotations/table-head-cell-annot
 export class RTETableHeadCellBlock extends RTETableCellBlock {
   constructor(id, options) {
     super(id, options);
+    this.dtoName = RTETableHeadCellBlock.dtoName;
     this.type = 'table-head-cell';
     const { autoMatchFormat } = options || { autoMatchFormat: true };
     if (autoMatchFormat) {
@@ -51,3 +52,4 @@ export class RTETableHeadCellBlock extends RTETableCellBlock {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
   }
 }
+RTETableHeadCellBlock.dtoName = 'RTETableHeadCellBlock';

package/dist/collection/components/vega-rich-text-editor/extensions/table/dto/table-row-block.js

@@ -5,6 +5,7 @@ import { RTEBlock } from '../../../dto/blocks/block.abstract';
 export class RTETableRowBlock extends RTEBlock {
   constructor(id) {
     super(id);
+    this.dtoName = RTETableRowBlock.dtoName;
     this.type = 'table-row';
     this.children = [];
   }
@@ -58,3 +59,4 @@ export class RTETableRowBlock extends RTEBlock {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
   }
 }
+RTETableRowBlock.dtoName = 'RTETableRowBlock';

package/dist/collection/components/vega-rich-text-editor/extensions/table/filter-styles-strategies/table-block/table-block-filter-styles-strategy.js

@@ -13,7 +13,7 @@ export class TableBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return this.isTableBlock(blockOrNodeInstance.constructor.name);
+    return this.isTableBlock(blockOrNodeInstance.dtoName);
   }
   /**
    * @inheritDoc

package/dist/collection/components/vega-rich-text-editor/extensions/table/filter-styles-strategies/table-caption/table-caption-filter-styles-strategy.js

@@ -13,7 +13,7 @@ export class TableCaptionFilterStylesStrategy extends RTEFilterStylesStrategy {
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return this.isTableCaption(blockOrNodeInstance.constructor.name);
+    return this.isTableCaption(blockOrNodeInstance.dtoName);
   }
   /**
    * @inheritDoc

package/dist/collection/components/vega-rich-text-editor/extensions/table/filter-styles-strategies/table-cell/table-cell-filter-styles-strategy.js

@@ -17,7 +17,7 @@ export class TableCellFilterStylesStrategy extends RTEFilterStylesStrategy {
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return this.isTableCell(blockOrNodeInstance.constructor.name);
+    return this.isTableCell(blockOrNodeInstance.dtoName);
   }
   /**
    * The table cell border color can be represented in different formats (e.g., hex, rgb), so we need to ensure that we can handle both cases.

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

@@ -175,8 +175,8 @@ export class VegaRTETableExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandlerInterceptor(RTETableCellBlock.name, ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
   VegaRTEExtension.registerActionHandlerInterceptor(RTETableHeadCellBlock.name, ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
   VegaRTEExtension.registerActionHandlerInterceptor(RTETableBlock.name, ModifyContentActionType.INSERT_NEW_PARAGRAPH, new PreventTableInsertParagraphInterceptor());
-  VegaRTEExtension.registerFilterStylesStrategy(RTETableBlock.name, new TableBlockFilterStylesStrategy());
-  VegaRTEExtension.registerFilterStylesStrategy(RTETableCaptionBlock.name, new TableCaptionFilterStylesStrategy());
-  VegaRTEExtension.registerFilterStylesStrategy(RTETableCellBlock.name, new TableCellFilterStylesStrategy());
-  VegaRTEExtension.registerFilterStylesStrategy(RTETableHeadCellBlock.name, new TableCellFilterStylesStrategy('th'));
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableBlock.dtoName, new TableBlockFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableCaptionBlock.dtoName, new TableCaptionFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableCellBlock.dtoName, new TableCellFilterStylesStrategy());
+  VegaRTEExtension.registerFilterStylesStrategy(RTETableHeadCellBlock.dtoName, new TableCellFilterStylesStrategy('th'));
 })();

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

@@ -14,12 +14,15 @@ export class VegaRTETokenExtension extends VegaRTEExtension {
   constructor(tokenList = []) {
     super();
     this.tokenRenderer = new RTETokenNodeRenderer();
+    this.tokenList = tokenList;
     this.registerNode('token', RTETokenNode);
     this.registerRenderer('token', this.tokenRenderer);
-    this.tokenToolbarButtonRenderer = new RTETokenToolbarButtonRenderer(tokenList);
-    this.registerToolbarButtonRenderer('token', this.tokenToolbarButtonRenderer);
     this.registerElementToNodeDTOClassStrategy(spanToTokenNodeStrategy);
   }
+  /** @inheritDoc */
+  prepareBeforeLoad(host) {
+    this.registerToolbarButtonRenderer('token', new RTETokenToolbarButtonRenderer(this.tokenList), host);
+  }
 }
 (() => {
   const insertTokenNodeStrategy = new InsertTokenNodeStrategy();

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

@@ -5,6 +5,7 @@ import { RTETextNode } from '../../dto/nodes/text-node';
 export class RTETokenNode extends RTETextNode {
   constructor(id, token, text, parentBlock, annotations) {
     super(id, text, parentBlock, annotations);
+    this.dtoName = RTETokenNode.dtoName;
     this.type = 'token';
     this.token = token;
     this.text = text;
@@ -54,3 +55,4 @@ export class RTETokenNode extends RTETextNode {
     return `<span class="token" contenteditable="false" template-token-key="${this.token}" token-key="${this.token}"${super.generateAttributeString()}>${this.text}</span>`;
   }
 }
+RTETokenNode.dtoName = 'RTETokenNode';

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

@@ -0,0 +1 @@
+export {};