bmcmahen / react-wysiwyg

retain some control over contenteditable input
169 stars 37 forks source link

Error: traverseParentPath(…): Cannot traverse from and to the same ID, `` #43

Open saanderson1987 opened 6 years ago

saanderson1987 commented 6 years ago

I tried implementing the module and got this error when I typed text into the field: Error: traverseParentPath(…): Cannot traverse from and to the same ID, ``

Here is my implementation:

import React from 'react';
import ContentEditable from 'react-wysiwyg';

export default class TextPieceInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      textPieceInput: 'hi!',
      placeholder: true,
      editing: true
    };
  }

  handleChange(textContent, setPlaceholder) {
    if (setPlaceholder) {
      this.setState({
        placeholder: true,
        textPieceInput: ''
      });
    } else {
      this.setState({
        placeholder: false,
        textPieceInput: textContent
      });
    }
  }

  render () {
    return (
      <ContentEditable
        tagName='divsdfsdfsdf'
        onChange={this.handleChange}
        html={this.state.textPieceInput}
        preventStyling
        noLinebreaks
        placeholder={this.state.placeholder}
        placeholderText='Problem text'
        editing={this.state.editing}
      />
    );
  }
}