novel editor

2 files changed, 47 insertions, 26 deletions

diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
index 1bd4b688..5a1d92f0 100644
--- a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
+++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { Editor } from "novel";
 import {
   DialogClose,
   DialogDescription,
@@ -8,8 +8,9 @@ import {
 } from "../ui/dialog";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
+import { useRef } from "react";
 
-export default function AddMemoryPage() {
+export function AddMemoryPage() {
   return (
     <>
       <DialogHeader>
@@ -23,7 +24,7 @@ export default function AddMemoryPage() {
       <Input
         placeholder="Enter the URL of the page"
         type="url"
-        data-autofocus
+        data-modal-autofocus
         className="bg-rgray-4 mt-2 w-full"
       />
       <DialogFooter>
@@ -37,3 +38,27 @@ export default function AddMemoryPage() {
     </>
   );
 }
+
+export function NoteAddPage() {
+  return (
+    <>
+      <Input
+        className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 focus-visible:ring-0"
+        placeholder="Name of the note"
+        data-modal-autofocus
+      />
+      <Editor
+        disableLocalStorage
+        className="novel-editor bg-rgray-4 border-rgray-7 dark mt-5 max-h-[60vh] min-h-[40vh] w-[50vw] overflow-y-auto rounded-lg border [&>div>div]:p-5"
+      />
+      <DialogFooter>
+        <DialogClose className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
+          Add
+        </DialogClose>
+        <DialogClose className="hover:bg-rgray-4 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 rounded-md px-3 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
+          Cancel
+        </DialogClose>
+      </DialogFooter>
+    </>
+  );
+}
diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx
index 779dea25..83984233 100644
--- a/apps/web/src/components/Sidebar/MemoriesBar.tsx
+++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx
@@ -5,9 +5,7 @@ import {
   MemoryWithImages3,
   MemoryWithImages2,
 } from "@/assets/MemoryWithImages";
-import { type CollectedSpaces }
-
-from "../../../types/memory";
+import { type CollectedSpaces } from "../../../types/memory";
 import { Input, InputWithIcon } from "../ui/input";
 import {
   ArrowUpRight,
@@ -42,7 +40,7 @@ import { Label } from "../ui/label";
 import useViewport from "@/hooks/useViewport";
 import useTouchHold from "@/hooks/useTouchHold";
 import { DialogTrigger } from "@radix-ui/react-dialog";
-import AddMemoryPage from "./AddMemoryDialog";
+import { AddMemoryPage, NoteAddPage } from "./AddMemoryDialog";
 
 export function MemoriesBar() {
   const [parent, enableAnimations] = useAutoAnimate();
@@ -319,32 +317,30 @@ export function AddMemoryModal({
       <DialogContent
         onOpenAutoFocus={(e) => {
           e.preventDefault();
+          const novel = document.querySelector('[contenteditable="true"]') as
+            | HTMLDivElement
+            | undefined;
+          if (novel) {
+            novel.autofocus = false;
+            novel.onfocus = () => {
+              (
+                document.querySelector("[data-modal-autofocus]") as
+                  | HTMLInputElement
+                  | undefined
+              )?.focus();
+              novel.onfocus = null;
+            };
+          }
           (
-            document.querySelector("[data-autofocus]") as
+            document.querySelector("[data-modal-autofocus]") as
               | HTMLInputElement
               | undefined
           )?.focus();
         }}
+        className="w-max max-w-[auto]"
       >
         {type === "page" && <AddMemoryPage />}
-        {type === "note" && (
-          <>
-            <Input
-              className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 focus-visible:ring-0"
-              placeholder="Name of the note"
-              data-autofocus
-            />
-            <Editor />
-            <DialogFooter>
-              <DialogClose className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
-                Add
-              </DialogClose>
-              <DialogClose className="hover:bg-rgray-4 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 rounded-md px-3 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
-                Cancel
-              </DialogClose>
-            </DialogFooter>
-          </>
-        )}
+        {type === "note" && <NoteAddPage />}
       </DialogContent>
     </Dialog>
   );