fix: Fixes text selection in contenteditable

EXAMPLES.md

@@ -51,3 +51,15 @@ selection.on('beforestart', ({event}) => {
 > Feel free to submit a [PR](https://github.com/Simonwep/selection/compare) or create
 > an [issue](https://github.com/Simonwep/selection/issues/new?assignees=Simonwep&labels=&template=feature_request.md&title=) if
 > you got any ideas for more examples!
+
+#### Preventing text-selection
+
+As of v2.1.0, it will no longer prevent text-selection. 
+If this is wanted it can be done using two of the event hooks and a bit of css:
+
+```js
+selection
+    .on('beforestart', () => document.body.style.userSelect = 'none')
+    .on('stop', () => document.body.style.userSelect = 'unset');
+```
+

src/index.ts

@@ -1,4 +1,4 @@
-import {css, eventPath, intersects, off, on, removeElement, selectAll, SelectAllSelectors, simplifyEvent} from '@utils';
+import {css, eventPath, intersects, isTouchDevice, off, on, removeElement, selectAll, SelectAllSelectors, simplifyEvent} from '@utils';
 import {EventTarget} from './EventEmitter';
 import {AreaLocation, Coordinates, ScrollEvent, SelectionEvents, SelectionOptions, SelectionStore} from './types';
 
@@ -232,7 +232,7 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
     }
 
     _delayedTapMove(evt: MouseEvent | TouchEvent): void {
-        const {startThreshold, container, document} = this._options;
+        const {startThreshold, container, document, allowTouch} = this._options;
         const {x1, y1} = this._areaLocation; // Coordinates of first "tap"
         const {x, y} = simplifyEvent(evt);
 
@@ -289,7 +289,9 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
             this._onTapMove(evt);
         }
 
-        evt.preventDefault(); // Prevent swipe-down refresh
+        if (allowTouch && isTouchDevice) {
+            evt.preventDefault(); // Prevent swipe-down refresh
+        }
     }
 
     _prepareSelectionArea(): void {
@@ -341,6 +343,7 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
     _onTapMove(evt: MouseEvent | TouchEvent): void {
         const {x, y} = simplifyEvent(evt);
         const {_scrollSpeed, _areaLocation, _options} = this;
+        const {allowTouch} = _options;
         const {speedDivider} = _options.scrolling;
         const scon = this._targetElement as Element;
 
@@ -399,7 +402,9 @@ export default class SelectionArea extends EventTarget<SelectionEvents> {
             this._redrawSelectionArea();
         }
 
-        evt.preventDefault(); // Prevent swipe-down refresh
+        if (allowTouch && isTouchDevice) {
+            evt.preventDefault(); // Prevent swipe-down refresh
+        }
     }
 
     _onScroll(): void {

src/utils/constants.ts

@@ -0,0 +1,3 @@
+// Determines if the device's primary input supports touch
+// See this article: https://css-tricks.com/touch-devices-not-judged-size/
+export const isTouchDevice = window.matchMedia('(hover: none), (pointer: coarse)').matches;

src/utils/index.ts

@@ -3,3 +3,4 @@ export * from './events';
 export * from './intersects';
 export * from './removeElement';
 export * from './selectAll';
+export * from './constants';