feat(table): allow sort by column

Signed-off-by: Luka Trovic <luka@nextcloud.com>

Author: luka-nextcloud

src/components/icons.js

@@ -55,6 +55,8 @@ import MDI_Pencil from 'vue-material-design-icons/PencilOutline.vue'
 import MDI_Plus from 'vue-material-design-icons/Plus.vue'
 import MDI_Shape from 'vue-material-design-icons/ShapeOutline.vue'
 import MDI_Sigma from 'vue-material-design-icons/Sigma.vue'
+import MDI_SortAscending from 'vue-material-design-icons/SortAscending.vue'
+import MDI_SortDescending from 'vue-material-design-icons/SortDescending.vue'
 import MDI_Table from 'vue-material-design-icons/Table.vue'
 import MDI_TableSettings from 'vue-material-design-icons/TableCog.vue'
 import MDI_TableAddColumnAfter from 'vue-material-design-icons/TableColumnPlusAfter.vue'
@@ -152,3 +154,5 @@ export const Warn = makeIcon(MDI_Warn)
 export const Web = makeIcon(MDI_Web)
 export const Plus = makeIcon(MDI_Plus)
 export const Sigma = makeIcon(MDI_Sigma)
+export const SortAscending = makeIcon(MDI_SortAscending)
+export const SortDescending = makeIcon(MDI_SortDescending)

src/nodes/Table/Table.js

@@ -72,6 +72,8 @@ function findSameCellInNextRow($cell) {
 	}
 }
 
+const getSortableCellText = (cell) => cell.textContent.trim()
+
 export default Table.extend({
 	content: 'tableCaption? tableHeadRow tableRow*',
 
@@ -181,6 +183,96 @@ export default Table.extend({
 						)
 						dispatch(tr.setSelection(selection).scrollIntoView())
 					}
+					return true
+				},
+			sortColumn:
+				(direction = 'asc', explicitColumnIndex = null) =>
+				({ state, tr, dispatch }) => {
+					if (!isInTable(state)) return false
+
+					const $cell = selectionCell(state)
+					const columnIndex =
+						typeof explicitColumnIndex === 'number'
+							? explicitColumnIndex
+							: $cell.index(-1)
+
+					// find the table node
+					let tableDepth = $cell.depth
+					while (
+						tableDepth > 0
+						&& $cell.node(tableDepth).type.name !== 'table'
+					) {
+						tableDepth -= 1
+					}
+					if (tableDepth === 0) return false
+
+					const table = $cell.node(tableDepth)
+					const tablePos = $cell.before(tableDepth)
+					const bodyRows = []
+					const nonBodyChildren = []
+					table.forEach((child) => {
+						if (child.type.name === 'tableRow') {
+							bodyRows.push(child)
+							return
+						}
+						nonBodyChildren.push(child)
+					})
+					if (bodyRows.length < 2) return true
+
+					// check if all rows have a cell at the column index and that the cell doesn't have colspan or rowspan
+					const canSortRows = bodyRows.every((row) => {
+						if (columnIndex >= row.childCount) {
+							return false
+						}
+						const targetCell = row.child(columnIndex)
+						return (
+							(targetCell.attrs.colspan ?? 1) === 1
+							&& (targetCell.attrs.rowspan ?? 1) === 1
+						)
+					})
+					if (!canSortRows) return false
+
+					// sort the rows based on the content of the cell at the column index
+					const collator = new Intl.Collator(undefined, {
+						numeric: true,
+						sensitivity: 'base',
+					})
+					const sortDirection = direction === 'desc' ? -1 : 1
+					const sortedRows = bodyRows
+						.map((row, index) => ({
+							index,
+							row,
+							key: getSortableCellText(row.child(columnIndex)),
+						}))
+						.sort((a, b) => {
+							const keyCompare =
+								collator.compare(a.key, b.key) * sortDirection
+							if (keyCompare !== 0) {
+								return keyCompare
+							}
+							return a.index - b.index
+						})
+
+					const hasChangedOrder = sortedRows.some(
+						({ index }, sortedIndex) => index !== sortedIndex,
+					)
+					if (!hasChangedOrder) return true
+
+					const sortedTable = table.type.createChecked(
+						table.attrs,
+						[...nonBodyChildren, ...sortedRows.map(({ row }) => row)],
+						table.marks,
+					)
+
+					if (dispatch) {
+						tr.replaceWith(
+							tablePos,
+							tablePos + table.nodeSize,
+							sortedTable,
+						)
+						dispatch(tr.scrollIntoView())
+					}
+
 					return true
 				},
 		}

src/nodes/Table/TableHeaderView.vue

@@ -1,6 +1,6 @@
 <!--
-  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
+	- SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+	- SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
@@ -52,6 +52,24 @@
 						</template>
 					</NcActionButton>
 				</NcActionButtonGroup>
