Input system cleanup

js/template/InputTemplate.js

@@ -1,4 +1,3 @@
-import FocusTextEdit from "../input/common/FocusTextEdit"
 import ITemplate from "./ITemplate"
 
 /** @typedef {import ("../element/InputElement").default} InputElement */
@@ -6,18 +5,49 @@ import ITemplate from "./ITemplate"
 /** @extends {ITemplate<InputElement>} */
 export default class InputTemplate extends ITemplate {
 
-    createInputObjects() {
-        return [
-            ...super.createInputObjects(),
-            new FocusTextEdit(this.element, this.element.blueprint),
-        ]
+    #focusHandler = () => this.element.blueprint.dispatchEditTextEvent(true)
+    #focusoutHandler = () => {
+        this.element.blueprint.dispatchEditTextEvent(false)
+        document.getSelection()?.removeAllRanges() // Deselect eventually selected text inside the input
     }
+    #inputSingleLineHandler =
+        /** @param {InputEvent} e */
+        e =>  /** @type {HTMLElement} */(e.target).querySelectorAll("br").forEach(br => br.remove())
+    #onKeydownBlurOnEnterHandler =
+        /** @param {KeyboardEvent} e */
+        e => {
+            if (e.code == "Enter" && !e.shiftKey) {
+                    /** @type {HTMLElement} */(e.target).blur()
+            }
+        }
 
-    /** @param {Map} changedProperties */
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties)
+    /** @param {InputElement} element */
+    constructed(element) {
+        super.constructed(element)
         this.element.classList.add("ueb-pin-input-content")
         this.element.setAttribute("role", "textbox")
         this.element.contentEditable = "true"
     }
-}
+
+    connectedCallback() {
+        this.element.addEventListener("focus", this.#focusHandler)
+        this.element.addEventListener("focusout", this.#focusoutHandler)
+        if (this.element.singleLine) {
+            this.element.addEventListener("input", this.#inputSingleLineHandler)
+        }
+        if (this.element.blurOnEnter) {
+            this.element.addEventListener("keydown", this.#onKeydownBlurOnEnterHandler)
+        }
+    }
+
+    cleanup() {
+        this.element.removeEventListener("focus", this.#focusHandler)
+        this.element.removeEventListener("focusout", this.#focusoutHandler)
+        if (this.element.singleLine) {
+            this.element.removeEventListener("input", this.#inputSingleLineHandler)
+        }
+        if (this.element.blurOnEnter) {
+            this.element.removeEventListener("keydown", this.#onKeydownBlurOnEnterHandler)
+        }
+    }
+}