From 25c23a2e5f3934a2ed2cc51ef9de0b286986fadf Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 16 Nov 2022 15:21:22 +0000
Subject: [PATCH] Removed use of image-manager/entity-selector window globals

---
 resources/js/components/image-manager.js     |  3 ---
 resources/js/components/markdown-editor.js   | 12 +++++++++---
 resources/js/wysiwyg/config.js               |  8 ++++++--
 resources/js/wysiwyg/plugin-drawio.js        |  6 ++++--
 resources/js/wysiwyg/plugins-imagemanager.js |  5 +++--
 5 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/image-manager.js b/resources/js/components/image-manager.js
index da842849d..a78aa3483 100644
--- a/resources/js/components/image-manager.js
+++ b/resources/js/components/image-manager.js
@@ -4,7 +4,6 @@ import {Component} from "./component";
 export class ImageManager extends Component {
 
     setup() {
-
         // Options
         this.uploadedTo = this.$opts.uploadedTo;
 
@@ -33,8 +32,6 @@ export class ImageManager extends Component {
         this.resetState();
 
         this.setupListeners();
-
-        window.ImageManager = this;
     }
 
     setupListeners() {
diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index ee2f0ced2..b9567d864 100644
--- a/resources/js/components/markdown-editor.js
+++ b/resources/js/components/markdown-editor.js
@@ -431,7 +431,9 @@ export class MarkdownEditor extends Component {
 
     actionInsertImage() {
         const cursorPos = this.cm.getCursor('from');
-        window.ImageManager.show(image => {
+        /** @type {ImageManager} **/
+        const imageManager = window.$components.first('image-manager');
+        imageManager.show(image => {
             const imageUrl = image.thumbs.display || image.url;
             let selectedText = this.cm.getSelection();
             let newText = "[![" + (selectedText || image.name) + "](" + imageUrl + ")](" + image.url + ")";
@@ -443,7 +445,9 @@ export class MarkdownEditor extends Component {
 
     actionShowImageManager() {
         const cursorPos = this.cm.getCursor('from');
-        window.ImageManager.show(image => {
+        /** @type {ImageManager} **/
+        const imageManager = window.$components.first('image-manager');
+        imageManager.show(image => {
             this.insertDrawing(image, cursorPos);
         }, 'drawio');
     }
@@ -451,7 +455,9 @@ export class MarkdownEditor extends Component {
     // Show the popup link selector and insert a link when finished
     actionShowLinkSelector() {
         const cursorPos = this.cm.getCursor('from');
-        window.EntitySelectorPopup.show(entity => {
+        /** @type {EntitySelectorPopup} **/
+        const selector = window.$components.first('entity-selector-popup');
+        selector.show(entity => {
             let selectedText = this.cm.getSelection() || entity.name;
             let newText = `[${selectedText}](${entity.link})`;
             this.cm.focus();
diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index acf5e1d52..d5ec20e26 100644
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -73,7 +73,9 @@ function file_picker_callback(callback, value, meta) {
 
     // field_name, url, type, win
     if (meta.filetype === 'file') {
-        window.EntitySelectorPopup.show(entity => {
+        /** @type {EntitySelectorPopup} **/
+        const selector = window.$components.first('entity-selector-popup');
+        selector.show(entity => {
             callback(entity.link, {
                 text: entity.name,
                 title: entity.name,
@@ -83,7 +85,9 @@ function file_picker_callback(callback, value, meta) {
 
     if (meta.filetype === 'image') {
         // Show image manager
-        window.ImageManager.show(function (image) {
+        /** @type {ImageManager} **/
+        const imageManager = window.$components.first('image-manager');
+        imageManager.show(function (image) {
             callback(image.url, {alt: image.name});
         }, 'gallery');
     }
diff --git a/resources/js/wysiwyg/plugin-drawio.js b/resources/js/wysiwyg/plugin-drawio.js
index 64ef1fffb..ad7e09f95 100644
--- a/resources/js/wysiwyg/plugin-drawio.js
+++ b/resources/js/wysiwyg/plugin-drawio.js
@@ -15,8 +15,10 @@ function isDrawing(node) {
 function showDrawingManager(mceEditor, selectedNode = null) {
     pageEditor = mceEditor;
     currentNode = selectedNode;
-    // Show image manager
-    window.ImageManager.show(function (image) {
+
+    /** @type {ImageManager} **/
+    const imageManager = window.$components.first('image-manager');
+    imageManager.show(function (image) {
         if (selectedNode) {
             const imgElem = selectedNode.querySelector('img');
             pageEditor.undoManager.transact(function () {
diff --git a/resources/js/wysiwyg/plugins-imagemanager.js b/resources/js/wysiwyg/plugins-imagemanager.js
index 225f271fd..6969a50e2 100644
--- a/resources/js/wysiwyg/plugins-imagemanager.js
+++ b/resources/js/wysiwyg/plugins-imagemanager.js
@@ -3,14 +3,15 @@
  * @param {String} url
  */
 function register(editor, url) {
-
     // Custom Image picker button
     editor.ui.registry.addButton('imagemanager-insert', {
         title: 'Insert image',
         icon: 'image',
         tooltip: 'Insert image',
         onAction() {
-            window.ImageManager.show(function (image) {
+            /** @type {ImageManager} **/
+            const imageManager = window.$components.first('image-manager');
+            imageManager.show(function (image) {
                 const imageUrl = image.thumbs.display || image.url;
                 let html = `<a href="${image.url}" target="_blank">`;
                 html += `<img src="${imageUrl}" alt="${image.name}">`;