novel editor

3 files changed, 100 insertions, 28 deletions

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index f19a0b57..cedb03dc 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -57,14 +57,65 @@ body {
   padding-bottom: 15dvh;
 }
 
-.chat-answer pre {
+.chat-answer pre  {
   @apply bg-rgray-3 rounded-md border border-rgray-5 p-3 text-sm my-5;
 }
 
+.novel-editor pre {
+  @apply bg-rgray-3 rounded-md border border-rgray-5 p-4 text-sm text-rgray-11;
+}
+
 .chat-answer h1 {
   @apply text-rgray-11 text-xl font-medium my-5;
 }
 
 .chat-answer img {
   @apply rounded-md font-medium my-5;
-}
\ No newline at end of file
+}
+
+.tippy-box {
+  @apply bg-rgray-3 text-rgray-11 border border-rgray-5 rounded-md py-0;
+}
+
+.tippy-content #slash-command {
+  @apply text-rgray-11 bg-transparent border-none;
+}
+
+#slash-command button {
+  @apply text-rgray-11 py-2;
+}
+
+#slash-command button div:first-child {
+  @apply text-rgray-11 bg-rgray-4 border-rgray-5 ;
+}
+
+#slash-command button.novel-bg-stone-100 {
+  @apply bg-rgray-1;
+}
+
+.novel-editor [data-type=taskList] > li {
+  @apply my-0;
+}
+
+.novel-editor input[type=checkbox] {
+  @apply accent-rgray-4 rounded-md;
+
+  background: var(--gray-4) !important;
+  border: 1px solid var(--gray-10) !important;
+}
+
+.novel-editor .is-editor-empty::before {
+  content: 'Press \'/\' for commands' !important;
+}
+
+.novel-editor h1 {
+  @apply text-2xl;
+}
+
+.novel-editor h2 {
+  @apply text-xl;
+}
+
+.novel-editor h3 {
+  @apply text-lg;
+}
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>
   );