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

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/PreviewOptions.vue

@@ -27,7 +27,7 @@
 				{{ t('text', 'Show link preview') }}
 			</NcActionRadio>
 			<NcActionSeparator />
-			<NcActionButton close-after-click="true" @click="deleteNode">
+			<NcActionButton close-after-click @click="deleteNode">
 				<template #icon>
 					<DeleteIcon :size="20" />
 				</template>
@@ -60,18 +60,6 @@
 			type: String,
 			required: true,
 		},
-		offset: {
-			type: Number,
-			required: true,
-		},
-		nodeSize: {
-			type: Number,
-			required: true,
-		},
-		$editor: {
-			type: Object,
-			required: true,
-		},
 	},
 
 	data() {
@@ -82,23 +70,14 @@
 
 	methods: {
 		onOpen() {
-			this.$editor.commands.hideLinkBubble()
+			this.$emit('open')
 		},
 		toggle(type) {
 			this.open = false
-			const chain = this.$editor.chain().focus()
-				.setTextSelection(this.offset + 1)
-			if (type === 'text-only') {
-				chain.unsetPreview().run()
-				return
-			}
-			chain.setPreview().run()
+			this.$emit('toggle', type)
 		},
 		deleteNode() {
-			this.$editor.commands.deleteRange({
-				from: this.offset,
-				to: this.offset + this.nodeSize,
-			})
+			this.$emit('delete')
 		},
 	},
 }

src/components/Editor/SmartPickerMenu.vue

@@ -0,0 +1,43 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+	<div contenteditable="false" class="smart-picker-menu-container">
+		<NcButton :aria-label="t('text', 'Open the Smart Picker')" :type="'tertiary'" @click="$emit('open-smart-picker')">
+			<template #icon>
+				<PlusIcon />
+			</template>
+		</NcButton>
+	</div>
+</template>
+
+<script>
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
+import { NcButton } from '@nextcloud/vue'
+
+export default {
+	name: 'SmartPickerMenu',
+	components: {
+		PlusIcon,
+		NcButton,
+	},
+}
+
+</script>
+<style lang="scss" scoped>
+
+div[contenteditable=false] {
+	padding: 0;
+	margin: 0;
+}
+
+.smart-picker-menu-container {
+	position: absolute;
+	width: 0 !important;
+	left: -84px;
+	top: 50%;
+	transform: translate(0, -50%);
+}
+</style>

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'
@@ -45,7 +44,6 @@ import TrailingNode from './../nodes/TrailingNode.js'
 /* eslint-enable import/no-named-as-default */
 
 import { Strong, Italic, Strike, Link, Underline } from './../marks/index.js'
-import { translate as t } from '@nextcloud/l10n'
 
 const lowlight = createLowlight(common)
 lowlight.registerAlias('plaintext', 'mermaid')
@@ -112,11 +110,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)

src/nodes/CodeBlockView.vue

@@ -11,7 +11,6 @@
 					<NcActionButton v-if="hasCode"
 						data-cy="copy-code"
 						:aria-label="t('text', 'Copy code')"
-						:close-after-click="false"
 						@click="copyCode">
 						<template #icon>
 							<Check v-if="copySuccess" :size="20" />
@@ -36,19 +35,19 @@
 
 					<NcActionSeparator v-if="supportPreview" />
 
-					<NcActionButton v-if="supportPreview" :close-after-click="true" @click="viewMode = 'code'">
+					<NcActionButton v-if="supportPreview" close-after-click @click="viewMode = 'code'">
 						<template #icon>
 							<CodeBraces :size="20" />
 						</template>
 						{{ t('text', 'Source code') }}
 					</NcActionButton>
-					<NcActionButton v-if="supportPreview" :close-after-click="true" @click="viewMode = 'preview'">
+					<NcActionButton v-if="supportPreview" close-after-click @click="viewMode = 'preview'">
 						<template #icon>
 							<Eye :size="20" />
 						</template>
 						{{ t('text', 'Diagram') }}
 					</NcActionButton>
