Merge pull request #3156 from microsoft/u/nguyenvi/touch-double-tap

Touch Selection - handle double tab

**Spec:**
Double tap on a word: Highlight the word or closest word if the user tapped on a space in between 2 words and open the Floatie Ribbon **(-> browser handles this)**
- note: if the user double taps on the open space after a word and there is no word on the right-side of the same, then highlight the first space of the wide gap
- note: if a user double taps on a character like a comma, period, colon, or semi-colon, then highlight that character
- note: if a user double taps on a bracket [,{,(,),},] that is next to a word, then highlight the word and not the bracket **(-> browser handles this)**


**Changes:**
 - Fix:  
      + reset `this.pointerEvent` to be `null `after trigger plugin event
      + use `setTimeout` to delay plugin event triggered for 200s to wait for new selection to be updated properly before defining the reposition (and also wait for `dblclick` event to check if it is double tab or single tab).
 - Listen to `dblclick` native event to trigger `pointerDoubleClick` if there is pointer event stored
 - Add new `pointerDoubleClick` plugin event and add handler in Touch Plugin
 - Add handler for 2 scenarios:
     + double clicked character is a punctuation mark: select that char only
     + double clicked character is a white space: check if right side has word, if yes, let browser handle it; if no, traverse to left and select the first white space char of the selected open space

Author: vinguyen12

packages/roosterjs-content-model-core/lib/corePlugin/domEvent/DOMEventPlugin.ts

@@ -17,6 +17,7 @@ const EventTypeMap: Record<string, 'keyDown' | 'keyUp' | 'keyPress'> = {
     keyup: 'keyUp',
     keypress: 'keyPress',
 };
