Add data-editorjs-change-event-id property

Author: hata6502

examples/ExampleReactBlockTool/Container.tsx renamed to examples/ExampleReactBlockTool/Content.tsx

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import type { ChangeEventHandler, FunctionComponent } from "react";
 import type { ExampleReactBlockToolDispatchData } from "./ExampleReactBlockTool";
 
-const Container: FunctionComponent<{
+const Content: FunctionComponent<{
   dispatchData: ExampleReactBlockToolDispatchData;
   text: string;
 }> = ({ dispatchData, text }) => {
@@ -14,4 +14,4 @@ const Container: FunctionComponent<{
   return <input value={text} onChange={handleTextChange} />;
 };
 
-export { Container };
+export { Content };

examples/ExampleReactBlockTool/ExampleReactBlockTool.tsx

@@ -1,6 +1,7 @@
 import type { BlockTool } from "@editorjs/editorjs";
+import { nanoid } from "nanoid";
 import ReactDOM from "react-dom";
-import { Container } from "./Container";
+import { Content } from "./Content";
 
 interface ExampleReactBlockToolData {
   text: string;
@@ -13,10 +14,12 @@ type ExampleReactBlockToolDispatchData = (action: { text?: string }) => void;
 
 class ExampleReactBlockTool implements BlockTool {
   #container: HTMLDivElement;
+  #editorJSChangeEventID: string;
   #text: string;
 
   constructor() {
     this.#container = document.createElement("div");
+    this.#editorJSChangeEventID = nanoid();
     this.#text = "";
   }
 
@@ -37,12 +40,17 @@ class ExampleReactBlockTool implements BlockTool {
       this.#text = action.text;
     }
 
+    // Dispatch Editor.js change event even without DOM changes.
+    this.#editorJSChangeEventID = nanoid();
+
     this.renderContainer();
   };
 
   renderContainer() {
     ReactDOM.render(
-      <Container dispatchData={this.#dispatchData} text={this.#text} />,
+      <div data-editorjs-change-event-id={this.#editorJSChangeEventID}>
+        <Content dispatchData={this.#dispatchData} text={this.#text} />
+      </div>,
       this.#container
     );
   }

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@editorjs/editorjs": "^2.19.1",
     "fast-deep-equal": "^3.1.3",
+    "nanoid": "^3.1.20",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },

yarn.lock

@@ -1339,6 +1339,11 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+nanoid@^3.1.20:
+  version "3.1.20"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
+  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"