Tiptap Extension Table Cell

import TableCell from "@tiptap/extension-table-cell";

import { TableCell, TableCellOptions } from "@tiptap/extension-table-cell";

const TableCell = require("@tiptap/extension-table-cell");
const { TableCell, TableCellOptions } = require("@tiptap/extension-table-cell");

import { Editor } from "@tiptap/core";
import TableCell from "@tiptap/extension-table-cell";

const editor = new Editor({
  extensions: [
    TableCell.configure({
      HTMLAttributes: {
        class: "custom-table-cell",
      },
    }),
  ],
});

/**
 * TableCell node extension for Tiptap editor
 * Handles table cell functionality with support for colspan, rowspan, and custom attributes
 */
const TableCell: Node<TableCellOptions>;

/**
 * Node extension class from @tiptap/core
 * Extends Extendable with configuration options and storage
 */
abstract class Node<Options = any, Storage = any> {
  type: 'node';
  name: string;
  
  /**
   * Create a new Node instance
   */
  static create<O = any, S = any>(
    config?: Partial<NodeConfig<O, S>> | (() => Partial<NodeConfig<O, S>>)
  ): Node<O, S>;
  
  /**
   * Configure the node with partial options
   */
  configure(options?: Partial<Options>): Node<Options, Storage>;
  
  /**
   * Extend the node with additional configuration
   */
  extend<ExtendedOptions = Options, ExtendedStorage = Storage>(
    extendedConfig?: Partial<NodeConfig<ExtendedOptions, ExtendedStorage>>
  ): Node<ExtendedOptions, ExtendedStorage>;
}

/**
 * DOM output specification type for rendering HTML elements
 */
type DOMOutputSpec = [string, Record<string, any>?, ...any];

import { Editor } from "@tiptap/core";
import TableCell from "@tiptap/extension-table-cell";

const editor = new Editor({
  extensions: [
    TableCell.configure({
      HTMLAttributes: {
        class: "my-cell",
        "data-test": "table-cell"
      },
    }),
  ],
});

// TableCell creates nodes with these properties:
// - name: 'tableCell'
// - content: 'block+'
// - tableRole: 'cell'
// - isolating: true

/**
 * Configuration options for TableCell extension
 */
interface TableCellOptions {
  /**
   * HTML attributes to apply to table cell elements
   * @default {}
   */
  HTMLAttributes: Record<string, any>;
}

TableCell.configure({
  HTMLAttributes: {
    class: "prose-table-cell",
    style: "padding: 8px;",
  },
});

/**
 * Defines the table role for this node
 * Used by table-related commands and behaviors
 */
tableRole: 'cell';

/**
 * Prevents content from being merged across node boundaries
 * Ensures table cell content stays within cell boundaries
 */
isolating: true;

/**
 * Content expression defining allowed child content
 * Allows one or more block-level elements
 */
content: 'block+';

/**
 * Number of columns the cell spans
 * @default 1
 */
colspan: number;

/**
 * Number of rows the cell spans  
 * @default 1
 */
rowspan: number;

/**
 * Column widths as an array of numbers
 * Parsed from comma-separated colwidth HTML attribute using:
 * colwidth.split(',').map(width => parseInt(width, 10))
 * @default null
 */
colwidth: number[] | null;

/**
 * Defines how HTML elements are parsed into TableCell nodes
 * @returns Array of tag parsing rules
 */
parseHTML(): [{ tag: 'td' }];

/**
 * Defines how TableCell nodes are rendered to HTML
 * Merges configured HTMLAttributes with node attributes
 * @param params Object containing HTMLAttributes from the node
 * @returns DOM output specification: ['td', mergedAttributes, 0]
 */
renderHTML(params: { HTMLAttributes: Record<string, any> }): DOMOutputSpec;

// Instead of this deprecated import:
import TableCell from "@tiptap/extension-table-cell";

// Use this:
import { TableCell } from "@tiptap/extension-table";