diff --git a/src/components/collectionEditor/collectionEditor.js b/src/components/collectionEditor/collectionEditor.js
index 946ddfebbb..8af78fede2 100644
--- a/src/components/collectionEditor/collectionEditor.js
+++ b/src/components/collectionEditor/collectionEditor.js
@@ -206,8 +206,8 @@ import toast from '../toast/toast';
         });
     }
 
-    export class showEditor {
-        constructor(options) {
+    class CollectionEditor {
+        show(options) {
             const items = options.items || {};
             currentServerId = options.serverId;
 
@@ -266,4 +266,4 @@ import toast from '../toast/toast';
     }
 
 /* eslint-enable indent */
-export default showEditor;
+export default CollectionEditor;
diff --git a/src/components/itemContextMenu.js b/src/components/itemContextMenu.js
index 6974f609ef..15980b23ad 100644
--- a/src/components/itemContextMenu.js
+++ b/src/components/itemContextMenu.js
@@ -318,8 +318,9 @@ import toast from './toast/toast';
         return new Promise(function (resolve, reject) {
             switch (id) {
                 case 'addtocollection':
-                    import('./collectionEditor/collectionEditor').then(({default: collectionEditor}) => {
-                        new collectionEditor({
+                    import('./collectionEditor/collectionEditor').then(({default: CollectionEditor}) => {
+                        const collectionEditor = new CollectionEditor();
+                        collectionEditor.show({
                             items: [itemId],
                             serverId: serverId
                         }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
diff --git a/src/components/multiSelect/multiSelect.js b/src/components/multiSelect/multiSelect.js
index 370d306d4b..6632ef628b 100644
--- a/src/components/multiSelect/multiSelect.js
+++ b/src/components/multiSelect/multiSelect.js
@@ -267,8 +267,9 @@ import datetime from '../../scripts/datetime';
                                     }
                                     break;
                                 case 'addtocollection':
-                                    import('../collectionEditor/collectionEditor').then(({default: collectionEditor}) => {
-                                        new collectionEditor({
+                                    import('../collectionEditor/collectionEditor').then(({default: CollectionEditor}) => {
+                                        const collectionEditor = new CollectionEditor();
+                                        collectionEditor.show({
                                             items: items,
                                             serverId: serverId
                                         });
diff --git a/src/view/components/NewCollection.tsx b/src/view/components/NewCollection.tsx
index a68fa2c85d..1dbd625e64 100644
--- a/src/view/components/NewCollection.tsx
+++ b/src/view/components/NewCollection.tsx
@@ -9,9 +9,10 @@ const NewCollection: FunctionComponent = () => {
         const btnNewCollection = element.current?.querySelector('.btnNewCollection') as HTMLButtonElement;
         if (btnNewCollection) {
             btnNewCollection.addEventListener('click', () => {
-                import('../../components/collectionEditor/collectionEditor').then(({ default: collectionEditor }) => {
+                import('../../components/collectionEditor/collectionEditor').then(({default: CollectionEditor}) => {
                     const serverId = window.ApiClient.serverId();
-                    new collectionEditor({
+                    const collectionEditor = new CollectionEditor();
+                    collectionEditor.show({
                         items: [],
                         serverId: serverId
                     });