Unable to save data in Next js

[dukesx]

Environment

• @editorjs/editorjs version: latest
• react-editor-js version: latest

Describe

I am trying to save editor js data. How i am doing this right now :

1. Create a seperate component for editor
2. Load as SSR: false
3. inside editor component, i use ref example https://codesandbox.io/s/react-editor-js-o2n3b to save data and pass it back to "main" component where i import Editor component;

Example:

Main.tsx file

  const [editorData, setEditorData] = useState({ });

const Editor = dynamic(() => import('./editor.tsx),{ssr: false}));

function abc = () => <Editor   setVal={setEditorData}  />

Editor.tsx file

import { createReactEditorJS } from "react-editor-js";
import type { EditorProps } from "../../types/globals";
import { EDITOR_JS_TOOLS } from "./tools";
const ReactEditorJS = createReactEditorJS();
import { useCallback, useRef } from "react";

export const Editor: React.FC<EditorProps> = ({ setVal }) => {
  const editorJS = useRef(null);

  const handleInitialize = useCallback((instance) => {
    editorJS.current = instance;
  }, []);

  const handleSave = useCallback(async () => {
    const savedData = await editorJS.current.save();
    setVal(savedData);

  }, [ ]);
  return (
    <ReactEditorJS
      onInitialize={handleInitialize}
      tools={EDITOR_JS_TOOLS}
      onChange={handleSave}
    />
  );
};

export default Editor;

Issue

Every time my "Main" component state changes, it causes Editor to reset to its default value. This means that i can never save new data.

This is because, if parent component hook for example , useState changes, it triggers a re render, and because parent is re rendered, it causes the child component , Editor , to also re render, causing it to lose its state. Is there any work around ?

[dukesx]

This is the test sandbox : https://codesandbox.io/s/friendly-moon-xiltz?file=/pages/admin/articles/index.tsx

navigate to this url inside sandbox : https://xiltz.sse.codesandbox.io/admin/articles

then scroll to the bottom , you will see input , start writing inside "title" input , and see editors resetting their state. Look at the picture for reference

[Jungwoo-An]

@dukesx Hi! First of all, thanks for your interest! 👋

I can't see codesandbox that error occurs. I think you should dynamic import used at the top of the file

Thanks!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dukesx]

I have tried to avoid editor.js refreshing on every state change by using useRef instead of useState function. UseRef can change value but doesn't trigger re render. @Jungwoo-An the react component is very unstable. I have used editor.js with vanilla js implementation in useEffect and its not that unstable. It works normally with useState, it doesn't re render itself.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Jungwoo-An]

@dukesx Hi! First of all, thanks for your interest! 👋

I'm sorry for the late response. Do you still need my help?

Thanks!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Eloi-Perez]

@dukesx Hi, I've been working in project using this library. I'm not sure exactly where is your problem but maybe taking a look to my project will help you:

https://github.com/Eloi-Perez/simple-content-editor/blob/main/components/editorjs-create/container-editor.js

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.