add: notion style editor, not-found.tsx page

Author: Souraevshing

.lintstagedrc.js

@@ -1,4 +1,5 @@
 // .lintstagedrc.js
 module.exports = {
-  "src/**/*.js": ["npm run lint:js"],
+  "app/**/*.js": ["npm run lint:js"],
+  "app/**/*.ts": ["npm run lint:js"],
 };

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#b4e900",
+    "activityBar.background": "#b4e900",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#0094bf",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#15202b99",
+    "sash.hoverBorder": "#b4e900",
+    "statusBar.background": "#8db600",
+    "statusBar.foreground": "#15202b",
+    "statusBarItem.hoverBackground": "#658300",
+    "statusBarItem.remoteBackground": "#8db600",
+    "statusBarItem.remoteForeground": "#15202b",
+    "titleBar.activeBackground": "#8db600",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveBackground": "#8db60099",
+    "titleBar.inactiveForeground": "#15202b99"
+  },
+  "peacock.color": "#8DB600"
+}

app/(main)/(routes)/documents/[documentId]/page.tsx

@@ -1,11 +1,14 @@
 "use client";
 
-import { useQuery } from "convex/react";
+import dynamic from "next/dynamic";
+import { useMemo } from "react";
+import { useMutation, useQuery } from "convex/react";
 
 import { Cover } from "@/components/cover";
 import { Id } from "@/convex/_generated/dataModel";
 import { api } from "@/convex/_generated/api";
 import { Toolbar } from "@/components/toolbar";
