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

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

@@ -0,0 +1,229 @@
+import { VegaRTEToolbarButtonRenderer } from '../base-toolbar-button-renderer';
+import { methodPlaceholder } from 'vega-slimmer/core';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { INSERT_TABLE_BLOCK, InsertTableBlockAction } from './actions/insert-table-block-action';
+import { UpdateCursorPositionAction } from '../../dto/actions/update-cursor-position-action';
+import tableIcon from './table-icon';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaPopoverShow } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { ActionHandleStrategyRegistry } from '../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { ModifyContentActionType } from '../../dto/actions/modify-content-action.abstract';
+/**
+ * Function toolbar button renderer class.
+ */
+export class RTETableToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor() {
+    super(...arguments);
+    this.hoveredRows = 1;
+    this.hoveredCols = 1;
+  }
+  /**
+   * Injects the extension context
+   *
+   * @param {RTETableExtensionContext} context - extension context
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * @inheritDoc
+   */
+  render(h, editorContext) {
+    return this.renderTablePicker(h, super.renderButton(h, editorContext, {
+      showArrowIcon: true,
+      icon: 'rte-table',
+    }));
+  }
+  /**
+   * Overrides the isDisabled method to determine if the button should be disabled.
+   *
+   * @returns {boolean} - true if the button should be disabled, false otherwise.
+   */
+  isDisabled() {
+    const { host, getSelectedNodes } = this.extensionContext;
+    const focusNode = getSelectedNodes()[0];
+    let enableInsert = true;
+    if (focusNode) {
+      enableInsert =
+        ActionHandleStrategyRegistry.canHandle(INSERT_TABLE_BLOCK, focusNode.parent) &&
+          ActionHandleStrategyRegistry.canHandle(ModifyContentActionType.INSERT_CHILDREN_AFTER, focusNode.parent.parent);
+    }
+    return host.disabled || !enableInsert;
+  }
+  /**
+   * @inheritDoc
+   */
+  handleButtonClick() {
+    methodPlaceholder();
+  }
+  /* istanbul ignore next */
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick() {
+    methodPlaceholder();
+  }
+  /**
+   * Renders the table size picker popover.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTERenderResult} children - The children elements to render inside the popover.
+   * @returns {VegaRTERenderResult} - The render result for the table size picker popover.
+   */
+  renderTablePicker(h, children) {
+    return h('vega-popover', {
+      trigger: 'click',
+      alignment: 'start',
+      placement: 'bottom',
+      showArrow: false,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (ref) => {
+        if (ref) {
+          this.tablePickerPopoverRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
+            this.resetPicker();
+          });
+        }
+      },
+    }, [
+      h('div', { slot: 'popover' }, [this.generatePickerStyles(h), this.generateTableSizeGrid(h)]),
+      h('div', { slot: 'popover-content' }, children),
+    ]);
+  }
+  /**
+   * Generates the table size picker grid.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @returns {VegaRTERenderResult} - The render result for the table size picker.
+   */
+  generateTableSizeGrid(h) {
+    const rows = 10;
+    const cols = 10;
+    const gridCells = [];
+    for (let r = 1; r <= rows; r++) {
+      for (let c = 1; c <= cols; c++) {
+        gridCells.push(h('button', {
+          'class': `rte-table-picker__cell`,
+          'data-row': r,
+          'data-col': c,
+          'onMouseenter': this.handlePickerCellHover.bind(this, r, c),
+          'onClick': this.handlePickerClick.bind(this, r, c),
+        }, []));
+      }
+    }
+    return h('div', { class: 'rte-table-picker' }, [
+      h('div', {
+        class: 'rte-table-picker__grid',
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        ref: (ref) => {
+          if (ref) {
+            this.tablePickerGridRef = ref;
+          }
+        },
+        style: {
+          gridTemplateColumns: `repeat(${cols}, 16px)`,
+          gridTemplateRows: `repeat(${rows}, 16px)`,
+        },
+      }, gridCells),
+      h('div', {
+        class: 'rte-table-picker__hint',
+      }, h('vega-hint', {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        ref: (ref) => {
+          if (ref) {
+            this.selectedHintRef = ref;
+          }
+        },
+      }, [`${this.hoveredRows} × ${this.hoveredCols}`])),
+    ]);
+  }
+  /**
+   * Generates the styles for the table size picker.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @returns {VegaRTERenderResult} - The render result for the styles.
+   */
+  generatePickerStyles(h) {
+    return h('style', {}, [
+      // eslint-disable-next-line spellcheck/spell-checker
+      `
+.rte-table-picker__grid { display: grid; gap: 2px; }
+.rte-table-picker__cell {
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  background-color: transparent;
+  cursor: pointer;
+}
+.rte-table-picker__cell:hover {
+  background-color: #cae1fc;
+}
+.rte-table-picker__cell.active {
+  background-color: #cae1fc;
+}
+.rte-table-picker__hint {
+	text-align: center;
+}
+      `,
+    ]);
+  }
+  /**
+   * Creates a table block with the specified number of rows and columns.
+   *
+   * @param {number} row - The number of rows for the table.
+   * @param {number} column - The number of columns for the table.
+   */
+  createTable(row, column) {
+    const { host, getSelectedNodes } = this.extensionContext;
+    const focusNode = getSelectedNodes()[0];
+    const action = new InsertTableBlockAction(row, column);
+    if (!focusNode) {
+      host.value.apply(action);
+    }
+    else if (focusNode.parent) {
+      focusNode.parent.apply(action);
+    }
+    if (action.nextFocusNode) {
+      host.value.apply(new UpdateCursorPositionAction(action.nextFocusNode, 1));
+    }
+  }
+  /**
+   * Handles the click event on a picker cell.
+   *
+   * @param {number} r - The number of rows selected.
+   * @param {number} c - The number of columns selected.
+   */
+  handlePickerClick(r, c) {
+    this.createTable(r, c);
+    void this.tablePickerPopoverRef.hide();
+  }
+  /**
+   * Handles the hover event on a picker cell.
+   *
+   * @param {number} r - The number of rows being hovered over.
+   * @param {number} c - The number of columns being hovered over.
+   */
+  handlePickerCellHover(r, c) {
+    this.hoveredRows = r;
+    this.hoveredCols = c;
+    Array.from(this.tablePickerGridRef.children).forEach((cell) => {
+      const rIndex = Number(cell.dataset.row);
+      const cIndex = Number(cell.dataset.col);
+      if (rIndex <= this.hoveredRows && cIndex <= this.hoveredCols) {
+        cell.classList.add('active');
+      }
+      else {
+        cell.classList.remove('active');
+      }
+    });
+    this.selectedHintRef.textContent = `${this.hoveredRows} × ${this.hoveredCols}`;
+  }
+  /**
+   * Resets the table picker to its initial state.
+   */
+  resetPicker() {
+    this.handlePickerCellHover(1, 1);
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'rte-table': tableIcon });
+})();

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

