import { Command, Node, mergeAttributes } from '@tiptap/core' import { tableEditing, columnResizing, // goToNextCell, addColumnBefore, addColumnAfter, deleteColumn, addRowBefore, addRowAfter, deleteRow, deleteTable, mergeCells, splitCell, toggleHeaderColumn, toggleHeaderRow, toggleHeaderCell, // setCellAttr, // fixTables, } from 'prosemirror-tables' export interface TableOptions { HTMLAttributes: { [key: string]: any }, resizable: boolean, } export const Table = Node.create({ name: 'table', defaultOptions: { HTMLAttributes: {}, resizable: false, }, content: 'table_row+', tableRole: 'table', isolating: true, group: 'block', parseHTML() { return [{ tag: 'table' }] }, renderHTML({ HTMLAttributes }) { return ['table', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ['tbody', 0]] }, addCommands() { return { // createTable: ({ rowsCount, colsCount, withHeaderRow }) => ( // (state, dispatch) => { // const offset = state.tr.selection.anchor + 1 // const nodes = createTable(schema, rowsCount, colsCount, withHeaderRow) // const tr = state.tr.replaceSelectionWith(nodes).scrollIntoView() // const resolvedPos = tr.doc.resolve(offset) // tr.setSelection(TextSelection.near(resolvedPos)) // dispatch(tr) // } // ), addColumnBefore: (): Command => ({ state, dispatch }) => { console.log('addColumnBefore') return addColumnBefore(state, dispatch) }, addColumnAfter: (): Command => ({ state, dispatch }) => { console.log('addColumnAfter') return addColumnAfter(state, dispatch) }, deleteColumn: (): Command => ({ state, dispatch }) => { console.log('deleteColumn') return deleteColumn(state, dispatch) }, addRowBefore: (): Command => ({ state, dispatch }) => { console.log('addRowBefore') return addRowBefore(state, dispatch) }, addRowAfter: (): Command => ({ state, dispatch }) => { console.log('addRowAfter') return addRowAfter(state, dispatch) }, deleteRow: (): Command => ({ state, dispatch }) => { console.log('deleteRow') return deleteRow(state, dispatch) }, deleteTable: (): Command => ({ state, dispatch }) => { console.log('deleteTable') return deleteTable(state, dispatch) }, mergeCells: (): Command => ({ state, dispatch }) => { console.log('mergeCells') return mergeCells(state, dispatch) }, splitCell: (): Command => ({ state, dispatch }) => { console.log('splitCell') return splitCell(state, dispatch) }, toggleHeaderColumn: (): Command => ({ state, dispatch }) => { console.log('toggleHeaderColumn') return toggleHeaderColumn(state, dispatch) }, toggleHeaderRow: (): Command => ({ state, dispatch }) => { console.log('toggleHeaderRow') return toggleHeaderRow(state, dispatch) }, toggleHeaderCell: (): Command => ({ state, dispatch }) => { console.log('toggleHeaderCell') return toggleHeaderCell(state, dispatch) }, // fixTables: (): Command => ({ state, dispatch }) => { // console.log('fixTables') // return fixTables(state, dispatch) // }, // toggleCellMerge: () => ( // (state, dispatch) => { // if (mergeCells(state, dispatch)) { // return // } // splitCell(state, dispatch) // } // ), // setCellAttr: ({ name, value }) => setCellAttr(name, value), } }, addProseMirrorPlugins() { return [ ...(this.options.resizable ? [columnResizing({})] : []), tableEditing({}), ] }, }) declare module '@tiptap/core' { interface AllExtensions { Table: typeof Table, } }