diff --git a/examples/embeds/video.js b/examples/embeds/video.js index 1ef464667..dc73bf6a1 100644 --- a/examples/embeds/video.js +++ b/examples/embeds/video.js @@ -17,7 +17,7 @@ class Video extends React.Component { isSelected = () => { const { node, state } = this.props - const isSelected = state.selection.hasEdgeIn(node) + const isSelected = state.isFocused && state.blocks.includes(node) return isSelected } diff --git a/examples/images/index.js b/examples/images/index.js index 42bb129b4..9ad01cffc 100644 --- a/examples/images/index.js +++ b/examples/images/index.js @@ -28,7 +28,7 @@ const schema = { nodes: { image: (props) => { const { node, state } = props - const active = state.isFocused && state.selection.hasEdgeIn(node) + const active = state.isFocused && state.blocks.includes(node) const src = node.data.get('src') const className = active ? 'active' : null return ( diff --git a/src/components/node.js b/src/components/node.js index 23a1e3dd8..570354456 100644 --- a/src/components/node.js +++ b/src/components/node.js @@ -111,14 +111,18 @@ class Node extends React.Component { if (nextProps.node != props.node) return true // If the node is a block or inline, which can have custom renderers, we - // include an extra check to re-render if the node's focus changes, to make - // it simple for users to show a node's "selected" state. + // include an extra check to re-render if the node either becomes part of, + // or leaves, a selection. This is to make it simple for users to show a + // node's "selected" state. if (nextProps.node.kind != 'text') { - const hasEdgeIn = props.state.selection.hasEdgeIn(props.node) - const nextHasEdgeIn = nextProps.state.selection.hasEdgeIn(nextProps.node) - const hasFocus = props.state.isFocused || nextProps.state.isFocused - const hasEdge = hasEdgeIn || nextHasEdgeIn - if (hasFocus && hasEdge) return true + const nodes = `${props.node.kind}s` + const isInSelection = props.state[nodes].includes(props.node) + const nextIsInSelection = nextProps.state[nodes].includes(nextProps.node) + const hasFocus = props.state.isFocused + const nextHasFocus = nextProps.state.isFocused + const selectionChanged = isInSelection != nextIsInSelection + const focusChanged = hasFocus != nextHasFocus + if (selectionChanged || focusChanged) return true } // If the node is a text node, re-render if the current decorations have