slate/examples/embeds/index.js

import { Editor, Raw } from '../..'
import React from 'react'
import ReactDOM from 'react-dom'
import Video from './video'
import initialState from './state.json'

/**
 * Define a set of node renderers.
 *
 * @type {Object}
 */

const NODES = {
  video: Video
}

/**
 * The images example.
 *
 * @type {Component}
 */

class Embeds extends React.Component {

  /**
   * Deserialize the raw initial state.
   *
   * @type {Object}
   */

  state = {
    state: Raw.deserialize(initialState, { terse: true })
  };

  /**
   * On change.
   *
   * @param {State} state
   */

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

  /**
   * Render the app.
   *
   * @return {Element} element
   */

  render = () => {
    return (
      <div className="editor">
        <Editor
          state={this.state.state}
          renderNode={this.renderNode}
          onChange={this.onChange}
        />
      </div>
    )
  }

  /**
   * Render a `node`.
   *
   * @param {Node} node
   * @return {Element}
   */

  renderNode = (node) => {
    return NODES[node.type]
  }

}

/**
 * Export.
 */

export default Embeds