From 7eed37164b42babc58234b159f4b937f1d79586e Mon Sep 17 00:00:00 2001
From: Tobias Andersen <j.tobiasandersen@gmail.com>
Date: Wed, 6 Sep 2017 18:07:46 +0200
Subject: [PATCH] Make sure nodes always know if they're selected (#1029)

* Make sure nodes update when their selection change

(cherry picked from commit 3e8744409ea94554faafa1e72415cdfb54b4bc78)

* Update examples of showing selected blocks nodes
---
 examples/embeds/video.js |  2 +-
 examples/images/index.js |  2 +-
 src/components/node.js   | 18 +++++++++++-------
 3 files changed, 13 insertions(+), 9 deletions(-)

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