Catch and wrap new tags dropdowns inside fancy tags editor

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();

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);
+    }
+  })
+}