Slate Example

A simple example showing how to use Slate in a JSFiddle.

HTML

<script src="https://npmcdn.com/[email protected]/umd/react.development.js"></script>
<script src="https://npmcdn.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://npmcdn.com/immutable/dist/immutable.js"></script>
<script src="https://npmcdn.com/slate/dist/slate.js"></script>
<script src="https://npmcdn.com/slate-base64-serializer/dist/slate-base64-serializer.js"></script>
<script src="https://npmcdn.com/slate-html-serializer/dist/slate-html-serializer.js"></script>
<script src="https://npmcdn.com/slate-hyperscript/dist/slate-hyperscript.js"></script>
<script src="https://npmcdn.com/slate-plain-serializer/dist/slate-plain-serializer.js"></script>
<script src="https://npmcdn.com/slate-prop-types/dist/slate-prop-types.js"></script>
<script src="https://npmcdn.com/slate-react/dist/slate-react.js"></script>
<script src="https://npmcdn.com/slate-simulator/dist/slate-simulator.js"></script>
<div id="main"></div>

Babel + JSX

// The packages & plugins are exposed as globals...
const { Value } = window.Slate.default
const { Editor } = window.SlateReact.default

const initialValueA = Value.fromJSON({
  document: {
    nodes: [
      {
        kind: 'block',
        type: 'paragraph',
        nodes: [
          {
            kind: 'text',
            leaves: [{ text: 'A line of text in a paragraph.' }]
          }
        ]
      }
    ]
  }
})
const initialValueB = Value.fromJSON({
  document: {
    nodes: [
      {
        kind: 'block',
        type: 'paragraph',
        nodes: [
          {
            kind: 'text',
            leaves: [{ text: 'Another line of text in a paragraph.' }]
          }
        ]
      }
    ]
  }
})

class MyEditor extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      valueA: initialValueA,
      valueB: initialValueB,
    }
  }

  onChangeA({ value }) {
    this.setState({ valueA: value })
  }
  onChangeB({ value }) {
    this.setState({ valueB: value })
  }

  render() {
    return (
      <div>
        <Editor
          placeholder="Enter some text1..."
          onChange={change => this.onChangeA(change)}
          value={this.state.valueA}
        />
        <Editor
          placeholder="Enter some text2..."
          onChange={change => this.onChangeB(change)}
          value={this.state.valueB}
        />
      </div>
    )
  }

}

ReactDOM.render(<MyEditor />, document.getElementById('main'))