diff --git a/web/layouts/web-view-layout/index.tsx b/web/layouts/web-view-layout/index.tsx index 2fb46b9df..8a58407c3 100644 --- a/web/layouts/web-view-layout/index.tsx +++ b/web/layouts/web-view-layout/index.tsx @@ -15,6 +15,7 @@ import { Spinner } from "components/ui"; type Props = { children: React.ReactNode; + fullScreen?: boolean; }; const getIfInWebview = (userAgent: NavigatorID["userAgent"]) => { @@ -30,7 +31,7 @@ const useMobileDetect = () => { return getIfInWebview(userAgent); }; -const WebViewLayout: React.FC = ({ children }) => { +const WebViewLayout: React.FC = ({ children, fullScreen = true }) => { const { data: currentUser, error } = useSWR(CURRENT_USER, () => userService.currentUser()); const isWebview = useMobileDetect(); @@ -47,7 +48,7 @@ const WebViewLayout: React.FC = ({ children }) => { } return ( -
+
{error || !isWebview ? (
diff --git a/web/pages/m/[workspaceSlug]/editor.tsx b/web/pages/m/[workspaceSlug]/editor.tsx new file mode 100644 index 000000000..296b05ac9 --- /dev/null +++ b/web/pages/m/[workspaceSlug]/editor.tsx @@ -0,0 +1,104 @@ +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, + formState: { errors }, + } = useForm({ + defaultValues: { + data: "", + data_html: "", + }, + }); + + useEffect(() => { + setIsLoading(true); + if (!isEditable) return; + setIsLoading(false); + const data_html = Cookies.get("data_html"); + setValue("data_html", data_html ?? ""); + }, [isEditable, setValue]); + + return ( + + {isLoading ? ( +
+ +
+ ) : ( + <> + ( + { + onChange(description_html); + setValue("data_html", description_html); + setValue("data", JSON.stringify(description)); + }} + /> + )} + /> + {isEditable && ( + { + console.log( + "submitted", + JSON.stringify({ + data_html: watch("data_html"), + }) + ); + }} + > + Submit + + )} + + )} +
+ ); +}; + +export default Editor;