-					<NcActionButton v-if="supportPreview" :close-after-click="true" @click="viewMode = 'side-by-side'">
+					<NcActionButton v-if="supportPreview" close-after-click @click="viewMode = 'side-by-side'">
 						<template #icon>
 							<ViewSplitVertical :size="20" />
 						</template>

src/nodes/Paragraph.js

@@ -5,6 +5,7 @@
 
 import TiptapParagraph from '@tiptap/extension-paragraph'
 import previewOptions from '../plugins/previewOptions.js'
+import currentLineMenu from '../plugins/currentLineMenu.js'
 
 const Paragraph = TiptapParagraph.extend({
 
@@ -38,9 +39,8 @@ const Paragraph = TiptapParagraph.extend({
 
 	addProseMirrorPlugins() {
 		return [
-			previewOptions({
-				editor: this.editor,
-			}),
+			currentLineMenu({ editor: this.editor }),
+			previewOptions({ editor: this.editor }),
 		]
 	},
 })

src/plugins/LinkBubblePluginView.js

@@ -113,15 +113,17 @@
 		if (Object.prototype.toString.call(referenceEl) === '[object Text]') {
 			referenceEl = referenceEl.parentElement
 		}
-		const clientRect = referenceEl?.getBoundingClientRect()
 
 		this.#component?.updateProps({
 			href: domHref(mark),
 		})
 
-		this.tippy?.setProps({
-			getReferenceClientRect: () => clientRect,
-		})
+		const clientRect = referenceEl?.getBoundingClientRect()
+		if (clientRect) {
+			this.tippy?.setProps({
+				getReferenceClientRect: () => clientRect,
+			})
+		}
 
 		this.tippy?.show()
 		this.addEventListeners()

src/plugins/currentLineMenu.js

