@heartlandone/vega 2.71.0 → 2.72.0-RTE-table-preview

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/column-button-slimmer.js

@@ -0,0 +1,86 @@
+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 { TableSettingButtonSlimmer } from './table-setting-button-slimmer.abstract';
+import { DomNodeSubjectObserverFactory } from '../../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
+import { ColumnOperationType } from '../../../setting-event-handlers/column-operation';
+import { TableSettingType } from '../../../setting-event-handlers/setting-event-handler.abstract';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { ToggleHeaderTableColumnStrategy } from '../../../action-handler-strategies/toggle-header-table-column-strategy';
+/**
+ * Slimmer dedicated to building the column button.
+ */
+export class ColumnButtonSlimmer extends TableSettingButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'rte-table-column',
+      title: 'Column',
+      showArrowIcon: true,
+    });
+    this.handleDropdownItemClick = (input) => {
+      this.emitClickEvent([TableSettingType.COLUMN, input.detail]);
+    };
+    this.handleDropdownVisibilityChange = ({ eventName }) => {
+      this.isColumnDropdownOpen = eventName.toLocaleLowerCase().indexOf('show') >= 0;
+    };
+  }
+  renderBtnWrapper(renderBtn) {
+    return (h("vega-dropdown", { isScreenPosition: true, minWidth: 210, trigger: "click", ref: (el) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownShow, this.handleDropdownVisibilityChange);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownHide, this.handleDropdownVisibilityChange);
+      } },
+      renderBtn(),
+      this.renderActionList()));
+  }
+  isSelected() {
+    return this.isColumnDropdownOpen;
+  }
+  isDisabled() {
+    return this.selectedCells.length === 0;
+  }
+  /* istanbul ignore next */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  handleClick() { }
+  /**
+   * Render the action list.
+   *
+   * @returns {HTMLElement} The action list element.
+   */
+  renderActionList() {
+    return (h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.HEADER_COLUMN },
+        h("vega-flex", { alignItems: "center", gap: "size-8" },
+          h("vega-toggle-switch", { checked: ToggleHeaderTableColumnStrategy.isFullHeaderSelection(this.selectedCells), size: "small" }),
+          "Header Column")),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.ADD_COLUMN_LEFT }, "Insert column left"),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.ADD_COLUMN_RIGHT }, "Insert column right"),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.DELETE_COLUMN, disabled: this.allColumnSelected(this.selectedCells) }, "Delete column"),
+      h("vega-dropdown-item", { itemKey: ColumnOperationType.SELECT_COLUMN }, "Select column")));
+  }
+  /**
+   * Determine if all columns are selected based on the selected cell range.
+   *
+   * @param selectedCellRange
+   * @returns {boolean} true if all columns are selected
+   */
+  allColumnSelected(selectedCellRange) {
+    if (selectedCellRange.length === 0) {
+      return false;
+    }
+    const firstTableRowCells = selectedCellRange[0].parent
+      .children;
+    const firstCellColumnIndex = firstTableRowCells.indexOf(selectedCellRange[0]);
+    const lastTableRowCells = selectedCellRange[selectedCellRange.length - 1].parent.children;
+    const lastCellColumnIndex = lastTableRowCells.indexOf(selectedCellRange[selectedCellRange.length - 1]);
+    return firstCellColumnIndex === 0 && lastCellColumnIndex === lastTableRowCells.length - 1;
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], ColumnButtonSlimmer.prototype, "isColumnDropdownOpen", void 0);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/row-button-slimmer.js

