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>

[skip ci]

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,
 			})

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,

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')