Merge pull request #8233 from nextcloud/backport/8153/stable33

[stable33] fix(viewer): mount text vue instance explicitely

Author: mejo-

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,

src/components/Editor.singleton.js

@@ -26,15 +26,17 @@
 
 <script>
 import { getSharingToken } from '@nextcloud/sharing/public'
-import getEditorInstance from './Editor.singleton.js'
+import { defineComponent } from 'vue'
+import Editor from './Editor.vue'
 import SourceView from './SourceView.vue'
 
-export default {
+export default defineComponent({
 	name: 'ViewerComponent',
 	components: {
 		SourceView,
-		Editor: getEditorInstance,
+		Editor,
 	},
+	inheritAttrs: false,
 	provide() {
 		return {
 			isEmbedded: this.isEmbedded,
@@ -65,10 +67,6 @@ export default {
 			type: String,
 			default: null,
 		},
-		permissions: {
-			type: String,
-			default: '',
-		},
 		source: {
 			type: String,
 			default: undefined,
@@ -112,7 +110,7 @@ export default {
 		},
 		t,
 	},
-}
+})
 </script>
 <style lang="scss" scoped>
 .text-editor:not(.viewer__file--hidden) {

src/components/ViewerComponent.vue

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

src/viewer.js

@@ -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: {

src/views/RichWorkspace.vue

@@ -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()
+	},
+})