+				<NcActionButton
+					data-text-table-action="sort-column-asc"
+					close-after-click
+					@click="sortColumnAsc">
+					<template #icon>
+						<SortAscending />
+					</template>
+					{{ t('text', 'Sort ascending') }}
+				</NcActionButton>
+				<NcActionButton
+					data-text-table-action="sort-column-desc"
+					close-after-click
+					@click="sortColumnDesc">
+					<template #icon>
+						<SortDescending />
+					</template>
+					{{ t('text', 'Sort descending') }}
+				</NcActionButton>
 				<NcActionButton
 					data-text-table-action="add-column-before"
 					close-after-click
@@ -94,6 +112,8 @@ import {
 	AlignHorizontalCenter,
 	AlignHorizontalLeft,
 	AlignHorizontalRight,
+	SortAscending,
+	SortDescending,
 	TableAddColumnAfter,
 	TableAddColumnBefore,
 	TrashCan,
@@ -113,6 +133,8 @@ export default {
 		NodeViewContent,
 		TableAddColumnBefore,
 		TableAddColumnAfter,
+		SortAscending,
+		SortDescending,
 	},
 	props: {
 		editor: {
@@ -195,6 +217,25 @@ export default {
 				.addColumnAfter()
 				.run()
 		},
+		sortColumnAsc() {
+			this.sortColumn('asc')
+		},
+		sortColumnDesc() {
+			this.sortColumn('desc')
+		},
+		sortColumn(direction) {
+			const columnIndex = this.getHeaderColumnIndex()
+			this.editor
+				.chain()
+				.focus()
+				.setTextSelection(this.getPos())
+				.sortColumn(direction, columnIndex)
+				.run()
+		},
+		getHeaderColumnIndex() {
+			const $pos = this.editor.state.doc.resolve(this.getPos())
+			return $pos.index()
+		},
 		t,
 	},
 }

src/tests/nodes/Table.spec.js

@@ -236,8 +236,86 @@ describe('Table extension', () => {
 			expect(editor.getHTML()).toBe(editorHtml)
 		}
 	})
+
+	test('sorts table body rows in ascending order by selected column', ({
+		editor,
+	}) => {
+		editor.commands.setContent(
+			markdownit.render(
+				'| col0 | col1 |\n|---|---|\n| 2 | b |\n| 10 | a |\n| 1 | c |\n',
+			),
+		)
+
+		selectHeaderCell(editor, 0)
+		expect(editor.commands.sortColumn('asc', 0)).toBe(true)
+
+		expect(getBodyColumnValues(editor, 0)).toEqual(['1', '2', '10'])
+		expect(getBodyColumnValues(editor, 1)).toEqual(['c', 'b', 'a'])
+
+		selectHeaderCell(editor, 1)
+		expect(editor.commands.sortColumn('asc', 1)).toBe(true)
+
+		expect(getBodyColumnValues(editor, 0)).toEqual(['10', '2', '1'])
+		expect(getBodyColumnValues(editor, 1)).toEqual(['a', 'b', 'c'])
+	})
+
+	test('sorts table body rows in descending order by selected column', ({
+		editor,
+	}) => {
+		editor.commands.setContent(
+			markdownit.render(
+				'| col0 | col1 |\n|---|---|\n| 2 | b |\n| 10 | a |\n| 1 | c |\n',
+			),
+		)
+
+		selectHeaderCell(editor, 0)
+		expect(editor.commands.sortColumn('desc', 0)).toBe(true)
+
+		expect(getBodyColumnValues(editor, 0)).toEqual(['10', '2', '1'])
+		expect(getBodyColumnValues(editor, 1)).toEqual(['a', 'b', 'c'])
+
+		selectHeaderCell(editor, 1)
+		expect(editor.commands.sortColumn('desc', 1)).toBe(true)
+
+		expect(getBodyColumnValues(editor, 0)).toEqual(['1', '2', '10'])
+		expect(getBodyColumnValues(editor, 1)).toEqual(['c', 'b', 'a'])
+	})
 })
 
+const selectHeaderCell = (editor, targetIndex = 0) => {
+	let currentIndex = 0
+	let selectionPos
+	editor.state.doc.descendants((node, pos) => {
+		if (node.type.name !== 'tableHeader') {
+			return true
+		}
+		if (currentIndex === targetIndex) {
+			selectionPos = pos + 1
+			return false
+		}
+		currentIndex += 1
+		return true
+	})
+	if (selectionPos != null) {
+		editor.commands.setTextSelection(selectionPos)
+	}
+	return selectionPos
+}
+
+const getBodyColumnValues = (editor, columnIndex) => {
+	const values = []
+	editor.state.doc.descendants((node) => {
+		if (node.type.name !== 'tableRow') {
+			return true
+		}
+		if (columnIndex < node.childCount) {
+			values.push(node.child(columnIndex).textContent.trim())
+		}
+		return true
+	})
+	return values
+}
+
 const formatHTML = (html) => {
 	return html.replaceAll('><', '>\n<').replace(/\n$/, '')
 }