plane/web/pages/m/[workspaceSlug]/editor.tsx
Dakshesh Jain 991258084e
fix: query checking (#2137)
fix: the logic should be to check if object exist not if it's true or false
2023-09-11 13:21:50 +05:30

100 lines
2.7 KiB
TypeScript

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, Spinner } from "components/ui";
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({
defaultValues: {
data: "",
data_html: "",
},
});
useEffect(() => {
setIsLoading(true);
if (!router?.query?.["editable"]) return;
setIsLoading(false);
const data_html = Cookies.get("data_html");
setValue("data_html", data_html ?? "");
}, [isEditable, setValue, router]);
return (
<WebViewLayout fullScreen={isLoading}>
{isLoading ? (
<div className="w-full h-full flex items-center justify-center">
<Spinner />
</div>
) : (
<>
<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() ?? ""}
debouncedUpdatesEnabled={true}
customClassName="min-h-[150px] shadow-sm"
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]"
onClick={() => {
console.log(
"submitted",
JSON.stringify({
data_html: watch("data_html"),
})
);
}}
>
Submit
</PrimaryButton>
)}
</>
)}
</WebViewLayout>
);
};
export default Editor;