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

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>