From 613c5d2ac42b4b193e1c19caf086837e8619bf47 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Tue, 20 Feb 2024 23:56:05 +0100
Subject: [PATCH] fix(viewer): share Vue constructor from Viewer

Otherwise, there is a mix of Viewer's Vue constructor and Text's one in a single Virtual DOM,
which is not fully supported by Vue.

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 src/ViewerVue.js                       | 16 ++++++++++++++++
 src/components/ViewerComponent.vue     | 10 ++++++++++
 src/extensions/LinkBubblePluginView.js |  8 +++++++-
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/ViewerVue.js

diff --git a/src/ViewerVue.js b/src/ViewerVue.js
new file mode 100644
index 00000000000..ff496826ce3
--- /dev/null
+++ b/src/ViewerVue.js
@@ -0,0 +1,16 @@
+/**
+ * @type {import('Vue').VueConstructor|null}
+ */
+let ViewerVue = null
+
+/**
+ * @param {import('Vue').VueConstructor} VueConstructor - Vue constructor from Viewer
+ */
+export const setViewerVue = (VueConstructor) => {
+	ViewerVue = VueConstructor
+}
+
+/**
+ * @return {import('Vue').VueConstructor|null}
+ */
+export const getViewerVue = () => ViewerVue
diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
index 7886b3e26bb..13f3a0f3246 100644
--- a/src/components/ViewerComponent.vue
+++ b/src/components/ViewerComponent.vue
@@ -45,6 +45,8 @@ import RichTextReader from './RichTextReader.vue'
 import { getSharingToken } from '../helpers/token.js'
 import getEditorInstance from './Editor.singleton.js'
 
+import { setViewerVue } from '../ViewerVue.js'
+
 export default {
 	name: 'ViewerComponent',
 	components: {
@@ -113,6 +115,14 @@ export default {
 		},
 	},
 
+	beforeCreate() {
+		// This component is rendered in the Viewer app
+		// Get Vue constructor from the Viewer app
+		// To reuse later as Vue constructor and not mix Text's Vue constructor and Viewer's Vue constructor in a single Virtual DOM
+		// Which is not fully supported by Vue
+		setViewerVue(this.$options._base)
+	},
+
 	mounted() {
 		this.loadFileContent()
 	},
diff --git a/src/extensions/LinkBubblePluginView.js b/src/extensions/LinkBubblePluginView.js
index 8cb90a77b30..405ef440f25 100644
--- a/src/extensions/LinkBubblePluginView.js
+++ b/src/extensions/LinkBubblePluginView.js
@@ -3,6 +3,8 @@ import tippy from 'tippy.js'
 import { domHref } from '../helpers/links.js'
 import LinkBubbleView from '../components/Link/LinkBubbleView.vue'
 
+import { getViewerVue } from '../ViewerVue.js'
+
 const updateDelay = 250
 
 class LinkBubblePluginView {
@@ -16,7 +18,11 @@ class LinkBubblePluginView {
 		this.editor = editor
 		this.view = view
 
-		this.#component = new VueRenderer(LinkBubbleView, {
+		// When editor is used in Viewer component, it should render comopnent using Viewer's Vue constructor,
+		// Otherwise there are VNodes with different Vue constructors in a single Virtual DOM which is not fully supported by Vue
+		const ViewerVue = getViewerVue()
+		const LinkBubbleViewConstructor = ViewerVue ? ViewerVue.extend(LinkBubbleView) : LinkBubbleView
+		this.#component = new VueRenderer(LinkBubbleViewConstructor, {
 			parent: this.editor.contentComponent,
 			propsData: {
 				editor: this.editor,