@ctzhian/tiptap 1.13.9 → 2.0.0

package/dist/index.css

@@ -418,7 +418,6 @@
   word-break: break-all;
 }
 
-/* 表格单元格基础样式 */
 .tiptap.ProseMirror table td,
 .tiptap.ProseMirror table th {
   border: none;
@@ -441,12 +440,12 @@
   margin-bottom: 0;
 }
 
-/* 表格表头样式 */
 .tiptap.ProseMirror table th {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   text-align: left;
+  background-color: var(--mui-palette-background-paper3);
 }
 
 .tiptap.ProseMirror[contenteditable="true"] table .selectedCell * {
@@ -454,9 +453,8 @@
   user-select: none;
 }
 
-/* 表格选择状态 */
 .tiptap.ProseMirror[contenteditable="true"] table .selectedCell:after {
-  background-color: color-mix(in srgb, var(--mui-palette-primary-main) 12%, transparent);
+  background-color: color-mix(in srgb, var(--mui-palette-primary-main) 5%, transparent);
   content: '';
   left: 0;
   right: 0;
@@ -467,7 +465,6 @@
   z-index: 2;
 }
 
-/* 表格列调整手柄 */
 .tiptap.ProseMirror[contenteditable="true"] table .column-resize-handle {
   border-right: 2px dotted var(--mui-palette-primary-main);
   bottom: -2px;
@@ -481,18 +478,43 @@
   transition: all 0.2s ease-in-out;
 }
 
