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

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

@@ -0,0 +1,50 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { RTETableCaptionBlock } from '../dto/table-caption-block';
+import { ElementToDTOStrategy } from '../../../slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
+import htmlElementToAnnotationGenerator from '../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
+/**
+ * Strategy to convert a native HTML table caption container element into an RTETableCaptionBlock DTO.
+ *
+ * This expects to be applied to the rendered caption container that wraps the actual caption content
+ * (for example, the `div.v-rte--extension-table-caption` element that Stencil renders for table captions).
+ */
+export class CaptionToCaptionBlockStrategy extends ElementToDTOStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element &&
+      element.parentElement &&
+      element.parentElement.tagName === 'TABLE' &&
+      element.tagName === 'CAPTION'
+      ? 1
+      : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options) {
+    return RTETableCaptionBlock.from({
+      id: generateUUID(),
+      type: 'table-caption',
+      annotations: htmlElementToAnnotationGenerator.generate(RTETableCaptionBlock, elementsArray[0], options),
+      children: [],
+    }, options);
+  }
+  /**
+   * @inheritDoc
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.map((block) => {
+      block.parent = currentBlock;
+      return block;
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}

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

@@ -0,0 +1,42 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { ElementToDTOStrategy } from '../../../slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
+import { RTETableBlock } from '../dto/table-block';
+import htmlElementToAnnotationGenerator from '../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
+/**
+ * Strategy to convert a native HTML table element into an RTETableBlock DTO.
+ */
+export class TableToTableBlockStrategy extends ElementToDTOStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element && element.tagName === 'TABLE' ? 1 : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options) {
+    return RTETableBlock.from({
+      id: generateUUID(),
+      type: 'table-block',
+      annotations: htmlElementToAnnotationGenerator.generate(RTETableBlock, elementsArray[0], options),
+      children: [],
+    }, options);
+  }
+  /**
+   * @inheritDoc
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.map((block) => {
+      block.parent = currentBlock;
+      return block;
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/element-to-dto-strategies/tbody-to-table-body-block-strategy.js

@@ -0,0 +1,42 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { BlockToRTEBlockStrategyAbstract } from '../../../slimmers/controllers/helper/element-to-dto-strategy/block-to-rte-block-strategy.abstract';
+import { RTETableBodyBlock } from '../dto/table-body-block';
+import htmlElementToAnnotationGenerator from '../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
+/**
+ * Strategy to convert a native HTML tbody element into an RTETableBodyBlock DTO.
+ */
+export class TbodyToTableBodyBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element && element.tagName === 'TBODY' ? 1 : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options) {
+    return RTETableBodyBlock.from({
+      id: generateUUID(),
+      type: 'table-body',
+      annotations: htmlElementToAnnotationGenerator.generate(RTETableBodyBlock, elementsArray[0], options),
+      children: [],
+    }, options);
+  }
+  /**
+   * @inheritDoc
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.map((block) => {
+      block.parent = currentBlock;
+      return block;
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/element-to-dto-strategies/td-to-table-cell-block-strategy.js

@@ -0,0 +1,71 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { BlockToRTEBlockStrategyAbstract } from '../../../slimmers/controllers/helper/element-to-dto-strategy/block-to-rte-block-strategy.abstract';
+import { RTETableCellBlock } from '../dto/table-cell-block';
+import { RTETableHeadCellBlock } from '../dto/table-head-cell-block';
+import htmlElementToAnnotationGenerator from '../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
+/**
+ * Strategy to convert native HTML td/th element into table cell DTOs.
+ */
+export class TdToTableCellBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element && (element.tagName === 'TD' || element.tagName === 'TH') ? 1 : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0];
+    const defaultChildren = [
+      {
+        id: generateUUID(),
+        type: 'paragraph',
+        annotations: {
+          internalWrapper: options && !options.autoMatchFormat,
+        },
+        nodes: [
+          {
+            id: generateUUID(),
+            type: 'text',
+            annotations: {
+              plainText: options && !options.autoMatchFormat,
+            },
+            text: '',
+          },
+        ],
+      },
+    ];
+    if (element.tagName === 'TH') {
+      return RTETableHeadCellBlock.from({
+        id: generateUUID(),
+        type: 'table-head-cell',
+        annotations: htmlElementToAnnotationGenerator.generate(RTETableCellBlock, element, options),
+        children: defaultChildren,
+      }, options);
+    }
+    return RTETableCellBlock.from({
+      id: generateUUID(),
+      type: 'table-cell',
+      annotations: htmlElementToAnnotationGenerator.generate(RTETableHeadCellBlock, element),
+      children: defaultChildren,
+    }, options);
+  }
+  /**
+   * @inheritDoc
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.map((block) => {
+      block.parent = currentBlock;
+      return block;
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/element-to-dto-strategies/thead-to-table-head-block-strategy.js

@@ -0,0 +1,42 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { BlockToRTEBlockStrategyAbstract } from '../../../slimmers/controllers/helper/element-to-dto-strategy/block-to-rte-block-strategy.abstract';
+import { RTETableHeadBlock } from '../dto/table-head-block';
+import htmlElementToAnnotationGenerator from '../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
+/**
+ * Strategy to convert a native HTML thead element into an RTETableHeadBlock DTO.
+ */
+export class TheadToTableHeadBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element && element.tagName === 'THEAD' ? 1 : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options) {
+    return RTETableHeadBlock.from({
+      id: generateUUID(),
+      type: 'table-head',
+      annotations: htmlElementToAnnotationGenerator.generate(RTETableHeadBlock, elementsArray[0], options),
+      children: [],
+    }, options);
+  }
+  /**
+   * @inheritDoc
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.map((block) => {
+      block.parent = currentBlock;
+      return block;
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/element-to-dto-strategies/tr-to-table-row-block-strategy.js

@@ -0,0 +1,42 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { BlockToRTEBlockStrategyAbstract } from '../../../slimmers/controllers/helper/element-to-dto-strategy/block-to-rte-block-strategy.abstract';
+import { RTETableRowBlock } from '../dto/table-row-block';
+import htmlElementToAnnotationGenerator from '../../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
+/**
+ * Strategy to convert a native HTML tr element into an RTETableRowBlock DTO.
+ */
+export class TrToTableRowBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element && element.tagName === 'TR' ? 1 : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options) {
+    return RTETableRowBlock.from({
+      id: generateUUID(),
+      type: 'table-row',
+      annotations: htmlElementToAnnotationGenerator.generate(RTETableRowBlock, elementsArray[0], options),
+      children: [],
+    }, options);
+  }
+  /**
+   * @inheritDoc
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.map((block) => {
+      block.parent = currentBlock;
+      return block;
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}

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

@@ -0,0 +1,15 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+/**
+ * Renders a table body block in the rich text editor.
+ */
+export class RTETableBodyRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('tbody', {
+      key: renderData.id,
+      ref: this.useRef(renderData),
+    });
+  }
+}

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

@@ -0,0 +1,22 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+import { isNonNullable } from '../../../../../types/type-guard';
+export const TABLE_CAPTION_PLACEHOLDER_TEXT = 'Enter table caption';
+/**
+ * Renderer for the optional table caption node.
+ */
+export class RTETableCaptionRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('caption', {
+      'key': renderData.id,
+      'ref': this.useRef(renderData),
+      'style': renderData.getStyles(),
+      'class': [renderData.getClasses(), renderData.isNotEmpty() ? null : 'showPlaceholder']
+        .filter(isNonNullable)
+        .join(' '),
+      'data-placeholder': TABLE_CAPTION_PLACEHOLDER_TEXT,
+    });
+  }
+}

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

@@ -0,0 +1,74 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+import { findParent } from '../../../../../utils/ui';
+/**
+ * Renders a table cell block in the rich text editor.
+ */
+export class RTETableCellRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData, rteContext) {
+    return this.renderByCellType(h, renderData, rteContext, 'td');
+  }
+  /**
+   * Injects the extension context
+   *
+   * @param {RTETableExtensionContext} context - extension context
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Renders the table cell based on its type (td or th).
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {RTETableCellBlock} renderData - The table cell block to render.
+   * @param {RTERenderContext} rteContext - The rte editor context.
+   * @param {'td' | 'th'} elementType - The type of table cell element ('td' or 'th').
+   * @returns {VegaRTERenderResult} - The rendered table cell element.
+   */
+  renderByCellType(h, renderData, rteContext, elementType) {
+    var _a;
+    return h(elementType, Object.assign(Object.assign(Object.assign({ key: renderData.id, ref: this.useRef(renderData) }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(rteContext), class: renderData.getClasses() }), (rteContext.editable ? this.onSelectionListeners(renderData) : undefined)));
+  }
+  /**
+   * Returns the mouse event listeners for selection handling.
+   *
+   * @param {RTETableCellBlock} renderData - The table cell block to render.
+   * @returns {RTETableSelectionListenersType} - The mouse event listeners.
+   */
+  onSelectionListeners(renderData) {
+    return {
+      /**
+       * Handles the mouse down event to focus a cell.
+       *
+       * @param {MouseEvent} event - The mouse event.
+       */
+      onMouseDown: (event) => {
+        const targetParentTable = findParent(event.target, 'table');
+        const currentTable = findParent(event.currentTarget, 'table');
+        const inCurrentTable = currentTable === targetParentTable;
+        const cellRef = event.target.closest('td, th');
+        if (inCurrentTable && cellRef) {
+          this.extensionContext.tableSelection.focusCell(cellRef);
+        }
+      },
+      /**
+       * Handles the mouse move event to start selection.
+       *
+       * @param {MouseEvent} event - The mouse event.
+       */
+      onMouseMove: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        this.extensionContext.tableSelection.dragOver(renderData);
+      },
+      /**
+       * Handles the mouse up event to end selection.
+       */
+      onMouseUp: () => {
+        this.extensionContext.tableSelection.endDrag();
+      },
+    };
+  }
+}

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

@@ -0,0 +1,254 @@
+import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalPopoverUpdateTarget, VegaInternalRTEExtensionTableCellsSelectionAnchor, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { tryGetDocument } from '../../../../../utils/try-get-document';
+import { isNonNullable } from '../../../../../types/type-guard';
+import { TableSettingType } from '../setting-event-handlers/setting-event-handler.abstract';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { TablePropertiesEventHandler } from '../setting-event-handlers/table-properties';
+import { TablePropertiesCancelEventHandler } from '../setting-event-handlers/table-properties-cancel-event-handler';
+import { TablePropertiesSaveEventHandler } from '../setting-event-handlers/table-properties-save-event-handler';
+import { TablePropertiesChangeEventHandler } from '../setting-event-handlers/table-properties-change-event-handler';
+import { CellPropertiesSaveEventHandler } from '../setting-event-handlers/cell-properties-save-event-handler';
+import { CellPropertiesEventHandler } from '../setting-event-handlers/cell-properties';
+import { CellPropertiesChangeEventHandler } from '../setting-event-handlers/cell-properties-change-event-handler';
+import { CellPropertiesCancelEventHandler } from '../setting-event-handlers/cell-properties-cancel-event-handler';
+import { VegaPopoverHide } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+/**
+ * Renderer for a generic, dynamically positioned popover used within table-related extensions.
+ *
+ * - The popover target is based on the current cursor/selection position.
+ * - The popover content is rendered dynamic content.
+ */
+export class TableDynamicPopoverRenderer {
+  constructor(colors) {
+    this.tableColorSchema = [];
+    this.popoverCloseType = 'none'; // 'save' | 'cancel' | 'change' | 'none'
+    this.tablePropertiesHandlerMap = {
+      save: new TablePropertiesSaveEventHandler(),
+      cancel: new TablePropertiesCancelEventHandler(),
+      change: new TablePropertiesChangeEventHandler(),
+    };
+    this.cellPropertiesHandlerMap = {
+      save: new CellPropertiesSaveEventHandler(),
+      cancel: new CellPropertiesCancelEventHandler(),
+      change: new CellPropertiesChangeEventHandler(),
+    };
+    /**
+     * Updates the table properties based on the emitted event.
+     *
+     * @param {CustomEvent} e - The custom event containing the update details.
+     */
+    this.handleTablePropertiesUpdate = (e) => {
+      const eventKey = e.type.replace('vega', '').toLowerCase(); // 'save' | 'cancel' | 'change'
+      this.popoverCloseType = eventKey;
+      if (eventKey !== 'change') {
+        void this.hide();
+      }
+      this.tablePropertiesHandlerMap[eventKey].handle(this.extensionContext, this.currentTableBlock, e.detail, this.currentFocusNode);
+      // Update popover position to follow the target after styles change
+      if (eventKey === 'change' && this.popoverRef) {
+        void this.popoverRef.show(true);
+      }
+    };
+    /**
+     * Updates the cell properties based on the emitted event.
+     *
+     * @param {CustomEvent} e - The custom event containing the update details.
+     */
+    this.handleCellPropertiesUpdate = (e) => {
+      const eventKey = e.type.replace('vega', '').toLowerCase(); // 'save' | 'cancel' | 'change'
+      this.popoverCloseType = eventKey;
+      if (eventKey !== 'change') {
+        void this.hide();
+      }
+      this.cellPropertiesHandlerMap[eventKey].handle(this.extensionContext, e.detail, this.currentFocusNode);
+      // Update popover position to follow the target after styles change
+      if (eventKey === 'change' && this.popoverRef) {
+        void this.popoverRef.show(true);
+      }
+    };
+    this.tableColorSchema = colors;
+  }
+  /**
+   * removes the multi-cell selection anchor element from the DOM, if present,
+   * and clears the internal reference.
+   */
+  destroy() {
+    if (this.selectionAnchorRef && this.selectionAnchorRef.parentNode) {
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.selectionAnchorRef, VegaInternalRTEExtensionTableCellsSelectionAnchor);
+      this.selectionAnchorRef.parentNode.removeChild(this.selectionAnchorRef);
+      this.selectionAnchorRef = null;
+    }
+  }
+  /**
+   * Shows the popover. Before showing, it will refresh the target so
+   * that the popover is positioned relative to the latest cursor position.
+   *
+   * @param {string} type - The table setting type determining which
+   *  content variant to display (for example, table properties or cell properties).
+   */
+  async show(type) {
+    let target = this.getTableRef();
+    const cells = this.extensionContext.tableSelection.getSelectedCells();
+    if (type === TableSettingType.CELL && cells.length > 1) {
+      const anchor = this.getOrCreateSelectionAnchor(cells, target);
+      if (anchor) {
+        target = anchor;
+      }
+    }
+    else if (type === TableSettingType.CELL && cells.length === 1) {
+      target = stateEntityRenderingRegistry.getDOMByEntity(cells[0]);
+    }
+    this.updateContent(type);
+    this.storeCurrentFocusNode();
+    remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), target);
+    await this.popoverRef.show();
+  }
+  /**
+   * hide the popover.
+   */
+  async hide() {
+    await this.popoverRef.hide();
+  }
+  /**
+   * Injects the RTE extension context.
+   *
+   * @param {RTETableExtensionContext} context - The RTE extension context.
+   */
+  injectRTEExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Renders a vega-popover whose target and content are provided dynamically by callers.
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {() => HTMLElement} getTableRef - Current table DOM reference
+   * @param {RTETableBlock} renderData - Current table block being rendered.
+   * @returns {VegaRTERenderResult} The rendered popover host.
+   */
+  render(h, getTableRef, renderData) {
+    this.getTableRef = getTableRef;
+    this.currentTableBlock = renderData;
+    return h('vega-popover', {
+      trigger: 'click',
+      isScreenPosition: true,
+      class: 'rte-table-dynamic-popover',
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (popover) => {
+        this.popoverRef = popover;
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
+          if (this.popoverCloseType === 'change' && this.extensionContext) {
+            this.extensionContext.flushValue(this.extensionContext.host.value);
+          }
+        });
+      },
+    }, [
+      h('div', {
+        slot: 'popover',
+        class: 'rte-table-dynamic-popover-content',
+      }, [
+        h('vega-rich-text-table-properties', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          ref: (el) => (this.tablePropertiesFormRef = el),
+          colors: this.tableColorSchema,
+          type: TableSettingType.TABLE,
+          onVegaCancel: this.handleTablePropertiesUpdate,
+          onVegaChange: this.handleTablePropertiesUpdate,
+          onVegaSave: this.handleTablePropertiesUpdate,
+        }),
+        h('vega-rich-text-table-properties', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          ref: (el) => (this.cellPropertiesFormRef = el),
+          colors: this.tableColorSchema,
+          type: TableSettingType.CELL,
+          onVegaCancel: this.handleCellPropertiesUpdate,
+          onVegaChange: this.handleCellPropertiesUpdate,
+          onVegaSave: this.handleCellPropertiesUpdate,
+        }),
+      ]),
+    ]);
+  }
+  /**
+   * Updates the visibility of the pre-rendered content blocks based on type.
+   *
+   * @param {string} type - The table setting type determining which content variant should be visible.
+   */
+  updateContent(type) {
+    this.popoverCloseType = 'none';
+    if (this.tablePropertiesFormRef && type === 'TABLE') {
+      this.tablePropertiesFormRef.classList.remove('vega-hidden');
+      this.cellPropertiesFormRef.classList.add('vega-hidden');
+      this.tablePropertiesFormRef.defaultValue =
+        TablePropertiesEventHandler.generateTablePropertiesForm(this.currentTableBlock);
+    }
+    else if (this.cellPropertiesFormRef && type === 'CELL') {
+      this.cellPropertiesFormRef.classList.remove('vega-hidden');
+      this.tablePropertiesFormRef.classList.add('vega-hidden');
+      this.cellPropertiesFormRef.styleMap = CellPropertiesEventHandler.getStyleCollectionFromCell(this.extensionContext.tableSelection.getSelectedCells());
+      this.cellPropertiesFormRef.defaultValue = CellPropertiesEventHandler.convertStyleMapToFormField(this.cellPropertiesFormRef.styleMap);
+    }
+    // when open the properties dialog
+    // the properties form will set default value
+    // this will trigger selectionchange event
+    // the `rte` selection should be cleared.
+    // Otherwise, it will cause `getSelection` to retrieve incorrect data in the `selectionchange` callback.
+    // For example, in table selection.
+    this.extensionContext.getSelection().removeAllRanges();
+  }
+  /**
+   * Stores the current focus node before properties update action.
+   */
+  storeCurrentFocusNode() {
+    this.extensionContext && (this.currentFocusNode = this.extensionContext.getSelectedNodes()[0]);
+  }
+  /**
+   * Create and position an invisible anchor element whose position and size are identical to the geometry of the current multi-cell selection.
+   * This anchor element will then be used as the target of the popup, so that the popup appears near the entire selection area.
+   *
+   * @param {RTETableCellBlock[]} cells - The currently selected table cells.
+   * @param {Nullable<HTMLElement>} tableRef - The container table element.
+   * @returns {Nullable<HTMLElement>} The positioned anchor element.
+   */
+  getOrCreateSelectionAnchor(cells, tableRef) {
+    const safeDocument = tryGetDocument();
+    if (safeDocument && tableRef) {
+      const container = tableRef.closest('.rich-text-content');
+      const parentRect = container.getBoundingClientRect();
+      let leftViewport = Number.POSITIVE_INFINITY;
+      let rightViewport = Number.NEGATIVE_INFINITY;
+      let topViewport = Number.POSITIVE_INFINITY;
+      let bottomViewport = Number.NEGATIVE_INFINITY;
+      cells
+        .map((cell) => stateEntityRenderingRegistry.getDOMByEntity(cell))
+        .filter(isNonNullable)
+        .forEach((el) => {
+        const elRect = el.getBoundingClientRect();
+        // get the minimum and maximum cell edges to get the bounding rectangle of the whole selection relative to the container.
+        leftViewport = Math.min(leftViewport, elRect.left - parentRect.left);
+        rightViewport = Math.max(rightViewport, elRect.right - parentRect.left);
+        topViewport = Math.min(topViewport, elRect.top - parentRect.top);
+        bottomViewport = Math.max(bottomViewport, elRect.bottom - parentRect.top);
+      });
+      const widthViewport = rightViewport - leftViewport;
+      const heightViewport = bottomViewport - topViewport;
+      this.selectionAnchorRef = container.querySelector('.rte-table-selection-popover-anchor');
+      if (!this.selectionAnchorRef) {
+        this.selectionAnchorRef = safeDocument.createElement('div');
+        this.selectionAnchorRef.className = 'rte-table-selection-popover-anchor';
+        this.selectionAnchorRef.style.position = 'absolute';
+        this.selectionAnchorRef.style.pointerEvents = 'none';
+        container.appendChild(this.selectionAnchorRef);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.selectionAnchorRef, VegaInternalRTEExtensionTableCellsSelectionAnchor, () => {
+          this.destroy();
+        });
+      }
+      this.selectionAnchorRef.style.left = `${leftViewport}px`;
+      this.selectionAnchorRef.style.top = `${topViewport}px`;
+      this.selectionAnchorRef.style.width = `${widthViewport}px`;
+      this.selectionAnchorRef.style.height = `${heightViewport}px`;
+      return this.selectionAnchorRef;
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import { RTETableCellRenderer } from './table-cell-renderer';
+/**
+ * Renders a head cell block in the rich text editor.
+ */
+export class RTETableHeadCellRenderer extends RTETableCellRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData, rteContext) {
+    return super.renderByCellType(h, renderData, rteContext, 'th');
+  }
+}