🚧 (#107): Add outline view

Signed-off-by: Vinicius Reis <vinicius.reis@nextcloud.com>

5 files changed, 43 insertions, 10 deletions

diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
index 42ac2e7de..2912a7289 100644
--- a/src/components/Menu/ActionList.vue
+++ b/src/components/Menu/ActionList.vue
@@ -32,7 +32,7 @@
 		<template #icon>
 			<component :is="icon" :key="iconKey" />
 		</template>
-		<ActionSingle v-for="child in actionEntry.children"
+		<ActionSingle v-for="child in children"
 			:key="`child-${child.key}`"
 			is-item
 			:action-entry="child"
@@ -45,11 +45,14 @@ import Actions from '@nextcloud/vue/dist/Components/Actions'
 import { BaseActionEntry } from './BaseActionEntry.js'
 import ActionSingle from './ActionSingle.vue'
 import { getIsActive } from './utils.js'
+import { useOutlineStateMixin } from '../Editor/Wrapper.provider.js'
+import useStore from '../../mixins/store.js'
 
 export default {
 	name: 'ActionList',
 	components: { Actions, ActionSingle },
 	extends: BaseActionEntry,
+	mixins: [useStore, useOutlineStateMixin],
 	computed: {
 		currentChild() {
 			const {
@@ -79,6 +82,17 @@ export default {
 		activeKey() {
 			return this.currentChild?.key
 		},
+		children() {
+			return this.actionEntry.children.filter(({ visible }) => {
+				if (visible === undefined) {
+					return true
+				}
+
+				return typeof visible === 'function'
+					? visible(this)
+					: visible
+			})
+		},
 	},
 	methods: {
 		runAction() {
@@ -86,11 +100,10 @@ export default {
 		},
 		onTrigger(entry) {
 			if (entry?.click) {
-				entry.click(this)
-			} else {
-				this.$editor.chain().focus().run()
-				this.$emit('trigged', entry)
+				return
 			}
+			this.$editor.chain().focus().run()
+			this.$emit('trigged', entry)
 		},
 	},
 }
diff --git a/src/components/Menu/ActionSingle.vue b/src/components/Menu/ActionSingle.vue
index e6599c717..5663cab1e 100644
--- a/src/components/Menu/ActionSingle.vue
+++ b/src/components/Menu/ActionSingle.vue
@@ -47,6 +47,7 @@ export default {
 
 			const state = {
 				...this.state,
+				ariaLabel: this.label,
 			}
 
 			state.class = {
@@ -95,6 +96,7 @@ export default {
 			isItem,
 			runAction,
 			tooltip,
+			label,
 		} = this
 
 		const { class: classes, ...attrs } = bindState
@@ -110,11 +112,11 @@ export default {
 		const children = [h(icon, { slot: 'icon' })]
 
 		// do not use title if is a item of action list
-		const title = isItem ? undefined : actionEntry.label
+		const title = isItem ? undefined : label
 
 		if (isItem) {
 			// add label
-			children.push(actionEntry.label)
+			children.push(label)
 		}
 
 		return h(component, {
diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js
index e675bd95b..5a862d74c 100644
--- a/src/components/Menu/BaseActionEntry.js
+++ b/src/components/Menu/BaseActionEntry.js
@@ -26,7 +26,9 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import debounce from 'debounce'
 
 import { useEditorMixin, useIsMobileMixin } from '../Editor.provider.js'
+import { useOutlineActions, useOutlineStateMixin } from '../Editor/Wrapper.provider.js'
 import { getActionState, getKeys, getKeyshortcuts } from './utils.js'
+import useStore from '../../mixins/store.js'
 
 import './ActionEntry.scss'
 
@@ -37,7 +39,7 @@ const BaseActionEntry = {
 	directives: {
 		Tooltip,
 	},
-	mixins: [useEditorMixin, useIsMobileMixin],
+	mixins: [useEditorMixin, useIsMobileMixin, useStore, useOutlineActions, useOutlineStateMixin],
 	props: {
 		actionEntry: {
 			type: Object,
@@ -50,6 +52,13 @@ const BaseActionEntry = {
 		}
 	},
 	computed: {
+		label() {
+			const { label } = this.actionEntry
+
+			return typeof label === 'function'
+				? label(this)
+				: label
+		},
 		icon() {
 			return this.actionEntry.icon
 		},
diff --git a/src/components/Menu/entries.js b/src/components/Menu/entries.js
index e81582ca7..1957dca08 100644
--- a/src/components/Menu/entries.js
+++ b/src/components/Menu/entries.js
@@ -124,7 +124,6 @@ export default [
 		label: t('text', 'Headings'),
 		keyChar: '1…6',
 		keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
-		visible: false,
 		icon: FormatHeader1,
 		isActive: 'heading',
 		children: [
@@ -182,6 +181,17 @@ export default [
 					return command.toggleHeading({ level: 6 })
 				},
 			},
+			{
+				key: 'outline',
+				icon: FormatListBulleted,
+				visible: ({ $outlineState }) => $outlineState.enable,
+				click: ({ $outlineActions }) => $outlineActions.toggle(),
+				label: ({ $outlineState }) => {
+					return $outlineState.visible
+						? t('text', 'Hide Outline')
+						: t('text', 'Show Outline')
+				},
+			},
 		],
 		priority: 1,
 	},
diff --git a/src/components/Menu/utils.js b/src/components/Menu/utils.js
index 5ac04c7d5..4410aca68 100644
--- a/src/components/Menu/utils.js
+++ b/src/components/Menu/utils.js
@@ -72,7 +72,6 @@ const getActionState = (actionEntry, $editor) => {
 	const active = getIsActive(actionEntry, $editor)
 
 	return {
-		ariaLabel: actionEntry.label,
 		disabled: isDisabled(actionEntry, $editor),
 		class: getEntryClasses(actionEntry, active),
 		active,