From 35296f78fe7ee7fe565af9d537c37c54fd73372f Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Wed, 15 Jan 2025 12:02:26 +0100
Subject: [PATCH 01/10] 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 <max@nextcloud.com>
---
 src/components/Assistant.vue              |  1 +
 src/components/Editor.vue                 |  6 ++-
 src/components/Editor/SmartPickerMenu.vue | 62 +++++++++++++++++++++++
 src/extensions/RichText.js                |  7 ---
 4 files changed, 68 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Editor/SmartPickerMenu.vue

diff --git a/src/components/Assistant.vue b/src/components/Assistant.vue
index 2dbfeea89ad..011c21a4d97 100644
--- a/src/components/Assistant.vue
+++ b/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"
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 76893fca873..09933e3412e 100644
--- a/src/components/Editor.vue
+++ b/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,
diff --git a/src/components/Editor/SmartPickerMenu.vue b/src/components/Editor/SmartPickerMenu.vue
new file mode 100644
index 00000000000..251d3812f79
--- /dev/null
+++ b/src/components/Editor/SmartPickerMenu.vue
@@ -0,0 +1,62 @@
+<!--
+  - 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 { NcActions, NcActionButton } from '@nextcloud/vue'
+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>
diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js
index cf71f42c71b..bcacc24879f 100644
--- a/src/extensions/RichText.js
+++ b/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)

From d5d2503fa0267e56bbed6121610dab226995b1d6 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Wed, 15 Jan 2025 15:12:40 +0100
Subject: [PATCH 02/10] enh(ui): show smart picker button when cursor is not
 eol.

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor/SmartPickerMenu.vue | 29 ++++++++++++++++-------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/Editor/SmartPickerMenu.vue b/src/components/Editor/SmartPickerMenu.vue
index 251d3812f79..0d1b6b41a77 100644
--- a/src/components/Editor/SmartPickerMenu.vue
+++ b/src/components/Editor/SmartPickerMenu.vue
@@ -5,6 +5,7 @@
 
 <template>
 	<FloatingMenu :editor="$editor"
+		:tippy-options="tippyOptions()"
 		:should-show="shouldShow">
 		<NcActions :title="t('text', 'Open the Smart Picker')" :type="'tertiary'">
 			<NcActionButton @click="openSmartPicker()">
@@ -19,10 +20,9 @@
 <script>
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import { NcActions, NcActionButton } from '@nextcloud/vue'
-import {
-	useEditorMixin,
-} from '../Editor.provider.js'
+import { posToDOMRect } from '@tiptap/core'
 import { FloatingMenu } from '@tiptap/vue-2'
+import { useEditorMixin } from '../Editor.provider.js'
 
 export default {
 	name: 'SmartPickerMenu',
@@ -37,25 +37,38 @@ export default {
 	],
 	methods: {
 		async openSmartPicker() {
-			const parent = this.$editor.state.selection.$anchor.parent
-			const content = parent.textContent.match(/(^| )$/) ? '/' : ' /'
-			this.$editor.chain().focus().insertContent(content).run()
+			const { selection } = this.$editor.state
+			const { textContent } = selection.$anchor.parent
+			const eol = selection.$anchor.end()
+			const contentToInsert = textContent.match(/(^| )$/) ? '/' : ' /'
+			this.$editor.chain()
+				.focus()
+				.setTextSelection(eol)
+				.insertContent(contentToInsert)
+				.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
 		},
+		tippyOptions() {
+			return {
+				getReferenceClientRect: () => {
+					const { view, state } = this.$editor
+					const eol = state.selection.$anchor.end()
+					return posToDOMRect(view, eol, eol)
+				},
+			}
+		},
 	},
 }
 

From eaefa84c348440f1954068c25db0bee774975f53 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Wed, 15 Jan 2025 18:29:07 +0100
Subject: [PATCH 03/10] fix(ui): tab order for smart picker menu

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor.vue                 |   6 +-
 src/components/Editor/PreviewOptions.vue  |   8 +-
 src/components/Editor/SmartPickerMenu.vue |  65 +++-------
 src/nodes/Paragraph.js                    |   6 +-
 src/plugins/currentLineMenu.js            | 138 ++++++++++++++++++++++
 src/plugins/extractLinkParagraphs.js      |   6 +-
 src/plugins/previewOptions.js             |   2 +-
 7 files changed, 168 insertions(+), 63 deletions(-)
 create mode 100644 src/plugins/currentLineMenu.js

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 09933e3412e..76893fca873 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -57,9 +57,7 @@
 					<div v-else class="menubar-placeholder" />
 				</template>
 				<ContentContainer v-show="contentLoaded"
-					ref="contentWrapper">
-					<SmartPickerMenu />
-				</ContentContainer>
+					ref="contentWrapper" />
 			</MainContainer>
 			<Reader v-if="isResolvingConflict"
 				:content="syncError.data.outsideChange"
@@ -125,7 +123,6 @@ 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'
@@ -144,7 +141,6 @@ export default {
 		Status,
 		Assistant,
 		Translate,
-		SmartPickerMenu,
 	},
 	mixins: [
 		isMobile,
diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index 33bc96dbf87..f52182c98d9 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -60,7 +60,7 @@ export default {
 			type: String,
 			required: true,
 		},
-		offset: {
+		pos: {
 			type: Number,
 			required: true,
 		},
@@ -87,7 +87,7 @@ export default {
 		toggle(type) {
 			this.open = false
 			const chain = this.$editor.chain().focus()
-				.setTextSelection(this.offset + 1)
+				.setTextSelection(this.pos + 1)
 			if (type === 'text-only') {
 				chain.unsetPreview().run()
 				return
@@ -96,8 +96,8 @@ export default {
 		},
 		deleteNode() {
 			this.$editor.commands.deleteRange({
-				from: this.offset,
-				to: this.offset + this.nodeSize,
+				from: this.pos,
+				to: this.pos + this.nodeSize,
 			})
 		},
 	},
diff --git a/src/components/Editor/SmartPickerMenu.vue b/src/components/Editor/SmartPickerMenu.vue
index 0d1b6b41a77..b51c107cb88 100644
--- a/src/components/Editor/SmartPickerMenu.vue
+++ b/src/components/Editor/SmartPickerMenu.vue
@@ -4,72 +4,43 @@
 -->
 
 <template>
-	<FloatingMenu :editor="$editor"
-		:tippy-options="tippyOptions()"
-		:should-show="shouldShow">
+	<div contenteditable="false" class="smart-picker-menu-container">
 		<NcActions :title="t('text', 'Open the Smart Picker')" :type="'tertiary'">
-			<NcActionButton @click="openSmartPicker()">
+			<NcActionButton @click="$emit('open-smart-picker')">
 				<template #icon>
 					<PlusIcon />
 				</template>
 			</NcActionButton>
 		</NcActions>
-	</FloatingMenu>
+	</div>
 </template>
 
 <script>
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import { NcActions, NcActionButton } from '@nextcloud/vue'
-import { posToDOMRect } from '@tiptap/core'
-import { FloatingMenu } from '@tiptap/vue-2'
-import { useEditorMixin } from '../Editor.provider.js'
 
 export default {
 	name: 'SmartPickerMenu',
 	components: {
-		FloatingMenu,
 		PlusIcon,
 		NcActions,
 		NcActionButton,
 	},
-	mixins: [
-		useEditorMixin,
-	],
-	methods: {
-		async openSmartPicker() {
-			const { selection } = this.$editor.state
-			const { textContent } = selection.$anchor.parent
-			const eol = selection.$anchor.end()
-			const contentToInsert = textContent.match(/(^| )$/) ? '/' : ' /'
-			this.$editor.chain()
-				.focus()
-				.setTextSelection(eol)
-				.insertContent(contentToInsert)
-				.run()
-		},
-		shouldShow({ view, state }) {
-			const { selection } = state
-			const { parent, depth, pos } = selection.$anchor
-			const isRootDepth = depth === 1
-			const noLinkPickerYet = !parent.textContent.match(/(^| )\/$/)
-			return view.hasFocus()
-				&& this.$editor.isEditable
-				&& isRootDepth
-				&& noLinkPickerYet
-				&& selection.empty
-				&& parent.isTextblock
-				&& !parent.type.spec.code
-		},
-		tippyOptions() {
-			return {
-				getReferenceClientRect: () => {
-					const { view, state } = this.$editor
-					const eol = state.selection.$anchor.end()
-					return posToDOMRect(view, eol, eol)
-				},
-			}
-		},
-	},
 }
 
 </script>
+<style lang="scss" scoped>
+
+div[contenteditable=false] {
+	padding: 0;
+	margin: 0;
+}
+
+.smart-picker-menu-container {
+	position: absolute;
+	width: 0 !important;
+	left: -80px;
+	top: 50%;
+	transform: translate(0, -50%);
+}
+</style>
diff --git a/src/nodes/Paragraph.js b/src/nodes/Paragraph.js
index af314ba83a2..9dbd5427433 100644
--- a/src/nodes/Paragraph.js
+++ b/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 }),
 		]
 	},
 })
diff --git a/src/plugins/currentLineMenu.js b/src/plugins/currentLineMenu.js
new file mode 100644
index 00000000000..ac053a4682f
--- /dev/null
+++ b/src/plugins/currentLineMenu.js
@@ -0,0 +1,138 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { Plugin, PluginKey, EditorState } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+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 {object} 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 = (value.currentParagraph?.index === currentParagraph.index)
+					? value.decorations.map(tr.mapping, tr.doc)
+					: currentParagraphDecorations(newState.doc, currentParagraph, editor)
+				return { currentParagraph, decorations }
+			},
+		},
+
+		props: {
+			decorations(state) {
+				return this.getState(state).decorations
+			},
+		},
+	})
+}
+
+/**
+ * Get the paragraph node the cursor is on.
+ *
+ * @param {EditorState} state - the prosemirror state
+ * @return {Node|undefined} - the current paragraph if the cursor is in one
+ */
+function getCurrentParagraph({ selection }) {
+	const { parent, depth } = selection.$anchor
+	const isRootDepth = depth === 1
+	const noLinkPickerYet = !parent.textContent.match(/(^| )\/$/)
+	return isRootDepth
+		&& noLinkPickerYet
+		&& selection.empty
+		&& parent.isTextblock
+		&& !parent.type.spec.code
+		&& { pos: selection.$anchor.before(), index: selection.$anchor.index(0) }
+}
+
+/**
+ * Create a menu decorations for the given paragraph
+ *
+ * @param {Document} doc - prosemirror doc
+ * @param {Node} currentParagraph - paragraph to decorate
+ * @param {object} editor - tiptap editor
+ *
+ * @return {DecorationSet}
+ */
+function currentParagraphDecorations(doc, currentParagraph, editor) {
+	const decorations = [decorationForCurrentParagraph(currentParagraph, editor)]
+	return DecorationSet.create(doc, decorations)
+}
+
+/**
+ * Create a decoration for the currentParagraph
+ *
+ * @param {object} currentParagraph to decorate
+ * @param {object} editor - tiptap editor
+ *
+ * @return {Decoration}
+ */
+function decorationForCurrentParagraph(currentParagraph, editor) {
+	return Decoration.widget(
+		currentParagraph.pos + 1,
+		menuForCurrentParagraph(currentParagraph, editor),
+		{ side: -1 },
+	)
+}
+
+/**
+ * Create a menu element for the given currentParagraph
+ *
+ * @param {object} currentParagraph - currentParagraph to generate menu for
+ * @param {object} editor - tiptap editor
+ *
+ * @return {Element}
+ */
+function menuForCurrentParagraph(currentParagraph, editor) {
+	const propsData = {
+		$editor: editor,
+		...currentParagraph,
+	}
+	const el = document.createElement('div')
+	const Component = Vue.extend(SmartPickerMenu)
+	const menu = new Component({
+		propsData,
+	}).$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
+}
diff --git a/src/plugins/extractLinkParagraphs.js b/src/plugins/extractLinkParagraphs.js
index 738c8bf4647..35965a4c676 100644
--- a/src/plugins/extractLinkParagraphs.js
+++ b/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',
 			}))
