How can I save the the data?

[product2023]

Hi, I am using the nextjs to launch editorjs features. I could able to add header, text in a paragraph. but that content i not being saved to blocks. Any help would bb apprecited.

Console.log

[HMR] connected
editorjs.mjs:99 Editor.js 2.27.2 «blocks.stretchBlock()» is deprecated and will be removed in the next major release. Please use the «BlockAPI» instead.
ge @ editorjs.mjs:99
Ie @ editorjs.mjs:233
stretchBlock @ editorjs.mjs:2009
stretchBlock @ editorjs.mjs:1884
eval @ bundle.js:10
Promise.then (async)
value @ bundle.js:10
eval @ bundle.js:10
set @ bundle.js:10
e @ bundle.js:10
create @ editorjs.mjs:8349
processTool @ editorjs.mjs:6744
processTools @ editorjs.mjs:6838
prepare @ editorjs.mjs:6768
eval @ editorjs.mjs:9324
Promise.then (async)
eval @ editorjs.mjs:9322
start @ editorjs.mjs:9321
eval @ editorjs.mjs:9239
Promise.then (async)
pi @ editorjs.mjs:9238
fi @ editorjs.mjs:9395
initializeEditor @ EditorComponent.js:87
await in initializeEditor (async)
eval @ EditorComponent.js:151
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
eval @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
editorjs.mjs:99 Editor.js 2.27.2 «blocks.stretchBlock()» is deprecated and will be removed in the next major release. Please use the «BlockAPI» instead.
ge @ editorjs.mjs:99
Ie @ editorjs.mjs:233
stretchBlock @ editorjs.mjs:2009
stretchBlock @ editorjs.mjs:1884
eval @ bundle.js:10
Promise.then (async)
value @ bundle.js:10
eval @ bundle.js:10
set @ bundle.js:10
e @ bundle.js:10
create @ editorjs.mjs:8349
processTool @ editorjs.mjs:6744
processTools @ editorjs.mjs:6838
prepare @ editorjs.mjs:6768
eval @ editorjs.mjs:9324
Promise.then (async)
eval @ editorjs.mjs:9322
start @ editorjs.mjs:9321
eval @ editorjs.mjs:9239
Promise.then (async)
pi @ editorjs.mjs:9238
fi @ editorjs.mjs:9395
initializeEditor @ EditorComponent.js:87
await in initializeEditor (async)
eval @ EditorComponent.js:151
commitHookEffectListMount @ react-dom.development.js:23150
invokePassiveEffectMountInDEV @ react-dom.development.js:25154
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
eval @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
2editorjs.mjs:99 Editor.js 2.27.2 I'm ready! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
EditorComponent.js:117 Editor.js is ready to work!
EditorComponent.js:123 Block Holder: <div class=​"ce-block ce-block--stretched">​…​</div>​
EditorComponent.js:124 Block Name: paragraph
EditorComponent.js:125 Block Is Empty: true
EditorComponent.js:126 Block Is Selected: false
EditorComponent.js:132 About to save the editor content...
editorjs.mjs:99 [Editor.js saving]:
EditorComponent.js:137 Article data:  {time: 1691740818969, blocks: Array(0), version: '2.27.2'}
EditorComponent.js:117 Editor.js is ready to work!
EditorComponent.js:123 Block Holder: <div class=​"ce-block ce-block--stretched">​…​</div>​
EditorComponent.js:124 Block Name: paragraph
EditorComponent.js:125 Block Is Empty: true
EditorComponent.js:126 Block Is Selected: false
EditorComponent.js:132 About to save the editor content...
editorjs.mjs:99 [Editor.js saving]:
EditorComponent.js:137 Article data:  {time: 1691740818971, blocks: Array(0), version: '2.27.2'}

Code

import React, { useEffect, useRef } from "react";
import dynamic from "next/dynamic";


const loadEditor = () =>
  import("@editorjs/editorjs").then((module) => module.default);
const loadHeader = () =>
  import("@editorjs/header").then((module) => module.default);
const loadList = () =>
  import("@editorjs/list").then((module) => module.default);
const loadChecklist = () =>
  import("@editorjs/checklist").then((module) => module.default);
const loadEmbed = () =>
  import("@editorjs/embed").then((module) => module.default);
