text: import { Editor } from 'slate-react'
  import { Value } from 'slate'
  
  import React from 'react'
  import initialValue from './value.json'
  
  /**
   * Emojis.
   *
   * @type {Array}
   */
  
  const EMOJIS = [
    '😃',
    '😬',
    '😂',
    '😅',
    '😆',
    '😍',
    '😱',
    '👋',
    '👏',
    '👍',
    '🙌',
    '👌',
    '🙏',
    '👻',
    '🍔',
    '🍑',
    '🍆',
    '🔑',
  ]
  
  /**
   * No ops.
   *
   * @type {Function}
   */
  
  const noop = e => e.preventDefault()
  
  /**
   * The links example.
   *
   * @type {Component}
   */
  
  class Emojis extends React.Component {
    /**
     * Deserialize the raw initial value.
     *
     * @type {Object}
     */
  
    state = {
      value: Value.fromJSON(initialValue),
    }
  
    /**
     * On change.
     *
     * @param {Change} change
     */
  
    onChange = ({ value }) => {
      this.setState({ value })
    }
  
    /**
     * When clicking a emoji, insert it
     *
     * @param {Event} e
     */
  
    onClickEmoji = (e, code) => {
      e.preventDefault()
      const { value } = this.state
      const change = value.change()
  
      change
        .insertInline({
          type: 'emoji',
          isVoid: true,
          data: { code },
        })
        .collapseToStartOfNextText()
        .focus()
  
      this.onChange(change)
    }
  
    /**
     * Render the app.
     *
     * @return {Element} element
     */
  
    render = () => {
      return (
        <div>
          {this.renderToolbar()}
          {this.renderEditor()}
        </div>
      )
    }
  
    /**
     * Render the toolbar.
     *
     * @return {Element} element
     */
  
    renderToolbar = () => {
      return (
        <div className="menu toolbar-menu">
          {EMOJIS.map((emoji, i) => {
            const onMouseDown = e => this.onClickEmoji(e, emoji)
            return (
              // eslint-disable-next-line react/jsx-no-bind
              <span key={i} className="button" onMouseDown={onMouseDown}>
                <span className="material-icons">{emoji}</span>
              </span>
            )
          })}
        </div>
      )
    }
  
    /**
     * Render the editor.
     *
     * @return {Element} element
     */
  
    renderEditor = () => {
      return (
        <div className="editor">
          <Editor
            placeholder="Write some 😍👋🎉..."
            value={this.state.value}
            onChange={this.onChange}
            renderNode={this.renderNode}
          />
        </div>
      )
    }
  
    /**
     * Render a Slate node.
     *
     * @param {Object} props
     * @return {Element}
     */
  
    renderNode = props => {
      const { attributes, children, node, isSelected } = props
  
      switch (node.type) {
        case 'paragraph': {
          return <p {...attributes}>{children}</p>
        }
        case 'emoji': {
          const { data } = node
          const code = data.get('code')
          return (
            <span
              className={`emoji ${isSelected ? 'selected' : ''}`}
              {...props.attributes}
              contentEditable={false}
              onDrop={noop}
            >
              {code}
            </span>
          )
        }
      }
    }
  }
  
  /**
   * Export.
   */
  
  export default Emojis
  