editor

3 files changed, 151 insertions, 106 deletions

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;