@@ -0,0 +1,168 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { EditorState, Plugin, PluginKey, Transaction } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+import { Editor } from '@tiptap/core'
+import Vue from 'vue'
+import SmartPickerMenu from '../components/Editor/SmartPickerMenu.vue'
+
+export const currentLineMenuKey = new PluginKey('currentLineMenu')
+
+/**
+ * Menu for the current line the cursor is on.
+ * ProseMirror plugin providing a single decoration for the current line.
+ *
+ * @param {object} options - options for the plugin
+ * @param {Editor} options.editor - the tiptap editor
+ *
+ * @return {Plugin<DecorationSet>}
+ */
+export default function currentLineMenu({ editor }) {
+	return new Plugin({
+		key: currentLineMenuKey,
+
+		state: {
+			init(_, state) {
+				if (!editor.options.editable) {
+					return { decorations: DecorationSet.empty }
+				}
+				const currentParagraph = getCurrentParagraph(state)
+				return {
+					currentParagraph,
+					decorations: currentParagraphDecorations(state.doc, currentParagraph, editor),
+				}
+			},
+			apply(tr, value, _oldState, newState) {
+				if (!editor.options.editable) {
+					return { decorations: DecorationSet.empty }
+				}
+				const currentParagraph = getCurrentParagraph(newState)
+				if (!currentParagraph) {
+					return { decorations: DecorationSet.empty }
+				}
+				const decorations = mapDecorations(value, tr, currentParagraph)
+					|| currentParagraphDecorations(newState.doc, currentParagraph, editor)
+				return { currentParagraph, decorations }
+			},
+		},
+
+		props: {
+			decorations(state) {
+				return this.getState(state).decorations
+			},
+		},
+	})
+}
+
+/**
+ * Map the previous deocrations to current document state
+ *
+ * Return false if previewParagraphs changes or decorations would get removed. The latter prevents
+ * lost decorations in case of replacements.
+ *
+ * @param {object} value - previous plugin state
+ * @param {Transaction} tr - current transaction
+ * @param {object|undefined} currentParagraph - attributes of the current paragraph
+ *
+ * @return {false|DecorationSet}
+ */
+function mapDecorations(value, tr, currentParagraph) {
+	if (value.currentParagraph?.pos !== currentParagraph.pos) {
+		return false
+	}
+	let removedDecorations = false
+	const decorations = value.decorations.map(tr.mapping, tr.doc, {
+		onRemove: () => {
+			removedDecorations = true
+		},
+	})
+	return removedDecorations
+		? false
+		: decorations
+}
+
+/**
+ * Get the paragraph node the cursor is on.
+ *
+ * @param {EditorState} state - the prosemirror state
+ * @return {object|undefined} - the current paragraph if the cursor is in one
+ */
+function getCurrentParagraph({ selection }) {
+	const { parent, depth } = selection.$anchor
+	// handle invalid cursor position
+	if (depth > 1) {
+		return false
+	}
+	const pos = depth === 0 ? 0 : selection.$anchor.before()
+	const isRootDepth = depth === 1
+	const noLinkPickerYet = !parent.textContent.match(/(^| )\/$/)
+	if (isRootDepth
+		&& noLinkPickerYet
+		&& selection.empty
+		&& parent.isTextblock
+		&& !parent.type.spec.code) {
+		return { pos }
+	}
+}
+
+/**
+ * Create a menu decorations for the given paragraph
+ *
+ * @param {Document} doc - prosemirror doc
+ * @param {object} currentParagraph - paragraph to decorate
+ * @param {Editor} editor - tiptap editor
+ *
+ * @return {DecorationSet}
+ */
+function currentParagraphDecorations(doc, currentParagraph, editor) {
+	if (!currentParagraph) {
+		return DecorationSet.empty
+	}
+	const decorations = [decorationForCurrentParagraph(currentParagraph, editor)]
+	return DecorationSet.create(doc, decorations)
+}
+
+/**
+ * Create a decoration for the currentParagraph
+ *
+ * @param {object} currentParagraph to decorate
+ * @param {Editor} editor - tiptap editor
+ *
+ * @return {Decoration}
+ */
+function decorationForCurrentParagraph(currentParagraph, editor) {
+	return Decoration.widget(
+		currentParagraph.pos + 1,
+		menuForCurrentParagraph(editor),
+		{ side: -1 },
+	)
+}
+
+/**
+ * Create a menu element for the given currentParagraph
+ *
+ * @param {Editor} editor - tiptap editor
+ *
+ * @return {Element}
+ */
+function menuForCurrentParagraph(editor) {
+	const el = document.createElement('div')
+	const Component = Vue.extend(SmartPickerMenu)
+	const menu = new Component()
+	menu.$mount(el)
+	menu.$on('open-smart-picker', () => {
+		const { selection } = editor.state
+		const { textContent } = selection.$anchor.parent
+		const eol = selection.$anchor.end()
+		const contentToInsert = textContent.match(/(^| )$/) ? '/' : ' /'
+		editor.chain()
+			.focus()
+			.setTextSelection(eol)
+			.insertContent(contentToInsert)
+			.run()
+	})
+	return menu.$el
+}

src/plugins/extractLinkParagraphs.js

@@ -14,16 +14,16 @@ import { isLinkToSelfWithHash } from './../helpers/links.js'
 export default function extractLinkParagraphs(doc) {
 	const paragraphs = []
 
-	doc.descendants((node, offset) => {
+	doc.descendants((node, pos) => {
 		if (previewPossible(node)) {
 			paragraphs.push(Object.freeze({
-				offset,
+				pos,
 				nodeSize: node.nodeSize,
 				type: 'text-only',
 			}))
 		} else if (node.type.name === 'preview') {
 			paragraphs.push(Object.freeze({
-				offset,
+				pos,
 				nodeSize: node.nodeSize,
 				type: 'link-preview',
 			}))