Draft.js editor is empty

Question

How to test if the content of draftjs editor is empty?

The only idea that I have now is an object comparison against the object returned from this function : EditorState.createEmpty().getCurrentContent()

Quiche

check that out: #47420636 – Crutcher

Answer 1

Just use the hasText function on ContentState :

editorState.getCurrentContent().hasText()

Quiche

Does this work with editor states that have only images etc? I have read the docs of draftjs and there doesn't seem to be a straight-forward way to check if editor state is empty. I think they left this as an implementation detail because it is not clearly understood what the meaning of empty is, maybe because even if the editor state is empty, it contains other info like cursor position, placeholder etc which may not be the exact kind of content we would like to check for. I could be wrong, let me know if this helps. – Trossachs

This is nice. But the issue is that even if the user has typed only spaces then also it will return true. How to check that case? – Adherent

Answer 2

 contentState.hasText() && contentState.getPlainText().length > 0 

Check

• Empty
• White Space

Heflin

Answer 3

export const isEmptyDraftJs = (rawState) => {
  if (!rawState || _.isEmpty(rawState)) { // filter undefined and {}
    return true;
  }
  const contentState = convertFromRaw(rawState);
  return !(contentState.hasText() && (contentState.getPlainText() !== ''));
};

I am not sure it is perfect but I use above code.

When you add just image, there is an space character so getPlainText() can filter only image draftJS.

Kathyrnkati

Answer 4

const text=editorState.getCurrentState().getPlainText()
return text===''

Faitour

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck – Nertie

Answer 5

// All just you need is:
const contentState = editorState.getCurrentContent();
const rawContentState = convertToRaw(contentState);
const text = rawContentState.blocks[0].text.trim();

//See the full code below:
   

const [editorState, setEditorState] = useState(EditorState.createEmpty());
const [errorMessage, setErrorMessage] = useState('');


const handleSubmit = () => {
  const contentState = editorState.getCurrentContent();
  const rawContentState = convertToRaw(contentState);
  const text = rawContentState.blocks[0].text.trim();

  if (text === '') {
    setErrorMessage('Please enter some content before submitting.');
  } else {
    // Proceed with submission logic
    setErrorMessage('');
    // Your submission logic goes here
  }
};

Kory