Try to get the title and desc to update

src/app/(root)/manage/_components/photo-editor.tsx

@@ -8,6 +8,7 @@ import Text from "@tiptap/extension-text";
 import Typography from "@tiptap/extension-typography";
 import { Placeholder, UndoRedo } from "@tiptap/extensions";
 import {
+	Editor,
 	EditorContent,
 	useEditor,
 	useEditorState,
@@ -18,9 +19,11 @@ import { useEffect } from "react";
 export default function Tiptap({
 	onChange,
 	initContent,
+	editorRef,
 }: {
 	onChange: (args: unknown) => void;
 	initContent?: Content;
+	editorRef: React.RefObject<Editor | null>;
 }) {
 	const editor = useEditor({
 		extensions: [
@@ -44,6 +47,7 @@ export default function Tiptap({
 		},
 		content: initContent,
 	});
+	editorRef.current = editor;
 
 	const editorState = useEditorState({
 		editor,

src/app/(root)/manage/_components/photo-tab.tsx

@@ -3,7 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import Image from "next/image";
 import type React from "react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import z from "zod";
 import type { PhotoData } from "@/server/api/routers/photos/list";
@@ -11,6 +11,7 @@ import { api } from "@/trpc/react";
 import DirSvg from "./dir-svg";
 import ImageSvg from "./file-svg";
 import Tiptap from "./photo-editor";
+import type { Editor } from "@tiptap/react";
 
 // - TODO - Pull this from trpc
 const FormSchema = z.object({
@@ -123,6 +124,8 @@ function RenderLeaf(
 
 export function PhotoTab(): React.JSX.Element {
 	const [selectedImage, setSelectedImage] = useState<PhotoData>();
+	const editorRef = useRef<Editor>(null);
+	const titleRef = useRef<HTMLInputElement>(null);
 	const listQuery = api.photos.list.useInfiniteQuery(
 		{},
 		{
@@ -137,6 +140,7 @@ export function PhotoTab(): React.JSX.Element {
 	const {
 		register,
 		handleSubmit,
+		setValue,
 		control,
 		formState: { errors },
 	} = useForm<IFormInput>({
@@ -164,6 +168,9 @@ export function PhotoTab(): React.JSX.Element {
 				img.src === `https://fly.storage.tigris.dev/joemonk-photos/${path}`,
 		);
 		setSelectedImage(img);
+		modifyMutate.reset();
+		editorRef.current?.commands.setContent(img?.description ?? null);
+		setValue("title", img?.title ?? "", { shouldTouch: true });
 	};
 
 	const tree = buildDirectoryTree(
@@ -178,6 +185,9 @@ export function PhotoTab(): React.JSX.Element {
 	return (
 		<div className="flex w-full gap-4 md:gap-2 flex-col md:flex-row">
 			<ul className="menu menu-xs bg-base-200 box w-full md:w-1/4">
+				{listQuery.hasNextPage || listQuery.isLoading ? (
+					<progress className="progress w-full"></progress>
+				) : null}
 				{RenderLeaf(renderedTree, selectImage, selectedImage)}
 			</ul>
 			<div className="md:w-3/4 box border border-base-300 p-2 w-full">
@@ -196,10 +206,10 @@ export function PhotoTab(): React.JSX.Element {
 						>
 							<span>{`Title ${errors.title ? ` - ${errors.title.message}` : ""}`}</span>
 							<input
-								{...register("title")}
+								{...register("title", { value: selectedImage?.title })}
+								ref={titleRef}
 								type="text"
 								placeholder="Title"
-								defaultValue={selectedImage?.title}
 							/>
 						</label>
 						<Image
@@ -292,6 +302,7 @@ export function PhotoTab(): React.JSX.Element {
 									<Tiptap
 										onChange={onChange}
 										initContent={selectedImage.description}
+										editorRef={editorRef}
 									/>
 								)}
 							/>