From 90a6b13ef03fc11c6ab6d0a62a86dc5699d9b478 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Tue, 17 Sep 2024 14:19:23 +0200
Subject: [PATCH 01/13] enh: add extractLinkParagraphs

Signed-off-by: Max <max@nextcloud.com>
---
 src/plugins/extractLinkParagraphs.js          | 70 ++++++++++++++++
 .../plugins/extractLinkParagraphs.spec.js     | 84 +++++++++++++++++++
 2 files changed, 154 insertions(+)
 create mode 100644 src/plugins/extractLinkParagraphs.js
 create mode 100644 src/tests/plugins/extractLinkParagraphs.spec.js

diff --git a/src/plugins/extractLinkParagraphs.js b/src/plugins/extractLinkParagraphs.js
new file mode 100644
index 00000000000..34f8f22041e
--- /dev/null
+++ b/src/plugins/extractLinkParagraphs.js
@@ -0,0 +1,70 @@
+/**
+ * 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 counter = new Map()
+	const paragraphs = []
+
+	doc.descendants((node, offset) => {
+		if (node.type.name !== 'paragraph') {
+			return
+		}
+		// ignore paragraphs that cannot be converted
+		if (!previewPossible(node)) return
+		paragraphs.push(Object.freeze({
+			offset,
+		}))
+	})
+
+	return paragraphs
+}
+
+/**
+ * Is it possible to convert the currently selected node into a preview?
+ * @param {object} state current editor state
+ * @param {object} state.selection current selection
+ * @return {boolean}
+ */
+function previewPossible(node) {
+	if (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/tests/plugins/extractLinkParagraphs.spec.js b/src/tests/plugins/extractLinkParagraphs.spec.js
new file mode 100644
index 00000000000..23a94c3a68b
--- /dev/null
+++ b/src/tests/plugins/extractLinkParagraphs.spec.js
@@ -0,0 +1,84 @@
+/**
+ * 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 { createCustomEditor } from '../helpers.js'
+
+describe('extractLinkParagraphs', () => {
+
+	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><a href="https://nextcloud.com">Link</a></p>'
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([
+			{ offset: 0 }
+		])
+	})
+
+	it('returns paragraphs with a single link and whitespace', () => {
+		const content = '<p><a href="https://nextcloud.com">Link</a> </p>'
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([
+			{ offset: 0 }
+		])
+	})
+
+	it('returns multiple paragraphs with a single link', () => {
+		const paragraph = '<p><a href="https://nextcloud.com">Link</a></p>'
+		const content = paragraph + paragraph
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([
+			{ offset: 0 },
+			{ offset: 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><a href="https://nextcloud.com">Link</a> Hello</p>'
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([])
+	})
+
+	it('ignores paragraphs with text before the link', () => {
+		const content = '<p>bla <a href="https://nextcloud.com">Link</a></p>'
+		const doc = prepareDoc(content)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([])
+	})
+
+	it('ignores paragraphs with multiple links', () => {
+		const link = '<a href="https://nextcloud.com">Link</a>'
+		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 ]
+	})
+	return editor.state.doc
+}

From 5bb8981617ce77fb9a99e5195e3431f026bcaa4c Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Tue, 17 Sep 2024 14:29:32 +0200
Subject: [PATCH 02/13] refactor(test): reuse link string

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

diff --git a/src/tests/plugins/extractLinkParagraphs.spec.js b/src/tests/plugins/extractLinkParagraphs.spec.js
index 23a94c3a68b..1c51d1eadeb 100644
--- a/src/tests/plugins/extractLinkParagraphs.spec.js
+++ b/src/tests/plugins/extractLinkParagraphs.spec.js
@@ -8,6 +8,7 @@ import Link from '../../marks/Link.js'
 import { createCustomEditor } from '../helpers.js'
 
 describe('extractLinkParagraphs', () => {
+	const link = '<a href="https://nextcloud.com">Link</a>'
 
 	it('returns an empty array for an empty doc', () => {
 		const doc = prepareDoc('')
@@ -16,7 +17,7 @@ describe('extractLinkParagraphs', () => {
 	})
 
 	it('returns paragraphs with a single link', () => {
-		const content = '<p><a href="https://nextcloud.com">Link</a></p>'
+		const content = `<p>${link}</p>`
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
@@ -25,7 +26,7 @@ describe('extractLinkParagraphs', () => {
 	})
 
 	it('returns paragraphs with a single link and whitespace', () => {
-		const content = '<p><a href="https://nextcloud.com">Link</a> </p>'
+		const content = `<p>${link} </p>`
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
@@ -34,7 +35,7 @@ describe('extractLinkParagraphs', () => {
 	})
 
 	it('returns multiple paragraphs with a single link', () => {
-		const paragraph = '<p><a href="https://nextcloud.com">Link</a></p>'
+		const paragraph = `<p>${link}</p>`
 		const content = paragraph + paragraph
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
@@ -52,21 +53,20 @@ describe('extractLinkParagraphs', () => {
 	})
 
 	it('ignores paragraphs with text after the link', () => {
-		const content = '<p><a href="https://nextcloud.com">Link</a> Hello</p>'
+		const content = `<p>${link} Hello</p>`
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([])
 	})
 
 	it('ignores paragraphs with text before the link', () => {
-		const content = '<p>bla <a href="https://nextcloud.com">Link</a></p>'
+		const content = `<p>Hello ${link}</p>`
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([])
 	})
 
 	it('ignores paragraphs with multiple links', () => {
-		const link = '<a href="https://nextcloud.com">Link</a>'
 		const content = `<p>${link} ${link}</p>`
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)

From 88716d9d51862ede81427f3696bfe25a5c1e876e Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Tue, 17 Sep 2024 15:06:52 +0200
Subject: [PATCH 03/13] enh(preview): include previews in list of link
 paragraphs

Render the preview options as a decoration for previews too.

Signed-off-by: Max <max@nextcloud.com>
---
 src/plugins/extractLinkParagraphs.js          | 25 +++++++------
 .../plugins/extractLinkParagraphs.spec.js     | 37 ++++++++++++++++---
 2 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/plugins/extractLinkParagraphs.js b/src/plugins/extractLinkParagraphs.js
index 34f8f22041e..fc2cdd3f9b3 100644
--- a/src/plugins/extractLinkParagraphs.js
+++ b/src/plugins/extractLinkParagraphs.js
@@ -12,31 +12,32 @@ import { isLinkToSelfWithHash } from './../helpers/links.js'
  * @return {Array} paragraphs with one link only found in the doc
  */
 export default function extractLinkParagraphs(doc) {
-	const counter = new Map()
 	const paragraphs = []
 
 	doc.descendants((node, offset) => {
-		if (node.type.name !== 'paragraph') {
-			return
+		if (previewPossible(node)) {
+			paragraphs.push(Object.freeze({
+				offset,
+				type: 'text-only',
+			}))
+		} else if (node.type.name === 'preview') {
+			paragraphs.push(Object.freeze({
+				offset,
+				type: 'link-preview',
+			}))
 		}
-		// ignore paragraphs that cannot be converted
-		if (!previewPossible(node)) return
-		paragraphs.push(Object.freeze({
-			offset,
-		}))
 	})
 
 	return paragraphs
 }
 
 /**
- * Is it possible to convert the currently selected node into a preview?
- * @param {object} state current editor state
- * @param {object} state.selection current selection
+ * Is it possible to convert the node into a preview?
+ * @param {object} node the node in question
  * @return {boolean}
  */
 function previewPossible(node) {
-	if (hasOtherContent(node)) {
+	if (node.type.name !== 'paragraph' || hasOtherContent(node)) {
 		return false
 	}
 	const href = extractHref(node.firstChild)
diff --git a/src/tests/plugins/extractLinkParagraphs.spec.js b/src/tests/plugins/extractLinkParagraphs.spec.js
index 1c51d1eadeb..60f49e7f570 100644
--- a/src/tests/plugins/extractLinkParagraphs.spec.js
+++ b/src/tests/plugins/extractLinkParagraphs.spec.js
@@ -5,10 +5,12 @@
 
 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('')
@@ -21,7 +23,15 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0 }
+			{ offset: 0 , type: 'text-only' }
+		])
+	})
+
+	it('returns paragraphs with a single preview', () => {
+		const doc = prepareDoc(preview)
+		const paragraphs = extractLinkParagraphs(doc)
+		expect(paragraphs).toEqual([
+			{ offset: 0 , type: 'link-preview' }
 		])
 	})
 
