enh(ui): smart picker button at the end of line

* Show a `+` button that opens the smart picker.
* Show the button when the cursor is at the end of the line.
* Do not show the button if the smart picker is already open.
* Remove the placeholder text.
* Tab navigation to the smart picker works.

Signed-off-by: Max <[email protected]>

src/components/Assistant.vue

@@ -5,6 +5,7 @@
 <template>
 	<div v-if="showAssistant" class="text-assistant">
 		<FloatingMenu v-if="$editor"
+			plugin-key='assistantMenu'
 			:editor="$editor"
 			:tippy-options="floatingOptions()"
 			:should-show="floatingShow"

src/components/Editor.vue

@@ -57,7 +57,9 @@
 					<div v-else class="menubar-placeholder" />
 				</template>
 				<ContentContainer v-show="contentLoaded"
-					ref="contentWrapper" />
+					ref="contentWrapper">
+					<SmartPickerMenu />
+				</ContentContainer />
 			</MainContainer>
 			<Reader v-if="isResolvingConflict"
 				:content="syncError.data.outsideChange"
@@ -123,6 +125,7 @@ import MainContainer from './Editor/MainContainer.vue'
 import Wrapper from './Editor/Wrapper.vue'
 import SkeletonLoading from './SkeletonLoading.vue'
 import Assistant from './Assistant.vue'
+import SmartPickerMenu from './Editor/SmartPickerMenu.vue'
 import Translate from './Modal/Translate.vue'
 import { generateRemoteUrl } from '@nextcloud/router'
 import { fetchNode } from '../services/WebdavClient.ts'
@@ -141,6 +144,7 @@ export default {
 		Status,
 		Assistant,
 		Translate,
+		SmartPickerMenu,
 	},
 	mixins: [
 		isMobile,

src/components/Editor/SmartPickerMenu.vue

@@ -0,0 +1,64 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<FloatingMenu :editor="$editor"
+		:should-show="shouldShow" >
+		<NcActions :title="t('text', 'Open the Smart Picker')" :type="'tertiary'">
+			<NcActionButton @click="openSmartPicker()" >
+				<template #icon>
+					<PlusIcon />
+				</template>
+			</NcActionButton>
+		</NcActions>
+	</FloatingMenu>
+</template>
+
+<script>
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import { getLinkWithPicker } from '@nextcloud/vue/dist/Components/NcRichText.js'
+import { NcActions, NcActionButton } from '@nextcloud/vue'
+import { posToDOMRect } from '@tiptap/core'
+import {
+	useEditorMixin,
+} from '../Editor.provider.js'
+import { FloatingMenu } from '@tiptap/vue-2'
+
+export default {
+	name: 'SmartPickerMenu',
+	components: {
+		FloatingMenu,
+		PlusIcon,
+		NcActions,
+		NcActionButton,
+	},
+	mixins: [
+		useEditorMixin,
+	],
+	methods: {
+		async openSmartPicker() {
+			const parent = this.$editor.state.selection.$anchor.parent
+			const content = parent.textContent.match(/(^| )$/) ? '/' : ' /'
+			this.$editor.chain().focus().insertContent(content).run()
+		},
+		shouldShow({ view, state }) {
+			const { selection } = state
+			const { parent, depth, pos } = selection.$anchor
+			const isRootDepth = depth === 1
+			const isEndOfLine = pos === selection.$anchor.end()
+			const noLinkPickerYet = !parent.textContent.match(/(^| )\/$/)
+			return view.hasFocus()
+				&& this.$editor.isEditable
+				&& isRootDepth
+				&& isEndOfLine
+				&& noLinkPickerYet
+				&& selection.empty
+				&& parent.isTextblock
+				&& !parent.type.spec.code
+		},
+	},
+}
+
+</script>

src/extensions/RichText.js

@@ -35,7 +35,6 @@ import Mention from './../extensions/Mention.js'
 import Search from './../extensions/Search.js'
 import OrderedList from './../nodes/OrderedList.js'
 import Paragraph from './../nodes/Paragraph.js'
-import Placeholder from '@tiptap/extension-placeholder'
 import Preview from './../nodes/Preview.js'
 import Table from './../nodes/Table.js'
 import TaskItem from './../nodes/TaskItem.js'
@@ -112,11 +111,6 @@ export default Extension.create({
 				relativePath: this.options.relativePath,
 			}),
 			LinkBubble,
-			this.options.editing
-				? Placeholder.configure({
-					placeholder: t('text', 'Start writing, or try \'/\' to add, \'@\' to mention…'),
-				})
-				: null,
 			TrailingNode,
 		]
 		const additionalExtensionNames = this.options.extensions.map(e => e.name)