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