From 5092dc7f6d9162cab0ebbab07107e643efb17233 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Tue, 12 Nov 2024 14:19:53 +0400
Subject: [PATCH 1/2] Catch and wrap new tags dropdowns inside fancy tags
 editor

---
 src/content/tags.js                      |  4 ++-
 src/lib/components/TagDropdownWrapper.js | 34 ++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/content/tags.js b/src/content/tags.js
index 232bb7c..d5c3edc 100644
--- a/src/content/tags.js
+++ b/src/content/tags.js
@@ -1,5 +1,7 @@
-import {wrapTagDropdown} from "$lib/components/TagDropdownWrapper.js";
+import {watchTagDropdownsInTagsEditor, wrapTagDropdown} from "$lib/components/TagDropdownWrapper.js";
 
 for (let tagDropdownElement of document.querySelectorAll('.tag.dropdown')) {
   wrapTagDropdown(tagDropdownElement);
 }
+
+watchTagDropdownsInTagsEditor();
diff --git a/src/lib/components/TagDropdownWrapper.js b/src/lib/components/TagDropdownWrapper.js
index 728e9b2..34dea84 100644
--- a/src/lib/components/TagDropdownWrapper.js
+++ b/src/lib/components/TagDropdownWrapper.js
@@ -1,6 +1,9 @@
 import {BaseComponent} from "$lib/components/base/BaseComponent.js";
 import MaintenanceProfile from "$entities/MaintenanceProfile.js";
 import MaintenanceSettings from "$lib/extension/settings/MaintenanceSettings.js";
+import {getComponent} from "$lib/components/base/ComponentUtils.js";
+
+const isTagEditorProcessedKey = Symbol();
 
 class TagDropdownWrapper extends BaseComponent {
   /**
@@ -187,5 +190,36 @@ class TagDropdownWrapper extends BaseComponent {
 }
 
 export function wrapTagDropdown(element) {
+  // Skip initialization when tag component is already wrapped
+  if (getComponent(element)) {
+    return;
+  }
+
   new TagDropdownWrapper(element).initialize();
 }
+
+export function watchTagDropdownsInTagsEditor() {
+  document.body.addEventListener('mouseover', event => {
+    /** @type {HTMLElement} */
+    const targetElement = event.target;
+
+    if (targetElement[isTagEditorProcessedKey]) {
+      return;
+    }
+
+    /** @type {HTMLElement|null} */
+    const closestTagEditor = targetElement.closest('#image_tags_and_source');
+
+    if (!closestTagEditor || closestTagEditor[isTagEditorProcessedKey]) {
+      targetElement[isTagEditorProcessedKey] = true;
+      return;
+    }
+
+    targetElement[isTagEditorProcessedKey] = true;
+    closestTagEditor[isTagEditorProcessedKey] = true;
+
+    for (const tagDropdownElement of closestTagEditor.querySelectorAll('.tag.dropdown')) {
+      wrapTagDropdown(tagDropdownElement);
+    }
+  })
+}

From 3e05b1964d8557abdf4ebf03301d976630d6be8c Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Tue, 12 Nov 2024 14:24:04 +0400
Subject: [PATCH 2/2] Skip watching logic if there is no editor on the page

---
 src/lib/components/TagDropdownWrapper.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lib/components/TagDropdownWrapper.js b/src/lib/components/TagDropdownWrapper.js
index 34dea84..37c45ca 100644
--- a/src/lib/components/TagDropdownWrapper.js
+++ b/src/lib/components/TagDropdownWrapper.js
@@ -199,6 +199,11 @@ export function wrapTagDropdown(element) {
 }
 
 export function watchTagDropdownsInTagsEditor() {
+  // We only need to watch for new editor elements if there is a tag editor present on the page
+  if (!document.querySelector('#image_tags_and_source')) {
+    return;
+  }
+
   document.body.addEventListener('mouseover', event => {
     /** @type {HTMLElement} */
     const targetElement = event.target;