Search code examples
reactjsnext.jsdraftjsreact-draft-wysiwyg

react-draft-wysiwyg flickering once i type into the input field in next js


The input field keeps flickering. Here is where I'm making use of the code (the Editor component). I'm also importing the package with next/dynamic, i do not know if this helps in anyway, Thanks

<Editor
      editorState={editorState}
      wrapperStyle={{ backgroundColor: "white", height: "300px" }}
      onEditorStateChange={setEditorState}
    />

Solution

  • I suggest try trim the problem, in what cases its happening and in what cases wont.

    1. be sure the css is there. (flickering usually is wrong styling)
    2. be sure of being initializing the emptyEditorState with EditorState.createEmpty()
    3. is still flickering? force imports statically to check if that matter
    4. is still flickering? remove the onChangeHandler leave it empty.
    5. bring me feedback :)

    This is the official doc example that should work

    import React, { Component } from 'react';
    import { EditorState } from 'draft-js';
    import { Editor } from 'react-draft-wysiwyg';
    
    const MyEditor = () => {
      const [editor, setEditor] = useState(EditorState.createEmpty());
      return (
        <Editor
          editorState={editor}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={setEditor}
        />
      )
    }