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()
-
check that out: stackoverflow.com/questions/47420136/…Marcello Manuel Borges da Cost– Marcello Manuel Borges da Cost2021-06-23 04:36:00 +00:00Commented Jun 23, 2021 at 4:36
Add a comment
|
5 Answers
Just use the hasText function on ContentState :
editorState.getCurrentContent().hasText()
2 Comments
kaushik94
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.
sktguha
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?
contentState.hasText() && contentState.getPlainText().length > 0
Check
- Empty
- White Space
Comments
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.
Comments
const text=editorState.getCurrentState().getPlainText()
return text===''
1 Comment
nima
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
// 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
}
};