diff --git a/src/plugins/previewOptions.js b/src/plugins/previewOptions.js
index c967ab6fba0..0c8e3dea6c5 100644
--- a/src/plugins/previewOptions.js
+++ b/src/plugins/previewOptions.js
@@ -129,7 +129,7 @@ function linkParagraphDecorations(doc, linkParagraphs, editor) {
  */
 function decorationForLinkParagraph(linkParagraph, editor) {
 	return Decoration.widget(
-		linkParagraph.offset + 1,
+		linkParagraph.pos + 1,
 		previewOptionForLinkParagraph(linkParagraph, editor),
 		{ side: -1 },
 	)

From 72e55ed6c3b71bce1f0b90fdb5ce4eca76421d63 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Wed, 15 Jan 2025 18:52:00 +0100
Subject: [PATCH 04/10] fix(type): hand a boolean to close-after-click

Also standardize our use of it.

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor/PreviewOptions.vue | 2 +-
 src/nodes/CodeBlockView.vue              | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index f52182c98d9..05162a04236 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/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>
diff --git a/src/nodes/CodeBlockView.vue b/src/nodes/CodeBlockView.vue
index 26390dc6947..a09520cdb0a 100644
--- a/src/nodes/CodeBlockView.vue
+++ b/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>

From ceef59973974e6287569a94e42277bc4b76f0b00 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Wed, 15 Jan 2025 21:04:59 +0100
Subject: [PATCH 05/10] fix(linkBubble): only set client rect if available

Signed-off-by: Max <max@nextcloud.com>
---
 src/plugins/LinkBubblePluginView.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/plugins/LinkBubblePluginView.js b/src/plugins/LinkBubblePluginView.js
index 84d148329a6..223de5f771d 100644
--- a/src/plugins/LinkBubblePluginView.js
+++ b/src/plugins/LinkBubblePluginView.js
@@ -113,15 +113,17 @@ class LinkBubblePluginView {
 		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()

From d4c454e8d1eada552e5895474bb580adcf0c3948 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Wed, 15 Jan 2025 21:06:20 +0100
Subject: [PATCH 06/10] fix(preview): use $emit and $on instead of editor as
 prop

Props get all the reactivity overhead.
Avoid making editor reactive.

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor/PreviewOptions.vue | 27 ++--------------
 src/plugins/previewOptions.js            | 39 +++++++++++++++++++-----
 2 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index 05162a04236..d19d589383b 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -60,18 +60,6 @@ export default {
 			type: String,
 			required: true,
 		},
-		pos: {
-			type: Number,
-			required: true,
-		},
-		nodeSize: {
-			type: Number,
-			required: true,
-		},
-		$editor: {
-			type: Object,
-			required: true,
-		},
 	},
 
 	data() {
@@ -82,23 +70,14 @@ export default {
 
 	methods: {
 		onOpen() {
-			this.$editor.commands.hideLinkBubble()
+			this.$emit('open')
 		},
 		toggle(type) {
 			this.open = false
-			const chain = this.$editor.chain().focus()
-				.setTextSelection(this.pos + 1)
-			if (type === 'text-only') {
-				chain.unsetPreview().run()
-				return
-			}
-			chain.setPreview().run()
+			this.$emit('toggle', type)
 		},
 		deleteNode() {
-			this.$editor.commands.deleteRange({
-				from: this.pos,
-				to: this.pos + this.nodeSize,
-			})
+			this.$emit('delete')
 		},
 	},
 }
diff --git a/src/plugins/previewOptions.js b/src/plugins/previewOptions.js
index 0c8e3dea6c5..a30bdc07377 100644
--- a/src/plugins/previewOptions.js
+++ b/src/plugins/previewOptions.js
@@ -139,19 +139,42 @@ function decorationForLinkParagraph(linkParagraph, editor) {
  * Create a previewOptions element for the given linkParagraph
  *
  * @param {object} linkParagraph - linkParagraph to generate anchor for
+ * @param {number} linkParagraph.pos - Position of the node
+ * @param {string} linkParagraph.type - selected type
+ * @param {number} linkParagraph.nodeSize - size of the node
  * @param {object} editor - tiptap editor
  *
  * @return {Element}
  */
-function previewOptionForLinkParagraph(linkParagraph, editor) {
-	const propsData = {
-		$editor: editor,
-		...linkParagraph,
-	}
+function previewOptionForLinkParagraph({ type, pos, nodeSize }, editor) {
 	const el = document.createElement('div')
 	const Component = Vue.extend(PreviewOptions)
-	const previewOption = new Component({
-		propsData,
-	}).$mount(el)
+	const propsData = { type }
+	const previewOption = new Component({ propsData }).$mount(el)
+	previewOption.$on('open', () => {
+		editor.commands.hideLinkBubble()
+	})
+	previewOption.$on('toggle', (type) => {
+		setPreview(pos, type, editor)
+	})
+	previewOption.$on('delete', () => {
+		editor.commands.deleteRange({ from: pos, to: pos + nodeSize })
+	})
 	return previewOption.$el
 }
+
+/**
+ *
+ *
+ * @param {number} pos - Position of the node
+ * @param {string} type - selected type
+ * @param {object} editor - tiptap editor
+ */
+function setPreview(pos, type, editor) {
+	const chain = editor.chain().focus().setTextSelection(pos + 1)
+	if (type !== 'text-only') {
+		chain.setPreview().run()
+	} else {
+		chain.unsetPreview().run()
+	}
+}

From cea5ddd20384d34f9c5f6625597ffac448e02590 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Wed, 15 Jan 2025 22:47:53 +0100
Subject: [PATCH 07/10] fix(menu): display current line menu on loading

Signed-off-by: Max <max@nextcloud.com>
---
 src/plugins/currentLineMenu.js | 58 ++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/src/plugins/currentLineMenu.js b/src/plugins/currentLineMenu.js
index ac053a4682f..484567a22a3 100644
--- a/src/plugins/currentLineMenu.js
+++ b/src/plugins/currentLineMenu.js
@@ -42,9 +42,8 @@ export default function currentLineMenu({ editor }) {
 				if (!currentParagraph) {
 					return { decorations: DecorationSet.empty }
 				}
-				const decorations = (value.currentParagraph?.index === currentParagraph.index)
-					? value.decorations.map(tr.mapping, tr.doc)
-					: currentParagraphDecorations(newState.doc, currentParagraph, editor)
+				const decorations = mapDecorations(value, tr, currentParagraph)
+					|| currentParagraphDecorations(newState.doc, currentParagraph, editor)
 				return { currentParagraph, decorations }
 			},
 		},
@@ -57,6 +56,33 @@ export default function currentLineMenu({ editor }) {
 	})
 }
 
+/**
+ * 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 {object} tr - current transaction
+ * @param {object} 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.
  *
@@ -65,14 +91,20 @@ export default function currentLineMenu({ editor }) {
  */
 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(/(^| )\/$/)
-	return isRootDepth
+	if (isRootDepth
 		&& noLinkPickerYet
 		&& selection.empty
 		&& parent.isTextblock
-		&& !parent.type.spec.code
-		&& { pos: selection.$anchor.before(), index: selection.$anchor.index(0) }
+		&& !parent.type.spec.code) {
+		return { pos }
+	}
 }
 
 /**
@@ -100,7 +132,7 @@ function currentParagraphDecorations(doc, currentParagraph, editor) {
 function decorationForCurrentParagraph(currentParagraph, editor) {
 	return Decoration.widget(
 		currentParagraph.pos + 1,
-		menuForCurrentParagraph(currentParagraph, editor),
+		menuForCurrentParagraph(editor),
 		{ side: -1 },
 	)
 }
@@ -108,21 +140,15 @@ function decorationForCurrentParagraph(currentParagraph, editor) {
 /**
  * Create a menu element for the given currentParagraph
  *
- * @param {object} currentParagraph - currentParagraph to generate menu for
  * @param {object} editor - tiptap editor
  *
  * @return {Element}
  */
-function menuForCurrentParagraph(currentParagraph, editor) {
-	const propsData = {
-		$editor: editor,
-		...currentParagraph,
-	}
+function menuForCurrentParagraph(editor) {
 	const el = document.createElement('div')
 	const Component = Vue.extend(SmartPickerMenu)
-	const menu = new Component({
-		propsData,
-	}).$mount(el)
+	const menu = new Component()
+	menu.$mount(el)
 	menu.$on('open-smart-picker', () => {
 		const { selection } = editor.state
 		const { textContent } = selection.$anchor.parent

From 9fb6e6e5bd8ed4a6fb68d8433a09c9cd0dc3e0ea Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Wed, 15 Jan 2025 22:48:39 +0100
Subject: [PATCH 08/10] fix(ui): add spacing between smart picker and preview
 button

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor/SmartPickerMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Editor/SmartPickerMenu.vue b/src/components/Editor/SmartPickerMenu.vue
index b51c107cb88..cbc10986587 100644
--- a/src/components/Editor/SmartPickerMenu.vue
+++ b/src/components/Editor/SmartPickerMenu.vue
@@ -39,7 +39,7 @@ div[contenteditable=false] {
 .smart-picker-menu-container {
 	position: absolute;
 	width: 0 !important;
-	left: -80px;
+	left: -84px;
 	top: 50%;
 	transform: translate(0, -50%);
 }

From 1d959536fd830cdbe12c94a8c8b355b4d957ff37 Mon Sep 17 00:00:00 2001
From: Julius Knorr <jus@bitgrid.net>
Date: Thu, 16 Jan 2025 10:08:05 +0100
Subject: [PATCH 09/10] chore: Move to NcButton and add aria-label

Signed-off-by: Julius Knorr <jus@bitgrid.net>
---
 src/components/Editor/SmartPickerMenu.vue       | 17 +++++++----------
 src/plugins/currentLineMenu.js                  |  2 +-
 src/tests/plugins/extractLinkParagraphs.spec.js | 14 +++++++-------
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/Editor/SmartPickerMenu.vue b/src/components/Editor/SmartPickerMenu.vue
index cbc10986587..7266530d166 100644
--- a/src/components/Editor/SmartPickerMenu.vue
+++ b/src/components/Editor/SmartPickerMenu.vue
@@ -5,26 +5,23 @@
 
 <template>
 	<div contenteditable="false" class="smart-picker-menu-container">
-		<NcActions :title="t('text', 'Open the Smart Picker')" :type="'tertiary'">
-			<NcActionButton @click="$emit('open-smart-picker')">
-				<template #icon>
-					<PlusIcon />
-				</template>
-			</NcActionButton>
-		</NcActions>
+		<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 { NcActions, NcActionButton } from '@nextcloud/vue'
+import { NcButton } from '@nextcloud/vue'
 
 export default {
 	name: 'SmartPickerMenu',
 	components: {
 		PlusIcon,
-		NcActions,
-		NcActionButton,
+		NcButton,
 	},
 }
 
diff --git a/src/plugins/currentLineMenu.js b/src/plugins/currentLineMenu.js
index 484567a22a3..ab0fa8ddc40 100644
--- a/src/plugins/currentLineMenu.js
+++ b/src/plugins/currentLineMenu.js
@@ -131,7 +131,7 @@ function currentParagraphDecorations(doc, currentParagraph, editor) {
  */
 function decorationForCurrentParagraph(currentParagraph, editor) {
 	return Decoration.widget(
-		currentParagraph.pos + 1,
+		currentParagraph?.pos + 1,
 		menuForCurrentParagraph(editor),
 		{ side: -1 },
 	)
diff --git a/src/tests/plugins/extractLinkParagraphs.spec.js b/src/tests/plugins/extractLinkParagraphs.spec.js
index a29183ca831..a4fcd2419b0 100644
--- a/src/tests/plugins/extractLinkParagraphs.spec.js
+++ b/src/tests/plugins/extractLinkParagraphs.spec.js
@@ -23,7 +23,7 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0, type: 'text-only', nodeSize: 6 },
+			{ pos: 0, type: 'text-only', nodeSize: 6 },
 		])
 	})
 
@@ -31,7 +31,7 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(preview)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0, type: 'link-preview', nodeSize: 6 },
+			{ pos: 0, type: 'link-preview', nodeSize: 6 },
 		])
 	})
 
