feat: latex support, updated buttons, cleaned kanjou

Added Latex support for Kanjou. Added Share Document UI Fixes #19. Fixes collaboration cursor UI.
royce-mathew · Feb 17, 2025 · 8e2ca3e · 8e2ca3e
1 parent 8d7ab72
commit 8e2ca3e
Show file tree

Hide file tree

Showing 8 changed files with 263 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@aarkue/tiptap-math-extension": "^1.3.4",
     "@auth/core": "^0.37.4",
     "@auth/firebase-adapter": "^2.7.4",
     "@next/third-parties": "^15.1.7",
@@ -72,6 +73,7 @@
     "firebase-admin": "^13.1.0",
     "hastscript": "^9.0.0",
     "input-otp": "^1.4.2",
+    "katex": "^0.16.21",
     "lib0": "^0.2.99",
     "motion": "^12.4.3",
     "next": "^15.1.7",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(app)/kanjou/[slug]/page.tsx b/src/app/(app)/kanjou/[slug]/page.tsx
@@ -2,7 +2,7 @@
 
 import { use, useEffect, useRef, useState } from "react"
 import dynamic from "next/dynamic"
-import { IconCheck, IconPointFilled } from "@tabler/icons-react"
+import { IconCheck, IconPointFilled, IconSend } from "@tabler/icons-react"
 import Collaboration from "@tiptap/extension-collaboration"
 import CollaborationCursor from "@tiptap/extension-collaboration-cursor"
 import { getDoc, updateDoc } from "firebase/firestore"
@@ -15,7 +15,19 @@ import { documentRef } from "@/lib/converters/document"
 import { firebaseApp } from "@/lib/firebase/client"
 import { deepEqual, timeAgo } from "@/lib/utils"
 import { FireProvider } from "@/lib/y-fire"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
 import { ErrorBoundary } from "@/components/nav/error"
 import { yProvider } from "@/components/tiptap/providers/firebase-sync"
 
@@ -35,6 +47,8 @@ export default function Kanjou(props: { params: Promise<{ slug: string }> }) {
   const yDoc = useRef<Y.Doc | undefined>(undefined)
   const hash = useRef<Y.Map<unknown> | undefined>(undefined)
 
+  const [sharingEmail, setSharingEmail] = useState<string>("")
+
   // Fetch the document
   useEffect(() => {
     // Validate Slug and User
@@ -143,10 +157,69 @@ export default function Kanjou(props: { params: Promise<{ slug: string }> }) {
           )}
         </div>
       </div>
-      <div>
-        <p className="px-2 pb-2 text-sm text-muted-foreground">
+      <div className="flex w-full items-center justify-between px-2 pb-2">
+        <p className="text-sm text-muted-foreground">
           Last Updated: {timeAgo(provider.current?.metadata.lastUpdated)}
         </p>
+        <Dialog>
+          <DialogTrigger asChild>
+            <Button variant="outline" size="sm">
+              Share
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle className="text-2xl">
+                Share &quot;<span className="font-thin">{metadata?.title}</span>
+                &quot;
+              </DialogTitle>
+              <DialogDescription>
+                Share this document with others by inputting their email address
+              </DialogDescription>
+            </DialogHeader>
+            <div className="flex flex-col">
+              <div className="text-lg font-bold">People with Access</div>
+              <div className="flex flex-col">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <div className="h-4 w-4 rounded-full bg-primary" />
+                    <div className="pl-2">John Doe</div>
+                  </div>
+                  <Button variant="outline" size="sm">
+                    Remove
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <DialogFooter className="mt-3 flex flex-row items-center space-x-2">
+              <Input
+                id="link"
+                type="email"
+                value={sharingEmail}
+                onChange={(e) => setSharingEmail(e.target.value)}
+                placeholder="Email Address"
+                className="h-10"
+              />
+              <DialogClose asChild>
+                <Button
+                  type="submit"
+                  className="h-10"
+                  onClick={() => {
+                    console.log("Share the document with: ", sharingEmail)
+                    // Close the dialog
+
+                    // Add the user to the readAccess array
+                    // firebaseDoc.ref.update({
+                    //   readAccess: firebase.firestore.FieldValue.arrayUnion(email),
+                    // })
+                  }}
+                >
+                  <IconSend className="size-5" />
+                </Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
       </div>
 
       <TipTap

diff --git a/src/components/tiptap/tiptap.tsx b/src/components/tiptap/tiptap.tsx
@@ -4,6 +4,7 @@ import { Extension } from "@tiptap/core"
 import { EditorContent, JSONContent, useEditor } from "@tiptap/react"
 import Toolbar from "./toolbar"
 import "@/styles/tiptap.css"
+import "katex/dist/katex.min.css"
 import { extensions } from "./utils/extensions"
 
 export interface TiptapProps {
@@ -42,7 +43,7 @@ const Tiptap = ({ passedExtensions }: TiptapProps) => {
   }
 
   return (
-    <div className="bg-foreground/5 rounded border-2">
+    <div className="rounded border-2 bg-foreground/3">
       <Toolbar editor={editor} />
       <EditorContent className="whitespace-pre-line" editor={editor} />
     </div>