(core) Add support for editing on mobile.

Summary:
- Add custom handling for dblclick on mobile, to allow focusing editor.
- In place of Clipboard.js, use a FocusLayer with document.body as the default focus element.
- Set maximum-scale on iOS viewport to prevent auto-zoom.
- Reposition the editor on window resize when editing a cell, which is a normal
  occurrence on Android when virtual keyboard is shown.
- Add Save/Cancel icon-buttons next to cell editor on mobile.

Test Plan: Tested manually on Safari / FF on iPhone, and on Chrome on Android emulator.

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D2721

app/client/ui/App.ts

@@ -6,6 +6,7 @@ import * as commands from 'app/client/components/commands';
 import {unsavedChanges} from 'app/client/components/UnsavedChanges';
 import {get as getBrowserGlobals} from 'app/client/lib/browserGlobals';
 import {isDesktop} from 'app/client/lib/browserInfo';
+import {FocusLayer} from 'app/client/lib/FocusLayer';
 import * as koUtil from 'app/client/lib/koUtil';
 import {reportError, TopAppModel, TopAppModelImpl} from 'app/client/models/AppModel';
 import {setUpErrorHandling} from 'app/client/models/errors';
@@ -60,6 +61,18 @@ export class App extends DisposableWithEvents {
 
     if (isDesktop()) {
       this.autoDispose(Clipboard.create(this));
+    } else {
+      // On mobile, we do not want to keep focus on a special textarea (which would cause unwanted
+      // scrolling and showing of mobile keyboard). But we still rely on 'cliboard_focus' and
+      // 'clipboard_blur' events to know when the "app" has a focus (rather than a particular
+      // input), by making document.body focusable and using a FocusLayer with it as the default.
+      document.body.setAttribute('tabindex', '-1');
+      FocusLayer.create(this, {
+        defaultFocusElem: document.body,
+        allowFocus: Clipboard.allowFocus,
+        onDefaultFocus: () => this.trigger('clipboard_focus'),
+        onDefaultBlur: () => this.trigger('clipboard_blur'),
+      });
     }
 
     this.topAppModel = this.autoDispose(TopAppModelImpl.create(null, G.window));

app/client/ui/viewport.ts

@@ -1,3 +1,4 @@
+import {isIOS} from 'app/client/lib/browserInfo';
 import {localStorageBoolObs} from 'app/client/lib/localStorageObs';
 import {dom} from 'grainjs';
 
@@ -13,8 +14,12 @@ export function toggleViewport() {
 
 export function addViewportTag() {
   dom.update(document.head,
-    dom.maybe(viewportEnabled, () =>
-      dom('meta', {name: "viewport", content: "width=device-width,initial-scale=1.0"})
-    )
+    dom.maybe(viewportEnabled, () => {
+      // For the maximum-scale=1 advice, see https://stackoverflow.com/a/46254706/328565. On iOS,
+      // it prevents the auto-zoom when an input is focused, but does not prevent manual
+      // pinch-to-zoom. On Android, it's not needed, and would prevent manual zoom.
+      const viewportContent = "width=device-width,initial-scale=1.0" + (isIOS() ? ",maximum-scale=1" : "");
+      return dom('meta', {name: "viewport", content: viewportContent});
+    })
   );
 }