Slate: Slate vanishes with error: Unable to find DOM node...

Created on 8 Nov 2017  路  4Comments  路  Source: ianstormtaylor/slate

Do you want to request a feature or report a bug?

bug

What's the current behavior?

Implementing the Slate Text Editor inside an iframe, when calling this.setState({ value }) like on the following example the editor vanishes with the error message:
Uncaught Error: Unable to find a DOM node for "3". This is often because of forgetting to add 'props.attributes' to a custom component. But I don't have any custom component as you can see in the example:

class App extends React.Component {

  state = {
    value: initialValue
  }

  onChange = ({ value }) => {
    this.setState({ value })
  }

  render() {
    return (
      <Editor
        value={this.state.value}
        onChange={this.onChange}
      />
    )
  }

}

What's the expected behavior?

I was expecting the editor to call the function and deal with the result properly :)

Thank you! :)

Most helpful comment

We create a PR that solves this issue, for anyone interested in using it already we created an npm package with the name slate-react-iframe that already uses the solution replacing slate-react.

All 4 comments

Having the same problem after upgrading. was using react-frame-aware-selection-plugin before and it seems to no longer work. Any plans to support slate inside iframes out of the box? It's a fairly common use for styles encapsulation

I did have a use case for iframe and can confirm this is throwing the above issue.

Update: Sorry, I didn't face the same problem apparently. Please ignore my comment.

We create a PR that solves this issue, for anyone interested in using it already we created an npm package with the name slate-react-iframe that already uses the solution replacing slate-react.

Thank you @joaomlap! I can confirm this resolves the issue on my end.

Was this page helpful?
0 / 5 - 0 ratings