From 5d61e8419654456b1295c72dd7e5ff63b259495e Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 18 Sep 2024 17:50:07 +0200
Subject: [PATCH] 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 a074d03a7c5..33bc96dbf87 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')