plane/web/pages/m/[workspaceSlug]/editor.tsx

100 lines
2.8 KiB
TypeScript
Raw Normal View History

2023-09-11 06:54:46 +00:00
import { useEffect, useState } from "react";
// next
import type { NextPage } from "next";
import { useRouter } from "next/router";
// cookies
import Cookies from "js-cookie";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// layouts
import WebViewLayout from "layouts/web-view-layout";
// components
import { TipTapEditor } from "components/tiptap";
import { PrimaryButton } from "components/ui";
import { Spinner } from "components/web-view";
2023-09-11 06:54:46 +00:00
const Editor: NextPage = () => {
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
const { workspaceSlug, editable } = router.query;
const isEditable = editable === "true";
const { watch, setValue, control } = useForm({
2023-09-11 06:54:46 +00:00
defaultValues: {
data: "",
data_html: "",
},
});
useEffect(() => {
setIsLoading(true);
if (!router?.query?.["editable"]) return;
2023-09-11 06:54:46 +00:00
setIsLoading(false);
const data_html = Cookies.get("data_html");
setValue("data_html", data_html ?? "");
}, [isEditable, setValue, router]);
2023-09-11 06:54:46 +00:00
return (
<WebViewLayout fullScreen>
2023-09-11 06:54:46 +00:00
{isLoading ? (
<div className="w-full h-full flex items-center justify-center">
<Spinner />
</div>
) : (
<div className="w-full h-full flex flex-col justify-between">
2023-09-11 06:54:46 +00:00
<Controller
name="data_html"
control={control}
render={({ field: { value, onChange } }) => (
<TipTapEditor
borderOnFocus={false}
value={
!value ||
value === "" ||
(typeof value === "object" && Object.keys(value).length === 0)
? watch("data_html")
: value
}
editable={isEditable}
noBorder={true}
workspaceSlug={workspaceSlug?.toString() ?? ""}
customClassName="h-full shadow-sm overflow-auto"
2023-09-11 06:54:46 +00:00
editorContentCustomClassNames="pb-9"
onChange={(description: Object, description_html: string) => {
onChange(description_html);
setValue("data_html", description_html);
setValue("data", JSON.stringify(description));
}}
/>
)}
/>
{isEditable && (
<PrimaryButton
className="mt-4 w-[calc(100%-30px)] h-[45px] mx-[15px] text-[17px] my-[15px]"
2023-09-11 06:54:46 +00:00
onClick={() => {
console.log(
"submitted",
JSON.stringify({
data_html: watch("data_html"),
})
);
}}
>
Submit
</PrimaryButton>
)}
</div>
2023-09-11 06:54:46 +00:00
)}
</WebViewLayout>
);
};
export default Editor;