+.tiptap-table-dropcursor {
+  position: absolute !important;
+  z-index: 20;
+  pointer-events: none;
+  background-color: var(--mui-palette-primary-main, #1976d2);
+}
+
 .tiptap.ProseMirror.resize-cursor {
   cursor: col-resize;
 }
 
-/* 表格包装器样式 */
 .tiptap.ProseMirror .tableWrapper {
   width: 100%;
   overflow-x: auto;
+  overflow-y: hidden;
+  position: relative;
   margin: 20px 0;
 }
 
-/* 表格滚动条样式 */
+.tiptap.ProseMirror[contenteditable="true"] .tableWrapper {
+  padding-top: 16px;
+  padding-left: 16px;
+  padding-bottom: 16px;
+  padding-right: 16px;
+}
+
+.tiptap.ProseMirror .table-controls {
+  position: relative;
+  overflow: visible;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.tiptap.ProseMirror .table-controls>* {
+  pointer-events: auto;
+}
+
 .tiptap.ProseMirror .tableWrapper::-webkit-scrollbar {
   height: 5px;
   cursor: pointer;
@@ -510,7 +532,6 @@
   cursor: pointer;
 }
 
-/* youtube */
 .tiptap.ProseMirror div[data-youtube-video] {
   cursor: move;
   padding-right: 1.5rem;
@@ -551,7 +572,6 @@
   line-height: 24px;
 }
 
-/* AI 续写建议样式 */
 .tiptap.ProseMirror .ai-writing-suggestion {
   color: color-mix(in srgb, var(--mui-palette-text-primary) 15%, transparent);
   pointer-events: none;
@@ -559,7 +579,6 @@
   white-space: pre-wrap;
 }
 
-/* placeholder */
 .tiptap.ProseMirror .cq-details[data-placeholder]::before,
 .tiptap.ProseMirror table *[data-placeholder]::before,
 .tiptap.ProseMirror li p[data-placeholder]::before {

package/dist/type/index.d.ts

@@ -37,6 +37,8 @@ export interface MenuProps {
         transformOrigin?: PopoverOrigin;
     };
     zIndex?: number;
+    onOpen?: () => void;
+    onClose?: () => void;
 }
 export type ToolbarItemType = {
     id: string;

package/dist/util/table-utils.d.ts

@@ -0,0 +1,161 @@
+import type { Node } from '@tiptap/pm/model';
+import { type EditorState, type Transaction } from '@tiptap/pm/state';
+import type { FindNodeResult } from '@tiptap/pm/tables';
+import { TableMap } from '@tiptap/pm/tables';
+import type { Editor } from '@tiptap/react';
+export declare const RESIZE_MIN_WIDTH = 35;
+export declare const EMPTY_CELL_WIDTH = 120;
+export declare const EMPTY_CELL_HEIGHT = 40;
+export type Orientation = 'row' | 'column';
+export interface CellInfo extends FindNodeResult {
+    row: number;
+    column: number;
+}
+export type CellCoordinates = {
+    row: number;
+    col: number;
+};
+export type SelectionReturnMode = 'state' | 'transaction' | 'dispatch';
+export type BaseSelectionOptions = {
+    mode?: SelectionReturnMode;
+};
+export type DispatchSelectionOptions = {
+    mode: 'dispatch';
+    dispatch: (tr: Transaction) => void;
+};
+export type TransactionSelectionOptions = {
+    mode: 'transaction';
+};
+export type StateSelectionOptions = {
+    mode?: 'state';
+};
+export type TableInfo = {
+    map: TableMap;
+} & FindNodeResult;
+export declare function isHTMLElement(n: unknown): n is HTMLElement;
+export type DomCellAroundResult = {
+    type: 'cell';
+    domNode: HTMLElement;
+    tbodyNode: HTMLTableSectionElement | null;
+} | {
+    type: 'wrapper';
+    domNode: HTMLElement;
+    tbodyNode: HTMLTableSectionElement | null;
+};
+export declare function safeClosest<T extends Element>(start: Element | null, selector: string): T | null;
+/**
+ * Walk up from an element until we find a TD/TH or the table wrapper.
+ * Returns the found element plus its tbody (if present).
+ */
+export declare function domCellAround(target: Element): DomCellAroundResult | undefined;
+/**
+ * Clamps a value between min and max bounds
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Checks if a cell is merged (has colspan or rowspan > 1)
+ */
+export declare function isCellMerged(node: Node | null): boolean;
+/**
+ * Get information about the table at the current selection or a specific position.
+ */
+export declare function getTable(editor: Editor | null, tablePos?: number): {
+    map: TableMap;
+    node: Node;
+    pos: number;
+    start: number;
+    depth: number;
+} | null;
+/**
+ * Checks if the current text selection is inside a table cell.
+ */
+export declare function isSelectionInCell(state: EditorState): boolean;
+/**
+ * Runs a function while preserving the editor's selection.
+ */
+export declare function runPreservingCursor(editor: Editor, fn: () => void): boolean;
+/**
+ * Determines whether a table cell is effectively empty.
+ */
+export declare function isCellEmpty(cellNode: Node): boolean;
+/**
+ * Counts how many consecutive empty rows exist at the bottom of a given table.
+ */
+export declare function countEmptyRowsFromEnd(editor: Editor, tablePos: number): number;
+/**
+ * Counts how many consecutive empty columns exist at the right edge of a given table.
+ */
+export declare function countEmptyColumnsFromEnd(editor: Editor, tablePos: number): number;
+/**
+ * Rounds a number with a symmetric "dead-zone" around integer boundaries.
+ */
+export declare function marginRound(num: number, margin?: number): number;
+/**
+ * Selects table cells by their (row, col) coordinates.
+ */
+export declare function selectCellsByCoords(editor: Editor | null, tablePos: number, coords: {
+    row: number;
+    col: number;
+}[], options?: BaseSelectionOptions | DispatchSelectionOptions): EditorState | Transaction | void;
+/**
+ * Select the cell at (row, col) using `cellAround` to respect merged cells.
+ */
+export declare function selectCellAt({ editor, row, col, tablePos, dispatch, }: {
+    editor: Editor | null;
+    row: number;
+    col: number;
+    tablePos?: number;
+    dispatch?: (tr: Transaction) => void;
+}): boolean;
+/**
+ * Selects a boundary cell of the table based on orientation.
+ */
+export declare function selectLastCell(editor: Editor, tableNode: Node, tablePos: number, orientation: Orientation): boolean;
+/**
+ * Get all (row, col) coordinates for a given row or column index.
+ */
+export declare function getIndexCoordinates({ editor, index, orientation, tablePos, }: {
+    editor: Editor | null;
+    index: number;
+    orientation?: Orientation;
+    tablePos?: number;
+}): {
+    row: number;
+    col: number;
+}[] | null;
+/**
+ * Given a DOM cell element, find its (row, col) indices within the table.
+ */
+export declare function getCellIndicesFromDOM(cell: HTMLTableCellElement, tableNode: Node | null, editor: Editor): {
+    rowIndex: number;
+    colIndex: number;
+} | null;
+/**
+ * Given a DOM element inside a table, find the corresponding table node and its position.
+ */
+export declare function getTableFromDOM(tableElement: HTMLElement, editor: Editor): {
+    node: Node;
+    pos: number;
+} | null;
+/**
+ * Checks if a node is a table node
+ */
+export declare function isTableNode(node: Node | null | undefined): node is Node;
+/**
+ * Get all cells (and unique merged cells) from a specific row.
+ */
+export declare function getRowCells(editor: Editor | null, rowIndex?: number, tablePos?: number): {
+    cells: CellInfo[];
+    mergedCells: CellInfo[];
+};
+/**
+ * Collect cells (and unique merged cells) from the current table.
+ */
+export declare function getColumnCells(editor: Editor | null, columnIndex?: number, tablePos?: number): {
+    cells: CellInfo[];
+    mergedCells: CellInfo[];
+};
+/**
+ * Compare two DOMRects for equality (within a small tolerance)
+ */
+export declare function rectEq(rect1: DOMRect | null, rect2: DOMRect | null): boolean;