diff --git a/cypress/e2e/nodes/PreviewOptions.spec.js b/cypress/e2e/nodes/PreviewOptions.spec.js
index a7a39f0c68..df0e22e86f 100644
--- a/cypress/e2e/nodes/PreviewOptions.spec.js
+++ b/cypress/e2e/nodes/PreviewOptions.spec.js
@@ -42,8 +42,8 @@ describe('Preview Options', function() {
 	})
 
 	it('should Remove link', function() {
-		cy.get('.paragraph-content').should('have.text', 'nextcloud.com')
+		cy.get('p > a').should('have.text', 'nextcloud.com')
 		cy.get('.action-button__text').contains('Remove link').click()
-		cy.get('.paragraph-content').should('not.have.text', 'nextcloud.com')
+		cy.get('p > a').should('not.exist')
 	})
 })
diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index 04a859e4b5..d2b02556eb 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -3,32 +3,31 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div>
+	<div contenteditable="false" class="preview-options-container">
 		<NcActions data-text-preview-options="select"
 			class="preview-options"
-			@open="$emit('open')">
+			:open.sync="open"
+			@open="onOpen">
 			<template #icon>
 				<DotsVerticalIcon :size="20" />
 			</template>
 			<NcActionCaption :name="t('text', 'Preview options')" />
 			<NcActionRadio data-text-preview-option="text-only"
-				close-after-click
 				name="preview-option"
 				value="text-only"
-				:checked="value === 'text-only'"
-				@change="e => $emit('update:value', e.currentTarget.value)">
+				:checked="type === 'text-only'"
+				@change="e => toggle(e.currentTarget.value)">
 				{{ t('text', 'Text only') }}
 			</NcActionRadio>
 			<NcActionRadio data-text-preview-option="link-preview"
-				close-after-click
 				name="preview-option"
 				value="link-preview"
-				:checked="value === 'link-preview'"
-				@change="e => $emit('update:value', e.currentTarget.value)">
+				:checked="type === 'link-preview'"
+				@change="e => toggle(e.currentTarget.value)">
 				{{ t('text', 'Show link preview') }}
 			</NcActionRadio>
 			<NcActionSeparator />
-			<NcActionButton @click="e => $emit('update:value', 'delete-preview')">
+			<NcActionButton close-after-click="true" @click="deleteNode">
 				<template #icon>
 					<DeleteIcon :size="20" />
 				</template>
