From 502c0a5595d66f20cf8a42ee3edc0ae28a384098 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Fri, 13 Sep 2024 13:55:42 +0200
Subject: [PATCH 1/2] feat(menu): Put list items in submenu, add indentation
 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                | 111 +++++++++++++-----
 src/components/Menu/utils.js                  |   2 +-
 .../Suggestion/LinkPicker/suggestions.js      |   1 +
 src/components/icons.js                       |   4 +
 src/extensions/RichText.js                    |   2 +-
 src/nodes/BulletList.js                       |   4 +
 src/nodes/OrderedList.js                      |  20 ++++
 src/nodes/TaskList.js                         |   4 +
 12 files changed, 142 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 4cc9b0a875d..283643c4715 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,
@@ -126,6 +128,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) => {
@@ -135,6 +139,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) => {
@@ -144,6 +150,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) => {
@@ -153,6 +161,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) => {
@@ -162,6 +172,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) => {
@@ -171,6 +183,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) => {
@@ -201,38 +215,75 @@ 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: 'lists-separator',
+				isSeparator: true,
+			},
+			{
+				key: 'list-indent-increase',
+				label: t('text', 'Increase indentation'),
+				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 indentation'),
+				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/Suggestion/LinkPicker/suggestions.js b/src/components/Suggestion/LinkPicker/suggestions.js
index f8d2625ff6a..2d5829d9101 100644
--- a/src/components/Suggestion/LinkPicker/suggestions.js
+++ b/src/components/Suggestion/LinkPicker/suggestions.js
@@ -63,6 +63,7 @@ const formattingSuggestions = (query) => {
 	return sortImportantFirst(
 		[
 			...menuEntries.find(e => e.key === 'headings').children,
+			...menuEntries.find(e => e.key === 'lists').children,
 			...menuEntries.filter(e => e.action && !filterOut(e)),
 			...menuEntries.find(e => e.key === 'callouts').children,
 			{
diff --git a/src/components/icons.js b/src/components/icons.js
index 5e9845690a7..a90875abb06 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'
@@ -104,6 +106,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 90551227ec9..87182778b94 100644
--- a/src/extensions/RichText.js
+++ b/src/extensions/RichText.js
@@ -32,7 +32,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..07f7582683e 100644
--- a/src/nodes/BulletList.js
+++ b/src/nodes/BulletList.js
@@ -19,6 +19,10 @@ const BulletList = TiptapBulletList.extend({
 	addAttributes() {
 		return {
 			...this.parent?.(),
+			isList: {
+				default: true,
+				rendered: false,
+			},
 			bullet: {
 				default: '-',
 				rendered: false,
diff --git a/src/nodes/OrderedList.js b/src/nodes/OrderedList.js
new file mode 100644
index 00000000000..8e5b0f9b616
--- /dev/null
+++ b/src/nodes/OrderedList.js
@@ -0,0 +1,20 @@
+/**
+ * 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,
+				rendered: false,
+			},
+		}
+	},
+})
+
+export default OrderedList
diff --git a/src/nodes/TaskList.js b/src/nodes/TaskList.js
index c02e960fddf..f47350ba40a 100644
--- a/src/nodes/TaskList.js
+++ b/src/nodes/TaskList.js
@@ -22,6 +22,10 @@ const TaskList = TiptapTaskList.extend({
 	addAttributes() {
 		return {
 			...this.parent?.(),
+			isList: {
+				default: true,
+				rendered: false,
+			},
 			bullet: {
 				default: '-',
 				rendered: false,

From d7a31d36c18ec7bb5881e4f108827805ecd60c77 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Sat, 14 Sep 2024 08:25:02 +0200
Subject: [PATCH 2/2] fix(menu): Update priority numbers for menu entries

Makes sure they're a continuous row from 1 to 16

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/Menu/entries.js | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js
index 283643c4715..be28efef2f5 100644
--- a/src/components/Menu/entries.js
+++ b/src/components/Menu/entries.js
@@ -58,7 +58,7 @@ export default [
 		keyModifiers: [MODIFIERS.Mod],
 		icon: Undo,
 		action: (command) => command.undo(),
-		priority: 6,
+		priority: 7,
 	},
 	{
 		key: 'redo',
@@ -67,7 +67,7 @@ export default [
 		keyModifiers: [MODIFIERS.Mod],
 		icon: Redo,
 		action: (command) => command.redo(),
-		priority: 12,
+		priority: 10,
 	},
 	{
 		key: 'bold',
@@ -79,7 +79,7 @@ export default [
 		action: (command) => {
 			return command.toggleBold()
 		},
-		priority: 7,
+		priority: 8,
 	},
 	{
 		key: 'italic',
@@ -91,7 +91,7 @@ export default [
 		action: (command) => {
 			return command.toggleItalic()
 		},
-		priority: 8,
+		priority: 9,
 	},
 	{
 		key: 'underline',
@@ -103,7 +103,7 @@ export default [
 		action: (command) => {
 			return command.toggleUnderline()
 		},
-		priority: 15,
+		priority: 13,
 	},
 	{
 		key: 'strikethrough',
@@ -115,7 +115,7 @@ export default [
 		action: (command) => {
 			return command.toggleStrike()
 		},
-		priority: 16,
+		priority: 14,
 	},
 	{
 		key: 'headings',
@@ -283,7 +283,7 @@ export default [
 				},
 			},
 		],
-		priority: 3,
+		priority: 2,
 	},
 	{
 		key: 'insert-link',
@@ -291,7 +291,7 @@ export default [
 		isActive: 'link',
 		icon: LinkIcon,
 		component: ActionInsertLink,
-		priority: 2,
+		priority: 3,
 	},
 	{
 		key: 'blockquote',
@@ -303,7 +303,7 @@ export default [
 		action: (command) => {
 			return command.toggleBlockquote()
 		},
-		priority: 13,
+		priority: 11,
 	},
 	{
 		key: 'callouts',
@@ -349,7 +349,7 @@ export default [
 				},
 			},
 		],
-		priority: 6,
+		priority: 4,
 	},
 	{
 		key: 'code-block',
@@ -361,7 +361,7 @@ export default [
 		action: (command) => {
 			return command.toggleCodeBlock()
 		},
-		priority: 14,
+		priority: 12,
 	},
 	{
 		key: 'table',
@@ -371,7 +371,7 @@ export default [
 		action: (command) => {
 			return command.insertTable()
 		},
-		priority: 17,
+		priority: 15,
 	},
 	{
 		key: 'emoji-picker',
@@ -381,13 +381,13 @@ export default [
 		action: (command, emojiObject = {}) => {
 			return command.emoji(emojiObject)
 		},
-		priority: 3,
+		priority: 5,
 	},
 	{
 		key: 'insert-attachment',
 		label: t('text', 'Insert attachment'),
 		icon: Paperclip,
 		component: ActionAttachmentUpload,
-		priority: 1,
+		priority: 6,
 	},
 ]