fix(table): move row action buttons into dedicated TableRowView component

fix(table): move row action buttons into dedicated TableRowView component

Fixes several layout issues, especially row action buttons are always

visible now, even if table width overflows container size.

Signed-off-by: Jonas <jonas@freesources.org>

[skip ci]

Author: mejo-

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(
 					'<p dir="ltr">Line 1</p><p dir="ltr">Line 2</p><p dir="ltr">Line 3</p>',

playwright/e2e/print.spec.ts-snapshots/Own-file-on-ci-1-chromium-linux.png

@@ -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;

playwright/e2e/print.spec.ts-snapshots/Shared-file-on-ci-1-chromium-linux.png

@@ -340,12 +340,10 @@ div.ProseMirror {
 
 	table {
 		border-spacing: 0;
-		// Needs to be in sync with `.table-add-row` button width in `TableView.vue`
-		--table-width-offset: calc(var(--clickable-area-small) + 4px);
-		width: calc(100% - var(--table-width-offset));
+		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;
 		}
@@ -366,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;
@@ -441,9 +441,3 @@ div.ProseMirror {
 	box-sizing: border-box;
 	visibility: visible !important;
 }
-
-div.ProseMirror[contenteditable='false'] {
-	table {
-		width: 100%;
-	}
-}

src/css/print.scss

@@ -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),
 		]
 	},
 })

src/css/prosemirror.scss

@@ -1,5 +1,5 @@
 <!--
-  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
@@ -36,7 +36,7 @@
 					{{ t('text', 'Delete this row') }}
 				</NcActionButton>
 			</NcActions>
-		</div>
+		</td>
 	</NodeViewWrapper>
 </template>
 
@@ -52,31 +52,40 @@ 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 }
@@ -85,81 +94,76 @@ export default {
 			return this.node.attrs.dir || ''
 		},
 	},
+
 	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,
 	},
 }
 </script>
 
 <style scoped lang="scss">
-td {
-	position: relative;
-
-	.container {
-		display: flex;
-		flex-wrap: wrap;
-	}
+.table-row-cells {
+	display: contents;
+}
 
-	.content {
-		flex: 1 1 0;
-		margin: 0;
-		padding: calc(
-				(var(--default-clickable-area) - var(--default-font-size) * 1.5) / 2
-			)
-			0.75em;
-	}
+td.row-actions {
+	position: sticky;
+	right: 0;
+	z-index: 4;
+	background-color: var(--color-main-background);
+	width: calc(var(--clickable-area-small) + var(--default-grid-baseline));
+	padding: 0;
+	// Required to prevent focus outline from being cut off
+	padding-right: 2px;
+	padding-left: var(--default-grid-baseline);
+	vertical-align: middle;
+	border: none;
+	border-radius: 0;
 
 	.action-item {
-		position: absolute;
-		right: calc((var(--clickable-area-small) * -1) - 4px);
-		flex: 0 1 auto;
-		display: none;
-		top: calc((var(--default-clickable-area) - var(--clickable-area-small)) / 2);
+		opacity: 0.5;
 	}
 
-	&:last-child {
+	&:hover,
+	&:active,
+	&:focus,
+	&:focus-within {
 		.action-item {
-			display: block;
-			opacity: 50%;
-		}
-
-		&:hover,
-		&:active,
-		&:focus,
-		&:focus-within {
-			.action-item {
-				opacity: 100%;
-			}
+			opacity: 1;
 		}
 	}
 }

src/nodes/EditableTable.js

@@ -7,7 +7,10 @@
 	<NodeViewWrapper
 		data-text-el="table-view"
 		class="table-wrapper"
-		:class="{ focused: isFocused }">
+		:class="{ focused: isFocused, editable: isEditable }">
+		<div class="table-scroll">
+			<NodeViewContent class="content" as="table" />
+		</div>
 		<NcActions
 			v-if="isEditable"
 			force-menu
@@ -27,9 +30,6 @@
 				{{ t('text', 'Delete this table') }}
 			</NcActionButton>
 		</NcActions>
-		<div class="table-scroll">
-			<NodeViewContent class="content" as="table" />
-		</div>
 		<NcButton
 			v-if="isEditable"
 			class="table-add-column"
@@ -155,19 +155,33 @@ export default {
 
 	.table-scroll {
 		overflow-x: auto;
-		width: calc(100% - var(--clickable-area-small) - 4px);
+	}
+
+	&.editable {
+		.table-scroll {
+			width: calc(100% - var(--clickable-area-small) - 4px);
+		}
 	}
 
 	.table-settings {
 		z-index: 3;
 		padding-left: 3px;
-		opacity: 0.5;
 		position: absolute;
 		top: calc((var(--default-clickable-area) - var(--clickable-area-small)) / 2);
 		right: calc(var(--clickable-area-small) + 4px);
+		background-color: var(--color-main-background);
 
-		&:hover {
-			opacity: 1;
+		:deep(button) {
+			opacity: 0.5;
+		}
+
+		&:hover,
+		&:active,
+		&:focus,
+		&:focus-within {
+			:deep(button) {
+				opacity: 1;
+			}
 		}
 	}
 
@@ -192,10 +206,8 @@ export default {
 		opacity: 0.5;
 		position: absolute;
 		left: 0;
-		bottom: 4px;
-		// Needs to be in sync with `table` in `prosemirror.scss`
-		--table-width-offset: calc(var(--clickable-area-small) + 4px);
-		width: calc(100% - (2 * var(--table-width-offset))) !important;
+		bottom: calc(2 * var(--default-grid-baseline));
+		width: calc(100% - var(--clickable-area-small) - 4px) !important;
 
 		&:hover {
 			opacity: 1;