fix(Table): allow changing list indention inside tables

Fixes: #8744

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

Author: mejo-

playwright/e2e/table-tab-navigation.spec.ts

@@ -0,0 +1,47 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { expect, mergeTests } from '@playwright/test'
+import { test as editorTest } from '../support/fixtures/editor'
+import { test as uploadFileTest } from '../support/fixtures/upload-file'
+
+const test = mergeTests(editorTest, uploadFileTest)
+
+test.describe('Tab navigation inside table cell', () => {
+	test('indents list item inside table cell', async ({ editor, open }) => {
+		await open()
+		await editor.getMenu('Table').click()
+
+		const firstCell = editor.content.locator('table td').first()
+		await firstCell.click()
+		await editor.type('- one')
+		await editor.content.press('Enter')
+		await editor.type('two')
+
+		await editor.content.press('Tab')
+
+		const nested = firstCell.locator('ul > li').first().locator('ul > li')
+		await expect(nested).toHaveText('two')
+
+		await editor.content.press('Shift+Tab')
+		await expect(firstCell.locator('> ul > li')).toHaveCount(2)
+		await expect(firstCell.locator('> ul > li > ul')).toHaveCount(0)
+	})
+
+	test('navigates cells when caret is not inside a list', async ({ editor, open }) => {
+		await open()
+		await editor.getMenu('Table').click()
+
+		const header = editor.content.locator('table th').first()
+		await header.click()
+		await editor.type('h1')
+		await editor.content.press('Tab')
+		await editor.type('h2')
+
+		const headers = editor.content.locator('table th')
+		await expect(headers.nth(0)).toContainText('h1')
+		await expect(headers.nth(0)).toContainText('h1')
+	})
+})

playwright/support/sections/EditorSection.ts

@@ -47,7 +47,7 @@ export class EditorSection {
 	}
 
 	public getMenu(name: string): Locator {
-		return this.el.getByRole('button', { name })
+		return this.menubar.getByRole('button', { name })
 	}
 
 	public getMenuItem(name: string): Locator {

src/nodes/Table/Table.js

@@ -72,6 +72,21 @@ function findSameCellInNextRow($cell) {
 	}
 }
 
+/**
+ * Return the node type name if the selection sits inside a listItem/taskItem.
+ *
+ * @param {object} selection - the editor selection
+ */
+function findListItemAtSelection(selection) {
+	const { $from } = selection
+	for (let depth = $from.depth; depth > 0; depth--) {
+		const name = $from.node(depth).type.name
+		if (name === 'listItem' || name === 'taskItem') {
+			return name
+		}
+	}
+}
+
 export default Table.extend({
 	content: 'tableCaption? tableHeadRow tableRow*',
 
@@ -319,11 +334,29 @@ export default Table.extend({
 			...this.parent(),
 			/**
 			 * <Tab> inside a table cell
-			 * Jump to next cell or outside table if already in last cell
+			 * When inside a list, indent the list item. Otherwise jump to
+			 * the next cell (or out of the table if in the last cell).
 			 */
-			Tab: () =>
+			Tab: () => {
+				const listItemName = findListItemAtSelection(this.editor.state.selection)
+				if (listItemName && this.editor.commands.sinkListItem(listItemName)) {
+					return true
+				}
 				this.editor.commands.goToNextCell()
-				|| this.editor.commands.leaveTable(),
+				|| this.editor.commands.leaveTable()
+			},
+			/**
+			 * <Tab> inside a table cell
+			 * When inside a list, indent the list item. Otherwise jump to
+			 * the next cell (or out of the table if in the last cell).
+			 */
+			'Shift-Tab': () => {
+				const listItemName = findListItemAtSelection(this.editor.state.selection)
+				if (listItemName && this.editor.commands.liftListItem(listItemName)) {
+					return true
+				}
+				this.editor.commands.goToPreviousCell()
+			},
 		}
 	},
 })