From 73c5480fac134b74d080456d325ffb2e06555d3a Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Fri, 16 Aug 2024 09:16:46 +0530
Subject: editor

---
 apps/web/.npmrc                                    |   2 +
 apps/web/app/(dash)/(memories)/content.tsx         |  63 +++---
 apps/web/app/(dash)/menu.tsx                       | 186 ++++++++++--------
 apps/web/app/editor/page.tsx                       |   8 +
 apps/web/components/editor/advanced-editor.tsx     | 161 ++++++++++++++++
 apps/web/components/editor/content.ts              |   4 +
 apps/web/components/editor/emoji/emojiList.tsx     |  76 ++++++++
 apps/web/components/editor/emoji/suggestion.ts     |  67 +++++++
 apps/web/components/editor/extensions.ts           | 182 ++++++++++++++++++
 .../editor/generative/ai-completion-command.tsx    |  66 +++++++
 .../editor/generative/ai-selector-commands.tsx     |  76 ++++++++
 .../components/editor/generative/ai-selector.tsx   | 121 ++++++++++++
 .../editor/generative/generative-menu-switch.tsx   |  75 ++++++++
 apps/web/components/editor/image-upload.ts         |  60 ++++++
 apps/web/components/editor/prosemirror.css         | 212 +++++++++++++++++++++
 .../components/editor/selectors/align-selector.tsx |  87 +++++++++
 .../components/editor/selectors/link-selector.tsx  | 120 ++++++++++++
 .../components/editor/selectors/node-selector.tsx  | 148 ++++++++++++++
 .../components/editor/selectors/text-buttons.tsx   |  75 ++++++++
 apps/web/components/editor/slash-command.tsx       | 209 ++++++++++++++++++++
 apps/web/components/editor/toc.tsx                 | 109 +++++++++++
 apps/web/components/editor/ui/button.tsx           |  56 ++++++
 apps/web/components/editor/ui/command.tsx          | 155 +++++++++++++++
 apps/web/components/editor/ui/dialog.tsx           | 122 ++++++++++++
 .../components/editor/ui/icons/crazy-spinner.tsx   |  11 ++
 .../components/editor/ui/icons/loading-circle.tsx  |  20 ++
 apps/web/components/editor/ui/icons/magic.tsx      |  32 ++++
 apps/web/components/editor/ui/menu.tsx             |  89 +++++++++
 apps/web/components/editor/ui/popover.tsx          |  31 +++
 apps/web/components/editor/ui/scroll-area.tsx      |  48 +++++
 apps/web/components/editor/ui/separator.tsx        |  31 +++
 apps/web/package.json                              |  60 +++---
 32 files changed, 2630 insertions(+), 132 deletions(-)
 create mode 100644 apps/web/.npmrc
 create mode 100644 apps/web/app/editor/page.tsx
 create mode 100644 apps/web/components/editor/advanced-editor.tsx
 create mode 100644 apps/web/components/editor/content.ts
 create mode 100644 apps/web/components/editor/emoji/emojiList.tsx
 create mode 100644 apps/web/components/editor/emoji/suggestion.ts
 create mode 100644 apps/web/components/editor/extensions.ts
 create mode 100644 apps/web/components/editor/generative/ai-completion-command.tsx
 create mode 100644 apps/web/components/editor/generative/ai-selector-commands.tsx
 create mode 100644 apps/web/components/editor/generative/ai-selector.tsx
 create mode 100644 apps/web/components/editor/generative/generative-menu-switch.tsx
 create mode 100644 apps/web/components/editor/image-upload.ts
 create mode 100644 apps/web/components/editor/prosemirror.css
 create mode 100644 apps/web/components/editor/selectors/align-selector.tsx
 create mode 100644 apps/web/components/editor/selectors/link-selector.tsx
 create mode 100644 apps/web/components/editor/selectors/node-selector.tsx
 create mode 100644 apps/web/components/editor/selectors/text-buttons.tsx
 create mode 100644 apps/web/components/editor/slash-command.tsx
 create mode 100644 apps/web/components/editor/toc.tsx
 create mode 100644 apps/web/components/editor/ui/button.tsx
 create mode 100644 apps/web/components/editor/ui/command.tsx
 create mode 100644 apps/web/components/editor/ui/dialog.tsx
 create mode 100644 apps/web/components/editor/ui/icons/crazy-spinner.tsx
 create mode 100644 apps/web/components/editor/ui/icons/loading-circle.tsx
 create mode 100644 apps/web/components/editor/ui/icons/magic.tsx
 create mode 100644 apps/web/components/editor/ui/menu.tsx
 create mode 100644 apps/web/components/editor/ui/popover.tsx
 create mode 100644 apps/web/components/editor/ui/scroll-area.tsx
 create mode 100644 apps/web/components/editor/ui/separator.tsx

(limited to 'apps')

