highlights are set in content now

shawnmclean · Jan 3, 2025 · 96a8d22 · 96a8d22
1 parent 764126a
commit 96a8d22
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 58 deletions.
diff --git a/apps/sovoli.com/src/app/(dashboard)/new/components/NoteForm.tsx b/apps/sovoli.com/src/app/(dashboard)/new/components/NoteForm.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { useActionState, useState } from "react";
+import type { Editor as EditorType } from "@tiptap/react";
+import { useActionState, useRef, useState } from "react";
 import { Alert } from "@sovoli/ui/components/alert";
 import { Button } from "@sovoli/ui/components/button";
 import { Form } from "@sovoli/ui/components/form";
@@ -20,14 +21,12 @@ export interface NoteFormProps {
 }
 
 export const NoteForm = ({ title, description, content }: NoteFormProps) => {
+  const editorRef = useRef<EditorType | null>(null);
   const [state, formAction, pending] = useActionState<State, FormData>(
     newNoteAction,
     null,
   );
   const [aiLoading, setAiLoading] = useState<boolean>(false);
-  const [annotations, setAnnotations] = useState<
-    { page: number; chapter: string; highlights: string[] }[]
-  >([]);
 
   const onFileUploaded = async (asset: UploadedAsset) => {
     setAiLoading(true);
@@ -47,8 +46,21 @@ export const NoteForm = ({ title, description, content }: NoteFormProps) => {
       highlights: string[];
     };
 
-    setAnnotations((current) => [...current, responseBody]);
+    const content = responseBody.highlights.flatMap((highlight) => [
+      {
+        type: "blockquote",
+        content: [
+          { type: "paragraph", content: [{ type: "text", text: highlight }] },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: [],
+      },
+    ]);
 
+    // Insert all content at once
+    editorRef.current?.commands.insertContent(content);
     setAiLoading(false);
   };
 
@@ -82,7 +94,7 @@ export const NoteForm = ({ title, description, content }: NoteFormProps) => {
             variant="bordered"
             defaultValue={description}
           />
-          <Editor name="content" defaultValue={content} />
+          <Editor name="content" defaultValue={content} ref={editorRef} />
           <div className="flex w-full justify-between gap-2">
             <div className="w-full">
               {state?.status === "error" && (
@@ -110,34 +122,7 @@ export const NoteForm = ({ title, description, content }: NoteFormProps) => {
             </div>
           </div>
         </div>
-        <div className="space-y-4">
-          side info
-          {annotations.length > 0 && (
-            <div className="flex flex-col gap-2">
-              {annotations.map((annotation, i) => (
-                <div key={i} className="flex flex-col gap-2">
-                  <div className="flex gap-2">
-                    <div className="w-full">
-                      <p className="text-sm text-gray-500 dark:text-gray-400">
-                        Page {annotation.page}
-                      </p>
-                      <p className="text-lg font-bold">{annotation.chapter}</p>
-                    </div>
-                  </div>
-                  {annotation.highlights.map((highlight, j) => (
-                    <div key={j} className="flex gap-2">
-                      <div className="w-full">
-                        <p className="text-sm text-gray-500 dark:text-gray-400">
-                          {highlight}
-                        </p>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
+        <div className="space-y-4">side info</div>
       </div>
     </Form>
   );

diff --git a/apps/sovoli.com/src/app/(dashboard)/new/page.tsx b/apps/sovoli.com/src/app/(dashboard)/new/page.tsx
@@ -5,32 +5,12 @@ export default function NewPage() {
     "type": "doc",
     "content": [
       {
-        "type": "paragraph",
-        "content": [
-          {
-            "type": "text",
-            "text": "Example "
-          },
-          {
-            "type": "text",
-            "marks": [
-              {
-                "type": "bold"
-              }
-            ],
-            "text": "Text"
-          }
-        ]
       }
     ]
   }`;
   return (
     <div className="mx-auto max-w-7xl p-4">
-      <NoteForm
-        title="Hello World"
-        description="This is a test"
-        content={json}
-      />
+      <NoteForm title="" description="" content={json} />
     </div>
   );
 }
diff --git a/apps/sovoli.com/src/components/Editor/Editor.tsx b/apps/sovoli.com/src/components/Editor/Editor.tsx
@@ -1,7 +1,11 @@
 "use client";
 
-import type { EditorOptions, JSONContent } from "@tiptap/react";
-import { useMemo, useState } from "react";
+import type {
+  EditorOptions,
+  Editor as EditorType,
+  JSONContent,
+} from "@tiptap/react";
+import { useEffect, useMemo, useState } from "react";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 
@@ -10,9 +14,10 @@ import { EditorMenu } from "./controls/EditorMenu";
 export interface EditorProps extends Partial<EditorOptions> {
   name: string;
   defaultValue?: string;
+  ref?: React.RefObject<EditorType | null>;
 }
 
-export const Editor = ({ name, defaultValue, ...rest }: EditorProps) => {
+export const Editor = ({ name, defaultValue, ref, ...rest }: EditorProps) => {
   const jsonContent = useMemo(() => {
     try {
       return defaultValue
@@ -44,6 +49,11 @@ export const Editor = ({ name, defaultValue, ...rest }: EditorProps) => {
     },
   });
 
+  useEffect(() => {
+    if (editor && ref && "current" in ref) {
+      ref.current = editor;
+    }
+  }, [editor, ref]);
   if (!editor) {
     return null;
   }