import React from "react";
import { get, post } from "@/common";

const EditPage = () => {
  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;