Slate Example

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

HTML

<script src="https://npmcdn.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://npmcdn.com/react-dom@16.0.0/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 HtmlSerializer = window.SlateHtmlSerializer.default

// Rules
const BLOCK_TAGS = {
  blockquote: 'quote',
  p: 'paragraph',
  //div: 'div'
}

const rules = [
  {
    deserialize(el, next) {
      const type = BLOCK_TAGS[el.tagName.toLowerCase()]
      if (!type) return
      return {
        kind: 'block',
        type: type,
        nodes: next(el.childNodes)
      }
    }
  }
]

const pureHtml = '<blockquote><div>a text<blockquote>inner quote</blockquote></div></blockquote>'
const initialValue = new HtmlSerializer({ rules: rules }).deserialize(pureHtml);

class MyEditor extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      value: initialValue
    }
  }

  onChange({ value }) {
    this.setState({ value })
  }
  
  renderNode(props) {
  	switch (props.node.type) {
      case 'paragraph': return <p>{props.children}</p>
      case 'quote': return <blockquote>{props.children}</blockquote>
    }
  }

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

}

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