diff --git a/cypress/e2e/nodes/Table.spec.js b/cypress/e2e/nodes/Table.spec.js index c1f1f18ad3a..346291435d1 100644 --- a/cypress/e2e/nodes/Table.spec.js +++ b/cypress/e2e/nodes/Table.spec.js @@ -115,7 +115,7 @@ describe('table plugin', () => { cy.getContent().type('Line 1\nLine 2\nLine 3') cy.getContent() - .find('table:nth-of-type(1) tr:nth-child(2) td:nth-child(1) .content') + .find('table:nth-of-type(1) tr:nth-child(2) td:nth-child(1)') .then(($el) => { expect($el.get(0).innerHTML).to.equal( '

Line 1

Line 2

Line 3

', diff --git a/playwright/e2e/print.spec.ts-snapshots/Own-file-on-ci-1-chromium-linux.png b/playwright/e2e/print.spec.ts-snapshots/Own-file-on-ci-1-chromium-linux.png index ef0093b2d6d..2a01dd85af9 100644 Binary files a/playwright/e2e/print.spec.ts-snapshots/Own-file-on-ci-1-chromium-linux.png and b/playwright/e2e/print.spec.ts-snapshots/Own-file-on-ci-1-chromium-linux.png differ diff --git a/playwright/e2e/print.spec.ts-snapshots/Shared-file-on-ci-1-chromium-linux.png b/playwright/e2e/print.spec.ts-snapshots/Shared-file-on-ci-1-chromium-linux.png index ef0093b2d6d..2a01dd85af9 100644 Binary files a/playwright/e2e/print.spec.ts-snapshots/Shared-file-on-ci-1-chromium-linux.png and b/playwright/e2e/print.spec.ts-snapshots/Shared-file-on-ci-1-chromium-linux.png differ diff --git a/src/css/print.scss b/src/css/print.scss index bfa19213427..c9463ddfd85 100644 --- a/src/css/print.scss +++ b/src/css/print.scss @@ -103,6 +103,10 @@ width: 100%; } + .table-wrapper.editable .table-scroll { + width: 100%; + } + // Add some borders below header and between columns th { color: black !important; @@ -116,6 +120,11 @@ border-width: 1px !important; border-color: gray !important; } + + td.row-actions { + // hide last column with row actions + display: none; + } } .container-suggestions { display: none; diff --git a/src/css/prosemirror.scss b/src/css/prosemirror.scss index 29f56f7b9b6..160d96f16e5 100644 --- a/src/css/prosemirror.scss +++ b/src/css/prosemirror.scss @@ -340,11 +340,10 @@ div.ProseMirror { table { border-spacing: 0; - // Needs to be sync with `.table-add-row` button width in `TableView.vue` - width: calc(100% - (2 * var(--clickable-area-small)) - 8px); + width: 100%; table-layout: auto; white-space: normal; // force text to wrapping - margin-bottom: calc(var(--clickable-area-small) + 8px); + margin-bottom: calc(var(--clickable-area-small) + 12px); & + * { margin-top: 1em; } @@ -365,6 +364,8 @@ div.ProseMirror { td { border-top: 0; color: var(--color-main-text); + position: relative; + padding: calc((var(--default-clickable-area) - var(--default-font-size) * 1.5) / 2) 0.75em; p:last-child { margin-bottom: 0; @@ -440,9 +441,3 @@ div.ProseMirror { box-sizing: border-box; visibility: visible !important; } - -div.ProseMirror[contenteditable='false'] { - table { - width: 100%; - } -} diff --git a/src/nodes/EditableTable.js b/src/nodes/EditableTable.js index 24b9997ed9a..cd73c07c444 100644 --- a/src/nodes/EditableTable.js +++ b/src/nodes/EditableTable.js @@ -7,11 +7,11 @@ import { VueNodeViewRenderer } from '@tiptap/vue-2' import Table from './Table/Table.js' import TableCaption from './Table/TableCaption.js' import TableCell from './Table/TableCell.js' -import TableCellView from './Table/TableCellView.vue' import TableHeader from './Table/TableHeader.js' import TableHeaderView from './Table/TableHeaderView.vue' import TableHeadRow from './Table/TableHeadRow.js' import TableRow from './Table/TableRow.js' +import TableRowView from './Table/TableRowView.vue' import TableView from './Table/TableView.vue' /** @@ -35,10 +35,10 @@ export default Table.extend({ addExtensions() { return [ TableCaption, - extendNodeWithView(TableCell, TableCellView), + TableCell, extendNodeWithView(TableHeader, TableHeaderView), TableHeadRow, - TableRow, + extendNodeWithView(TableRow, TableRowView), ] }, }) diff --git a/src/nodes/Table/TableCellView.vue b/src/nodes/Table/TableRowView.vue similarity index 65% rename from src/nodes/Table/TableCellView.vue rename to src/nodes/Table/TableRowView.vue index c1aafa66615..c2113b4af62 100644 --- a/src/nodes/Table/TableCellView.vue +++ b/src/nodes/Table/TableRowView.vue @@ -1,13 +1,13 @@ @@ -52,114 +52,115 @@ import { } from '../../components/icons.js' export default { - name: 'TableCellView', + name: 'TableRowView', components: { NcActionButton, NcActions, NodeViewWrapper, NodeViewContent, - TableAddRowBefore, TableAddRowAfter, + TableAddRowBefore, TrashCan, }, + props: { editor: { type: Object, required: true, }, + getPos: { type: Function, required: true, }, + + node: { + type: Object, + required: true, + }, }, + data() { return { isEditable: false, } }, + computed: { - textAlign() { - return { 'text-align': this.node.attrs.textAlign } - }, - dir() { - return this.node.attrs.dir || '' + isDataRow() { + return this.node.type.name === 'tableRow' }, }, + beforeMount() { this.isEditable = this.editor.isEditable this.editor.on('update', ({ editor }) => { this.isEditable = editor.isEditable }) }, + methods: { deleteRow() { this.editor .chain() .focus() - .setTextSelection(this.getPos()) + .setTextSelection(this.getPos() + 1) .deleteRow() .run() }, + addRowBefore() { this.editor .chain() .focus() - .setTextSelection(this.getPos()) + .setTextSelection(this.getPos() + 1) .addRowBefore() .run() }, + addRowAfter() { this.editor .chain() .focus() - .setTextSelection(this.getPos()) + .setTextSelection(this.getPos() + 1) .addRowAfter() .run() }, + t, }, }