[IMP] Nomarlizer: make PointerEventPosition

The properties to access the `x` and `y` are not the same on
MouseEvent and TouchEvent. And it is not possible to mutate or
recreate similar event when passing it through functions.

In the future, we need to be able to access and modifiy the x and y.

For instance, when the browser is overloaded and the event are all
aggregated in one stack, it is still possible to scroll the browser.

When we scroll the browser, the x and y positions are not accurate
and we need to be able to change them to reflect what happen after
the scroll.

Author: Goaman

packages/plugin-dom-editable/src/EventNormalizer.ts

@@ -79,6 +79,16 @@ const alphabetsContainingSpaces = new RegExp(
         ')$',
 );
 
+/**
+ * Information about the MouseEvent or TouchEvent that represent their
+ * positions.
+ */
+interface PointerEventPosition {
+    target: EventTarget;
+    x: number;
+    y: number;
+}
+
 /**
  * These javascript event types might, in case of safari or spell-checking
  * keyboard, trigger dom events in multiple javascript stacks. They will require
@@ -592,9 +602,13 @@ export class EventNormalizer {
                 this._enableNormalizer(eventTarget);
             } else {
                 if (eventTarget && ev.constructor.name === 'MouseEvent') {
-                    eventTarget = this._getEventTarget(ev as MouseEvent);
+                    eventTarget = this._getEventTarget(
+                        this._getPointerEventPosition(ev as MouseEvent),
+                    );
                 } else if (eventTarget && ev.constructor.name === 'TouchEvent') {
-                    eventTarget = this._getEventTarget(ev as TouchEvent);
+                    eventTarget = this._getEventTarget(
+                        this._getPointerEventPosition(ev as TouchEvent),
+                    );
                 } else if (this._isInEditable(eventTarget)) {
                     eventTarget = eventTarget?.ownerDocument.getSelection().focusNode;
                 }
@@ -1407,7 +1421,7 @@ export class EventNormalizer {
      *
      * @param [ev]
      */
-    _getSelection(ev?: MouseEvent | TouchEvent): DomSelectionDescription {
+    _getSelection(ev?: PointerEventPosition): DomSelectionDescription {
         let selectionDescription: DomSelectionDescription;
         let target: Node;
         let root: Document | ShadowRoot;
@@ -1623,17 +1637,9 @@ export class EventNormalizer {
      *
      * @param ev
      */
-    _getEventCaretPosition(ev: MouseEvent | TouchEvent): CaretPosition {
-        const x =
-            ev.constructor.name === 'TouchEvent'
-                ? (ev as TouchEvent).touches[0].clientX
-                : (ev as MouseEvent).clientX;
-        const y =
-            ev.constructor.name === 'TouchEvent'
-                ? (ev as TouchEvent).touches[0].clientY
-                : (ev as MouseEvent).clientY;
+    _getEventCaretPosition(ev: PointerEventPosition): CaretPosition {
         const target = ev.target as Node;
-        let caretPosition = caretPositionFromPoint(x, y, target.ownerDocument);
+        let caretPosition = caretPositionFromPoint(ev.x, ev.y, target.ownerDocument);
         if (!caretPosition) {
             caretPosition = { offsetNode: ev.target as Node, offset: 0 };
         }
@@ -1645,17 +1651,9 @@ export class EventNormalizer {
      *
      * @param ev
      */
-    _getEventTarget(ev: MouseEvent | TouchEvent): Node {
-        const x =
-            ev.constructor.name === 'TouchEvent'
-                ? (ev as TouchEvent).touches[0].clientX
-                : (ev as MouseEvent).clientX;
-        const y =
-            ev.constructor.name === 'TouchEvent'
-                ? (ev as TouchEvent).touches[0].clientY
-                : (ev as MouseEvent).clientY;
+    _getEventTarget(ev: PointerEventPosition): Node {
         const target = ev.target as Node;
-        return elementFromPoint(x, y, target.ownerDocument) || target;
+        return elementFromPoint(ev.x, ev.y, target.ownerDocument) || target;
     }
 
     //--------------------------------------------------------------------------
@@ -1714,8 +1712,9 @@ export class EventNormalizer {
     _onPointerDown(ev: MouseEvent | TouchEvent): void {
         // Don't trigger events on the editable if the click was done outside of
         // the editable itself or on something else than an element.
-        const target = this._getEventTarget(ev);
-        const caretPosition = this._getEventCaretPosition(ev);
+        const pointerEventPosition = this._getPointerEventPosition(ev);
+        const target = this._getEventTarget(pointerEventPosition);
+        const caretPosition = this._getEventCaretPosition(pointerEventPosition);
         if (target && this._isInEditable(caretPosition.offsetNode)) {
             this._mousedownInEditable = true;
             this._initialCaretPosition = caretPosition;
@@ -1743,7 +1742,7 @@ export class EventNormalizer {
                 this._initialCaretPosition = this._getEventCaretPosition(ev);
                 this._pointerSelectionTimeout = new Timeout<EventBatch>(() => {
                     if (ev.defaultPrevented) return { actions: [] };
-                    return this._analyzeSelectionChange(ev);
+                    return this._analyzeSelectionChange(this._getPointerEventPosition(ev));
                 });
                 this._triggerEventBatch(this._pointerSelectionTimeout.promise);
             } catch (e) {
@@ -1775,7 +1774,7 @@ export class EventNormalizer {
      *
      * @param ev
      */
-    _analyzeSelectionChange(ev: MouseEvent | TouchEvent): EventBatch {
+    _analyzeSelectionChange(ev: PointerEventPosition): EventBatch {
         const eventBatch = {
             actions: [],
             mutatedElements: new Set([]),
@@ -2007,4 +2006,21 @@ export class EventNormalizer {
             this._shadowNormalizers.set(root, eventNormalizer);
         }
     }
+
+    /**
+     * Retrieve a `PointerEventPosition` from a` MouseEvent` or a `TouchEvent`.
+     */
+    _getPointerEventPosition(ev: MouseEvent | TouchEvent): PointerEventPosition {
+        return {
+            x:
+                ev.constructor.name === 'TouchEvent'
+                    ? (ev as TouchEvent).touches[0].clientX
+                    : (ev as MouseEvent).clientX,
+            y:
+                ev.constructor.name === 'TouchEvent'
+                    ? (ev as TouchEvent).touches[0].clientY
+                    : (ev as MouseEvent).clientY,
+            target: ev.target,
+        };
+    }
 }