feat: rename, remove direct document

src/app/(home)/TemplatesGallery.tsx

@@ -54,7 +54,7 @@ export const TemplatesGallery: React.FC = () => {
                     <button
                       disabled={isCreating}
                       onClick={() => {
-                        onTemplateClick(tpl.label, "");
+                        onTemplateClick(tpl.label, tpl.initialContent);
                       }}
                       style={{
                         backgroundImage: `url(${tpl.imageUrl})`,

src/app/(home)/document-menu.tsx

@@ -54,7 +54,13 @@ export const DocumentMenu: React.FC<Props> = ({
               Remove
             </DropdownMenuItem>
           </RemoveDialog>
-          <DropdownMenuItem onClick={() => onNewTab(documentId)}>
+          <DropdownMenuItem
+            onSelect={(e) => e.preventDefault()}
+            onClick={(e) => {
+              e.stopPropagation();
+              onNewTab(documentId);
+            }}
+          >
             <ExternalLinkIcon className="size-4 mr-2" />
             Open in a new tab
           </DropdownMenuItem>

src/app/api/auth/liveblocks/route.ts

@@ -6,13 +6,22 @@ import { api } from "../../../../../convex/_generated/api";
 // Ensure these environment variables are defined in your GitHub Actions workflow
 // Add error handling for missing environment variables
 const convex = new ConvexHttpClient(
-  process.env.NEXT_PUBLIC_CONVEX_URL ?? 
-  (() => { throw new Error("NEXT_PUBLIC_CONVEX_URL environment variable is not defined") })()
+  process.env.NEXT_PUBLIC_CONVEX_URL ??
+    (() => {
+      throw new Error(
+        "NEXT_PUBLIC_CONVEX_URL environment variable is not defined"
+      );
+    })()
 );
 
 const liveblocks = new Liveblocks({
-  secret: process.env.LIVE_BLOCK_SECRET_API_KEY ?? 
-    (() => { throw new Error("LIVE_BLOCK_SECRET_API_KEY environment variable is not defined") })()
+  secret:
+    process.env.LIVE_BLOCK_SECRET_API_KEY ??
+    (() => {
+      throw new Error(
+        "LIVE_BLOCK_SECRET_API_KEY environment variable is not defined"
+      );
+    })(),
 });
 
 export async function POST(req: Request) {

src/app/document/[documentId]/(navbar)/menu-bar.tsx

@@ -32,13 +32,43 @@ import {
   Undo2Icon,
 } from "lucide-react";
 import { Doc } from "../../../../../convex/_generated/dataModel";
+import { useMutation } from "convex/react";
+import { api } from "../../../../../convex/_generated/api";
+import { useRouter } from "next/navigation";
+import { useToast } from "@/hooks/use-toast";
+import { RemoveDialog } from "@/components/remove-dialog";
+import { RenameDialog } from "@/components/rename-dialog";
 
 type Props = {
   data: Doc<"documents">;
 };
 
 export const MenuBar: React.FC<Props> = ({ data }) => {
+  const router = useRouter();
   const { editor } = useEditorStore();
+  const mutation = useMutation(api.document.create);
+  const { toast } = useToast();
+
+  const onNewDoc = () => {
+    mutation({
+      title: "Untitled",
+      initialContent: "",
+    })
+      .then((id) => {
+        toast({
+          title: "New document created",
+          description: "New document has been created.",
+        });
+        router.push(`/document/${id}`);
+      })
+      .catch(() => {
+        toast({
+          title: "Document creation failed",
+          description: "Your document could not be created",
+          variant: "destructive",
+        });
+      });
+  };
 
   const addTable = ({ rows, cols }: { rows: number; cols: number }) => {
     editor
@@ -129,22 +159,32 @@ export const MenuBar: React.FC<Props> = ({ data }) => {
               </MenubarSubContent>
             </MenubarSub>
 
-            <MenubarItem>
+            <MenubarItem onClick={onNewDoc}>
               <FilePlusIcon className="size-4 mr-2" />
               New Document
             </MenubarItem>
 
             <MenubarSeparator />
 
-            <MenubarItem>
-              <FilePenIcon className="size-4 mr-2" />
-              Rename
-            </MenubarItem>
+            <RenameDialog documentId={data._id} title={data.title}>
+              <MenubarItem
+                onClick={(e) => e.stopPropagation()}
+                onSelect={(e) => e.preventDefault()}
+              >
+                <FilePenIcon className="size-4 mr-2" />
+                Rename
+              </MenubarItem>
+            </RenameDialog>
 
-            <MenubarItem>
-              <TrashIcon className="size-4 mr-2" />
-              Remove
-            </MenubarItem>
+            <RemoveDialog documentId={data._id}>
+              <MenubarItem
+                onClick={(e) => e.stopPropagation()}
+                onSelect={(e) => e.preventDefault()}
+              >
+                <TrashIcon className="size-4 mr-2" />
+                Remove
+              </MenubarItem>
+            </RemoveDialog>
 
             <MenubarSeparator />
             <MenubarItem onClick={() => window?.print()}>

src/app/document/[documentId]/(ruler)/rulers.tsx

@@ -1,13 +1,10 @@
+import { INITIAL_MG, MINIMUM_SPACE, PAGE_WIDTH } from "@/constants/measure";
 import { useMutation, useStorage } from "@liveblocks/react/suspense";
 import React, { useRef, useState } from "react";
 import { Marker } from "./markers";
 
 const makers = Array.from({ length: 83 }, (_, i) => i);
 
-const PAGE_WIDTH = 816;
-const MINIMUM_SPACE = 100;
-const INITIAL_MG = 56;
-
 export const Ruler: React.FC = () => {
   const leftMg = useStorage((root) => root.leftMg) ?? INITIAL_MG;
   const rightMg = useStorage((root) => root.rightMg) ?? INITIAL_MG;

src/app/document/[documentId]/document.tsx

@@ -21,7 +21,7 @@ export const Document: React.FC<Props> = ({ preloadedDocument }) => {
         </div>
 
         <div className="pt-[114px] print:pt-0">
-          <Editor />
+          <Editor initialContent={document.initialContent} />
         </div>
       </div>
     </Room>

src/app/document/[documentId]/editor.tsx

@@ -18,6 +18,7 @@ import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import ResizeImage from "tiptap-extension-resize-image";
 
+import { INITIAL_MG } from "@/constants/measure";
 import { FontSizeExtension } from "@/extensions/font-size";
 import { LineHeightExtension } from "@/extensions/line-height";
 import { useLiveblocksExtension } from "@liveblocks/react-tiptap";
@@ -26,11 +27,18 @@ import TextStyle from "@tiptap/extension-text-style";
 import { Ruler } from "./(ruler)/rulers";
 import { Threads } from "./threads";
 
-export const Editor: React.FC = () => {
+type Props = {
+  initialContent?: string;
+};
+
+export const Editor: React.FC<Props> = ({ initialContent }) => {
   const leftMg = useStorage((root) => root.leftMg);
   const rightMg = useStorage((root) => root.rightMg);
   const { setEditor } = useEditorStore();
-  const liveblocks = useLiveblocksExtension();
+  const liveblocks = useLiveblocksExtension({
+    initialContent,
+    offlineSupport_experimental: true,
+  });
 
   const editor = useEditor({
     immediatelyRender: false,
@@ -60,7 +68,7 @@ export const Editor: React.FC = () => {
     },
     editorProps: {
       attributes: {
-        style: `padding-left: ${leftMg ?? 56}px; padding-right: ${rightMg ?? 56}px;`,
+        style: `padding-left: ${leftMg ?? INITIAL_MG}px; padding-right: ${rightMg ?? INITIAL_MG}px;`,
         class:
           "focus:outline-none print:border-0 bg-white  border-[#c7c7c7] flex flex-col min-h-[1054px] w-[816px] pt-10 pr-14 pb-10 cursor-text",
       },

src/app/document/[documentId]/room.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { FullscreenLoader } from "@/components/fullscreen-loader";
+import { INITIAL_MG } from "@/constants/measure";
 import { useToast } from "@/hooks/use-toast";
 import {
   ClientSideSuspense,
@@ -82,8 +83,8 @@ export function Room({ children }: { children: ReactNode }) {
       <RoomProvider
         id={params.documentId}
         initialStorage={{
-          leftMg: 56,
-          rightMg: 56,
+          leftMg: INITIAL_MG,
+          rightMg: INITIAL_MG,
         }}
       >
         <ClientSideSuspense

src/app/document/[documentId]/threads.tsx

@@ -1,12 +1,20 @@
-import { useThreads } from "@liveblocks/react/suspense";
 import {
   AnchoredThreads,
   FloatingComposer,
   FloatingThreads,
 } from "@liveblocks/react-tiptap";
+import { ClientSideSuspense, useThreads } from "@liveblocks/react/suspense";
 import { Editor } from "@tiptap/react";
 
-export function Threads({ editor }: { editor: Editor | null }) {
+export const Threads = ({ editor }: { editor: Editor | null }) => {
+  return (
+    <ClientSideSuspense fallback={null}>
+      <ThreadsList editor={editor} />
+    </ClientSideSuspense>
+  );
+};
+
+function ThreadsList({ editor }: { editor: Editor | null }) {
   const { threads } = useThreads({ query: { resolved: false } });
 
   return (
@@ -22,4 +30,4 @@ export function Threads({ editor }: { editor: Editor | null }) {
       <FloatingComposer editor={editor} className="floating-composer" />
     </>
   );
-}
+}

src/components/remove-dialog.tsx

@@ -2,6 +2,7 @@
 
 import { useToast } from "@/hooks/use-toast";
 import { useMutation } from "convex/react";
+import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 import { api } from "../../convex/_generated/api";
 import { Id } from "../../convex/_generated/dataModel";
@@ -25,6 +26,7 @@ export const RemoveDialog: React.FC<Props> = ({ children, documentId }) => {
   const remove = useMutation(api.document.remove);
   const [isRemoving, setIsRemoving] = useState<boolean>(false);
   const { toast } = useToast();
+  const router = useRouter();
 
   return (
     <AlertDialog>
@@ -47,12 +49,13 @@ export const RemoveDialog: React.FC<Props> = ({ children, documentId }) => {
               remove({
                 documentId,
               })
-                .then(() =>
+                .then(() => {
                   toast({
                     title: "Document removed!",
                     variant: "default",
-                  })
-                )
+                  });
+                  router.push("/");
+                })
                 .catch(() => {
                   toast({
                     title: "Cannot delete!",

src/components/rename-dialog.tsx

@@ -29,6 +29,7 @@ export const RenameDialog: React.FC<Props> = ({
 }) => {
   const rename = useMutation(api.document.update);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
+
   const [modifiedTitle, setModifiedTitle] = useState<string>(title);
   const [open, setOpen] = useState<boolean>(false);
   const { toast } = useToast();

src/constants/measure.ts

@@ -0,0 +1,3 @@
+export const PAGE_WIDTH = 816;
+export const MINIMUM_SPACE = 100;
+export const INITIAL_MG = 56;