text: import PlaceholderPlugin from 'slate-react-placeholder'
  import React from 'react'
  
  import DOMPlugin from './dom'
  import Content from '../components/content'
  import EVENT_HANDLERS from '../constants/event-handlers'
  
  /**
   * Props that can be defined by plugins.
   *
   * @type {Array}
   */
  
  const PROPS = [
    ...EVENT_HANDLERS,
    'commands',
    'decorateNode',
    'queries',
    'renderEditor',
    'renderMark',
    'renderNode',
    'schema',
  ]
  
  /**
   * A plugin that adds the React-specific rendering logic to the editor.
   *
   * @param {Object} options
   * @return {Object}
   */
  
  function ReactPlugin(options = {}) {
    const { placeholder, plugins = [] } = options
  
    /**
     * Decorate node.
     *
     * @param {Object} node
     * @param {Editor} editor
     * @param {Function} next
     * @return {Array}
     */
  
    function decorateNode(node, editor, next) {
      return []
    }
  
    /**
     * Render editor.
     *
     * @param {Object} props
     * @param {Editor} editor
     * @param {Function} next
     * @return {Element}
     */
  
    function renderEditor(props, editor, next) {
      return (
        <Content
          autoCorrect={props.autoCorrect}
          className={props.className}
          editor={editor}
          id={props.id}
          onEvent={(handler, event) => editor.run(handler, event)}
          readOnly={props.readOnly}
          role={props.role}
          spellCheck={props.spellCheck}
          style={props.style}
          tabIndex={props.tabIndex}
          tagName={props.tagName}
        />
      )
    }
  
    /**
     * Render node.
     *
     * @param {Object} props
     * @param {Editor} editor
     * @param {Function} next
     * @return {Element}
     */
  
    function renderNode(props, editor, next) {
      const { attributes, children, node } = props
      const { object } = node
      if (object !== 'block' && object !== 'inline') return null
  
      const Tag = object === 'block' ? 'div' : 'span'
      const style = { position: 'relative' }
      return (
        <Tag {...attributes} style={style}>
          {children}
        </Tag>
      )
    }
  
    /**
     * Return the plugins.
     *
     * @type {Array}
     */
  
    const ret = []
    const editorPlugin = PROPS.reduce((memo, prop) => {
      if (prop in options) memo[prop] = options[prop]
      return memo
    }, {})
  
    ret.push(
      DOMPlugin({
        plugins: [editorPlugin, ...plugins],
      })
    )
  
    if (placeholder) {
      ret.push(
        PlaceholderPlugin({
          placeholder,
          when: (editor, node) =>
            node.object === 'document' &&
            node.text === '' &&
            node.nodes.size === 1 &&
            node.getTexts().size === 1,
        })
      )
    }
  
    ret.push({
      decorateNode,
      renderEditor,
      renderNode,
    })
  
    return ret
  }
  
  /**
   * Export.
   *
   * @type {Function}
   */
  
  export default ReactPlugin
  