diff --git a/examples/embeds/video.js b/examples/embeds/video.js index c09b86398..3c9feace7 100644 --- a/examples/embeds/video.js +++ b/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 ( ) } diff --git a/packages/slate-react/src/components/void.js b/packages/slate-react/src/components/void.js index 2b795a310..0a1b964c7 100644 --- a/packages/slate-react/src/components/void.js +++ b/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 ( {this.renderSpacer()} - + {children} @@ -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' diff --git a/packages/slate-react/test/rendering/fixtures/custom-block-void.js b/packages/slate-react/test/rendering/fixtures/custom-block-void.js index e1236bac3..dfd606d30 100644 --- a/packages/slate-react/test/rendering/fixtures/custom-block-void.js +++ b/packages/slate-react/test/rendering/fixtures/custom-block-void.js @@ -23,13 +23,13 @@ export const state = ( export const output = `
-
- +
+ -
+