diff --git a/packages/editor/src/core/extensions/side-menu.tsx b/packages/editor/src/core/extensions/side-menu.tsx index eac71301200..5f11286b5c4 100644 --- a/packages/editor/src/core/extensions/side-menu.tsx +++ b/packages/editor/src/core/extensions/side-menu.tsx @@ -134,10 +134,6 @@ const SideMenu = (options: SideMenuPluginProps) => { rect.left -= 8; } - if (node.parentElement?.matches("td") || node.parentElement?.matches("th")) { - rect.left += 8; - } - rect.width = options.dragHandleWidth; if (!editorSideMenu) return; diff --git a/packages/editor/src/core/extensions/table/table/table.ts b/packages/editor/src/core/extensions/table/table/table.ts index 981788f5486..fd775d211ee 100644 --- a/packages/editor/src/core/extensions/table/table/table.ts +++ b/packages/editor/src/core/extensions/table/table/table.ts @@ -39,7 +39,12 @@ export interface TableOptions { declare module "@tiptap/core" { interface Commands { table: { - insertTable: (options?: { rows?: number; cols?: number; withHeaderRow?: boolean }) => ReturnType; + insertTable: (options?: { + rows?: number; + cols?: number; + withHeaderRow?: boolean; + columnWidth?: number; + }) => ReturnType; addColumnBefore: () => ReturnType; addColumnAfter: () => ReturnType; deleteColumn: () => ReturnType; @@ -108,9 +113,9 @@ export const Table = Node.create({ addCommands() { return { insertTable: - ({ rows = 3, cols = 3, withHeaderRow = false } = {}) => + ({ rows = 3, cols = 3, withHeaderRow = false, columnWidth = 150 } = {}) => ({ tr, dispatch, editor }) => { - const node = createTable(editor.schema, rows, cols, withHeaderRow); + const node = createTable(editor.schema, rows, cols, withHeaderRow, undefined, columnWidth); if (dispatch) { const offset = tr.selection.anchor + 1; diff --git a/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts b/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts index 684a6d344d3..50fb376c0b7 100644 --- a/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts +++ b/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts @@ -2,11 +2,12 @@ import { Fragment, Node as ProsemirrorNode, NodeType } from "@tiptap/pm/model"; export function createCell( cellType: NodeType, - cellContent?: Fragment | ProsemirrorNode | Array + cellContent?: Fragment | ProsemirrorNode | Array, + attrs?: Record ): ProsemirrorNode | null | undefined { if (cellContent) { - return cellType.createChecked(null, cellContent); + return cellType.createChecked(attrs, cellContent); } - return cellType.createAndFill(); + return cellType.createAndFill(attrs); } diff --git a/packages/editor/src/core/extensions/table/table/utilities/create-table.ts b/packages/editor/src/core/extensions/table/table/utilities/create-table.ts index 0c05cff7726..5e9c4ba2451 100644 --- a/packages/editor/src/core/extensions/table/table/utilities/create-table.ts +++ b/packages/editor/src/core/extensions/table/table/utilities/create-table.ts @@ -8,21 +8,22 @@ export function createTable( rowsCount: number, colsCount: number, withHeaderRow: boolean, - cellContent?: Fragment | ProsemirrorNode | Array + cellContent?: Fragment | ProsemirrorNode | Array, + columnWidth: number = 100 ): ProsemirrorNode { const types = getTableNodeTypes(schema); const headerCells: ProsemirrorNode[] = []; const cells: ProsemirrorNode[] = []; for (let index = 0; index < colsCount; index += 1) { - const cell = createCell(types.cell, cellContent); + const cell = createCell(types.cell, cellContent, { colwidth: [columnWidth] }); if (cell) { cells.push(cell); } if (withHeaderRow) { - const headerCell = createCell(types.header_cell, cellContent); + const headerCell = createCell(types.header_cell, cellContent, { colwidth: [columnWidth] }); if (headerCell) { headerCells.push(headerCell); diff --git a/packages/editor/src/core/helpers/editor-commands.ts b/packages/editor/src/core/helpers/editor-commands.ts index 9e47e9a01f2..71072f097ac 100644 --- a/packages/editor/src/core/helpers/editor-commands.ts +++ b/packages/editor/src/core/helpers/editor-commands.ts @@ -138,8 +138,9 @@ export const insertTableCommand = (editor: Editor, range?: Range) => { } } } - if (range) editor.chain().focus().deleteRange(range).clearNodes().insertTable({ rows: 3, cols: 3 }).run(); - else editor.chain().focus().clearNodes().insertTable({ rows: 3, cols: 3 }).run(); + if (range) + editor.chain().focus().deleteRange(range).clearNodes().insertTable({ rows: 3, cols: 3, columnWidth: 150 }).run(); + else editor.chain().focus().clearNodes().insertTable({ rows: 3, cols: 3, columnWidth: 150 }).run(); }; export const insertImage = ({ diff --git a/packages/editor/src/core/plugins/drag-handle.ts b/packages/editor/src/core/plugins/drag-handle.ts index fabb38f527d..e71c38b30d0 100644 --- a/packages/editor/src/core/plugins/drag-handle.ts +++ b/packages/editor/src/core/plugins/drag-handle.ts @@ -88,16 +88,18 @@ export const nodeDOMAtCoords = (coords: { x: number; y: number }) => { const elements = document.elementsFromPoint(coords.x, coords.y); for (const elem of elements) { + // Check for table wrapper first + if (elem.matches(".table-wrapper")) { + return elem; + } + if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) { return elem; } - // if the element is a

tag that is the first child of a td or th - if ( - (elem.matches("td > p:first-child") || elem.matches("th > p:first-child")) && - elem?.textContent?.trim() !== "" - ) { - return elem; // Return only if p tag is not empty in td or th + // Skip table cells + if (elem.closest(".table-wrapper")) { + continue; } // apply general selector diff --git a/packages/editor/src/styles/table.css b/packages/editor/src/styles/table.css index a0fbbe38f83..8f40ab9d872 100644 --- a/packages/editor/src/styles/table.css +++ b/packages/editor/src/styles/table.css @@ -16,7 +16,7 @@ .table-wrapper table th { min-width: 1em; border: 1px solid rgba(var(--color-border-200)); - padding: 10px 20px; + padding: 7px 10px; vertical-align: top; box-sizing: border-box; position: relative;