@@ -45,6 +44,7 @@ import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 
 export default {
 	name: 'PreviewOptions',
+
 	components: {
 		DotsVerticalIcon,
 		NcActions,
@@ -54,20 +54,68 @@ export default {
 		NcActionSeparator,
 		DeleteIcon,
 	},
+
 	props: {
-		value: {
+		type: {
 			type: String,
 			required: true,
 		},
+		offset: {
+			type: Number,
+			required: true,
+		},
+		nodeSize: {
+			type: Number,
+			required: true,
+		},
+		$editor: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			open: false,
+		}
+	},
+
+	methods: {
+		onOpen() {
+			this.$editor.commands.hideLinkBubble()
+		},
+		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()
+		},
+		deleteNode() {
+			this.$editor.commands.deleteRange({
+				from: this.offset,
+				to: this.offset + this.nodeSize,
+			})
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
+div[contenteditable=false] {
+	padding: 0;
+	margin: 0;
+}
 
-div[data-text-preview-options] {
+.preview-options-container {
 	position: absolute;
+	width: 0 !important;
 	left: -44px;
+	top: 50%;
+	transform: translate(0, -50%);
 }
 
 </style>
diff --git a/src/css/prosemirror.scss b/src/css/prosemirror.scss
index a484371523..65778c3038 100644
--- a/src/css/prosemirror.scss
+++ b/src/css/prosemirror.scss
@@ -130,7 +130,8 @@ div.ProseMirror {
 		padding: .5em 0;
 	}
 
-	p .paragraph-content {
+	p {
+		position: relative;
 		margin-bottom: 1em;
 		line-height: 150%;
 	}
@@ -280,7 +281,8 @@ div.ProseMirror {
 		position: relative;
 		padding-left: 3px;
 
-		p .paragraph-content {
+		p {
+			position: relative;
 			margin-bottom: 0.5em;
 		}
 	}
diff --git a/src/nodes/Callout.vue b/src/nodes/Callout.vue
index 14fd84e984..b55579c6de 100644
--- a/src/nodes/Callout.vue
+++ b/src/nodes/Callout.vue
@@ -69,7 +69,7 @@ export default {
 
 	.callout__content {
 		margin-left: 1em;
-		&:deep(p .paragraph-content) {
+		&:deep(p) {
 			&:last-child {
 				margin-bottom: 0;
 			}
diff --git a/src/nodes/Paragraph.js b/src/nodes/Paragraph.js
index b7c03e1384..52a912d5c5 100644
--- a/src/nodes/Paragraph.js
+++ b/src/nodes/Paragraph.js
@@ -4,15 +4,10 @@
  */
 
 import TiptapParagraph from '@tiptap/extension-paragraph'
-import { VueNodeViewRenderer } from '@tiptap/vue-2'
-import ParagraphView from './ParagraphView.vue'
+import previewOptions from '../plugins/previewOptions.js'
 
 const Paragraph = TiptapParagraph.extend({
 
-	addNodeView() {
-		return VueNodeViewRenderer(ParagraphView)
-	},
-
 	parseHTML() {
 		return this.parent().map(rule => Object.assign(rule, { preserveWhitespace: 'full' }))
 	},
@@ -40,6 +35,14 @@ const Paragraph = TiptapParagraph.extend({
 			},
 		}
 	},
+
+	addProseMirrorPlugins() {
+		return [
+			previewOptions({
+				editor: this.editor,
+			}),
+		]
+	},
 })
 
 export default Paragraph
diff --git a/src/nodes/ParagraphView.vue b/src/nodes/ParagraphView.vue
deleted file mode 100644
index 9a97bddfee..0000000000
--- a/src/nodes/ParagraphView.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<!--
-  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
-  - SPDX-License-Identifier: AGPL-3.0-or-later
--->
-
-<template>
-	<NodeViewWrapper class="vue-component" as="p">
-		<PreviewOptions v-if="editor.isEditable && isSelected && canConvertToPreview"
-			:value.sync="value"
-			@open="editor.commands.hideLinkBubble()"
-			@update:value="changeViewMode" />
-		<NodeViewContent class="paragraph-content" />
-	</NodeViewWrapper>
-</template>
-
-<script>
-import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-2'
-import PreviewOptions from '../components/Editor/PreviewOptions.vue'
-import { getCurrentUser } from '@nextcloud/auth'
-
-export default {
-	name: 'ParagraphView',
-	components: {
-		NodeViewWrapper,
-		NodeViewContent,
-		PreviewOptions,
-	},
-	props: nodeViewProps,
-	data() {
-		return {
-			canConvertToPreview: null,
-			isSelected: false,
-			isLoggedIn: getCurrentUser(),
-			value: 'text-only',
-		}
-	},
-	watch: {
-		node: {
-			handler() {
-				if (this.isSelected) {
-					this.canConvertToPreview = this.checkAvailability()
-				}
-			},
-		},
-		isSelected: {
-			handler(value) {
-				if (value) {
-					this.canConvertToPreview = this.checkAvailability()
-				}
-			},
-		},
-	},
-	mounted() {
-		this.editor.on('selectionUpdate', this.checkSelection)
-	},
-	beforeUnmount() {
-		this.editor.off('selectionUpdate', this.checkSelection)
-	},
-	methods: {
-		changeViewMode(value) {
-			if (value === 'delete-preview') {
-				this.deleteNode()
-			} else if (value === 'link-preview') {
-				this.convertToPreview()
-			}
-		},
-		convertToPreview() {
-			this.editor.chain()
-				.focus()
-				.setTextSelection(this.getPos() + 1)
-				.setPreview()
-				.run()
-		},
-		checkAvailability() {
-			return this.editor
-				.can()
-				.setPreview()
-		},
-		checkSelection() {
-			const { selection } = this.editor.state
-			const start = selection.$from.parent
-			const end = selection.$to.parent
-			this.isSelected = (this.node === start) && (this.node === end)
-		},
-	},
-}
-</script>
-<style lang="scss" scoped>
-
-.vue-component {
-	position: relative;
-}
-
-/* center around current line */
-:deep([data-text-preview-options]) {
-	top: 50%;
-	transform: translate(0, -50%);
-}
-
-</style>
diff --git a/src/nodes/Preview.vue b/src/nodes/Preview.vue
index c09159ecef..9649f6f3e9 100644
--- a/src/nodes/Preview.vue
+++ b/src/nodes/Preview.vue
@@ -7,10 +7,7 @@
 		class="preview"
 		as="div"
 		contenteditable="false">
-		<NodeViewContent style="display:none" />
-		<PreviewOptions v-if="editor.isEditable"
-			:value.sync="value"
-			@update:value="changeViewMode" />
+		<NodeViewContent />
 		<NcReferenceList :text="node.attrs.href"
 			:limit="1"
 			:interactive="!extension.options.isEmbedded"
@@ -21,8 +18,6 @@
 <script>
 import { nodeViewProps, NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
 import { NcReferenceList } from '@nextcloud/vue/dist/Components/NcRichText.js'
-import PreviewOptions from '../components/Editor/PreviewOptions.vue'
-import { useEditorMixin } from '../components/Editor.provider.js'
 
 export default {
 	name: 'Preview',
@@ -30,35 +25,17 @@ export default {
 		NodeViewWrapper,
 		NodeViewContent,
 		NcReferenceList,
-		PreviewOptions,
 	},
-	mixins: [useEditorMixin],
 	props: nodeViewProps,
-	data() {
-		return {
-			value: 'link-preview',
-		}
-	},
-	methods: {
-		changeViewMode(value) {
-			if (value === 'delete-preview') {
-				this.deleteNode()
-			} else if (value === 'text-only') {
-				this.convertToParagraph()
-			}
-		},
-		convertToParagraph() {
-			this.$editor.chain()
-				.focus()
-				.setTextSelection(this.getPos() + 1)
-				.unsetPreview()
-				.run()
-		},
-	},
 }
 </script>
 
 <style lang="scss" scoped>
+// Hide the link element inside previews. We cannot hide full node view content
+// as the preview options (prosemirror decorations) are inside it.
+[data-text-el="preview"] [data-node-view-content] :deep(a) {
+	display: none;
+}
 
 .preview {
 	position: relative;
@@ -79,11 +56,12 @@ export default {
 }
 
 /* Top align with preview image:
- * 7px .preview padding
- * + widget margin-top
+ * - unset center alignment
+ * - margin-top of widget-default
  */
-:deep([data-text-preview-options]) {
-	top: calc(7px + var(--default-grid-baseline, 4px) * 3);
+:deep(.preview-options-container) {
+	top: unset;
+	transform: unset;
+	margin-top: calc(var(--default-grid-baseline, 4px) * 3) !important;
 }
-
 </style>
diff --git a/src/plugins/extractLinkParagraphs.js b/src/plugins/extractLinkParagraphs.js
new file mode 100644
index 0000000000..738c8bf464
--- /dev/null
+++ b/src/plugins/extractLinkParagraphs.js
@@ -0,0 +1,73 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { isLinkToSelfWithHash } from './../helpers/links.js'
+
+/**
+ * Get a list of all paragraphs that can be converted into a preview.
+ *
+ * @param {Document} doc - the prosemirror doc
+ * @return {Array} paragraphs with one link only found in the doc
+ */
+export default function extractLinkParagraphs(doc) {
+	const paragraphs = []
+
+	doc.descendants((node, offset) => {
+		if (previewPossible(node)) {
+			paragraphs.push(Object.freeze({
+				offset,
+				nodeSize: node.nodeSize,
+				type: 'text-only',
+			}))
+		} else if (node.type.name === 'preview') {
+			paragraphs.push(Object.freeze({
+				offset,
+				nodeSize: node.nodeSize,
+				type: 'link-preview',
+			}))
+		}
+	})
+
+	return paragraphs
+}
+
+/**
+ * Is it possible to convert the node into a preview?
+ * @param {object} node the node in question
+ * @return {boolean}
+ */
+function previewPossible(node) {
+	if (node.type.name !== 'paragraph' || hasOtherContent(node)) {
+		return false
+	}
+	const href = extractHref(node.firstChild)
+	if (!href || isLinkToSelfWithHash(href)) {
+		return false
+	}
+	return true
+}
+
+/**
+ * Does the node contain more content than the first child
+ * @param {object} node node to inspect
+ * @return {boolean}
+ */
+function hasOtherContent(node) {
+	return node.childCount > 2
+		|| (node.childCount === 2 && node.lastChild.textContent.trim())
+}
+
+/**
+ * Get the link href of the given node
+ * @param {object} node to inspect
+ * @return {string} The href of the link mark of the node
+ */
+function extractHref(node) {
+	if (!node) {
+		return undefined
+	}
+	const link = node.marks.find(mark => mark.type.name === 'link')
+	return link?.attrs.href
+}
diff --git a/src/plugins/headingAnchor.js b/src/plugins/headingAnchor.js
index 000b4c4ad2..e1925ad3a4 100644
--- a/src/plugins/headingAnchor.js
+++ b/src/plugins/headingAnchor.js
@@ -22,7 +22,6 @@ export default function headingAnchor() {
 
 		state: {
 			init(_, { doc }) {
-				console.debug('headingAnchor init')
 				const headings = extractHeadings(doc)
 				return {
 					headings,
diff --git a/src/plugins/previewOptions.js b/src/plugins/previewOptions.js
new file mode 100644
index 0000000000..c967ab6fba
--- /dev/null
+++ b/src/plugins/previewOptions.js
@@ -0,0 +1,157 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Decoration, DecorationSet } from '@tiptap/pm/view'
+import extractLinkParagraphs from './extractLinkParagraphs.js'
+import Vue from 'vue'
+import PreviewOptions from '../components/Editor/PreviewOptions.vue'
+
+export const previewOptionsPluginKey = new PluginKey('linkParagraphMenu')
+
+/**
+ * Preview option decorations ProseMirror plugin
+ * Add preview options to linkParagraphs.
+ *
+ * @param {object} options - options for the plugin
+ * @param {object} options.editor - the tiptap editor
+ *
+ * @return {Plugin<DecorationSet>}
+ */
+export default function previewOptions({ editor }) {
+	return new Plugin({
+		key: previewOptionsPluginKey,
+
+		state: {
+			init(_, { doc }) {
+				if (!editor.options.editable) {
+					return { decorations: DecorationSet.create() }
+				}
+				const linkParagraphs = extractLinkParagraphs(doc)
+				return {
+					linkParagraphs,
+					decorations: linkParagraphDecorations(doc, linkParagraphs, editor),
+				}
+			},
+			apply(tr, value, _oldState, newState) {
+				if (!tr.docChanged) {
+					return value
+				}
+				if (!editor.options.editable) {
+					return value
+				}
+				const linkParagraphs = extractLinkParagraphs(newState.doc)
+				const decorations = mapDecorations(value, tr, linkParagraphs) || linkParagraphDecorations(newState.doc, linkParagraphs, editor)
+				return { linkParagraphs, 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 {object} tr - current transaction
+ * @param {Array} linkParagraphs - array of linkParagraphs
+ *
+ * @return {false|DecorationSet}
+ */
+function mapDecorations(value, tr, linkParagraphs) {
+	if (linkParagraphsChanged(linkParagraphs, value.linkParagraphs)) {
+		return false
+	}
+	let removedDecorations = false
+	const decorations = value.decorations.map(tr.mapping, tr.doc, { onRemove: () => { removedDecorations = true } })
+	return removedDecorations
+		? false
+		: decorations
+}
+
+/**
+ * Check if the linkParagraphs provided are equivalent.
+ *
+ * @param {Array} current - array of linkParagraphs
+ * @param {Array} prev - linkParagraphs to compare against
+ *
+ * @return {boolean}
+ */
+function linkParagraphsChanged(current, prev) {
+	return (current.length !== prev.length)
+		|| current.some(isDifferentFrom(prev))
+}
+
+/**
+ * Checks if linkParagraphs are different
+ *
+ * @param {Array} other - linkParagraphs to compare against
+ *
+ * Returns a function to be used to call to Array#some.
+ * The returned function takes a linkParagraph and an index (as provided by iterators)
+ */
+const isDifferentFrom = (other) => (linkParagraph, i) => {
+	return linkParagraph.type !== other[i].type
+		|| linkParagraph.nodeSize !== other[i].nodeSize
+}
+
+/**
+ * Create anchor decorations for the given linkParagraphs
+ *
+ * @param {Document} doc - prosemirror doc
+ * @param {Array} linkParagraphs - linkParagraphs structure in the doc
+ * @param {object} editor - tiptap editor
+ *
+ * @return {DecorationSet}
+ */
+function linkParagraphDecorations(doc, linkParagraphs, editor) {
+	const decorations = linkParagraphs.map((linkParagraph) => decorationForLinkParagraph(linkParagraph, editor))
+	return DecorationSet.create(doc, decorations)
+}
+
+/**
+ * Create a decoration for the given linkParagraph
+ *
+ * @param {object} linkParagraph to decorate
+ * @param {object} editor - tiptap editor
+ *
+ * @return {Decoration}
+ */
+function decorationForLinkParagraph(linkParagraph, editor) {
+	return Decoration.widget(
+		linkParagraph.offset + 1,
+		previewOptionForLinkParagraph(linkParagraph, editor),
+		{ side: -1 },
+	)
+}
+
+/**
+ * Create a previewOptions element for the given linkParagraph
+ *
+ * @param {object} linkParagraph - linkParagraph to generate anchor for
+ * @param {object} editor - tiptap editor
+ *
+ * @return {Element}
+ */
+function previewOptionForLinkParagraph(linkParagraph, editor) {
+	const propsData = {
+		$editor: editor,
+		...linkParagraph,
+	}
+	const el = document.createElement('div')
+	const Component = Vue.extend(PreviewOptions)
+	const previewOption = new Component({
+		propsData,
+	}).$mount(el)
+	return previewOption.$el
+}
diff --git a/src/tests/plugins/extractLinkParagraphs.spec.js b/src/tests/plugins/extractLinkParagraphs.spec.js
new file mode 100644
index 0000000000..ab5d7e0c6e
--- /dev/null
+++ b/src/tests/plugins/extractLinkParagraphs.spec.js
@@ -0,0 +1,111 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import extractLinkParagraphs from '../../plugins/extractLinkParagraphs.js'
+import Link from '../../marks/Link.js'
+import Preview from '../../nodes/Preview.js'
+import { createCustomEditor } from '../helpers.js'
+
+describe('extractLinkParagraphs', () => {
+	const link = '<a href="https://nextcloud.com">Link</a>'
+	const preview = '<a href="https://nextcloud.com" title="preview">Link</a>'
+
+	it('returns an empty array for an empty doc', () => {
+		const doc = prepareDoc('')
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([])
+	})
+
+	it('returns paragraphs with a single link', () => {
+		const content = `<p>${link}</p>`
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([
+			{ offset: 0 , type: 'text-only', nodeSize: 6 }
+		])
+	})
+
+	it('returns paragraphs with a single preview', () => {
+		const doc = prepareDoc(preview)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([
+			{ offset: 0 , type: 'link-preview', nodeSize: 6 }
+		])
+	})
+
+	it('returns paragraphs with a single link and whitespace', () => {
+		const content = `<p>${link} </p>`
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([
+			{ offset: 0 , type: 'text-only', nodeSize: 7 }
+		])
+	})
+
+	it('returns multiple paragraphs with a single link', () => {
+		const paragraph = `<p>${link}</p>`
+		const content = paragraph + paragraph
+		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 }
+		])
+	})
+
+	it('returns previews mixed with paragraphs with a single link', () => {
+		const content = `<p>${link}</p>${preview}`
+		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 }
+		])
+	})
+
+	it('ignores an empty paragraph', () => {
+		const content = '<p></p>'
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([])
+	})
+
+	it('ignores paragraphs with text after the link', () => {
+		const content = `<p>${link} Hello</p>`
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([])
+	})
+
+	it('ignores paragraphs with a link to self', () => {
+		const content = '<p><a href="#test">test</a></p>'
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([])
+	})
+
+	it('ignores paragraphs with text before the link', () => {
+		const content = `<p>Hello ${link}</p>`
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([])
+	})
+
+	it('ignores paragraphs with multiple links', () => {
+		const content = `<p>${link} ${link}</p>`
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([])
+	})
+
+})
+
+function prepareDoc(content) {
+	const editor = createCustomEditor({
+		content,
+		extensions: [ Link, Preview ]
+	})
+	return editor.state.doc
+}