diff --git a/examples/app.js b/examples/app.js index 1350f3373..d883ec3b0 100644 --- a/examples/app.js +++ b/examples/app.js @@ -102,14 +102,14 @@ const TabList = styled('div')` } ` -const Tab = styled(RouterLink)` +const Tab = styled(({ active, ...props }) => )` display: inline-block; margin-bottom: 0.2em; padding: 0.2em 0.5em; border-radius: 0.2em; text-decoration: none; - color: ${props => (props.active ? 'white' : '#777')}; - background: ${props => (props.active ? '#333' : 'transparent')}; + color: ${p => (p.active ? 'white' : '#777')}; + background: ${p => (p.active ? '#333' : 'transparent')}; &:hover { background: #333; diff --git a/packages/slate-react/src/plugins/after.js b/packages/slate-react/src/plugins/after.js index 370930fe4..f4d762f85 100644 --- a/packages/slate-react/src/plugins/after.js +++ b/packages/slate-react/src/plugins/after.js @@ -347,6 +347,7 @@ function AfterPlugin() { const entire = selection .moveAnchorTo(point.key, start) .moveFocusTo(point.key, end) + .normalize(document) // Change the current value to have the leaf's text replaced. change.insertTextAtRange(entire, textContent, leaf.marks).select(corrected) diff --git a/packages/slate-react/src/utils/find-range.js b/packages/slate-react/src/utils/find-range.js index 35d103217..adfe1733e 100644 --- a/packages/slate-react/src/utils/find-range.js +++ b/packages/slate-react/src/utils/find-range.js @@ -60,7 +60,7 @@ function findRange(native, value) { } } - const range = Range.create({ + let range = Range.create({ anchorKey: anchor.key, anchorOffset: anchor.offset, focusKey: focus.key, @@ -69,6 +69,7 @@ function findRange(native, value) { isFocused: true, }) + range = range.normalize(value.document) return range } diff --git a/packages/slate/src/changes/on-selection.js b/packages/slate/src/changes/on-selection.js index c553f112c..e75d3ea8b 100644 --- a/packages/slate/src/changes/on-selection.js +++ b/packages/slate/src/changes/on-selection.js @@ -1,3 +1,4 @@ +import { is } from 'immutable' import isEmpty from 'is-empty' import pick from 'lodash/pick' @@ -20,45 +21,48 @@ const Changes = {} Changes.select = (change, properties, options = {}) => { properties = Range.createProperties(properties) - const { snapshot = false } = options const { value } = change const { document, selection } = value const props = {} - const sel = selection.toJSON() const next = selection.merge(properties).normalize(document) + + // Re-compute the properties, to ensure that we get their normalized values. properties = pick(next, Object.keys(properties)) // Remove any properties that are already equal to the current selection. And // create a dictionary of the previous values for all of the properties that // are being changed, for the inverse operation. for (const k in properties) { - if (snapshot == false && properties[k] == sel[k]) continue - props[k] = properties[k] + if (snapshot === true || !is(properties[k], selection[k])) { + props[k] = properties[k] + } } // If the selection moves, clear any marks, unless the new selection // properties change the marks in some way. - const moved = ['anchorKey', 'anchorOffset', 'focusKey', 'focusOffset'].some( - p => props.hasOwnProperty(p) - ) - - if (sel.marks && properties.marks == sel.marks && moved) { + if ( + selection.marks && + !props.marks && + (props.hasOwnProperty('anchorKey') || + props.hasOwnProperty('anchorOffset') || + props.hasOwnProperty('focusKey') || + props.hasOwnProperty('focusOffset')) + ) { props.marks = null } - // If there are no new properties to set, abort. + // If there are no new properties to set, abort to avoid extra operations. if (isEmpty(props)) { return } - // Apply the operation. change.applyOperation( { type: 'set_selection', value, properties: props, - selection: sel, + selection: selection.toJSON(), }, snapshot ? { skip: false, merge: false } : {} )