Unable to Trigger onChange Event for Next Line in EditorJS Paragraph in React JS

Question

Description: I'm working with EditorJS to build a text editor in React Js project, and I'm encountering an issue with the onChange event not triggering as expected. The problem specifically occurs when trying to capture changes for a new line in a paragraph.

Details:

• Library: I'm using EditorJS version 2.28.2.
• Tool: The issue is observed with the Paragraph tool.
• Behavior: The onChange event works for general changes but doesn't trigger for the next line in a paragraph.

Code:

import React, { useEffect, useRef, useState } from "react";
import EditorJS, { BlockToolConstructable } from "@editorjs/editorjs";

//@ts-ignore
import Header from "@editorjs/header";
//@ts-ignore
import LinkTool from "@editorjs/link";
//@ts-ignore
import ListTool from "@editorjs/list";
//@ts-ignore
import SimpleImageTool from "@editorjs/simple-image";
//@ts-ignore
import ParagraphTool from "@editorjs/paragraph";
//@ts-ignore
import RawTool from "@editorjs/raw";
//@ts-ignore
import CodeTool from "@editorjs/code";
//@ts-ignore
import EmbedTool from "@editorjs/embed";
//@ts-ignore
import QuoteTool from "@editorjs/quote";
//@ts-ignore
import WarningTool from "@editorjs/warning";
//@ts-ignore
import TableTool from "@editorjs/table";
//@ts-ignore
import MarkerTool from "@editorjs/marker";
//@ts-ignore
import InlineCodeTool from "@editorjs/inline-code";
//@ts-ignore
import DelimiterTool from "@editorjs/delimiter";
//@ts-ignore
import ChecklistTool from "@editorjs/checklist";
//@ts-ignore
import AlignmentTuneTool from "editorjs-text-alignment-blocktune";
import NotionTopbar from "./notion-top-bar";
import { useParams } from "react-router-dom";

interface CustomHeaderConfig {
  placeholder?: string;
}

const DEFAULT_INITIAL_DATA = {
  time: new Date().getTime(),
  blocks: [
    {
      type: "header",
      data: {
        text: "Untitled",
        level: 1,
      },
    },
  ],
};

const EditorComponent: React.FC = () => {
  const ejInstance = useRef<EditorJS | null>(null);
  const { id } = useParams();

  // const [content, setContent] = useState(DEFAULT_INITIAL_DATA);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`http://localhost:8080/notes/${id}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        });

        const data = await response.json();
        // setContent(data);
        const editor = new EditorJS({
          holder: "editorjs",
          onReady: () => {
            ejInstance.current = editor;
          },
          autofocus: true,
          data: data,
          onChange: async () => {
            console.log("Avinash");
            if (ejInstance.current !== null) {
              let content = await editor.saver.save();
              console.log(content);
              const fetchData = async () => {
                try {
                  await fetch(`http://localhost:8080/notes/${id}`, {
                    method: "PUT",
                    headers: {
                      "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                      editorContent: content,
                    }),
                  });
                } catch (error) {
                  console.error("Error fetching data:", error);
                }
              };

              fetchData();
            }
          },
          tools: {
            header: {
              class: Header as unknown as BlockToolConstructable,
              config: {
                placeholder: "Enter a header",
              } as CustomHeaderConfig,
              inlineToolbar: true,
              tunes: ["textAlignment"],
            },
            linkTool: LinkTool,
            list: ListTool,
            image: {
              class: SimpleImageTool,
              inlineToolbar: true,
            },
            paragraph: {
              class: ParagraphTool,
              inlineToolbar: true,
              tunes: ["textAlignment"],
            },
            raw: RawTool,
            code: CodeTool,
            embed: EmbedTool,
            quote: QuoteTool,
            warning: WarningTool,
            table: TableTool,
            marker: MarkerTool,
            inlineCode: InlineCodeTool,
            delimiter: DelimiterTool,
            checklist: ChecklistTool,
            textAlignment: {
              class: AlignmentTuneTool,
              config: {
                default: "left",
                blocks: {
                  header: "left",
                  list: "left",
                },
              },
            },
          },
        });
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();

    return () => {
      if (ejInstance.current !== null) {
        ejInstance.current.destroy();
        ejInstance.current = null;
      }
    };
  }, []);

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

export default EditorComponent;