Merge pull request #268 from supermemoryai/CodeTorso-main

Code torso's editor PR

3 files changed, 119 insertions, 84 deletions

diff --git a/apps/web/app/(dash)/(memories)/content.tsx b/apps/web/app/(dash)/(memories)/content.tsx
index 0f83d0fc..9dba3637 100644
--- a/apps/web/app/(dash)/(memories)/content.tsx
+++ b/apps/web/app/(dash)/(memories)/content.tsx
@@ -304,7 +304,13 @@ function SpaceComponent({
 					href={`/space/${id}`}
 					className="flex items-center justify-between w-full"
 				>
-					<div className="grow">
+					<div>
+						<div className="h-12 w-12 flex justify-center items-center rounded-md">
+							{title.slice(0, 2).toUpperCase()}
+							{id}
+						</div>
+					</div>
+					<div className="grow px-2">
 						<div className="text-lg text-[#fff] line-clamp-2">{title}</div>
 						<div>{description}</div>
 					</div>
@@ -312,7 +318,7 @@ function SpaceComponent({
 						<Image src={NextIcon} alt="Search icon" />
 					</div>
 				</Link>
-				<div className="absolute z-40 right-5 top-4 opacity-0 group-hover:opacity-100 hover:text-red-600">
+				<div className="absolute z-40 right-3 top-3 opacity-0 group-hover:opacity-100 hover:text-red-600">
 					<SpaceDeleteAlert
 						onClick={() => {
 							handleDeleteSpace(id);
diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index abac5411..45cfc599 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,114 @@ 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>
+					<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">
+								Open Markdown 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;