release 0.3.4
This commit is contained in:
songjunxi
506
apps/web/app/post/[id]/editor.tsx
Normal file
506
apps/web/app/post/[id]/editor.tsx
Normal file
@@ -0,0 +1,506 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
useRef,
|
||||
Dispatch,
|
||||
SetStateAction,
|
||||
} from "react";
|
||||
import { Editor as InkeEditor } from "inkejs";
|
||||
import { JSONContent } from "@tiptap/react";
|
||||
import useLocalStorage from "@/lib/hooks/use-local-storage";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
import { Content_Storage_Key, Default_Debounce_Duration } from "@/lib/consts";
|
||||
import { ContentItem } from "@/lib/types/note";
|
||||
import {
|
||||
exportAsJson,
|
||||
exportAsMarkdownFile,
|
||||
fetcher,
|
||||
fomatTmpDate,
|
||||
timeAgo,
|
||||
} from "@/lib/utils";
|
||||
import Menu from "@/ui/menu";
|
||||
import UINotFound from "@/ui/layout/not-found";
|
||||
import { toPng } from "html-to-image";
|
||||
import { usePDF } from "react-to-pdf";
|
||||
import { Session } from "next-auth";
|
||||
import { IResponse } from "@/lib/types/response";
|
||||
import { ShareNote } from "@prisma/client";
|
||||
import { LoadingCircle, LoadingDots } from "@/ui/shared/icons";
|
||||
import { BadgeInfo, ExternalLink, Shapes, Clipboard } from "lucide-react";
|
||||
import toast, { Toaster } from "react-hot-toast";
|
||||
import {
|
||||
useCollaborationByLocalId,
|
||||
useCollaborationRoomId,
|
||||
useUserInfoByEmail,
|
||||
useUserShareNotes,
|
||||
} from "./request";
|
||||
import Link from "next/link";
|
||||
import Tooltip from "@/ui/shared/tooltip";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import db, { noteTable, updateNote } from "@/store/db.model";
|
||||
|
||||
export default function Editor({
|
||||
id,
|
||||
session,
|
||||
contents,
|
||||
setShowRoomModal,
|
||||
}: {
|
||||
id?: string;
|
||||
session: Session | null;
|
||||
contents: ContentItem[];
|
||||
setShowRoomModal: Dispatch<SetStateAction<boolean>>;
|
||||
}) {
|
||||
const params = useSearchParams();
|
||||
const [collaboration, setCollaboration] = useState(false);
|
||||
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [debounceDuration, setDebounceDuration] = useState(
|
||||
Default_Debounce_Duration,
|
||||
);
|
||||
const [saveStatus, setSaveStatus] = useState("Saved");
|
||||
const [isLoading, setLoading] = useState(true);
|
||||
const [isSharing, setSharing] = useState(false);
|
||||
const [isShowShareLink, setShowShareLink] = useState(false);
|
||||
const [currentRoomId, setCurrentRoomId] = useState("");
|
||||
|
||||
const [currentIndex, setCurrentIndex] = useState(-1);
|
||||
const [currentContent, setCurrentContent] = useLocalStorage<JSONContent>(
|
||||
Content_Storage_Key,
|
||||
{},
|
||||
);
|
||||
const [currentPureContent, setPureContent] = useState("");
|
||||
|
||||
const { shares } = useUserShareNotes();
|
||||
const { user } = useUserInfoByEmail(session?.user.email);
|
||||
const { room, isLoading: isLoadingRoom } = useCollaborationRoomId(
|
||||
params.get("work"),
|
||||
);
|
||||
const { room: localRoom } = useCollaborationByLocalId(id);
|
||||
|
||||
const { toPDF, targetRef } = usePDF({ filename: "note.pdf" });
|
||||
|
||||
useEffect(() => {
|
||||
const roomId = params.get("work");
|
||||
if (roomId) {
|
||||
if (room && room.code === 200) {
|
||||
setCurrentRoomId(roomId);
|
||||
setCollaboration(true);
|
||||
}
|
||||
if (id && contents.length > 0) {
|
||||
const index = contents.findIndex((item) => item.id === id);
|
||||
if (index !== -1 && contents[index]) {
|
||||
setCurrentContent({});
|
||||
setCurrentIndex(index);
|
||||
document.title = "Space | Inke";
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (id && contents.length > 0) {
|
||||
setLoading(true);
|
||||
const index = contents.findIndex((item) => item.id === id);
|
||||
|
||||
if (index !== -1 && contents[index]) {
|
||||
setCurrentContent(contents[index].content ?? {});
|
||||
setCurrentIndex(index);
|
||||
document.title = `${contents[index].title} | Inke`;
|
||||
}
|
||||
}
|
||||
}
|
||||
setLoading(false);
|
||||
}, [id, contents, room]);
|
||||
|
||||
const debouncedUpdates = useDebouncedCallback(
|
||||
async (value, text, markdown) => {
|
||||
handleUpdateItem(id, value);
|
||||
setPureContent(markdown);
|
||||
},
|
||||
debounceDuration,
|
||||
);
|
||||
|
||||
const handleUpdateItem = (id: string, updatedContent: JSONContent) => {
|
||||
if (currentIndex !== -1) {
|
||||
updateNote({
|
||||
...contents[currentIndex],
|
||||
content: updatedContent,
|
||||
updated_at: new Date().getTime(),
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleExportImage = useCallback(() => {
|
||||
if (ref.current === null || currentIndex === -1 || saveStatus !== "Saved") {
|
||||
return;
|
||||
}
|
||||
|
||||
toPng(ref.current, {
|
||||
cacheBust: true,
|
||||
width: ref.current.scrollWidth,
|
||||
height: ref.current.scrollHeight,
|
||||
})
|
||||
.then((dataUrl) => {
|
||||
const link = document.createElement("a");
|
||||
link.download = contents[currentIndex].title + ".png";
|
||||
link.href = dataUrl;
|
||||
link.click();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}, [ref, currentIndex, contents]);
|
||||
|
||||
const handleExportJson = () => {
|
||||
if (!contents || currentIndex === -1 || saveStatus !== "Saved") return;
|
||||
exportAsJson(contents[currentIndex], contents[currentIndex].title);
|
||||
};
|
||||
|
||||
const handleExportMarkdown = () => {
|
||||
if (
|
||||
currentPureContent.length === 0 ||
|
||||
currentIndex === -1 ||
|
||||
saveStatus !== "Saved"
|
||||
)
|
||||
return;
|
||||
|
||||
exportAsMarkdownFile(currentPureContent, contents[currentIndex].title);
|
||||
};
|
||||
|
||||
const handleExportPDF = () => {
|
||||
toPDF();
|
||||
};
|
||||
|
||||
const handleCreateShare = async () => {
|
||||
if (saveStatus !== "Saved") return;
|
||||
setSharing(true);
|
||||
const res = await fetcher<IResponse<ShareNote | null>>("/api/share", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
data: contents[currentIndex],
|
||||
}),
|
||||
});
|
||||
if (res.code !== 200) {
|
||||
toast(res.msg, {
|
||||
icon: "😅",
|
||||
});
|
||||
} else {
|
||||
toast.success(res.msg, {
|
||||
icon: "🎉",
|
||||
});
|
||||
if (!isShowShareLink) setShowShareLink(true);
|
||||
}
|
||||
setSharing(false);
|
||||
};
|
||||
|
||||
const handleCreateCollaboration = async () => {
|
||||
// 用户当前本地笔记是否已加入协作
|
||||
if (localRoom && localRoom.code === 200) return;
|
||||
|
||||
if (!currentRoomId) {
|
||||
setShowRoomModal(true);
|
||||
} else if (currentRoomId && !collaboration) {
|
||||
// url有roomid但是没有加入
|
||||
console.log("url有roomid但是没有加入", room);
|
||||
} else if (currentRoomId && collaboration) {
|
||||
// url有roomid且已经加入
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading || (params.get("work") && isLoadingRoom))
|
||||
return (
|
||||
<div className="m-6">
|
||||
<LoadingCircle className="h-6 w-6" />
|
||||
</div>
|
||||
);
|
||||
|
||||
if (params.get("work") && room.code !== 200)
|
||||
return (
|
||||
<>
|
||||
<div className="relative mx-auto h-screen w-full overflow-auto px-12 pt-12">
|
||||
<Shapes className="mx-auto h-12 w-12 text-purple-400 hover:text-slate-500" />
|
||||
<h1 className="my-4 text-center text-2xl font-semibold">
|
||||
Wrong collaboration space
|
||||
</h1>
|
||||
<p>
|
||||
You are accessing a multiplayer collaboration space, but there seems
|
||||
to be an unexpected issue:{" "}
|
||||
<span className="font-bold text-slate-800">{room.msg}</span>. Please
|
||||
check your space id (<strong>{params.get("work")}</strong>) and try
|
||||
it again.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster />
|
||||
<div className="relative flex h-screen w-full justify-center overflow-auto">
|
||||
<div className="bg-white/50 absolute z-10 mb-5 flex w-full items-center justify-end gap-2 px-3 py-2 backdrop-blur-xl">
|
||||
<span className="hidden text-xs text-slate-400 md:block">
|
||||
Created at{" "}
|
||||
{currentIndex !== -1 &&
|
||||
fomatTmpDate(contents[currentIndex]?.created_at || 0)}
|
||||
</span>
|
||||
|
||||
<div className="mr-auto flex items-center justify-center gap-2 rounded-lg bg-stone-100 px-2 py-1 text-sm ">
|
||||
<i
|
||||
style={{
|
||||
width: "9px",
|
||||
height: "9px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor:
|
||||
saveStatus === "Saved"
|
||||
? "#00d2ee"
|
||||
: saveStatus === "Saving..."
|
||||
? "#ff6b2c"
|
||||
: "#919191",
|
||||
display: "block",
|
||||
transition: "all 0.5s",
|
||||
}}
|
||||
/>
|
||||
<span className="text-xs text-slate-400 transition-all">
|
||||
{saveStatus}{" "}
|
||||
{saveStatus === "Saved" &&
|
||||
currentIndex !== -1 &&
|
||||
timeAgo(contents[currentIndex]?.updated_at || 0)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Tooltip
|
||||
content={
|
||||
<div className="w-72 px-3 py-2 text-sm text-slate-400">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="font-semibold text-slate-500">
|
||||
Collaborative Space
|
||||
</h1>
|
||||
|
||||
{collaboration && room && room.data && (
|
||||
<Clipboard
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`https://inke.app/invite/${room.data.id}`,
|
||||
);
|
||||
toast("Copied to clipboard");
|
||||
}}
|
||||
className="h-4 w-4 cursor-pointer text-cyan-500 hover:text-slate-300 active:text-green-500 "
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{collaboration && room && room.data ? (
|
||||
<p className="mt-2 hyphens-manual">
|
||||
This note has enabled multi person collaboration, Copy the{" "}
|
||||
<Link
|
||||
className="text-cyan-500 after:content-['_↗'] hover:opacity-80"
|
||||
href={`/invite/${room.data.id}`}
|
||||
target="_blank"
|
||||
>
|
||||
invite link
|
||||
</Link>{" "}
|
||||
to invite others to join the collaboration.
|
||||
</p>
|
||||
) : localRoom && localRoom.code === 200 ? (
|
||||
<p className="mt-2 hyphens-manual">
|
||||
This local note is already associated with a collaboration
|
||||
space. Click the link below to jump to the collaboration:{" "}
|
||||
<Link
|
||||
className="text-cyan-500 after:content-['_↗'] hover:text-cyan-300"
|
||||
href={`/post/${id}?work=${localRoom.data.roomId}`}
|
||||
target="_blank"
|
||||
>
|
||||
space-{localRoom.data.roomId}
|
||||
</Link>
|
||||
</p>
|
||||
) : (
|
||||
<p className="mt-2 hyphens-manual">
|
||||
Now, Inke supports collaborative editing of docs by multiple
|
||||
team members. Start by creating collaborative space. Learn
|
||||
more about{" "}
|
||||
<Link
|
||||
className="text-cyan-600 after:content-['_↗'] hover:text-cyan-300"
|
||||
href={`/collaboration`}
|
||||
target="_blank"
|
||||
>
|
||||
collaboration space
|
||||
</Link>
|
||||
. <br />
|
||||
Note: You need to{" "}
|
||||
<strong className="text-slate-900">sign in first</strong> to
|
||||
try this feature.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
fullWidth={false}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
{collaboration && room && room.data ? (
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(
|
||||
`https://inke.app/invite/${room.data.id}`,
|
||||
);
|
||||
toast("Copied to clipboard");
|
||||
}}
|
||||
className="hover:opacity-800 mr-2 text-sm text-cyan-500"
|
||||
>
|
||||
Invite
|
||||
</button>
|
||||
) : (
|
||||
<button className="mr-2" onClick={handleCreateCollaboration}>
|
||||
<Shapes className="h-5 w-5 text-cyan-500 hover:opacity-80" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
{((shares &&
|
||||
shares.data &&
|
||||
shares.data.find((i) => i.localId === id)) ||
|
||||
isShowShareLink) && (
|
||||
<Link href={`/publish/${id}`} target="_blank">
|
||||
<ExternalLink className="h-5 w-5 text-cyan-500 hover:text-cyan-300" />
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="ml-1 flex h-7 w-20 items-center justify-center gap-1 rounded-md bg-cyan-500 px-4 py-1 text-sm text-white transition-all hover:opacity-80"
|
||||
onClick={handleCreateShare}
|
||||
disabled={isSharing || saveStatus !== "Saved"}
|
||||
>
|
||||
{isSharing ? (
|
||||
<LoadingDots color="#fff" />
|
||||
) : (
|
||||
<span className="bg-gradient-to-r from-red-200 via-yellow-300 to-orange-200 bg-clip-text font-semibold text-transparent">
|
||||
Publish
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<Tooltip
|
||||
content={
|
||||
<div className="w-64 px-3 py-2 text-sm text-slate-400">
|
||||
<h1 className="mb-2 font-semibold text-slate-500">
|
||||
Publish and Share
|
||||
</h1>
|
||||
<p>
|
||||
Click the <code>`Publish`</code> button to save your note
|
||||
remotely and generate a sharing link, allowing you to share
|
||||
your notes with others. Your notes will be uploaded after
|
||||
serialization. e.g{" "}
|
||||
<a
|
||||
className="text-cyan-500 after:content-['_↗'] hover:text-cyan-300"
|
||||
href="https://inke.app/publish/0e1be533-ae66-4ffa-9725-bd6b84899e78"
|
||||
target="_blank"
|
||||
>
|
||||
link
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<p>
|
||||
You need to <strong>sign in</strong> first to try this
|
||||
feature.
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
fullWidth={false}
|
||||
>
|
||||
<button className="hidden sm:block">
|
||||
<BadgeInfo className="h-4 w-4 text-slate-400 hover:text-slate-500" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Menu
|
||||
onExportImage={handleExportImage}
|
||||
onExportJson={handleExportJson}
|
||||
onExportTxT={handleExportMarkdown}
|
||||
onExportPDF={handleExportPDF}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{id &&
|
||||
currentIndex === -1 &&
|
||||
!isLoading &&
|
||||
(collaboration && room && room.data ? (
|
||||
<div className="relative mx-auto mt-10 h-screen w-full overflow-auto px-12 pt-12">
|
||||
<Shapes className="mx-auto h-12 w-12 text-cyan-500" />
|
||||
<h1 className="my-4 text-center text-2xl font-semibold">
|
||||
Sync collaboration space
|
||||
</h1>
|
||||
<p className="mt-2 hyphens-manual">
|
||||
It seems that you have joined this collaboration space (
|
||||
{room.data.title}), but this device has not been created. Copy
|
||||
this{" "}
|
||||
<Link
|
||||
className="text-cyan-500 after:content-['_↗'] hover:opacity-80"
|
||||
href={`/invite/${room.data.id}`}
|
||||
target="_blank"
|
||||
>
|
||||
invite link
|
||||
</Link>{" "}
|
||||
and recreate a local record to enter.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<UINotFound />
|
||||
))}
|
||||
|
||||
{contents && currentIndex !== -1 && (
|
||||
<div ref={ref} className="w-full max-w-screen-lg overflow-auto">
|
||||
<div ref={targetRef}>
|
||||
{params.get("work") ? (
|
||||
<InkeEditor
|
||||
className="relative min-h-screen overflow-y-auto overflow-x-hidden border-stone-200 bg-white pt-1"
|
||||
storageKey={Content_Storage_Key}
|
||||
debounceDuration={debounceDuration}
|
||||
defaultValue={currentContent}
|
||||
plan={user?.plan || "5"}
|
||||
bot={true}
|
||||
id={params.get("work")}
|
||||
collaboration={true}
|
||||
userName={user?.name || "unknown"}
|
||||
onUpdate={() => setSaveStatus("Unsaved")}
|
||||
onDebouncedUpdate={(
|
||||
json: JSONContent,
|
||||
text: string,
|
||||
markdown: string,
|
||||
) => {
|
||||
setSaveStatus("Saving...");
|
||||
if (json) debouncedUpdates(json, text, markdown);
|
||||
setTimeout(() => {
|
||||
setSaveStatus("Saved");
|
||||
}, 500);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<InkeEditor
|
||||
className="relative min-h-screen overflow-y-auto overflow-x-hidden border-stone-200 bg-white pt-1"
|
||||
storageKey={Content_Storage_Key}
|
||||
debounceDuration={debounceDuration}
|
||||
defaultValue={currentContent}
|
||||
plan={user?.plan || "5"}
|
||||
bot={true}
|
||||
onUpdate={() => setSaveStatus("Unsaved")}
|
||||
onDebouncedUpdate={(
|
||||
json: JSONContent,
|
||||
text: string,
|
||||
markdown: string,
|
||||
) => {
|
||||
setSaveStatus("Saving...");
|
||||
if (json) debouncedUpdates(json, text, markdown);
|
||||
setTimeout(() => {
|
||||
setSaveStatus("Saved");
|
||||
}, 500);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user