Custom Image Modifiers dialog tweaks (#935)

* Custom Image Modifiers dialog tweaks

Couple minor usability improvements for the custom image modifiers dialog:
- set the focus to the textbox when opening the dialog
- pressing the Escape key closes the dialog

* Adding keyboard shortcuts

Escape to cancel the changes, Ctrl+Enter to confirm the changes. No change to the existing UI behavior using the mouse.

* Make the overlay focusable

Allows the keyboard shortcuts to work if user clicks on the main window rather than the textbox itself.

* Disable spell and grammar correction

ui/index.html

@@ -392,12 +392,12 @@
         </div>
     </div>
 
-    <div id="modifier-settings-config" class="popup">
+    <div id="modifier-settings-config" class="popup" tabindex="0">
         <div>
             <i class="close-button fa-solid fa-xmark"></i>
             <h1>Modifier Settings</h1>
             <p>Set your custom modifiers (one per line)</p>
-            <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line"></textarea>
+            <textarea id="custom-modifiers-input" placeholder="Enter your custom modifiers, one-per-line" spellcheck="false"></textarea>
             <p><small><b>Tip:</b> You can include special characters like {} () [] and |. You can also put multiple comma-separated phrases in a single line, to make a single modifier that combines all of those.</small></p>
         </div>
     </div>

ui/media/js/image-modifiers.js

@@ -1,6 +1,7 @@
 let activeTags = []
 let modifiers = []
 let customModifiersGroupElement = undefined
+let customModifiersInitialContent
 
 let editorModifierEntries = document.querySelector('#editor-modifiers-entries')
 let editorModifierTagsList = document.querySelector('#editor-inputs-tags-list')
@@ -347,9 +348,28 @@ previewImageField.onchange = () => changePreviewImages(previewImageField.value)
 
 modifierSettingsBtn.addEventListener('click', function(e) {
     modifierSettingsOverlay.classList.add("active")
+    customModifiersTextBox.setSelectionRange(0, 0)
+    customModifiersTextBox.focus()
+    customModifiersInitialContent = customModifiersTextBox.value // preserve the initial content
     e.stopPropagation()
 })
 
+modifierSettingsOverlay.addEventListener('keydown', function(e) {
+    switch (e.key) {
+        case "Escape": // Escape to cancel
+            customModifiersTextBox.value = customModifiersInitialContent // undo the changes
+            modifierSettingsOverlay.classList.remove("active")
+            e.stopPropagation()
+            break
+        case "Enter":
+            if (e.ctrlKey) { // Ctrl+Enter to confirm
+                modifierSettingsOverlay.classList.remove("active")
+                e.stopPropagation()
+                break
+            }
+    }
+})
+
 function saveCustomModifiers() {
     localStorage.setItem(CUSTOM_MODIFIERS_KEY, customModifiersTextBox.value.trim())