@@ -30,7 +40,7 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0 }
+			{ offset: 0 , type: 'text-only' }
 		])
 	})
 
@@ -40,8 +50,18 @@ describe('extractLinkParagraphs', () => {
 		const doc = prepareDoc(content)
 		const paragraphs = extractLinkParagraphs(doc)
 		expect(paragraphs).toEqual([
-			{ offset: 0 },
-			{ offset: 6 }
+			{ offset: 0 , type: 'text-only' },
+			{ offset: 6 , type: 'text-only' }
+		])
+	})
+
+	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' },
+			{ offset: 6 , type: 'link-preview' }
 		])
 	})
 
@@ -59,6 +79,13 @@ describe('extractLinkParagraphs', () => {
 		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)
@@ -78,7 +105,7 @@ describe('extractLinkParagraphs', () => {
 function prepareDoc(content) {
 	const editor = createCustomEditor({
 		content,
-		extensions: [ Link ]
+		extensions: [ Link, Preview ]
 	})
 	return editor.state.doc
 }

From 9eb06ccc6157701a0ee158fff8fa6294379e3993 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 17 Sep 2024 18:29:11 +0200
Subject: [PATCH 04/13] feat(previewOptions): Migrate preview options to
 prosemirror decorations

Fixes: #6185

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/Editor/PreviewOptions.vue |  64 ++++++++--
 src/nodes/Paragraph.js                   |   9 ++
 src/plugins/previewOptions.js            | 150 +++++++++++++++++++++++
 3 files changed, 212 insertions(+), 11 deletions(-)
 create mode 100644 src/plugins/previewOptions.js

diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index 04a859e4b55..1d0de226695 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,62 @@ export default {
 		NcActionSeparator,
 		DeleteIcon,
 	},
+
 	props: {
-		value: {
+		type: {
 			type: String,
 			required: true,
 		},
+		offset: {
+			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.chain().focus()
+				.setNodeSelection(this.offset + 1)
+				.deleteSelection()
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
+div[contenteditable=false] {
+	padding: 0;
+	margin: 0;
+}
 
-div[data-text-preview-options] {
+.preview-options-container {
 	position: absolute;
 	left: -44px;
+	top: 50%;
+	transform: translate(0, -50%);
 }
 
 </style>
diff --git a/src/nodes/Paragraph.js b/src/nodes/Paragraph.js
index b7c03e1384b..33d08f9a852 100644
--- a/src/nodes/Paragraph.js
+++ b/src/nodes/Paragraph.js
@@ -5,6 +5,7 @@
 
 import TiptapParagraph from '@tiptap/extension-paragraph'
 import { VueNodeViewRenderer } from '@tiptap/vue-2'
+import previewOptions from '../plugins/previewOptions.js'
 import ParagraphView from './ParagraphView.vue'
 
 const Paragraph = TiptapParagraph.extend({
@@ -40,6 +41,14 @@ const Paragraph = TiptapParagraph.extend({
 			},
 		}
 	},
+
+	addProseMirrorPlugins() {
+		return [
+			previewOptions({
+				editor: this.editor,
+			}),
+		]
+	},
 })
 
 export default Paragraph
diff --git a/src/plugins/previewOptions.js b/src/plugins/previewOptions.js
new file mode 100644
index 00000000000..8758907973c
--- /dev/null
+++ b/src/plugins/previewOptions.js
@@ -0,0 +1,150 @@
+/**
+ * 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
+ *
+ * @return {Plugin<DecorationSet>}
+ */
+export default function previewOptions({ editor }) {
+	return new Plugin({
+		key: previewOptionsPluginKey,
+
+		state: {
+			init(_, { doc }) {
+				const linkParagraphs = extractLinkParagraphs(doc)
+				return {
+					linkParagraphs,
+					decorations: linkParagraphDecorations(doc, linkParagraphs, editor),
+				}
+			},
+			apply(tr, value, _oldState, newState) {
+				if (!tr.docChanged) {
+					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
+}
+
+/**
+ * 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 = {
+		type: linkParagraph.type,
+		offset: linkParagraph.offset,
+		editor,
+	}
+	const el = document.createElement('div')
+	const Component = Vue.extend(PreviewOptions)
+	const previewOption = new Component({
+		propsData,
+	}).$mount(el)
+	return previewOption.$el
+}

From 9e0619bbf4d36fa1f78f587542f443d6a6a1e067 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 17 Sep 2024 18:42:33 +0200
Subject: [PATCH 05/13] chore(preview): Remove PreviewOptions from Paragraph
 and Preview

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/nodes/ParagraphView.vue | 74 +------------------------------------
 src/nodes/Preview.vue       | 38 ++++---------------
 2 files changed, 8 insertions(+), 104 deletions(-)

diff --git a/src/nodes/ParagraphView.vue b/src/nodes/ParagraphView.vue
index 9a97bddfee5..a8f3b077e25 100644
--- a/src/nodes/ParagraphView.vue
+++ b/src/nodes/ParagraphView.vue
@@ -5,83 +5,18 @@
 
 <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'
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/vue-2'
 
 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>
@@ -90,11 +25,4 @@ export default {
 .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 c09159eceff..03163f7932d 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;
@@ -83,7 +60,6 @@ export default {
  * + widget margin-top
  */
 :deep([data-text-preview-options]) {
-	top: calc(7px + var(--default-grid-baseline, 4px) * 3);
+	top: calc(-7px - var(--default-grid-baseline, 4px) * 3);
 }
-
 </style>

From 2f2660b6c20b19084e9f08ea1d67d1e3fd41cc4f Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Tue, 17 Sep 2024 21:25:13 +0200
Subject: [PATCH 06/13] enh(preview): add nodeSize in decoration data structure

Required for implementing `deleteNode` like tiptap does it:
https://github.com/ueberdosis/tiptap/blob/develop/packages/core/src/NodeView.ts#L305

Signed-off-by: Max <max@nextcloud.com>
---
 src/plugins/extractLinkParagraphs.js            |  2 ++
 src/tests/plugins/extractLinkParagraphs.spec.js | 14 +++++++-------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/plugins/extractLinkParagraphs.js b/src/plugins/extractLinkParagraphs.js
index fc2cdd3f9b3..738c8bf4647 100644
--- a/src/plugins/extractLinkParagraphs.js
+++ b/src/plugins/extractLinkParagraphs.js
@@ -18,11 +18,13 @@ export default function extractLinkParagraphs(doc) {
 		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',
 			}))
 		}
diff --git a/src/tests/plugins/extractLinkParagraphs.spec.js b/src/tests/plugins/extractLinkParagraphs.spec.js
index 60f49e7f570..ab5d7e0c6e3 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' }
+			{ offset: 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' }
+			{ offset: 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' }
+			{ offset: 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' },
-			{ offset: 6 , type: 'text-only' }
+			{ offset: 0 , type: 'text-only', nodeSize: 6 },
+			{ offset: 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' },
-			{ offset: 6 , type: 'link-preview' }
+			{ offset: 0 , type: 'text-only', nodeSize: 6 },
+			{ offset: 6 , type: 'link-preview', nodeSize: 6 }
 		])
 	})
 

From 6f824bf78cf8b072cae459c4a7e1df0dff2bcc08 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Tue, 17 Sep 2024 21:42:29 +0200
Subject: [PATCH 07/13] fix(preview): use deleteRange to remove the node

Compute the range based on offset and nodeSize.

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

diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index 1d0de226695..10ea6df1caf 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -64,6 +64,10 @@ export default {
 			type: Number,
 			required: true,
 		},
+		nodeSize: {
+			type: Number,
+			required: true,
+		},
 		editor: {
 			type: Object,
 			required: true,
@@ -91,9 +95,10 @@ export default {
 			chain.setPreview().run()
 		},
 		deleteNode() {
-			this.editor.chain().focus()
-				.setNodeSelection(this.offset + 1)
-				.deleteSelection()
+			this.editor.commands.deleteRange({
+				from: this.offset,
+				to: this.offset + this.nodeSize
+			})
 		},
 	},
 }
diff --git a/src/plugins/previewOptions.js b/src/plugins/previewOptions.js
index 8758907973c..fc4f008de73 100644
--- a/src/plugins/previewOptions.js
+++ b/src/plugins/previewOptions.js
@@ -137,9 +137,8 @@ function decorationForLinkParagraph(linkParagraph, editor) {
  */
 function previewOptionForLinkParagraph(linkParagraph, editor) {
 	const propsData = {
-		type: linkParagraph.type,
-		offset: linkParagraph.offset,
 		editor,
+		...linkParagraph,
 	}
 	const el = document.createElement('div')
 	const Component = Vue.extend(PreviewOptions)

From cf3de3517dea605adc19c026f8d1cb44980291e7 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 17 Sep 2024 22:30:29 +0200
Subject: [PATCH 08/13] fix(preview): Fix alignment of preview options

- center align options for text links
- top align options for preview links

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/nodes/Preview.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/nodes/Preview.vue b/src/nodes/Preview.vue
index 03163f7932d..9649f6f3e99 100644
--- a/src/nodes/Preview.vue
+++ b/src/nodes/Preview.vue
@@ -56,10 +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>

From 83c528f64dadf34a000124e7cfdaf5613bba39fc Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 17 Sep 2024 23:56:08 +0200
Subject: [PATCH 09/13] fix(paragraph): get rid of superfluous ParagraphView
 component

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/css/prosemirror.scss    |  4 ++--
 src/nodes/Callout.vue       |  2 +-
 src/nodes/Paragraph.js      |  5 -----
 src/nodes/ParagraphView.vue | 28 ----------------------------
 4 files changed, 3 insertions(+), 36 deletions(-)
 delete mode 100644 src/nodes/ParagraphView.vue

diff --git a/src/css/prosemirror.scss b/src/css/prosemirror.scss
index a4843715234..4fc7fc53f8d 100644
--- a/src/css/prosemirror.scss
+++ b/src/css/prosemirror.scss
@@ -130,7 +130,7 @@ div.ProseMirror {
 		padding: .5em 0;
 	}
 
-	p .paragraph-content {
+	p {
 		margin-bottom: 1em;
 		line-height: 150%;
 	}
@@ -280,7 +280,7 @@ div.ProseMirror {
 		position: relative;
 		padding-left: 3px;
 
-		p .paragraph-content {
+		p {
 			margin-bottom: 0.5em;
 		}
 	}
diff --git a/src/nodes/Callout.vue b/src/nodes/Callout.vue
index 14fd84e9840..b55579c6de6 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 33d08f9a852..374845d406b 100644
--- a/src/nodes/Paragraph.js
+++ b/src/nodes/Paragraph.js
@@ -6,14 +6,9 @@
 import TiptapParagraph from '@tiptap/extension-paragraph'
 import { VueNodeViewRenderer } from '@tiptap/vue-2'
 import previewOptions from '../plugins/previewOptions.js'
-import ParagraphView from './ParagraphView.vue'
 
 const Paragraph = TiptapParagraph.extend({
 
-	addNodeView() {
-		return VueNodeViewRenderer(ParagraphView)
-	},
-
 	parseHTML() {
 		return this.parent().map(rule => Object.assign(rule, { preserveWhitespace: 'full' }))
 	},
diff --git a/src/nodes/ParagraphView.vue b/src/nodes/ParagraphView.vue
deleted file mode 100644
index a8f3b077e25..00000000000
--- a/src/nodes/ParagraphView.vue
+++ /dev/null
@@ -1,28 +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">
-		<NodeViewContent class="paragraph-content" />
-	</NodeViewWrapper>
-</template>
-
-<script>
-import { NodeViewContent, NodeViewWrapper } from '@tiptap/vue-2'
-
-export default {
-	name: 'ParagraphView',
-	components: {
-		NodeViewWrapper,
-		NodeViewContent,
-	},
-}
-</script>
-<style lang="scss" scoped>
-
-.vue-component {
-	position: relative;
-}
-</style>

From 7fc2f538713969922eda171de3cc25401588686a Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 18 Sep 2024 11:25:52 +0200
Subject: [PATCH 10/13] fix(preview): Don't let preview options container
 overlay paragraph

Otherwise the overlay container would catch all the click events.

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/Editor/PreviewOptions.vue | 1 +
 src/css/prosemirror.scss                 | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index 10ea6df1caf..604a4fbcc51 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -112,6 +112,7 @@ div[contenteditable=false] {
 
 .preview-options-container {
 	position: absolute;
+	width: 0 !important;
 	left: -44px;
 	top: 50%;
 	transform: translate(0, -50%);
diff --git a/src/css/prosemirror.scss b/src/css/prosemirror.scss
index 4fc7fc53f8d..65778c30388 100644
--- a/src/css/prosemirror.scss
+++ b/src/css/prosemirror.scss
@@ -131,6 +131,7 @@ div.ProseMirror {
 	}
 
 	p {
+		position: relative;
 		margin-bottom: 1em;
 		line-height: 150%;
 	}
@@ -281,6 +282,7 @@ div.ProseMirror {
 		padding-left: 3px;
 
 		p {
+			position: relative;
 			margin-bottom: 0.5em;
 		}
 	}

From f8076a89be79c20f38fb0ca0b0e56fb302506af3 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 18 Sep 2024 13:04:00 +0200
Subject: [PATCH 11/13] fix(preview): Fix some linting issues

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/Editor/PreviewOptions.vue | 2 +-
 src/nodes/Paragraph.js                   | 1 -
 src/plugins/previewOptions.js            | 1 +
 3 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index 604a4fbcc51..58013854b92 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -97,7 +97,7 @@ export default {
 		deleteNode() {
 			this.editor.commands.deleteRange({
 				from: this.offset,
-				to: this.offset + this.nodeSize
+				to: this.offset + this.nodeSize,
 			})
 		},
 	},
diff --git a/src/nodes/Paragraph.js b/src/nodes/Paragraph.js
index 374845d406b..52a912d5c52 100644
--- a/src/nodes/Paragraph.js
+++ b/src/nodes/Paragraph.js
@@ -4,7 +4,6 @@
  */
 
 import TiptapParagraph from '@tiptap/extension-paragraph'
-import { VueNodeViewRenderer } from '@tiptap/vue-2'
 import previewOptions from '../plugins/previewOptions.js'
 
 const Paragraph = TiptapParagraph.extend({
diff --git a/src/plugins/previewOptions.js b/src/plugins/previewOptions.js
index fc4f008de73..99f1af5f07b 100644
--- a/src/plugins/previewOptions.js
+++ b/src/plugins/previewOptions.js
@@ -16,6 +16,7 @@ export const previewOptionsPluginKey = new PluginKey('linkParagraphMenu')
  * Add preview options to linkParagraphs.
  *
  * @param {object} options - options for the plugin
+ * @param {object} options.editor - the tiptap editor
  *
  * @return {Plugin<DecorationSet>}
  */

From 49714288ffc53154b9d6d724bd638407bdd5d342 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 18 Sep 2024 14:15:48 +0200
Subject: [PATCH 12/13] test(cy): Fix selectors for paragraphs in cypress tests

Signed-off-by: Jonas <jonas@freesources.org>
---
 cypress/e2e/nodes/PreviewOptions.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/nodes/PreviewOptions.spec.js b/cypress/e2e/nodes/PreviewOptions.spec.js
index a7a39f0c684..df0e22e86fd 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')
 	})
 })

From 500577a57a86d208aa73422e74df177631737a71 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 18 Sep 2024 17:50:07 +0200
Subject: [PATCH 13/13] fix(preview): Further improvements

* Don't calculate preview options decorations in readonly editor
* Check for changed nodeSize when checking for decoration changes
* Rename `editor` to `$editor` in vue compontent, it's not reactive

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/Editor/PreviewOptions.vue | 8 ++++----
 src/plugins/headingAnchor.js             | 1 -
 src/plugins/previewOptions.js            | 9 ++++++++-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index 58013854b92..d2b02556eb7 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -68,7 +68,7 @@ export default {
 			type: Number,
 			required: true,
 		},
-		editor: {
+		$editor: {
 			type: Object,
 			required: true,
 		},
@@ -82,11 +82,11 @@ export default {
 
 	methods: {
 		onOpen() {
-			this.editor.commands.hideLinkBubble()
+			this.$editor.commands.hideLinkBubble()
 		},
 		toggle(type) {
 			this.open = false
-			const chain = this.editor.chain().focus()
+			const chain = this.$editor.chain().focus()
 				.setTextSelection(this.offset + 1)
 			if (type === 'text-only') {
 				chain.unsetPreview().run()
@@ -95,7 +95,7 @@ export default {
 			chain.setPreview().run()
 		},
 		deleteNode() {
-			this.editor.commands.deleteRange({
+			this.$editor.commands.deleteRange({
 				from: this.offset,
 				to: this.offset + this.nodeSize,
 			})
diff --git a/src/plugins/headingAnchor.js b/src/plugins/headingAnchor.js
index 000b4c4ad20..e1925ad3a4d 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
index 99f1af5f07b..c967ab6fba0 100644
--- a/src/plugins/previewOptions.js
+++ b/src/plugins/previewOptions.js
@@ -26,6 +26,9 @@ export default function previewOptions({ editor }) {
 
 		state: {
 			init(_, { doc }) {
+				if (!editor.options.editable) {
+					return { decorations: DecorationSet.create() }
+				}
 				const linkParagraphs = extractLinkParagraphs(doc)
 				return {
 					linkParagraphs,
@@ -36,6 +39,9 @@ export default function previewOptions({ editor }) {
 				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 }
@@ -96,6 +102,7 @@ function linkParagraphsChanged(current, prev) {
  */
 const isDifferentFrom = (other) => (linkParagraph, i) => {
 	return linkParagraph.type !== other[i].type
+		|| linkParagraph.nodeSize !== other[i].nodeSize
 }
 
 /**
@@ -138,7 +145,7 @@ function decorationForLinkParagraph(linkParagraph, editor) {
  */
 function previewOptionForLinkParagraph(linkParagraph, editor) {
 	const propsData = {
-		editor,
+		$editor: editor,
 		...linkParagraph,
 	}
 	const el = document.createElement('div')