WIP -- nix overlays

src/components/credit-add.js

@@ -40,7 +40,7 @@ function makeLink (key, label, onClick, theme = 'primary') {
 }
 
 function makeClick (key, onClick) {
-  return function () {
+  return function (event) {
     onClick(key)
   }
 }

src/components/dropdown-group.js

@@ -104,10 +104,11 @@ class DropdownGroup extends React.Component {
     )
   }
   makeOpenMenu (index) {
-    return () => {
+    return (event) => {
       const {openMenu} = this.state
       const toggleOrOpen = (openMenu === index ? null : index)
       this.setState({openMenu: toggleOrOpen})
+      event.stopPropagation()
     }
   }
 }

src/components/editable.js

@@ -100,10 +100,10 @@ class Editable extends React.Component {
   updatePlaceholderHeights (changes) {
     // Do this in a batch, with one widget remeasure/move
     for (let i = 0, len = changes.length; i < len; i++) {
-      const change = changes[i]
+      const {id, height} = changes[i]
       // TODO do this with standard pm.tr interface, not direct DOM
-      const placeholder = this.refs.mirror.querySelector(`.EdSchemaMedia[grid-id="${change.id}"]`)
-      placeholder.style.height = change.height + 'px'
+      const placeholder = this.refs.mirror.querySelector(`.EdSchemaMedia[grid-id="${id}"]`)
+      placeholder.style.height = height + 'px'
     }
     this.pm.signal('draw')
   }

src/components/textarea-autosize.js

@@ -3,13 +3,13 @@ import {sans} from './rebass-theme'
 
 const containerStyle =
   { fontFamily: sans
-  , fontSize: '50%'
+  , fontSize: 12
   , marginBottom: '1rem'
   }
 
 const areaStyle =
   { fontFamily: 'inherit'
-  , fontSize: '200%'
+  , fontSize: 18
   , lineHeight: 1.5
   , minHeight: '1.5rem'
   , display: 'block'
@@ -30,6 +30,9 @@ function resize () {
   textarea.style.height = textarea.scrollHeight + 'px'
 }
 
+function stopPropagation (event) {
+  event.stopPropagation()
+}
 
 class TextareaAutosize extends React.Component {
   constructor (props) {
@@ -55,7 +58,13 @@ class TextareaAutosize extends React.Component {
       , style: containerStyle
       }
     , el('label'
-      , {}
+      , { onClick: stopPropagation
+        , onMouseDown: stopPropagation
+        , onMouseUp: stopPropagation
+        , onKeyDown: stopPropagation
+        , onKeyUp: stopPropagation
+        , onKeyPress: stopPropagation
+        }
       , label
       , el('textarea'
         , { ref: 'textarea'

src/ed.js

@@ -365,6 +365,9 @@ function mergeContent (oldContent, newContent) {
 
 // Can't restore selection to a non-focuable (Media) div
 function fixSelection (selection, doc) {
+  if (!selection || !selection.anchor) {
+    return selection
+  }
   let index = selection.anchor.path[0]
   if (doc.content.content[index] && doc.content.content[index].type.contains !== null) {
     return selection

src/plugins/widget-base.js

@@ -6,41 +6,24 @@ export default class WidgetBase {
 
     // Cache these so we don't hit DOM unless needed
     this.shown = true
-    this.top = 0
-    this.left = 0
-    this.width = 1
-    this.height = 50
 
     // Base div container
     this.el = document.createElement('div')
-    this.el.setAttribute('grid-id', options.id)
     this.id = options.id
     this.initialBlock = options.initialBlock
-    this.el.style.position = 'absolute'
-    this.move(options.initialRectangle)
     options.widgetContainer.appendChild(this.el)
+
+    // Don't let contenteditable flow get events
+    this.el.addEventListener('mousedown', stopPropagation)
+    this.el.addEventListener('mouseup', stopPropagation)
+    this.el.addEventListener('click', stopPropagation)
+    this.el.addEventListener('keydown', stopPropagation)
+    this.el.addEventListener('keyup', stopPropagation)
+    this.el.addEventListener('keypress', stopPropagation)
   }
   teardown () {
     this.el.parentNode.removeChild(this.el)
   }
-  move (rectangle) {
-    if (this.top !== rectangle.top) {
-      this.el.style.top = rectangle.top + 'px'
-      this.top = rectangle.top
-    }
-    if (this.left !== rectangle.left) {
-      this.el.style.left = rectangle.left + 'px'
-      this.left = rectangle.left
-    }
-    if (this.width !== rectangle.width) {
-      this.el.style.width = rectangle.width + 'px'
-      this.width = rectangle.width
-    }
-    if (this.height !== rectangle.height) {
-      this.el.style.height = rectangle.height + 'px'
-      this.height = rectangle.height
-    }
-  }
   show () {
     if (!this.shown) {
       this.el.style.display = 'block'
@@ -53,10 +36,9 @@ export default class WidgetBase {
       this.shown = false
     }
   }
-  getHeight () {
-    if (this.el && this.el.firstChild) {
-      return this.el.firstChild.scrollHeight
-    }
-    return this.height
-  }
 }
+
+
+function stopPropagation (event) {
+  event.stopPropagation()
+}

src/plugins/widget-iframe.js

@@ -28,19 +28,25 @@ export default class WidgetIframe extends WidgetBase {
       this.initialBlock = options.initialBlock
       this.frame.addEventListener('load', this.postInitialBlock)
     }
+    this.frame.style.width = '100%'
     this.frame.src = this.src()
     this.el.appendChild(this.frame)
 
-    this.height = 100
+    this.setHeight(100)
   }
   teardown () {
     if (this.initialBlock) {
       this.frame.removeEventListener('load', this.postInitialBlock)
     }
     super.teardown()
   }
+  setHeight (height) {
+    if (this.height !== height) {
+      this.frame.style.height = `${height}px`
+      this.height = height
+    }
+  }
   getHeight () {
-    // Don't measure from outside: iframes report own height
     return this.height
   }
 }

src/plugins/widget.js

@@ -32,13 +32,7 @@ function onDOMChanged () {
       throw new Error('Bad placeholder!')
     }
     inDoc.push(id)
-    const rectangle =
-      { top: el.offsetTop
-      , left: el.offsetLeft
-      , width: el.offsetWidth
-      , height: el.offsetHeight
-      }
-    this.checkWidget(id, type, rectangle)
+    this.checkWidget(id, type, el)
   }
 
   // Hide or show widgets
@@ -53,34 +47,14 @@ function onDOMChanged () {
     }
   }
 
-  // Measure inner heights of widgets
-  let heightChanges = []
-  for (let i = 0, len = inDOM.length; i < len; i++) {
-    const id = inDOM[i]
-    const widget = this.widgets[id]
-    if (!widget.shown) continue
-    const innerHeight = widget.getHeight()
-    if (innerHeight !== widget.height) {
-      heightChanges.push(
-        { id: id
-        , height: innerHeight
-        }
-      )
-    }
-  }
-  if (heightChanges.length) {
-    // Will trigger a redraw / this onDOMChanged again
-    this.editableView.updatePlaceholderHeights(heightChanges)
-  }
-
   // Signal widgets initialized if first
   if (!this.initialized) {
     this.initialized = true
     this.ed.trigger('plugin.widget.initialized')
   }
 }
 
-function checkWidget (id, type, rectangle) {
+function checkWidget (id, type, el) {
   let widget = this.widgets[id]
   if (widget && widget.type !== type) {
     // Remove it
@@ -90,14 +64,14 @@ function checkWidget (id, type, rectangle) {
   }
   if (widget) {
     // Move it
-    widget.move(rectangle)
+    // widget.move(rectangle)
   } else {
     // Make it
-    this.initializeWidget(id, type, rectangle)
+    this.initializeWidget(id, type, el)
   }
 }
 
-function initializeWidget (id, type, rectangle) {
+function initializeWidget (id, type, containerEl) {
   let Widget = WidgetTypes[type] || WidgetTypes.react
 
   let initialBlock = this.ed.getBlock(id)
@@ -107,8 +81,7 @@ function initializeWidget (id, type, rectangle) {
     , id
     , type
     , initialBlock
-    , widgetContainer: this.el
-    , initialRectangle: rectangle
+    , widgetContainer: containerEl
     }
   )
 
@@ -129,12 +102,9 @@ function onIframeMessage (message) {
       this.ed.routeChange('MEDIA_BLOCK_UPDATE', block)
       break
     case 'height':
-      if (isNaN(message.data.payload)) throw new Error('Iframe height message with non-numeric payload')
-      this.editableView.updatePlaceholderHeights([
-        { id: message.data.id
-        , height: message.data.payload
-        }
-      ])
+      const height = message.data.payload
+      if (isNaN(height)) throw new Error('Iframe height message with non-numeric payload')
+      this.widgets[fromId].setHeight(height)
       break
     case 'cursor':
     default: