From 3a390bb1889f660bc12d9c233a993a23e750aea9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B5=D0=B9=20=D0=9A=D1=80?=
 =?UTF-8?q?=D1=8F=D0=B6=D0=B5=D0=B2?= <ubivaza@gmail.com>
Date: Wed, 20 Dec 2023 09:42:54 +0300
Subject: [PATCH] improve IME support

---
 packages/imask/example.html                   | 13 ++--
 .../imask/src/controls/html-mask-element.ts   | 59 ++++++++++---------
 2 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/packages/imask/example.html b/packages/imask/example.html
index cdb49ef4..09ba5b80 100644
--- a/packages/imask/example.html
+++ b/packages/imask/example.html
@@ -12,22 +12,23 @@ <h1>IMask Core Demo</h1>
   <!-- <script src="https://unpkg.com/imask"></script> -->
   <script type="text/javascript">
     const opts = {
-      mask: Date,
-      pattern: 'd.`m.`Y',
-      lazy: false,
-      overwrite: true,
-      autofix: 'pad',
+      mask: /字/g,
     };
 
     const input = document.getElementById('input');
     var result = document.getElementById('value');
     var unmasked = document.getElementById('unmasked');
     var imask = IMask(input, opts).on('accept', () => {
-      console.log(imask.value, imask.unmaskedValue, imask.typedValue);
+      console.log('accept', imask.value, imask.unmaskedValue, imask.typedValue);
       result.innerHTML = imask.value;
       unmasked.innerHTML = imask.unmaskedValue;
     });
 
+    input.addEventListener('keydown', e => console.log('keydown', e.isComposing));
+    input.addEventListener('input', e => console.log('input', e.isComposing, e.inputType));
+    input.addEventListener('compositionstart', e => console.log('compositionstart'));
+    input.addEventListener('compositionend', e => console.log('compositionend'));
+
     // document.getElementById('input').addEventListener('focus', () => {
     //   imask.updateOptions({
     //     mask: mask.map((m) => ({
diff --git a/packages/imask/src/controls/html-mask-element.ts b/packages/imask/src/controls/html-mask-element.ts
index 63fb95ac..4396a834 100644
--- a/packages/imask/src/controls/html-mask-element.ts
+++ b/packages/imask/src/controls/html-mask-element.ts
@@ -5,24 +5,17 @@ import IMask from '../core/holder';
 /** Bridge between HTMLElement and {@link Masked} */
 export default
 abstract class HTMLMaskElement extends MaskElement {
-  /** Mapping between HTMLElement events and mask internal events */
-  static EVENTS_MAP = {
-    selectionChange: 'keydown',
-    input: 'input',
-    drop: 'drop',
-    click: 'click',
-    focus: 'focus',
-    commit: 'blur',
-  } as const;
   /** HTMLElement to use mask on */
   declare input: HTMLElement;
-  declare _handlers: {[k: string]: EventListener};
+  declare _handlers: {[key: string]: EventListener};
   abstract value: string;
 
   constructor (input: HTMLElement) {
     super();
     this.input = input;
-    this._handlers = {};
+    this._onKeydown = this._onKeydown.bind(this);
+    this._onInput = this._onInput.bind(this);
+    this._onCompositionEnd = this._onCompositionEnd.bind(this);
   }
 
   get rootElement (): HTMLDocument {
@@ -40,28 +33,40 @@ abstract class HTMLMaskElement extends MaskElement {
     Binds HTMLElement events to mask internal events
   */
   override bindEvents (handlers: {[key in ElementEvent]: EventListener}) {
-    (Object.keys(handlers) as Array<ElementEvent>)
-      .forEach(event => this._toggleEventHandler(HTMLMaskElement.EVENTS_MAP[event], handlers[event]));
+    this.input.addEventListener('keydown', this._onKeydown as EventListener);
+    this.input.addEventListener('input', this._onInput as EventListener);
+    this.input.addEventListener('compositionend', this._onCompositionEnd as EventListener);
+    this.input.addEventListener('drop', handlers.drop);
+    this.input.addEventListener('click', handlers.click);
+    this.input.addEventListener('focus', handlers.focus);
+    this.input.addEventListener('blur', handlers.commit);
+    this._handlers = handlers;
+  }
+
+  _onKeydown (e: KeyboardEvent) {
+    if (!e.isComposing) this._handlers.selectionChange(e);
+  }
+
+  _onCompositionEnd (e: CompositionEvent) {
+    this._handlers.input(e);
+  }
+
+  _onInput (e: InputEvent) {
+    if (!e.isComposing) this._handlers.input(e);
   }
 
   /**
     Unbinds HTMLElement events to mask internal events
   */
   override unbindEvents () {
-    Object.keys(this._handlers)
-      .forEach(event => this._toggleEventHandler(event));
-  }
-
-  _toggleEventHandler (event: string, handler?: EventListener): void {
-    if (this._handlers[event]) {
-      this.input.removeEventListener(event, this._handlers[event]);
-      delete this._handlers[event];
-    }
-
-    if (handler) {
-      this.input.addEventListener(event, handler);
-      this._handlers[event] = handler;
-    }
+    this.input.removeEventListener('keydown', this._onKeydown as EventListener);
+    this.input.removeEventListener('input', this._onInput as EventListener);
+    this.input.removeEventListener('compositionend', this._onCompositionEnd as EventListener);
+    this.input.removeEventListener('drop', this._handlers.drop);
+    this.input.removeEventListener('click', this._handlers.click);
+    this.input.removeEventListener('focus', this._handlers.focus);
+    this.input.removeEventListener('blur', this._handlers.commit);
+    this._handlers = {};
   }
 }