Slate Example

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

HTML

<script src="https://npmcdn.com/react/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom/dist/react-dom.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-auto-replace/dist/slate-auto-replace.js"></script>
<script src="https://npmcdn.com/slate-base64-serializer/dist/slate-base64-serializer.js"></script>
<script src="https://npmcdn.com/slate-collapse-on-escape/dist/slate-collapse-on-escape.js"></script>
<script src="https://npmcdn.com/slate-drop-or-paste-images/dist/slate-drop-or-paste-images.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-paste-linkify/dist/slate-paste-linkify.js"></script>
<script src="https://npmcdn.com/slate-prop-types/dist/slate-prop-types.js"></script>
<script src="https://npmcdn.com/slate-plain-serializer/dist/slate-plain-serializer.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>
<script src="https://npmcdn.com/slate-soft-break/dist/slate-soft-break.js"></script>
<div id="main"></div>

Babel + JSX

// The packages & plugins are exposed as globals...
const CollapseOnEscape = window.SlateCollapseOnEscape.default
const Plain = window.SlatePlainSerializer.default
const { Editor } = window.SlateReact.default

class MyEditor extends React.Component {

  constructor(props) {
    super(props)
    
    this.plugins = [
    	CollapseOnEscape(),
    ]
    
    this.state = {
      state: Plain.deserialize('A bit of content in a Slate editor.')
    }
  }

  onChange({ state }) {
    this.setState({ state })
  }

  render() {
    return (
      <Editor
        placeholder="Enter some text..."
        plugins={this.plugins}
        onChange={change => this.onChange(change)}
        state={this.state.state}
      />
    )
  }

}

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