@@ -0,0 +1,102 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { RTENode } from '../../../dto/nodes/node.abstract';
+import { RTETableBodyBlock } from '../dto/table-body-block';
+import { RTETableHeadBlock } from '../dto/table-head-block';
+/**
+ * Recursively searches for a parent block of a specific type.
+ *
+ * @typedef T - Generic type extending RTEBlock.
+ * @param {RTEBlock} block - The starting block to search from.
+ * @param {ClassType<unknown>} dtoClass - The class type to match the parent block against.
+ * @returns {T | null} - The found parent block of the specified type, or null if not found.
+ */
+export function getParentBlockByType(block, dtoClass) {
+  if (block) {
+    if (block instanceof dtoClass) {
+      return block;
+    }
+    else {
+      return getParentBlockByType(block.parent, dtoClass);
+    }
+  }
+  return null;
+}
+/**
+ * Generate the table body with the specified number of rows and columns.
+ *
+ * @param {number} rowCount - The number of rows in the table body.
+ * @param {number} columnCount - The number of columns in the table body.
+ * @returns {VegaRTETableBodyBlock} The generated table body block.
+ */
+export function generateTableBody(rowCount, columnCount) {
+  return {
+    id: generateUUID(),
+    type: 'table-body',
+    children: Array.from({ length: rowCount }, () => generateTableRow(columnCount)),
+  };
+}
+/**
+ * Create a table row block with the specified number of columns and cell type.
+ *
+ * @param {number} columnCount - The number of columns in the row.
+ * @returns {VegaRTETableRowBlock} The created table row block.
+ */
+export function generateTableRow(columnCount) {
+  return {
+    id: generateUUID(),
+    type: 'table-row',
+    children: Array.from({ length: columnCount }, () => getDefaultCellBlockTemplate('table-cell')),
+  };
+}
+/**
+ * Get all table rows from a table block (including rows from all table bodies and headers).
+ *
+ * @param {RTETableBlock} tableBlock - The table block.
+ * @returns {RTETableRowBlock[]} Array of all table row blocks.
+ */
+export function getAllTableRows(tableBlock) {
+  return tableBlock.children
+    .filter((child) => child instanceof RTETableBodyBlock || child instanceof RTETableHeadBlock)
+    .flatMap((body) => body.children);
+}
+/**
+ * Find the first node within a block recursively.
+ *
+ * @param {Nullable<RTEBlock>} block - The block to find the first node in.
+ * @returns {Nullable<RTENode>} The focusable node within the block.
+ */
+export function getFirstNode(block) {
+  if (!block || !block.children || !block.children[0])
+    return null;
+  const firstNode = block.children[0];
+  if (firstNode instanceof RTENode) {
+    return firstNode;
+  }
+  return getFirstNode(firstNode);
+}
+/**
+ * Get the default cell block template.
+ *
+ * @param {string} cellType - The type of the cell block.
+ * @returns {VegaRTETableCellBlock} The default cell block template.
+ */
+export function getDefaultCellBlockTemplate(cellType) {
+  const id = generateUUID();
+  return {
+    id,
+    type: cellType,
+    children: [
+      {
+        id: `${id}-p`,
+        type: 'paragraph',
+        nodes: [
+          {
+            id: `${id}-p-t`,
+            type: 'text',
+            text: '',
+          },
+        ],
+      },
+    ],
+  };
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-selection-widget/slimmers/controllers/selection-widget-keyboard-controller.js

@@ -0,0 +1,36 @@
+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 { KeyboardManagerSlimmer } from '../../../../../../../helpers/slimmers/keyboard-manager-slimmer';
+import { MapToComponentField } from 'vega-slimmer/core';
+/**
+ * Keyboard controller for table selection widget
+ */
+export class SelectionWidgetKeyboardController extends KeyboardManagerSlimmer {
+  constructor() {
+    super(() => [
+      {
+        keyCode: 'Backspace',
+        eventName: 'keydown',
+        activeElementInScope: [this.selectionWidgetRenderer.getWidgetHandleRef()],
+        callback: this.handleDeleteKeyDown,
+      },
+    ]);
+    /**
+     * Handles the delete key down event.
+     *
+     */
+    this.handleDeleteKeyDown = () => {
+      this.vegaRemove.emit();
+    };
+  }
+}
+__decorate([
+  MapToComponentField()
+], SelectionWidgetKeyboardController.prototype, "vegaRemove", void 0);
+__decorate([
+  MapToComponentField()
+], SelectionWidgetKeyboardController.prototype, "selectionWidgetRenderer", void 0);

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

@@ -0,0 +1,83 @@
+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 { arrayToClassString, findParent } from '../../../../../../../utils/ui';
+export class SelectionWidgetRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Handles the selection of the widget.
+     *
+     * @param {MouseEvent} e - The mouse event.
+     */
+    this.handleWidgetSelection = (e) => {
+      e.stopPropagation();
+      this.isSelected = true;
+    };
+    /**
+     * Handles clicks outside the widget to deselect it.
+     */
+    this.handleEditorContentClick = () => {
+      this.isSelected = false;
+    };
+    /**
+     * Registers the editor content click listener.
+     */
+    this.registerEditorContentClickListener = () => {
+      if (this.editorContentContainerRef) {
+        this.editorContentContainerRef.addEventListener('mousedown', this.handleEditorContentClick);
+      }
+    };
+    /**
+     * Un-registers the editor content click listener.
+     */
+    this.unRegisterEditorContentClickListener = () => {
+      if (this.editorContentContainerRef) {
+        this.editorContentContainerRef.removeEventListener('mousedown', this.handleEditorContentClick);
+      }
+    };
+  }
+  connectedCallback() {
+    this.editorContentContainerRef = findParent(this.host, '.rich-text-editor-container');
+  }
+  disconnectedCallback() {
+    this.unRegisterEditorContentClickListener();
+  }
+  watchIsSelected(newValue) {
+    if (newValue) {
+      this.registerEditorContentClickListener();
+    }
+    else {
+      this.unRegisterEditorContentClickListener();
+    }
+  }
+  getWidgetHandleRef() {
+    return this.widgetHandleRef;
+  }
+  render() {
+    return (h("div", { class: arrayToClassString(['v-rte-widget__selection', this.isSelected ? 'selected' : '']), contentEditable: false },
+      h("button", { class: "v-rte-widget__selection-handle", ref: (el) => (this.widgetHandleRef = el), onClick: this.handleWidgetSelection }),
+      h("div", { class: "v-rte-widget__selection-content" },
+        h("slot", null))));
+  }
+}
+__decorate([
+  MapToComponentField()
+], SelectionWidgetRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], SelectionWidgetRenderer.prototype, "isSelected", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], SelectionWidgetRenderer.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], SelectionWidgetRenderer.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('watchIsSelected')
+], SelectionWidgetRenderer.prototype, "watchIsSelected", null);

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

