fix: yjs duplicated import issue

Signed-off-by: Luka Trovic <[email protected]>

src/components/Editor.singleton.js

@@ -0,0 +1,25 @@
+/**
+ * Get instance of Editor component
+ * Using singleton approach here to avoid duplicate yjs import error
+ * @return {Promise<*>}
+ */
+export default async function getEditorInstance() {
+	if (!window.EditorInstance) {
+		if (window.EditorInstanceImporting) {
+			return await new Promise((resolve) => {
+				const intervalId = setInterval(() => {
+					if (!window.EditorInstance) {
+						return
+					}
+					resolve(window.EditorInstance)
+					clearInterval(intervalId)
+				}, 200)
+			})
+		} else {
+			window.EditorInstanceImporting = true
+		}
+		const Editor = await import(/* webpackChunkName: "editor" */'./Editor.vue')
+		window.EditorInstance = Editor.default
+	}
+	return window.EditorInstance
+}

src/components/ViewerComponent.vue

@@ -43,13 +43,14 @@ import PlainTextReader from './PlainTextReader.vue'
 import RichTextReader from './RichTextReader.vue'
 
 import { getSharingToken } from '../helpers/token.js'
+import getEditorInstance from './Editor.singleton.js'
 
 export default {
 	name: 'ViewerComponent',
 	components: {
 		RichTextReader,
 		PlainTextReader,
-		Editor: () => import(/* webpackChunkName: "editor" */'./Editor.vue'),
+		Editor: getEditorInstance,
 	},
 	props: {
 		filename: {

src/views/RichWorkspace.vue

@@ -46,6 +46,7 @@ import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import SkeletonLoading from '../components/SkeletonLoading.vue'
+import getEditorInstance from '../components/Editor.singleton.js'
 
 const IS_PUBLIC = !!(document.getElementById('isPublic'))
 const WORKSPACE_URL = generateOcsUrl('apps/text' + (IS_PUBLIC ? '/public' : '') + '/workspace', 2)
@@ -54,7 +55,7 @@ export default {
 	name: 'RichWorkspace',
 	components: {
 		SkeletonLoading,
-		Editor: () => import(/* webpackChunkName: "editor" */'./../components/Editor.vue'),
+		Editor: getEditorInstance,
 	},
 	props: {
 		path: {