edit page with a get parameter

src/components/ReactEditor.tsx

@@ -1,102 +1,12 @@
 import { memo, useEffect, useRef } from "react";
 import EditorJS from "@editorjs/editorjs";
-import type {
+import type { OutputData } from "@editorjs/editorjs";
-  BlockToolData,
-  OutputBlockData,
-  ToolConstructable,
-  OutputData,
-} from "@editorjs/editorjs";
 import { EDITOR_JS_TOOLS } from "@/utils/tools";
 // @ts-expect-error Undo is not a valid tool
 import Undo from "editorjs-undo";
 // @ts-expect-error DragDrop is not a valid tool
 import DragDrop from "editorjs-drag-drop";
-
+import ColumnTool from "@/utils/editor-tools/column";
-type ColumnData = {
-  columnsData: OutputBlockData[];
-};
-
-type ColumnConfig = {
-  tools: ToolConstructable[] | any;
-};
-
-class ColumnTool {
-  private data: ColumnData;
-  private wrapper: HTMLElement | undefined;
-  private tools: { [name: symbol]: any };
-  private editors: EditorJS[];
-
-  constructor({ data, config }: { data?: ColumnData; config?: ColumnConfig }) {
-    this.data = data ?? { columnsData: [] };
-    this.wrapper = undefined;
-    this.tools = config?.tools ?? EDITOR_JS_TOOLS;
-    this.editors = [];
-  }
-
-  static get toolbox() {
-    return {
-      title: "Column",
-      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 64V416H224V160H64zm384 0H288V416H448V160z"/></svg>`,
-    };
-  }
-
-  static get enableLineBreaks() {
-    return true;
-  }
-
-  createColumn() {
-    const column = document.createElement("div");
-    column.classList.add(
-      "flex",
-      "flex-col",
-      "w-1/2",
-      "border",
-      "border-gray-300",
-      "rounded-md"
-    );
-    return column;
-  }
-
-  render() {
-    console.log(this.tools);
-    if (!this.wrapper) this.wrapper = document.createElement("div");
-
-    const child = document.createElement("div");
-    child.classList.add("flex", "flex-row", "w-full", "space-x-4");
-
-    const blocksData: BlockToolData[] = [];
-
-    for (let i = 0; i < 2; i++) {
-      const column = this.createColumn();
-      const editor = new EditorJS({
-        holder: column,
-        tools: this.tools,
-        async onChange(api) {
-          const data = await api.saver.save();
-          blocksData[i] = data.blocks;
-        },
-      });
-      child.appendChild(column);
-      this.editors.push(editor);
-    }
-    this.wrapper.appendChild(child);
-
-    this.data.columnsData = blocksData;
-
-    return this.wrapper;
-  }
-
-  save() {
-    return {
-      blocksData: this.data.columnsData,
-    };
-  }
-
-  destroy() {
-    this.editors.forEach((editor) => editor.destroy());
-    this.wrapper?.remove();
-  }
-}
 
 type Props = {
   data?: OutputData;

src/pages/test/editor.tsx

@@ -2,14 +2,15 @@ import dynamic from 'next/dynamic'
 import Layout from '@/layouts/Home'
 import { useState } from 'react'
 import { OutputData } from "@editorjs/editorjs";
+import { getPageBySlug } from '@/utils/pb';
 import { api } from '@/utils/api';
 
 const ReactEditorJS = dynamic(() => import('@/components/ReactEditor'), {
   ssr: false
 })
 
-export default function Editor() {
+export default function Editor({data: pbData}: {data: OutputData}) {
-  const [data, setData] = useState<OutputData>({blocks: [], time: 0, version: ''})
+  const [data, setData] = useState<OutputData>(pbData);
   const {mutate, isLoading, data: data2, isError} = api.pages.updatePage.useMutation();
 
   if (data2) console.log(data2)
@@ -42,3 +43,17 @@ export default function Editor() {
     </Layout>
   )
 }
+
+export async function getServerSideProps({query}: {query: {[key: string]: string}}) {
+  if (!query.page) return {notFound: true}
+
+  const data = await getPageBySlug(query.page);
+
+  if (!data.data) return {notFound: true};
+
+  return {
+    props: {
+      data: data.data.content
+    }
+  }
+}

src/utils/editor-tools/column.ts

@@ -0,0 +1,90 @@
+import EditorJS, { BlockToolData, OutputBlockData, ToolConstructable } from "@editorjs/editorjs";
+import { EDITOR_JS_TOOLS } from "../tools";
+
+type ColumnData = {
+  columnsData: OutputBlockData[];
+};
+
+type ColumnConfig = {
+  tools: ToolConstructable[] | any;
+};
+
+class ColumnTool {
+  private data: ColumnData;
+  private wrapper: HTMLElement | undefined;
+  private tools: { [name: symbol]: any };
+  private editors: EditorJS[];
+
+  constructor({ data, config }: { data?: ColumnData; config?: ColumnConfig }) {
+    this.data = data ?? { columnsData: [] };
+    this.wrapper = undefined;
+    this.tools = config?.tools ?? EDITOR_JS_TOOLS;
+    this.editors = [];
+  }
+
+  static get toolbox() {
+    return {
+      title: "Column",
+      icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm64 64V416H224V160H64zm384 0H288V416H448V160z"/></svg>`,
+    };
+  }
+
+  static get enableLineBreaks() {
+    return true;
+  }
+
+  createColumn() {
+    const column = document.createElement("div");
+    column.classList.add(
+      "flex",
+      "flex-col",
+      "w-1/2",
+      "border",
+      "border-gray-300",
+      "rounded-md"
+    );
+    return column;
+  }
+
+  render() {
+    console.log(this.tools);
+    if (!this.wrapper) this.wrapper = document.createElement("div");
+
+    const child = document.createElement("div");
+    child.classList.add("flex", "flex-row", "w-full", "space-x-4");
+
+    const blocksData: BlockToolData[] = [];
+
+    for (let i = 0; i < 2; i++) {
+      const column = this.createColumn();
+      const editor = new EditorJS({
+        holder: column,
+        tools: this.tools,
+        async onChange(api) {
+          const data = await api.saver.save();
+          blocksData[i] = data.blocks;
+        },
+      });
+      child.appendChild(column);
+      this.editors.push(editor);
+    }
+    this.wrapper.appendChild(child);
+
+    this.data.columnsData = blocksData;
+
+    return this.wrapper;
+  }
+
+  save() {
+    return {
+      blocksData: this.data.columnsData,
+    };
+  }
+
+  destroy() {
+    this.editors.forEach((editor) => editor.destroy());
+    this.wrapper?.remove();
+  }
+}
+
+export default ColumnTool;