feature(touch event): support touch for tablet

containers/FreehandTool.tsx

@@ -54,7 +54,7 @@ const FreehandTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
     }));
   };
 
-  const handleMouseDown = (event: MouseEvent): void => {
+  const handleMouseDown = (event: MouseEvent | TouchEvent): void => {
     const pageEle = (event.target as HTMLElement).parentNode as HTMLElement;
     switchPdfViewerScrollState('hidden');
 
@@ -153,6 +153,8 @@ const FreehandTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
 
     pdfViewer.addEventListener('mousedown', handleMouseDown);
     pdfViewer.addEventListener('mouseup', handleMouseUp);
+    pdfViewer.addEventListener('touchstart', handleMouseDown);
+    pdfViewer.addEventListener('touchend', handleMouseUp);
   };
 
   const unsubscribeEvent = (): void => {
@@ -160,6 +162,8 @@ const FreehandTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
 
     pdfViewer.removeEventListener('mousedown', handleMouseDown);
     pdfViewer.removeEventListener('mouseup', handleMouseUp);
+    pdfViewer.removeEventListener('touchstart', handleMouseDown);
+    pdfViewer.removeEventListener('touchend', handleMouseUp);
   };
 
   useEffect(() => {

containers/HighlightTools.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import MobileDetect from 'mobile-detect';
 
 import Icon from '../components/Icon';
 import Button from '../components/Button';
@@ -126,19 +125,15 @@ const HighlightTools: React.FC<Props> = ({
   }, [annotations, data, scale, currentId]);
 
   useEffect(() => {
-    const md = new MobileDetect(window.navigator.userAgent);
-
     if (isActive) {
       document.addEventListener('mousedown', handleDown);
       document.addEventListener('mousemove', handleMove);
       document.addEventListener('mouseup', handleUp);
       document.addEventListener('selectstart', handleSelectStart);
-      if (md.mobile() || md.tablet()) {
-        document.addEventListener('touchstart', handleDown);
-        document.addEventListener('touchmove', handleMove);
-        document.addEventListener('touchend', handleUp);
-        document.addEventListener('selectionchange', handleSelectChange);
-      }
+      document.addEventListener('touchstart', handleDown);
+      document.addEventListener('touchmove', handleMove);
+      document.addEventListener('touchend', handleUp);
+      document.addEventListener('selectionchange', handleSelectChange);
     } else if (textLayer) {
       textLayer.style.zIndex = '0';
     }
@@ -148,12 +143,10 @@ const HighlightTools: React.FC<Props> = ({
       document.removeEventListener('mousemove', handleMove);
       document.removeEventListener('mouseup', handleUp);
       document.removeEventListener('selectstart', handleSelectStart);
-      if (md.mobile() || md.tablet()) {
-        document.removeEventListener('touchstart', handleDown);
-        document.removeEventListener('touchmove', handleMove);
-        document.removeEventListener('touchend', handleUp);
-        document.removeEventListener('selectionchange', handleSelectChange);
-      }
+      document.removeEventListener('touchstart', handleDown);
+      document.removeEventListener('touchmove', handleMove);
+      document.removeEventListener('touchend', handleUp);
+      document.removeEventListener('selectionchange', handleSelectChange);
     };
   }, [isActive, handleUp, handleSelectChange]);
 

containers/ShapeTool.tsx

@@ -79,7 +79,7 @@ const ShapeTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
     }
   };
 
-  const handleMouseDown = (event: MouseEvent): void => {
+  const handleMouseDown = (event: MouseEvent | TouchEvent): void => {
     switchPdfViewerScrollState('hidden');
 
     const pageEle = (event.target as HTMLElement).parentNode as HTMLElement;
@@ -140,12 +140,16 @@ const ShapeTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
     const pdfViewer = document.getElementById('pdf_viewer') as HTMLDivElement;
     pdfViewer.addEventListener('mousedown', handleMouseDown);
     pdfViewer.addEventListener('mouseup', handleMouseUp);
+    pdfViewer.addEventListener('touchstart', handleMouseDown);
+    pdfViewer.addEventListener('touchend', handleMouseUp);
   };
 
   const unsubscribeEvent = (): void => {
     const pdfViewer = document.getElementById('pdf_viewer') as HTMLDivElement;
     pdfViewer.removeEventListener('mousedown', handleMouseDown);
     pdfViewer.removeEventListener('mouseup', handleMouseUp);
+    pdfViewer.removeEventListener('touchstart', handleMouseDown);
+    pdfViewer.removeEventListener('touchend', handleMouseUp);
   };
 
   useEffect(() => {

hooks/useCursorPosition.ts

@@ -1,7 +1,6 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { fromEvent, Subscription } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
-import MobileDetect from 'mobile-detect';
 
 import { getAbsoluteCoordinate } from '../helpers/position';
 
@@ -84,8 +83,6 @@ const useCursorPosition: UseCursorPositionType = (time = defaultTime) => {
   );
 
   useEffect(() => {
-    const md = new MobileDetect(window.navigator.userAgent);
-
     let mouseSubscription: Subscription | null = null;
     let touchSubscription: Subscription | null = null;
 
@@ -121,38 +118,33 @@ const useCursorPosition: UseCursorPositionType = (time = defaultTime) => {
     if (element) {
       const addEvent = element.addEventListener.bind(element);
 
-      if (md.mobile() || md.tablet()) {
-        touchSubscription = fromEvent(element, 'touchmove')
-          .pipe(throttleTime(time))
-          .subscribe(onTouchMoveEvent);
-
-        addEvent('touchstart', onTouch);
-        addEvent('touchend', onUp);
-      } else {
-        mouseSubscription = fromEvent(element, 'mousemove')
-          .pipe(throttleTime(time))
-          .subscribe(onMouseMoveEvent);
-
-        addEvent('mouseenter', onEnter);
-        addEvent('mouseleave', onLeave);
-        addEvent('mousedown', onDown);
-        addEvent('mouseup', onUp);
-      }
+      touchSubscription = fromEvent(element, 'touchmove')
+        .pipe(throttleTime(time))
+        .subscribe(onTouchMoveEvent);
+
+      addEvent('touchstart', onTouch);
+      addEvent('touchend', onUp);
+
+      mouseSubscription = fromEvent(element, 'mousemove')
+        .pipe(throttleTime(time))
+        .subscribe(onMouseMoveEvent);
+
+      addEvent('mouseenter', onEnter);
+      addEvent('mouseleave', onLeave);
+      addEvent('mousedown', onDown);
+      addEvent('mouseup', onUp);
     }
 
     return (): void => {
       if (element) {
         const removeEvent = element.removeEventListener.bind(element);
 
-        if (md.mobile() || md.tablet()) {
-          removeEvent('touchstart', onTouch);
-          removeEvent('touchend', onUp);
-        } else {
-          removeEvent('mouseenter', onEnter);
-          removeEvent('mouseleave', onLeave);
-          removeEvent('mousedown', onDown);
-          removeEvent('mouseup', onUp);
-        }
+        removeEvent('touchstart', onTouch);
+        removeEvent('touchend', onUp);
+        removeEvent('mouseenter', onEnter);
+        removeEvent('mouseleave', onLeave);
+        removeEvent('mousedown', onDown);
+        removeEvent('mouseup', onUp);
       }
     };
   }, [element]);

i18n.js

@@ -42,6 +42,9 @@ i18n
     interpolation: {
       escapeValue: false,
     },
+    react: {
+      useSuspense: false,
+    },
   });
 
 export default i18n;

package.json

@@ -30,7 +30,6 @@
     "i18next-browser-languagedetector": "^4.0.2",
     "i18next-http-backend": "^1.0.21",
     "lodash": "^4.17.15",
-    "mobile-detect": "^1.4.4",
     "next": "9.5.0",
     "next-i18next": "4.3.0",
     "pdfjs-dist": "2.4.456",

public/static/locales/en/sidebar.json

@@ -18,7 +18,7 @@
   "size": "Size",
   "align": "Align",
   "image": "Image",
-  "text": "Image",
+  "text": "Text",
   "type": "Type",
   "scale": "Scale",
   "rotate": "Rotate",

yarn.lock

@@ -6772,11 +6772,6 @@ mkdirp@0.x, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
-mobile-detect@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/mobile-detect/-/mobile-detect-1.4.4.tgz#686c74e92d3cc06b09a9b3594b7b981494b137f6"
-  integrity sha512-vTgEjKjS89C5yHL5qWPpT6BzKuOVqABp+A3Szpbx34pIy3sngxlGaFpgHhfj6fKze1w0QKeOSDbU7SKu7wDvRQ==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"