@@ -0,0 +1,101 @@
+import { h } from '@stencil/core';
+import { TableSettingButtonSlimmer } from './table-setting-button-slimmer.abstract';
+import { DomNodeSubjectObserverFactory } from '../../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaDropdownClick } from '../../../../../../../helpers/event-manager/event-id/vega-event-id';
+import { TableSettingType } from '../../../setting-event-handlers/setting-event-handler.abstract';
+import { RowOperationType } from '../../../setting-event-handlers/row-operation';
+import { RTETableHeadBlock } from '../../../dto/table-head-block';
+import { RTETableBlock } from '../../../dto/table-block';
+import { getParentBlockByType } from '../../../utils/utils';
+import { RTETableBodyBlock } from '../../../dto/table-body-block';
+/**
+ * Slimmer dedicated to building the row button.
+ */
+export class RowButtonSlimmer extends TableSettingButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'rte-table-row',
+      title: 'Row',
+      showArrowIcon: true,
+    });
+    this.handleDropdownItemClick = (input) => {
+      this.emitClickEvent([TableSettingType.ROW, input.detail]);
+    };
+  }
+  renderBtnWrapper(renderBtn) {
+    return (h("vega-dropdown", { isScreenPosition: true, minWidth: 180, trigger: "click", ref: (el) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, this.handleDropdownItemClick);
+      } },
+      renderBtn(),
+      this.renderActionList()));
+  }
+  isDisabled() {
+    return this.selectedCells.length === 0;
+  }
+  isSelected() {
+    return false;
+  }
+  /* istanbul ignore next */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  handleClick() { }
+  /**
+   * Render the action list.
+   *
+   * @returns {HTMLElement} The action list element.
+   */
+  renderActionList() {
+    const shouldChecked = this.areSelectedRowsHeaderRows();
+    return (h("div", { tabIndex: 0, role: "menu", slot: "items", onMouseDown: this.preventDefaultEvent, onKeyDown: this.preventDefaultEvent },
+      h("vega-dropdown-item", { itemKey: RowOperationType.HEADER_ROW },
+        h("vega-flex", { alignItems: "center", direction: "row", gap: "size-8" },
+          h("vega-toggle-switch", { key: shouldChecked.toString(), size: "small", checked: shouldChecked }),
+          h("span", null, "Header row"))),
+      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_ABOVE }, "Insert row above"),
+      h("vega-dropdown-item", { itemKey: RowOperationType.ADD_ROW_BELOW }, "Insert row below"),
+      h("vega-dropdown-item", { disabled: this.areAllRowsSelected(), itemKey: RowOperationType.DELETE_ROW }, "Delete row"),
+      h("vega-dropdown-item", { itemKey: RowOperationType.SELECT_ROW }, "Select row")));
+  }
+  /**
+   * Check if all selected rows are header rows.
+   *
+   * @returns {boolean} - true if all selected rows are header rows, false otherwise.
+   */
+  areSelectedRowsHeaderRows() {
+    const selectedRows = this.getSelectedRows();
+    return (selectedRows.length > 0 &&
+      selectedRows.every((row) => row.parent instanceof RTETableHeadBlock));
+  }
+  /**
+   * Check if all rows are selected. Should disable some row operations if true.
+   *
+   * @returns {boolean} - true if all rows are selected, false otherwise.
+   */
+  areAllRowsSelected() {
+    let flag = false;
+    const selectedRows = this.getSelectedRows();
+    if (selectedRows.length) {
+      const table = getParentBlockByType(selectedRows[0], RTETableBlock);
+      const allRows = table.children
+        .filter((block) => block instanceof RTETableHeadBlock || block instanceof RTETableBodyBlock)
+        .flatMap((item) => item.children);
+      flag = selectedRows.length === allRows.length;
+    }
+    return flag;
+  }
+  /**
+   * Get all selected rows from selected cells.
+   *
+   * @returns {RTETableRowBlock[]} - Array of selected table row blocks.
+   */
+  getSelectedRows() {
+    const selectedRows = new Set();
+    if (this.selectedCells && this.selectedCells.length) {
+      this.selectedCells.forEach((cell) => {
+        if (cell.parent) {
+          selectedRows.add(cell.parent);
+        }
+      });
+    }
+    return Array.from(selectedRows);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/table-properties-button-slimmer.js

@@ -0,0 +1,26 @@
+import { TableSettingButtonSlimmer } from './table-setting-button-slimmer.abstract';
+import { TableSettingType } from '../../../setting-event-handlers/setting-event-handler.abstract';
+/**
+ * Slimmer dedicated to building the column button.
+ */
+export class TablePropertiesButtonSlimmer extends TableSettingButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'rte-table-properties',
+      title: 'table properties',
+      showArrowIcon: false,
+    });
+  }
+  renderBtnWrapper(renderBtn) {
+    return renderBtn();
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    return false;
+  }
+  handleClick() {
+    this.emitClickEvent([TableSettingType.TABLE_PROPERTIES]);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/table-setting-button-slimmer.abstract.js

@@ -0,0 +1,75 @@
+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 { VegaInternalIconManager } from '../../../../../../../helpers/icon/internal-icon-manager';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+export class TableSettingButtonSlimmer extends VegaSlimmer {
+  constructor({ icon, title, showArrowIcon }) {
+    super();
+    this.renderBtn = () => {
+      const selected = this.isSelected();
+      const disable = this.isDisabled();
+      return (h("vega-tooltip", { key: `table-setting-${this.icon}`, text: this.getTitle(), placement: ['bottom', 'top'], trigger: "hover" },
+        h("button", { type: "button", class: {
+            'rte-table-setting-item': true,
+            'rte-table-setting-item-disabled': disable,
+            'rte-table-setting-item-selected': selected,
+          }, disabled: disable, 
+          /* eslint-disable-next-line react/jsx-no-bind */
+          onClick: (event) => {
+            if (disable) {
+              return;
+            }
+            this.handleClick(event);
+          }, onKeyDown: this.preventDefaultEvent, onMouseDown: this.preventDefaultEvent },
+          h("vega-flex", { alignItems: "center", justifyContent: "center" },
+            h("vega-icon", { icon: VegaInternalIconManager.getIconKey(this.icon), size: "size-16", color: this.getIconColor() }),
+            this.showArrowIcon ? (h("vega-icon", { size: "size-8", style: { marginLeft: '8px' }, icon: VegaInternalIconManager.getIconKey('chevron-down'), color: this.getIconColor() })) : null))));
+    };
+    this.icon = icon;
+    this.title = title;
+    this.showArrowIcon = showArrowIcon;
+  }
+  render() {
+    return typeof this.renderBtnWrapper === 'function'
+      ? this.renderBtnWrapper(this.renderBtn)
+      : this.renderBtn();
+  }
+  emitClickEvent(setting) {
+    this.vegaClick.emit(setting);
+  }
+  /**
+   * Prevent the default behavior to keep the cursor position.
+   *
+   * @param {Event} e - The event object.
+   */
+  preventDefaultEvent(e) {
+    e.preventDefault();
+  }
+  getTitle() {
+    return this.title;
+  }
+  getIconColor() {
+    const selected = this.isSelected();
+    const disable = this.isDisabled();
+    if (selected) {
+      return 'text-link-active';
+    }
+    else if (disable) {
+      return 'text-disabled';
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], TableSettingButtonSlimmer.prototype, "hasCaption", void 0);
+__decorate([
+  MapToComponentField()
+], TableSettingButtonSlimmer.prototype, "vegaClick", void 0);
+__decorate([
+  MapToComponentField()
+], TableSettingButtonSlimmer.prototype, "selectedCells", void 0);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/vega-rich-text-table-setting-renderer.js

@@ -0,0 +1,50 @@
+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, VegaSlimmer } from 'vega-slimmer/core';
+const buttonList = [
+  'rte-table-column',
+  'rte-table-row',
+  // 'rte-table-merge-cells',
+  // 'rte-table-properties',
+  // 'rte-table-cell-properties',
+  'rte-table-caption',
+];
+export class VegaRichTextTableSettingRenderer extends VegaSlimmer {
+  render() {
+    return (h("vega-flex", { gap: "size-8", class: "rte-table-setting-content" }, buttonList.map((item) => this.renderButton(item))));
+  }
+  renderButton(item) {
+    switch (item) {
+      case 'rte-table-column':
+        return this.columnButtonSlimmer.render();
+      case 'rte-table-row':
+        return this.rowButtonSlimmer.render();
+      case 'rte-table-properties':
+        return this.tablePropertiesButtonSlimmer.render();
+      case 'rte-table-cell-properties':
+        return this.cellPropertiesButtonSlimmer.render();
+      case 'rte-table-caption':
+        return this.captionButtonSlimmer.render();
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaRichTextTableSettingRenderer.prototype, "captionButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTableSettingRenderer.prototype, "columnButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTableSettingRenderer.prototype, "rowButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTableSettingRenderer.prototype, "tablePropertiesButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextTableSettingRenderer.prototype, "cellPropertiesButtonSlimmer", void 0);

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/vega-rich-text-table-setting.css

@@ -0,0 +1,20 @@
+/* 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 .rte-table-setting-item {
+  border: none;
+  background-color: #fcfcfc;
+  cursor: pointer;
+  padding: 4px;
+}
+:host .rte-table-setting-item:not(.rte-table-setting-item-disabled, .rte-table-setting-item-selected):hover {
+  background: #f0f0f0;
+}
+:host .rte-table-setting-item-disabled {
+  cursor: default;
+}
+:host .rte-table-setting-item-selected {
+  background: rgb(219, 236, 255);
+}

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

@@ -0,0 +1,166 @@
+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, h, Host, Event, State, Prop } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../../../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { TranslationSlimmer } from '../../../../../helpers/slimmers/translation';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaRichTextTableSettingRenderer } from './slimmers/renderers/vega-rich-text-table-setting-renderer';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { Icons } from './assets/icon';
+import chevronDown from '../../../../../global/icons/chevron-down';
+import { CaptionButtonSlimmer } from './slimmers/renderers/caption-button-slimmer';
+import { ColumnButtonSlimmer } from './slimmers/renderers/column-button-slimmer';
+import { TablePropertiesButtonSlimmer } from './slimmers/renderers/table-properties-button-slimmer';
+import { RowButtonSlimmer } from './slimmers/renderers/row-button-slimmer';
+import { CellPropertiesButtonSlimmer } from './slimmers/renderers/cell-properties-button-slimmer';
+/**
+ * Table setting popover renderer for managing table operations.
+ *
+ * @vegaVersion 2.71.0-RTE-table-preview
+ */
+export class VegaRichTextTableSetting {
+  constructor() {
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaRichTextTableSettingRenderer();
+    this.captionButtonSlimmer = new CaptionButtonSlimmer();
+    this.columnButtonSlimmer = new ColumnButtonSlimmer();
+    this.tablePropertiesButtonSlimmer = new TablePropertiesButtonSlimmer();
+    this.rowButtonSlimmer = new RowButtonSlimmer();
+    this.cellPropertiesButtonSlimmer = new CellPropertiesButtonSlimmer();
+    this.isColumnDropdownOpen = false;
+    /**
+     * Indicates whether the current table already has a caption.
+     *
+     * @vegaVersion 2.71.0-RTE-table-preview
+     */
+    this.hasCaption = false;
+    /**
+     * The selected cells in the table.
+     *
+     * @vegaVersion 2.71.0-RTE-table-preview
+     */
+    this.selectedCells = [];
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  static get is() { return "vega-rich-text-table-setting"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-rich-text-table-setting.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-rich-text-table-setting.css"]
+  }; }
+  static get properties() { return {
+    "hasCaption": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.71.0-RTE-table-preview"
+          }],
+        "text": "Indicates whether the current table already has a caption."
+      },
+      "attribute": "has-caption",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "selectedCells": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RTETableCellBlock[]",
+        "resolved": "RTETableCellBlock[]",
+        "references": {
+          "RTETableCellBlock": {
+            "location": "import",
+            "path": "../dto/table-cell-block"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.71.0-RTE-table-preview"
+          }],
+        "text": "The selected cells in the table."
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "isColumnDropdownOpen": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaClick",
+      "name": "vegaClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.71.0-RTE-table-preview"
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Array<string>",
+        "resolved": "string[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}
+(() => {
+  VegaInternalIconManager.register(Object.assign(Object.assign({}, Icons), { 'chevron-down': chevronDown }));
+})();
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextTableSetting.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "captionButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "columnButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "tablePropertiesButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "rowButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSetting.prototype, "cellPropertiesButtonSlimmer", void 0);

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

@@ -1,6 +1,7 @@
 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 { CustomAttributeAnnotation } from '../../dto/annotations/custom-attribute-annotation';
 import { RTETokenNode } from './token-node';
 /**
  * Strategy to handle the insertion of a token node into the nearest root block.
@@ -12,7 +13,10 @@ export class InsertTokenNodeStrategy extends ActionHandleStrategy {
   handleAction(action, block) {
     const { rteRange, token } = action;
     if (rteRange && rteRange.startNode) {
-      const tokenNode = new RTETokenNode(generateUUID(), token.key, token.label, block);
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { key, label, customAttrs = { wrapped: 'true' } } = token;
+      const tokenNode = new RTETokenNode(generateUUID(), key, label, block);
+      tokenNode.annotationMap.set('CUSTOM_ATTRIBUTE', new CustomAttributeAnnotation(customAttrs));
       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

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
   return t;
 };
 import { generateUUID } from '../../../../utils/misc';
+import { cleanObject } from '../../../../utils/object';
 import { RTETextNode } from '../../dto/nodes/text-node';
 import htmlElementToAnnotationGenerator from '../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
 import { ElementToDTOStrategy } from '../../slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
@@ -45,7 +46,7 @@ export class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
       type: 'token',
       token: tokenKey,
       text,
-      annotations: Object.assign({}, restAnnotations),
+      annotations: Object.assign(Object.assign({}, restAnnotations), { customAttribute: this.createCustomAttrs(customAttribute) }),
     };
   }
   /**
@@ -59,4 +60,14 @@ export class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
   shouldProceedToElementChildren() {
     return false;
   }
+  /**
+   * Creates custom attributes record from the given custom attribute object, clean some fixed attributes.
+   *
+   * @param {Record<string, string>} customAttribute - The custom attribute object
+   * @returns {Record<string, string>} The processed custom attributes
+   */
+  createCustomAttrs(customAttribute) {
+    const result = Object.assign(Object.assign({}, customAttribute), { 'contenteditable': null, 'template-token-key': null, 'token-key': null, 'wrapped': customAttribute.wrapped === 'false' ? 'false' : 'true' });
+    return cleanObject(result);
+  }
 }

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

@@ -18,22 +18,14 @@ export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
    */
   doRender(createElement, node, editorContent) {
     const { id, token } = node;
-    return createElement('span', {
-      'key': id,
-      'template-token-key': token,
-      'token-key': token,
-      'contenteditable': 'false',
-      'style': node.getStyles(),
-      'class': `token ${node.getClasses()}`,
-      'ref': this.useRef(node),
+    return createElement('span', Object.assign(Object.assign({ 'key': id, 'template-token-key': token, 'token-key': token, 'contenteditable': 'false', 'style': node.getStyles(), 'class': `token ${node.getClasses()}` }, this.additionalAttributes(node)), { '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);
+      } }), node.text);
   }
   /**
    * Sets the RTE extension context.
@@ -63,4 +55,18 @@ export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
       this.extensionContext.host.value.apply(new UpdateCursorPositionAction(node, undefined, true));
     }
   }
+  /**
+   * Additional attributes for the token node.
+   *
+   * @param {RTETokenNode} node - The token node.
+   * @returns {Record<string, string>} Additional attributes
+   */
+  additionalAttributes(node) {
+    const annotation = node.getCustomAttributesAnnotation();
+    let result = { wrapped: 'true' };
+    if (annotation) {
+      result = Object.assign(Object.assign({}, result), annotation.render());
+    }
+    return result;
+  }
 }

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

@@ -51,6 +51,6 @@ export class RTETokenNode extends RTETextNode {
    * @returns {string} - The HTML representation of the token node.
    */
   toHtml() {
-    return `<span class="token" contenteditable="false" template-token-key="${this.token}" token-key="${this.token}" ${super.generateAttributeString()}>${this.text}</span>`;
+    return `<span class="token" contenteditable="false" template-token-key="${this.token}" token-key="${this.token}"${super.generateAttributeString()}>${this.text}</span>`;
   }
 }

package/dist/collection/components/vega-rich-text-editor/public-api.js

@@ -18,6 +18,7 @@ export { VegaRTETokenExtension } from './extensions/tokens/token-extension';
 export { RTELanguageToolbarButtonRenderer } from './extensions/languages/language-toolbar-button-renderer';
 export { VegaRTELanguageExtension } from './extensions/languages/language-extension';
 export { VegaRTEFunctionExtension } from './extensions/functions/function-extension';
+export { VegaRTETableExtension } from './extensions/table/table-extension';
 // actions
 export { ModifyContentAction, ModifyContentActionType } from './dto/actions/modify-content-action.abstract';
 export { AppendChildrenAction } from './dto/actions/append-child-nodes-action';