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

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

@@ -0,0 +1,371 @@
+import { RTETableCellBlock } from './dto/table-cell-block';
+import { RTETableBlock } from './dto/table-block';
+import { RTENode } from '../../dto/nodes/node.abstract';
+import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
+import { debounce } from '../../../../utils/timer';
+import { tryGetDocument } from '../../../../utils/try-get-document';
+import { findParent } from '../../../../utils/ui';
+import { getParentBlockByType } from './utils/utils';
+import { isNonNullable } from '../../../../types/type-guard';
+import changeManager from '../../../../helpers/change-manager/change-manager';
+import DomNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalRTEExtensionTableCellSelectionChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/**
+ * Table selection helper used for mouse drag selection of cells.
+ */
+export 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 = debounce(this.syncRTESelection, 100, this);
+    this.handleSelectionChangeWithDebounce = 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 = stateEntityRenderingRegistry.getEntityByDOM(node.parentElement);
+          if (focusedNodeDto) {
+            const cell = getParentBlockByType(focusedNodeDto.parent, 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 = 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();
+      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) {
+    const firstCell = Array.from(this.selectedCells)[0] || cells[0];
+    this.updateSelectedCells(cells);
+    this.emitCellSelectionChange(firstCell, 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 = 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;
+  }
+  /**
+   * Emit table-cell selection change notify for the owning table.
+   *
+   * @param {RTETableCellBlock} firstCell - First cell of the table.
+   * @param {RTETableCellBlock[]} cells - The current selected table cells.
+   */
+  emitCellSelectionChange(firstCell, cells) {
+    const table = getParentBlockByType(firstCell, RTETableBlock);
+    if (table) {
+      const tableRef = stateEntityRenderingRegistry.getDOMByEntity(table);
+      if (tableRef) {
+        changeManager.notify(DomNodeSubjectFactory.getSubject(tableRef, VegaInternalRTEExtensionTableCellSelectionChange), {
+          host: tableRef,
+          detail: cells,
+        });
+      }
+    }
+  }
+  /**
+   * Clear the current selection state without changing the drag flag.
+   */
+  clearSelection() {
+    this.selectedCells.forEach((cell) => {
+      const cellRef = 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();
+    if (safeDocument) {
+      safeDocument.addEventListener('selectionchange', this.handleSelectionChangeWithDebounce);
+    }
+  }
+  /**
+   * Remove the selectionchange listener from the document.
+   */
+  removeSelectionChangeListener() {
+    const safeDocument = 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 = !!findParent(commonAncestorContainer, `table`);
+      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 RTENode) {
+            return node;
+          }
+        });
+      });
+    })
+      .filter(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 = 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();
+    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);
+    }
+  }
+}

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

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

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

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