+const POINTER_DETECTION_DELAY = 200; // Delay time to wait for selection to be updated and also detect if pointerup is a tap or part of double tap
 
 /**
  * DOMEventPlugin handles customized DOM events, including:
@@ -34,6 +35,8 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
     private disposer: (() => void) | null = null;
     private state: DOMEventPluginState;
     private pointerEvent: PointerEvent | null = null;
+    private timer = 0;
+    private isDblClicked: boolean = false;
 
     /**
      * Construct a new instance of DOMEventPlugin
@@ -87,6 +90,7 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
 
             // 5. Pointer event
             pointerdown: { beforeDispatch: (event: PointerEvent) => this.onPointerDown(event) },
+            dblclick: { beforeDispatch: () => this.onDoubleClick() },
         };
 
         this.disposer = this.editor.attachDomEvent(<Record<string, DOMEventRecord>>eventHandlers);
@@ -104,14 +108,18 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
         this.removeMouseUpEventListener();
 
         const document = this.editor?.getDocument();
-
         document?.defaultView?.removeEventListener('resize', this.onScroll);
         document?.defaultView?.removeEventListener('scroll', this.onScroll);
         this.state.scrollContainer.removeEventListener('scroll', this.onScroll);
         this.disposer?.();
         this.disposer = null;
         this.editor = null;
         this.pointerEvent = null;
+
+        if (this.timer) {
+            document?.defaultView?.clearTimeout(this.timer);
+            this.timer = 0;
+        }
     }
 
     /**
@@ -220,13 +228,40 @@ class DOMEventPlugin implements PluginWithState<DOMEventPluginState> {
             });
 
             if (this.pointerEvent) {
-                this.editor.triggerEvent('pointerUp', {
-                    rawEvent: this.pointerEvent,
-                });
+                const window = this.editor?.getDocument().defaultView;
+
+                if (!window) {
+                    return;
+                }
+
+                if (this.timer) {
+                    window.clearTimeout(this.timer);
+                }
+
+                this.timer = window.setTimeout(() => {
+                    this.timer = 0;
+                    if (this.editor && this.pointerEvent) {
+                        if (this.isDblClicked) {
+                            this.editor.triggerEvent('pointerDoubleClick', {
+                                rawEvent: this.pointerEvent,
+                            });
+                        } else {
+                            this.editor.triggerEvent('pointerUp', {
+                                rawEvent: this.pointerEvent,
+                            });
+                        }
+                    }
+                    this.pointerEvent = null;
+                    this.isDblClicked = false;
+                }, POINTER_DETECTION_DELAY);
             }
         }
     };
 
+    private onDoubleClick = () => {
+        this.isDblClicked = true;
+    };
+
     private onCompositionStart = () => {
         this.state.isInIME = true;
     };

packages/roosterjs-content-model-plugins/lib/touch/TouchPlugin.ts

@@ -46,6 +46,57 @@ export class TouchPlugin implements EditorPlugin {
             case 'pointerUp':
                 repositionTouchSelection(this.editor);
                 break;
+            case 'pointerDoubleClick':
+                const selection = this.editor.getDocument()?.getSelection();
+                if (!selection) {
+                    return;
+                }
+
+                const node = selection.focusNode;
+                if (node?.nodeType !== Node.TEXT_NODE) {
+                    return;
+                }
+
+                const offset = selection.focusOffset;
+                const text = node.nodeValue || '';
+                const char = text.charAt(offset);
+
+                // Check if the clicked character is a punctuation mark, then highlight that character only
+                if (/[.,;:]/.test(char)) {
+                    const newRange = this.editor.getDocument()?.createRange();
+                    if (newRange) {
+                        newRange.setStart(node, offset);
+                        newRange.setEnd(node, offset + 1);
+                        this.editor.setDOMSelection({
+                            type: 'range',
+                            range: newRange,
+                            isReverted: false,
+                        });
+                    }
+                } else if (/\s/.test(char)) {
+                    // If the clicked character is an open space with no word of right side
+                    const rightSideOfChar = text.substring(offset, text.length);
+                    const isRightSideAllSpaces =
+                        rightSideOfChar.length > 0 && !/\S/.test(rightSideOfChar);
+                    if (isRightSideAllSpaces) {
+                        // select the first space only
+                        let start = offset;
+                        while (start > 0 && /\s/.test(text.charAt(start - 1))) {
+                            start--;
+                        }
+                        const newRange = this.editor.getDocument()?.createRange();
+                        if (newRange) {
+                            newRange.setStart(node, start);
+                            newRange.setEnd(node, start + 1);
+                            this.editor.setDOMSelection({
+                                type: 'range',
+                                range: newRange,
+                                isReverted: false,
+                            });
+                        }
+                    }
+                }
+                break;
         }
     }
 }

packages/roosterjs-content-model-plugins/lib/touch/repositionTouchSelection.ts

@@ -44,10 +44,11 @@ export function repositionTouchSelection(editor: IEditor) {
                 // before selection marker + after selection marker
                 if (segments.length === 2) {
                     // 3. Calculate the offset to move cursor to the nearest edge of the word if within 6 characters
+                    // default to end of the word if user tapped in the middle
                     const leftCursorWordLength = segments[0].text.length;
                     const rightCursorWordLength = segments[1].text.length;
                     let movingOffset: number =
-                        leftCursorWordLength > rightCursorWordLength
+                        leftCursorWordLength >= rightCursorWordLength
                             ? rightCursorWordLength
                             : -leftCursorWordLength;
                     movingOffset =

packages/roosterjs-content-model-types/lib/event/PluginEvent.ts

@@ -22,7 +22,7 @@ import type { ScrollEvent } from './ScrollEvent';
 import type { SelectionChangedEvent } from './SelectionChangedEvent';
 import type { EnterShadowEditEvent, LeaveShadowEditEvent } from './ShadowEditEvent';
 import type { ZoomChangedEvent } from './ZoomChangedEvent';
-import type { PointerDownEvent, PointerUpEvent } from './PointerEvent';
+import type { PointerDownEvent, PointerUpEvent, PointerDoubleClickEvent } from './PointerEvent';
 
 /**
  * Editor plugin event interface
@@ -56,4 +56,5 @@ export type PluginEvent =
     | SelectionChangedEvent
     | ZoomChangedEvent
     | PointerDownEvent
-    | PointerUpEvent;
+    | PointerUpEvent
+    | PointerDoubleClickEvent;

packages/roosterjs-content-model-types/lib/event/PluginEventType.ts

@@ -149,11 +149,16 @@ export type PluginEventType =
     | 'beforeAddUndoSnapshot'
 
     /**
-     * HTML PointerDown event
+     * HTML PointerDown event - for touch only
      */
     | 'pointerDown'
 
     /**
-     * HTML PointerUp event
+     * HTML PointerUp event - for touch only
      */
-    | 'pointerUp';
+    | 'pointerUp'
+
+    /**
+     * HTML double click with Pointer event - for touch only
+     */
+    | 'pointerDoubleClick';

packages/roosterjs-content-model-types/lib/event/PointerEvent.ts

@@ -9,3 +9,9 @@ export interface PointerDownEvent extends BasePluginDomEvent<'pointerDown', Poin
  * This interface represents a PluginEvent wrapping native PointerUp event
  */
 export interface PointerUpEvent extends BasePluginDomEvent<'pointerUp', PointerEvent> {}
+
+/**
+ * This interface represents a PluginEvent wrapping native double-click event with pointer information
+ */
+export interface PointerDoubleClickEvent
+    extends BasePluginDomEvent<'pointerDoubleClick', PointerEvent> {}

packages/roosterjs-content-model-types/lib/index.ts

@@ -495,4 +495,4 @@ export { ScrollEvent } from './event/ScrollEvent';
 export { SelectionChangedEvent } from './event/SelectionChangedEvent';
 export { EnterShadowEditEvent, LeaveShadowEditEvent } from './event/ShadowEditEvent';
 export { ZoomChangedEvent } from './event/ZoomChangedEvent';
-export { PointerDownEvent, PointerUpEvent } from './event/PointerEvent';
+export { PointerDownEvent, PointerUpEvent, PointerDoubleClickEvent } from './event/PointerEvent';