mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-30 18:39:51 +02:00
Code Issues Releases Wiki Activity

Make sure nodes always know if they're selected (#1029)

Browse Source 
* Make sure nodes update when their selection change

(cherry picked from commit 3e8744409ea94554faafa1e72415cdfb54b4bc78)

* Update examples of showing selected blocks nodes
This commit is contained in:
Tobias Andersen
2017-09-06 18:07:46 +02:00
committed by Ian Storm Taylor
parent f0325a9afb
commit 7eed37164b
3 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/embeds/video.js
View File

@@ -17,7 +17,7 @@ class Video extends React.Component {
isSelected = () => { isSelected = () => {
const { node, state } = this.props const { node, state } = this.props
const isSelected = state.selection.hasEdgeIn(node) const isSelected = state.isFocused && state.blocks.includes(node)
return isSelected return isSelected
} }

2
examples/images/index.js
View File

@@ -28,7 +28,7 @@ const schema = {
nodes: { nodes: {
image: (props) => { image: (props) => {
const { node, state } = 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 src = node.data.get('src')
const className = active ? 'active' : null const className = active ? 'active' : null
return ( return (

18
src/components/node.js
View File

@@ -111,14 +111,18 @@ class Node extends React.Component {
if (nextProps.node != props.node) return true if (nextProps.node != props.node) return true
// If the node is a block or inline, which can have custom renderers, we // 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 // include an extra check to re-render if the node either becomes part of,
// it simple for users to show a node's "selected" state. // or leaves, a selection. This is to make it simple for users to show a
// node's "selected" state.
if (nextProps.node.kind != 'text') { if (nextProps.node.kind != 'text') {
const hasEdgeIn = props.state.selection.hasEdgeIn(props.node) const nodes = `${props.node.kind}s`
const nextHasEdgeIn = nextProps.state.selection.hasEdgeIn(nextProps.node) const isInSelection = props.state[nodes].includes(props.node)
const hasFocus = props.state.isFocused || nextProps.state.isFocused const nextIsInSelection = nextProps.state[nodes].includes(nextProps.node)
const hasEdge = hasEdgeIn || nextHasEdgeIn const hasFocus = props.state.isFocused
if (hasFocus && hasEdge) return true 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 // If the node is a text node, re-render if the current decorations have