iDevice sniff for fixed menu #69

src/ed.css

@@ -91,7 +91,7 @@ blockquote > * {
 }
 
 .ProseMirror-menubar {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;

src/ed.js

@@ -25,7 +25,7 @@ import {inlineMenu, blockMenu, barMenu} from './menu/ed-menu'
 import PluginWidget from './plugins/widget.js'
 import ShareUrl from './plugins/share-url'
 import TapAddText from './plugins/tap-add-text'
-import FixedHack from './plugins/fixed-hack'
+import FixedMenuBarHack from './plugins/fixed-hack'
 
 function noop () { /* noop */ }
 
@@ -103,7 +103,7 @@ export default class Ed {
     this.pluginContainer.className = 'EdPlugins'
     this.container.appendChild(this.pluginContainer)
 
-    let plugins = [PluginWidget, ShareUrl, TapAddText, FixedHack]
+    let plugins = [PluginWidget, ShareUrl, TapAddText, FixedMenuBarHack]
     this.plugins = plugins.map((Plugin) => new Plugin(this))
   }
   teardown () {

src/plugins/fixed-hack.js

@@ -1,24 +1,48 @@
+import {UpdateScheduler} from 'prosemirror/src/ui/update'
 import _ from '../util/lodash'
 
 function onScroll (event) {
-  const menu = document.querySelector('.ProseMirror-menubar')
-  if (menu) {
-    menu.style.top = window.scrollY + 'px'
-    const menuHeight = menu.style.minHeight
-    if (menuHeight) {
-      const content = document.querySelector('.ProseMirror-content')
-      content.style.paddingTop = menuHeight
-    }
+  this.menuEl.style.top = window.scrollY + 'px'
+}
+
+function spaceContent () {
+  const menuHeight = this.menuEl.style.minHeight
+  if (this.menuHeight !== menuHeight) {
+    this.menuHeight = menuHeight
+    this.contentEl.style.paddingTop = menuHeight
   }
 }
 
-export default class ShareUrl {
+export default class FixedMenuBarHack {
   constructor (ed) {
+    this.menuEl = document.querySelector('.ProseMirror-menubar')
+    if (!this.menuEl) {
+      return
+    }
+    this.contentEl = document.querySelector('.ProseMirror-content')
+
+    // Padding for all
+    this.spaceContent = _.debounce(spaceContent, 50).bind(this)
+    this.updater = new UpdateScheduler(ed.pm, 'selectionChange activeMarkChange commandsChanged', this.spaceContent)
+    this.updater.force()
+
+    // Fake fixed for iOS
+    const isIOS = /iP(ad|hone|od)/.test(navigator.userAgent)
+    if (!isIOS) {
+      return
+    }
+    this.menuEl.style.position = 'absolute'
     this.onScroll = _.debounce(onScroll, 50).bind(this)
     this.ed = ed
     window.addEventListener('scroll', this.onScroll)
   }
   teardown () {
+    if (!this.menuEl) {
+      return
+    }
+    this.menuEl.style.position = 'fixed'
+    this.menuEl.style.top = '0px'
     window.removeEventListener('scroll', this.onScroll)
+    this.updater.detach()
   }
 }