remove react-page and add editorjs

package.json

@@ -11,22 +11,32 @@
     "gen-types": "sh ./scripts/gen-types-from-pb.sh"
   },
   "dependencies": {
+    "@editorjs/editorjs": "^2.27.0",
+    "@editorjs/header": "^2.7.0",
+    "@editorjs/image": "^2.8.1",
+    "@editorjs/list": "^1.8.0",
+    "@editorjs/paragraph": "^2.9.0",
+    "@editorjs/simple-image": "^1.5.1",
+    "@editorjs/table": "^2.2.1",
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@prisma/client": "^4.14.0",
-    "@react-page/editor": "^5.4.4",
-    "@react-page/plugins-image": "^5.4.4",
-    "@react-page/plugins-slate": "^5.4.4",
     "@tanstack/react-query": "^4.29.5",
     "@trpc/client": "^10.25.1",
     "@trpc/next": "^10.25.1",
     "@trpc/react-query": "^10.25.1",
     "@trpc/server": "^10.25.1",
     "add": "^2.0.6",
+    "editorjs-button": "^1.0.4",
+    "editorjs-drag-drop": "^1.1.13",
+    "editorjs-inline-tool": "^0.4.0",
+    "editorjs-text-color-plugin": "^2.0.2",
+    "editorjs-undo": "^2.0.22",
     "next": "13.4.1",
     "pocketbase": "^0.14.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-editor-js": "^2.1.0",
     "react-icons": "^4.8.0",
     "superjson": "1.9.1",
     "zod": "^3.21.4"

src/components/ReactEditor.tsx

@@ -0,0 +1,39 @@
+import { memo, useEffect, useRef } from "react";
+import EditorJS, { OutputData } from "@editorjs/editorjs";
+import { EDITOR_JS_TOOLS } from "@/utils/tools";
+
+type Props = {
+  data?: OutputData;
+  onChange(val: OutputData): void;
+  holder: string;
+};
+
+const EditorBlock = ({ data, onChange, holder }: Props) => {
+  const ref = useRef<EditorJS>();
+
+  useEffect(() => {
+    if (!ref.current) {
+      const editor = new EditorJS({
+        holder: holder,
+        tools: EDITOR_JS_TOOLS,
+        data,
+        async onChange(api, event) {
+          const data = await api.saver.save();
+          onChange(data);
+        },
+      });
+      ref.current = editor;
+    }
+
+    return () => {
+      if (ref.current && ref.current.destroy) {
+        ref.current.destroy();
+      }
+    };
+  }, []);
+
+  return <div id={holder} />;
+};
+
+export default memo(EditorBlock);
+

src/pages/_app.tsx

@@ -3,7 +3,6 @@ import { type AppType } from "next/app";
 import { api } from "../utils/api";
 
 import "../styles/globals.css";
-import '@react-page/editor/lib/index.css';
 
 const MyApp: AppType = ({ Component, pageProps }) => {
   return <Component {...pageProps} />;

src/pages/editor.tsx

@@ -0,0 +1,25 @@
+import dynamic from 'next/dynamic'
+import Layout from '@/layouts/Home'
+import { useState } from 'react'
+import { OutputData } from "@editorjs/editorjs";
+
+const ReactEditorJS = dynamic(() => import('@/components/ReactEditor'), {
+  ssr: false
+})
+
+export default function Editor() {
+  const [data, setData] = useState<OutputData>()
+  return (
+    <Layout title='React EditorJS'>
+      <h1>React EditorJS</h1>
+      <div className="container mx-auto p-8">
+        <h2>EditorJS with React</h2>
+        <div>
+          <ReactEditorJS data={data} onChange={setData} holder='editorjs' />
+        </div>
+        <h2>Output</h2>
+        <pre>{JSON.stringify(data, null, 2)}</pre>
+      </div>
+    </Layout>
+  )
+}

src/utils/tools.js

@@ -0,0 +1,31 @@
+import Paragraph from "@editorjs/paragraph";
+import Header from "@editorjs/header";
+import List from "@editorjs/list";
+import SimpleImage from "@editorjs/simple-image";
+import Table from "@editorjs/table";
+import Button from "editorjs-button";
+import Undo from "editorjs-undo";
+import DragDrop from "editorjs-drag-drop";
+import Color from "editorjs-text-color-plugin";
+import { ItalicInlineTool, StrongInlineTool, UnderlineInlineTool } from "editorjs-inline-tool";
+
+export const EDITOR_JS_TOOLS = {
+  paragraph: {
+    class: Paragraph,
+    inlineToolbar: true,
+  },
+  header: Header,
+  list: {
+    class: List,
+    inlineToolbar: true,
+  },
+  image: SimpleImage,
+  table: Table,
+  button: Button,
+  undo: Undo,
+  dragDrop: DragDrop,
+  italic: ItalicInlineTool,
+  strong: StrongInlineTool,
+  underline: UnderlineInlineTool,
+  color: Color,
+}