jpuri / react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
MIT License
6.38k stars 1.16k forks source link

Uncaught Error: Got unexpected null or undefined #1419

Open NikitaLukashuk1 opened 5 months ago

NikitaLukashuk1 commented 5 months ago

Please, help me to solve this case! App sometimes crushes, by no reasons, I mean, I just write something, send, and suddenly it crushes, why It's like that? The internal span , which is built in app disappears , it's like, the state stops being existed The code below is for setting up the editor

 return (
    <div className="rich-text-editor">
      <Editor
        mention={{
          separator: " ",
          trigger: "@",
          suggestions: users
            ? users.map((user) => ({ text: user.name, value: user.name }))
            : [],
        }}
        handleReturn={(e, editorState) => {
          handleReturn({
            e,
            editorState,
            setEditorState,
            sendMessage,
            messageText,
            thread,
            rawEditorContent,
            isDisabled,
          });
        }}
        handleKeyCommand={(command, editorState) => {
          handleKeyCommand({
            command,
            editorState,
            setEditorState,
          });
        }}
        keyBindingFn={sendBindingFn}
        toolbar={{
          options: ["inline", "list", "emoji"],
          inline: {
            inDropdown: false,
            options: ["bold", "italic", "strikethrough"],
          },
          list: { inDropdown: false },
        }}
        editorState={editorState}
        onEditorStateChange={setEditorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
      />
      <div
        style={{
          width: "100%",
          height: "max-content",
          display: "flex",
          justifyContent: "flex-end",
        }}
      >
        <SendButton
          onClick={() => {
            handleSend({
              sendMessage,
              rawEditorContent,
              setEditorState,
              thread,
              messageText,
              users,
            });
          }}
          isDisabled={isDisabled}
        />
      </div>
    </div>

);