forked from github/plane
fix: authorize editor (#2122)
This commit is contained in:
parent
8de93d0081
commit
7842c4b2ea
@ -15,6 +15,7 @@ import { Spinner } from "components/ui";
|
|||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
fullScreen?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getIfInWebview = (userAgent: NavigatorID["userAgent"]) => {
|
const getIfInWebview = (userAgent: NavigatorID["userAgent"]) => {
|
||||||
@ -30,7 +31,7 @@ const useMobileDetect = () => {
|
|||||||
return getIfInWebview(userAgent);
|
return getIfInWebview(userAgent);
|
||||||
};
|
};
|
||||||
|
|
||||||
const WebViewLayout: React.FC<Props> = ({ children }) => {
|
const WebViewLayout: React.FC<Props> = ({ children, fullScreen = true }) => {
|
||||||
const { data: currentUser, error } = useSWR(CURRENT_USER, () => userService.currentUser());
|
const { data: currentUser, error } = useSWR(CURRENT_USER, () => userService.currentUser());
|
||||||
|
|
||||||
const isWebview = useMobileDetect();
|
const isWebview = useMobileDetect();
|
||||||
@ -47,7 +48,7 @@ const WebViewLayout: React.FC<Props> = ({ children }) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-screen w-full bg-custom-background-100">
|
<div className={fullScreen ? "h-screen w-full bg-custom-background-100" : ""}>
|
||||||
{error || !isWebview ? (
|
{error || !isWebview ? (
|
||||||
<div className="flex flex-col items-center justify-center gap-y-3 h-full text-center text-custom-text-200">
|
<div className="flex flex-col items-center justify-center gap-y-3 h-full text-center text-custom-text-200">
|
||||||
<AlertCircle size={64} />
|
<AlertCircle size={64} />
|
||||||
|
104
web/pages/m/[workspaceSlug]/editor.tsx
Normal file
104
web/pages/m/[workspaceSlug]/editor.tsx
Normal file
@ -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 (
|
||||||
|
<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;
|
Loading…
Reference in New Issue
Block a user