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

const EditPage = () => {
  const [token, setToken] = React.useState("");
  const ref = React.useRef();
  const upload = async () => {
    const html = ref.current.innerHTML;
    await post("/api/html-regular", { html }, { token });
    alert("Upload success");
    refresh();
  };
  const refresh = async () => {
    const html = await get("/api/html-regular");
    ref.current.innerHTML = html.html;
  };
  React.useEffect(() => {
    refresh();
  }, []);
  return (
    <>
      <input
        value={token}
        placeholder={"token"}
        onChange={(event) => setToken(event.target.value)}
      />
      <button onClick={() => upload()}>Upload</button>
      <div
        ref={ref}
        onInput={(event) => {
          console.log(event.currentTarget.innerHTML);
        }}
        contentEditable="true"
      ></div>
    </>
  );
};

export default EditPage;