@@ -40,7 +40,7 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0, type: 'text-only', nodeSize: 7 },
+			{ pos: 0, type: 'text-only', nodeSize: 7 },
 		])
 	})
 
@@ -50,8 +50,8 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0, type: 'text-only', nodeSize: 6 },
-			{ offset: 6, type: 'text-only', nodeSize: 6 },
+			{ pos: 0, type: 'text-only', nodeSize: 6 },
+			{ pos: 6, type: 'text-only', nodeSize: 6 },
 		])
 	})
 
@@ -60,8 +60,8 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0, type: 'text-only', nodeSize: 6 },
-			{ offset: 6, type: 'link-preview', nodeSize: 6 },
+			{ pos: 0, type: 'text-only', nodeSize: 6 },
+			{ pos: 6, type: 'link-preview', nodeSize: 6 },
 		])
 	})
 

From 641dda4f060b83a55e98dd575913c90109af5a06 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Thu, 16 Jan 2025 15:32:20 +0100
Subject: [PATCH 10/10] fix(currentLineMenu): undefined currentParagraph
 handling

Also improve some type annotations.

Signed-off-by: Max <max@nextcloud.com>
---
 src/plugins/currentLineMenu.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/plugins/currentLineMenu.js b/src/plugins/currentLineMenu.js