diff --git a/apps/web/.npmrc b/apps/web/.npmrc
new file mode 100644
index 00000000..d7cd57c2
--- /dev/null
+++ b/apps/web/.npmrc
@@ -0,0 +1,2 @@
+@tiptap-pro:registry=https://registry.tiptap.dev/
+//registry.tiptap.dev/:_authToken={add auth token from tiptap website}
\ No newline at end of file
diff --git a/apps/web/app/(dash)/(memories)/content.tsx b/apps/web/app/(dash)/(memories)/content.tsx
index 5d81e823..74f95849 100644
--- a/apps/web/app/(dash)/(memories)/content.tsx
+++ b/apps/web/app/(dash)/(memories)/content.tsx
@@ -37,7 +37,17 @@ import { toast } from "sonner";
 import { Input } from "@repo/ui/shadcn/input";
 import { motion } from "framer-motion";
 import { useSearchParams } from "next/navigation";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@repo/ui/shadcn/alert-dialog";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@repo/ui/shadcn/alert-dialog";
 
 type TMemoriesPage = {
 	memoriesAndSpaces: { memories: Content[]; spaces: StoredSpace[] };
@@ -156,7 +166,6 @@ export function MemoriesPage({
 
 			{currentSpace && (
 				<div className="flex flex-col gap-2">
-
 					{usersWithAccess && usersWithAccess.length > 0 && (
 						<div className="flex gap-4 items-center">
 							Users with access
@@ -292,7 +301,8 @@ function SpaceComponent({
 				>
 					<div>
 						<div className="h-12 w-12 flex justify-center items-center rounded-md">
-							{title.slice(0, 2).toUpperCase()}{id}
+							{title.slice(0, 2).toUpperCase()}
+							{id}
 						</div>
 					</div>
 					<div className="grow px-2">
@@ -304,8 +314,11 @@ function SpaceComponent({
 					</div>
 				</Link>
 				<div className="absolute z-40 right-3 top-3 opacity-0 group-hover:opacity-100 hover:text-red-600">
-
-				<SpaceDeleteAlert onClick={()=> {handleDeleteSpace(id)}} />
+					<SpaceDeleteAlert
+						onClick={() => {
+							handleDeleteSpace(id);
+						}}
+					/>
 				</div>
 			</div>
 		</div>
@@ -454,26 +467,28 @@ function Filters({
 	);
 }
 
-function SpaceDeleteAlert({onClick}: {onClick: ()=> void}){
+function SpaceDeleteAlert({ onClick }: { onClick: () => void }) {
 	return (
 		<AlertDialog>
-  <AlertDialogTrigger>					<TrashIcon
-						className="w-4 cursor-pointer"
-					/></AlertDialogTrigger>
-  <AlertDialogContent>
-    <AlertDialogHeader>
-      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-      <AlertDialogDescription>
-        This is irreversible. This will delete the space and all memories inside it.
-      </AlertDialogDescription>
-    </AlertDialogHeader>
-    <AlertDialogFooter>
-      <AlertDialogCancel>Cancel</AlertDialogCancel>
-      <AlertDialogAction onClick={onClick}>Delete</AlertDialogAction>
-    </AlertDialogFooter>
-  </AlertDialogContent>
-</AlertDialog>
-	)
+			<AlertDialogTrigger>
+				{" "}
+				<TrashIcon className="w-4 cursor-pointer" />
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+					<AlertDialogDescription>
+						This is irreversible. This will delete the space and all memories
+						inside it.
+					</AlertDialogDescription>
+				</AlertDialogHeader>
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction onClick={onClick}>Delete</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	);
 }
 
-export default MemoriesPage;
\ No newline at end of file
+export default MemoriesPage;
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index abac5411..68466cb1 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -11,6 +11,7 @@ import {
 } from "@repo/ui/icons";
 import { Button } from "@repo/ui/shadcn/button";
 import { MinusIcon, PlusCircleIcon } from "lucide-react";
+import Editor from "@/components/editor/advanced-editor";
 import {
 	Dialog,
 	DialogContent,
@@ -58,20 +59,16 @@ function Menu() {
 		},
 	];
 
-
-
 	const [dialogOpen, setDialogOpen] = useState(false);
 
 	return (
-		<>
+		<div>
 			{/* Desktop Menu */}
 			<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
 				<div className="hidden lg:flex fixed h-screen w-full p-4 items-center top-0 left-0 pointer-events-none z-[39]">
 					<div className="pointer-events-auto group flex w-14 text-foreground-menu text-[15px] font-medium flex-col items-start gap-6 overflow-hidden rounded-[28px] border-2 border-border bg-secondary px-3 py-4 duration-200 hover:w-40 z-[99999]">
 						<div className="border-b border-border pb-4 w-full">
-							<DialogTrigger
-								className="flex w-full text-white brightness-75 hover:brightness-125 focus:brightness-125  cursor-pointer items-center gap-3 px-1 duration-200 justify-start"
-							>
+							<DialogTrigger className="flex w-full text-white brightness-75 hover:brightness-125 focus:brightness-125  cursor-pointer items-center gap-3 px-1 duration-200 justify-start">
 								<Image
 									src={AddIcon}
 									alt="Logo"
@@ -105,7 +102,7 @@ function Menu() {
 					</div>
 				</div>
 
-				<DialogContentMenu setDialogClose={()=> setDialogOpen(false)} />
+				<DialogContentMenu setDialogClose={() => setDialogOpen(false)} />
 
 				{/* Mobile Menu */}
 				<div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
@@ -154,12 +151,11 @@ function Menu() {
 					</div>
 				</div>
 			</Dialog>
-		</>
+		</div>
 	);
 }
 
-function DialogContentMenu({setDialogClose}: {setDialogClose: ()=> void}){
-
+function DialogContentMenu({ setDialogClose }: { setDialogClose: () => void }) {
 	const [spaces, setSpaces] = useState<StoredSpace[]>([]);
 
 	useEffect(() => {
@@ -221,7 +217,7 @@ function DialogContentMenu({setDialogClose}: {setDialogClose: ()=> void}){
 		setContent("");
 		setSelectedSpaces([]);
 		return cont;
-	}
+	};
 
 	const formSubmit = () => {
 		toast.promise(handleSubmit(content, selectedSpaces), {
@@ -236,89 +232,115 @@ function DialogContentMenu({setDialogClose}: {setDialogClose: ()=> void}){
 			richColors: true,
 		});
 	};
+
+	const [editorOpen, setEditorOpen] = useState(false);
 	return (
 		<DialogContent className="sm:max-w-[575px] text-[#F2F3F5] rounded-2xl bg-background z-[39]">
-					<form action={formSubmit} className="flex flex-col gap-4 ">
-					<DialogHeader>
+			<form action={formSubmit} className="flex flex-col gap-4 ">
+				<DialogHeader>
 					<DialogTitle>Add memory</DialogTitle>
 				</DialogHeader>
 
-						<div>
-							<Label htmlFor="space">Save to Spaces (Optional)</Label>
-							<ComboboxWithCreate
-							placeholder="spaces to save to..."
-								setSelectedSpaces={setSelectedSpaces}
-								selectedSpaces={selectedSpaces}							
-								options={spaces.map((x) => ({
-									label: x.name,
-									value: x.id.toString(),
-								}))}
-								onSelect={(v) =>
-									setSelectedSpaces((prev) => {
-										if (v === "") {
-											return [];
-										}
-										return [...prev, parseInt(v)];
-									})
+				<div>
+					<Label htmlFor="space">Save to Spaces (Optional)</Label>
+					<ComboboxWithCreate
+						placeholder="spaces to save to..."
+						setSelectedSpaces={setSelectedSpaces}
+						selectedSpaces={selectedSpaces}
+						options={spaces.map((x) => ({
+							label: x.name,
+							value: x.id.toString(),
+						}))}
+						onSelect={(v) =>
+							setSelectedSpaces((prev) => {
+								if (v === "") {
+									return [];
 								}
-								onSubmit={async (spaceName) => {
-									const space = options.find((x) => x.label === spaceName);
-									toast.info("Creating space...");
+								return [...prev, parseInt(v)];
+							})
+						}
+						onSubmit={async (spaceName) => {
+							const space = options.find((x) => x.label === spaceName);
+							toast.info("Creating space...");
 
-									if (space) {
-										toast.error("A space with that name already exists.");
-									}
+							if (space) {
+								toast.error("A space with that name already exists.");
+							}
 
-									const creationTask = await createSpace(spaceName);
-									if (creationTask.success && creationTask.data) {
-										toast.success("Space created " + creationTask.data);
-										setSpaces((prev) => [
-											...prev,
-											{
-												name: spaceName,
-												id: creationTask.data!,
-												createdAt: new Date(),
-												user: null,
-												numItems: 0,
-											},
-										]);
-										setSelectedSpaces((prev) => [...prev, creationTask.data!]);
-									} else {
-										toast.error("Space creation failed: " + creationTask.error);
-									}
-								}}
-							/>
-						</div>
+							const creationTask = await createSpace(spaceName);
+							if (creationTask.success && creationTask.data) {
+								toast.success("Space created " + creationTask.data);
+								setSpaces((prev) => [
+									...prev,
+									{
+										name: spaceName,
+										id: creationTask.data!,
+										createdAt: new Date(),
+										user: null,
+										numItems: 0,
+									},
+								]);
+								setSelectedSpaces((prev) => [...prev, creationTask.data!]);
+							} else {
+								toast.error("Space creation failed: " + creationTask.error);
+							}
+						}}
+					/>
+				</div>
 
-						<div>
-							<Label htmlFor="name">Resource (URL or content)</Label>
-							<Textarea
-								autoFocus
-								className={`bg-[#2F353C] text-[#DBDEE1] max-h-[35vh] overflow-auto  focus-visible:ring-0 border-none focus-visible:ring-offset-0 mt-2 ${/^https?:\/\/\S+$/i.test(content) && "text-[#1D9BF0] underline underline-offset-2"}`}
-								id="content"
-								name="content"
-								rows={8}
-								placeholder="Start typing a note or paste a URL here. I'll remember it."
-								value={content}
-								onChange={(e) => setContent(e.target.value)}
-								onKeyDown={(e) => {
-									if (e.key === "Enter" && !e.shiftKey) {
-										e.preventDefault();
-										formSubmit();
-									}
-								}}
-							/>
-						</div>
+				<div>
+					{content}
+					<Label htmlFor="name">Resource (URL or content)</Label>
+					<Textarea
+						autoFocus
+						className={`bg-[#2F353C] text-[#DBDEE1] max-h-[35vh] overflow-auto  focus-visible:ring-0 border-none focus-visible:ring-offset-0 mt-2 ${/^https?:\/\/\S+$/i.test(content) && "text-[#1D9BF0] underline underline-offset-2"}`}
+						id="content"
+						name="content"
+						rows={8}
+						placeholder="Start typing a note or paste a URL here. I'll remember it."
+						value={content}
+						onChange={(e) => setContent(e.target.value)}
+						onKeyDown={(e) => {
+							if (e.key === "Enter" && !e.shiftKey) {
+								e.preventDefault();
+								formSubmit();
+							}
+						}}
+					/>
+				</div>
 
-						<DialogFooter>
-							<SubmitButton autoDetectedType={autoDetectedType} />
-						</DialogFooter>
-					</form>
-				</DialogContent>
-	)
+				<DialogFooter>
+					<Dialog onOpenChange={setEditorOpen} open={editorOpen}>
+						<DialogTrigger>
+							<Button variant={"secondary"} type="button">
+								Try Note Editor!
+							</Button>
+						</DialogTrigger>
+						<EditorDialog
+							setContent={(e) => {
+								console.log(e);
+								console.log("hello there");
+								setContent(e);
+								setEditorOpen(false);
+							}}
+						/>
+					</Dialog>
+					<SubmitButton autoDetectedType={autoDetectedType} />
+				</DialogFooter>
+			</form>
+		</DialogContent>
+	);
+}
+
+function EditorDialog({ setContent }: { setContent: (e: string) => void }) {
+	return (
+		<DialogContent className="max-w-[98vw] h-[98vh] overflow-hidden px-0 py-0 z-[100]">
+			<Editor setContent={(e) => setContent(e)} />
+		</DialogContent>
+	);
 }
 
-function SubmitButton({autoDetectedType}: {autoDetectedType: string}) {
+function SubmitButton({ autoDetectedType }: { autoDetectedType: string }) {
 	const status = useFormStatus();
 	return (
 		<Button disabled={status.pending} variant={"secondary"} type="submit">
diff --git a/apps/web/app/editor/page.tsx b/apps/web/app/editor/page.tsx
new file mode 100644
index 00000000..14d70d79
--- /dev/null
+++ b/apps/web/app/editor/page.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import Editor from "../../components/editor/advanced-editor";
+
+function page() {
+	return <Editor />;
+}
+
+export default page;
diff --git a/apps/web/components/editor/advanced-editor.tsx b/apps/web/components/editor/advanced-editor.tsx
new file mode 100644
index 00000000..b6565c82
--- /dev/null
+++ b/apps/web/components/editor/advanced-editor.tsx
@@ -0,0 +1,161 @@
+"use client";
+import { defaultEditorContent } from "./content";
+import "./prosemirror.css";
+import {
+	EditorCommand,
+	EditorCommandEmpty,
+	EditorCommandItem,
+	EditorCommandList,
+	EditorContent,
+	type EditorInstance,
+	EditorRoot,
+	type JSONContent,
+	useEditor,
+} from "novel";
+import { ImageResizer, handleCommandNavigation } from "novel/extensions";
+import { memo, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { defaultExtensions } from "./extensions";
+import { LinkSelector } from "./selectors/link-selector";
+import { NodeSelector } from "./selectors/node-selector";
+import { Separator } from "./ui/separator";
+
+import { handleImageDrop, handleImagePaste } from "novel/plugins";
+import GenerativeMenuSwitch from "./generative/generative-menu-switch";
+import { uploadFn } from "./image-upload";
+import { TextButtons } from "./selectors/text-buttons";
+import { slashCommand, suggestionItems } from "./slash-command";
+import { ToC } from "./toc";
+import {
+	getHierarchicalIndexes,
+	TableOfContents,
+} from "@tiptap-pro/extension-table-of-contents";
+import { AlignSelector } from "./selectors/align-selector";
+import { useFormStatus } from "react-dom";
+import { Button } from "@repo/ui/shadcn/button";
+
+const MemorizedToC = memo(ToC);
+
+const hljs = require("highlight.js");
+
+type tContent = {
+	id: string;
+	textContent: string;
+	level: number;
+	isActive: boolean;
+	itemIndex: number;
+	isScrolledOver: boolean;
+};
+
+const TailwindAdvancedEditor = memo(
+	({ setContent }: { setContent: (e: string) => void }) => {
+		const [openNode, setOpenNode] = useState(false);
+		const [openAlign, setOpenAlign] = useState(false);
+		const [openLink, setOpenLink] = useState(false);
+		const [items, setItems] = useState<tContent[]>([]);
+
+		const extensions = [
+			...defaultExtensions,
+			slashCommand,
+			TableOfContents.configure({
+				getIndex: getHierarchicalIndexes,
+				onUpdate(content) {
+					setItems(content);
+				},
+			}),
+		];
+
+		return (
+			<div className="relative w-full h-full">
+				<EditorRoot>
+					<EditorContent
+						initialContent={defaultEditorContent}
+						extensions={extensions}
+						className="relative max-w-[98vw] h-[98vh] overflow-auto w-full bg-[#171B1F] sm:rounded-lg sm:shadow-lg"
+						editorProps={{
+							handleDOMEvents: {
+								keydown: (_view, event) => handleCommandNavigation(event),
+							},
+							// handlePaste: (view, event) =>
+							// 	handleImagePaste(view, event, uploadFn),
+							// handleDrop: (view, event, _slice, moved) =>
+							// 	handleImageDrop(view, event, moved, uploadFn),
+							attributes: {
+								class:
+									"prose prose-lg dark:prose-invert prose-headings:font-title font-default focus:outline-none max-w-full",
+							},
+						}}
+						// onUpdate={({ editor }) => {
+
+						// }}
+						slotAfter={<ImageResizer />}
+					>
+						<MemorizedToC items={items} />
+						<EditorCommand className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-md bg-[#1F2428] px-1 py-2 shadow-md transition-all">
+							<EditorCommandEmpty className="px-2 text-muted-foreground">
+								No results
+							</EditorCommandEmpty>
+							<EditorCommandList>
+								{suggestionItems.map((item) => (
+									<EditorCommandItem
+										value={item.title}
+										onCommand={(val) => item.command(val)}
+										className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-[#21303D] group aria-selected:bg-[#21303D]"
+										key={item.title}
+									>
+										<div className="flex h-10 w-10 items-center justify-center rounded-md bg-[#2D343A] group-hover:bg-[#369DFD33] group-aria-selected:bg-[#369DFD33]">
+											{item.icon}
+										</div>
+										<div>
+											<p className="font-medium text-[#FFFFFF] group-hover:text-[#369DFD] group-aria-selected:text-[#369DFD]">
+												{item.title}
+											</p>
+											<p className="text-xs text-[#989EA4] group-hover:text-[#369DFDB2] group-aria-selected:text-[#369DFDB2]">
+												{item.description}
+											</p>
+										</div>
+									</EditorCommandItem>
+								))}
+							</EditorCommandList>
+						</EditorCommand>
+
+						<GenerativeMenuSwitch>
+							<Separator orientation="vertical" />
+							<NodeSelector open={openNode} onOpenChange={setOpenNode} />
+							<Separator orientation="vertical" />
+							<AlignSelector open={openAlign} onOpenChange={setOpenAlign} />
+							<Separator orientation="vertical" />
+
+							<LinkSelector open={openLink} onOpenChange={setOpenLink} />
+							<Separator orientation="vertical" />
+							<Separator orientation="vertical" />
+							<TextButtons />
+						</GenerativeMenuSwitch>
+						<SaveNote setContent={setContent} />
+					</EditorContent>
+				</EditorRoot>
+			</div>
+		);
+	},
+);
+
+function SaveNote({ setContent }: { setContent: (e: string) => void }) {
+	const { editor } = useEditor();
+	if (!editor) return null;
+	return (
+		<Button
+			className="fixed bottom-6 right-5"
+			onClick={() => setContent(editor.storage.markdown.getMarkdown())}
+			variant={"secondary"}
+		>
+			Save Note
+		</Button>
+	);
+}
+
+// function SubmitButton({ autoDetectedType }: { autoDetectedType: string }) {
+// 	return (
+
+// 	);
+// }
+export default TailwindAdvancedEditor;
diff --git a/apps/web/components/editor/content.ts b/apps/web/components/editor/content.ts
new file mode 100644
index 00000000..c961cd7c
--- /dev/null
+++ b/apps/web/components/editor/content.ts
@@ -0,0 +1,4 @@
+export const defaultEditorContent = {
+  type: "doc",
+  content: [],
+};
diff --git a/apps/web/components/editor/emoji/emojiList.tsx b/apps/web/components/editor/emoji/emojiList.tsx
new file mode 100644
index 00000000..c5f734c9
--- /dev/null
+++ b/apps/web/components/editor/emoji/emojiList.tsx
@@ -0,0 +1,76 @@
+import React, {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useState,
+} from "react";
+
+export const EmojiList = forwardRef((props, ref) => {
+	const [selectedIndex, setSelectedIndex] = useState(0);
+
+	const selectItem = (index) => {
+		const item = props.items[index];
+		if (item) {
+			props.command({ name: item.name });
+		}
+	};
+
+	const upHandler = () => {
+		setSelectedIndex(
+			(selectedIndex + props.items.length - 1) % props.items.length,
+		);
+	};
+
+	const downHandler = () => {
+		setSelectedIndex((selectedIndex + 1) % props.items.length);
+	};
+
+	const enterHandler = () => {
+		selectItem(selectedIndex);
+	};
+
+	useEffect(() => setSelectedIndex(0), [props.items]);
+
+	useImperativeHandle(
+		ref,
+		() => ({
+			onKeyDown: (x) => {
+				if (x.event.key === "ArrowUp") {
+					upHandler();
+					return true;
+				}
+				if (x.event.key === "ArrowDown") {
+					downHandler();
+					return true;
+				}
+				if (x.event.key === "Enter") {
+					enterHandler();
+					return true;
+				}
+				return false;
+			},
+		}),
+		[upHandler, downHandler, enterHandler],
+	);
+
+	return (
+		<div className="bg-[#1F2428]  shadow-md flex flex-col gap-0.5 overflow-auto p-1.5 relative">
+			{props.items.map((item, index) => (
+				<button
+					className={`flex items-center gap-1 w-full text-left ${
+						index === selectedIndex && "bg-[#21303D] text-[#369DFD]"
+					}`}
+					key={index}
+					onClick={() => selectItem(index)}
+				>
+					{item.fallbackImage ? (
+						<img src={item.fallbackImage} className="w-4 h-4" alt="" />
+					) : (
+						item.emoji
+					)}
+					:{item.name}:
+				</button>
+			))}
+		</div>
+	);
+});
diff --git a/apps/web/components/editor/emoji/suggestion.ts b/apps/web/components/editor/emoji/suggestion.ts
new file mode 100644
index 00000000..318b05e9
--- /dev/null
+++ b/apps/web/components/editor/emoji/suggestion.ts
@@ -0,0 +1,67 @@
+import { ReactRenderer } from '@tiptap/react'
+import tippy from 'tippy.js'
+
+import { EmojiList } from './emojiList'
+
+export default {
+  items: ({ editor, query }) => {
+    return editor.storage.emoji.emojis
+      .filter(({ shortcodes, tags }) => {
+        return (
+          shortcodes.find(shortcode => shortcode.startsWith(query.toLowerCase()))
+          || tags.find(tag => tag.startsWith(query.toLowerCase()))
+        )
+      })
+      .slice(0, 5)
+  },
+
+  allowSpaces: false,
+
+  render: () => {
+    let component
+    let popup
+
+    return {
+      onStart: props => {
+        component = new ReactRenderer(EmojiList, {
+          props,
+          editor: props.editor,
+        })
+
+        popup = tippy('body', {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () => document.body,
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: 'manual',
+          placement: 'bottom-start',
+        })
+      },
+
+      onUpdate(props) {
+        component.updateProps(props)
+
+        popup[0].setProps({
+          getReferenceClientRect: props.clientRect,
+        })
+      },
+
+      onKeyDown(props) {
+        if (props.event.key === 'Escape') {
+          popup[0].hide()
+          component.destroy()
+
+          return true
+        }
+
+        return component.ref?.onKeyDown(props)
+      },
+
+      onExit() {
+        popup[0].destroy()
+        component.destroy()
+      },
+    }
+  },
+}
diff --git a/apps/web/components/editor/extensions.ts b/apps/web/components/editor/extensions.ts
new file mode 100644
index 00000000..eadf2d0c
--- /dev/null
+++ b/apps/web/components/editor/extensions.ts
@@ -0,0 +1,182 @@
+import {
+  AIHighlight,
+  CharacterCount,
+  CodeBlockLowlight,
+  // Color,
+  // CustomKeymap,
+  GlobalDragHandle,
+  // HighlightExtension,
+  HorizontalRule,
+  // MarkdownExtension,
+  Placeholder,
+  StarterKit,
+  TaskItem,
+  TaskList,
+  // TextStyle,
+  TiptapImage,
+  TiptapLink,
+  // TiptapUnderline,
+  Twitter,
+  UpdatedImage,
+  Youtube,
+  // Mathematics,
+} from "novel/extensions";
+import suggestion from "./emoji/suggestion"
+import { UploadImagesPlugin } from "novel/plugins";
+import Emoji, { gitHubEmojis } from '@tiptap-pro/extension-emoji'
+import TextAlign from '@tiptap/extension-text-align'
+import Typography from '@tiptap/extension-typography'
+
+import { cx } from "class-variance-authority";
+import { common, createLowlight } from "lowlight";
+
+const aiHighlight = AIHighlight;
+const placeholder = Placeholder;
+const tiptapLink = TiptapLink.configure({
+  HTMLAttributes: {
+    class: cx(
+      "text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer",
+    ),
+  },
+});
+
+const tiptapImage = TiptapImage.extend({
+  addProseMirrorPlugins() {
+    return [
+      UploadImagesPlugin({
+        imageClass: cx("opacity-40 rounded-lg border border-stone-200"),
+      }),
+    ];
+  },
+}).configure({
+  allowBase64: true,
+  HTMLAttributes: {
+    class: cx("rounded-lg border border-muted"),
+  },
+});
+
+const updatedImage = UpdatedImage.configure({
+  HTMLAttributes: {
+    class: cx("rounded-lg border border-muted"),
+  },
+});
+
+const taskList = TaskList.configure({
+  HTMLAttributes: {
+    class: cx("not-prose pl-2 "),
+  },
+});
+const taskItem = TaskItem.configure({
+  HTMLAttributes: {
+    class: cx("flex gap-2 items-start my-4"),
+  },
+  nested: true,
+});
+
+const horizontalRule = HorizontalRule.configure({
+  HTMLAttributes: {
+    class: cx("mt-4 mb-6 border-t border-muted-foreground"),
+  },
+});
+
+const starterKit = StarterKit.configure({
+  bulletList: {
+    HTMLAttributes: {
+      class: cx("list-disc list-outside leading-3 -mt-2"),
+    },
+  },
+  orderedList: {
+    HTMLAttributes: {
+      class: cx("list-decimal list-outside leading-3 -mt-2"),
+    },
+  },
+  listItem: {
+    HTMLAttributes: {
+      class: cx("leading-normal -mb-2"),
+    },
+  },
+  blockquote: {
+    HTMLAttributes: {
+      class: cx("border-l-4 border-primary"),
+    },
+  },
+  codeBlock: {
+    HTMLAttributes: {
+      class: cx("rounded-md bg-muted text-muted-foreground border p-5 font-mono font-medium"),
+    },
+  },
+  code: {
+    HTMLAttributes: {
+      class: cx("rounded-md bg-muted  px-1.5 py-1 font-mono font-medium"),
+      spellcheck: "false",
+    },
+  },
+  horizontalRule: false,
+  dropcursor: {
+    color: "#DBEAFE",
+    width: 4,
+  },
+  gapcursor: false,
+});
+
+const codeBlockLowlight = CodeBlockLowlight.configure({
+  // configure lowlight: common /  all / use highlightJS in case there is a need to specify certain language grammars only
+  // common: covers 37 language grammars which should be good enough in most cases
+  lowlight: createLowlight(common),
+});
+
+const youtube = Youtube.configure({
+  HTMLAttributes: {
+    class: cx("rounded-lg border border-muted"),
+  },
+  inline: false,
+});
+
+const twitter = Twitter.configure({
+  HTMLAttributes: {
+    class: cx("not-prose"),
+  },
+  inline: false,
+});
+
+// const mathematics = Mathematics.configure({
+//   HTMLAttributes: {
+//     class: cx("text-foreground rounded p-1 hover:bg-accent cursor-pointer"),
+//   },
+//   katexOptions: {
+//     throwOnError: false,
+//   },
+// });
+
+const characterCount = CharacterCount.configure();
+
+const textAlign = TextAlign.configure({
+  types: ['heading', 'paragraph'],
+})
+
+const emojis = Emoji.configure({
+  emojis: gitHubEmojis,
+  enableEmoticons: true,
+  suggestion,
+})
+
+
+export const defaultExtensions = [
+  starterKit,
+  placeholder,
+  tiptapLink,
+  tiptapImage,
+  updatedImage,
+  taskList,
+  taskItem,
+  horizontalRule,
+  aiHighlight,
+  codeBlockLowlight,
+  youtube,
+  twitter,
+  characterCount,
+  GlobalDragHandle,
+  textAlign,
+  Typography,
+  emojis
+];
diff --git a/apps/web/components/editor/generative/ai-completion-command.tsx b/apps/web/components/editor/generative/ai-completion-command.tsx
new file mode 100644
index 00000000..7d37b74a
--- /dev/null
+++ b/apps/web/components/editor/generative/ai-completion-command.tsx
@@ -0,0 +1,66 @@
+import { CommandGroup, CommandItem, CommandSeparator } from "../ui/command";
+import { useEditor } from "novel";
+import { Check, TextQuote, TrashIcon } from "lucide-react";
+
+const AICompletionCommands = ({
+  completion,
+  onDiscard,
+}: {
+  completion: string;
+  onDiscard: () => void;
+}) => {
+  const { editor } = useEditor();
+  return (
+    <>
+      <CommandGroup>
+        <CommandItem
+          className="gap-2 px-4"
+          value="replace"
+          onSelect={() => {
+            const selection = editor.view.state.selection;
+
+            editor
+              .chain()
+              .focus()
+              .insertContentAt(
+                {
+                  from: selection.from,
+                  to: selection.to,
+                },
+                completion,
+              )
+              .run();
+          }}
+        >
+          <Check className="h-4 w-4 text-muted-foreground" />
+          Replace selection
+        </CommandItem>
+        <CommandItem
+          className="gap-2 px-4"
+          value="insert"
+          onSelect={() => {
+            const selection = editor.view.state.selection;
+            editor
+              .chain()
+              .focus()
+              .insertContentAt(selection.to + 1, completion)
+              .run();
+          }}
+        >
+          <TextQuote className="h-4 w-4 text-muted-foreground" />
+          Insert below
+        </CommandItem>
+      </CommandGroup>
+      <CommandSeparator />
+
+      <CommandGroup>
+        <CommandItem onSelect={onDiscard} value="thrash" className="gap-2 px-4">
+          <TrashIcon className="h-4 w-4 text-muted-foreground" />
+          Discard
+        </CommandItem>
+      </CommandGroup>
+    </>
+  );
+};
+
+export default AICompletionCommands;
diff --git a/apps/web/components/editor/generative/ai-selector-commands.tsx b/apps/web/components/editor/generative/ai-selector-commands.tsx
new file mode 100644
index 00000000..dad106b0
--- /dev/null
+++ b/apps/web/components/editor/generative/ai-selector-commands.tsx
@@ -0,0 +1,76 @@
+import { ArrowDownWideNarrow, CheckCheck, RefreshCcwDot, StepForward, WrapText } from "lucide-react";
+import { useEditor } from "novel";
+import { getPrevText } from "novel/utils";
+import { CommandGroup, CommandItem, CommandSeparator } from "../ui/command";
+
+const options = [
+  {
+    value: "improve",
+    label: "Improve writing",
+    icon: RefreshCcwDot,
+  },
+
+  {
+    value: "fix",
+    label: "Fix grammar",
+    icon: CheckCheck,
+  },
+  {
+    value: "shorter",
+    label: "Make shorter",
+    icon: ArrowDownWideNarrow,
+  },
+  {
+    value: "longer",
+    label: "Make longer",
+    icon: WrapText,
+  },
+];
+
+interface AISelectorCommandsProps {
+  onSelect: (value: string, option: string) => void;
+}
+
+const AISelectorCommands = ({ onSelect }: AISelectorCommandsProps) => {
+  const { editor } = useEditor();
+
+  return (
+    <>
+      <CommandGroup heading="Edit or review selection">
+        {options.map((option) => (
+          <CommandItem
+            onSelect={(value) => {
+              const slice = editor.state.selection.content();
+              const text = editor.storage.markdown.serializer.serialize(slice.content);
+              onSelect(text, value);
+            }}
+            className="flex gap-2 px-4"
+            key={option.value}
+            value={option.value}
+          >
+            <option.icon className="h-4 w-4 text-purple-500" />
+            {option.label}
+          </CommandItem>
+        ))}
+      </CommandGroup>
+      <CommandSeparator />
+      <CommandGroup heading="Use AI to do more">
+        <CommandItem
+          onSelect={() => {
+            const pos = editor.state.selection.from;
+
+            const text = getPrevText(editor, pos);
+            onSelect(text, "continue");
+          }}
+          value="continue"
+          className="gap-2 px-4"
+        >
+          <StepForward className="h-4 w-4 text-purple-500" />
+          Continue writing
+        </CommandItem>
+      </CommandGroup>
+    </>
+  );
+};
+
+export default AISelectorCommands;
diff --git a/apps/web/components/editor/generative/ai-selector.tsx b/apps/web/components/editor/generative/ai-selector.tsx
new file mode 100644
index 00000000..48eb224e
--- /dev/null
+++ b/apps/web/components/editor/generative/ai-selector.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { Command, CommandInput } from "../ui/command";
+
+import { useCompletion } from "ai/react";
+import { ArrowUp } from "lucide-react";
+import { useEditor } from "novel";
+import { addAIHighlight } from "novel/extensions";
+import { useState } from "react";
+import Markdown from "react-markdown";
+import { toast } from "sonner";
+import { Button } from "../ui/button";
+import CrazySpinner from "../ui/icons/crazy-spinner";
+import Magic from "../ui/icons/magic";
+import { ScrollArea } from "../ui/scroll-area";
+import AICompletionCommands from "./ai-completion-command";
+import AISelectorCommands from "./ai-selector-commands";
+//TODO: I think it makes more sense to create a custom Tiptap extension for this functionality https://tiptap.dev/docs/editor/ai/introduction
+
+interface AISelectorProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+
+export function AISelector({ onOpenChange }: AISelectorProps) {
+	const { editor } = useEditor();
+	const [inputValue, setInputValue] = useState("");
+
+	const { completion, complete, isLoading } = useCompletion({
+		// id: "novel",
+		api: "/api/generate",
+		onResponse: (response) => {
+			if (response.status === 429) {
+				toast.error("You have reached your request limit for the day.");
+				return;
+			}
+		},
+		onError: (e) => {
+			toast.error(e.message);
+		},
+	});
+
+	const hasCompletion = completion.length > 0;
+
+	return (
+		<Command className="w-[350px]">
+			{hasCompletion && (
+				<div className="flex max-h-[400px]">
+					<ScrollArea>
+						<div className="prose p-2 px-4 prose-sm">
+							<Markdown>{completion}</Markdown>
+						</div>
+					</ScrollArea>
+				</div>
+			)}
+
+			{isLoading && (
+				<div className="flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-purple-500">
+					<Magic className="mr-2 h-4 w-4 shrink-0  " />
+					AI is thinking
+					<div className="ml-2 mt-1">
+						<CrazySpinner />
+					</div>
+				</div>
+			)}
+			{!isLoading && (
+				<>
+					<div className="relative">
+						<CommandInput
+							value={inputValue}
+							onValueChange={setInputValue}
+							autoFocus
+							placeholder={
+								hasCompletion
+									? "Tell AI what to do next"
+									: "Ask AI to edit or generate..."
+							}
+							onFocus={() => addAIHighlight(editor)}
+						/>
+						<Button
+							size="icon"
+							className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full bg-purple-500 hover:bg-purple-900"
+							onClick={() => {
+								if (completion)
+									return complete(completion, {
+										body: { option: "zap", command: inputValue },
+									}).then(() => setInputValue(""));
+
+								const slice = editor.state.selection.content();
+								const text = editor.storage.markdown.serializer.serialize(
+									slice.content,
+								);
+
+								complete(text, {
+									body: { option: "zap", command: inputValue },
+								}).then(() => setInputValue(""));
+							}}
+						>
+							<ArrowUp className="h-4 w-4" />
+						</Button>
+					</div>
+					{hasCompletion ? (
+						<AICompletionCommands
+							onDiscard={() => {
+								editor.chain().unsetHighlight().focus().run();
+								onOpenChange(false);
+							}}
+							completion={completion}
+						/>
+					) : (
+						<AISelectorCommands
+							onSelect={(value, option) =>
+								complete(value, { body: { option } })
+							}
+						/>
+					)}
+				</>
+			)}
+		</Command>
+	);
+}
diff --git a/apps/web/components/editor/generative/generative-menu-switch.tsx b/apps/web/components/editor/generative/generative-menu-switch.tsx
new file mode 100644
index 00000000..61d8d9df
--- /dev/null
+++ b/apps/web/components/editor/generative/generative-menu-switch.tsx
@@ -0,0 +1,75 @@
+import { EditorBubble, useEditor } from "novel";
+import { removeAIHighlight } from "novel/extensions";
+import {} from "novel/plugins";
+import React, { Fragment, type ReactNode, useEffect } from "react";
+import { Button } from "../ui/button";
+import Magic from "../ui/icons/magic";
+import { AISelector } from "./ai-selector";
+
+interface GenerativeMenuSwitchProps {
+	children: ReactNode;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+const GenerativeMenuSwitch = ({
+	children,
+	open,
+	onOpenChange,
+}: GenerativeMenuSwitchProps) => {
+	const { editor } = useEditor();
+
+	useEffect(() => {
+		if (!open) removeAIHighlight(editor);
+	}, [open]);
+	return (
+		<EditorBubble
+			tippyOptions={{
+				placement: open ? "bottom-start" : "top",
+				onHidden: () => {
+					onOpenChange(false);
+					editor.chain().unsetHighlight().run();
+				},
+			}}
+			className="flex w-fit max-w-[90vw] overflow-hidden rounded-md bg-[#1F2428] shadow-xl"
+		>
+			{open && <AISelector open={open} onOpenChange={onOpenChange} />}
+			{!open && (
+				<Fragment>
+					<Button
+						className="gap-1 rounded-none text-purple-500"
+						variant="ghost"
+						onClick={() => onOpenChange(true)}
+						size="sm"
+					>
+						<Magic className="h-5 w-5" />
+						Ask AI
+					</Button>
+					{children}
+				</Fragment>
+			)}
+		</EditorBubble>
+	);
+};
+
+function AILessBubbleMenu({ children }: { children: React.ReactNode }) {
+	const { editor } = useEditor();
+	if (!editor) {
+		return null;
+	}
+
+	return (
+		<EditorBubble
+			tippyOptions={{
+				placement: "top",
+				onHidden: () => {
+					editor.chain().unsetHighlight().run();
+				},
+			}}
+			className="flex w-fit max-w-[90vw] overflow-hidden rounded-md bg-[#1F2428] shadow-xl"
+		>
+			{children}
+		</EditorBubble>
+	);
+}
+
+export default AILessBubbleMenu;
diff --git a/apps/web/components/editor/image-upload.ts b/apps/web/components/editor/image-upload.ts
new file mode 100644
index 00000000..0cf93a40
--- /dev/null
+++ b/apps/web/components/editor/image-upload.ts
@@ -0,0 +1,60 @@
+import { createImageUpload } from "novel/plugins";
+import { toast } from "sonner";
+
+const onUpload = (file: File) => {
+  const promise = fetch("/api/upload", {
+    method: "POST",
+    headers: {
+      "content-type": file?.type || "application/octet-stream",
+      "x-vercel-filename": file?.name || "image.png",
+    },
+    body: file,
+  });
+
+  return new Promise((resolve, reject) => {
+    toast.promise(
+      promise.then(async (res) => {
+        // Successfully uploaded image
+        if (res.status === 200) {
+          const { url } = (await res.json()) as { url: string };
+          // preload the image
+          const image = new Image();
+          image.src = url;
+          image.onload = () => {
+            resolve(url);
+          };
+          // No blob store configured
+        } else if (res.status === 401) {
+          resolve(file);
+          throw new Error("`BLOB_READ_WRITE_TOKEN` environment variable not found, reading image locally instead.");
+          // Unknown error
+        } else {
+          throw new Error("Error uploading image. Please try again.");
+        }
+      }),
+      {
+        loading: "Uploading image...",
+        success: "Image uploaded successfully.",
+        error: (e) => {
+          reject(e);
+          return e.message;
+        },
+      },
+    );
+  });
+};
+
+export const uploadFn = createImageUpload({
+  onUpload,
+  validateFn: (file) => {
+    if (!file.type.includes("image/")) {
+      toast.error("File type not supported.");
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 20) {
+      toast.error("File size too big (max 20MB).");
+      return false;
+    }
+    return true;
+  },
+});
diff --git a/apps/web/components/editor/prosemirror.css b/apps/web/components/editor/prosemirror.css
new file mode 100644
index 00000000..347367fa
--- /dev/null
+++ b/apps/web/components/editor/prosemirror.css
@@ -0,0 +1,212 @@
+.ProseMirror {
+	@apply p-12 px-8 sm:px-12;
+}
+
+.ProseMirror .is-editor-empty:first-child::before {
+	content: attr(data-placeholder);
+	float: left;
+	color: hsl(var(--muted-foreground));
+	pointer-events: none;
+	height: 0;
+}
+.ProseMirror .is-empty::before {
+	content: attr(data-placeholder);
+	float: left;
+	color: hsl(var(--muted-foreground));
+	pointer-events: none;
+	height: 0;
+}
+
+/* Custom image styles */
+
+.ProseMirror img {
+	transition: filter 0.1s ease-in-out;
+
+	&:hover {
+		cursor: pointer;
+		filter: brightness(90%);
+	}
+
+	&.ProseMirror-selectednode {
+		outline: 3px solid #5abbf7;
+		filter: brightness(90%);
+	}
+}
+
+.img-placeholder {
+	position: relative;
+
+	&:before {
+		content: "";
+		box-sizing: border-box;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 36px;
+		height: 36px;
+		border-radius: 50%;
+		border: 3px solid var(--novel-stone-200);
+		border-top-color: var(--novel-stone-800);
+		animation: spinning 0.6s linear infinite;
+	}
+}
+
+@keyframes spinning {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
+
+ul[data-type="taskList"] li > label {
+	margin-right: 0.2rem;
+	user-select: none;
+}
+
+@media screen and (max-width: 768px) {
+	ul[data-type="taskList"] li > label {
+		margin-right: 0.5rem;
+	}
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"] {
+	-webkit-appearance: none;
+	appearance: none;
+	background-color: hsl(var(--background));
+	margin: 0;
+	cursor: pointer;
+	width: 1.2em;
+	height: 1.2em;
+	position: relative;
+	top: 5px;
+	border: 2px solid hsl(var(--border));
+	margin-right: 0.3rem;
+	display: grid;
+	place-content: center;
+
+	&:hover {
+		background-color: hsl(var(--accent));
+	}
+
+	&:active {
+		background-color: hsl(var(--accent));
+	}
+
+	&::before {
+		content: "";
+		width: 0.65em;
+		height: 0.65em;
+		transform: scale(0);
+		transition: 120ms transform ease-in-out;
+		box-shadow: inset 1em 1em;
+		transform-origin: center;
+		clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+	}
+
+	&:checked::before {
+		transform: scale(1);
+	}
+}
+
+ul[data-type="taskList"] li[data-checked="true"] > div > p {
+	color: var(--muted-foreground);
+	text-decoration: line-through;
+	text-decoration-thickness: 2px;
+}
+
+/* Overwrite tippy-box original max-width */
+
+.tippy-box {
+	max-width: 400px !important;
+}
+
+.ProseMirror:not(.dragging) .ProseMirror-selectednode {
+	outline: none !important;
+	background-color: var(--novel-highlight-blue);
+	transition: background-color 0.2s;
+	box-shadow: none;
+}
+
+.drag-handle {
+	position: fixed;
+	opacity: 1;
+	transition: opacity ease-in 0.2s;
+	border-radius: 0.25rem;
+
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(0, 0, 0, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+	background-size: calc(0.5em + 0.375rem) calc(0.5em + 0.375rem);
+	background-repeat: no-repeat;
+	background-position: center;
+	width: 1.2rem;
+	height: 1.5rem;
+	z-index: 50;
+	cursor: grab;
+
+	&:hover {
+		background-color: var(--novel-stone-100);
+		transition: background-color 0.2s;
+	}
+
+	&:active {
+		background-color: var(--novel-stone-200);
+		transition: background-color 0.2s;
+		cursor: grabbing;
+	}
+
+	&.hide {
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	@media screen and (max-width: 600px) {
+		display: none;
+		pointer-events: none;
+	}
+}
+
+.dark .drag-handle {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(255, 255, 255, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+/* Custom Youtube Video CSS */
+iframe {
+	border: 8px solid #ffd00027;
+	border-radius: 4px;
+	min-width: 200px;
+	min-height: 200px;
+	display: block;
+	outline: 0px solid transparent;
+}
+
+div[data-youtube-video] > iframe {
+	cursor: move;
+	aspect-ratio: 16 / 9;
+	width: 100%;
+}
+
+.ProseMirror-selectednode iframe {
+	transition: outline 0.15s;
+	outline: 6px solid #fbbf24;
+}
+
+@media only screen and (max-width: 480px) {
+	div[data-youtube-video] > iframe {
+		max-height: 50px;
+	}
+}
+
+@media only screen and (max-width: 720px) {
+	div[data-youtube-video] > iframe {
+		max-height: 100px;
+	}
+}
+
+/* CSS for bold coloring and highlighting issue*/
+span[style] > strong {
+	color: inherit;
+}
+
+mark[style] > strong {
+	color: inherit;
+}
diff --git a/apps/web/components/editor/selectors/align-selector.tsx b/apps/web/components/editor/selectors/align-selector.tsx
new file mode 100644
index 00000000..3002fbd2
--- /dev/null
+++ b/apps/web/components/editor/selectors/align-selector.tsx
@@ -0,0 +1,87 @@
+import { Check, ChevronDown, LucideIcon } from "lucide-react";
+import { EditorBubbleItem, useEditor } from "novel";
+
+import { Button } from "../ui/button";
+import { PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Popover } from "@radix-ui/react-popover";
+
+export type SelectorItem = {
+	name: string;
+	command: (editor: ReturnType<typeof useEditor>["editor"]) => void;
+	isActive: (editor: ReturnType<typeof useEditor>["editor"]) => boolean;
+};
+
+const items: SelectorItem[] = [
+	{
+		name: "left",
+		command: (editor) => editor.chain().focus().setTextAlign("left").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "left" }),
+	},
+	{
+		name: "center",
+		command: (editor) => editor.chain().focus().setTextAlign("center").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "center" }),
+	},
+	{
+		name: "right",
+		command: (editor) => editor.chain().focus().setTextAlign("right").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "right" }),
+	},
+	{
+		name: "justify",
+		command: (editor) => editor.chain().focus().setTextAlign("justify").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "justify" }),
+	},
+];
+
+interface AlignSelectorProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+
+export const AlignSelector = ({ open, onOpenChange }: AlignSelectorProps) => {
+	const { editor } = useEditor();
+	if (!editor) return null;
+	const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? {
+		name: "Multiple",
+	};
+
+	return (
+		<Popover modal={true} open={open} onOpenChange={onOpenChange}>
+			<PopoverTrigger
+				asChild
+				className="gap-2 rounded-none border-none hover:bg-[#21303D] group focus:ring-0"
+			>
+				<Button size="sm" variant="ghost" className="gap-2">
+					<span className="whitespace-nowrap text-sm text-gray-400 group-hover:text-[#369DFD]">
+						{activeItem.name}
+					</span>
+					<ChevronDown className="h-4 w-4 text-gray-400 group-hover:text-[#369DFD]" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				sideOffset={5}
+				align="start"
+				className="w-48 p-1 bg-[#1F2428] border-0"
+			>
+				{items.map((item) => (
+					<EditorBubbleItem
+						key={item.name}
+						onSelect={(editor) => {
+							item.command(editor);
+							onOpenChange(false);
+						}}
+						className="flex border-0 group cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-[#21303D]"
+					>
+						<div className="flex items-center space-x-2 text-white group-hover:text-[#369DFD]">
+							<span>{item.name}</span>
+						</div>
+						{activeItem.name === item.name && (
+							<Check className="h-4 w-4 text-white" />
+						)}
+					</EditorBubbleItem>
+				))}
+			</PopoverContent>
+		</Popover>
+	);
+};
diff --git a/apps/web/components/editor/selectors/link-selector.tsx b/apps/web/components/editor/selectors/link-selector.tsx
new file mode 100644
index 00000000..7a573dc4
--- /dev/null
+++ b/apps/web/components/editor/selectors/link-selector.tsx
@@ -0,0 +1,120 @@
+import { Button } from "../ui/button";
+import { PopoverContent } from "../ui/popover";
+import { cn } from "@repo/ui/lib/utils";
+import { Popover, PopoverTrigger } from "@radix-ui/react-popover";
+import { Check, Trash } from "lucide-react";
+import { useEditor } from "novel";
+import { useEffect, useRef } from "react";
+
+export function isValidUrl(url: string) {
+	try {
+		new URL(url);
+		return true;
+	} catch (_e) {
+		return false;
+	}
+}
+export function getUrlFromString(str: string) {
+	if (isValidUrl(str)) return str;
+	try {
+		if (str.includes(".") && !str.includes(" ")) {
+			return new URL(`https://${str}`).toString();
+		}
+	} catch (_e) {
+		return null;
+	}
+}
+interface LinkSelectorProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+
+export const LinkSelector = ({ open, onOpenChange }: LinkSelectorProps) => {
+	const inputRef = useRef<HTMLInputElement>(null);
+	const { editor } = useEditor();
+
+	// Autofocus on input by default
+	useEffect(() => {
+		inputRef.current?.focus();
+	});
+	if (!editor) return null;
+
+	return (
+		<Popover modal={true} open={open} onOpenChange={onOpenChange}>
+			<PopoverTrigger asChild>
+				<Button
+					size="sm"
+					variant="ghost"
+					className="gap-2 group rounded-none border-none hover:bg-[#21303D]"
+				>
+					<p
+						className={cn(
+							"underline text-gray-400 group-hover:text-[#369DFD] underline-offset-4",
+							{
+								"text-white": editor.isActive("link"),
+							},
+						)}
+					>
+						↗
+					</p>
+					<p
+						className={cn(
+							"underline text-gray-400 group-hover:text-[#369DFD] underline-offset-4",
+							{
+								"text-white": editor.isActive("link"),
+							},
+						)}
+					>
+						Link
+					</p>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				align="start"
+				className="w-60 p-0 bg-[#1F2428] border-0 shadow-md"
+				sideOffset={10}
+			>
+				<form
+					onSubmit={(e) => {
+						const target = e.currentTarget as HTMLFormElement;
+						e.preventDefault();
+						const input = target[0] as HTMLInputElement;
+						const url = getUrlFromString(input.value);
+						if (url) {
+							editor.chain().focus().setLink({ href: url }).run();
+							onOpenChange(false);
+						}
+					}}
+					className="flex  p-1 "
+				>
+					<input
+						ref={inputRef}
+						type="text"
+						placeholder="Paste a link"
+						className="flex-1 bg-background p-1 text-sm outline-none text-white px-2 py-1"
+						defaultValue={editor.getAttributes("link").href || ""}
+					/>
+					{editor.getAttributes("link").href ? (
+						<Button
+							size="icon"
+							variant="outline"
+							type="button"
+							className="flex h-8 border-0 items-center rounded-sm p-1 text-red-600 hover:text-red-600 hover:bg-red-950"
+							onClick={() => {
+								editor.chain().focus().unsetLink().run();
+								inputRef.current.value = "";
+								onOpenChange(false);
+							}}
+						>
+							<Trash className="h-4 w-4" />
+						</Button>
+					) : (
+						<Button size="icon" className="h-8 px-2">
+							<Check className="h-4 w-4" />
+						</Button>
+					)}
+				</form>
+			</PopoverContent>
+		</Popover>
+	);
+};
diff --git a/apps/web/components/editor/selectors/node-selector.tsx b/apps/web/components/editor/selectors/node-selector.tsx
new file mode 100644
index 00000000..46c6eb01
--- /dev/null
+++ b/apps/web/components/editor/selectors/node-selector.tsx
@@ -0,0 +1,148 @@
+import {
+	Check,
+	CheckSquare,
+	ChevronDown,
+	Code,
+	Heading1,
+	Heading2,
+	Heading3,
+	ListOrdered,
+	type LucideIcon,
+	TextIcon,
+	TextQuote,
+} from "lucide-react";
+import { EditorBubbleItem, useEditor } from "novel";
+
+import { Button } from "../ui/button";
+import { PopoverContent, PopoverTrigger } from "../ui/popover";
+import { Popover } from "@radix-ui/react-popover";
+
+export type SelectorItem = {
+	name: string;
+	icon: LucideIcon;
+	command: (editor: ReturnType<typeof useEditor>["editor"]) => void;
+	isActive: (editor: ReturnType<typeof useEditor>["editor"]) => boolean;
+};
+
+const items: SelectorItem[] = [
+	{
+		name: "Text",
+		icon: TextIcon,
+		command: (editor) => editor.chain().focus().clearNodes().run(),
+		// I feel like there has to be a more efficient way to do this – feel free to PR if you know how!
+		isActive: (editor) =>
+			editor.isActive("paragraph") &&
+			!editor.isActive("bulletList") &&
+			!editor.isActive("orderedList"),
+	},
+	{
+		name: "Heading 1",
+		icon: Heading1,
+		command: (editor) =>
+			editor.chain().focus().clearNodes().toggleHeading({ level: 1 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 1 }),
+	},
+	{
+		name: "Heading 2",
+		icon: Heading2,
+		command: (editor) =>
+			editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 2 }),
+	},
+	{
+		name: "Heading 3",
+		icon: Heading3,
+		command: (editor) =>
+			editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 3 }),
+	},
+	{
+		name: "To-do List",
+		icon: CheckSquare,
+		command: (editor) =>
+			editor.chain().focus().clearNodes().toggleTaskList().run(),
+		isActive: (editor) => editor.isActive("taskItem"),
+	},
+	{
+		name: "Bullet List",
+		icon: ListOrdered,
+		command: (editor) =>
+			editor.chain().focus().clearNodes().toggleBulletList().run(),
+		isActive: (editor) => editor.isActive("bulletList"),
+	},
+	{
+		name: "Numbered List",
+		icon: ListOrdered,
+		command: (editor) =>
+			editor.chain().focus().clearNodes().toggleOrderedList().run(),
+		isActive: (editor) => editor.isActive("orderedList"),
+	},
+	{
+		name: "Quote",
+		icon: TextQuote,
+		command: (editor) =>
+			editor.chain().focus().clearNodes().toggleBlockquote().run(),
+		isActive: (editor) => editor.isActive("blockquote"),
+	},
+	{
+		name: "Code",
+		icon: Code,
+		command: (editor) =>
+			editor.chain().focus().clearNodes().toggleCodeBlock().run(),
+		isActive: (editor) => editor.isActive("codeBlock"),
+	},
+];
+interface NodeSelectorProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+
+export const NodeSelector = ({ open, onOpenChange }: NodeSelectorProps) => {
+	const { editor } = useEditor();
+	if (!editor) return null;
+	const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? {
+		name: "Multiple",
+	};
+
+	return (
+		<Popover modal={true} open={open} onOpenChange={onOpenChange}>
+			<PopoverTrigger
+				asChild
+				className="gap-2 rounded-none border-none hover:bg-[#21303D] group focus:ring-0"
+			>
+				<Button size="sm" variant="ghost" className="gap-2">
+					<span className="whitespace-nowrap text-sm text-gray-400 group-hover:text-[#369DFD]">
+						{activeItem.name}
+					</span>
+					<ChevronDown className="h-4 w-4 text-gray-400 group-hover:text-[#369DFD]" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent
+				sideOffset={5}
+				align="start"
+				className="w-48 p-1 bg-[#1F2428] border-0"
+			>
+				{items.map((item) => (
+					<EditorBubbleItem
+						key={item.name}
+						onSelect={(editor) => {
+							item.command(editor);
+							onOpenChange(false);
+						}}
+						className="flex border-0 group cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-[#21303D]"
+					>
+						<div className="flex items-center space-x-2 text-white group-hover:text-[#369DFD]">
+							<div className="rounded-sm p-1">
+								<item.icon className="h-3 w-3 " />
+							</div>
+							<span>{item.name}</span>
+						</div>
+						{activeItem.name === item.name && (
+							<Check className="h-4 w-4 text-white" />
+						)}
+					</EditorBubbleItem>
+				))}
+			</PopoverContent>
+		</Popover>
+	);
+};
diff --git a/apps/web/components/editor/selectors/text-buttons.tsx b/apps/web/components/editor/selectors/text-buttons.tsx
new file mode 100644
index 00000000..d2c2c881
--- /dev/null
+++ b/apps/web/components/editor/selectors/text-buttons.tsx
@@ -0,0 +1,75 @@
+import { Button } from "../ui/button";
+import { cn } from "@repo/ui/lib/utils";
+import {
+	BoldIcon,
+	CodeIcon,
+	ItalicIcon,
+	StrikethroughIcon,
+	UnderlineIcon,
+} from "lucide-react";
+import { EditorBubbleItem, useEditor } from "novel";
+import type { SelectorItem } from "./node-selector";
+
+export const TextButtons = () => {
+	const { editor } = useEditor();
+	if (!editor) return null;
+	const items: SelectorItem[] = [
+		{
+			name: "bold",
+			isActive: (editor) => editor.isActive("bold"),
+			command: (editor) => editor.chain().focus().toggleBold().run(),
+			icon: BoldIcon,
+		},
+		{
+			name: "italic",
+			isActive: (editor) => editor.isActive("italic"),
+			command: (editor) => editor.chain().focus().toggleItalic().run(),
+			icon: ItalicIcon,
+		},
+		{
+			name: "underline",
+			isActive: (editor) => editor.isActive("underline"),
+			command: (editor) => editor.chain().focus().toggleUnderline().run(),
+			icon: UnderlineIcon,
+		},
+		{
+			name: "strike",
+			isActive: (editor) => editor.isActive("strike"),
+			command: (editor) => editor.chain().focus().toggleStrike().run(),
+			icon: StrikethroughIcon,
+		},
+		{
+			name: "code",
+			isActive: (editor) => editor.isActive("code"),
+			command: (editor) => editor.chain().focus().toggleCode().run(),
+			icon: CodeIcon,
+		},
+	];
+	return (
+		<div className="flex">
+			{items.map((item) => (
+				<EditorBubbleItem
+					key={item.name}
+					onSelect={(editor) => {
+						item.command(editor);
+					}}
+				>
+					<Button
+						size="sm"
+						className="rounded-none group hover:bg-[#21303D]"
+						variant="ghost"
+					>
+						<item.icon
+							className={cn(
+								"h-4 w-4 text-gray-400 group-hover:text-[#369DFD]",
+								{
+									"text-white group-hover:text-white": item.isActive(editor),
+								},
+							)}
+						/>
+					</Button>
+				</EditorBubbleItem>
+			))}
+		</div>
+	);
+};
diff --git a/apps/web/components/editor/slash-command.tsx b/apps/web/components/editor/slash-command.tsx
new file mode 100644
index 00000000..8ec32475
--- /dev/null
+++ b/apps/web/components/editor/slash-command.tsx
@@ -0,0 +1,209 @@
+import {
+	CheckSquare,
+	Code,
+	Heading1,
+	Heading2,
+	Heading3,
+	ImageIcon,
+	List,
+	ListOrdered,
+	MessageSquarePlus,
+	Text,
+	TextQuote,
+	Twitter,
+	Youtube,
+} from "lucide-react";
+import { createSuggestionItems } from "novel/extensions";
+import { Command, renderItems } from "novel/extensions";
+import { uploadFn } from "./image-upload";
+
+export const suggestionItems = createSuggestionItems([
+	{
+		title: "Text",
+		description: "Just start typing with plain text.",
+		searchTerms: ["p", "paragraph"],
+		icon: <Text size={18} />,
+		command: ({ editor, range }) => {
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.toggleNode("paragraph", "paragraph")
+				.run();
+		},
+	},
+	{
+		title: "To-do List",
+		description: "Track tasks with a to-do list.",
+		searchTerms: ["todo", "task", "list", "check", "checkbox"],
+		icon: <CheckSquare size={18} />,
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).toggleTaskList().run();
+		},
+	},
+	{
+		title: "Heading 1",
+		description: "Big section heading.",
+		searchTerms: ["title", "big", "large"],
+		icon: <Heading1 size={18} />,
+		command: ({ editor, range }) => {
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.setNode("heading", { level: 1 })
+				.run();
+		},
+	},
+	{
+		title: "Heading 2",
+		description: "Medium section heading.",
+		searchTerms: ["subtitle", "medium"],
+		icon: <Heading2 size={18} />,
+		command: ({ editor, range }) => {
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.setNode("heading", { level: 2 })
+				.run();
+		},
+	},
+	{
+		title: "Heading 3",
+		description: "Small section heading.",
+		searchTerms: ["subtitle", "small"],
+		icon: <Heading3 size={18} />,
+		command: ({ editor, range }) => {
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.setNode("heading", { level: 3 })
+				.run();
+		},
+	},
+	{
+		title: "Bullet List",
+		description: "Create a simple bullet list.",
+		searchTerms: ["unordered", "point"],
+		icon: <List size={18} />,
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).toggleBulletList().run();
+		},
+	},
+	{
+		title: "Numbered List",
+		description: "Create a list with numbering.",
+		searchTerms: ["ordered"],
+		icon: <ListOrdered size={18} />,
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+		},
+	},
+	{
+		title: "Quote",
+		description: "Capture a quote.",
+		searchTerms: ["blockquote"],
+		icon: <TextQuote size={18} />,
+		command: ({ editor, range }) =>
+			editor
+				.chain()
+				.focus()
+				.deleteRange(range)
+				.toggleNode("paragraph", "paragraph")
+				.toggleBlockquote()
+				.run(),
+	},
+	{
+		title: "Code",
+		description: "Capture a code snippet.",
+		searchTerms: ["codeblock"],
+		icon: <Code size={18} />,
+		command: ({ editor, range }) =>
+			editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+	},
+	// {
+	//   title: "Image",
+	//   description: "Upload an image from your computer.",
+	//   searchTerms: ["photo", "picture", "media"],
+	//   icon: <ImageIcon size={18} />,
+	//   command: ({ editor, range }) => {
+	//     editor.chain().focus().deleteRange(range).run();
+	//     // upload image
+	//     const input = document.createElement("input");
+	//     input.type = "file";
+	//     input.accept = "image/*";
+	//     input.onchange = async () => {
+	//       if (input.files?.length) {
+	//         const file = input.files[0];
+	//         const pos = editor.view.state.selection.from;
+	//         uploadFn(file, editor.view, pos);
+	//       }
+	//     };
+	//     input.click();
+	//   },
+	// },
+	{
+		title: "Youtube",
+		description: "Embed a Youtube video.",
+		searchTerms: ["video", "youtube", "embed"],
+		icon: <Youtube size={18} />,
+		command: ({ editor, range }) => {
+			const videoLink = prompt("Please enter Youtube Video Link");
+			//From https://regexr.com/3dj5t
+			const ytregex = new RegExp(
+				/^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?$/,
+			);
+
+			if (ytregex.test(videoLink)) {
+				editor
+					.chain()
+					.focus()
+					.deleteRange(range)
+					.setYoutubeVideo({
+						src: videoLink,
+					})
+					.run();
+			} else {
+				if (videoLink !== null) {
+					alert("Please enter a correct Youtube Video Link");
+				}
+			}
+		},
+	},
+	{
+		title: "Twitter",
+		description: "Embed a Tweet.",
+		searchTerms: ["twitter", "embed"],
+		icon: <Twitter size={18} />,
+		command: ({ editor, range }) => {
+			const tweetLink = prompt("Please enter Twitter Link");
+			const tweetRegex = new RegExp(
+				/^https?:\/\/(www\.)?x\.com\/([a-zA-Z0-9_]{1,15})(\/status\/(\d+))?(\/\S*)?$/,
+			);
+
+			if (tweetRegex.test(tweetLink)) {
+				editor
+					.chain()
+					.focus()
+					.deleteRange(range)
+					.setTweet({
+						src: tweetLink,
+					})
+					.run();
+			} else {
+				if (tweetLink !== null) {
+					alert("Please enter a correct Twitter Link");
+				}
+			}
+		},
+	},
+]);
+
+export const slashCommand = Command.configure({
+	suggestion: {
+		items: () => suggestionItems,
+		render: renderItems,
+	},
+});
diff --git a/apps/web/components/editor/toc.tsx b/apps/web/components/editor/toc.tsx
new file mode 100644
index 00000000..1bca6a11
--- /dev/null
+++ b/apps/web/components/editor/toc.tsx
@@ -0,0 +1,109 @@
+import { TextSelection } from "@tiptap/pm/state";
+import { useEditor } from "novel";
+import { motion } from "framer-motion";
+type tContent = {
+	id: string;
+	textContent: string;
+	level: number;
+	isActive: boolean;
+	itemIndex: number;
+	isScrolledOver: boolean;
+};
+
+export const ToCItem = ({
+	item,
+	onItemClick,
+}: {
+	item: tContent;
+	onItemClick: (e: MouseEvent, id: string) => void;
+}) => {
+	return (
+		<div
+			className={`text-sm ${
+				item.level === 2 ? "pl-2" : item.level === 3 ? "pl-4" : "pl-0"
+			}`}
+		>
+			<a
+				href={`#${item.id}`}
+				onClick={(e) => onItemClick(e, item.id)}
+				data-item-index={item.itemIndex}
+			>
+				{item.textContent}
+			</a>
+		</div>
+	);
+};
+
+export const ToC = ({ items }: { items: tContent[] }) => {
+	if (items.length === 0) {
+		return;
+	}
+
+	return (
+		<div className="fixed w-40 right-0 top-1/2 -translate-y-1/2 mr-12">
+			<div className="items-end space-y-3 py-2 max-h-[60vh] overflow-hidden">
+				{items.map((item, i) => (
+					<ToCItemStick key={item.id} item={item} />
+				))}
+			</div>
+			<motion.div
+				initial={{ x: 15, opacity: 0 }}
+				whileHover={{ x: 5, opacity: 1 }}
+				transition={{ ease: "easeOut", duration: 0.15 }}
+				className="absolute top-0 right-0 space-y-3"
+			>
+				<Container items={items} />
+			</motion.div>
+		</div>
+	);
+};
+
+function Container({ items }: { items: tContent[] }) {
+	const { editor } = useEditor();
+
+	const onItemClick = (e, id) => {
+		e.preventDefault();
+
+		if (editor) {
+			const element = editor.view.dom.querySelector(`[data-toc-id="${id}"`);
+			const pos = editor.view.posAtDOM(element, 0);
+
+			// set focus
+			const tr = editor.view.state.tr;
+
+			tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
+
+			editor.view.dispatch(tr);
+
+			editor.view.focus();
+
+			if (history.pushState) {
+				// eslint-disable-line
+				history.pushState(null, null, `#${id}`); // eslint-disable-line
+			}
+
+			window.scrollTo({
+				top: element.getBoundingClientRect().top + window.scrollY,
+				behavior: "smooth",
+			});
+		}
+	};
+
+	return (
+		<div className="bg-[#1F2428] rounded-xl overflow-auto max-h-[60vh] px-4">
+			{items.map((item, i) => (
+				<ToCItem onItemClick={onItemClick} key={item.id} item={item} />
+			))}
+		</div>
+	);
+}
+
+export function ToCItemStick({ item }: { item: tContent }) {
+	return (
+		<div
+			className={`h-[0.125rem] bg-gray-500 rounded-xl ml-auto ${
+				item.level === 1 ? "w-6" : item.level === 2 ? "w-4" : "w-3"
+			}`}
+		></div>
+	);
+}
diff --git a/apps/web/components/editor/ui/button.tsx b/apps/web/components/editor/ui/button.tsx
new file mode 100644
index 00000000..f43814cb
--- /dev/null
+++ b/apps/web/components/editor/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				outline:
+					"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-10 px-4 py-2",
+				sm: "h-9 rounded-md px-3",
+				lg: "h-11 rounded-md px-8",
+				icon: "h-10 w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button";
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, size, className }))}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/apps/web/components/editor/ui/command.tsx b/apps/web/components/editor/ui/command.tsx
new file mode 100644
index 00000000..bb739a4a
--- /dev/null
+++ b/apps/web/components/editor/ui/command.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import type { DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+
+import { cn } from "@repo/ui/lib/utils";
+import { Dialog, DialogContent } from "./dialog";
+import Magic from "./icons/magic";
+
+const Command = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+	return (
+		<Dialog {...props}>
+			<DialogContent className="overflow-hidden p-0 shadow-lg">
+				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+const CommandInput = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Input>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+	<div className="flex items-center border-b px-4" cmdk-input-wrapper="">
+		<Magic className="mr-2 h-4 w-4 shrink-0 text-purple-500 " />
+		<CommandPrimitive.Input
+			ref={ref}
+			className={cn(
+				"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	</div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+		{...props}
+	/>
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+	<CommandPrimitive.Empty
+		ref={ref}
+		className="py-6 text-center text-sm"
+		{...props}
+	/>
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 h-px bg-border", className)}
+		{...props}
+	/>
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};
diff --git a/apps/web/components/editor/ui/dialog.tsx b/apps/web/components/editor/ui/dialog.tsx
new file mode 100644
index 00000000..20e88c88
--- /dev/null
+++ b/apps/web/components/editor/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col space-y-1.5 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			className,
+		)}
+		{...props}
+	/>
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn(
+			"text-lg font-semibold leading-none tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogClose,
+	DialogTrigger,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
+};
diff --git a/apps/web/components/editor/ui/icons/crazy-spinner.tsx b/apps/web/components/editor/ui/icons/crazy-spinner.tsx
new file mode 100644
index 00000000..e1a6ef8f
--- /dev/null
+++ b/apps/web/components/editor/ui/icons/crazy-spinner.tsx
@@ -0,0 +1,11 @@
+const CrazySpinner = () => {
+  return (
+    <div className="flex items-center justify-center gap-0.5">
+      <div className="h-1.5 w-1.5 animate-bounce rounded-full bg-purple-500 [animation-delay:-0.3s]" />
+      <div className="h-1.5 w-1.5 animate-bounce rounded-full bg-purple-500 [animation-delay:-0.15s]" />
+      <div className="h-1.5 w-1.5 animate-bounce rounded-full bg-purple-500" />
+    </div>
+  );
+};
+
+export default CrazySpinner;
diff --git a/apps/web/components/editor/ui/icons/loading-circle.tsx b/apps/web/components/editor/ui/icons/loading-circle.tsx
new file mode 100644
index 00000000..2a638117
--- /dev/null
+++ b/apps/web/components/editor/ui/icons/loading-circle.tsx
@@ -0,0 +1,20 @@
+export default function LoadingCircle({ dimensions }: { dimensions?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={`${dimensions || "h-4 w-4"} animate-spin fill-stone-600 text-stone-200`}
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/components/editor/ui/icons/magic.tsx b/apps/web/components/editor/ui/icons/magic.tsx
new file mode 100644
index 00000000..410346f7
--- /dev/null
+++ b/apps/web/components/editor/ui/icons/magic.tsx
@@ -0,0 +1,32 @@
+export default function Magic({ className }: { className: string }) {
+  return (
+    <svg
+      width="469"
+      height="469"
+      viewBox="0 0 469 469"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      shapeRendering="geometricPrecision"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      className={className}
+    >
+      <title>Magic AI icon</title>
+
+      <path
+        d="M237.092 62.3004L266.754 71.4198C267.156 71.5285 267.51 71.765 267.765 72.0934C268.02 72.4218 268.161 72.8243 268.166 73.2399C268.172 73.6555 268.042 74.0616 267.796 74.3967C267.55 74.7318 267.201 74.9777 266.803 75.097L237.141 84.3145C236.84 84.4058 236.566 84.5699 236.344 84.7922C236.121 85.0146 235.957 85.2883 235.866 85.5893L226.747 115.252C226.638 115.653 226.401 116.008 226.073 116.263C225.745 116.517 225.342 116.658 224.926 116.664C224.511 116.669 224.105 116.539 223.77 116.293C223.435 116.047 223.189 115.699 223.069 115.301L213.852 85.6383C213.761 85.3374 213.597 85.0636 213.374 84.8412C213.152 84.6189 212.878 84.4548 212.577 84.3635L182.914 75.2441C182.513 75.1354 182.158 74.8989 181.904 74.5705C181.649 74.2421 181.508 73.8396 181.503 73.424C181.497 73.0084 181.627 72.6023 181.873 72.2672C182.119 71.9321 182.467 71.6863 182.865 71.5669L212.528 62.3494C212.829 62.2582 213.103 62.0941 213.325 61.8717C213.547 61.6494 213.712 61.3756 213.803 61.0747L222.922 31.4121C223.031 31.0109 223.267 30.656 223.596 30.4013C223.924 30.1465 224.327 30.0057 224.742 30.0002C225.158 29.9946 225.564 30.1247 225.899 30.3706C226.234 30.6165 226.48 30.9649 226.599 31.363L235.817 61.0257C235.908 61.3266 236.072 61.6003 236.295 61.8227C236.517 62.0451 236.791 62.2091 237.092 62.3004Z"
+        fill="currentColor"
+      />
+      <path
+        d="M155.948 155.848L202.771 168.939C203.449 169.131 204.045 169.539 204.47 170.101C204.895 170.663 205.125 171.348 205.125 172.052C205.125 172.757 204.895 173.442 204.47 174.004C204.045 174.566 203.449 174.974 202.771 175.166L155.899 188.06C155.361 188.209 154.87 188.496 154.475 188.891C154.079 189.286 153.793 189.777 153.644 190.316L140.553 237.138C140.361 237.816 139.953 238.413 139.391 238.838C138.829 239.262 138.144 239.492 137.44 239.492C136.735 239.492 136.05 239.262 135.488 238.838C134.927 238.413 134.519 237.816 134.327 237.138L121.432 190.267C121.283 189.728 120.997 189.237 120.601 188.842C120.206 188.446 119.715 188.16 119.177 188.011L72.3537 174.92C71.676 174.728 71.0795 174.32 70.6547 173.759C70.2299 173.197 70 172.512 70 171.807C70 171.103 70.2299 170.418 70.6547 169.856C71.0795 169.294 71.676 168.886 72.3537 168.694L119.226 155.799C119.764 155.65 120.255 155.364 120.65 154.969C121.046 154.573 121.332 154.082 121.481 153.544L134.572 106.721C134.764 106.043 135.172 105.447 135.734 105.022C136.295 104.597 136.981 104.367 137.685 104.367C138.389 104.367 139.075 104.597 139.637 105.022C140.198 105.447 140.606 106.043 140.798 106.721L153.693 153.593C153.842 154.131 154.128 154.622 154.524 155.018C154.919 155.413 155.41 155.699 155.948 155.848Z"
+        fill="currentColor"
+      />
+      <path
+        d="M386.827 289.992C404.33 292.149 403.84 305.828 386.876 307.299C346.623 310.829 298.869 316.271 282.199 360.005C274.844 379.192 269.942 403.2 267.49 432.029C267.427 432.846 267.211 433.626 266.856 434.319C266.501 435.012 266.015 435.602 265.431 436.05C254.988 444.041 251.212 434.186 250.183 425.606C239.2 332.353 214.588 316.909 124.668 306.122C123.892 306.031 123.151 305.767 122.504 305.35C121.857 304.933 121.322 304.375 120.942 303.72C116.399 295.679 119.324 291.038 129.718 289.796C224.688 278.47 236.062 262.83 250.183 169.331C252.177 156.355 257.259 154.083 265.431 162.516C266.51 163.593 267.202 165.099 267.392 166.782C279.257 258.564 293.328 278.617 386.827 289.992Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/components/editor/ui/menu.tsx b/apps/web/components/editor/ui/menu.tsx
new file mode 100644
index 00000000..4346fab9
--- /dev/null
+++ b/apps/web/components/editor/ui/menu.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { Check, Menu as MenuIcon, Monitor, Moon, SunDim } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "./button";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+// TODO implement multiple fonts editor
+// const fonts = [
+//   {
+//     font: "Default",
+//     icon: <FontDefault className="h-4 w-4" />,
+//   },
+//   {
+//     font: "Serif",
+//     icon: <FontSerif className="h-4 w-4" />,
+//   },
+//   {
+//     font: "Mono",
+//     icon: <FontMono className="h-4 w-4" />,
+//   },
+// ];
+const appearances = [
+  {
+    theme: "System",
+    icon: <Monitor className="h-4 w-4" />,
+  },
+  {
+    theme: "Light",
+    icon: <SunDim className="h-4 w-4" />,
+  },
+  {
+    theme: "Dark",
+    icon: <Moon className="h-4 w-4" />,
+  },
+];
+export default function Menu() {
+  // const { font: currentFont, setFont } = useContext(AppContext);
+  const { theme: currentTheme, setTheme } = useTheme();
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <MenuIcon width={16} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-52 p-2" align="end">
+        {/* <div className="p-2">
+          <p className="p-2 text-xs font-medium text-stone-500">Font</p>
+          {fonts.map(({ font, icon }) => (
+            <button
+              key={font}
+              className="flex w-full items-center justify-between rounded px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+              onClick={() => {
+                setFont(font);
+              }}
+            >
+              <div className="flex items-center space-x-2">
+                <div className="rounded-sm border border-stone-200 p-1">
+                  {icon}
+                </div>
+                <span>{font}</span>
+              </div>
+              {currentFont === font && <Check className="h-4 w-4" />}
+            </button>
+          ))}
+        </div> */}
+        <p className="p-2 text-xs font-medium text-muted-foreground">Appearance</p>
+        {appearances.map(({ theme, icon }) => (
+          <Button
+            variant="ghost"
+            key={theme}
+            className="flex w-full items-center justify-between rounded px-2 py-1.5 text-sm"
+            onClick={() => {
+              setTheme(theme.toLowerCase());
+            }}
+          >
+            <div className="flex items-center space-x-2">
+              <div className="rounded-sm border  p-1">{icon}</div>
+              <span>{theme}</span>
+            </div>
+            {currentTheme === theme.toLowerCase() && <Check className="h-4 w-4" />}
+          </Button>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/apps/web/components/editor/ui/popover.tsx b/apps/web/components/editor/ui/popover.tsx
new file mode 100644
index 00000000..c2d13643
--- /dev/null
+++ b/apps/web/components/editor/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/apps/web/components/editor/ui/scroll-area.tsx b/apps/web/components/editor/ui/scroll-area.tsx
new file mode 100644
index 00000000..f5f9fcdf
--- /dev/null
+++ b/apps/web/components/editor/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const ScrollArea = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+	<ScrollAreaPrimitive.Root
+		ref={ref}
+		className={cn("relative overflow-hidden", className)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+			{children}
+		</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			"flex touch-none select-none transition-colors",
+			orientation === "vertical" &&
+				"h-full w-2.5 border-l border-l-transparent p-[1px]",
+			orientation === "horizontal" &&
+				"h-2.5 flex-col border-t border-t-transparent p-[1px]",
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/apps/web/components/editor/ui/separator.tsx b/apps/web/components/editor/ui/separator.tsx
new file mode 100644
index 00000000..9731d2f3
--- /dev/null
+++ b/apps/web/components/editor/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@repo/ui/lib/utils";
+
+const Separator = React.forwardRef<
+	React.ElementRef<typeof SeparatorPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+	(
+		{ className, orientation = "horizontal", decorative = true, ...props },
+		ref,
+	) => (
+		<SeparatorPrimitive.Root
+			ref={ref}
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"shrink-0 bg-border",
+				orientation === "horizontal" ? "h-[1px] w-full" : " w-[1px]",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/apps/web/package.json b/apps/web/package.json
index 109d7907..71445ce5 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -17,40 +17,48 @@
 		"update-prod-db": "wrangler d1 execute prod-d1-supermemory --remote"
 	},
 	"dependencies": {
-		"@radix-ui/react-dialog": "^1.0.5",
-		"@radix-ui/react-popover": "^1.0.7",
+		"@radix-ui/react-dialog": "^1.1.1",
+		"@radix-ui/react-popover": "^1.1.1",
 		"@radix-ui/react-slot": "^1.1.0",
-		"@sentry/nextjs": "^8",
-		"ai": "^3.3.0",
+		"@sentry/nextjs": "^8.26.0",
+		"@tiptap-pro/extension-emoji": "^2.10.11",
+		"@tiptap-pro/extension-table-of-contents": "^2.10.11",
+		"@tiptap/extension-text-align": "^2.6.4",
+		"@tiptap/extension-typography": "^2.6.4",
+		"@tiptap/pm": "^2.6.4",
+		"@tiptap/react": "^2.6.4",
+		"ai": "^3.3.7",
+		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.0.0",
 		"drizzle-orm": "0.30.0",
 		"lowlight": "^3.1.0",
-		"million": "^3.1.6",
-		"next": "^14.1.1",
+		"million": "^3.1.11",
+		"next": "^14.2.5",
 		"next-pwa": "^5.6.0",
-		"novel": "^0.4.2",
-		"nuqs": "^1.17.4",
-		"posthog-js": "^1.154.5",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-resizable-panels": "^2.0.19",
-		"use-debounce": "^10.0.1"
+		"novel": "^0.4.3",
+		"nuqs": "^1.17.8",
+		"posthog-js": "^1.155.4",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-resizable-panels": "^2.1.0",
+		"tippy.js": "^6.3.7",
+		"use-debounce": "^10.0.2"
 	},
 	"devDependencies": {
-		"@cloudflare/next-on-pages": "1",
-		"@next/eslint-plugin-next": "^14.1.1",
-		"@repo/eslint-config": "*",
-		"@repo/shared-types": "*",
-		"@repo/tailwind-config": "*",
-		"@repo/typescript-config": "*",
-		"@types/eslint": "^8.56.5",
-		"@types/node": "^20.11.24",
-		"@types/react": "^18.2.61",
-		"@types/react-dom": "^18.2.19",
+		"@cloudflare/next-on-pages": "^1.13.2",
+		"@next/eslint-plugin-next": "^14.2.5",
+		"@repo/eslint-config": "^0.0.0",
+		"@repo/shared-types": "^0.0.1",
+		"@repo/tailwind-config": "^0.0.0",
+		"@repo/typescript-config": "^0.0.0",
+		"@types/eslint": "^8.56.11",
+		"@types/node": "^20.14.15",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
 		"eslint": "^8.57.0",
-		"postcss": "^8.4.38",
-		"typescript": "^5.3.3",
-		"wrangler": "^3.66.0"
+		"postcss": "^8.4.41",
+		"typescript": "^5.5.4",
+		"wrangler": "^3.71.0"
 	}
 }
-- 
cgit v1.2.3


From 58dae2ef695bb902c0b7935f36ac6b51f556e02f Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Sat, 17 Aug 2024 05:50:16 +0530
Subject: popover ruining my day again

---
 apps/web/components/editor/advanced-editor.tsx |  9 +++--
 apps/web/components/editor/toc.tsx             | 49 ++++++++------------------
 2 files changed, 20 insertions(+), 38 deletions(-)

(limited to 'apps')

diff --git a/apps/web/components/editor/advanced-editor.tsx b/apps/web/components/editor/advanced-editor.tsx
index b6565c82..f08cd15a 100644
--- a/apps/web/components/editor/advanced-editor.tsx
+++ b/apps/web/components/editor/advanced-editor.tsx
@@ -45,6 +45,7 @@ type tContent = {
 	isActive: boolean;
 	itemIndex: number;
 	isScrolledOver: boolean;
+	pos: number;
 };
 
 const TailwindAdvancedEditor = memo(
@@ -60,18 +61,20 @@ const TailwindAdvancedEditor = memo(
 			TableOfContents.configure({
 				getIndex: getHierarchicalIndexes,
 				onUpdate(content) {
+					console.log(content);
 					setItems(content);
 				},
 			}),
 		];
 
 		return (
-			<div className="relative w-full h-full">
+			<div className="relative w-full h-full bg-[#171B1F]">
 				<EditorRoot>
 					<EditorContent
+						autofocus
 						initialContent={defaultEditorContent}
 						extensions={extensions}
-						className="relative max-w-[98vw] h-[98vh] overflow-auto w-full bg-[#171B1F] sm:rounded-lg sm:shadow-lg"
+						className="relative w-full h-full py-10 max-w-5xl m-auto overflow-auto bg-transparent sm:rounded-lg sm:shadow-lg"
 						editorProps={{
 							handleDOMEvents: {
 								keydown: (_view, event) => handleCommandNavigation(event),
@@ -103,7 +106,7 @@ const TailwindAdvancedEditor = memo(
 										className="flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-[#21303D] group aria-selected:bg-[#21303D]"
 										key={item.title}
 									>
-										<div className="flex h-10 w-10 items-center justify-center rounded-md bg-[#2D343A] group-hover:bg-[#369DFD33] group-aria-selected:bg-[#369DFD33]">
+										<div className="flex h-12 w-12 items-center justify-center rounded-md bg-[#2D343A] group-hover:bg-[#369DFD33] group-aria-selected:bg-[#369DFD33]">
 											{item.icon}
 										</div>
 										<div>
diff --git a/apps/web/components/editor/toc.tsx b/apps/web/components/editor/toc.tsx
index 1bca6a11..4f5a3abb 100644
--- a/apps/web/components/editor/toc.tsx
+++ b/apps/web/components/editor/toc.tsx
@@ -1,6 +1,6 @@
-import { TextSelection } from "@tiptap/pm/state";
 import { useEditor } from "novel";
 import { motion } from "framer-motion";
+
 type tContent = {
 	id: string;
 	textContent: string;
@@ -8,6 +8,7 @@ type tContent = {
 	isActive: boolean;
 	itemIndex: number;
 	isScrolledOver: boolean;
+	pos: number;
 };
 
 export const ToCItem = ({
@@ -15,7 +16,7 @@ export const ToCItem = ({
 	onItemClick,
 }: {
 	item: tContent;
-	onItemClick: (e: MouseEvent, id: string) => void;
+	onItemClick: (pos: number) => void;
 }) => {
 	return (
 		<div
@@ -23,24 +24,23 @@ export const ToCItem = ({
 				item.level === 2 ? "pl-2" : item.level === 3 ? "pl-4" : "pl-0"
 			}`}
 		>
-			<a
-				href={`#${item.id}`}
-				onClick={(e) => onItemClick(e, item.id)}
-				data-item-index={item.itemIndex}
+			<div
+				onClick={() => onItemClick(item.pos)}
+				className={`cursor-pointer text-base font-medium py-1 px-2 w-full hover:bg-[#2b3238] transition-colors rounded-sm ${item.isActive && "text-blue-500"}`}
 			>
 				{item.textContent}
-			</a>
+			</div>
 		</div>
 	);
 };
 
 export const ToC = ({ items }: { items: tContent[] }) => {
-	if (items.length === 0) {
+	if (items.length < 2) {
 		return;
 	}
 
 	return (
-		<div className="fixed w-40 right-0 top-1/2 -translate-y-1/2 mr-12">
+		<div className="fixed right-0 top-1/4 -translate-y-1/2 mr-12">
 			<div className="items-end space-y-3 py-2 max-h-[60vh] overflow-hidden">
 				{items.map((item, i) => (
 					<ToCItemStick key={item.id} item={item} />
@@ -50,7 +50,7 @@ export const ToC = ({ items }: { items: tContent[] }) => {
 				initial={{ x: 15, opacity: 0 }}
 				whileHover={{ x: 5, opacity: 1 }}
 				transition={{ ease: "easeOut", duration: 0.15 }}
-				className="absolute top-0 right-0 space-y-3"
+				className="absolute top-0 right-0 space-y-3 min-w-72 max-w-72"
 			>
 				<Container items={items} />
 			</motion.div>
@@ -61,36 +61,15 @@ export const ToC = ({ items }: { items: tContent[] }) => {
 function Container({ items }: { items: tContent[] }) {
 	const { editor } = useEditor();
 
-	const onItemClick = (e, id) => {
-		e.preventDefault();
-
+	const onItemClick = (pos: number) => {
+		console.log(pos);
 		if (editor) {
-			const element = editor.view.dom.querySelector(`[data-toc-id="${id}"`);
-			const pos = editor.view.posAtDOM(element, 0);
-
-			// set focus
-			const tr = editor.view.state.tr;
-
-			tr.setSelection(new TextSelection(tr.doc.resolve(pos)));
-
-			editor.view.dispatch(tr);
-
-			editor.view.focus();
-
-			if (history.pushState) {
-				// eslint-disable-line
-				history.pushState(null, null, `#${id}`); // eslint-disable-line
-			}
-
-			window.scrollTo({
-				top: element.getBoundingClientRect().top + window.scrollY,
-				behavior: "smooth",
-			});
+			editor.commands.focus(pos ? pos : 1, { scrollIntoView: true });
 		}
 	};
 
 	return (
-		<div className="bg-[#1F2428] rounded-xl overflow-auto max-h-[60vh] px-4">
+		<div className="bg-[#1F2428] rounded-xl overflow-auto max-h-[60vh] px-4 py-6">
 			{items.map((item, i) => (
 				<ToCItem onItemClick={onItemClick} key={item.id} item={item} />
 			))}
-- 
cgit v1.2.3


From 429a088c74ff900bfc380e2dd4e789796c1d2d61 Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Sat, 17 Aug 2024 05:58:17 +0530
Subject: get this file in

---
 apps/web/components/editor/advanced-editor.tsx | 6 ------
 1 file changed, 6 deletions(-)

(limited to 'apps')

diff --git a/apps/web/components/editor/advanced-editor.tsx b/apps/web/components/editor/advanced-editor.tsx
index f08cd15a..5da44245 100644
--- a/apps/web/components/editor/advanced-editor.tsx
+++ b/apps/web/components/editor/advanced-editor.tsx
@@ -7,22 +7,17 @@ import {
 	EditorCommandItem,
 	EditorCommandList,
 	EditorContent,
-	type EditorInstance,
 	EditorRoot,
-	type JSONContent,
 	useEditor,
 } from "novel";
 import { ImageResizer, handleCommandNavigation } from "novel/extensions";
 import { memo, useState } from "react";
-import { useDebouncedCallback } from "use-debounce";
 import { defaultExtensions } from "./extensions";
 import { LinkSelector } from "./selectors/link-selector";
 import { NodeSelector } from "./selectors/node-selector";
 import { Separator } from "./ui/separator";
 
-import { handleImageDrop, handleImagePaste } from "novel/plugins";
 import GenerativeMenuSwitch from "./generative/generative-menu-switch";
-import { uploadFn } from "./image-upload";
 import { TextButtons } from "./selectors/text-buttons";
 import { slashCommand, suggestionItems } from "./slash-command";
 import { ToC } from "./toc";
@@ -31,7 +26,6 @@ import {
 	TableOfContents,
 } from "@tiptap-pro/extension-table-of-contents";
 import { AlignSelector } from "./selectors/align-selector";
-import { useFormStatus } from "react-dom";
 import { Button } from "@repo/ui/shadcn/button";
 
 const MemorizedToC = memo(ToC);
-- 
cgit v1.2.3


From d419b06456508cb38a5316eddddece129f2cf0f6 Mon Sep 17 00:00:00 2001
From: codetorso <pruthvirajthinks@gmail.com>
Date: Sat, 17 Aug 2024 06:59:37 +0530
Subject: commit it

---
 apps/web/components/editor/extensions.ts | 17 -----------------
 1 file changed, 17 deletions(-)

(limited to 'apps')

diff --git a/apps/web/components/editor/extensions.ts b/apps/web/components/editor/extensions.ts
index eadf2d0c..571ec28c 100644
--- a/apps/web/components/editor/extensions.ts
+++ b/apps/web/components/editor/extensions.ts
@@ -2,24 +2,17 @@ import {
   AIHighlight,
   CharacterCount,
   CodeBlockLowlight,
-  // Color,
-  // CustomKeymap,
   GlobalDragHandle,
-  // HighlightExtension,
   HorizontalRule,
-  // MarkdownExtension,
   Placeholder,
   StarterKit,
   TaskItem,
   TaskList,
-  // TextStyle,
   TiptapImage,
   TiptapLink,
-  // TiptapUnderline,
   Twitter,
   UpdatedImage,
   Youtube,
-  // Mathematics,
 } from "novel/extensions";
 import suggestion from "./emoji/suggestion"
 import { UploadImagesPlugin } from "novel/plugins";
@@ -120,8 +113,6 @@ const starterKit = StarterKit.configure({
 });
 
 const codeBlockLowlight = CodeBlockLowlight.configure({
-  // configure lowlight: common /  all / use highlightJS in case there is a need to specify certain language grammars only
-  // common: covers 37 language grammars which should be good enough in most cases
   lowlight: createLowlight(common),
 });
 
@@ -139,14 +130,6 @@ const twitter = Twitter.configure({
   inline: false,
 });
 
-// const mathematics = Mathematics.configure({
-//   HTMLAttributes: {
-//     class: cx("text-foreground rounded p-1 hover:bg-accent cursor-pointer"),
-//   },
-//   katexOptions: {
-//     throwOnError: false,
-//   },
-// });
 
 const characterCount = CharacterCount.configure();
 
-- 
cgit v1.2.3


From 7a29516d24184f6343a06e686f8eea6315ba97d0 Mon Sep 17 00:00:00 2001
From: Dhravya Shah <dhravyashah@gmail.com>
Date: Tue, 27 Aug 2024 11:18:40 -0700
Subject: minor fixes

---
 apps/web/app/(dash)/menu.tsx                |   3 +-
 apps/web/migrations/meta/0001_snapshot.json | 923 ++++++++++++++++++++++++++++
 apps/web/migrations/meta/_journal.json      |   7 +
 apps/web/next-env.d.ts                      |   2 +-
 apps/web/wrangler.toml                      |   4 +-
 5 files changed, 934 insertions(+), 5 deletions(-)
 create mode 100644 apps/web/migrations/meta/0001_snapshot.json

(limited to 'apps')

diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index 68466cb1..45cfc599 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -289,7 +289,6 @@ function DialogContentMenu({ setDialogClose }: { setDialogClose: () => void }) {
 				</div>
 
 				<div>
-					{content}
 					<Label htmlFor="name">Resource (URL or content)</Label>
 					<Textarea
 						autoFocus
@@ -313,7 +312,7 @@ function DialogContentMenu({ setDialogClose }: { setDialogClose: () => void }) {
 					<Dialog onOpenChange={setEditorOpen} open={editorOpen}>
 						<DialogTrigger>
 							<Button variant={"secondary"} type="button">
-								Try Note Editor!
+								Open Markdown Editor
 							</Button>
 						</DialogTrigger>
 						<EditorDialog
diff --git a/apps/web/migrations/meta/0001_snapshot.json b/apps/web/migrations/meta/0001_snapshot.json
new file mode 100644
index 00000000..cc157c33
--- /dev/null
+++ b/apps/web/migrations/meta/0001_snapshot.json
@@ -0,0 +1,923 @@
+{
+	"version": "6",
+	"dialect": "sqlite",
+	"id": "30bdc8fa-70a7-44b7-a06b-59b950a62c11",
+	"prevId": "3fbdb153-2764-4b09-ac22-05c3a131ec35",
+	"tables": {
+		"account": {
+			"name": "account",
+			"columns": {
+				"userId": {
+					"name": "userId",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"type": {
+					"name": "type",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"provider": {
+					"name": "provider",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"providerAccountId": {
+					"name": "providerAccountId",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"refresh_token": {
+					"name": "refresh_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"access_token": {
+					"name": "access_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"expires_at": {
+					"name": "expires_at",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"token_type": {
+					"name": "token_type",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"scope": {
+					"name": "scope",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"id_token": {
+					"name": "id_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"session_state": {
+					"name": "session_state",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"account_userId_user_id_fk": {
+					"name": "account_userId_user_id_fk",
+					"tableFrom": "account",
+					"tableTo": "user",
+					"columnsFrom": ["userId"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {
+				"account_provider_providerAccountId_pk": {
+					"columns": ["provider", "providerAccountId"],
+					"name": "account_provider_providerAccountId_pk"
+				}
+			},
+			"uniqueConstraints": {}
+		},
+		"authenticator": {
+			"name": "authenticator",
+			"columns": {
+				"credentialID": {
+					"name": "credentialID",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"userId": {
+					"name": "userId",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"providerAccountId": {
+					"name": "providerAccountId",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"credentialPublicKey": {
+					"name": "credentialPublicKey",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"counter": {
+					"name": "counter",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"credentialDeviceType": {
+					"name": "credentialDeviceType",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"credentialBackedUp": {
+					"name": "credentialBackedUp",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"transports": {
+					"name": "transports",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				}
+			},
+			"indexes": {
+				"authenticator_credentialID_unique": {
+					"name": "authenticator_credentialID_unique",
+					"columns": ["credentialID"],
+					"isUnique": true
+				}
+			},
+			"foreignKeys": {
+				"authenticator_userId_user_id_fk": {
+					"name": "authenticator_userId_user_id_fk",
+					"tableFrom": "authenticator",
+					"tableTo": "user",
+					"columnsFrom": ["userId"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {
+				"authenticator_userId_credentialID_pk": {
+					"columns": ["credentialID", "userId"],
+					"name": "authenticator_userId_credentialID_pk"
+				}
+			},
+			"uniqueConstraints": {}
+		},
+		"canvas": {
+			"name": "canvas",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"title": {
+					"name": "title",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "'Untitled'"
+				},
+				"description": {
+					"name": "description",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "'Untitled'"
+				},
+				"url": {
+					"name": "url",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "''"
+				},
+				"userId": {
+					"name": "userId",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {
+				"canvas_user_userId": {
+					"name": "canvas_user_userId",
+					"columns": ["userId"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {
+				"canvas_userId_user_id_fk": {
+					"name": "canvas_userId_user_id_fk",
+					"tableFrom": "canvas",
+					"tableTo": "user",
+					"columnsFrom": ["userId"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {}
+		},
+		"chatHistory": {
+			"name": "chatHistory",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "integer",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": true
+				},
+				"threadId": {
+					"name": "threadId",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"question": {
+					"name": "question",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"answerParts": {
+					"name": "answerParts",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"answerSources": {
+					"name": "answerSources",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"answerJustification": {
+					"name": "answerJustification",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"createdAt": {
+					"name": "createdAt",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "'\"2024-08-27T18:12:22.062Z\"'"
+				}
+			},
+			"indexes": {
+				"chatHistory_thread_idx": {
+					"name": "chatHistory_thread_idx",
+					"columns": ["threadId"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {
+				"chatHistory_threadId_chatThread_id_fk": {
+					"name": "chatHistory_threadId_chatThread_id_fk",
+					"tableFrom": "chatHistory",
+					"tableTo": "chatThread",
+					"columnsFrom": ["threadId"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {}
+		},
+		"chatThread": {
+			"name": "chatThread",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"firstMessage": {
+					"name": "firstMessage",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"userId": {
+					"name": "userId",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {
+				"chatThread_user_idx": {
+					"name": "chatThread_user_idx",
+					"columns": ["userId"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {
+				"chatThread_userId_user_id_fk": {
+					"name": "chatThread_userId_user_id_fk",
+					"tableFrom": "chatThread",
+					"tableTo": "user",
+					"columnsFrom": ["userId"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {}
+		},
+		"contentToSpace": {
+			"name": "contentToSpace",
+			"columns": {
+				"contentId": {
+					"name": "contentId",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"spaceId": {
+					"name": "spaceId",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"contentToSpace_contentId_storedContent_id_fk": {
+					"name": "contentToSpace_contentId_storedContent_id_fk",
+					"tableFrom": "contentToSpace",
+					"tableTo": "storedContent",
+					"columnsFrom": ["contentId"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				},
+				"contentToSpace_spaceId_space_id_fk": {
+					"name": "contentToSpace_spaceId_space_id_fk",
+					"tableFrom": "contentToSpace",
+					"tableTo": "space",
+					"columnsFrom": ["spaceId"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {
+				"contentToSpace_contentId_spaceId_pk": {
+					"columns": ["contentId", "spaceId"],
+					"name": "contentToSpace_contentId_spaceId_pk"
+				}
+			},
+			"uniqueConstraints": {}
+		},
+		"jobs": {
+			"name": "jobs",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "integer",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": true
+				},
+				"userId": {
+					"name": "userId",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"url": {
+					"name": "url",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"status": {
+					"name": "status",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"attempts": {
+					"name": "attempts",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": 0
+				},
+				"lastAttemptAt": {
+					"name": "lastAttemptAt",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"error": {
+					"name": "error",
+					"type": "blob",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"createdAt": {
+					"name": "createdAt",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "'\"2024-08-27T18:12:22.062Z\"'"
+				},
+				"updatedAt": {
+					"name": "updatedAt",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "'\"2024-08-27T18:12:22.062Z\"'"
+				}
+			},
+			"indexes": {
+				"jobs_userId_idx": {
+					"name": "jobs_userId_idx",
+					"columns": ["userId"],
+					"isUnique": false
+				},
+				"jobs_status_idx": {
+					"name": "jobs_status_idx",
+					"columns": ["status"],
+					"isUnique": false
+				},
+				"jobs_createdAt_idx": {
+					"name": "jobs_createdAt_idx",
+					"columns": ["createdAt"],
+					"isUnique": false
+				},
+				"jobs_url_idx": {
+					"name": "jobs_url_idx",
+					"columns": ["url"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {
+				"jobs_userId_user_id_fk": {
+					"name": "jobs_userId_user_id_fk",
+					"tableFrom": "jobs",
+					"tableTo": "user",
+					"columnsFrom": ["userId"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {}
+		},
+		"session": {
+			"name": "session",
+			"columns": {
+				"sessionToken": {
+					"name": "sessionToken",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"userId": {
+					"name": "userId",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"expires": {
+					"name": "expires",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"session_userId_user_id_fk": {
+					"name": "session_userId_user_id_fk",
+					"tableFrom": "session",
+					"tableTo": "user",
+					"columnsFrom": ["userId"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {}
+		},
+		"space": {
+			"name": "space",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "integer",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": true
+				},
+				"name": {
+					"name": "name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": "'none'"
+				},
+				"user": {
+					"name": "user",
+					"type": "text(255)",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"createdAt": {
+					"name": "createdAt",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"numItems": {
+					"name": "numItems",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false,
+					"default": 0
+				}
+			},
+			"indexes": {
+				"space_name_unique": {
+					"name": "space_name_unique",
+					"columns": ["name"],
+					"isUnique": true
+				},
+				"spaces_name_idx": {
+					"name": "spaces_name_idx",
+					"columns": ["name"],
+					"isUnique": false
+				},
+				"spaces_user_idx": {
+					"name": "spaces_user_idx",
+					"columns": ["user"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {
+				"space_user_user_id_fk": {
+					"name": "space_user_user_id_fk",
+					"tableFrom": "space",
+					"tableTo": "user",
+					"columnsFrom": ["user"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {}
+		},
+		"spacesAccess": {
+			"name": "spacesAccess",
+			"columns": {
+				"spaceId": {
+					"name": "spaceId",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"userEmail": {
+					"name": "userEmail",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"spacesAccess_spaceId_space_id_fk": {
+					"name": "spacesAccess_spaceId_space_id_fk",
+					"tableFrom": "spacesAccess",
+					"tableTo": "space",
+					"columnsFrom": ["spaceId"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {
+				"spacesAccess_spaceId_userEmail_pk": {
+					"columns": ["spaceId", "userEmail"],
+					"name": "spacesAccess_spaceId_userEmail_pk"
+				}
+			},
+			"uniqueConstraints": {}
+		},
+		"storedContent": {
+			"name": "storedContent",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "integer",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": true
+				},
+				"content": {
+					"name": "content",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"title": {
+					"name": "title",
+					"type": "text(255)",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"description": {
+					"name": "description",
+					"type": "text(255)",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"url": {
+					"name": "url",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"savedAt": {
+					"name": "savedAt",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"baseUrl": {
+					"name": "baseUrl",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"ogImage": {
+					"name": "ogImage",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"type": {
+					"name": "type",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false,
+					"default": "'page'"
+				},
+				"image": {
+					"name": "image",
+					"type": "text(255)",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"user": {
+					"name": "user",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"noteId": {
+					"name": "noteId",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				}
+			},
+			"indexes": {
+				"storedContent_url_idx": {
+					"name": "storedContent_url_idx",
+					"columns": ["url"],
+					"isUnique": false
+				},
+				"storedContent_savedAt_idx": {
+					"name": "storedContent_savedAt_idx",
+					"columns": ["savedAt"],
+					"isUnique": false
+				},
+				"storedContent_title_idx": {
+					"name": "storedContent_title_idx",
+					"columns": ["title"],
+					"isUnique": false
+				},
+				"storedContent_user_idx": {
+					"name": "storedContent_user_idx",
+					"columns": ["user"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {
+				"storedContent_user_user_id_fk": {
+					"name": "storedContent_user_user_id_fk",
+					"tableFrom": "storedContent",
+					"tableTo": "user",
+					"columnsFrom": ["user"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {}
+		},
+		"user": {
+			"name": "user",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"name": {
+					"name": "name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"email": {
+					"name": "email",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"emailVerified": {
+					"name": "emailVerified",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"image": {
+					"name": "image",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"telegramId": {
+					"name": "telegramId",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false
+				},
+				"hasOnboarded": {
+					"name": "hasOnboarded",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": false,
+					"autoincrement": false,
+					"default": false
+				}
+			},
+			"indexes": {
+				"users_email_idx": {
+					"name": "users_email_idx",
+					"columns": ["email"],
+					"isUnique": false
+				},
+				"users_telegram_idx": {
+					"name": "users_telegram_idx",
+					"columns": ["telegramId"],
+					"isUnique": false
+				},
+				"users_id_idx": {
+					"name": "users_id_idx",
+					"columns": ["id"],
+					"isUnique": false
+				}
+			},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {}
+		},
+		"verificationToken": {
+			"name": "verificationToken",
+			"columns": {
+				"identifier": {
+					"name": "identifier",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"token": {
+					"name": "token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				},
+				"expires": {
+					"name": "expires",
+					"type": "integer",
+					"primaryKey": false,
+					"notNull": true,
+					"autoincrement": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {
+				"verificationToken_identifier_token_pk": {
+					"columns": ["identifier", "token"],
+					"name": "verificationToken_identifier_token_pk"
+				}
+			},
+			"uniqueConstraints": {}
+		}
+	},
+	"enums": {},
+	"_meta": {
+		"schemas": {},
+		"tables": {},
+		"columns": {}
+	}
+}
diff --git a/apps/web/migrations/meta/_journal.json b/apps/web/migrations/meta/_journal.json
index 59ab4ea6..03637d1d 100644
--- a/apps/web/migrations/meta/_journal.json
+++ b/apps/web/migrations/meta/_journal.json
@@ -8,6 +8,13 @@
 			"when": 1722411353835,
 			"tag": "0000_fixed_pandemic",
 			"breakpoints": true
+		},
+		{
+			"idx": 1,
+			"version": "6",
+			"when": 1724782342070,
+			"tag": "0001_huge_puma",
+			"breakpoints": true
 		}
 	]
 }
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
index 40c3d680..4f11a03d 100644
--- a/apps/web/next-env.d.ts
+++ b/apps/web/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/web/wrangler.toml b/apps/web/wrangler.toml
index 6062c8bf..a6232450 100644
--- a/apps/web/wrangler.toml
+++ b/apps/web/wrangler.toml
@@ -26,8 +26,8 @@ bucket_name = "dev-r2-anycontext"
 
 [[d1_databases]]
 binding = "DATABASE"
-database_name = "prod-d1-supermemory"
-database_id = "f527a727-c472-41d4-8eaf-3d7ba0f2f395"
+database_name = "dev-d1-anycontext"
+database_id = "fc562605-157a-4f60-b439-2a24ffed5b4c"
 
 [[env.production.d1_databases]]
 binding = "DATABASE"
-- 
cgit v1.2.3