Slate Example

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

by yeuem1vannam

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 initialValue = Value.fromJSON({
  "object": "value",
  "document": {
    "object": "document",
    "data": {},
    "nodes": [
      {
        "object": "block",
        "type": "paragraph",
        "isVoid": false,
        "data": {},
        "nodes": [
          {
            "object": "text",
            "leaves": [
              {
                "object": "leaf",
                "text": "Brown ",
                "marks": []
              }
            ]
          },
          {
            "object": "inline",
            "type": "inline-input",
            "isVoid": false,
            "data": {
              "text": ""
            },
            "nodes": [
              {
                "object": "text",
                "leaves": [
                  {
                    "object": "leaf",
                    "text": " ",
                    "marks": []
                  }
                ]
              }
            ]
          },
          {
            "object": "text",
            "leaves": [
              {
                "object": "leaf",
                "text": " jumps over the lazy dog",
                "marks": []
              }
            ]
          }
        ]
      }
    ]
  }
})

function InlineInput (props) {
  return (
    <span
      style={{border: '1px solid black', width: '1.5em', height: '1.5em', lineHeight: '1.5em', display: 'inline-block'}}
      {...props.attributes}
    >
      {props.children}
    </span>
  )
}

class MyEditor extends React.Component {

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

  onChange({ value }) {
    this.setState({ value })
  }
  
  onInsertInlineInput = () => {
    const { value } = this.state;
    const change = value.change();
    change.insertInline({
      type: 'inline-input',
      isVoid: false,
     ...