add table headers

This commit is contained in:
Hans Pagel
2021-01-22 00:16:58 +01:00
parent c4f35911a0
commit 05487ea82f
8 changed files with 122 additions and 9 deletions

View File

@@ -31,13 +31,13 @@
splitCell
</button>
<button @click="editor.chain().focus().toggleHeaderColumn().run()">
toggleHeaderColumn
toggleHeaderColumn
</button>
<button @click="editor.chain().focus().toggleHeaderRow().run()">
toggleHeaderRow
toggleHeaderRow
</button>
<button @click="editor.chain().focus().toggleHeaderCell().run()">
toggleHeaderCell
toggleHeaderCell
</button>
<editor-content :editor="editor" />
</div>
@@ -52,6 +52,7 @@ import Text from '@tiptap/extension-text'
import Table from '@tiptap/extension-table'
import TableRow from '@tiptap/extension-table-row'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'
export default {
components: {
@@ -72,6 +73,7 @@ export default {
Text,
Table,
TableRow,
TableHeader,
TableCell,
],
content: `
@@ -79,9 +81,9 @@ export default {
<table>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
<tr>
<td>Test</td>
@@ -103,8 +105,12 @@ export default {
<style lang="scss">
.ProseMirror {
table, tr, td {
table, td {
border: 3px solid red;
}
th {
border: 3px solid blue;
}
}
</style>

View File

@@ -0,0 +1,8 @@
# TableHeader
:::pro Fund the development 💖
We need your support to maintain, update, support and develop tiptap 2. If youre waiting for this extension, [become a sponsor and fund open source](/sponsor).
:::
TODO

View File

@@ -135,6 +135,9 @@
- title: TableCell
link: /api/nodes/table-cell
type: draft
- title: TableHeader
link: /api/nodes/table-header
type: draft
- title: TaskList
link: /api/nodes/task-list
- title: TaskItem