Issue: Multiple Instances of EditorJS Created in React with Vite and TypeScript

[imran1khan]

Issue: Multiple Instances of EditorJS Created in React with Vite and TypeScript

[hsnfirdaus]

@hsnfirdaus hello, bro can you share the full code with me, that would be verry helpfull,

const useEditor = ({ onDestroy, ...config }: EditorConfig & { onDestroy?: () => void }) => {
	const [isEditorReady, setIsEditorReady] = useState(false);
	const editorInstance = useRef<EditorJS>(null);

and please clearify this for me, where this { onDestroy, ...config is comming from and one more thing is import { DEFAULT_EDITORJS_TOOLS } from "@/lib/editorjs/editorjs"; and what are these

I'm using typescript, this is simplified example of my previous reply useEditor.ts. config is configuration of editorjs (holder, tools, etc.):

import { useEffect, useRef, useState } from "react";
import EditorJS from "@editorjs/editorjs";
import { EditorConfig } from "@editorjs/editorjs/types/configs";

const useEditor = (config: EditorConfig) => {
	const [isEditorReady, setIsEditorReady] = useState(false);
	const editorInstance = useRef<EditorJS>(null);

	useEffect(() => {
		if (!editorInstance.current) {
			editorInstance.current = new EditorJS({
				...config,
				onReady: () => {
					setIsEditorReady(true);
					config.onReady?.();
				},
			});
		}
		return () => {
			if (editorInstance.current && editorInstance.current.destroy) {
				editorInstance.current.destroy();
				editorInstance.current = null;
			}
		};
	}, []);

	return {
		isEditorReady,
		editor: editorInstance.current,
	};
};

export default useEditor;

Usage (App.tsx):

import { EditorConfig } from "@editorjs/editorjs/types/configs";
import Paragraph from "@editorjs/paragraph";
import Header from "@editorjs/header";
import useEditor from "./useEditor";

const config: EditorConfig = {
  holder: 'editorjs',
  tools: {
    paragraph: Paragraph,
    header: Header
  }
} 

function App() {
  const { editor, isEditorReady } = useEditor(config);

  return (
      <div>
        <div id="editorjs"></div>
      </div>
  )
}

export default App

editor and isEditorReady variable is useful when you want to dynamicly change the content of editor (eg. After fetching content from server)

[Vishvsalvi]

Remove react strictmode to avoid double instances

[imran1khan]

@Vishvsalvi , bro i am sorry to say but it's still not working, every single time when it re-rander it creates new instance of Editorjs

[hsnfirdaus]

I'm using hooks, it's working:

import { useEffect, useRef, useState } from "react";
import EditorJS from "@editorjs/editorjs";
import { EditorConfig } from "@editorjs/editorjs/types/configs";
import { DEFAULT_EDITORJS_TOOLS } from "@/lib/editorjs/editorjs";

const useEditor = ({ onDestroy, ...config }: EditorConfig & { onDestroy?: () => void }) => {
	const [isEditorReady, setIsEditorReady] = useState(false);
	const editorInstance = useRef<EditorJS>(null);

	useEffect(() => {
		if (!editorInstance.current) {
			let dom: HTMLElement | undefined = undefined;
			if (config.holder instanceof HTMLElement) {
				dom = config.holder;
			} else if (config.holder) {
				const el = document.getElementById(config.holder);
				if (el) {
					dom = el;
				}
			}
			if (dom !== undefined) {
				const editorJsDOM = document.createElement("div");
				dom.appendChild(editorJsDOM);
				editorInstance.current = new EditorJS({
					tools: DEFAULT_EDITORJS_TOOLS,
					...config,
					holder: editorJsDOM,
					onReady: () => {
						setIsEditorReady(true);
						config.onReady?.();
					},
				});
			}
		}
		return () => {
			if (editorInstance.current && editorInstance.current.destroy) {
				editorInstance.current.destroy();
				editorInstance.current = null;
				onDestroy?.();
			}
		};
	}, []);

	return {
		isEditorReady,
		editor: editorInstance.current,
	};
};

export default useEditor;

[imran1khan]

@hsnfirdaus hello, bro can you share the full code with me, that would be verry helpfull,

const useEditor = ({ onDestroy, ...config }: EditorConfig & { onDestroy?: () => void }) => {
	const [isEditorReady, setIsEditorReady] = useState(false);
	const editorInstance = useRef<EditorJS>(null);

and please clearify this for me, where this { onDestroy, ...config is comming from and one more thing is
import { DEFAULT_EDITORJS_TOOLS } from "@/lib/editorjs/editorjs"; and what are these

[imran1khan]

@hsnfirdaus hi, can we talk in private. it would be helpfull if you can share your emil or something

[imran1khan]

@hsnfirdaus thanks bro, working perfectly,