mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-11 09:43:58 +02:00
fix dom selection normalizing for void nodes
This commit is contained in:
@@ -9,6 +9,18 @@ import React from 'react'
|
|||||||
|
|
||||||
class Video extends React.Component {
|
class Video extends React.Component {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check if the node is selected.
|
||||||
|
*
|
||||||
|
* @return {Boolean}
|
||||||
|
*/
|
||||||
|
|
||||||
|
isSelected = () => {
|
||||||
|
const { node, state } = this.props
|
||||||
|
const isSelected = state.selection.hasEdgeIn(node)
|
||||||
|
return isSelected
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* When the input text changes, update the `video` data on the node.
|
* When the input text changes, update the `video` data on the node.
|
||||||
*
|
*
|
||||||
@@ -65,11 +77,26 @@ class Video extends React.Component {
|
|||||||
|
|
||||||
renderVideo = () => {
|
renderVideo = () => {
|
||||||
const video = this.props.node.data.get('video')
|
const video = this.props.node.data.get('video')
|
||||||
|
const isSelected = this.isSelected()
|
||||||
|
|
||||||
const wrapperStyle = {
|
const wrapperStyle = {
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
paddingBottom: '66.66%',
|
paddingBottom: '66.66%',
|
||||||
paddingTop: '25px',
|
paddingTop: '25px',
|
||||||
height: '0'
|
height: '0',
|
||||||
|
outline: isSelected ? '2px solid blue' : 'none',
|
||||||
|
}
|
||||||
|
|
||||||
|
const maskStyle = {
|
||||||
|
display: isSelected ? 'none' : 'block',
|
||||||
|
position: 'absolute',
|
||||||
|
top: '0px',
|
||||||
|
left: '0px',
|
||||||
|
right: '0px',
|
||||||
|
bottom: '0px',
|
||||||
|
height: '100%',
|
||||||
|
cursor: 'cell',
|
||||||
|
zIndex: 1,
|
||||||
}
|
}
|
||||||
|
|
||||||
const iframeStyle = {
|
const iframeStyle = {
|
||||||
@@ -77,11 +104,12 @@ class Video extends React.Component {
|
|||||||
top: '0px',
|
top: '0px',
|
||||||
left: '0px',
|
left: '0px',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
height: '100%'
|
height: '100%',
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={wrapperStyle}>
|
<div style={wrapperStyle}>
|
||||||
|
<div style={maskStyle} />
|
||||||
<iframe
|
<iframe
|
||||||
id="ytplayer"
|
id="ytplayer"
|
||||||
type="text/html"
|
type="text/html"
|
||||||
|
@@ -10,8 +10,8 @@
|
|||||||
|
|
||||||
function normalizeNodeAndOffset(node, offset) {
|
function normalizeNodeAndOffset(node, offset) {
|
||||||
// If it's an element node, its offset refers to the index of its children
|
// If it's an element node, its offset refers to the index of its children
|
||||||
// including comment nodes, so convert it to a text equivalent.
|
// including comment nodes, so try to find the right text child node.
|
||||||
if (node.nodeType == 1) {
|
if (node.nodeType == 1 && node.childNodes.length) {
|
||||||
const isLast = offset == node.childNodes.length
|
const isLast = offset == node.childNodes.length
|
||||||
const direction = isLast ? 'backward' : 'forward'
|
const direction = isLast ? 'backward' : 'forward'
|
||||||
const index = isLast ? offset - 1 : offset
|
const index = isLast ? offset - 1 : offset
|
||||||
|
Reference in New Issue
Block a user