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()

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? — Mikhail Shabrikov
– Mikhail Shabrikov, Commented Nov 21, 2017 at 19:40
i mean when the editor has only spaces without any character. — Hasnain Shafqat
– Hasnain Shafqat, Commented Nov 22, 2017 at 19:57

Mikhail Shabrikov · Accepted Answer · 2017-11-22 20:56:51Z

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>

Marcello Manuel Borges da Cost · Accepted Answer · 2021-06-23 04:29:19Z

1

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

answered Jun 23, 2021 at 4:29

Marcello Manuel Borges da Cost

212 bronze badges

Collectives™ on Stack Overflow

How to check empty spaces in draft js Editor

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related