plugins/fixed-hack #69

src/ed.css

@@ -36,8 +36,8 @@ img {
 
 .ProseMirror-content {
   border: none;
-  margin: 3rem auto 0;
-  padding: 0 1rem;
+  margin: 0 auto;
+  padding: 3rem 1rem;
   white-space: pre-wrap;
   max-width: 800px;
 
@@ -91,7 +91,7 @@ blockquote > * {
 }
 
 .ProseMirror-menubar {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;

src/ed.js

@@ -25,6 +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'
 
 function noop () { /* noop */ }
 
@@ -102,7 +103,7 @@ export default class Ed {
     this.pluginContainer.className = 'EdPlugins'
     this.container.appendChild(this.pluginContainer)
 
-    let plugins = [PluginWidget, ShareUrl, TapAddText]
+    let plugins = [PluginWidget, ShareUrl, TapAddText, FixedHack]
     this.plugins = plugins.map((Plugin) => new Plugin(this))
   }
   teardown () {

src/plugins/fixed-hack.js

@@ -0,0 +1,24 @@
+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
+    }
+  }
+}
+
+export default class ShareUrl {
+  constructor (ed) {
+    this.onScroll = _.debounce(onScroll, 50).bind(this)
+    this.ed = ed
+    window.addEventListener('scroll', this.onScroll)
+  }
+  teardown () {
+    window.removeEventListener('scroll', this.onScroll)
+  }
+}