Can't edit saved data using EditorJS

Question

I successfully created documents with EditorJS tool and saved it to a local folder (as a part of NextJS project). But when I try to reopen the saved file with EditorJS, it won't work. I just get empty Editor.

  useEffect(() => {
    if (selectedFile) {
      // Dynamically import EditorJs when a file is selected
      import('@editorjs/editorjs')
        .then((module) => {
          const EditorJs = module.default;
          const newEditorInstance = new EditorJs({
            holder: 'editor-container',
            // Configure EditorJs as needed
          });

          newEditorInstance.isReady
            .then(() => {
              // EditorJs is ready, set it in state
              setSelectedEditor(newEditorInstance);
            })
            .catch((error) => {
              console.error('Error initializing EditorJs:', error);
            });
        })
        .catch((error) => {
          console.error('Error loading EditorJS:', error);
        });
    }
  }, [selectedFile]);

  const handleFolderClick = (folder) => {
    // Handle folder click event, e.g., expand or collapse
  };

  const handleFileClick = (folder, file) => {
    fetch(`http://localhost:3001/api/getFileContent/${folder.name}/${file.name}`)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`Request failed with status: ${response.status}`);
        }
        return response.json();
      })
      .then((content) => {
        console.log('Fetched content:', content);
  
        // Set the content to the Editor.js instance when it's ready
        if (selectedEditor && content.blocks) {
          selectedEditor.render({ blocks: content.blocks });
        }
  
        setSelectedFile({ folder: folder.name, name: file.name, content });
      })
      .catch((error) => {
        console.error('Error fetching or setting file content:', error.message);
      });
  };

Answer 1

I don't see where you're passing saved data to the Editor. You need to use the data property of the Editor Config object

const newEditorInstance = new EditorJs({
  holder: 'editor-container',
  data: mySavedData, // <-- pass data here
});