PlainTextEditor.jsx

import { Editor } from 'slate-react';
import { toNumber } from 'lodash';
import Plain from 'slate-plain-serializer';
import PropTypes from 'prop-types';
import React from 'react';

class PlainTextEditor extends React.Component {
  static propTypes = {
    inline: PropTypes.bool,
    value: PropTypes.string,
    number: PropTypes.bool,
    placeholder: PropTypes.string,
    className: PropTypes.string,
    name: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
  };

  static defaultProps = {
    inline: true,
    value: '',
    number: false,
    placeholder: 'Enter text...',
    className: '',
  };

  constructor(props) {
    super(props);
    this.state = {
      value: Plain.deserialize(this.props.value),
    };
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.value !== nextProps.value) {
      console.log('value changed');
      // Is there anything I need to do here to prevent losing details such as cursor position?
      this.setState({
        value: Plain.deserialize(this.props.value),
      });
    }
  }

  _renderPlaceholder = params => {
    const { node, editor } = params;
    if (node.object !== 'block') return;
    // if (node.type !== 'caption') return;
    if (node.text !== '') return;
    // Since I am trying to use an inline text editor, I need the placeholder not to have width: 0
    return (
      <span
        contentEditable={false}
        style={{ display: 'inline-block', whiteSpace: 'nowrap', opacity: '0.33', pointerEvents: 'none' }}
      >
        {editor.props.placeholder}
      </span>
    );
  };

  _onChange = ({ value }) => {
    if (value.document !== this.state.value.document) {
      this.setState({ value }, () =>
        this.props.onChange(
          this.props.number ? toNumber(Plain.serialize(value)) : Plain.serialize(value),
          this.props.name,
        ),
      );
    }
  };

  render() {
    const WrapperEl = this.props.inline ? 'span' : 'div';
    return (
      <WrapperEl className={this.props.className}>
        <Editor
          placeholder={this.props.placeholder}
          value={this.state.value}
          renderPlaceholder={this._renderPlaceholder}
          onChange={this._onChange}
        />
      </WrapperEl>
    );
  }
}

export default PlainTextEditor;