2021-01-21 07:16:45 +08:00
|
|
|
import { Command, Node, mergeAttributes } from '@tiptap/core'
|
|
|
|
import {
|
|
|
|
// tableEditing,
|
|
|
|
// columnResizing,
|
|
|
|
// goToNextCell,
|
|
|
|
addColumnBefore,
|
|
|
|
addColumnAfter,
|
|
|
|
deleteColumn,
|
|
|
|
addRowBefore,
|
|
|
|
addRowAfter,
|
|
|
|
deleteRow,
|
|
|
|
deleteTable,
|
|
|
|
mergeCells,
|
|
|
|
splitCell,
|
|
|
|
toggleHeaderColumn,
|
|
|
|
toggleHeaderRow,
|
|
|
|
toggleHeaderCell,
|
2021-01-21 07:24:19 +08:00
|
|
|
// setCellAttr,
|
|
|
|
// fixTables,
|
2021-01-21 07:16:45 +08:00
|
|
|
} from 'prosemirror-tables'
|
2021-01-21 06:53:53 +08:00
|
|
|
|
|
|
|
export interface TableOptions {
|
|
|
|
HTMLAttributes: {
|
|
|
|
[key: string]: any
|
|
|
|
},
|
|
|
|
}
|
2021-01-21 06:42:01 +08:00
|
|
|
|
|
|
|
export const Table = Node.create({
|
|
|
|
name: 'table',
|
2021-01-21 06:53:53 +08:00
|
|
|
|
|
|
|
defaultOptions: <TableOptions>{
|
|
|
|
HTMLAttributes: {},
|
|
|
|
},
|
|
|
|
|
2021-01-21 07:16:45 +08:00
|
|
|
content: 'table_row+',
|
2021-01-21 06:53:53 +08:00
|
|
|
|
2021-01-21 07:16:45 +08:00
|
|
|
tableRole: 'table',
|
2021-01-21 06:53:53 +08:00
|
|
|
|
|
|
|
isolating: true,
|
|
|
|
|
|
|
|
group: 'block',
|
|
|
|
|
|
|
|
parseHTML() {
|
|
|
|
return [{ tag: 'table' }]
|
|
|
|
},
|
|
|
|
|
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
|
|
return ['table', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ['tbody', 0]]
|
|
|
|
},
|
2021-01-21 07:16:45 +08:00
|
|
|
|
|
|
|
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),
|
|
|
|
}
|
|
|
|
},
|
2021-01-21 06:42:01 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
declare module '@tiptap/core' {
|
|
|
|
interface AllExtensions {
|
|
|
|
Table: typeof Table,
|
|
|
|
}
|
|
|
|
}
|