How to check empty spaces in draft js Editor

Question

How i can check empty there are empty spaces in editor? i don't want to submit form when there are empty spaces in editor. i'm using this function that detect is editor is empty or not but it does not detect is editor has empty spaces or not

contentState.hasText()

Tenuis

Do you meat the case when the editor content has only space characters and no letters? If your editor has foo bar text should the form is submitted in this case? – Shirtwaist

i mean when the editor has only spaces without any character. – Tenuis

Answer 1

You can check the editor content with two methods which you can call on the current content state. First - hasText and second getPlainText

Check the demo below. Here we check three different editor condition:

• is editor empty (no spaces, no letters, no other characters),

• is editor contain only space (and no other characters),

• is editor contain some text (any characters except spaces)

const {Editor, EditorState} = Draft;

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty()
    };
  }
  
  _handleChange = (editorState) => {
    this.setState({ editorState });
  }
  
  _checkEditorContent = () => {
    const content = this.state.editorState.getCurrentContent();
    const isEditorEmpty = !content.hasText();
    const currentPlainText = content.getPlainText()
    const lengthOfEditorContent = currentPlainText.length;
    const lengthOfTrimmedContent = currentPlainText.trim().length;
    const isContainOnlySpaces = !isEditorEmpty && !lengthOfTrimmedContent;

    console.clear();
    console.log('editor empty => ', isEditorEmpty)
    console.log('editor containe only spaces => ', isContainOnlySpaces)
    console.log('editor containe some text (not only spaces) => ', !!(!isEditorEmpty && lengthOfTrimmedContent))
  }
  
  render() {
    return (
      <div className="container-root">
        <Editor 
          placeholder="Type away :)"
          editorState={this.state.editorState}
          onChange={this._handleChange}
        />
        <button onClick={this._checkEditorContent}>
          CHECK
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Container />, document.getElementById('react-root'))

body {
  font-family: Helvetica, sans-serif;
}

.public-DraftEditor-content {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.7.0/Draft.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.10.0/Draft.js"></script>
<div id="react-root"></div>

Shirtwaist

Answer 2

You can use the String.trim() to removes all jumps and spaces then just have to check the length:

if (content.getPlainText().trim().length == 0) {
  updateYourVariableToNull()
}

or if you're using the EditorState:

editorState.getCurrentContent().getPlainText().trim().length

Sequential