1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
import { Table } from '@tiptap/extension-table'
import { Node, mergeAttributes } from '@tiptap/core'
import { TextSelection } from 'prosemirror-state'
import { isInTable } from 'prosemirror-tables'
/*
* Markdown tables do not include captions.
* We still need to parse them though
* because otherwise tiptap will try to insert their text content
* and put it in the top row of the table.
*/
const tableCaption = Node.create({
name: 'tableCaption',
content: 'inline*',
addAttributes() {
return {}
},
renderHTML() {
return ['caption']
},
toMarkdown(state, node) {
},
parseHTML() {
return [
{ tag: 'table caption', priority: 90 },
]
},
})
function createTable(schema, rowsCount, colsCount, cellContent) {
const headerCells = []
const cells = []
for (let index = 0; index < colsCount; index += 1) {
const cell = schema.nodes.tableCell.createAndFill()
if (cell) {
cells.push(cell)
}
const headerCell = schema.nodes.tableHeader.createAndFill()
if (headerCell) {
headerCells.push(headerCell)
}
}
const headRow = schema.nodes.tableHeadRow.createChecked(null, headerCells)
const rows = []
for (let index = 1; index < rowsCount; index += 1) {
rows.push(schema.nodes.tableRow.createChecked(null, cells))
}
return schema.nodes.table.createChecked(null, [headRow, ...rows])
}
export default Table.extend({
content: 'tableCaption? tableHeadRow tableRow*',
addExtensions() {
return [
tableCaption,
]
},
addCommands() {
return {
...this.parent(),
insertTable: () => ({ tr, dispatch, editor }) => {
const node = createTable(editor.schema, 3, 3, true)
if (dispatch) {
const offset = tr.selection.anchor + 1
tr.replaceSelectionWith(node)
.scrollIntoView()
.setSelection(TextSelection.near(tr.doc.resolve(offset)))
}
return true
},
// move to the next node after the table from the last cell
leaveTable: () => ({ tr, dispatch, editor }) => {
if (!isInTable(tr)) return false
const { $head, empty } = tr.selection
if (!empty) return false
// the selection can temporarily be inside the table but outside of cells.
const tableDepth = $head.depth < 3 ? 1 : $head.depth - 2
const next = tr.doc.resolve($head.after(tableDepth) + 1)
const selection = TextSelection.near(next)
const transaction = tr.setSelection(selection)
if (dispatch) dispatch(transaction.scrollIntoView())
return true
},
}
},
renderHTML({ HTMLAttributes }) {
return ['table', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
},
toMarkdown(state, node) {
state.renderContent(node)
state.closeBlock(node)
},
addKeyboardShortcuts() {
return {
...this.parent(),
Tab: () => this.editor.commands.goToNextCell() || this.editor.commands.leaveTable(),
}
},
})
|
