using the toolbar just freeze my app

[RemiEkie]

hello guys,

I just discovered this library and it seems to meet my needs. I want to replace my current library with this one which seems more user friendly.

However, when I use the toolbar, my application freezes completely. Is there a prerequisite?

import {
  BoldItalicUnderlineToggles,
  MDXEditor,
  headingsPlugin,
  linkPlugin,
  listsPlugin,
  markdownShortcutPlugin,
  toolbarPlugin
} from '@mdxeditor/editor';
import '@mdxeditor/editor/style.css';

const Toolbar = () => <BoldItalicUnderlineToggles />;

const AnswerTextArea = 
  (props ) => {
    return (
        <MDXEditor
          contentEditableClassName="no-tailwind"
          markdown="Hello world !"
          plugins={[
            headingsPlugin(),
            listsPlugin(),
            markdownShortcutPlugin(),
            linkPlugin(),
            toolbarPlugin({
              toolbarContents: Toolbar
            })
          ]}
        />
);

For example, if I select the word "Hello" and click on italic button, the app will freeze. The app will not freeze if no word has been selected.
Another thing, if I add BlockTypeSelect on my toolbar, the app freeze at the initialization of the component

React: 18.2
Typescript: ^4.5.5

Thanks in advance !

[petyosi]

Thank you for giving the editor a try! The code you've shared looks correct. I took it in this sandbox and I can't seem to reproduce the problem you describe, but perhaps I am missing something. This probably means that there's something more going on in your setup. Perhaps your project includes an additional library that interferes with the DOM?

Also, if the codesandbox above freezes for you too, there might something additional involved, like a browser extension for example. Let me know what else should I look for.

[RemiEkie]

Thanks;
I finally found the issue.

I use a deprecated method of ReactDom ReactDOM.render() because it's an old application in production.
Everything seems to be working well if I use:

const element = document.getElementById('root');
createRoot(element!).render()

I also try on a new project with the deprecated method of ReactDom, same thing, the App just freeze if you use the toolbar. :)

[petyosi]

Got it, thanks.

I've seen this at an earlier stage of the development, should be possible to fix. Hang in there, I will keep you posted.

[petyosi]

This should be fixed as of v0.15.2. If you find this discussion and you still experience it, please open a new issue.