@@ -0,0 +1,41 @@
+:host {
+  display: block;
+  position: relative;
+  padding-top: 19px;
+}
+
+:host(:hover) .v-rte-widget__selection-content {
+  outline: 2px solid rgb(255, 200, 61);
+}
+:host(:hover) .v-rte-widget__selection-handle {
+  display: revert;
+  background: rgb(255, 200, 61);
+}
+
+.v-rte-widget__selection.selected .v-rte-widget__selection-content {
+  outline: 2px solid rgb(38, 42, 255);
+}
+.v-rte-widget__selection.selected .v-rte-widget__selection-handle {
+  display: revert;
+  background: rgb(38, 42, 255);
+}
+
+.v-rte-widget__selection-handle {
+  border: none;
+  outline: none;
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  top: 2px;
+  left: -2px;
+  padding: 2px;
+  box-sizing: border-box;
+  display: none;
+}
+.v-rte-widget__selection-handle:after {
+  content: "";
+  border: 1px dashed rgb(255, 255, 255);
+  width: auto;
+  height: 100%;
+  display: block;
+}

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

@@ -0,0 +1,80 @@
+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, Host, h, Element, State, Event, Watch } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../../../helpers/slimmers/component-usage-runtime-metrics';
+import { sanitizeVegaComponent } from '../../../../../utils/component';
+import { SelectionWidgetRenderer } from './slimmers/renderers/selection-widget-renderer';
+import { SelectionWidgetKeyboardController } from './slimmers/controllers/selection-widget-keyboard-controller';
+/**
+ * A selection widget for rich text table elements.
+ * This is an internal used component.
+ *
+ * @vegaVersion 2.71.0-RTE-table-preview
+ */
+export class VegaRichTextTableSelectionWidget {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.selectionWidgetRenderer = new SelectionWidgetRenderer();
+    this.keyboardController = new SelectionWidgetKeyboardController();
+    this.isSelected = false;
+  }
+  watchIsSelected(newValue) {
+    methodPlaceholder(newValue);
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.selectionWidgetRenderer.render()), this.host);
+  }
+  static get is() { return "vega-rich-text-table-selection-widget"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-rich-text-table-selection-widget.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-rich-text-table-selection-widget.css"]
+  }; }
+  static get states() { return {
+    "isSelected": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaRemove",
+      "name": "vegaRemove",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.71.0-RTE-table-preview"
+          }],
+        "text": "An event emitter notifying a delete action on the widget."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "isSelected",
+      "methodName": "watchIsSelected"
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextTableSelectionWidget.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSelectionWidget.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSelectionWidget.prototype, "selectionWidgetRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextTableSelectionWidget.prototype, "keyboardController", void 0);

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

