From 697ce57bccfe545492a1e02910d0166af0aae789 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Tue, 13 Jan 2026 13:02:25 +0100
Subject: [PATCH 1/3] fix(viewer): mount ViewerComponent Vue from text module

The component configured in the viewer handler
is instantiated from the vue module inside the viewer.

We want to use our own vue module
so create an instance with an import of our own vue and mount it.

This fixes warnings in development like $attrs is readonly.
Also makes the vue2 dev tools work.

Signed-off-by: Max <max@nextcloud.com>
---
 src/apis/connect.ts                |  2 +-
 src/components/ViewerComponent.vue |  6 ++---
 src/viewer.js                      |  4 +--
 src/views/ViewerView.js            | 40 ++++++++++++++++++++++++++++++
 4 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 src/views/ViewerView.js

diff --git a/src/apis/connect.ts b/src/apis/connect.ts
index a9c5c800d83..3d9dc197818 100644
--- a/src/apis/connect.ts
+++ b/src/apis/connect.ts
@@ -53,7 +53,7 @@ export async function open(
 /**
  * Update the guest name
  * @param guestName the name to use for the local user
- * @param connection connection to close
+ * @param connection connection to update the guest name for
  */
 export async function update(
 	guestName: string,
diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
index d7a9837d185..282c0650498 100644
--- a/src/components/ViewerComponent.vue
+++ b/src/components/ViewerComponent.vue
@@ -40,14 +40,14 @@ import { getClient, getRootPath } from '@nextcloud/files/dav'
 import { t } from '@nextcloud/l10n'
 import { getSharingToken } from '@nextcloud/sharing/public'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import Vue from 'vue'
+import Vue, { defineComponent } from 'vue'
 import PencilOutlineIcon from 'vue-material-design-icons/PencilOutline.vue'
 import MarkdownContentEditor from './Editor/MarkdownContentEditor.vue'
 import PlainTextReader from './PlainTextReader.vue'
 
 import getEditorInstance from './Editor.singleton.js'
 
-export default {
+export default defineComponent({
 	name: 'ViewerComponent',
 	components: {
 		NcButton: Vue.extend(NcButton),
@@ -184,7 +184,7 @@ export default {
 		},
 		t,
 	},
-}
+})
 </script>
 <style lang="scss" scoped>
 .text-editor:not(.viewer__file--hidden) {
diff --git a/src/viewer.js b/src/viewer.js
index 74e173d0f23..545f73dfe8c 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -12,10 +12,10 @@ import { openMimetypesMarkdown, openMimetypesPlainText } from './helpers/mime.js
  * Wrapper for async registration of ViewerComponent.
  * Note: it should be named function - the name is used for component registration.
  *
- * @return {Promise<import('./components/ViewerComponent.vue')>} ViewerComponent
+ * @return {Promise<import('./views/ViewerView.js')>} ViewerComponent
  */
 function AsyncTextViewerComponent() {
-	return import('./components/ViewerComponent.vue')
+	return import('./views/ViewerView.js')
 }
 
 if (typeof OCA.Viewer === 'undefined') {
diff --git a/src/views/ViewerView.js b/src/views/ViewerView.js
new file mode 100644
index 00000000000..15148a5abc3
--- /dev/null
+++ b/src/views/ViewerView.js
@@ -0,0 +1,40 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import Vue, { defineComponent } from 'vue'
+import ViewerComponent from '../components/ViewerComponent.vue'
+
+// The vue instance used inside text constructed with the import above.
+let innerVue
+
+/**
+ * This thin Component wrapper can be rendered inside the viewer.
+ *
+ * The viewers vue instance is used for this component as it simply exports
+ * the options for the options api.
+ *
+ * When mounted this component constructs the vue instance
+ * used inside text based on texts vue import.
+ */
+export default defineComponent({
+	name: 'ViewerView',
+	render: (h) => h('div'),
+	props: ViewerComponent.props,
+	mounted() {
+		innerVue = new Vue({
+			render: (h) => {
+				return h(ViewerComponent, {
+					attrs: this.$attrs,
+					props: this.$props,
+					on: this.$listeners,
+				})
+			},
+		})
+		innerVue.$mount(this.$el)
+	},
+	beforeDestroy() {
+		innerVue.$destroy()
+	},
+})

From 08575468a0888c630789519efdb6cca2fa6b71d1 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Wed, 14 Jan 2026 07:55:59 +0100
Subject: [PATCH 2/3] chore(cleanup): editor singleton

It is not needed anymore now that the editor is always imported from text.

Previously the ViewerComponent was used directly from the viewer
which resulted in the editor and thus yjs being imported in two different ways.

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/Editor.singleton.js | 32 ------------------------------
 src/components/ViewerComponent.vue | 15 +++++++-------
 src/views/RichWorkspace.vue        |  4 ++--
 3 files changed, 9 insertions(+), 42 deletions(-)
 delete mode 100644 src/components/Editor.singleton.js

diff --git a/src/components/Editor.singleton.js b/src/components/Editor.singleton.js
deleted file mode 100644
index 458898fde31..00000000000
--- a/src/components/Editor.singleton.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-/**
- * Get instance of Editor component
- * Using singleton approach here to avoid duplicate yjs import error
- * @return {Promise<*>}
- */
-export default async function getEditorInstance() {
-	if (!window._nc_text_editor_instance) {
-		if (window._nc_text_editor_importing) {
-			return await new Promise((resolve) => {
-				const intervalId = setInterval(() => {
-					if (!window._nc_text_editor_instance) {
-						return
-					}
-					resolve(window._nc_text_editor_instance)
-					clearInterval(intervalId)
-				}, 200)
-			})
-		} else {
-			window._nc_text_editor_importing = true
-		}
-		const Editor = await import(/* webpackChunkName: "editor" */ './Editor.vue')
-		const { default: Vue } = await import('vue')
-		const EditorConstructor = Vue.extend(Editor.default)
-		window._nc_text_editor_instance = EditorConstructor
-	}
-	return window._nc_text_editor_instance
-}
diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
index 282c0650498..3db043a14de 100644
--- a/src/components/ViewerComponent.vue
+++ b/src/components/ViewerComponent.vue
@@ -40,21 +40,20 @@ import { getClient, getRootPath } from '@nextcloud/files/dav'
 import { t } from '@nextcloud/l10n'
 import { getSharingToken } from '@nextcloud/sharing/public'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import Vue, { defineComponent } from 'vue'
+import { defineComponent } from 'vue'
 import PencilOutlineIcon from 'vue-material-design-icons/PencilOutline.vue'
+import Editor from './Editor.vue'
 import MarkdownContentEditor from './Editor/MarkdownContentEditor.vue'
 import PlainTextReader from './PlainTextReader.vue'
 
-import getEditorInstance from './Editor.singleton.js'
-
 export default defineComponent({
 	name: 'ViewerComponent',
 	components: {
-		NcButton: Vue.extend(NcButton),
-		PencilOutlineIcon: Vue.extend(PencilOutlineIcon),
-		PlainTextReader: Vue.extend(PlainTextReader),
-		MarkdownContentEditor: Vue.extend(MarkdownContentEditor),
-		Editor: getEditorInstance,
+		NcButton,
+		PencilOutlineIcon,
+		PlainTextReader,
+		MarkdownContentEditor,
+		Editor,
 	},
 	provide() {
 		return {
diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue
index 8053187caac..c185c0325e9 100644
--- a/src/views/RichWorkspace.vue
+++ b/src/views/RichWorkspace.vue
@@ -37,7 +37,7 @@ import { t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 import { getSharingToken, isPublicShare } from '@nextcloud/sharing/public'
 
-import getEditorInstance from '../components/Editor.singleton.js'
+import Editor from '../components/Editor.vue'
 import RichTextReader from '../components/RichTextReader.vue'
 
 const IS_PUBLIC = isPublicShare()
@@ -58,7 +58,7 @@ export default {
 	name: 'RichWorkspace',
 	components: {
 		RichTextReader,
-		Editor: getEditorInstance,
+		Editor,
 	},
 	props: {
 		content: {

From 49c891c1705a891557c11ce6cf5d4656bb802067 Mon Sep 17 00:00:00 2001
From: Max <max@nextcloud.com>
Date: Wed, 21 Jan 2026 17:35:01 +0100
Subject: [PATCH 3/3] chore(cleanup): no permissions prop and no inherited
 attrs

Viewer hands a lot of props to the component.
We need to pick the ones we actually need and set
`inheritAttrs` to false
so the others are not added to the dom.

Signed-off-by: Max <max@nextcloud.com>
---
 src/components/ViewerComponent.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
index 3db043a14de..bb1056bdf27 100644
--- a/src/components/ViewerComponent.vue
+++ b/src/components/ViewerComponent.vue
@@ -60,6 +60,7 @@ export default defineComponent({
 			isEmbedded: this.isEmbedded,
 		}
 	},
+	inheritAttrs: false,
 	props: {
 		filename: {
 			type: String,
@@ -85,14 +86,6 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
-		showOutlineOutside: {
-			type: Boolean,
-			default: false,
-		},
-		permissions: {
-			type: String,
-			default: '',
-		},
 		source: {
 			type: String,
 			default: undefined,