From 0576d4562873d7aaa6ab768c7c9dae524a7a9b00 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Fri, 13 Sep 2024 13:55:42 +0200
Subject: [PATCH] feat(menu): Put list items in submenu, add indention options

Fixes: #2438
Contributes to: #2836

Signed-off-by: Jonas <jonas@freesources.org>
---
 cypress/e2e/workspace.spec.js          |  20 ++++-
 src/components/Menu/ActionListItem.vue |   3 +-
 src/components/Menu/ActionSingle.vue   |   2 +-
 src/components/Menu/BaseActionEntry.js |   5 ++
 src/components/Menu/entries.js         | 107 ++++++++++++++++++-------
 src/components/Menu/utils.js           |   2 +-
 src/components/icons.js                |   4 +
 src/extensions/RichText.js             |   2 +-
 src/nodes/BulletList.js                |   3 +
 src/nodes/OrderedList.js               |  19 +++++
 src/nodes/TaskList.js                  |   3 +
 11 files changed, 134 insertions(+), 36 deletions(-)
 create mode 100644 src/nodes/OrderedList.js

diff --git a/cypress/e2e/workspace.spec.js b/cypress/e2e/workspace.spec.js
index ca57890d033..bfb4c793c5d 100644
--- a/cypress/e2e/workspace.spec.js
+++ b/cypress/e2e/workspace.spec.js
@@ -112,7 +112,7 @@ describe('Workspace', function() {
 			['unordered-list', 'ul'],
 			['ordered-list', 'ol'],
 			['task-list', 'ul.contains-task-list'],
-		].forEach(([button, tag]) => testButton(button, tag, 'List me'))
+		].forEach(([button, tag]) => testListButton(button, tag, 'List me'))
 	})
 
 	it('takes README.md into account', function() {
@@ -302,7 +302,23 @@ const openSidebar = filename => {
 }
 
 /**
- *
+ * @param {string} button Name of the button to click.
+ * @param {string} tag Html tag expected to be toggled.
+ * @param {string} content Content expected in the element.
+ */
+function testListButton(button, tag, content) {
+	cy.getSubmenuEntry('lists', button)
+		.should('not.have.class', 'is-active')
+		.click()
+	cy.getContent()
+		.find(`${tag}`)
+		.should('contain', content)
+	cy.getSubmenuEntry('lists', button)
+		.should('have.class', 'is-active')
+		.click()
+}
+
+/**
  * @param {string} button Name of the button to click.
  * @param {string} tag Html tag expected to be toggled.
  * @param {string} content Content expected in the element.
diff --git a/src/components/Menu/ActionListItem.vue b/src/components/Menu/ActionListItem.vue
index 9f994f0da04..97fc38c079f 100644
--- a/src/components/Menu/ActionListItem.vue
+++ b/src/components/Menu/ActionListItem.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<NextcloudVueNcActionButton class="entry-single-action entry-action entry-action-item"
+		:title="listItemTooltip || undefined"
 		:class="state.class"
 		:disabled="state.disabled"
 		:aria-keyshortcuts="keyshortcuts || undefined"
@@ -52,7 +53,7 @@ export default {
 			} else {
 				// Some actions run themselves.
 				// others still need to have .run() called upon them.
-				actionEntry.action(this.$editor.chain().focus())?.run()
+				actionEntry.action(this.$editor.chain().focus(), this.$editor)?.run()
 			}
 
 			this.$nextTick(() => {
diff --git a/src/components/Menu/ActionSingle.vue b/src/components/Menu/ActionSingle.vue
index 0cba20430d2..96e164d3a6d 100644
--- a/src/components/Menu/ActionSingle.vue
+++ b/src/components/Menu/ActionSingle.vue
@@ -58,7 +58,7 @@ export default {
 			} else {
 				// Some actions run themselves.
 				// others still need to have .run() called upon them.
-				actionEntry.action(this.$editor.chain().focus())?.run()
+				actionEntry.action(this.$editor.chain().focus(), this.$editor)?.run()
 			}
 
 			this.$nextTick(() => {
diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js
index d8137733f3a..215575e8a0f 100644
--- a/src/components/Menu/BaseActionEntry.js
+++ b/src/components/Menu/BaseActionEntry.js
@@ -54,6 +54,11 @@ const BaseActionEntry = {
 				getKeys(this.$isMobile, this.actionEntry),
 			].join(' ')
 		},
+		listItemTooltip() {
+			return [
+				getKeys(this.$isMobile, this.actionEntry),
+			].join(' ')
+		},
 	},
 	watch: {
 		/** Handle tabindex for menu toolbar */
diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js
index 19102f8c030..f6d03310a56 100644
--- a/src/components/Menu/entries.js
+++ b/src/components/Menu/entries.js
@@ -19,6 +19,8 @@ import {
 	FormatHeader4,
 	FormatHeader5,
 	FormatHeader6,
+	FormatIndentDecrease,
+	FormatIndentIncrease,
 	FormatListNumbered,
 	FormatListBulleted,
 	FormatListCheckbox,
@@ -127,6 +129,8 @@ export default [
 			{
 				key: 'headings-h1',
 				label: t('text', 'Heading 1'),
+				keyChar: '1',
+				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 				icon: FormatHeader1,
 				isActive: ['heading', { level: 1 }],
 				action: (command) => {
@@ -136,6 +140,8 @@ export default [
 			{
 				key: 'headings-h2',
 				label: t('text', 'Heading 2'),
+				keyChar: '2',
+				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 				icon: FormatHeader2,
 				isActive: ['heading', { level: 2 }],
 				action: (command) => {
@@ -145,6 +151,8 @@ export default [
 			{
 				key: 'headings-h3',
 				label: t('text', 'Heading 3'),
+				keyChar: '3',
+				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 				icon: FormatHeader3,
 				isActive: ['heading', { level: 3 }],
 				action: (command) => {
@@ -154,6 +162,8 @@ export default [
 			{
 				key: 'headings-h4',
 				label: t('text', 'Heading 4'),
+				keyChar: '4',
+				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 				isActive: ['heading', { level: 4 }],
 				icon: FormatHeader4,
 				action: (command) => {
@@ -163,6 +173,8 @@ export default [
 			{
 				key: 'headings-h5',
 				label: t('text', 'Heading 5'),
+				keyChar: '5',
+				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 				isActive: ['heading', { level: 5 }],
 				icon: FormatHeader5,
 				action: (command) => {
@@ -172,6 +184,8 @@ export default [
 			{
 				key: 'headings-h6',
 				label: t('text', 'Heading 6'),
+				keyChar: '6',
+				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
 				isActive: ['heading', { level: 6 }],
 				icon: FormatHeader6,
 				action: (command) => {
@@ -202,38 +216,71 @@ export default [
 		priority: 1,
 	},
 	{
-		key: 'unordered-list',
-		label: t('text', 'Unordered list'),
-		keyChar: '8',
+		key: 'lists',
+		label: t('text', 'Lists'),
+		keyChar: '7…9',
 		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-		isActive: 'bulletList',
+		isActive: [{ isList: true }],
 		icon: FormatListBulleted,
-		action: (command) => {
-			return command.toggleBulletList()
-		},
-		priority: 9,
-	},
-	{
-		key: 'ordered-list',
-		label: t('text', 'Ordered list'),
-		keyChar: '7',
-		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-		isActive: 'orderedList',
-		icon: FormatListNumbered,
-		action: (command) => {
-			return command.toggleOrderedList()
-		},
-		priority: 10,
-	},
-	{
-		key: 'task-list',
-		label: t('text', 'To-Do list'),
-		keyChar: '9',
-		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-		isActive: 'taskList',
-		icon: FormatListCheckbox,
-		action: (command) => command.toggleTaskList(),
-		priority: 11,
+		children: [
+			{
+				key: 'unordered-list',
+				label: t('text', 'Unordered list'),
+				keyChar: '8',
+				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+				isActive: 'bulletList',
+				icon: FormatListBulleted,
+				action: (command) => {
+					return command.toggleBulletList()
+				},
+			},
+			{
+				key: 'ordered-list',
+				label: t('text', 'Ordered list'),
+				keyChar: '7',
+				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+				isActive: 'orderedList',
+				icon: FormatListNumbered,
+				action: (command) => {
+					return command.toggleOrderedList()
+				},
+			},
+			{
+				key: 'task-list',
+				label: t('text', 'To-Do list'),
+				keyChar: '9',
+				keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
+				isActive: 'taskList',
+				icon: FormatListCheckbox,
+				action: (command) => command.toggleTaskList(),
+			},
+			{
+				key: 'list-indent-increase',
+				label: t('text', 'Increase indention'),
+				keyChar: 'Tab',
+				icon: FormatIndentIncrease,
+				action: (command, editor = null) => {
+					if (editor && editor.isActive('taskItem')) {
+						return command.sinkListItem('taskItem')
+					}
+					return command.sinkListItem('listItem')
+				},
+			},
+			{
+				key: 'list-indent-decrease',
+				label: t('text', 'Decrease indention'),
+				keyChar: 'Tab',
+				keyModifiers: [MODIFIERS.Shift],
+				icon: FormatIndentDecrease,
+				action: (command, editor = null) => {
+					if (editor && editor.isActive('taskItem')) {
+						return command.liftListItem('taskItem')
+					}
+					return command.liftListItem('listItem')
+				},
+			},
+		],
+		priority: 3,
 	},
 	{
 		key: 'insert-link',
diff --git a/src/components/Menu/utils.js b/src/components/Menu/utils.js
index fcb48ee1e30..434df4fd934 100644
--- a/src/components/Menu/utils.js
+++ b/src/components/Menu/utils.js
@@ -36,7 +36,7 @@ const getKeys = (isMobile, { keyChar, keyModifiers }) => {
 }
 
 const isDisabled = (actionEntry, $editor) => {
-	return actionEntry.action && !actionEntry.action($editor.can())
+	return actionEntry.action && !actionEntry.action($editor.can(), $editor)
 }
 
 const getIsActive = ({ isActive }, $editor) => {
diff --git a/src/components/icons.js b/src/components/icons.js
index c3d8d8b9fcf..2d1df98e1fe 100644
--- a/src/components/icons.js
+++ b/src/components/icons.js
@@ -26,6 +26,8 @@ import MDI_FormatHeader3 from 'vue-material-design-icons/FormatHeader3.vue'
 import MDI_FormatHeader4 from 'vue-material-design-icons/FormatHeader4.vue'
 import MDI_FormatHeader5 from 'vue-material-design-icons/FormatHeader5.vue'
 import MDI_FormatHeader6 from 'vue-material-design-icons/FormatHeader6.vue'
+import MDI_FormatIndentDecrease from 'vue-material-design-icons/FormatIndentDecrease.vue'
+import MDI_FormatIndentIncrease from 'vue-material-design-icons/FormatIndentIncrease.vue'
 import MDI_FormatItalic from 'vue-material-design-icons/FormatItalic.vue'
 import MDI_FormatListBulleted from 'vue-material-design-icons/FormatListBulleted.vue'
 import MDI_FormatListCheckbox from 'vue-material-design-icons/FormatListCheckbox.vue'
@@ -105,6 +107,8 @@ export const FormatHeader3 = makeIcon(MDI_FormatHeader3)
 export const FormatHeader4 = makeIcon(MDI_FormatHeader4)
 export const FormatHeader5 = makeIcon(MDI_FormatHeader5)
 export const FormatHeader6 = makeIcon(MDI_FormatHeader6)
+export const FormatIndentDecrease = makeIcon(MDI_FormatIndentDecrease)
+export const FormatIndentIncrease = makeIcon(MDI_FormatIndentIncrease)
 export const FormatItalic = makeIcon(MDI_FormatItalic)
 export const FormatListBulleted = makeIcon(MDI_FormatListBulleted)
 export const FormatListCheckbox = makeIcon(MDI_FormatListCheckbox)
diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js
index 99620f9695c..26e29ddf6a3 100644
--- a/src/extensions/RichText.js
+++ b/src/extensions/RichText.js
@@ -33,7 +33,7 @@ import ListItem from '@tiptap/extension-list-item'
 import Markdown from './../extensions/Markdown.js'
 import Mention from './../extensions/Mention.js'
 import Search from './../extensions/Search.js'
-import OrderedList from '@tiptap/extension-ordered-list'
+import OrderedList from './../nodes/OrderedList.js'
 import Paragraph from './../nodes/Paragraph.js'
 import Placeholder from '@tiptap/extension-placeholder'
 import Preview from './../nodes/Preview.js'
diff --git a/src/nodes/BulletList.js b/src/nodes/BulletList.js
index 9c4fe726dad..fe23d4c1a02 100644
--- a/src/nodes/BulletList.js
+++ b/src/nodes/BulletList.js
@@ -19,6 +19,9 @@ const BulletList = TiptapBulletList.extend({
 	addAttributes() {
 		return {
 			...this.parent?.(),
+			isList: {
+				default: true,
+			},
 			bullet: {
 				default: '-',
 				rendered: false,
diff --git a/src/nodes/OrderedList.js b/src/nodes/OrderedList.js
new file mode 100644
index 00000000000..47c23033c44
--- /dev/null
+++ b/src/nodes/OrderedList.js
@@ -0,0 +1,19 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import TiptapOrderedList from '@tiptap/extension-ordered-list'
+
+const OrderedList = TiptapOrderedList.extend({
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			isList: {
+				default: true,
+			},
+		}
+	},
+})
+
+export default OrderedList
diff --git a/src/nodes/TaskList.js b/src/nodes/TaskList.js
index c02e960fddf..5ce80b9b007 100644
--- a/src/nodes/TaskList.js
+++ b/src/nodes/TaskList.js
@@ -22,6 +22,9 @@ const TaskList = TiptapTaskList.extend({
 	addAttributes() {
 		return {
 			...this.parent?.(),
+			isList: {
+				default: true,
+			},
 			bullet: {
 				default: '-',
 				rendered: false,