Merge pull request #322 from desmosinc/mike/check-is-user-selecting

add mq.isUserSelecting() method to check if a mouse selection is active

Author: mikehaverstock

docs/Api_Methods.md

@@ -289,6 +289,18 @@ If a timeout (in ms) is supplied, and the math field has keyboard focus when the
 
 Returns the suffix to be appended to the [ARIA label][`aria-label`], after the math content of the field. If no ARIA post-label has been specified, `''` (empty string) is returned.
 
+## .isUserSelecting()
+
+Returns `true` if the user is currently selecting text with the mouse, `false` otherwise. This can be useful for preventing certain actions (like setting the cursor position) while the user is actively dragging to select text. The method tracks mouse selection from the moment the user presses the mouse button down to start selecting until they release it or the selection is cancelled due to an edit operation.
+
+```javascript
+if (!mathField.isUserSelecting()) {
+  // Safe to programmatically change cursor position
+  mathField.moveToLeftEnd();
+}
+```
+
+
 [`aria-label`]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
 
 ## .config(new_config)

src/controller.ts

@@ -26,6 +26,7 @@ class ControllerBase {
   editable: boolean | undefined;
   _ariaAlertTimeout: number;
   KIND_OF_MQ: KIND_OF_MQ;
+  isMouseSelecting: boolean = false;
 
   textarea: HTMLElement | undefined;
   private textareaEventListeners: Partial<{

src/mathquill.d.ts

@@ -64,6 +64,7 @@ declare namespace MathQuill {
       setAriaPostLabel: (str: string, timeout?: number) => EditableMathQuill;
       ignoreNextMousedown: (func: () => boolean) => EditableMathQuill;
       clickAt: (x: number, y: number, el: HTMLElement) => EditableMathQuill;
+      isUserSelecting: () => boolean;
     }
 
     interface API {

src/publicapi.ts

@@ -490,6 +490,9 @@ function getInterface(v: number): MathQuill.v3.API | MathQuill.v1.API {
       this.__controller.cursor.options.ignoreNextMousedown = fn;
       return this;
     }
+    isUserSelecting() {
+      return this.__controller.isMouseSelecting;
+    }
   }
 
   var APIClasses: APIClasses = {

src/services/mouse.ts

@@ -84,6 +84,7 @@ class Controller_mouse extends Controller_latex {
       ownerDocument?.removeEventListener('mousemove', onDocumentMouseMove);
       ownerDocument?.removeEventListener('mouseup', onDocumentMouseUp);
       cancelSelectionOnEdit = undefined;
+      ctrlr.isMouseSelecting = false;
     }
 
     function updateCursor() {
@@ -125,6 +126,7 @@ class Controller_mouse extends Controller_latex {
     }
 
     cursor.blink = noop;
+    ctrlr.isMouseSelecting = true;
     ctrlr
       .seek(e.target as HTMLElement | null, e.clientX, e.clientY)
       .cursor.startSelection();

test/unit/publicapi.test.js

@@ -253,6 +253,35 @@ suite('Public API', function () {
       assert.equal(mq.getAriaPostLabel(), '');
     });
 
+    test('.isUserSelecting()', function () {
+      mq.latex('x+y');
+
+      // Initially should not be selecting
+      assert.equal(mq.isUserSelecting(), false);
+
+      // Simulate mouse down event to start selection
+      var mouseDownEvent = new MouseEvent('mousedown', {
+        clientX: 10,
+        clientY: 10,
+        bubbles: true
+      });
+      mq.el().dispatchEvent(mouseDownEvent);
+
+      // Should be selecting during mouse down
+      assert.equal(mq.isUserSelecting(), true);
+
+      // Simulate mouse up event to end selection
+      var mouseUpEvent = new MouseEvent('mouseup', {
+        clientX: 20,
+        clientY: 10,
+        bubbles: true
+      });
+      document.dispatchEvent(mouseUpEvent);
+
+      // Should not be selecting after mouse up
+      assert.equal(mq.isUserSelecting(), false);
+    });
+
     test('.mathspeak()', function () {
       function assertMathSpeakEqual(a, b) {
         assert.equal(normalize(a), normalize(b));