Desktop: Fixes #11445: Link watched files to the current window (#11590)

packages/app-desktop/gui/NoteEditor/NoteEditor.tsx

@@ -59,6 +59,7 @@ import { EditorActivationCheckFilterObject } from '@joplin/lib/services/plugins/
 import PluginService from '@joplin/lib/services/plugins/PluginService';
 import WebviewController from '@joplin/lib/services/plugins/WebviewController';
 import AsyncActionQueue, { IntervalType } from '@joplin/lib/AsyncActionQueue';
+import useResourceUnwatcher from './utils/useResourceUnwatcher';
 
 const debounce = require('debounce');
 
@@ -358,6 +359,8 @@ function NoteEditorContent(props: NoteEditorProps) {
 	const windowId = useContext(WindowIdContext);
 	const onMessage = useMessageHandler(scrollWhenReady, clearScrollWhenReady, windowId, editorRef, setLocalSearchResultCount, props.dispatch, formNote, htmlToMarkdown, markupToHtml);
 
+	useResourceUnwatcher({ noteId: formNote.id, windowId });
+
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 	const externalEditWatcher_noteChange = useCallback((event: any) => {
 		if (event.id === formNote.id) {
@@ -729,7 +732,7 @@ const mapStateToProps = (state: AppState, ownProps: ConnectProps) => {
 		selectedSearchId: windowState.selectedSearchId,
 		customCss: state.customViewerCss,
 		noteVisiblePanes: windowState.noteVisiblePanes,
-		watchedResources: state.watchedResources,
+		watchedResources: windowState.watchedResources,
 		highlightedWords: state.highlightedWords,
 		plugins: state.pluginService.plugins,
 		pluginHtmlContents: state.pluginService.pluginHtmlContents,

packages/app-desktop/gui/NoteEditor/utils/useResourceUnwatcher.ts

@@ -0,0 +1,21 @@
+import ResourceEditWatcher from '@joplin/lib/services/ResourceEditWatcher';
+import { useEffect } from 'react';
+
+interface Props {
+	noteId: string;
+	windowId: string;
+}
+
+const useResourceUnwatcher = ({ noteId, windowId }: Props) => {
+	useEffect(() => {
+		// All resources associated with the current window should no longer be watched after:
+		// 1. The editor unloads, or
+		// 2. The note shown in the editor changes.
+		// Unwatching in a cleanup callback handles both cases.
+		return () => {
+			void ResourceEditWatcher.instance().stopWatchingAll(windowId);
+		};
+	}, [noteId, windowId]);
+};
+
+export default useResourceUnwatcher;

packages/app-desktop/gui/NoteEditor/utils/useScrollWhenReadyOptions.ts

@@ -1,7 +1,6 @@
 import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { NoteBodyEditorRef, ScrollOptions, ScrollOptionTypes } from './types';
 import usePrevious from '@joplin/lib/hooks/usePrevious';
-import ResourceEditWatcher from '@joplin/lib/services/ResourceEditWatcher';
 import type { EditorScrollPercents } from '../../../app.reducer';
 
 interface Props {
@@ -30,8 +29,6 @@ const useScrollWhenReadyOptions = ({ noteId, selectedNoteHash, lastEditorScrollP
 			type: selectedNoteHash ? ScrollOptionTypes.Hash : ScrollOptionTypes.Percent,
 			value: selectedNoteHash ? selectedNoteHash : lastScrollPercent,
 		});
-
-		void ResourceEditWatcher.instance().stopWatchingAll();
 	}, [noteId, previousNoteId, selectedNoteHash, editorRef]);
 
 	const clearScrollWhenReady = useCallback(() => {