On desktop everything is working fine, when I test this with two new Android smartphones, it appears to be an issue with detecting changes when the user is typing. here is a code sample:
import { EditorState, convertToRaw } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
const TextEditor = () => {
const [editorState, setEditorState] = useState(EditorState.createEmpty());
const [typedText, setTypedText] = useState("");
const handleEditorChange = (newEditorState) => {
setEditorState(newEditorState);
const contentState = newEditorState.getCurrentContent();
const plainText = contentState.getPlainText();
setTypedText(plainText);
};
return (
<div>
<h2>Typed Text: {typedText}</h2>
<Editor editorState={editorState} onEditorStateChange={handleEditorChange} />
</div>
);
};
export default TextEditor;
The only way for the changes to get picked up is when the user clicks space on the keyboard or clicks outside of the editor, the weird thing is that in a older smartphone everything works fine, this issue has been stuck with me for the last week I couldn't find any solution to it, I opened an issue in the react-draft-wysiwyg github repo but I didn't get any answer,