Fix phantom note updates caused by setEditable emitting update events

This commit is contained in:
chrisf committed 2026-10-24 09:41:56 -06:00
1 parent 25560b0e82
commit 70cf49f005
1 file changed
+14 -1
+14 -1
View File
@@ -101,7 +101,9 @@ export default function RichNoteEditor({
children, children,
}: RichNoteEditorProps) { }: RichNoteEditorProps) {
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
// Track active note ID to only setContent when switching notes
const currentNoteIdRef = useRef<string>(noteId); const currentNoteIdRef = useRef<string>(noteId);
const isLoadedRef = useRef<boolean>(false);
const [isRecording, setIsRecording] = useState(false); const [isRecording, setIsRecording] = useState(false);
const [recordingSeconds, setRecordingSeconds] = useState(0); const [recordingSeconds, setRecordingSeconds] = useState(0);
const mediaRecorderRef = useRef<MediaRecorder | null>(null); const mediaRecorderRef = useRef<MediaRecorder | null>(null);
@@ -408,6 +410,8 @@ export default function RichNoteEditor({
}, },
}, },
onUpdate: ({ editor: ed }) => { onUpdate: ({ editor: ed }) => {
// Guard against synthetic/initial onUpdate events firing before user interaction
if (!isLoadedRef.current) return;
onChange(ed.getHTML()); onChange(ed.getHTML());
}, },
}); });
@@ -417,13 +421,22 @@ export default function RichNoteEditor({
if (!editor) return; if (!editor) return;
if (currentNoteIdRef.current !== noteId) { if (currentNoteIdRef.current !== noteId) {
currentNoteIdRef.current = noteId; currentNoteIdRef.current = noteId;
isLoadedRef.current = false;
editor.commands.setContent(sanitizeOrUnescapeLinks(contentHtml || '<p></p>'), false); editor.commands.setContent(sanitizeOrUnescapeLinks(contentHtml || '<p></p>'), false);
// Re-enable user edit detection after content has loaded
setTimeout(() => {
isLoadedRef.current = true;
}, 50);
} else if (!isLoadedRef.current) {
isLoadedRef.current = true;
} }
}, [noteId, contentHtml, editor]); }, [noteId, contentHtml, editor]);
useEffect(() => { useEffect(() => {
if (!editor) return; if (!editor) return;
editor.setEditable(!readOnly); if (editor.isEditable === readOnly) {
editor.setEditable(!readOnly, false);
}
}, [readOnly, editor]); }, [readOnly, editor]);
const handleInsertFiles = async (files: File[]) => { const handleInsertFiles = async (files: File[]) => {