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}
    />

CodePudding user response：

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}
    />
  )
}

CodePudding user response：

could you check don't import it dynamically, is still flickering?

import { Editor } from "react-draft-wysiwyg";

import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

CodePudding user response：

Found a fix, don't know if its appropriate though I wrapped the dynamic import with a useMemo Hook

const Editor = useMemo(() => {
return dynamic(
  () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
  { ssr: false }
);}, []);