1
0
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:
Ian Storm Taylor
2016-12-02 17:01:08 -08:00
parent 6d576b0240
commit 0c12e95b21
2 changed files with 32 additions and 4 deletions

View File

@@ -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"

View File

@@ -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