gist.jsx

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Raw, Editor } from 'slate'

const initialState = {
  nodes: [
    {
      kind: "block",
      type: "paragraph",
      nodes: [
        {
          kind: "text",
          text: "Example text that we want to linkify"
        }
      ]
    }
  ]
}

const schema = {
  nodes: {
    'link': (props) => { return <a>{props.children}</a> },
  }
}

class EscritorioEditor extends Component {
  constructor(props) {
    super(props)
    const editorState = Raw.deserialize(initialState, { terse: true })
    this.state = { editorState }
    this.onChange = (state) => this._onChange(state)
    this.wrapLink = (state) => this._wrapLink(state)
  }

  // On change, update the app's React state with the new editor state.
  _onChange(editorState) {
    this.setState({ editorState })
  }

  _wrapLink(e) {
    this.onChange(this.state.editorState.transform().wrapInline('link').moveForward(3).focus().apply())
  }

  render() {
    return (
      <div>
        <button onClick={this.wrapLink}>Wrap Link!</button>
        <div className="editable">
          <Editor
            schema={schema}
            state={this.state.editorState}
            onChange={this.onChange}
          >
          </Editor>
        </div> 
      </div>
    )
  }
}

const editorElement = document.getElementById('editor')

ReactDOM.render(
  <EscritorioEditor />,
  editorElement
);