@@ -0,0 +1,20 @@
+export const Icons = {
+  'rte-table-column': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M48 416V160H232V432H64c-8.8 0-16-7.2-16-16zm232 16V160H464V416c0 8.8-7.2 16-16 16H280zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>`,
+  },
+  'rte-table-row': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M448 432l-320 0 0-152 336 0 0 136c0 8.8-7.2 16-16 16zm16-200l-336 0 0-152 320 0c8.8 0 16 7.2 16 16l0 136zM0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416z"/></svg>`,
+  },
+  'rte-table-merge-cells': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M464 416c0 8.8-7.2 16-16 16H128V192H0V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H160V160H464V416zM64 32C28.7 32 0 60.7 0 96v64H128V32H64zM414.8 246.1c2.5-6 1.1-12.9-3.5-17.4l-32-32c-6.2-6.2-16.4-6.2-22.6 0l-32 32c-4.6 4.6-5.9 11.5-3.5 17.4s8.3 9.9 14.8 9.9h16v48c0 8.8-7.2 16-16 16H288V304c0-6.5-3.9-12.3-9.9-14.8s-12.9-1.1-17.4 3.5l-32 32c-6.2 6.2-6.2 16.4 0 22.6l32 32c4.6 4.6 11.5 5.9 17.4 3.5s9.9-8.3 9.9-14.8V352h48c26.5 0 48-21.5 48-48V256h16c6.5 0 12.3-3.9 14.8-9.9z"/></svg>`,
+  },
+  'rte-table-properties': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M48 160V416c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V160H128v64c0 8.8 7.2 16 16 16h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-5.6 0-11-1-16-2.7V320c0 8.8 7.2 16 16 16h96c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-26.5 0-48-21.5-48-48V224 160H48zM0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM224 240c0-8.8 7.2-16 16-16H400c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H240c-8.8 0-16-7.2-16-16V240zm80 80h96c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H304c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16z"/></svg>`,
+  },
+  'rte-table-cell-properties': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M360 80v88H464V96c0-8.8-7.2-16-16-16H360zm-48 0H200v88H312V80zM152 80H64c-8.8 0-16 7.2-16 16v72H152V80zM48 216v80H152V216H48zm0 128v72c0 8.8 7.2 16 16 16h88V344H48zm152 88H312V344H200v88zm160 0h88c8.8 0 16-7.2 16-16V344H360v88zM464 296V216H360v80H464zM0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM200 296H312V216H200v80z"/></svg>`,
+  },
+  'rte-table-caption': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M464 224c0-8.8-7.2-16-16-16L64 208c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-224zm-16-64c35.3 0 64 28.7 64 64l0 224c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 224c0-35.3 28.7-64 64-64l384 0zm-8-80c13.3 0 24 10.7 24 24s-10.7 24-24 24L72 128c-13.3 0-24-10.7-24-24s10.7-24 24-24l368 0zM392 0c13.3 0 24 10.7 24 24s-10.7 24-24 24L120 48c-13.3 0-24-10.7-24-24s10.7-24 24-24L392 0z"/></svg>`,
+  },
+};

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

