codex-team / codex-team/editor.js

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

Open
#2,576 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
31.9k
Forks
2.2k
Avg merge
1d 1h
Merged PRs (30d)
1

Description

**Description:**
I'm working with EditorJS to build a text editor, 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.
- **Device, Browser, OS:** Chrome Browser, Mac OS
- **Behavior:** The `onChange` event works for general changes but doesn't trigger for the next line in a paragraph.

**Code Sample:**
```javascript
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(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 (


);
};

export default EditorComponent;
````

**Error Messages:**
I don't receive any error messages in the console related to this issue.

**Expected Outcome:**
I expect the onChange event to trigger for every change, including new lines in paragraphs.

**Stack-Overflow:** [https://stackoverflow.com/questions/77722130/unable-to-trigger-onchange-event-for-next-line-in-editorjs-paragraph-in-react-js](https://stackoverflow.com/questions/77722130/unable-to-trigger-onchange-event-for-next-line-in-editorjs-paragraph-in-react-js)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.