Setting up Slate.js

Question

I am trying to set up a simple slate.js editor, with the following code:

import { Editor } from 'slate-react'
import { Value } from 'slate'

const initialValue = Value.fromJSON({
document: {
nodes: [
  {
    object: 'block',
    type: 'paragraph',
    nodes: [
      {
        object: 'text',
        leaves: [
          {
            text: 'A line of text in a paragraph.',
          },
        ],
      },
    ],
  },
],}, });
 // Define our app...
 class App extends React.Component {
 // Set the initial value when the app is first constructed.
 state = {
   value: initialValue,
 };
 // On change, update the app's React state with the new editor value.
 onChange = ({ value }) => {
   this.setState({ value })
  } // Render the editor.
    render() {
          return <Editor value={this.state.value} onChange={this.onChange} />
 }
}
 export default App

I simply copy pasted the code from the slate.js walkthorugh, but I get the following error:

./src/App.js
Syntax error: Unexpected character '​' (34:0)

  32 |     this.setState({ value })
  33 |   }
> 34 | ​
     | ^
  35 |   // Render the editor.
  36 |   render() {
  37 |     return <Editor value={this.state.value} onChange={this.onChange} />

It´s my first time both using react and slate, I just wanted to get a feel for it. I hope you can help me explaining whats wrong :)

Answer 1

I don't know if you've solved it already. But I just faced that problem, I think there's a leftover character from when you copied it from their documentation.

Try removing the whitespace completely between the end of the block and the comment and then add them to your liking again, it should work!