+import { Skeleton } from "@/components/ui/skeleton";
 
 interface DocumentIdPageProps {
   params: {
@@ -17,12 +20,34 @@ interface DocumentIdPageProps {
  * @description page to render for url `/documents/${documentId}`
  */
 const DocumentIdPage = ({ params }: DocumentIdPageProps) => {
+  const Editor = useMemo(
+    () => dynamic(() => import("@/components/editor"), { ssr: false }),
+    []
+  );
+
   const document = useQuery(api.documents.getDocumentById, {
     documentId: params.documentId,
   });
 
+  const update = useMutation(api.documents.updateDocuments);
+
+  const handleUpdate = (content: string) => {
+    update({ id: params.documentId, content });
+  };
   if (document === undefined) {
-    return <div>loading</div>;
+    return (
+      <div>
+        <Cover.Skeleton />
+        <div className="md:max-w-3xl lg:max-w-4xl mx-auto mt-10">
+          <div className="space-y-4 pl-8 pt-4">
+            <Skeleton className="h-14 w-[50%]" />
+            <Skeleton className="h-4 w-[80%]" />
+            <Skeleton className="h-4 w-[40%]" />
+            <Skeleton className="h-4 w-[60%]" />
+          </div>
+        </div>
+      </div>
+    );
   }
 
   if (document === null) {
@@ -35,6 +60,7 @@ const DocumentIdPage = ({ params }: DocumentIdPageProps) => {
         <Cover url={document.coverImage} />
         <div className="md:max-w-3xl lg:max-w-4xl mx-auto">
           <Toolbar initialData={document} />
+          <Editor onChange={handleUpdate} initialContent={document.content} />
         </div>
       </div>
     </>

app/(main)/(routes)/documents/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 import React from "react";
 import { LucidePlusCircle } from "lucide-react";
 import { useUser } from "@clerk/clerk-react";
@@ -11,10 +12,14 @@ import { Button } from "@/components/ui/button";
 import { api } from "@/convex/_generated/api";
 
 const Documents = () => {
+  const router = useRouter();
   const { user } = useUser();
   const createNote = useMutation(api.documents.createNote); //call createNote fn and pass it to useMutation hook to create new note
+
   const handleCreateNote = () => {
-    const promise = createNote({ title: "Untitled" });
+    const promise = createNote({ title: "Untitled" }).then((documentId) =>
+      router.push(`/documents/${documentId}`)
+    );
 
     toast.promise(promise, {
       loading: "Creating note...",

app/(main)/_components/item.tsx

@@ -53,10 +53,10 @@ export const Item = ({
 }: ItemProps) => {
   const ChevronIcon = expanded ? ChevronDown : ChevronRight;
 
+  const router = useRouter();
   const user = useUser();
 
   const create = useMutation(api.documents.createNote);
-
   const archive = useMutation(api.documents.archiveDocuments);
 
   /**
@@ -75,6 +75,11 @@ export const Item = ({
     const promise = create({
       title: "Untitled",
       parentDocument: id,
+    }).then((documentId) => {
+      if (!expanded) {
+        onExpand?.();
+      }
+      router.push(`/documents/${documentId}`);
     });
 
     toast.promise(promise, {
@@ -88,7 +93,10 @@ export const Item = ({
     if (!id) {
       return;
     }
-    const promise = archive({ id });
+
+    const promise = archive({ id }).then((documentId) =>
+      router.push("/documents")
+    );
 
     toast.promise(promise, {
       loading: "Deleting note...",

app/(main)/_components/navigation.tsx

@@ -7,7 +7,7 @@ import {
   Settings2Icon,
   Trash2Icon,
 } from "lucide-react";
-import { usePathname, useParams } from "next/navigation";
+import { usePathname, useParams, useRouter } from "next/navigation";
 import React, { ElementRef, useEffect, useRef, useState } from "react";
 import { useMediaQuery } from "usehooks-ts";
 import { useMutation } from "convex/react";
@@ -30,7 +30,7 @@ import { Navbar } from "./navbar";
 
 const Navigation = () => {
   //hooks to interact with app
-
+  const router = useRouter();
   const settings = useSettings();
   const search = useSearch();
   const params = useParams();
@@ -155,7 +155,9 @@ const Navigation = () => {
   }, [pathname, isMobile]);
 
   const handleCreateNote = () => {
-    const promise = createNote({ title: "Untitled" });
+    const promise = createNote({ title: "Untitled" }).then((documentId) =>
+      router.push(`/documents/${documentId}`)
+    );
 
     toast.promise(promise, {
       loading: "Creating note...",

app/api/edgestore/[...edgestore]/route.ts

@@ -5,13 +5,18 @@ const es = initEdgeStore.create();
  * This is the main router for the Edge Store buckets.
  */
 const edgeStoreRouter = es.router({
-  publicFiles: es.fileBucket(),
+  publicFiles: es.fileBucket().beforeDelete(() => {
+    return true; // allow delete
+  }),
 });
+
 const handler = createEdgeStoreNextHandler({
   router: edgeStoreRouter,
 });
+
 export { handler as GET, handler as POST };
 /**
  * This type is used to create the type-safe client for the frontend.
  */
+
 export type EdgeStoreRouter = typeof edgeStoreRouter;

app/not-found.tsx

@@ -0,0 +1,34 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function NotFound() {
+  return (
+    <>
+      <div className="h-full flex flex-col items-center justify-center space-y-4">
+        <Image
+          src="/images/error-light.png"
+          alt="error"
+          height="300"
+          width="300"
+          className="dark:hidden"
+        />
+        <Image
+          src="/images/error-dark.png"
+          alt="error"
+          height="300"
+          width="300"
+          className="hidden dark:block"
+        />{" "}
+        <h2 className="text-xl font-medium text-center justify-center flex">
+          Something went wrong!
+        </h2>
+        <Button asChild>
+          <Link href="/documents" />
+          Back to homepage
+        </Button>
+      </div>
+    </>
+  );
+}

components/cover.tsx

@@ -10,19 +10,28 @@ import { Button } from "@/components/ui/button";
 import { useCoverImage } from "@/hooks/use-cover-image";
 import { Id } from "@/convex/_generated/dataModel";
 import { api } from "@/convex/_generated/api";
+import { useEdgeStore } from "@/lib/edgestore";
+import { Skeleton } from "@/components/ui/skeleton";
 
 interface CoverImageProps {
   url?: string;
   preview?: boolean;
 }
 
 export const Cover = ({ preview, url }: CoverImageProps) => {
+  const { edgestore } = useEdgeStore();
+
   const coverImage = useCoverImage();
   const params = useParams();
 
   const removeCoverImage = useMutation(api.documents.removeCoverImage);
 
-  const handleRemoveCoverImage = () => {
+  const handleRemoveCoverImage = async () => {
+    if (url) {
+      await edgestore.publicFiles.delete({
+        url: url!,
+      });
+    }
     removeCoverImage({ id: params.documentId as Id<"documents"> });
   };
 
@@ -39,7 +48,7 @@ export const Cover = ({ preview, url }: CoverImageProps) => {
         <div className="opacity-0 group-hover:opacity-100 absolute bottom-5 right-5 flex items-center gap-x-2">
           <Button
             type="button"
-            onClick={coverImage.onOpen}
+            onClick={() => coverImage.onReplace(url)}
             variant="outline"
             size="sm"
             className="text-muted-foreground text-xs"
@@ -62,3 +71,7 @@ export const Cover = ({ preview, url }: CoverImageProps) => {
     </div>
   );
 };
+
+Cover.Skeleton = function CoverSkeleton() {
+  return <Skeleton className="w-full h-[12vh]" />;
+};

components/editor.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import {
+  BlockConfig,
+  BlockNoteEditor,
+  BlockSchemaFromSpecs,
+  BlockSpecs,
+  InlineContentSchema,
+  InlineContentSchemaFromSpecs,
+  InlineContentSpecs,
+  PartialBlock,
+  StyleSchema,
+  StyleSchemaFromSpecs,
+  StyleSpecs,
+} from "@blocknote/core";
+import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import "@blocknote/core/style.css";
+import { useEdgeStore } from "@/lib/edgestore";
+import { useTheme } from "next-themes";
+
+interface EditorProps {
+  onChange: (value: string) => void;
+  initialContent?: string;
+  editable?: boolean;
+}
+
+type BlockConfigMap = Record<string, BlockConfig>;
+
+const Editor = ({ onChange, initialContent, editable }: EditorProps) => {
+  const { edgestore } = useEdgeStore();
+  const { resolvedTheme } = useTheme();
+
+  const handleUpload = async (file: File) => {
+    const response = await edgestore.publicFiles.upload({
+      file,
+    });
+
+    return response.url;
+  };
+
+  const editor: BlockNoteEditor<
+    BlockSchemaFromSpecs<BlockSpecs>,
+    InlineContentSchemaFromSpecs<InlineContentSpecs>,
+    StyleSchemaFromSpecs<StyleSpecs>
+  > = useBlockNote({
+    editable,
+    initialContent: initialContent
+      ? (JSON.parse(initialContent) as PartialBlock<
+          BlockConfigMap,
+          InlineContentSchema,
+          StyleSchema
+        >[])
+      : undefined,
+    onEditorContentChange: (editor) => {
+      onChange(JSON.stringify(editor.topLevelBlocks, null, 2));
+    },
+    uploadFile: handleUpload,
+  });
+
+  return (
+    <>
+      <div>
+        <BlockNoteView
+          editor={editor}
+          theme={resolvedTheme === "dark" ? "dark" : "light"}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Editor;

components/modals/cover-image-modal.tsx

@@ -33,6 +33,9 @@ export const CoverImageModal = () => {
 
       const res = await edgestore.publicFiles.upload({
         file,
+        options: {
+          replaceTargetUrl: coverImage.url,
+        },
       });
 
       await update({

hooks/use-cover-image.tsx

@@ -1,16 +1,20 @@
 import { create } from "zustand";
 
 type CoverImageStore = {
+  url?: string;
   isOpen: boolean;
   onOpen: () => void;
   onClose: () => void;
+  onReplace: (url: string) => void;
 };
 
 /**
  * @description hook to open/close cover image modal
  */
 export const useCoverImage = create<CoverImageStore>((set) => ({
+  url: undefined,
   isOpen: false,
-  onOpen: () => set({ isOpen: true }),
-  onClose: () => set({ isOpen: false }),
+  onOpen: () => set({ isOpen: true, url: undefined }),
+  onClose: () => set({ isOpen: false, url: undefined }),
+  onReplace: (url: string) => set({ isOpen: true, url }),
 }));