Uncaught DOMException: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.

Bug report/question

It’s a bug, or I might have made an error in my implementation during upgrade to slate@0.27.0 and slate-react@0.4.0

Tested on Chrome 61 macOS 10.12.6 with React16.

Current behaviour:

In my implementation everything works fine in the editor (I’m ignoring depreciation warnings for now) until I add an image to the document.

This is the code snippet that handles inserting images (done when clicking on one of the images in the grid) to the document:

handleImageSuggestion = src => {
    const { state, editor, node } = this.props
    const resolvedState = state
      .change()
      .insertBlock({
        type: "image",
        isVoid: true,
        data: { src }
      })
      // remove docket
      .state.change()
      .removeNodeByKey(node.key)
    this.suggestionHandlerTimeout = setTimeout(() => {
      editor.onChange(resolvedState)
    }, 10)
  }

Error stack printout:

content.js:167 Uncaught DOMException: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.
    at Content._this.updateSelection (http://localhost:3000/static/js/12.chunk.js:21531:28)
    at Content._this.componentDidUpdate (http://localhost:3000/static/js/12.chunk.js:21504:13)
    at commitLifeCycles (http://localhost:3000/static/js/bundle.js:27565:24)
    at commitAllLifeCycles (http://localhost:3000/static/js/bundle.js:28342:9)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:17347:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:17386:16)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:17243:27)
    at commitAllWork (http://localhost:3000/static/js/bundle.js:28463:9)
    at workLoop (http://localhost:3000/static/js/bundle.js:28735:13)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:17347:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:17386:16)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:17243:27)
    at performWork (http://localhost:3000/static/js/bundle.js:28848:7)
    at batchedUpdates (http://localhost:3000/static/js/bundle.js:29292:9)
    at performFiberBatchedUpdates (http://localhost:3000/static/js/bundle.js:17694:10)
    at stackBatchedUpdates (http://localhost:3000/static/js/bundle.js:17685:10)
    at batchedUpdates (http://localhost:3000/static/js/bundle.js:17699:10)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (http://localhost:3000/static/js/bundle.js:17712:12)
    at dispatchEvent (http://localhost:3000/static/js/bundle.js:17922:30)
Content._this.updateSelection @ content.js:167
Content._this.componentDidUpdate @ content.js:140
commitLifeCycles @ react-dom.development.js:11517
commitAllLifeCycles @ react-dom.development.js:12294
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
commitAllWork @ react-dom.development.js:12415
workLoop @ react-dom.development.js:12687
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
batchedUpdates @ react-dom.development.js:13244
performFiberBatchedUpdates @ react-dom.development.js:1646
stackBatchedUpdates @ react-dom.development.js:1637
batchedUpdates @ react-dom.development.js:1651
batchedUpdatesWithControlledComponents @ react-dom.development.js:1664
dispatchEvent @ react-dom.development.js:1874
proxyConsole.js:54 The above error occurred in the <Content> component:
    in Content (created by Editor)
    in Editor (at index.js:95)
    in div (at index.js:90)
    in _class (at index.js:25)
    in section (created by styled.section)
    in styled.section (at index.js:24)
    in div (at index.js:18)
    in Unknown (at Composer.js:38)
    in article (created by styled.article)
    in styled.article (at Composer.js:31)
    in Unknown (created by LoadableComponent)
    in LoadableComponent (created by Route)
    in Route (at AppRoutesSubmit.js:30)
    in Switch (at AppRoutesSubmit.js:28)
    in Unknown (created by LoadableComponent)
    in LoadableComponent (created by Route)
    in Route (at AppRoutes.js:87)
    in Switch (at AppRoutes.js:59)
    in main (at AppRoutes.js:58)
    in Unknown (at index.js:130)
    in div (at index.js:128)
    in App (created by Connect(App))
    in Connect(App) (created by Route)
    in Route (created by withRouter(Connect(App)))
    in withRouter(Connect(App)) (at index.js:32)
    in div (created by styled.div)
    in styled.div (at index.js:22)
    in ThemeProvider (at index.js:21)
    in Unknown (at index.js:27)
    in Router (created by BrowserRouter)
    in BrowserRouter (at index.js:26)
    in Provider (at index.js:25)

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.

[emraa]

Our team member managed to solve a similar issue (for us) with fix in this PR: https://github.com/ianstormtaylor/slate/pull/2920

Does this help others with their issues?

If possible, would maintainers have a time to review it?

[brendancarney]

I’m seeing this in my editor currently. It appears to happen when this block is executed: https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/components/content.js#L193-L196, and then throws here: https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/components/content.js#L200.

I can recreate it consistently and am working on a fix.