@@ -0,0 +1,27 @@
+import { TableSettingButtonSlimmer } from './table-setting-button-slimmer.abstract';
+import { TableSettingType } from '../../../setting-event-handlers/setting-event-handler.abstract';
+/**
+ * Slimmer dedicated to building the caption button.
+ */
+export class CaptionButtonSlimmer extends TableSettingButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'rte-table-caption',
+      title: 'caption off',
+      showArrowIcon: false,
+    });
+  }
+  isSelected() {
+    return this.hasCaption;
+  }
+  isDisabled() {
+    return false;
+  }
+  handleClick() {
+    const caption = !this.hasCaption ? 'rte-table-caption' : '';
+    this.emitClickEvent([TableSettingType.CAPTION, caption]);
+  }
+  getTitle() {
+    return this.hasCaption ? 'caption on' : 'caption off';
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/vega-rich-text-table-setting/slimmers/renderers/cell-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 merge cells button.
+ */
+export class CellPropertiesButtonSlimmer extends TableSettingButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'rte-table-cell-properties',
+      title: 'cell properties',
+      showArrowIcon: false,
+    });
+  }
+  renderBtnWrapper(renderBtn) {
+    return renderBtn();
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    return this.selectedCells.length === 0;
+  }
+  handleClick() {
+    this.emitClickEvent([TableSettingType.CELL_PROPERTIES]);
+  }
+}