diff --git a/app/layout.tsx b/app/layout.tsx
index 6f9842b..b61fee3 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -12,7 +12,7 @@ import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
- title: "Docx",
+ title: "DocX",
description:
"An open-source alternative to Google Docs, that lets you write and customize your docs collaboratively with others",
};
diff --git a/app/writer/[id]/actions.ts b/app/writer/[id]/actions.ts
index 017ecd9..9f90f15 100644
--- a/app/writer/[id]/actions.ts
+++ b/app/writer/[id]/actions.ts
@@ -104,6 +104,7 @@ export const UpdateThumbnail = async (id: any, thumbnail: string) => {
error: "User is not logged in",
};
+ console.log(process.env.BACKEND_SERVER_URL)
const response = await fetch(`${process.env.BACKEND_SERVER_URL}/push-to-quque`, {
method: "POST",
headers: {
diff --git a/app/writer/[id]/components/options/format/ColorHighlight.tsx b/app/writer/[id]/components/options/format/ColorHighlight.tsx
index 5ee2d57..3f52a89 100644
--- a/app/writer/[id]/components/options/format/ColorHighlight.tsx
+++ b/app/writer/[id]/components/options/format/ColorHighlight.tsx
@@ -13,6 +13,11 @@ import {
import { Input } from "@/components/ui/input";
export default function ColorHighlight({ editor }: { editor: Editor | null }) {
+ const colorPopoverRef = useRef
(null);
+ const bgPopoverRef = useRef(null);
+
+ const [isColorPopoverOpen, setIsColorPopoverOpen] = useState(false);
+ const [isBgPopoverOpen, setIsBgPopoverOpen] = useState(false);
const [fontColor, setFontColor] = useState("#000000");
const [highlightColor, setHighlightColor] = useState("#fdfb7a");
@@ -27,6 +32,25 @@ export default function ColorHighlight({ editor }: { editor: Editor | null }) {
editor.chain().focus().toggleHighlight({ color: hex }).run();
};
+ const handleDocumentClick = (e: any) => {
+ if (
+ (colorPopoverRef.current &&
+ !colorPopoverRef.current.contains(e.target))
+ ||
+ (bgPopoverRef.current &&
+ !bgPopoverRef.current.contains(e.target))
+ ) {
+ setIsColorPopoverOpen(false);
+ setIsBgPopoverOpen(false);
+ }
+ };
+ useEffect(() => {
+ document.addEventListener("mousedown", handleDocumentClick);
+ return () => {
+ document.removeEventListener("mousedown", handleDocumentClick);
+ };
+ }, []);
+
return (
diff --git a/app/writer/[id]/page.tsx b/app/writer/[id]/page.tsx
index a192538..cf1c255 100644
--- a/app/writer/[id]/page.tsx
+++ b/app/writer/[id]/page.tsx
@@ -1,10 +1,9 @@
"use client";
-import { useState, useMemo, useCallback, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
import { useParams } from "next/navigation";
import { EditorContent } from "@tiptap/react";
import { useEditor } from "@tiptap/react";
-import { debounce } from "lodash";
import { toast } from "sonner";
import html2canvas from "html2canvas";
import Collaboration from "@tiptap/extension-collaboration";
@@ -13,6 +12,7 @@ import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
import { ScrollArea } from "@/components/ui/scroll-area";
import { getRandomColor } from "@/helpers/getRandomColor";
import type { Document } from "@prisma/client";
+import useDebounce from "@/lib/customHooks/useDebounce";
import { ydoc, provider, extensions, props } from "./editor/editorConfig";
import { FormatOptions, InsertOptions } from "./components/options";
@@ -24,14 +24,22 @@ import Loading from "./components/EditorLoading";
export default function Dashboard() {
const params = useParams();
+ const editorRef = useRef(null);
+
+ const [isFirstLoad, setIsFirstLoad] = useState(true);
+ const [name, setName] = useState("");
const [option, setOption] = useState(0);
const [isSaving, setIsSaving] = useState(false);
const [docData, setDocData] = useState(undefined);
const [status, setStatus] = useState("connecting");
- console.log(status);
+ // console.log(status);
- const editorRef = useRef(null);
+ useEffect(() => {
+ setName(localStorage.getItem("name") || "");
+ setIsFirstLoad(false);
+ }, [])
+ // Doc data fetching
useEffect(() => {
(async () => {
const response = await GetDocDetails(params.id);
@@ -61,7 +69,7 @@ export default function Dashboard() {
}
}, [docData?.id, params.id]);
- const saveDoc = useCallback(async (editor: any) => {
+ const debounce = useDebounce(async (editor: any) => {
setIsSaving(true);
const response = await UpdateDocData(
@@ -74,12 +82,7 @@ export default function Dashboard() {
}
setIsSaving(false);
toast.error(response.error);
- }, [params.id, createDocThumbnail]);
-
- const debouncedSaveDoc = useMemo(
- () => debounce((editor: any) => saveDoc(editor), 1000),
- [saveDoc],
- );
+ }, 1000);
const editor = useEditor({
onCreate: ({ editor: currentEditor }) => {
@@ -97,7 +100,7 @@ export default function Dashboard() {
CollaborationCursor.configure({
provider,
user: {
- name: localStorage.getItem("name"),
+ name,
color: getRandomColor(),
},
}),
@@ -105,7 +108,9 @@ export default function Dashboard() {
editorProps: props,
content: "",
onUpdate({ editor }) {
- debouncedSaveDoc(editor);
+ if (!isFirstLoad) {
+ debounce(editor);
+ }
},
});
@@ -128,10 +133,10 @@ export default function Dashboard() {
editor
.chain()
.focus()
- .updateUser({ name: localStorage.getItem("name") })
+ .updateUser({ name })
.run();
}
- }, [editor]);
+ }, [editor, name]);
// Set content of the doc
useEffect(() => {
diff --git a/components/AvatarList.tsx b/components/AvatarList.tsx
index 81dc676..8ddef72 100644
--- a/components/AvatarList.tsx
+++ b/components/AvatarList.tsx
@@ -1,4 +1,6 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import React from "react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
import type { User } from "@prisma/client";
import getInitials from "@/helpers/getInitials";
@@ -10,17 +12,20 @@ type AvatarListPropType = {
export default function AvatarList({ users }: AvatarListPropType) {
return (
-
+
{users.map((e, index) => {
return (
-
+
+
+
{getInitials(e.user.name ?? "X")}
+
{e.user.picture ? (
-
- ) : (
-
{getInitials(e.user.name)}
- )}
-
- );
+
+
+
+ ) : <>}
+
);
diff --git a/lib/customHooks/useDebounce.tsx b/lib/customHooks/useDebounce.tsx
new file mode 100644
index 0000000..bdc9c81
--- /dev/null
+++ b/lib/customHooks/useDebounce.tsx
@@ -0,0 +1,20 @@
+import { debounce } from "lodash";
+import { useEffect, useMemo, useRef } from "react";
+
+export default function useDebounce
(
+ callbackFunction: ((value: D) => void) | ((value: D) => Promise),
+ debounceDelay: number,
+) {
+ const callbackRef = useRef(callbackFunction);
+
+ useEffect(() => {
+ callbackRef.current = callbackFunction;
+ }, [callbackFunction ]);
+
+ const debounceFunc = useMemo(
+ () => debounce((value: D) => callbackRef.current(value), debounceDelay),
+ [debounceDelay]
+ );
+
+ return debounceFunc;
+}