React Draft Wysiwyg dropdown options not working

Question

I am facing issue when implementing React Draft Wysiwyg, font, size, bold and other dropdown options not working

this is my code

import React, { useState } from 'react'
import { Editor } from 'react-draft-wysiwyg'
import { EditorState } from 'draft-js'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'


export const HTMLEditor: React.FC = (): JSX.Element => {
  const [editorState, setEditorState] = useState(() => EditorState.createEmpty())


return (
    <div className="mt-2 mb-2">
      <Editor
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        editorState={editorState}
        onEditorStateChange={setEditorState}
        toolbar={{
          inline: { inDropdown: true },
          list: { inDropdown: true },
          textAlign: { inDropdown: true },
          link: { inDropdown: true },
          history: { inDropdown: true },
        }}
      />
    </div>
  )
}

when I click on font or any other dropdown it show the error

Bark

Answer 1

I found solution from this old clip 2020. Thanks to him.

youtube: https://www.youtube.com/watch?v=t12a6z090AU&t=760s&ab_channel=CodingShiksha

repo github: https://github.com/gauti123456/ReactWysiwygEditor

Do This steps

1. Change code in src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

to

import React from "react";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { render } from "react-dom";                 // add this

render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

I don't know what it means, but it didn't work if I don't do this step, anyone could explain. I will be really appreciated.

more infomation

So I try all day, all night to figure out what wrong with this editor that I can't press and it appear dropdown to me. So, the version of react and react-dom are not relate to this problem and CSS version too.

So, Happy coding!

Ps. Draft js will be archive in 31 Decembers 2022, and meta company will use lexical instead. So, keep that in mind. https://github.com/facebook/lexical

Ps2. For React Draft Wysiwyg is an extention of Draft js, it's very good but I see github has no more active for a very long time. So please consider if you will use this in long term.

Collettecolletti

Answer 2

React draft wysiwyg dropdowns are not working due to the react 18 strict mode, get to the index.js and disable that i.e.

<React.StrictMode>
  <App /> </React.StrictMode>

to

<App />

that's it.

Thamora

Answer 3

Please try to wrap your setState function.

const onSetEditorState = (newState) => {
   setEditorState(newState)
}

then pass onSetEditorState as a prop to onEditorStateChange

Marquis

thank you for your help but I fixed it that was CSS issue – Bark

@JasmeenMaradeeya : what css fix did you add – Stelle

that was css conflict issue – Bark

how did you fix it – Awoke

Answer 4

also check the react strict mode causing this issue, as stated here :

https://github.com/jpuri/react-draft-wysiwyg/issues/1291#issuecomment-1203348769

Liquesce

coderpolo, a link to a solution is welcome, but please ensure your answer is useful without it: add context around the link so your fellow users will have some idea what it is and why it is there, then quote the most relevant part of the page you are linking to in case the target page is unavailable. Answers that are little more than a link may be deleted. – Anabranch