From 5c116c95ab9dccba0fdeb4732e19f2542f02eef8 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Tue, 8 Aug 2023 09:24:11 +0200
Subject: [PATCH] fix: yjs duplicated import issue

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 src/components/Editor.singleton.js | 25 +++++++++++++++++++++++++
 src/components/ViewerComponent.vue |  3 ++-
 src/views/RichWorkspace.vue        |  3 ++-
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Editor.singleton.js

diff --git a/src/components/Editor.singleton.js b/src/components/Editor.singleton.js
new file mode 100644
index 00000000000..31d4d62bdef
--- /dev/null
+++ b/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._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')
+		window._nc_text_editor_instance = Editor.default
+	}
+	return window._nc_text_editor_instance
+}
diff --git a/src/components/ViewerComponent.vue b/src/components/ViewerComponent.vue
index 98b2b5dd212..8b94bb1e9c0 100644
--- a/src/components/ViewerComponent.vue
+++ b/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: {
diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue
index ace4f1e28b2..1aa82528ef0 100644
--- a/src/views/RichWorkspace.vue
+++ b/src/views/RichWorkspace.vue
@@ -49,6 +49,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)
@@ -57,7 +58,7 @@ export default {
 	name: 'RichWorkspace',
 	components: {
 		SkeletonLoading,
-		Editor: () => import(/* webpackChunkName: "editor" */'./../components/Editor.vue'),
+		Editor: getEditorInstance,
 	},
 	props: {
 		path: {