pass data into tiptap

apps/sovoli.com/src/app/(dashboard)/new/actions/schemas.ts

@@ -4,8 +4,8 @@ import { z } from "zod";
  * For usage with the form action and form
  */
 export const formNewNoteSchema = z.object({
-  title: z.string(),
-  description: z.string(),
-  content: z.string(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  content: z.string().optional(),
 });
 export type FormNewNoteSchema = z.infer<typeof formNewNoteSchema>;

apps/sovoli.com/src/app/(dashboard)/new/components/NoteForm.tsx

@@ -1,17 +1,13 @@
 "use client";
 
 import { useActionState } from "react";
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@sovoli/ui/components/alert";
+import { Alert } from "@sovoli/ui/components/alert";
 import { Button } from "@sovoli/ui/components/button";
 import { Form } from "@sovoli/ui/components/form";
 import { Input } from "@sovoli/ui/components/input";
 
 import type { State } from "../actions/newNoteAction";
-import { Tiptap } from "~/components/TipTap/Tiptap";
+import { Editor } from "~/components/Editor/Editor";
 import { newNoteAction } from "../actions/newNoteAction";
 
 export const NoteForm = () => {
@@ -39,7 +35,11 @@ export const NoteForm = () => {
         fullWidth
         variant="bordered"
       />
-      <Tiptap />
+      <Editor
+        onUpdate={({ editor }) => {
+          console.log(editor.getJSON());
+        }}
+      />
       <div className="flex w-full justify-between gap-2">
         <div className="w-full">
           {state?.status === "error" && (
@@ -59,7 +59,6 @@ export const NoteForm = () => {
           )}
         </div>
         <div className="flex gap-2">
-          <Button isLoading={pending}>Save Draft</Button>
           <Button color="primary" type="submit" isLoading={pending}>
             Create
           </Button>

apps/sovoli.com/src/app/[username]/layout.tsx

@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation";
 
+import { UserProfileContext } from "./context/UserProfileContext";
 import { getUserProfile, preload } from "./lib/getUserProfile";
-import { UserProfileProvider } from "./providers/UserProfileProvider";
 
 interface Props {
   children: React.ReactNode;
@@ -32,7 +32,5 @@ export default async function Layout({ children, params }: Props) {
 
   if (!user) return notFound();
 
-  return (
-    <UserProfileProvider userProfile={user}>{children}</UserProfileProvider>
-  );
+  return <UserProfileContext value={user}>{children}</UserProfileContext>;
 }

apps/sovoli.com/src/components/TipTap/Tiptap.tsx → apps/sovoli.com/src/components/Editor/Editor.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { EditorOptions } from "@tiptap/react";
 import { ButtonGroup } from "@sovoli/ui/components/button";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
@@ -8,7 +9,10 @@ import { MenuButtonRedo } from "./controls/MenuButtonRedo";
 import { MenuButtonUndo } from "./controls/MenuButtonUndo";
 import { MenuSelectHeading } from "./controls/MenuSelectHeading";
 
-export const Tiptap = () => {
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface EditorProps extends Partial<EditorOptions> {}
+
+export const Editor = (props: EditorProps) => {
   const editor = useEditor({
     extensions: [StarterKit],
     editorProps: {
@@ -17,7 +21,7 @@ export const Tiptap = () => {
           "w-full max-w-full py-6 px-8 prose prose-base prose-blue prose-headings:scroll-mt-[80px] focus:outline-none",
       },
     },
-    content: "<p>Start writing...</p>",
+    ...props,
   });
 
   if (!editor) return null;

apps/sovoli.com/src/components/TipTap/controls/MenuSelectHeading.tsx → apps/sovoli.com/src/components/Editor/controls/MenuSelectHeading.tsx

@@ -61,8 +61,6 @@ export const MenuSelectHeading = ({ editor }: MenuSelectHeadingProps) => {
   const isH5 = editor.isActive("heading", { level: 5 });
   const isH6 = editor.isActive("heading", { level: 6 });
 
-  console.log(isH1, isH2, isH3, isH4, isH5, isH6);
-
   const current = useMemo(() => {
     let key: string | number = "paragraph";
     if (isH1) key = 1;