Deskop: Fixed shortcut to focus the note body (#5597)

laurent22 · Oct 30, 2021 · 8de9032 · 8de9032
1 parent 0b01b5b
commit 8de9032
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
@@ -147,7 +147,9 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 					if (props.visiblePanes.indexOf('editor') >= 0) {
 						editorRef.current.focus();
 					} else {
-						webviewRef.current.wrappedInstance.focus();
+						// If we just call wrappedInstance.focus() then the iframe is focused,
+						// but not its content, such that scrolling up / down with arrow keys fails
+						webviewRef.current.wrappedInstance.send('focus');
 					}
 				} else {
 					commandProcessed = false;

diff --git a/packages/app-desktop/gui/NoteTextViewer.tsx b/packages/app-desktop/gui/NoteTextViewer.tsx
@@ -146,6 +146,10 @@ class NoteTextViewerComponent extends React.Component<Props, any> {
 	send(channel: string, arg0: any = null, arg1: any = null) {
 		const win = this.webviewRef_.current.contentWindow;
 
+		if (channel === 'focus') {
+			win.postMessage({ target: 'webview', name: 'focus', data: {} }, '*');
+		}
+
 		if (channel === 'setHtml') {
 			win.postMessage({ target: 'webview', name: 'setHtml', data: { html: arg0, options: arg1 } }, '*');
 		}

diff --git a/packages/app-desktop/gui/note-viewer/index.html b/packages/app-desktop/gui/note-viewer/index.html
@@ -197,6 +197,17 @@
 
 		let checkAllImageLoadedIID_ = null;
 
+		ipc.focus = (event) => {
+			const dummyID = 'joplin-content-focus-dummy';
+			if (! document.getElementById(dummyID)) {
+				const focusDummy = '<div style="width: 0; height: 0; overflow: hidden"><a id="' + dummyID + '" href="#">focus dummy</a></div>';
+				contentElement.insertAdjacentHTML("afterbegin", focusDummy);
+			}
+			const scrollTop = contentElement.scrollTop;
+			document.getElementById(dummyID).focus();
+			contentElement.scrollTop = scrollTop;
+		}
+
 		ipc.setHtml = (event) => {
 			const html = event.html;