Some Tool bars are not working with the latest version of React

[chidexebere]

Some of the tools are not working with the latest version of React (from React 18.0.0).

I have reproduced this on codesandbox here.

The dropdowns, images, emoji tools are among those not working.

I noticed this weird error on the console anytime I click on any of these tools. proxyConsole.js:64 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign tothis.statedirectly or define astate = {};class property with the desired state in the n component.

I have also tried using class components .....same issue.

[AuboIoT]

In my case, the buttons (Normal, Font, Size) don't show the dropdowns when they are clicked. Check this link, it can help. (https://stackoverflow.com/questions/72058578/dropdowns-are-not-working-using-react-draft-wysiwyg-in-react-js) It looks like it's not compatible with React 18. Here's a TinyMCE, I will try this. (https://www.youtube.com/watch?v=UTPsWbfHmFg)

[Lin-403]

I have the same problem. Have you solved it?

[chidexebere]

@Lin-403 , the only workaround I found is using the old ReactDOM.render syntax instead of the new ReactDOMClient syntax.

That is, use this:

import ReactDOM from 'react-dom';

ReactDOM.render(
  <StrictMode>
      <App />
  </StrictMode>,
  document.getElementById('root'),
);

Instead of this:

import * as ReactDOMClient from "react-dom/client";

const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

[houtan-rocky]

@chidexebere That is not a solution; by changing the code, you're switching back to react 17 and thus losing react 18 features ( that's the react-dom warning in the console)

[houtan-rocky]

@jpuri Can you solve this problem with react 18?

[Lin-403]

I switched to a rich text editor

https://www.wangeditor.com/

------------------ 原始邮件 ------------------ 发件人: "jpuri/react-draft-wysiwyg" @.>; 发送时间: 2022年8月26日(星期五) 凌晨1:28 @.>; @.**@.>; 主题: Re: [jpuri/react-draft-wysiwyg] Some Tool bars are not working with the latest version of React (Issue #1270)

@jpuri Can you solve this problem with react 18?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[clleker]

So did I , Thank you for the wangeditor

[racso-dev]

@jpuri Are you planning on solving the issue some day ? Is this repo dead ?

[MicahPowell]

I was able to solve this issue. The only problem is that RDW is not applying CSS for dropdowns. I copied the styles from dropdowns from an RDW demo, pasted them in my stylesheet, and manually applied them to the editor component.

`.rdw-dropdown-wrapper { height: 30px; background: white; cursor: pointer; border: 1px solid #f1f1f1; border-radius: 2px; margin: 0 3px; text-transform: capitalize; background: white; }

.rdw-dropdown-selectedtext { display: flex; position: relative; height: 100%; align-items: center; padding: 0 5px;

.rdw-dropdown-carettoclose {
  height: 0px;
  width: 0px;
  position: absolute;
  top: 35%;
  right: 10%;
  border-bottom: 6px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.rdw-dropdown-carettoopen {
  height: 0px;
  width: 0px;
  position: absolute;
  top: 35%;
  right: 10%;
  border-top: 6px solid black;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

}

.rdw-dropdown-optionwrapper { z-index: 100; position: relative; border: 1px solid #f1f1f1; width: 98%; background: white; border-radius: 2px; margin: 0; padding: 0; max-height: 250px; overflow-y: scroll;

.rdw-dropdownoption-active {
  background: #f5f5f5;
}

.rdw-dropdownoption-default {
  min-height: 25px;
  display: flex;
  align-items: center;
  padding: 0 5px;
}

}`

[BossBele]

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

Found an answer that helps with this issue.

[GodsonGodwin]

The only solution to remove the React StrictMode....

instead of importing ReactDOM from 'react-dom' and reciving this waring: Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

We can simply removed the React StrictMode...

const rootElement = document.getElementById("root"); const root = ReactDOMClient.createRoot(rootElement);

root.render(

);

[houtan-rocky]

The only solution to remove the React StrictMode....

instead of importing ReactDOM from 'react-dom' and reciving this waring: Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

We can simply removed the React StrictMode...

const rootElement = document.getElementById("root"); const root = ReactDOMClient.createRoot(rootElement);

root.render( );

Rather than finding a solution, you're closing your eyes to the bugs.

[GodsonGodwin]

The only solution to remove the React StrictMode.... instead of importing ReactDOM from 'react-dom' and reciving this waring: Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client". We can simply removed the React StrictMode... const rootElement = document.getElementById("root"); const root = ReactDOMClient.createRoot(rootElement); root.render( );

Rather than finding a solution, you're closing your eyes to the bugs.

The issue has been opened since May, 2022 and the team is yet to responds to it. And the bug has persist with Reaact18 . Importing ReactDom from "react-dom" solve partially the issue but the bug still persist bcos how of React18 renders dom element... of course I know the consequences of turning off the React.StrictMode but that seems to be the only solution or the easy way out of the bug. Maybe you can help us fixed the bug and open up a pull request for that...

[houtan-rocky]

The only solution to remove the React StrictMode.... instead of importing ReactDOM from 'react-dom' and reciving this waring: Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client". We can simply removed the React StrictMode... const rootElement = document.getElementById("root"); const root = ReactDOMClient.createRoot(rootElement); root.render( );

Rather than finding a solution, you're closing your eyes to the bugs.

The issue has been opened since May, 2022 and the team is yet to responds to it. And the bug has persist with Reaact18 . Importing ReactDom from "react-dom" solve partially the issue but the bug still persist bcos how of React18 renders dom element... of course I know the consequences of turning off the React.StrictMode but that seems to be the only solution or the easy way out of the bug. Maybe you can help us fixed the bug and open up a pull request for that...

I'll try.

[mat-jar]

I copied the styles from dropdowns from an RDW demo, pasted them in my stylesheet, and manually applied them to the editor component.

@MicahPowell Would you give a small hint how you applied pasted styles to the editor component? Cheers!

[ShaikhMohammaddanish]

if you are using next js change reactStrictMode: false in next.config.js

[ShaikhMohammaddanish]

remove StrictMode in react

,

[mustom]

Same situation here. Issue has been resolved after I commented 'React.StrictMode'.

[thorgan376]

if you are using next js change reactStrictMode: false in next.config.js

Thank you so much, i have spent a day fixing it till I found ur code