From fde2b1572df086d8218fd4b2983dc937c7127304 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 21 Jan 2021 00:16:45 +0100 Subject: [PATCH] add table commands, add tableRole to the schema, add buttons to the example --- docs/src/demos/Nodes/Table/index.vue | 47 +++++++- packages/core/src/Node.ts | 5 + packages/core/src/helpers/getSchema.ts | 1 + .../extension-table-cell/src/table-cell.ts | 8 +- packages/extension-table-row/src/table-row.ts | 6 +- packages/extension-table/package.json | 3 + packages/extension-table/src/table.ts | 104 +++++++++++++++++- 7 files changed, 163 insertions(+), 11 deletions(-) diff --git a/docs/src/demos/Nodes/Table/index.vue b/docs/src/demos/Nodes/Table/index.vue index d9bb6dd4..5d33711a 100644 --- a/docs/src/demos/Nodes/Table/index.vue +++ b/docs/src/demos/Nodes/Table/index.vue @@ -1,5 +1,44 @@ @@ -57,8 +96,10 @@ export default { } - diff --git a/packages/core/src/Node.ts b/packages/core/src/Node.ts index f5ba9cc2..6f04f242 100644 --- a/packages/core/src/Node.ts +++ b/packages/core/src/Node.ts @@ -68,6 +68,11 @@ export interface NodeConfig extends Overwrite NodeSpec['isolating']), + /** + * Table Role + */ + tableRole?: NodeSpec['tableRole'] | ((this: { options: Options }) => NodeSpec['tableRole']), + /** * Parse HTML */ diff --git a/packages/core/src/helpers/getSchema.ts b/packages/core/src/helpers/getSchema.ts index cd279ab1..2f65659a 100644 --- a/packages/core/src/helpers/getSchema.ts +++ b/packages/core/src/helpers/getSchema.ts @@ -36,6 +36,7 @@ export default function getSchema(extensions: Extensions): Schema { code: callOrReturn(extension.config.code, context), defining: callOrReturn(extension.config.defining, context), isolating: callOrReturn(extension.config.isolating, context), + tableRole: callOrReturn(extension.config.tableRole, context), attrs: Object.fromEntries(extensionAttributes.map(extensionAttribute => { return [extensionAttribute.name, { default: extensionAttribute?.attribute?.default }] })), diff --git a/packages/extension-table-cell/src/table-cell.ts b/packages/extension-table-cell/src/table-cell.ts index 48143fb9..7ef49242 100644 --- a/packages/extension-table-cell/src/table-cell.ts +++ b/packages/extension-table-cell/src/table-cell.ts @@ -6,16 +6,20 @@ export interface TableCellOptions { }, } export const TableCell = Node.create({ - name: 'tableCell', + name: 'table_cell', defaultOptions: { HTMLAttributes: {}, }, // content: options.cellContent, + content: 'block+', + // attrs: cellAttrs, - // tableRole: 'cell', + + tableRole: 'cell', + isolating: true, parseHTML() { diff --git a/packages/extension-table-row/src/table-row.ts b/packages/extension-table-row/src/table-row.ts index 0a6f2fc8..c8368e8d 100644 --- a/packages/extension-table-row/src/table-row.ts +++ b/packages/extension-table-row/src/table-row.ts @@ -7,16 +7,16 @@ export interface TableRowOptions { } export const TableRow = Node.create({ - name: 'tableRow', + name: 'table_row', defaultOptions: { HTMLAttributes: {}, }, // content: '(tableCell | tableHeader)*', - content: 'tableCell*', + content: 'table_cell*', - // tableRole: 'row', + tableRole: 'row', parseHTML() { return [{ tag: 'tr' }] diff --git a/packages/extension-table/package.json b/packages/extension-table/package.json index 22899b80..edd80eb8 100644 --- a/packages/extension-table/package.json +++ b/packages/extension-table/package.json @@ -23,5 +23,8 @@ ], "peerDependencies": { "@tiptap/core": "^2.0.0-alpha.6" + }, + "dependencies": { + "prosemirror-tables": "^1.1.1" } } diff --git a/packages/extension-table/src/table.ts b/packages/extension-table/src/table.ts index ceb1399b..90ae979b 100644 --- a/packages/extension-table/src/table.ts +++ b/packages/extension-table/src/table.ts @@ -1,4 +1,23 @@ -import { Node, mergeAttributes } from '@tiptap/core' +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: { @@ -13,9 +32,9 @@ export const Table = Node.create({ HTMLAttributes: {}, }, - content: 'tableRow+', + content: 'table_row+', - // tableRole: 'table', + tableRole: 'table', isolating: true, @@ -28,6 +47,85 @@ export const Table = Node.create({ 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), + } + }, }) declare module '@tiptap/core' {