From cceea3ab7f269dfbab8bd649826751f756e24ddf Mon Sep 17 00:00:00 2001
From: Justin Voelker <justin@justinvoelker.com>
Date: Tue, 22 Apr 2025 21:27:27 -0400
Subject: [PATCH 1/2] Fix key prop spread error

---
 app/routes/users+/$username_+/__note-editor.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/routes/users+/$username_+/__note-editor.tsx b/app/routes/users+/$username_+/__note-editor.tsx
index 98074b311..205670627 100644
--- a/app/routes/users+/$username_+/__note-editor.tsx
+++ b/app/routes/users+/$username_+/__note-editor.tsx
@@ -225,7 +225,10 @@ function ImageChooser({
 								</div>
 							)}
 							{existingImage ? (
-								<input {...getInputProps(fields.id, { type: 'hidden' })} />
+								<input
+									{...getInputProps(fields.id, { type: 'hidden' })}
+									key={fields.id.key}
+								/>
 							) : null}
 							<input
 								aria-label="Image"
@@ -245,6 +248,7 @@ function ImageChooser({
 								}}
 								accept="image/*"
 								{...getInputProps(fields.file, { type: 'file' })}
+								key={fields.file.key}
 							/>
 						</label>
 					</div>
@@ -257,6 +261,7 @@ function ImageChooser({
 					<Textarea
 						onChange={(e) => setAltText(e.currentTarget.value)}
 						{...getTextareaProps(fields.altText)}
+						key={fields.altText.key}
 					/>
 					<div className="min-h-[32px] px-4 pt-1 pb-3">
 						<ErrorList

From f027df175500ab4318641e8898608ee8bcdd64ab Mon Sep 17 00:00:00 2001
From: Justin Voelker <justin@justinvoelker.com>
Date: Wed, 23 Apr 2025 20:15:19 -0400
Subject: [PATCH 2/2] Fix reuse of existing image as new image preview

---
 app/routes/users+/$username_+/__note-editor.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/routes/users+/$username_+/__note-editor.tsx b/app/routes/users+/$username_+/__note-editor.tsx
index 205670627..00e4552c7 100644
--- a/app/routes/users+/$username_+/__note-editor.tsx
+++ b/app/routes/users+/$username_+/__note-editor.tsx
@@ -110,7 +110,10 @@ export function NoteEditor({
 							<Label>Images</Label>
 							<ul className="flex flex-col gap-4">
 								{imageList.map((imageMeta, index) => {
-									const image = note?.images[index]
+									const imageMetaId = imageMeta.getFieldset().id.value
+									const image = note?.images.find(
+										({ id }) => id === imageMetaId,
+									)
 									return (
 										<li
 											key={imageMeta.key}