React-Editor-js is a toolkit for react which implement the Editorjs ,block editor in React application.
The Bugg🐛
When you trying to implement the toolkit into a modern React application you may got double instance of the Editor 👇. I don’t know why it is happening, 😔.
Fix
The problem her is not with the versions but the react-dom/client(🤔). My regular index.js look like this.
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'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
To fix our current issue I replace index.js as following with ReactDom.render method and the problem will melt away. 😊
import ReactDOM from "react-dom";
import React from "react";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
reportWebVitals();
If anybody have a better solution for this, please leave in the comment section.
- How to enable Editorjs plugin in Strapi
- react-editor-js double instance fix
- Create Quill RichText editor using react-quill
- How to get HTML from Remirror editor in Reactjs
- How to get state as JSON from Remirror editor in Reactjs
- Create a TinyMCE Rich Text Editor in React
- Create a Slate Rich Text Editor in React
- Create a Material-UI Rich Text Editor in React
- Create a RichText editor using Quilljs
- Create minimal editor with Tiptap in React