common get post method, and control, edit page

pages/edit.tsx

@@ -1,11 +1,33 @@
 import React from "react";
+import { get, post } from "@/common";
 
 const EditPage = () => {
-  return <div
-  onInput={(event) => {
-    console.log(event.currentTarget.innerHTML);
-  }}
-   contentEditable="true"></div>;
+  const ref = React.useRef();
+  const upload = async () => {
+    const html = ref.current.innerHTML;
+    await post("/api/html", { html });
+    alert("Upload success");
+    refresh();
+  };
+  const refresh = async () => {
+    const html = await get("/api/html");
+    ref.current.innerHTML = html.html;
+  };
+  React.useEffect(() => {
+    refresh();
+  }, []);
+  return (
+    <>
+      <button onClick={() => upload()}>Upload</button>
+      <div
+        ref={ref}
+        onInput={(event) => {
+          console.log(event.currentTarget.innerHTML);
+        }}
+        contentEditable="true"
+      ></div>
+    </>
+  );
 };
 
 export default EditPage;