Reshape void component structure. (#1104)

* Reshape void component structure.
Get rid of offscreen spacer.

* Polish Embeds example `Video` component.

* Fix oversight.

* Force spacer width to be 0.

* Update tests

examples/embeds/video.js

@@ -59,30 +59,22 @@ class Video extends React.Component {
 
     const wrapperStyle = {
       position: 'relative',
-      paddingBottom: '66.66%',
-      paddingTop: '25px',
-      height: '0',
       outline: isSelected ? '2px solid blue' : 'none',
     }
 
     const maskStyle = {
       display: isSelected ? 'none' : 'block',
       position: 'absolute',
-      top: '0px',
-      left: '0px',
-      right: '0px',
-      bottom: '0px',
+      top: '0',
+      left: '0',
       height: '100%',
+      width: '100%',
       cursor: 'cell',
       zIndex: 1,
     }
 
     const iframeStyle = {
-      position: 'absolute',
-      top: '0px',
-      left: '0px',
-      width: '100%',
-      height: '100%',
+      display: 'block'
     }
 
     return (
@@ -92,7 +84,7 @@ class Video extends React.Component {
           id="ytplayer"
           type="text/html"
           width="640"
-          height="390"
+          height="476"
           src={video}
           frameBorder="0"
           style={iframeStyle}
@@ -110,12 +102,17 @@ class Video extends React.Component {
   renderInput = () => {
     const { node } = this.props
     const video = node.data.get('video')
+    const style = {
+      marginTop: '5px',
+      boxSizing: 'border-box'
+    }
+
     return (
       <input
         value={video}
         onChange={this.onChange}
         onClick={this.onClick}
-        style={{ marginTop: '5px' }}
+        style={style}
       />
     )
   }

packages/slate-react/src/components/void.js

@@ -7,7 +7,6 @@ import { Mark } from 'slate'
 
 import Leaf from './leaf'
 import OffsetKey from '../utils/offset-key'
-import { IS_FIREFOX } from '../constants/environment'
 
 /**
  * Debug.
@@ -141,10 +140,12 @@ class Void extends React.Component {
     const { children, node } = props
     let Tag, style
 
-    // Make the outer wrapper relative, so the spacer can overlay it.
     if (node.kind === 'block') {
       Tag = 'div'
-      style = { position: 'relative' }
+      style = {
+        display: 'inline-block',
+        verticalAlign: 'top'
+      }
     } else {
       Tag = 'span'
     }
@@ -154,14 +155,13 @@ class Void extends React.Component {
     return (
       <Tag
         data-slate-void
-        style={style}
         onClick={this.onClick}
         onDragEnter={this.onDragEnter}
         onDragLeave={this.onDragLeave}
         onDrop={this.onDrop}
       >
         {this.renderSpacer()}
-        <Tag contentEditable={this.state.editable}>
+        <Tag contentEditable={this.state.editable} style={style}>
           {children}
         </Tag>
       </Tag>
@@ -182,20 +182,12 @@ class Void extends React.Component {
     let style
 
     if (node.kind == 'block') {
-      style = IS_FIREFOX
-        ? {
-          pointerEvents: 'none',
-          width: '0px',
-          height: '0px',
-          lineHeight: '0px',
-          visibility: 'hidden'
-        }
-        : {
-          position: 'absolute',
-          top: '0px',
-          left: '-9999px',
-          textIndent: '-9999px'
-        }
+      style = {
+        display: 'inline-block',
+        verticalAlign: 'top',
+        width: '0',
+        color: 'transparent'
+      }
     } else {
       style = {
         color: 'transparent'

packages/slate-react/test/rendering/fixtures/custom-block-void.js

@@ -23,13 +23,13 @@ export const state = (
 
 export const output = `
 <div data-slate-editor="true" contenteditable="true" role="textbox">
-  <div data-slate-void="true" style="position:relative;">
-    <span style="position:absolute;top:0px;left:-9999px;text-indent:-9999px;">
+  <div data-slate-void="true">
+    <span style="display:inline-block;vertical-align:top;width:0px;color:transparent;">
       <span>
         <span data-slate-zero-width="true">&#x200A;</span>
       </span>
     </span>
-    <div contenteditable="false">
+    <div contenteditable="false" style="display:inline-block;vertical-align:top;">
       <img src="https://example.com/image.png">
     </div>
   </div>