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

package/dist/cjs/{function-extension-28a4d781.js → table-extension-1f162c4c.js}

@@ -6,14 +6,20 @@ const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-11937d6f.js');
 const darkModeStyleController = require('./dark-mode-style-controller-c21172aa.js');
-const internalVegaEventManager = require('./internal-vega-event-manager-45d451de.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-0e1ba774.js');
 const number = require('./number-4816603d.js');
-const dtoRendererManager = require('./dto-renderer-manager-c917dade.js');
-const codeBlock = require('./code-block-bb4cbafa.js');
+const dtoRendererManager = require('./dto-renderer-manager-04428a77.js');
+const codeBlock = require('./code-block-bf3642ef.js');
+const typeGuard = require('./type-guard-69d2cf01.js');
+require('./translation-5f9f9c0c.js');
 const internalIconManager = require('./internal-icon-manager-32f9ed63.js');
-const typeGuard = require('./type-guard-f12b5bae.js');
+const columnOperation = require('./column-operation-1cac8386.js');
+const object = require('./object-e2e28e3d.js');
 const baseRenderer = require('./base-renderer-0a3b62b7.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-f040608b.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-1c8f7880.js');
+const vegaInternalEventId = require('./vega-internal-event-id-a5ef414b.js');
+const timer = require('./timer-5f33058b.js');
+const tryGetDocument = require('./try-get-document-c0ebd39a.js');
 
 const VegaLoaderRuntimeMetricsPayloadDefinition = [
   {
@@ -1319,9 +1325,10 @@ class VegaRTEExtensionRenderer extends baseRenderer.VegaRTEBaseRenderer {
    * @returns {VegaRTERenderResult} - The rendered DOM element.
    */
   render(renderData, rteContext, createElement) {
+    var _a;
     const element = this.doRender(createElement, renderData, rteContext);
     this.fallbackRegisterRef(element, renderData);
-    this.appendChildren(element, renderData, rteContext, createElement);
+    this.appendChildren(((_a = element.childrenContainerGetter) === null || _a === void 0 ? void 0 : _a.call(element)) || element, renderData, rteContext, createElement);
     return element;
   }
   /**
@@ -1436,6 +1443,12 @@ class VegaRTEExtension {
   initialExtension(context) {
     this.extensionContext = context;
   }
+  /**
+   * Callback method invoked when the extension is destroyed.
+   * Override this method to perform any necessary cleanup.
+   */
+  destroyExtension() {
+  }
   /**
    * Collect custom styles for the extension renderers.
    * If custom nodes have special styles, override this method to provide the styles.
@@ -1878,7 +1891,7 @@ class RTETokenNode extends codeBlock.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>`;
   }
 }
 
@@ -1900,22 +1913,14 @@ 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.
@@ -1945,6 +1950,20 @@ class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
       this.extensionContext.host.value.apply(new dtoRendererManager.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;
+  }
 }
 
 /**
@@ -1971,7 +1990,10 @@ class InsertTokenNodeStrategy extends codeBlock.ActionHandleStrategy {
   handleAction(action, block) {
     const { rteRange, token } = action;
     if (rteRange && rteRange.startNode) {
-      const tokenNode = new RTETokenNode(createPublicApiRuntimeMetricsSlimmer.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(createPublicApiRuntimeMetricsSlimmer.generateUUID(), key, label, block);
+      tokenNode.annotationMap.set('CUSTOM_ATTRIBUTE', new codeBlock.CustomAttributeAnnotation(customAttrs));
       block.apply(new InsertNodeToNearestRootAction(rteRange, tokenNode));
       action.actionHandleResult = true;
     }
@@ -2015,13 +2037,13 @@ class SpanToTokenNodeStrategy extends dtoRendererManager.ElementToDTOStrategy {
     const annotations = dtoRendererManager.htmlElementToAnnotationGenerator.generate(codeBlock.RTETextNode, element);
     // Exclude customAttribute and customClass from annotations
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const restAnnotations = __rest(annotations, ["customAttribute", "customClass"]);
+    const { customAttribute, customClass } = annotations, restAnnotations = __rest(annotations, ["customAttribute", "customClass"]);
     return {
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'token',
       token: tokenKey,
       text,
-      annotations: Object.assign({}, restAnnotations),
+      annotations: Object.assign(Object.assign({}, restAnnotations), { customAttribute: this.createCustomAttrs(customAttribute) }),
     };
   }
   /**
@@ -2035,6 +2057,16 @@ class SpanToTokenNodeStrategy extends dtoRendererManager.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 object.cleanObject(result);
+  }
 }
 
 const spanToTokenNodeStrategy = new SpanToTokenNodeStrategy();
@@ -2886,6 +2918,1903 @@ class VegaRTEFunctionExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandlerInterceptor(codeBlock.RTETextBlock.name, codeBlock.ModifyContentActionType.PASTE_CONTENT, new PreventPasteContentInterceptor());
 })();
 
+const tableBlockStylesCss = ".v-rte--extension-table-container{display:table}table.v-rte--extension-table{border-collapse:collapse}table.v-rte--extension-table th,table.v-rte--extension-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:middle;min-width:30px;position:relative}table.v-rte--extension-table th{background-color:#f2f2f2}.rte-table-setting-popover,.rte-table-dynamic-popover{display:block}table.v-rte--extension-table .v-rte-table-cell-focused::after,table.v-rte--extension-table .v-rte-table-cell-selected::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background-color:rgba(158, 207, 250, 0.3)}table.v-rte--extension-table:has(.v-rte-table-cell-selected){caret-color:transparent}table.v-rte--extension-table:has(.v-rte-table-cell-selected) ::selection{background-color:transparent}table.v-rte--extension-table:has(.v-rte-table-cell-selected) ::-moz-selection{background-color:transparent}.v-rte--extension-table-caption{padding:8px;border:1px solid #ddd;border-bottom:none;background-color:#f7f7f7;position:relative;display:table-caption;caption-side:top;min-height:22px;text-align:center;word-break:break-word;overflow-wrap:break-word}.v-rte--extension-table-caption.showPlaceholder::before{position:absolute;left:0;right:0;content:attr(data-placeholder);font-family:'Inter', sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1));text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-cell-properties-popover,.rte-table-properties-popover{display:none}";
+
+const DELETE_TABLE_BLOCK = 'DELETE_TABLE_BLOCK';
+/**
+ * Action to delete a table block
+ */
+class DeleteTableBlockAction extends codeBlock.ModifyContentAction {
+  constructor(target) {
+    super();
+    this.isFlushable = true;
+    this.type = DELETE_TABLE_BLOCK;
+    this.tableBlock = target;
+  }
+}
+
+/**
+ * Class representing a table caption annotation in the rich text editor.
+ */
+class RTETableCaptionAnnotation extends codeBlock.BlockAnnotation {
+  constructor() {
+    super(...arguments);
+    this.type = columnOperation.RTETableExtensionAnnotationTypeEnum.CAPTION;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableCaptionAnnotation();
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return 'v-rte--extension-table-caption';
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return {
+      padding: '8px',
+      border: '1px solid #ddd',
+      borderBottom: 'none',
+      backgroundColor: '#f7f7f7',
+      position: 'relative',
+      textAlign: 'center',
+      minHeight: '22px',
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      caption: {
+        padding: '8px 12px',
+        border: '1px solid #ddd',
+        borderBottom: 'none',
+        backgroundColor: '#f7f7f7',
+        position: 'relative',
+        textAlign: 'center',
+        minHeight: '22px',
+      },
+    };
+  }
+}
+
+/**
+ * Represents the optional caption block for a table.
+ */
+class RTETableCaptionBlock extends codeBlock.RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'table-caption';
+    this.annotationMap.set(columnOperation.RTETableExtensionAnnotationTypeEnum.CAPTION, new RTETableCaptionAnnotation());
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(block, options) {
+    const captionBlock = new RTETableCaptionBlock(block.id);
+    super.convertAnnotationsToMap(captionBlock.annotationMap, Object.assign({}, block.annotations));
+    captionBlock.children = super.generateBlockChildren(block.children, options, captionBlock);
+    return captionBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTETableCaptionBlock(this.id);
+    clonedBlock.children = this.children.map((child) => child.clone(clonedBlock));
+    clonedBlock.parent = parent;
+    return clonedBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1].getLastNode();
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0 && this.children.some((child) => child.isNotEmpty());
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const childrenHtml = this.children.map((child) => child.toHtml()).join('');
+    const attrStr = super.generateAttributeString();
+    return `<caption${attrStr}>${childrenHtml}</caption>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
+  }
+}
+(() => {
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_CHILDREN_BEFORE, RTETableCaptionBlock.name, new dtoRendererManager.InsertChildrenBeforeStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.PASTE_CONTENT, RTETableCaptionBlock.name, new dtoRendererManager.PasteContentStrategy());
+})();
+
+const TOGGLE_TABLE_CAPTION = 'TOGGLE_TABLE_CAPTION';
+/**
+ * Action payload for toggling the optional table caption block.
+ */
+class TableCaptionAction extends codeBlock.ModifyContentAction {
+  constructor(shouldEnable) {
+    super();
+    this.type = TOGGLE_TABLE_CAPTION;
+    this.isFlushable = true;
+    this.shouldEnable = shouldEnable;
+  }
+}
+
+/**
+ * Event handler for row operations in a table.
+ */
+class CaptionOperationEventHandler extends columnOperation.SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === columnOperation.TableSettingType.CAPTION;
+  }
+  /**
+   * Toggle caption state for the target table block when the caption menu item is clicked.
+   *
+   * @param {Array<string>} action - Table setting payload, e.g. ['CAPTION', 'rte-table-caption'].
+   * @param {RTEExtensionContext} _extensionContext - Current editor extension context (unused here).
+   * @param {RTETableBlock} tableBlock - Table block that owns the caption.
+   */
+  execute(action, _extensionContext, tableBlock) {
+    const shouldEnable = action[1] === 'rte-table-caption';
+    const toggleAction = new TableCaptionAction(shouldEnable);
+    const existingCaption = tableBlock.getCaption();
+    if (shouldEnable) {
+      const hydratedCaption = existingCaption && existingCaption.isNotEmpty()
+        ? existingCaption
+        : this.createCaptionBlock(existingCaption === null || existingCaption === void 0 ? void 0 : existingCaption.id);
+      if (!existingCaption || hydratedCaption !== existingCaption) {
+        tableBlock.setCaption(hydratedCaption);
+      }
+      toggleAction.nextFocusNode = hydratedCaption.getLastNode();
+    }
+    else {
+      if (existingCaption) {
+        tableBlock.setCaption(null);
+        toggleAction.nextFocusNode = tableBlock.getFirstNode();
+      }
+    }
+    this.syncCursorPosition(tableBlock, toggleAction.nextFocusNode);
+  }
+  /**
+   * Applies a cursor update action so the editor focuses on the resolved node.
+   *
+   * @param {RTETableBlock} block - Table block currently being toggled.
+   * @param {Nullable<RTENode>} focusNode - Target node that should receive the caret.
+   */
+  syncCursorPosition(block, focusNode) {
+    super.syncCursorPosition(block, focusNode);
+  }
+  /**
+   * Build a fresh caption block with a default paragraph + placeholder text.
+   *
+   * @param {string} id - table-caption id
+   * @returns {RTETableCaptionBlock} Newly created caption DTO ready for rendering.
+   */
+  createCaptionBlock(id) {
+    const captionData = {
+      id: id !== null && id !== void 0 ? id : createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'table-caption',
+      children: [
+        {
+          id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+          type: 'paragraph',
+          nodes: [
+            {
+              id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+              type: 'text',
+              text: '',
+            },
+          ],
+        },
+      ],
+    };
+    return RTETableCaptionBlock.from(captionData);
+  }
+}
+
+/**
+ * Centralizes the popover rendering and interaction logic for table settings.
+ */
+class TableSettingPopoverRenderer {
+  constructor() {
+    this.settingHandlers = [
+      new columnOperation.RowOperationEventHandler(),
+      new CaptionOperationEventHandler(),
+      new columnOperation.ColumnOperationEventHandler(),
+    ];
+    /**
+     * Show table setting popover when table is clicked.
+     * Only the popover belonging to the nearest table will be shown,
+     * which avoids outer tables showing their popover when an inner (nested) table is clicked.
+     *
+     * @param {MouseEvent} event - The MouseEvent that triggered the table action
+     * @param {HTMLElement} trigger - The element that can triggered the popover open.
+     */
+    this.handleTableClick = (event, trigger) => {
+      const target = event.target;
+      const ownTrigger = target.closest('.v-rte--extension-table-popover-trigger');
+      if (trigger !== ownTrigger) {
+        void this.popoverRef.hide();
+        void this.tableDynamicPopover.hide();
+        return;
+      }
+      void this.tableDynamicPopover.hide();
+      if (!this.popoverShow) {
+        columnOperation.remoteInvocationRegistry.call(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.popoverRef, vegaInternalEventId.VegaInternalPopoverUpdateTarget), ownTrigger);
+        void this.popoverRef.show();
+      }
+    };
+    /**
+     * Sync the selected cells from the table selection to the table setting component.
+     */
+    this.syncSelectedCells = () => {
+      if (this.tableSettingRef) {
+        const selectedCells = this.getTableSelectedCells();
+        this.tableSettingRef.selectedCells = selectedCells;
+      }
+    };
+    /**
+     * Receive setting menu click events.
+     *
+     * @param {CustomEvent<Array<string>>} event - The custom event emitted from the setting menu.
+     */
+    this.handleSettingMenuClick = (event) => {
+      const handler = this.settingHandlers.find((handler) => handler.canHandle(event.detail));
+      if (handler) {
+        handler.execute(event.detail, this.extensionContext, this.tableData);
+        if (event.detail[0] === columnOperation.TableSettingType.CAPTION) {
+          this.updateTableSettingCaption();
+        }
+      }
+      if (event.detail[0] === columnOperation.TableSettingType.TABLE_PROPERTIES ||
+        event.detail[0] === columnOperation.TableSettingType.CELL_PROPERTIES) {
+        void this.popoverRef.hide();
+        void this.tableDynamicPopover.show(event.detail[0]);
+      }
+    };
+    /**
+     * Handles the popover show event to sync the selected table cells to the table setting component.
+     */
+    this.handleTableSettingPopoverShow = () => {
+      this.syncSelectedCells();
+      this.popoverShow = true;
+    };
+  }
+  /**
+   * Injects the RTE extension context.
+   *
+   * @param {RTETableExtensionContext} context - The RTE extension context.
+   */
+  injectRTEExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Render the popover host and inject the table-setting component with refs wired up.
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {RTETableBlock} renderData - The table block to render.
+   * @param {TableDynamicPopoverRenderer} tableDynamicPopover - Renderer used to show
+   *  the secondary table popover (for example, table-properties-specific settings).
+   * @returns {VegaRTERenderResult} The rendered popover structure.
+   */
+  render(h, renderData, tableDynamicPopover) {
+    this.tableData = renderData;
+    this.tableDynamicPopover = tableDynamicPopover;
+    return h('vega-popover', {
+      trigger: 'click',
+      isScreenPosition: true,
+      class: 'rte-table-setting-popover',
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (popover) => {
+        this.popoverRef = popover;
+        if (this.popoverRef) {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, domNodeSubjectObserverFactory.VegaPopoverShow, this.handleTableSettingPopoverShow);
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, domNodeSubjectObserverFactory.VegaPopoverHide, () => (this.popoverShow = false));
+        }
+      },
+    }, [
+      h('div', { slot: 'popover' }, [
+        h('vega-rich-text-table-setting', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          ref: (el) => {
+            this.tableSettingRef = el;
+          },
+          selectedCells: this.getTableSelectedCells(),
+          onVegaClick: this.handleSettingMenuClick,
+        }),
+      ]),
+    ]);
+  }
+  /**
+   * Updates the table setting component caption state to match the given table data.
+   */
+  updateTableSettingCaption() {
+    const hasCaption = this.tableData.hasCaption();
+    if (this.tableSettingRef && this.tableSettingRef.hasCaption !== hasCaption) {
+      this.tableSettingRef.hasCaption = hasCaption;
+    }
+  }
+  /**
+   * Collects and returns the currently selected table cells.
+   *
+   * @returns {RTETableCellBlock[]} The array of currently selected table cell blocks.
+   */
+  getTableSelectedCells() {
+    let selectedCells = [];
+    if (this.extensionContext && this.extensionContext.tableSelection) {
+      const { tableSelection } = this.extensionContext;
+      selectedCells = tableSelection.getSelectedCells();
+    }
+    return selectedCells;
+  }
+}
+
+const CONTENT_CLASS_MAP = {
+  [columnOperation.TableSettingType.TABLE_PROPERTIES]: 'rte-table-properties-popover',
+  [columnOperation.TableSettingType.CELL_PROPERTIES]: 'rte-cell-properties-popover',
+};
+/**
+ * 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.
+ */
+class TableDynamicPopoverRenderer {
+  /**
+   * 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 !== columnOperation.TableSettingType.TABLE_PROPERTIES && cells.length === 1) {
+      target = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(cells[0]);
+    }
+    this.updateContent(type);
+    columnOperation.remoteInvocationRegistry.call(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.popoverRef, vegaInternalEventId.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
+   * @returns {VegaRTERenderResult} The rendered popover host.
+   */
+  render(h, getTableRef) {
+    this.getTableRef = getTableRef;
+    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;
+      },
+    }, [
+      h('div', {
+        slot: 'popover',
+        class: 'rte-table-dynamic-popover-content',
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        ref: (ref) => (this.contentRef = ref),
+      }, [
+        h('div', {
+          class: CONTENT_CLASS_MAP[columnOperation.TableSettingType.TABLE_PROPERTIES],
+        }, 'table-properties'),
+        h('div', {
+          class: CONTENT_CLASS_MAP[columnOperation.TableSettingType.CELL_PROPERTIES],
+        }, 'cell-properties'),
+      ]),
+    ]);
+  }
+  /**
+   * 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) {
+    if (type !== this.currentType) {
+      this.currentType = type;
+      this.contentRef.childNodes.forEach((child) => {
+        if (child.classList.contains(CONTENT_CLASS_MAP[this.currentType])) {
+          child.style.display = 'block';
+        }
+        else {
+          child.style.display = 'none';
+        }
+      });
+    }
+  }
+}
+
+/**
+ * Renderer for the RTETableBlock.
+ */
+class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
+  constructor() {
+    super(...arguments);
+    this.extensionContext = null;
+  }
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData, rteContext) {
+    const tableSettingPopoverRenderer = new TableSettingPopoverRenderer();
+    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer();
+    if (this.extensionContext) {
+      tableSettingPopoverRenderer.injectRTEExtensionContext(this.extensionContext);
+      tableDynamicPopoverRenderer.injectRTEExtensionContext(this.extensionContext);
+    }
+    let tableRef;
+    const table = this.renderTable(h, renderData);
+    const tableSettingPopover = tableSettingPopoverRenderer.render(h, renderData, tableDynamicPopoverRenderer);
+    const tableDynamicPopover = tableDynamicPopoverRenderer.render(h, () => tableRef);
+    const tableAnnotation = renderData.getAnnotationByType(columnOperation.RTETableExtensionAnnotationTypeEnum.TABLE);
+    const children = rteContext.editable
+      ? [
+        h('vega-rich-text-table-selection-widget', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onVegaRemove: (e) => {
+            e.stopPropagation();
+            this.handleTableRemove(renderData);
+          },
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onClick: (event) => tableSettingPopoverRenderer.handleTableClick(event, tableRef),
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onMouseLeave: () => {
+            tableSettingPopoverRenderer.syncSelectedCells();
+          },
+        }, [
+          h('vega-box', {
+            class: 'v-rte--extension-table-popover-trigger',
+            // eslint-disable-next-line jsdoc/require-jsdoc
+            ref: (ref) => (tableRef = ref),
+          }, [table, tableSettingPopover, tableDynamicPopover]),
+        ]),
+      ]
+      : [table];
+    const result = h('div', {
+      class: 'v-rte--extension-table-container',
+      style: Object.assign({}, (tableAnnotation && tableAnnotation.renderAlignmentStyle())),
+    }, children);
+    /**
+     * The getter for the children container.
+     *
+     * @returns {VegaRTERenderResult} - The children container render result.
+     */
+    result.childrenContainerGetter = () => table;
+    return result;
+  }
+  /**
+   * @inheritDoc
+   */
+  injectRTEScopeStyles() {
+    return tableBlockStylesCss;
+  }
+  /**
+   * Injects the RTE extension context.
+   *
+   * @param {RTETableExtensionContext} context - The RTE extension context.
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Renders the table element.
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {RTETableBlock} renderData - The table block to render.
+   * @returns {VegaRTERenderResult} - The rendered table element.
+   */
+  renderTable(h, renderData) {
+    var _a;
+    return h('table', Object.assign(Object.assign({ key: renderData.id }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(), class: [RTETableBlockRenderer.EXTENSION_TABLE_CLASS, renderData.getClasses()].join(' '), 
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (ref) => {
+        this.useRef(renderData)(ref);
+      } }));
+  }
+  /**
+   * Handles the removal of the table block.
+   *
+   * @param {RTETableBlock} renderData - The table block to remove.
+   */
+  handleTableRemove(renderData) {
+    renderData.parent.apply(new DeleteTableBlockAction(renderData));
+  }
+}
+RTETableBlockRenderer.EXTENSION_TABLE_CLASS = 'v-rte--extension-table';
+
+/**
+ * Renders a logic control block in the rich text editor.
+ */
+class RTETableHeadRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('thead', {
+      key: renderData.id,
+      ref: this.useRef(renderData),
+    });
+  }
+}
+
+/**
+ * Renders a logic control block in the rich text editor.
+ */
+class RTETableRowBlockRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('tr', {
+      key: renderData.id,
+      ref: this.useRef(renderData),
+    });
+  }
+}
+
+/**
+ * Renders a table cell block in the rich text editor.
+ */
+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 = ui.findParent(event.target, 'table');
+        const currentTable = ui.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();
+      },
+    };
+  }
+}
+
+/**
+ * Renders a table body block in the rich text editor.
+ */
+class RTETableBodyRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('tbody', {
+      key: renderData.id,
+      ref: this.useRef(renderData),
+    });
+  }
+}
+
+/**
+ * Renders a head cell block in the rich text editor.
+ */
+class RTETableHeadCellRenderer extends RTETableCellRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData, rteContext) {
+    return super.renderByCellType(h, renderData, rteContext, 'th');
+  }
+}
+
+const INSERT_TABLE_BLOCK = 'INSERT_TABLE_BLOCK';
+/**
+ * Action to insert a table block into the rich text editor.
+ */
+class InsertTableBlockAction extends codeBlock.ModifyContentAction {
+  constructor(rowCount, columnCount) {
+    super();
+    this.type = INSERT_TABLE_BLOCK;
+    this.rowCount = rowCount;
+    this.columnCount = columnCount;
+  }
+}
+
+const tableIcon = {
+  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 264V160H232V264H48zm0 48H232V432H64c-8.8 0-16-7.2-16-16V312zM280 432V312H464V416c0 8.8-7.2 16-16 16H280zM464 264H280V160H464V264zM64 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>`,
+};
+
+/**
+ * Function toolbar button renderer class.
+ */
+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 =
+        codeBlock.ActionHandleStrategyRegistry.canHandle(INSERT_TABLE_BLOCK, focusNode.parent) &&
+          codeBlock.ActionHandleStrategyRegistry.canHandle(codeBlock.ModifyContentActionType.INSERT_CHILDREN_AFTER, focusNode.parent.parent);
+    }
+    return host.disabled || !enableInsert;
+  }
+  /**
+   * @inheritDoc
+   */
+  handleButtonClick() {
+  }
+  /* istanbul ignore next */
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick() {
+  }
+  /**
+   * 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.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.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 dtoRendererManager.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);
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'rte-table': tableIcon });
+})();
+
+/**
+ * Strategy to handle the insertion of a block into the rich text editor.
+ */
+class InsertTableBlockStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const tableBlock = this.createTableBlock(action.rowCount, action.columnCount);
+    const emptyParagraph = super.createNewParagraph('');
+    const referenceBlock = this.getReferenceBlock(target);
+    if (referenceBlock) {
+      referenceBlock.parent.apply(new codeBlock.InsertChildrenAfterAction(referenceBlock, tableBlock, emptyParagraph));
+    }
+    else {
+      target.apply(new codeBlock.AppendChildrenAction([tableBlock, emptyParagraph]));
+    }
+    action.nextFocusNode = tableBlock.getFirstNode();
+  }
+  /**
+   * Create a table block with the specified number of rows and columns.
+   *
+   * @param {number} row - The number of rows in the table.
+   * @param {number} column - The number of columns in the table.
+   * @returns {RTETableBlock} The created table block.
+   */
+  createTableBlock(row, column) {
+    const normalizedRowCount = Math.max(row, 1);
+    const normalizedColumnCount = Math.max(column, 1);
+    return columnOperation.RTETableBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'table-block',
+      children: [columnOperation.generateTableBody(normalizedRowCount, normalizedColumnCount)],
+    });
+  }
+  /**
+   * We need to get the correct block if the current target is a block element to avoid nesting blocks.
+   *
+   * @param {RTEBlock} currentTarget - The current target block or content.
+   * @returns {Nullable<RTEBlock>} The reference block.
+   */
+  getReferenceBlock(currentTarget) {
+    if (!(currentTarget instanceof dtoRendererManager.VegaRTEContent)) {
+      return currentTarget;
+    }
+  }
+}
+
+/**
+ * Interceptor to prevent deletion of a table cell if it is the cell with empty content.
+ */
+class PreventCellContentDeleteInterceptor extends ActionHandlerInterceptor {
+  /**
+   * Prevent deletion if the target block is the only child of a table cell and is empty.
+   *
+   * @param {DeleteBlockContentAction} _action - the action to be intercepted
+   * @param {RTETextBlock} target - the target block
+   * @returns {boolean} - true if the deletion should be intercepted, false otherwise
+   */
+  canIntercept(_action, target) {
+    const cell = target.parent;
+    return cell instanceof columnOperation.RTETableCellBlock && cell.children.length === 1 && !target.isNotEmpty();
+  }
+  /**
+   * @inheritDoc
+   */
+  intercept() {
+  }
+}
+
+/**
+ * Strategy to handle the deletion of a table block from the parent.
+ */
+class DeleteTableBlockStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * Deletes the specified table block and updates the cursor position.
+   *
+   * @param {DeleteTableBlockAction} action - The action containing the table block to delete.
+   */
+  handleAction(action) {
+    const tableBlock = action.tableBlock;
+    const parent = tableBlock.parent;
+    const root = super.getRootContent(tableBlock);
+    const newParagraph = super.createNewParagraph('');
+    parent.apply(new codeBlock.InsertChildrenAfterAction(tableBlock, newParagraph));
+    parent.apply(new codeBlock.RemoveChildrenAction(tableBlock));
+    if (root) {
+      root.apply(new dtoRendererManager.UpdateCursorPositionAction(newParagraph.getLastNode()));
+    }
+  }
+}
+
+/**
+ * Interceptor to prevent removal of all children from a cell, ensuring at least one child remains.
+ */
+class PreventCellChildrenRemoveInterceptor extends ActionHandlerInterceptor {
+  /**
+   * Prevent removal if the target cell would be left empty after the action.
+   *
+   * @param {RemoveChildrenAction} action - the action to be intercepted
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} target - the target cell block
+   * @returns {boolean} - true if the removal should be intercepted, false otherwise
+   */
+  canIntercept(action, target) {
+    return action.entityToBeRemoved && target.children.length === 1;
+  }
+  /**
+   * Add a new empty text node to the cell to prevent it from removal.
+   *
+   * @param {ActionHandlerExecution} _execution - the original execution function
+   * @param {RemoveChildrenAction} action - the action to be intercepted
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} target - the target cell block
+   */
+  intercept(_execution, action, target) {
+    if (!(action.entityToBeRemoved instanceof codeBlock.RTETextBlock)) {
+      const newParagraph = codeBlock.RTETextBlock.from({
+        id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '' }],
+      });
+      target.children = [];
+      target.apply(new codeBlock.AppendChildrenAction([newParagraph]));
+      return;
+    }
+    action.entityToBeRemoved.apply(new codeBlock.AppendChildrenAction([
+      new codeBlock.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '', action.entityToBeRemoved),
+    ]));
+  }
+}
+
+/**
+ * Strategy class for handling the insertion of a new row into a table.
+ */
+class InsertTableRowStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { insertDirection, selectedRows } = action;
+    // The reference block will control where to insert the new row
+    let refBlock = insertDirection === columnOperation.InsertTableRowDirection.ABOVE
+      ? selectedRows[0]
+      : selectedRows[selectedRows.length - 1];
+    // The row need to be inserted is a header row
+    if (this.shouldInsertHeaderRow(refBlock, insertDirection)) {
+      const headerBlock = columnOperation.RTETableRowBlock.from({
+        id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+        type: 'table-row',
+        children: refBlock.children.map((item) => {
+          return this.getDefaultCellBlockTemplate(item.type);
+        }),
+      });
+      if (insertDirection === columnOperation.InsertTableRowDirection.ABOVE) {
+        refBlock.parent.apply(new codeBlock.InsertChildrenBeforeAction(refBlock, headerBlock));
+      }
+      else {
+        refBlock.parent.apply(new codeBlock.InsertChildrenAfterAction(refBlock, headerBlock));
+      }
+    }
+    else {
+      let direction = insertDirection;
+      let tableBody = target.children.find((block) => block instanceof columnOperation.RTETableBodyBlock);
+      // Should insert into body if reference block is in head row and body exists
+      if (refBlock.parent instanceof columnOperation.RTETableHeadBlock && tableBody) {
+        refBlock = tableBody.children[0];
+        direction = columnOperation.InsertTableRowDirection.ABOVE;
+      }
+      const refBlockIsHeaderRow = refBlock.parent instanceof columnOperation.RTETableHeadBlock;
+      const rowBlock = columnOperation.RTETableRowBlock.from({
+        id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+        type: 'table-row',
+        children: refBlock.children.map((item) => {
+          return this.getDefaultCellBlockTemplate(refBlockIsHeaderRow ? 'table-cell' : item.type);
+        }),
+      });
+      if (!tableBody) {
+        tableBody = columnOperation.RTETableBodyBlock.from({
+          id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+          type: 'table-body',
+          children: [],
+        });
+        tableBody.apply(new codeBlock.AppendChildrenAction([rowBlock]));
+        target.apply(new codeBlock.AppendChildrenAction([tableBody]));
+      }
+      else {
+        if (direction === columnOperation.InsertTableRowDirection.ABOVE) {
+          tableBody.apply(new codeBlock.InsertChildrenBeforeAction(refBlock, rowBlock));
+        }
+        else {
+          tableBody.apply(new codeBlock.InsertChildrenAfterAction(refBlock, rowBlock));
+        }
+      }
+    }
+  }
+  /**
+   * Checks if a header row should be inserted based on the selected rows and position.
+   *
+   * @param {RTETableRowBlock} refBlock - The reference table row block.
+   * @param {InsertTableRowDirection} direction - The direction to insert the new row (above or below).
+   * @returns {boolean} True if a header row should be inserted, false otherwise.
+   */
+  shouldInsertHeaderRow(refBlock, direction) {
+    if (direction === columnOperation.InsertTableRowDirection.ABOVE) {
+      return refBlock.parent instanceof columnOperation.RTETableHeadBlock;
+    }
+    else {
+      const parentBlock = refBlock.parent;
+      return (parentBlock instanceof columnOperation.RTETableHeadBlock &&
+        parentBlock.children[parentBlock.children.length - 1] !== refBlock);
+    }
+  }
+  /**
+   * Get the default cell block template.
+   *
+   * @param {string} cellType - The type of the cell block.
+   * @returns {VegaRTETableCellBlock | VegaRTETableHeadCellBlock} The default cell block template.
+   */
+  getDefaultCellBlockTemplate(cellType) {
+    const id = createPublicApiRuntimeMetricsSlimmer.generateUUID();
+    return {
+      id,
+      type: cellType,
+      children: [
+        {
+          id: `${id}-p`,
+          type: 'paragraph',
+          nodes: [
+            {
+              id: `${id}-p-t`,
+              type: 'text',
+              text: '',
+            },
+          ],
+        },
+      ],
+    };
+  }
+}
+
+const TABLE_CAPTION_PLACEHOLDER_TEXT = 'Enter table caption';
+/**
+ * Renderer for the optional table caption node.
+ */
+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(typeGuard.isNonNullable)
+        .join(' '),
+      'data-placeholder': TABLE_CAPTION_PLACEHOLDER_TEXT,
+    });
+  }
+}
+
+/**
+ * Strategy class for handling the deletion of table rows.
+ */
+class DeleteTableRowStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { rowsToBeRemoved } = action;
+    const futureFocusRow = this.getFutureFocusRow(rowsToBeRemoved[0], rowsToBeRemoved[rowsToBeRemoved.length - 1], target);
+    rowsToBeRemoved.forEach((row) => {
+      this.removeRow(row);
+    });
+    if (futureFocusRow) {
+      const root = this.getRootContent(target);
+      if (root) {
+        const focusNode = futureFocusRow.getLastNode();
+        root.apply(new dtoRendererManager.UpdateCursorPositionAction(focusNode, focusNode.getRangeEndOffset()));
+      }
+    }
+  }
+  /**
+   * Removes the specified row from its parent table section.
+   * // TODO: Add handling for when selected row has or in merge column.
+   *
+   * @param {RTETableRowBlock} rowToBeRemoved The row to be removed.
+   */
+  removeRow(rowToBeRemoved) {
+    rowToBeRemoved.parent.apply(new codeBlock.RemoveChildrenAction(rowToBeRemoved));
+  }
+  /**
+   * Get the future focus row after deletion.
+   *
+   * @param {RTETableRowBlock} startRow - The first row to be deleted.
+   * @param {RTETableRowBlock} endRow - The last row to be deleted.
+   * @param {RTETableBlock} table - The table containing the rows.
+   * @returns {Nullable<RTETableRowBlock>} The row to be focused after deletion.
+   */
+  getFutureFocusRow(startRow, endRow, table) {
+    const allRows = table.children
+      .filter((item) => item instanceof columnOperation.RTETableHeadBlock || item instanceof columnOperation.RTETableBodyBlock)
+      .flatMap((block) => block.children);
+    const startIndex = allRows.indexOf(startRow);
+    const endIndex = allRows.indexOf(endRow);
+    if (allRows[startIndex - 1]) {
+      return allRows[startIndex - 1];
+    }
+    else if (allRows[endIndex + 1]) {
+      return allRows[endIndex + 1];
+    }
+  }
+}
+
+/**
+ * Table selection helper used for mouse drag selection of cells.
+ */
+class RTETableSelection {
+  constructor() {
+    /**
+     *  Indicates whether the user is currently performing a drag selection.
+     */
+    this.dragging = false;
+    /**
+     * Anchor cell where the drag selection started.
+     */
+    this.anchorCell = null;
+    /**
+     * Collection of currently selected cells.
+     */
+    this.selectedCells = new Set();
+    this.syncRTESelectionWithDebounce = timer.debounce(this.syncRTESelection, 100, this);
+    this.handleSelectionChangeWithDebounce = timer.debounce(this.handleSelectionChange, 10, this);
+    /**
+     * Recursively filter and collect selected table cell blocks within the given node.
+     *
+     * @param {Range} range - The current selection range.
+     * @param {Node} node - The current node to check for selection.
+     * @returns {RTETableCellBlock[]} A list of selected table cell blocks.
+     */
+    this.filterSelectedCell = (range, node) => {
+      const selectedCells = new Set();
+      if (range.intersectsNode(node)) {
+        if (node.nodeType === Node.TEXT_NODE) {
+          const focusedNodeDto = codeBlock.stateEntityRenderingRegistry.getEntityByDOM(node.parentElement);
+          if (focusedNodeDto) {
+            const cell = columnOperation.getParentBlockByType(focusedNodeDto.parent, columnOperation.RTETableCellBlock);
+            if (cell) {
+              selectedCells.add(cell);
+              return Array.from(selectedCells);
+            }
+          }
+        }
+        node.childNodes.forEach((child) => this.filterSelectedCell(range, child).forEach((cell) => {
+          selectedCells.add(cell);
+        }));
+      }
+      return Array.from(selectedCells);
+    };
+    /**
+     * Update the styles of the selected cells.
+     *
+     * @param {RTETableCellBlock} cell - The cell to update style for.
+     * @param {number} total - The total number of selected cells.
+     */
+    this.updateSelectedStyles = (cell, total) => {
+      const selectedClass = total === 1 ? 'v-rte-table-cell-focused' : 'v-rte-table-cell-selected';
+      const cellRef = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(cell);
+      if (cellRef) {
+        cellRef.classList.add(selectedClass);
+      }
+    };
+    /**
+     * Handles the document mouse up event to finish drag selection.
+     */
+    this.handleDocMouseUp = () => {
+      this.endDrag();
+      const safeDocument = tryGetDocument.tryGetDocument();
+      if (safeDocument) {
+        safeDocument.removeEventListener('mouseup', this.handleDocMouseUp);
+      }
+    };
+    /**
+     * Resets the table selection when clicking outside the table.
+     */
+    this.handleContentClick = () => {
+      this.clearSelection();
+      const editorContent = 
+      // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+      this.context.host.shadowRoot.querySelector('.rich-text-editor-container');
+      if (editorContent) {
+        editorContent.removeEventListener('mousedown', this.handleContentClick, true);
+      }
+    };
+  }
+  /**
+   * Compute all cells inside the rectangle defined by the start and end cells.
+   *
+   * Note: this only performs the calculation and does not modify the internal `selectedCells` set,
+   * so callers can decide how to apply the result.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} anchor - Drag start cell (anchor cell).
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} focus - Current drag focus cell.
+   * @returns {(RTETableCellBlock | RTETableHeadCellBlock)[]} All cells in the rectangular selection area.
+   */
+  static computeRectRange(anchor, focus) {
+    // Collect all row blocks (from both head and body) under the same table,
+    // then compute the rectangle over this flattened row list.
+    const anchorRow = anchor.parent;
+    const focusRow = focus.parent;
+    const anchorSection = anchorRow.parent;
+    const focusSection = focusRow.parent;
+    const anchorTable = anchorSection.parent;
+    const focusTable = focusSection.parent;
+    // If they are not in the same table at all, just return empty.
+    if (anchorTable !== focusTable) {
+      return [];
+    }
+    // Flatten head rows (if any) + body rows into a single ordered list.
+    const allRows = [];
+    const tableChildren = anchorTable.children;
+    tableChildren.forEach((section) => {
+      section.children.forEach((row) => allRows.push(row));
+    });
+    const anchorRowIndex = allRows.indexOf(anchorRow);
+    const focusRowIndex = allRows.indexOf(focusRow);
+    const startRow = Math.min(anchorRowIndex, focusRowIndex);
+    const endRow = Math.max(anchorRowIndex, focusRowIndex);
+    const anchorColIndex = anchorRow.children.indexOf(anchor);
+    const focusColIndex = focusRow.children.indexOf(focus);
+    const startCol = Math.min(anchorColIndex, focusColIndex);
+    const endCol = Math.max(anchorColIndex, focusColIndex);
+    const result = [];
+    for (let r = startRow; r <= endRow; r++) {
+      const row = allRows[r];
+      for (let c = startCol; c <= endCol; c++) {
+        const cell = row.children[c];
+        if (cell) {
+          result.push(cell);
+        }
+      }
+    }
+    return result;
+  }
+  /**
+   * Clean up event listeners.
+   */
+  destroy() {
+    this.removeSelectionChangeListener();
+  }
+  /**
+   * Inject the extension context and set up selection change listener.
+   *
+   * @param {RTEExtensionContext} context - The extension context.
+   */
+  init(context) {
+    this.context = context;
+    this.addSelectionChangeListener();
+  }
+  /**
+   * Set the selected cells to the given list, replacing any existing selection.
+   *
+   * @param {RTETableCellBlock} cells - The cells to select.
+   */
+  setSelectedCells(cells) {
+    this.updateSelectedCells(cells);
+  }
+  /**
+   * Get all currently selected cells.
+   *
+   * @returns {(RTETableCellBlock | RTETableHeadCellBlock)[]} A flat list of selected cells.
+   */
+  getSelectedCells() {
+    return Array.from(this.selectedCells);
+  }
+  /**
+   * Handle mouse down on a cell: start drag selection from the given cell.
+   *
+   * @param {HTMLElement} cellRef - The cell where the drag starts.
+   */
+  focusCell(cellRef) {
+    const cellBlock = codeBlock.stateEntityRenderingRegistry.getEntityByDOM(cellRef);
+    if (cellBlock) {
+      this.anchorCell = cellBlock;
+      this.setSelectedCells([cellBlock]);
+      this.addListeners();
+    }
+  }
+  /**
+   * Handle drag over a cell (typically called on `mouseenter` while dragging).
+   * Maintains a rectangular selection between the anchor cell and the current cell.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} cell - The cell currently under the drag.
+   */
+  dragOver(cell) {
+    if (!this.anchorCell) {
+      return;
+    }
+    // Always compute the rectangle strictly from the original anchorCell
+    // (the cell where startDrag was first called) to the current cell.
+    const rectCells = RTETableSelection.computeRectRange(this.anchorCell, cell);
+    if (rectCells.length > 1) {
+      this.startDrag();
+    }
+    if (this.dragging) {
+      this.preventTextSelection(rectCells);
+      this.updateSelectedCells(rectCells, { debounceSync: true });
+    }
+  }
+  /**
+   * Handle mouse up: stop drag selection.
+   */
+  endDrag() {
+    this.dragging = false;
+    // Reset anchor after drag ends so the next drag can start from a new cell.
+    this.anchorCell = null;
+  }
+  /**
+   * Clear the current selection state without changing the drag flag.
+   */
+  clearSelection() {
+    this.selectedCells.forEach((cell) => {
+      const cellRef = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(cell);
+      if (cellRef) {
+        cellRef.classList.remove('v-rte-table-cell-selected', 'v-rte-table-cell-focused');
+      }
+    });
+    this.selectedCells.clear();
+  }
+  /**
+   * Add a selectionchange listener to the document to handle cell click selection.
+   */
+  addSelectionChangeListener() {
+    const safeDocument = tryGetDocument.tryGetDocument();
+    if (safeDocument) {
+      safeDocument.addEventListener('selectionchange', this.handleSelectionChangeWithDebounce);
+    }
+  }
+  /**
+   * Remove the selectionchange listener from the document.
+   */
+  removeSelectionChangeListener() {
+    const safeDocument = tryGetDocument.tryGetDocument();
+    if (safeDocument) {
+      safeDocument.removeEventListener('selectionchange', this.handleSelectionChangeWithDebounce);
+    }
+  }
+  /**
+   * Handle selection change events from the document for the cell click selection.
+   */
+  handleSelectionChange() {
+    if (this.dragging) {
+      this.syncRTESelectionWithDebounce();
+      return;
+    }
+    const selection = this.context.getSelection();
+    if (selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const commonAncestorContainer = range.commonAncestorContainer;
+      const rangeInTable = !!ui.findParent(commonAncestorContainer, `table.${RTETableBlockRenderer.EXTENSION_TABLE_CLASS}`);
+      if (rangeInTable) {
+        const selectedCells = this.filterSelectedCell(range, commonAncestorContainer);
+        this.setSelectedCells(selectedCells);
+      }
+    }
+  }
+  /**
+   * Mark the beginning of a drag operation.
+   */
+  startDrag() {
+    this.dragging = true;
+  }
+  /**
+   * Add the given cells to the current selection set.
+   *
+   * @param {RTETableCellBlock[]} cells - The cells to add to the selection.
+   * @param {{ debounceSync?: boolean }} [options] - Options for updating selection.
+   * @param {boolean} [options.debounceSync] - Whether to debounce the RTE selection sync.
+   */
+  updateSelectedCells(cells, { debounceSync } = {}) {
+    this.clearSelection();
+    cells.forEach((cell) => {
+      this.selectedCells.add(cell);
+      this.updateSelectedStyles(cell, cells.length);
+    });
+    if (debounceSync) {
+      this.syncRTESelectionWithDebounce();
+    }
+    else {
+      this.syncRTESelection();
+    }
+  }
+  /**
+   * Synchronizes the rich text editor selection with the selected table cells.
+   */
+  syncRTESelection() {
+    const cells = Array.from(this.selectedCells);
+    const nodes = cells
+      .flatMap((cell) => {
+      return cell.children.flatMap((block) => {
+        return block.children.flatMap((node) => {
+          // TODO: Nested table deletion will track in https://gethired.atlassian.net/browse/VD-7860
+          if (node instanceof codeBlock.RTENode) {
+            return node;
+          }
+        });
+      });
+    })
+      .filter(typeGuard.isNonNullable);
+    if (cells.length > 1) {
+      this.context.setSelectedNodes(nodes, {
+        startNode: nodes[0],
+        endNode: nodes[nodes.length - 1],
+        startOffset: 0,
+        endOffset: nodes[nodes.length - 1].getRangeEndOffset(),
+      });
+    }
+  }
+  /**
+   * Prevents text selection during drag operations.
+   *
+   * @param {RTETableCellBlock[]} selectedCells - The currently selected table cells.
+   */
+  preventTextSelection(selectedCells) {
+    const selection = this.context.getSelection();
+    selection.removeAllRanges();
+    if (selectedCells.length > 0) {
+      const startContainer = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(selectedCells[0]);
+      if (startContainer) {
+        const newRange = new Range();
+        newRange.setStart(startContainer, 0);
+        newRange.setEnd(startContainer, 0);
+        selection.addRange(newRange);
+      }
+    }
+  }
+  /**
+   * Adds a mouse up listener to the document to finish drag selection.
+   *
+   */
+  addListeners() {
+    const safeDocument = tryGetDocument.tryGetDocument();
+    if (safeDocument) {
+      safeDocument.addEventListener('mouseup', this.handleDocMouseUp);
+    }
+    const editorContent = 
+    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+    this.context.host.shadowRoot.querySelector('.rich-text-editor-container');
+    if (editorContent) {
+      editorContent.addEventListener('mousedown', this.handleContentClick, true);
+    }
+  }
+}
+
+/**
+ * Strategy class for handling converting selected rows to header rows or reverting them back to normal rows.
+ */
+class ToggleHeaderRowStrategy extends codeBlock.ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { selectedRows } = action;
+    const headerRows = [];
+    const bodyRows = [];
+    for (const row of selectedRows) {
+      if (row.parent instanceof columnOperation.RTETableBodyBlock) {
+        bodyRows.push(row);
+      }
+      else {
+        headerRows.push(row);
+      }
+    }
+    if (bodyRows.length > 0) {
+      this.convertToHeaderRows(bodyRows, target);
+    }
+    else {
+      this.revertToBodyRows(headerRows, target);
+    }
+    const root = this.getRootContent(target);
+    if (root) {
+      const focusNode = selectedRows[0].getFirstNode();
+      focusNode && root.apply(new dtoRendererManager.UpdateCursorPositionAction(focusNode, 0));
+    }
+  }
+  /**
+   * Converts normal rows to header rows.
+   *
+   * @param {RTETableRowBlock[]} rows - The table row blocks to convert.
+   * @param {RTETableBlock} table - The table block containing the rows.
+   */
+  convertToHeaderRows(rows, table) {
+    let tableHead = table.children.find((block) => block instanceof columnOperation.RTETableHeadBlock);
+    const tableBody = rows[0].parent;
+    if (!tableHead) {
+      tableHead = columnOperation.RTETableHeadBlock.from({
+        id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+        type: 'table-head',
+        children: [],
+      });
+      table.apply(new codeBlock.InsertChildrenBeforeAction(tableBody, tableHead));
+    }
+    const endIndex = tableBody.children.indexOf(rows[rows.length - 1]);
+    const shouldConvertRows = tableBody.children.slice(0, endIndex + 1);
+    for (let i = 0; i < shouldConvertRows.length; i++) {
+      const rowBlock = shouldConvertRows[i];
+      rowBlock.children = rowBlock.children.map((cell) => this.convertTdToTh(cell));
+      tableBody.apply(new codeBlock.RemoveChildrenAction(rowBlock));
+    }
+    tableHead.apply(new codeBlock.AppendChildrenAction(shouldConvertRows));
+  }
+  /**
+   * Converts header rows back to normal rows.
+   *
+   * @param {RTETableRowBlock[]} rows - The table row blocks to convert.
+   * @param {RTETableBlock} table - The table block containing the rows.
+   */
+  revertToBodyRows(rows, table) {
+    let tableBody = table.children.find((block) => block instanceof columnOperation.RTETableBodyBlock);
+    const tableHead = rows[0].parent;
+    if (!tableBody) {
+      tableBody = columnOperation.RTETableBodyBlock.from({
+        id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+        type: 'table-body',
+        children: [],
+      });
+      table.apply(new codeBlock.InsertChildrenAfterAction(tableHead, tableBody));
+    }
+    const firstBodyRow = tableBody.children[0];
+    const startIndex = tableHead.children.indexOf(rows[0]);
+    const shouldConvertRows = tableHead.children.slice(startIndex);
+    for (let i = 0; i < shouldConvertRows.length; i++) {
+      const rowBlock = shouldConvertRows[i];
+      tableHead.apply(new codeBlock.RemoveChildrenAction(rowBlock));
+      rowBlock.children = this.convertThToTd(rowBlock, firstBodyRow);
+      if (firstBodyRow) {
+        tableBody.apply(new codeBlock.InsertChildrenBeforeAction(firstBodyRow, rowBlock));
+      }
+    }
+    if (!firstBodyRow) {
+      tableBody.apply(new codeBlock.AppendChildrenAction(shouldConvertRows));
+    }
+  }
+  /**
+   * Converts a table data cell to a table header cell.
+   *
+   * @param {RTETableHeadCellBlock} cell - The table cell block to convert.
+   * @returns {RTETableHeadCellBlock} The converted table header cell block.
+   */
+  convertTdToTh(cell) {
+    if (cell instanceof columnOperation.RTETableHeadCellBlock) {
+      return cell;
+    }
+    const headCell = columnOperation.RTETableHeadCellBlock.from(cell.toJSON());
+    headCell.parent = cell.parent;
+    return headCell;
+  }
+  /**
+   * Converts table header cells to table body cells.
+   *
+   * @param {RTETableRowBlock} row - The table row block containing the cells.
+   * @param {Nullable<RTETableRowBlock>} referenceRow - The reference row for comparison.
+   * @returns {RTETableCellBlock[]} The converted table body cell blocks.
+   */
+  convertThToTd(row, referenceRow) {
+    return row.children.map((cell, index) => {
+      let bodyCell = cell;
+      if (!referenceRow || referenceRow.children[index].type !== cell.type) {
+        const cellJSON = cell.toJSON();
+        bodyCell = columnOperation.RTETableCellBlock.from(cellJSON);
+      }
+      bodyCell.parent = row;
+      return bodyCell;
+    });
+  }
+}
+
+/**
+ * Strategy to handle the insertion of a table column into the RTETable.
+ */
+class InsertTableColumnStrategy extends columnOperation.TableColumnStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const insertDirection = action.insertDirection;
+    const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellInsertRange);
+    const allTableRows = columnOperation.getAllTableRows(target);
+    allTableRows.forEach((row) => {
+      if (insertDirection === columnOperation.InsertTableColumnDirection.LEFT) {
+        const newCell = this.generateTableCell(row.children[startCellIndex]);
+        row.apply(new codeBlock.InsertChildrenBeforeAction(row.children[startCellIndex], newCell));
+      }
+      else {
+        const newCell = this.generateTableCell(row.children[endCellIndex + 1] || row.children[endCellIndex]);
+        row.apply(new codeBlock.InsertChildrenAfterAction(row.children[endCellIndex], newCell));
+      }
+    });
+  }
+  /**
+   * Generate a new table cell based on the original cell type.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} originalCell The original table cell block to base the new cell on.
+   * @returns {RTETableCellBlock | RTETableHeadCellBlock} The newly generated table cell block.
+   */
+  generateTableCell(originalCell) {
+    if (originalCell instanceof columnOperation.RTETableHeadCellBlock) {
+      return columnOperation.RTETableHeadCellBlock.from(columnOperation.getDefaultCellBlockTemplate(originalCell.type));
+    }
+    return columnOperation.RTETableCellBlock.from(columnOperation.getDefaultCellBlockTemplate(originalCell.type));
+  }
+}
+
+/**
+ * Strategy to handle the deletion of table column from the parent.
+ */
+class DeleteTableColumnStrategy extends columnOperation.TableColumnStrategy {
+  /**
+   * Deletes the specified table column and updates the cursor position.
+   *
+   * @param {DeleteTableColumnAction} action - The action containing the table column to delete.
+   * @param {RTETableBlock} target - The target table block from which the column will be deleted.
+   */
+  handleAction(action, target) {
+    const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellDeleteRange);
+    const allTableRows = columnOperation.getAllTableRows(target);
+    // Find the next focusable cell before deletion
+    const nextFocusableCell = this.findNextFocusableCell(action.tableCellDeleteRange, [startCellIndex, endCellIndex]);
+    allTableRows.forEach((row) => {
+      this.deleteCellsInRow(row, startCellIndex, endCellIndex);
+    });
+    const root = this.getRootContent(target);
+    const nextFocusNode = columnOperation.getFirstNode(nextFocusableCell);
+    if (root && nextFocusNode) {
+      root.apply(new dtoRendererManager.UpdateCursorPositionAction(nextFocusNode));
+    }
+  }
+  /**
+   * Find the next focusable cell either after the deleted range or before it.
+   *
+   * @param {RTETableCellBlock[]} tableCellBlockDeleteRange - The range of table cell blocks to be deleted.
+   * @param {number[]} indexRange - The start and end indices of the cells to be deleted.
+   * @returns {Nullable<RTETableCellBlock | RTETableHeadCellBlock>} The next focusable cell.
+   */
+  findNextFocusableCell(tableCellBlockDeleteRange, indexRange) {
+    const cellAfterEndOfRange = tableCellBlockDeleteRange[tableCellBlockDeleteRange.length - 1].parent.children[indexRange[indexRange.length - 1] + 1];
+    const cellBeforeStartOfRange = tableCellBlockDeleteRange[0].parent.children[indexRange[0] - 1];
+    return cellAfterEndOfRange !== null && cellAfterEndOfRange !== void 0 ? cellAfterEndOfRange : cellBeforeStartOfRange;
+  }
+  /**
+   * Deletes cells in a given row from start index to end index.
+   *
+   * @param {RTETableRowBlock} row - The table row block.
+   * @param {number} startCellIndex - The start index of the cell to delete.
+   * @param {number} endCellIndex - The end index of the cell to delete.
+   */
+  deleteCellsInRow(row, startCellIndex, endCellIndex) {
+    const needDeleteCells = [];
+    for (let index = startCellIndex; index <= endCellIndex; index++) {
+      needDeleteCells.push(row.children[index]);
+    }
+    needDeleteCells.forEach((cell) => {
+      row.apply(new codeBlock.RemoveChildrenAction(cell));
+    });
+  }
+}
+
+/**
+ * Strategy to handle the selection of a table column.
+ */
+class SelectTableColumnStrategy extends columnOperation.TableColumnStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellSelectRange);
+    const allTableRows = columnOperation.getAllTableRows(target);
+    const allNeedSelectedCells = [];
+    allTableRows.forEach((row) => {
+      for (let cellIndex = startCellIndex; cellIndex <= endCellIndex; cellIndex++) {
+        const cellToSelect = row.children[cellIndex];
+        allNeedSelectedCells.push(cellToSelect);
+      }
+    });
+    action.selectCellCallback(allNeedSelectedCells);
+  }
+}
+
+/**
+ * Interceptor to prevent insertion of non-cell blocks into a table row.
+ */
+class PreventRowInsertInterceptor extends ActionHandlerInterceptor {
+  /**
+   * Prevent insertion if any of the children to be inserted is not a table cell block.
+   *
+   * @param {InsertChildrenBeforeAction} action - the action to be intercepted
+   * @returns {boolean} - true if the insertion should be intercepted, false otherwise
+   */
+  canIntercept(action) {
+    return action.childrenToBeInserted.some((item) => !(item instanceof columnOperation.RTETableCellBlock));
+  }
+  /**
+   * @inheritDoc
+   */
+  intercept() {
+  }
+}
+
+/**
+ * Function extension class for Vega Rich Text Editor.
+ */
+class VegaRTETableExtension extends VegaRTEExtension {
+  constructor() {
+    super();
+    this.toolbarButtonRenderer = new RTETableToolbarButtonRenderer();
+    this.tableBlockRenderer = new RTETableBlockRenderer();
+    this.tableRowBlockRenderer = new RTETableRowBlockRenderer();
+    this.tableCellRenderer = new RTETableCellRenderer();
+    this.tableHeadCellRenderer = new RTETableHeadCellRenderer();
+    this.tableSelection = new RTETableSelection();
+    this.registerToolbarButtonRenderer('table', this.toolbarButtonRenderer);
+    this.registerBlockBasicStrategies(columnOperation.RTETableBlock.name);
+    this.registerBlockBasicStrategies(columnOperation.RTETableHeadBlock.name);
+    this.registerBlockBasicStrategies(columnOperation.RTETableHeadCellBlock.name);
+    this.registerBlockBasicStrategies(columnOperation.RTETableRowBlock.name);
+    this.registerBlockBasicStrategies(columnOperation.RTETableCellBlock.name);
+    this.registerBlockBasicStrategies(columnOperation.RTETableBodyBlock.name);
+    this.registerRenderer('table-block', this.tableBlockRenderer);
+    this.registerRenderer('table-head', new RTETableHeadRenderer());
+    this.registerRenderer('table-head-cell', this.tableHeadCellRenderer);
+    this.registerRenderer('table-row', this.tableRowBlockRenderer);
+    this.registerRenderer('table-cell', this.tableCellRenderer);
+    this.registerRenderer('table-body', new RTETableBodyRenderer());
+    this.registerRenderer('table-caption', new RTETableCaptionRenderer());
+    this.registerNode('table-block', columnOperation.RTETableBlock);
+    this.registerNode('table-head', columnOperation.RTETableHeadBlock);
+    this.registerNode('table-head-cell', columnOperation.RTETableHeadCellBlock);
+    this.registerNode('table-row', columnOperation.RTETableRowBlock);
+    this.registerNode('table-cell', columnOperation.RTETableCellBlock);
+    this.registerNode('table-body', columnOperation.RTETableBodyBlock);
+    this.registerNode('table-caption', RTETableCaptionBlock);
+  }
+  /**
+   * Initializes the extension with the given context
+   *
+   * @param {RTEExtensionContext} context - extension context
+   */
+  initialExtension(context) {
+    super.initialExtension(context);
+    this.tableSelection.init(context);
+    const tableExtensionContext = Object.assign(Object.assign({}, context), { tableSelection: this.tableSelection });
+    this.toolbarButtonRenderer.injectExtensionContext(tableExtensionContext);
+    this.tableBlockRenderer.injectExtensionContext(tableExtensionContext);
+    this.tableCellRenderer.injectExtensionContext(tableExtensionContext);
+    this.tableHeadCellRenderer.injectExtensionContext(tableExtensionContext);
+  }
+  /**
+   * @inheritDoc
+   */
+  destroyExtension() {
+    this.tableSelection.destroy();
+  }
+}
+(() => {
+  const insertTableBlockStrategy = new InsertTableBlockStrategy();
+  const deleteTableBlockStrategy = new DeleteTableBlockStrategy();
+  VegaRTEExtension.registerActionHandleStrategy(dtoRendererManager.VegaRTEContent.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(dtoRendererManager.VegaRTEContent.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(columnOperation.RTETableCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(columnOperation.RTETableHeadCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(codeBlock.RTETextBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(dtoRendererManager.RTEImageBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(columnOperation.RTETableBlock.name, columnOperation.INSERT_TABLE_ROW, new InsertTableRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(columnOperation.RTETableBlock.name, columnOperation.DELETE_TABLE_ROW, new DeleteTableRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(columnOperation.RTETableBlock.name, columnOperation.TOGGLE_HEADER_ROW, new ToggleHeaderRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(columnOperation.RTETableBlock.name, columnOperation.INSERT_TABLE_COLUMN, new InsertTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(columnOperation.RTETableBlock.name, columnOperation.DELETE_TABLE_COLUMN, new DeleteTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(columnOperation.RTETableBlock.name, columnOperation.TOGGLE_HEADER_TABLE_COLUMN, new columnOperation.ToggleHeaderTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(columnOperation.RTETableBlock.name, columnOperation.SELECT_TABLE_COLUMN, new SelectTableColumnStrategy());
+  VegaRTEExtension.registerActionHandlerInterceptor(codeBlock.RTETextBlock.name, codeBlock.ModifyContentActionType.DELETE_BLOCK_CONTENT, new PreventCellContentDeleteInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(columnOperation.RTETableRowBlock.name, codeBlock.ModifyContentActionType.INSERT_CHILDREN_BEFORE, new PreventRowInsertInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(columnOperation.RTETableCellBlock.name, codeBlock.ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(columnOperation.RTETableHeadCellBlock.name, codeBlock.ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
+})();
+
 exports.ActionHandlerInterceptor = ActionHandlerInterceptor;
 exports.InsertNodeToNearestRootAction = InsertNodeToNearestRootAction;
 exports.InternalVegaZIndexManager = InternalVegaZIndexManager$1;
@@ -2899,6 +4828,7 @@ exports.VegaNotify = VegaNotify;
 exports.VegaRTEExtension = VegaRTEExtension;
 exports.VegaRTEExtensionRenderer = VegaRTEExtensionRenderer;
 exports.VegaRTEFunctionExtension = VegaRTEFunctionExtension;
+exports.VegaRTETableExtension = VegaRTETableExtension;
 exports.VegaRTETokenExtension = VegaRTETokenExtension;
 exports.VegaRTEToolbarButtonRenderer = VegaRTEToolbarButtonRenderer;
 exports.VegaSkeletonLoader = VegaSkeletonLoader;