From cd55e3d1b982cef46441f3188bbd668035fd8985 Mon Sep 17 00:00:00 2001 From: Forrest Oliphant Date: Thu, 24 Mar 2016 15:15:26 -0400 Subject: [PATCH] WIP ;_; --- src/components/credit-add.js | 2 +- src/components/dropdown-group.js | 3 +- src/components/editable.js | 6 ++-- src/components/textarea-autosize.js | 15 +++++++-- src/ed.js | 3 ++ src/plugins/widget-base.js | 44 ++++++++------------------ src/plugins/widget-iframe.js | 10 ++++-- src/plugins/widget.js | 48 ++++++----------------------- 8 files changed, 51 insertions(+), 80 deletions(-) diff --git a/src/components/credit-add.js b/src/components/credit-add.js index eb6fc8d..fcd7a80 100644 --- a/src/components/credit-add.js +++ b/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) } } diff --git a/src/components/dropdown-group.js b/src/components/dropdown-group.js index e29592d..9b95f68 100644 --- a/src/components/dropdown-group.js +++ b/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() } } } diff --git a/src/components/editable.js b/src/components/editable.js index c108584..847b638 100644 --- a/src/components/editable.js +++ b/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') } diff --git a/src/components/textarea-autosize.js b/src/components/textarea-autosize.js index 2fe178d..bfc419b 100644 --- a/src/components/textarea-autosize.js +++ b/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' diff --git a/src/ed.js b/src/ed.js index f0fc4cb..f4761c4 100644 --- a/src/ed.js +++ b/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 diff --git a/src/plugins/widget-base.js b/src/plugins/widget-base.js index 72fe8ec..ceff5c7 100644 --- a/src/plugins/widget-base.js +++ b/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() +} \ No newline at end of file diff --git a/src/plugins/widget-iframe.js b/src/plugins/widget-iframe.js index ba932a9..5f5c9f3 100644 --- a/src/plugins/widget-iframe.js +++ b/src/plugins/widget-iframe.js @@ -28,10 +28,11 @@ 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) { @@ -39,8 +40,13 @@ export default class WidgetIframe extends WidgetBase { } 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 } } diff --git a/src/plugins/widget.js b/src/plugins/widget.js index 9e2a2bf..01062a1 100644 --- a/src/plugins/widget.js +++ b/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,26 +47,6 @@ 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 @@ -80,7 +54,7 @@ function onDOMChanged () { } } -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: