From 60305c10f6b0da22ae6d6ccfa9cdd3b5cb6ec469 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Fri, 22 Jan 2021 23:25:13 +0100 Subject: [PATCH] fix setCellAttributes, fix linting errors in the TableView --- docs/src/demos/Nodes/Table/index.vue | 58 +++++++++++++++++------ packages/extension-table/src/TableView.ts | 57 +++++++++++----------- packages/extension-table/src/table.ts | 11 ++--- 3 files changed, 75 insertions(+), 51 deletions(-) diff --git a/docs/src/demos/Nodes/Table/index.vue b/docs/src/demos/Nodes/Table/index.vue index 5a176c0f..3d92aee8 100644 --- a/docs/src/demos/Nodes/Table/index.vue +++ b/docs/src/demos/Nodes/Table/index.vue @@ -40,13 +40,13 @@ ✅ toggleHeaderCell - @@ -62,6 +62,7 @@ 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' +import Gapcursor from '@tiptap/extension-gapcursor' export default { components: { @@ -85,24 +86,51 @@ export default { }), TableRow, TableHeader, - TableCell, + TableCell.extend({ + addAttributes() { + return { + colspan: { + default: 1, + }, + rowspan: { + default: 1, + }, + colwidth: { + default: null, + }, + color: { + default: null, + // Take the attribute values + renderHTML: attributes => { + // … and return an object with HTML attributes. + return { + style: `color: ${attributes.color}`, + } + }, + }, + } + }, + }), + Gapcursor, ], content: ` -

Example Text

+

+ People +

- - + + - - - + + + +
TestTestNameDescription
TestTestTestCyndi Laupersingersongwriteractress
-

Example Text

`, }) }, @@ -159,11 +187,11 @@ export default { pointer-events: none; } } +} - .tableWrapper { - margin: 1em 0; - overflow-x: auto; - } +.tableWrapper { + padding: 1rem 0; + overflow-x: auto; } .resize-cursor { diff --git a/packages/extension-table/src/TableView.ts b/packages/extension-table/src/TableView.ts index ace41fef..5cb1af59 100644 --- a/packages/extension-table/src/TableView.ts +++ b/packages/extension-table/src/TableView.ts @@ -1,45 +1,20 @@ // @ts-nocheck - -export class TableView { - constructor(node, cellMinWidth) { - this.node = node - this.cellMinWidth = cellMinWidth - this.dom = document.createElement('div') - this.dom.className = 'tableWrapper' - this.table = this.dom.appendChild(document.createElement('table')) - this.colgroup = this.table.appendChild(document.createElement('colgroup')) - updateColumns(node, this.colgroup, this.table, cellMinWidth) - this.contentDOM = this.table.appendChild(document.createElement('tbody')) - } - - update(node) { - if (node.type != this.node.type) return false - this.node = node - updateColumns(node, this.colgroup, this.table, this.cellMinWidth) - return true - } - - ignoreMutation(record) { - return record.type == 'attributes' && (record.target == this.table || this.colgroup.contains(record.target)) - } -} - export function updateColumns(node, colgroup, table, cellMinWidth, overrideCol, overrideValue) { let totalWidth = 0; let fixedWidth = true let nextDOM = colgroup.firstChild; const row = node.firstChild - for (let i = 0, col = 0; i < row.childCount; i++) { + for (let i = 0, col = 0; i < row.childCount; i += 1) { const { colspan, colwidth } = row.child(i).attrs - for (let j = 0; j < colspan; j++, col++) { - const hasWidth = overrideCol == col ? overrideValue : colwidth && colwidth[j] + for (let j = 0; j < colspan; j += 1, col += 1) { + const hasWidth = overrideCol === col ? overrideValue : colwidth && colwidth[j] const cssWidth = hasWidth ? `${hasWidth}px` : '' totalWidth += hasWidth || cellMinWidth if (!hasWidth) fixedWidth = false if (!nextDOM) { colgroup.appendChild(document.createElement('col')).style.width = cssWidth } else { - if (nextDOM.style.width != cssWidth) nextDOM.style.width = cssWidth + if (nextDOM.style.width !== cssWidth) nextDOM.style.width = cssWidth nextDOM = nextDOM.nextSibling } } @@ -59,3 +34,27 @@ export function updateColumns(node, colgroup, table, cellMinWidth, overrideCol, table.style.minWidth = `${totalWidth}px` } } + +export class TableView { + constructor(node, cellMinWidth) { + this.node = node + this.cellMinWidth = cellMinWidth + this.dom = document.createElement('div') + this.dom.className = 'tableWrapper' + this.table = this.dom.appendChild(document.createElement('table')) + this.colgroup = this.table.appendChild(document.createElement('colgroup')) + updateColumns(node, this.colgroup, this.table, cellMinWidth) + this.contentDOM = this.table.appendChild(document.createElement('tbody')) + } + + update(node) { + if (node.type !== this.node.type) return false + this.node = node + updateColumns(node, this.colgroup, this.table, this.cellMinWidth) + return true + } + + ignoreMutation(record) { + return record.type === 'attributes' && (record.target === this.table || this.colgroup.contains(record.target)) + } +} diff --git a/packages/extension-table/src/table.ts b/packages/extension-table/src/table.ts index a9c9dfa7..8c5b3868 100644 --- a/packages/extension-table/src/table.ts +++ b/packages/extension-table/src/table.ts @@ -16,7 +16,7 @@ import { toggleHeaderColumn, toggleHeaderRow, toggleHeaderCell, - // setCellAttr, + setCellAttr, fixTables, CellSelection, } from 'prosemirror-tables' @@ -106,10 +106,8 @@ export const Table = Node.create({ return toggleHeaderCell(state, dispatch) }, fixTables: (): Command => ({ state, dispatch }) => { - console.log('fixTables') const transaction = fixTables(state) - console.log(transaction) if (transaction) { // @ts-ignore return dispatch(transaction) @@ -125,10 +123,9 @@ export const Table = Node.create({ // splitCell(state, dispatch) // } // ), - // setCellAttr: ({ name, value }): Command => () => { - // console.log('setCellAttr') - // return setCellAttr(name, value) - // }, + setCellAttributes: ({ name, value }): Command => ({ state, dispatch }) => { + return setCellAttr(name, value)(state, dispatch) + }, goToNextCell: (): Command => ({ state, dispatch }) => { return goToNextCell(1)(state, dispatch) },