index ab0fa8ddc40..65cf1d61857 100644
--- a/src/plugins/currentLineMenu.js
+++ b/src/plugins/currentLineMenu.js
@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { Plugin, PluginKey, EditorState } from '@tiptap/pm/state'
+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'
 
@@ -15,7 +16,7 @@ export const currentLineMenuKey = new PluginKey('currentLineMenu')
  * ProseMirror plugin providing a single decoration for the current line.
  *
  * @param {object} options - options for the plugin
- * @param {object} options.editor - the tiptap editor
+ * @param {Editor} options.editor - the tiptap editor
  *
  * @return {Plugin<DecorationSet>}
  */
@@ -63,8 +64,8 @@ export default function currentLineMenu({ editor }) {
  * lost decorations in case of replacements.
  *
  * @param {object} value - previous plugin state
- * @param {object} tr - current transaction
- * @param {object} currentParagraph - attributes of the current paragraph
+ * @param {Transaction} tr - current transaction
+ * @param {object|undefined} currentParagraph - attributes of the current paragraph
  *
  * @return {false|DecorationSet}
  */
@@ -87,7 +88,7 @@ function mapDecorations(value, tr, currentParagraph) {
  * Get the paragraph node the cursor is on.
  *
  * @param {EditorState} state - the prosemirror state
- * @return {Node|undefined} - the current paragraph if the cursor is in one
+ * @return {object|undefined} - the current paragraph if the cursor is in one
  */
 function getCurrentParagraph({ selection }) {
 	const { parent, depth } = selection.$anchor
@@ -111,12 +112,15 @@ function getCurrentParagraph({ selection }) {
  * Create a menu decorations for the given paragraph
  *
  * @param {Document} doc - prosemirror doc
- * @param {Node} currentParagraph - paragraph to decorate
- * @param {object} editor - tiptap editor
+ * @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)
 }
@@ -125,13 +129,13 @@ function currentParagraphDecorations(doc, currentParagraph, editor) {
  * Create a decoration for the currentParagraph
  *
  * @param {object} currentParagraph to decorate
- * @param {object} editor - tiptap editor
+ * @param {Editor} editor - tiptap editor
  *
  * @return {Decoration}
  */
 function decorationForCurrentParagraph(currentParagraph, editor) {
 	return Decoration.widget(
-		currentParagraph?.pos + 1,
+		currentParagraph.pos + 1,
 		menuForCurrentParagraph(editor),
 		{ side: -1 },
 	)
@@ -140,7 +144,7 @@ function decorationForCurrentParagraph(currentParagraph, editor) {
 /**
  * Create a menu element for the given currentParagraph
  *
- * @param {object} editor - tiptap editor
+ * @param {Editor} editor - tiptap editor
  *
  * @return {Element}
  */