const loadLinkTool = () =>
  import("@editorjs/link").then((module) => module.default);
const loadQuote = () =>
  import("@editorjs/quote").then((module) => module.default);
const loadRawTool = () =>
  import("@editorjs/raw").then((module) => module.default);
const loadImage = () =>
  import("@editorjs/image").then((module) => module.default);
const loadTable = () =>
  import("@editorjs/table").then((module) => module.default);
const loadDelimiter = () =>
  import("@editorjs/delimiter").then((module) => module.default);
const loadNestedList = () =>
  import("@editorjs/nested-list").then((module) => module.default);
const loadTextVariantTune = () =>
  import("@editorjs/text-variant-tune").then((module) => module.default);
const loadUnderline= () =>
  import("@editorjs/underline").then((module) => module.default);
const loadInlineCode= () =>
  import("@editorjs/inline-code").then((module) => module.default);
const loadCodeTool= () =>
  import("@editorjs/code").then((module) => module.default);
const loadWarning= () =>
  import("@editorjs/warning").then((module) => module.default);
const loadMarker= () =>
  import("@editorjs/marker").then((module) => module.default);
const loadAttachesTool= () =>
  import("@editorjs/attaches").then((module) => module.default);
const loadTranslate= () =>
  import("@editorjs/translate-inline").then((module) => module.default);
const loadEditorjsCodeflask= () =>
  import("@calumk/editorjs-codeflask").then((module) => module.default);




// Load @editorjs/paragraph dynamically using 'dynamic'
const loadParagraph = dynamic(
  () => import("@editorjs/paragraph").then((module) => module.default),
  { ssr: false } // Disable server-side rendering for this dynamic import
);

function EditorComponent() {
  const editorRef = useRef(null);

  useEffect(() => {
    const initializeEditor = async () => {
      const [EditorJS, Header, List, Checklist, Table, Image, Attachment, 
        Translate, Nestedlist, Linktool, Quote, Raw, TextVariant, Underline,
        InlineCode, Code, CodeEditor, Warning, Marker] = await Promise.all([
        loadEditor(),
        loadHeader(),
        loadList(),
        loadChecklist(),
        loadTable(),
        loadImage(),
        loadAttachesTool(),
        loadTranslate(),
        loadNestedList(),
        loadLinkTool(),
        loadQuote(),
        loadRawTool(),
        loadTextVariantTune(),
        loadUnderline(),
        loadInlineCode(),
        loadCodeTool(),
        loadEditorjsCodeflask(),
        loadWarning(),
        loadMarker(),
      ]);
  
      if (editorRef.current) {
        const editor = new EditorJS({
          holder: editorRef.current,
          tools: {
            list: {
              class: List,
              class: Translate,
              class: Quote,
              class: TextVariant,
              class: InlineCode,
              class: Underline,
              class: Marker,
              inlineToolbar: true,
            },
            paragraph: loadParagraph,
            header: Header,
            table: Table,
            attachment: Attachment,
            checklist: Checklist,
            nestedlist: Nestedlist,
            image: Image,
            raw: Raw,
            code: Code,
            multicode: CodeEditor,
            warning: Warning,
            linktool: Linktool,
            
            // Add more tools as needed
          },

          onReady: async () => {
            console.log("Editor.js is ready to work!");
          
            // Use editor.blocks.getBlockByIndex(0) to access BlockAPI
            const block = await editor.blocks.getBlockByIndex(0);
          
            if (block) {
              console.log("Block Holder:", block.holder);
              console.log("Block Name:", block.name);
              console.log("Block Is Empty:", block.isEmpty);
              console.log("Block Is Selected:", block.selected);
          
              // Change stretched state of the block
              block.stretched = true; // Set the stretched property to true
          
              // Log a message just before calling editor.save()
              console.log("About to save the editor content...");
          
              // Now you can call editor methods, like save(), here
              editor.save()
                .then((outputData) => {
                  console.log("Article data: ", outputData);
                  // Here you can perform actions with the saved data
                })
                .catch((error) => {
                  console.log("Saving failed: ", error);
                });
            }
          },
        });

        // More editor initialization code...
      }
    };

    initializeEditor();
  }, []);

  return <div ref={editorRef}></div>;
}

export default EditorComponent;