or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-tiptap--extension-table-cell

Deprecated table cell extension for Tiptap rich text editor that re-exports TableCell from @tiptap/extension-table

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tiptap/extension-table-cell@3.4.x

To install, run

npx @tessl/cli install tessl/npm-tiptap--extension-table-cell@3.4.0

index.mddocs/

Tiptap Extension Table Cell

The @tiptap/extension-table-cell package is a deprecated wrapper that re-exports the TableCell extension from @tiptap/extension-table for backward compatibility. It provides table cell functionality for the Tiptap rich text editor built on ProseMirror.

Package Information

  • Package Name: @tiptap/extension-table-cell
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-table-cell
  • Status: Deprecated (use @tiptap/extension-table instead)

Core Imports

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

Named imports:

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

For CommonJS:

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

Basic Usage

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

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

Capabilities

TableCell Extension

Creates table cell nodes for Tiptap editor. This is a Node extension that handles <td> HTML elements and supports spanning attributes.

/**
 * 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];

Usage Example:

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

Configure HTML attributes for table cell elements.

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

Usage Example:

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

Node Properties

The TableCell extension defines these core node properties:

tableRole

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

isolating

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

content

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

Cell Attributes

The TableCell extension automatically handles these HTML attributes:

colspan

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

rowspan

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

colwidth

/**
 * 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;

HTML Parsing and Rendering

The extension handles HTML conversion through these methods:

parseHTML

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

renderHTML

/**
 * 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;

Rendering Process:

  • Parses: <td> elements into TableCell nodes
  • Renders: TableCell nodes as <td> elements using mergeAttributes helper
  • Attributes: Preserves colspan, rowspan, and colwidth attributes
  • Content: Supports block-level content (content: 'block+')
  • Merging: Combines configured HTMLAttributes with node-specific attributes

Migration Notice

This package is deprecated. For new projects, import TableCell directly from @tiptap/extension-table:

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

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

The API and functionality are identical - this package exists solely for backward compatibility.