Mobile support

.babelrc

@@ -1,4 +1,4 @@
 {
-  "presets": ["env", "flow"],
-  "plugins": ["babel-plugin-transform-class-properties"]
-}
+  "presets": ["@babel/preset-env", "@babel/preset-flow"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

.eslintrc

@@ -1,17 +1,18 @@
 {
+  "parser": "@babel/eslint-parser",
   "extends": [
     "airbnb-base",
     "plugin:flowtype/recommended"
   ],
-  "plugins": [
-    "flowtype"
-  ],
+  "plugins": ["flowtype"],
   "env": {
     "browser": true
   },
   "rules": {
+    "arrow-parens": 0,
+    "lines-between-class-members": 0,
     "class-methods-use-this": 0,
-    "no-console": 0,
+    "no-console": 1,
     "no-mixed-operators": 0,
     "no-restricted-syntax": [
       "error",

index.d.ts

@@ -99,7 +99,7 @@ export class IframeVideoSpec extends UnclickableBlotSpec {
 
 export class ImageSpec extends BlotSpec {
     img?: HTMLElement;
-    onClick: ((event: MouseEvent) => void);
+    onClick: ((event: PointerEvent) => void);
 
     constructor(formatter: BlotFormatter);
 
@@ -172,8 +172,8 @@ export class ResizeAction extends Action {
     dragStartX: number;
     preDragWidth: number;
     targetRatio: number;
-    onMouseDown: ((event: MouseEvent) => void);
-    onDrag: ((event: MouseEvent) => void);
+    onMouseDown: ((event: PointerEvent) => void);
+    onDrag: ((event: PointerEvent) => void);
     onMouseUp: (() => void);
 
     createHandle(position: string, cursor: string): HTMLElement;

package.json

@@ -30,38 +30,40 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "deepmerge": "^2.0.0"
+    "deepmerge": "^2.0.0",
+    "webpack": "^5.20.2",
+    "webpack-cli": "^4.5.0"
   },
   "peerDependencies": {
     "quill": "^1.3.4"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-eslint": "^8.0.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-flow": "^6.23.0",
-    "copyfiles": "^1.2.0",
-    "eslint": "^4.9.0",
-    "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-plugin-flowtype": "^2.39.1",
-    "eslint-plugin-import": "^2.7.0",
-    "flow-bin": "^0.57.3",
-    "flow-copy-source": "^1.2.1",
-    "npm-run-all": "^4.1.2",
-    "quill": "^1.3.4",
-    "rimraf": "^2.6.2",
-    "webpack": "^3.8.1"
+    "@babel/cli": "^7.12.13",
+    "@babel/core": "^7.12.13",
+    "@babel/eslint-parser": "^7.12.13",
+    "@babel/plugin-proposal-class-properties": "^7.12.13",
+    "@babel/preset-env": "^7.12.13",
+    "@babel/preset-flow": "^7.12.13",
+    "copyfiles": "^2.4.1",
+    "eslint": "^7.19.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "flow-bin": "^0.144.0",
+    "flow-copy-source": "^2.0.9",
+    "npm-run-all": "^4.1.5",
+    "quill": "^1.3.7",
+    "rimraf": "^3.0.2"
   },
   "scripts": {
     "build": "yarn clean && yarn build:babel && yarn build:webpack && yarn build:copy-flow-source && yarn build:copy-ts-defs",
-    "build:babel": "babel src/ --out-dir dist",
+    "build:babel": "babel src/ -d dist",
     "build:copy-flow-source": "flow-copy-source --verbose src dist",
     "build:copy-ts-defs": "copyfiles index.d.ts dist",
     "build:webpack": "webpack -p --progress --colors",
     "clean": "rimraf dist",
-    "dev:babel": "babel --watch src/ --out-dir dist",
-    "dev:webpack": "yarn dev:delay && webpack --progress --colors --watch",
+    "dev:babel": "babel --watch src/ -d dist",
+    "dev:webpack": "yarn dev:delay && webpack --progress --color --watch",
     "dev:delay": "node -e \"setTimeout(() => {}, 3000)\"",
     "prepublishOnly": "yarn build",
     "start": "yarn clean && yarn npm-run-all --race --parallel dev:babel dev:webpack"

src/BlotFormatter.js

@@ -116,7 +116,7 @@ export default class BlotFormatter {
     });
   }
 
-  onClick = () => {
+  onClick: () => void = () => {
     this.hide();
   }
 }

src/Options.js

@@ -15,7 +15,7 @@ export type ResizeOptions = {
   // class name applied to the resize handles
   handleClassName: string,
   // style applied to resize handles, or null to prevent styles
-  handleStyle: ?{},
+  handleStyle: ?{ width: string, height: string },
 };
 
 export type AlignOptions = {
@@ -142,12 +142,14 @@ const DefaultOptions: Options = {
     handleClassName: 'blot-formatter__resize-handle',
     handleStyle: {
       position: 'absolute',
-      height: '12px',
-      width: '12px',
+      height: '24px',
+      width: '24px',
+      borderRadius: '50%',
       backgroundColor: 'white',
-      border: '1px solid #777',
+      border: '3px solid #ccc',
       boxSizing: 'border-box',
       opacity: '0.80',
+      touchAction: 'none',
     },
   },
 };

src/actions/DeleteAction.js

@@ -14,7 +14,7 @@ export default class DeleteAction extends Action {
     this.formatter.quill.root.removeEventListener('input', this.onKeyUp);
   }
 
-  onKeyUp = (e: KeyboardEvent) => {
+  onKeyUp: (ev: KeyboardEvent) => void = (e: KeyboardEvent) => {
     if (!this.formatter.currentSpec) {
       return;
     }

src/actions/ResizeAction.js

@@ -52,12 +52,13 @@ export default class ResizeAction extends Action {
       Object.assign(box.style, this.formatter.options.resize.handleStyle);
     }
 
-    box.addEventListener('mousedown', this.onMouseDown);
+    box.addEventListener('dragstart', () => false);
+    box.addEventListener('pointerdown', this.onMouseDown, false);
 
     return box;
   }
 
-  repositionHandles(handleStyle: ?{}) {
+  repositionHandles(handleStyle: ?{ width: string, height: string }) {
     let handleXOffset = '0px';
     let handleYOffset = '0px';
     if (handleStyle) {
@@ -88,7 +89,7 @@ export default class ResizeAction extends Action {
     }
   }
 
-  onMouseDown = (event: MouseEvent) => {
+  onMouseDown: (ev: PointerEvent) => void = (event: PointerEvent) => {
     if (!(event.target instanceof HTMLElement)) {
       return;
     }
@@ -110,11 +111,11 @@ export default class ResizeAction extends Action {
     this.preDragWidth = rect.width;
     this.targetRatio = rect.height / rect.width;
 
-    document.addEventListener('mousemove', this.onDrag);
-    document.addEventListener('mouseup', this.onMouseUp);
+    document.addEventListener('pointermove', this.onDrag);
+    document.addEventListener('pointerup', this.onMouseUp);
   };
 
-  onDrag = (event: MouseEvent) => {
+  onDrag: (ev: PointerEvent) => void = (event: PointerEvent) => {
     if (!this.formatter.currentSpec) {
       return;
     }
@@ -141,9 +142,9 @@ export default class ResizeAction extends Action {
     this.formatter.update();
   };
 
-  onMouseUp = () => {
+  onMouseUp: () => void = () => {
     this.setCursor('');
-    document.removeEventListener('mousemove', this.onDrag);
-    document.removeEventListener('mouseup', this.onMouseUp);
+    document.removeEventListener('pointermove', this.onDrag);
+    document.removeEventListener('pointerup', this.onMouseUp);
   };
 }

src/actions/align/DefaultToolbar.js

@@ -29,7 +29,7 @@ export default class DefaultToolbar implements Toolbar {
     this.buttons = [];
   }
 
-  getElement() {
+  getElement(): ?HTMLElement {
     return this.toolbar;
   }
 

src/specs/ImageSpec.js

@@ -23,7 +23,7 @@ export default class ImageSpec extends BlotSpec {
     this.img = null;
   }
 
-  onClick = (event: MouseEvent) => {
+  onClick: (event: PointerEvent) => void = (event: PointerEvent) => {
     const el = event.target;
     if (!(el instanceof HTMLElement) || el.tagName !== 'IMG') {
       return;

src/specs/UnclickableBlotSpec.js

@@ -86,15 +86,15 @@ export default class UnclickableBlotSpec extends BlotSpec {
     );
   }
 
-  onTextChange = () => {
+  onTextChange: () => void = () => {
     Array.from(document.querySelectorAll(`${this.selector}:not([${MOUSE_ENTER_ATTRIBUTE}])`))
       .forEach((unclickable) => {
         unclickable.setAttribute(MOUSE_ENTER_ATTRIBUTE, 'true');
-        unclickable.addEventListener('mouseenter', this.onMouseEnter);
+        unclickable.addEventListener('pointerenter', this.onMouseEnter);
       });
   };
 
-  onMouseEnter = (event: MouseEvent) => {
+  onMouseEnter: (ev: PointerEvent) => void = (event: PointerEvent) => {
     const unclickable = event.target;
     if (!(unclickable instanceof HTMLElement)) {
       return;
@@ -104,7 +104,7 @@ export default class UnclickableBlotSpec extends BlotSpec {
     this.repositionProxyImage(this.nextUnclickable);
   }
 
-  onProxyImageClick = () => {
+  onProxyImageClick: () => void = () => {
     this.unclickable = this.nextUnclickable;
     this.nextUnclickable = null;
     this.formatter.show(this);