@operato/input 1.11.3 → 1.11.5

package/src/ox-input-code.ts

@@ -57,6 +57,7 @@ export class OxInputCode extends OxFormField {
 
   private _self_changing: boolean = false
   private _editor?: EditorView
+  private _changed: boolean = false
 
   updated(changes: PropertyValues<this>) {
     if (changes.has('value') && this.editor && !this._self_changing) {
@@ -95,25 +96,15 @@ export class OxInputCode extends OxFormField {
           oneDark,
           syntaxHighlighting(oneDarkHighlightStyle),
           highlightActiveLine(),
-          keymap.of([
-            ...historyKeymap,
-            indentWithTab,
-            {
-              key: 'Escape',
-              run: (view: EditorView) => {
-                togglefullscreen(this)
-                return true
-              }
-            }
-          ]),
-          EditorView.updateListener.of(v => {
+          keymap.of([...historyKeymap, indentWithTab]),
+          EditorView.updateListener.of(async v => {
             if (v.docChanged) {
               this._self_changing = true
-              this.value = v.state.doc.toString()
-              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
-              requestAnimationFrame(() => {
-                this._self_changing = false
-              })
+              this._changed = true
+
+              await this.updateComplete
+
+              this._self_changing = false
             }
           })
         ],
@@ -121,6 +112,32 @@ export class OxInputCode extends OxFormField {
       })
     }
 
+    this._editor.contentDOM.addEventListener('keydown', event => {
+      event.stopPropagation()
+
+      if (event.key === 'Escape') {
+        togglefullscreen(this._editor!.contentDOM)
+      }
+    })
+
+    this._editor.contentDOM.addEventListener('blur', e => {
+      if (!this._changed) {
+        return
+      }
+
+      this.value = this._editor!.state.doc.toString()
+      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))
+    })
+
+    // this._editor.contentDOM.addEventListener('change', async e => {
+    //   this._self_changing = true
+    //   this._changed = true
+
+    //   await this.updateComplete
+
+    //   this._self_changing = false
+    // })
+
     return this._editor
   }
 }