Android 3.3.3

Co-authored-by: Laurent Cozic <laurent22@users.noreply.github.com>

.eslintignore

@@ -158,6 +158,7 @@ packages/app-desktop/commands/exportFolders.js
 packages/app-desktop/commands/exportNotes.js
 packages/app-desktop/commands/focusElement.js
 packages/app-desktop/commands/index.js
+packages/app-desktop/commands/newAppInstance.js
 packages/app-desktop/commands/openNoteInNewWindow.js
 packages/app-desktop/commands/openProfileDirectory.js
 packages/app-desktop/commands/replaceMisspelling.js
@@ -272,6 +273,7 @@ packages/app-desktop/gui/NoteEditor/WarningBanner/BannerContent.js
 packages/app-desktop/gui/NoteEditor/WarningBanner/WarningBanner.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementNoteBody.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementNoteTitle.js
+packages/app-desktop/gui/NoteEditor/commands/focusElementNoteViewer.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementToolbar.js
 packages/app-desktop/gui/NoteEditor/commands/index.js
 packages/app-desktop/gui/NoteEditor/commands/pasteAsText.js
@@ -685,7 +687,14 @@ packages/app-mobile/components/SideMenuContentNote.js
 packages/app-mobile/components/TextInput.js
 packages/app-mobile/components/ToggleSpaceButton.js
 packages/app-mobile/components/accessibility/AccessibleModalMenu.js
+packages/app-mobile/components/accessibility/AccessibleView.test.js
 packages/app-mobile/components/accessibility/AccessibleView.js
+packages/app-mobile/components/accessibility/FocusControl/AutoFocusProvider.js
+packages/app-mobile/components/accessibility/FocusControl/FocusControl.js
+packages/app-mobile/components/accessibility/FocusControl/FocusControlProvider.js
+packages/app-mobile/components/accessibility/FocusControl/MainAppContent.js
+packages/app-mobile/components/accessibility/FocusControl/ModalWrapper.js
+packages/app-mobile/components/accessibility/FocusControl/types.js
 packages/app-mobile/components/app-nav.js
 packages/app-mobile/components/base-screen.js
 packages/app-mobile/components/biometrics/BiometricPopup.js
@@ -1026,6 +1035,7 @@ packages/lib/commands/renderMarkup.test.js
 packages/lib/commands/renderMarkup.js
 packages/lib/commands/showEditorPlugin.js
 packages/lib/commands/synchronize.js
+packages/lib/commands/toggleAllFolders.test.js
 packages/lib/commands/toggleAllFolders.js
 packages/lib/commands/toggleEditorPlugin.js
 packages/lib/components/EncryptionConfigScreen/utils.test.js

.eslintrc.js

@@ -57,6 +57,8 @@ module.exports = {
 		'tinymce': 'readonly',
 
 		'JSX': 'readonly',
+
+		'NodeJS': 'readonly',
 	},
 	'parserOptions': {
 		'ecmaVersion': 2018,
@@ -309,7 +311,7 @@ module.exports = {
 						selector: 'interface',
 						format: null,
 						'filter': {
-							'regex': '^(RSA|RSAKeyPair)$',
+							'regex': '^(RSA|RSAKeyPair|iOS.*)$',
 							'match': true,
 						},
 					},

.github/workflows/github-actions-main.yml

@@ -9,7 +9,7 @@ jobs:
       matrix:
         # Do not use unbuntu-latest because it causes `The operation was canceled` failures:
         # https://github.com/actions/runner-images/issues/6709
-        os: [macos-13, ubuntu-20.04, windows-2019]
+        os: [macos-13, ubuntu-22.04, windows-2019]
     steps:
 
       # Trying to fix random networking issues on Windows
@@ -150,7 +150,7 @@ jobs:
       matrix:
         # Do not use unbuntu-latest because it causes `The operation was canceled` failures:
         # https://github.com/actions/runner-images/issues/6709
-        os: [ubuntu-20.04]
+        os: [ubuntu-22.04]
     steps:
 
       - name: Install Docker Engine

.gitignore

@@ -133,6 +133,7 @@ packages/app-desktop/commands/exportFolders.js
 packages/app-desktop/commands/exportNotes.js
 packages/app-desktop/commands/focusElement.js
 packages/app-desktop/commands/index.js
+packages/app-desktop/commands/newAppInstance.js
 packages/app-desktop/commands/openNoteInNewWindow.js
 packages/app-desktop/commands/openProfileDirectory.js
 packages/app-desktop/commands/replaceMisspelling.js
@@ -247,6 +248,7 @@ packages/app-desktop/gui/NoteEditor/WarningBanner/BannerContent.js
 packages/app-desktop/gui/NoteEditor/WarningBanner/WarningBanner.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementNoteBody.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementNoteTitle.js
+packages/app-desktop/gui/NoteEditor/commands/focusElementNoteViewer.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementToolbar.js
 packages/app-desktop/gui/NoteEditor/commands/index.js
 packages/app-desktop/gui/NoteEditor/commands/pasteAsText.js
@@ -660,7 +662,14 @@ packages/app-mobile/components/SideMenuContentNote.js
 packages/app-mobile/components/TextInput.js
 packages/app-mobile/components/ToggleSpaceButton.js
 packages/app-mobile/components/accessibility/AccessibleModalMenu.js
+packages/app-mobile/components/accessibility/AccessibleView.test.js
 packages/app-mobile/components/accessibility/AccessibleView.js
+packages/app-mobile/components/accessibility/FocusControl/AutoFocusProvider.js
+packages/app-mobile/components/accessibility/FocusControl/FocusControl.js
+packages/app-mobile/components/accessibility/FocusControl/FocusControlProvider.js
+packages/app-mobile/components/accessibility/FocusControl/MainAppContent.js
+packages/app-mobile/components/accessibility/FocusControl/ModalWrapper.js
+packages/app-mobile/components/accessibility/FocusControl/types.js
 packages/app-mobile/components/app-nav.js
 packages/app-mobile/components/base-screen.js
 packages/app-mobile/components/biometrics/BiometricPopup.js
@@ -1001,6 +1010,7 @@ packages/lib/commands/renderMarkup.test.js
 packages/lib/commands/renderMarkup.js
 packages/lib/commands/showEditorPlugin.js
 packages/lib/commands/synchronize.js
+packages/lib/commands/toggleAllFolders.test.js
 packages/lib/commands/toggleAllFolders.js
 packages/lib/commands/toggleEditorPlugin.js
 packages/lib/components/EncryptionConfigScreen/utils.test.js

.yarn/patches/react-native-popup-menu-npm-0.16.1-28fd66ecb5.patch

@@ -0,0 +1,55 @@
+# This patch improves the note actions menu (the kebab menu)'s accessibility
+# by labelling its dismiss button.
+diff --git a/build/rnpm.js b/build/rnpm.js
+index 1111c2de99b3d4c5651ca4eee3ba59c0ce8e13e1..d410ee12b38d02c399b0a40973217da0082d73c0 100644
+--- a/build/rnpm.js
++++ b/build/rnpm.js
+@@ -1573,7 +1573,9 @@
+             onPress = _this$props.onPress,
+             style = _this$props.style;
+         return /*#__PURE__*/React__default.createElement(reactNative.TouchableWithoutFeedback, {
+-          onPress: onPress
++          onPress: onPress,
++          accessibilityLabel: _this$props.accessibilityLabel,
++          accessibilityRole: 'button',
+         }, /*#__PURE__*/React__default.createElement(reactNative.Animated.View, {
+           style: [styles.fullscreen, {
+             opacity: this.fadeAnim
+@@ -1588,7 +1590,8 @@
+   }(React.Component);
+ 
+   Backdrop.propTypes = {
+-    onPress: propTypes.func.isRequired
++    onPress: propTypes.func.isRequired,
++    accessibilityLabel: propTypes.string,
+   };
+   var styles = reactNative.StyleSheet.create({
+     fullscreen: {
+@@ -1658,6 +1661,7 @@
+           style: styles$1.placeholder
+         }, /*#__PURE__*/React__default.createElement(Backdrop, {
+           onPress: ctx._onBackdropPress,
++          accessibilityLabel: this.props.closeButtonLabel,
+           style: backdropStyles,
+           ref: ctx.onBackdropRef
+         }), ctx._makeOptions());
+@@ -2090,6 +2094,7 @@
+         }), /*#__PURE__*/React__default.createElement(MenuPlaceholder, {
+           ctx: this,
+           backdropStyles: customStyles.backdrop,
++          closeButtonLabel: this.props.closeButtonLabel,
+           ref: this._onPlaceholderRef
+         }))));
+       }
+diff --git a/src/index.d.ts b/src/index.d.ts
+index 1db1e643a915e4bfb715e33354678ec1be219f50..007157e366d1935368bdd8eff5e7a0773e183d0f 100644
+--- a/src/index.d.ts
++++ b/src/index.d.ts
+@@ -18,6 +18,7 @@ declare module "react-native-popup-menu" {
+       menuProviderWrapper?: StyleProp<ViewStyle>;
+       backdrop?: StyleProp<ViewStyle>;
+     };
++    closeButtonLabel: string;
+     backHandler?: boolean | Function;
+     skipInstanceCheck?: boolean;
+     children: React.ReactNode;

Assets/JoplinLetterBlue.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 682.66669 682.66669"
+   height="682.66669"
+   width="682.66669"
+   xml:space="preserve"
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="JoplinLetterBlue.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+   id="namedview13"
+   pagecolor="#505050"
+   bordercolor="#ffffff"
+   borderopacity="1"
+   inkscape:pageshadow="0"
+   inkscape:pageopacity="0"
+   inkscape:pagecheckerboard="1"
+   showgrid="false"
+   inkscape:zoom="0.77490232"
+   inkscape:cx="366.49781"
+   inkscape:cy="360.69062"
+   inkscape:window-width="1366"
+   inkscape:window-height="708"
+   inkscape:window-x="0"
+   inkscape:window-y="30"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg2" />
+  <defs
+   id="defs6">
+    <linearGradient
+   id="linearGradient26"
+   spreadMethod="pad"
+   gradientTransform="matrix(-4387.91,4387.91,4387.91,4387.91,4753.95,366.05)"
+   gradientUnits="userSpaceOnUse"
+   y2="0"
+   x2="1"
+   y1="0"
+   x1="0">
+      <stop
+   id="stop22"
+   offset="0"
+   style="stop-opacity:1;stop-color:#004caf" />
+      <stop
+   id="stop24"
+   offset="1"
+   style="stop-opacity:1;stop-color:#1f95f8" />
+    </linearGradient>
+  
+    
+  
+      
+      
+    <clipPath
+   clipPathUnits="userSpaceOnUse"
+   id="clipPath829"><path
+     id="path831"
+     style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.999997"
+     d="M 3961.59,4435.23 H 2570.18 c -13.15,0 -23.78,-10.64 -23.78,-23.77 v -441.84 c 0,-14.87 12.04,-26.92 26.92,-26.92 h 190.77 c 77.16,0 139.73,-59.35 146.43,-134.77 V 3505 3336.23 1728.75 1717.36 h -0.052 c 0.48,-16.84 -0.1898,-33.4 -1.83,-49.71 -0.18,-2.38 -0.5003,-4.73 -0.7902,-7.09 -1.0998,-9.53 -2.3199,-19.01 -4.17,-28.29 -1.0098,-5.29 -2.4399,-10.44 -3.7098,-15.65 -1.71,-6.93 -3.09,-13.97 -5.22,-20.75 -12.5802,-40.27 -32.4702,-77.62 -59.9802,-110.5 -1.0098,-1.17 -2.2599,-2.25 -3.2598,-3.41 -8.3901,-9.72 -17.2002,-19.19 -26.9502,-28.06 -9.84,-8.95 -20.2599,-17.27 -31.2099,-25 -77.8401,-55.14 -182.61,-79.4 -299.67,-68.2 -149.2599,14.03 -297.3399,81.72 -417.03,190.62 -119.6701,108.89 -194.08,243.62 -209.4799,379.41 -13.8501,121.48 22.5498,228.38 102.42,301.05 0.21,0.1598 0.3997,0.3098 0.5602,0.48 3.09,2.77 6.4901,5.2 9.6701,7.87 57.16,47.89 131.6701,76.91 216.7,84.91 0.96,0.09 1.8801,0.24 2.79,0.3203 8.9499,0.79 18.0699,1.15 27.27,1.49 4.8099,0.1598 9.5601,0.5003 14.4399,0.54 1.62,0.023 3.1602,0.1898 4.7802,0.1898 2.8998,0 5.91,-0.3803 8.8098,-0.42 13.4001,-0.21 26.9001,-0.7601 40.6701,-1.9401 1.74,-0.1402 3.3999,-0.08 5.19,-0.24 1.2699,-0.1297 2.5299,-0.4102 3.8001,-0.54 78,-7.82 155.2299,-31.11 228.5199,-66.3999 1.53,-0.068 3.3,-0.54 5.5099,-1.7601 22.34,-12.3399 26.6201,0.9 27.2801,9.6501 v 382.2399 282.8201 c 0,19.05 -13.2501,35.8999 -31.83,39.99 -394.7601,86.88 -782.08,-3.5501 -1055.38,-252.3401 -238.7499,-217.1799 -354.24,-530.5799 -316.8201,-859.7899 33.39,-293.23 183.9102,-574.94 423.88,-793.33 233.8901,-212.79003 531.69,-345.86006 838.8801,-374.80106 42.33,-3.918 84.8601,-5.93797 126.36,-5.93797 293.3799,0 565.6099,100.59802 766.54,283.37903 190.3401,173.3 304.35,411.27 321.0799,670.16 l 1.55,1697.91 h 0.1703 v 453.97 h 0.06 v 7.92 c 1.72,80.1199 67.05,144.58 147.61,144.58 h 190.77 c 14.8599,0 26.9199,12.05 26.9199,26.9199 v 441.84 c 0,13.13 -10.6299,23.77 -23.7799,23.77" /></clipPath></defs>
+  <g
+   id="g14"
+   transform="matrix(0.13333333,0,0,-0.13333333,0,682.66667)"
+   mask="none"
+   clip-path="url(#clipPath829)">
+        <g
+   clip-path="url(#clipPath20)"
+   id="g16">
+          <path
+   id="path28"
+   style="fill:url(#linearGradient26);fill-opacity:1;fill-rule:nonzero;stroke:none"
+   d="M 3873.89,0 H 1246.11 C 560.754,0 0,560.75 0,1246.11 V 3873.88 C 0,4559.25 560.754,5120 1246.11,5120 H 3873.89 C 4559.25,5120 5120,4559.25 5120,3873.88 V 1246.11 C 5120,560.75 4559.25,0 3873.89,0" />
+        </g>
+      </g>
+</svg>

Assets/WebsiteAssets/js/script.js

@@ -80,7 +80,7 @@ async function setupDownloadPage() {
 		
 		if (href.indexOf('-Setup') > 0) downloadLinks['windows'] = href;
 		if (href.indexOf('.dmg') > 0) downloadLinks['macOs'] = href;
-		if (href.endsWith('arm64.DMG')) downloadLinks['macOsM1'] = href;
+		if (href.indexOf('arm64.DMG') > 0) downloadLinks['macOsM1'] = href;
 		if (href.indexOf('.AppImage') > 0) downloadLinks['linux'] = href;
 	});
 
@@ -98,6 +98,8 @@ async function setupDownloadPage() {
 	} else {
 		const os = await getOs();
 
+		console.info('Found OS: ' + os);
+
 		if (os === 'macOsUndefined') {
 			// If we don't know which macOS version it is, we let the user choose.
 			$('.main-content .intro').html('<p class="macos-m1-info">The macOS release is available for Intel processors or for Apple Silicon (M1) processors. Please select your version:</p>');

Assets/WebsiteAssets/templates/front.mustache

@@ -398,7 +398,7 @@
 
 							<div class="text-center sponsors-org">
 								{{#sponsors.orgs}}
-									<a class="sponsor-org-item" href="{{url}}"><img title="{{title}}" src="{{imageBaseUrl}}/sponsors/{{imageName}}"></a>
+									<a class="sponsor-org-item" href="{{url}}"><img alt="{{alt}}" title="{{title}}" src="{{imageBaseUrl}}/sponsors/{{imageName}}"></a>
 								{{/sponsors.orgs}}
 							</div>
 

Joplin_install_and_update.sh

@@ -67,10 +67,23 @@ showHelp() {
   fi
 }
 
+#-----------------------------------------------------
+# Setup Download Helper: DL
+#-----------------------------------------------------
+if [[ `command -v wget2` ]]; then
+  DL='wget2 -qO'
+elif [[ `command -v wget` ]]; then
+  DL='wget -qO'
+elif [[ `command -v curl` ]]; then
+  DL='curl -sLo'
+else
+  print "${COLOR_RED}Error: wget2, wget, and curl not found. Please install one of these tools.${COLOR_RESET}"
+  exit 1
+fi
+
 #-----------------------------------------------------
 # PARSE ARGUMENTS
 #-----------------------------------------------------
-
 optspec=":h-:"
 while getopts "${optspec}" OPT; do
   [ "${OPT}" = " " ] && continue
@@ -140,9 +153,9 @@ fi
 
 # Get the latest version to download
 if [[ "$INCLUDE_PRE_RELEASE" == true ]]; then
-  RELEASE_VERSION=$(wget -qO - "https://api.github.com/repos/laurent22/joplin/releases" | grep -Po '"tag_name": ?"v\K.*?(?=")' | sort -rV | head -1)
+  RELEASE_VERSION=$($DL - "https://api.github.com/repos/laurent22/joplin/releases" | grep -Po '"tag_name": ?"v\K.*?(?=")' | sort -rV | head -1)
 else
-  RELEASE_VERSION=$(wget -qO - "https://api.github.com/repos/laurent22/joplin/releases/latest" | grep -Po '"tag_name": ?"v\K.*?(?=")')
+  RELEASE_VERSION=$($DL - "https://api.github.com/repos/laurent22/joplin/releases/latest" | grep -Po '"tag_name": ?"v\K.*?(?=")')
 fi
 
 # Check if it's in the latest version
@@ -163,8 +176,8 @@ fi
 #-----------------------------------------------------
 print 'Downloading Joplin...'
 TEMP_DIR=$(mktemp -d)
-wget -O "${TEMP_DIR}/Joplin.AppImage" "https://objects.joplinusercontent.com/v${RELEASE_VERSION}/Joplin-${RELEASE_VERSION}.AppImage?source=LinuxInstallScript&type=$DOWNLOAD_TYPE"
-wget -O "${TEMP_DIR}/joplin.png" https://joplinapp.org/images/Icon512.png
+$DL "${TEMP_DIR}/Joplin.AppImage" "https://objects.joplinusercontent.com/v${RELEASE_VERSION}/Joplin-${RELEASE_VERSION}.AppImage?source=LinuxInstallScript&type=$DOWNLOAD_TYPE"
+$DL "${TEMP_DIR}/joplin.png" https://joplinapp.org/images/Icon512.png
 
 #-----------------------------------------------------
 print 'Installing Joplin...'
@@ -287,7 +300,7 @@ echo "$RELEASE_VERSION" > "${INSTALL_DIR}/VERSION"
 
 #-----------------------------------------------------
 if [[ "$SHOW_CHANGELOG" == true ]]; then
-  NOTES=$(wget -qO - https://api.github.com/repos/laurent22/joplin/releases/latest | grep -Po '"body": "\K.*(?=")')
+  NOTES=$($DL - https://api.github.com/repos/laurent22/joplin/releases/latest | grep -Po '"body": "\K.*(?=")')
   print "${COLOR_BLUE}Changelog:${COLOR_RESET}\n${NOTES}"
 fi
 

devbox.json

@@ -25,7 +25,8 @@
       "version":            "latest",
       "excluded_platforms": ["aarch64-darwin", "x86_64-darwin"],
     },
-    "git": "latest",
+    "git":    "latest",
+    "giflib": "latest",
   },
   "shell": {
     "init_hook": [

package.json

@@ -116,6 +116,7 @@
     "app-builder-lib@26.0.0-alpha.7": "patch:app-builder-lib@npm%3A26.0.0-alpha.7#./.yarn/patches/app-builder-lib-npm-26.0.0-alpha.7-e1b3dca119.patch",
     "app-builder-lib@24.13.3": "patch:app-builder-lib@npm%3A24.13.3#./.yarn/patches/app-builder-lib-npm-24.13.3-86a66c0bf3.patch",
     "react-native-sqlite-storage@6.0.1": "patch:react-native-sqlite-storage@npm%3A6.0.1#./.yarn/patches/react-native-sqlite-storage-npm-6.0.1-8369d747bd.patch",
-    "react-native-paper@5.13.1": "patch:react-native-paper@npm%3A5.13.1#./.yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch"
+    "react-native-paper@5.13.1": "patch:react-native-paper@npm%3A5.13.1#./.yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch",
+    "react-native-popup-menu@0.16.1": "patch:react-native-popup-menu@npm%3A0.16.1#./.yarn/patches/react-native-popup-menu-npm-0.16.1-28fd66ecb5.patch"
   }
 }

packages/app-desktop/ElectronAppWrapper.ts

@@ -1,11 +1,12 @@
-import Logger, { LoggerWrapper } from '@joplin/utils/Logger';
+import Logger, { LoggerWrapper, TargetType } from '@joplin/utils/Logger';
 import { PluginMessage } from './services/plugins/PluginRunner';
 import AutoUpdaterService, { defaultUpdateInterval, initialUpdateStartup } from './services/autoUpdater/AutoUpdaterService';
 import type ShimType from '@joplin/lib/shim';
 const shim: typeof ShimType = require('@joplin/lib/shim').default;
 import { isCallbackUrl } from '@joplin/lib/callbackUrlUtils';
-
-import { BrowserWindow, Tray, WebContents, screen } from 'electron';
+import { FileLocker } from '@joplin/utils/fs';
+import { IpcMessageHandler, IpcServer, Message, newHttpError, sendMessage, SendMessageOptions, startServer, stopServer } from '@joplin/utils/ipc';
+import { BrowserWindow, Tray, WebContents, screen, App } from 'electron';
 import bridge from './bridge';
 const url = require('url');
 const path = require('path');
@@ -19,6 +20,7 @@ import handleCustomProtocols, { CustomProtocolHandler } from './utils/customProt
 import { clearTimeout, setTimeout } from 'timers';
 import { resolve } from 'path';
 import { defaultWindowId } from '@joplin/lib/reducer';
+import { msleep } from '@joplin/utils/time';
 
 interface RendererProcessQuitReply {
 	canClose: boolean;
@@ -36,8 +38,7 @@ interface SecondaryWindowData {
 
 export default class ElectronAppWrapper {
 	private logger_: Logger = null;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	private electronApp_: any;
+	private electronApp_: App;
 	private env_: string;
 	private isDebugMode_: boolean;
 	private profilePath_: string;
@@ -58,13 +59,28 @@ export default class ElectronAppWrapper {
 	private customProtocolHandler_: CustomProtocolHandler = null;
 	private updatePollInterval_: ReturnType<typeof setTimeout>|null = null;
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	public constructor(electronApp: any, env: string, profilePath: string|null, isDebugMode: boolean, initialCallbackUrl: string) {
+	private profileLocker_: FileLocker|null = null;
+	private ipcServer_: IpcServer|null = null;
+	private ipcStartPort_ = 2658;
+
+	private ipcLogger_: Logger;
+
+	public constructor(electronApp: App, env: string, profilePath: string|null, isDebugMode: boolean, initialCallbackUrl: string) {
 		this.electronApp_ = electronApp;
 		this.env_ = env;
 		this.isDebugMode_ = isDebugMode;
 		this.profilePath_ = profilePath;
 		this.initialCallbackUrl_ = initialCallbackUrl;
+
+		this.profileLocker_ = new FileLocker(`${this.profilePath_}/lock`);
+
+		// Note: in certain contexts `this.logger_` doesn't seem to be available, especially for IPC
+		// calls, either because it hasn't been set or other issue. So we set one here specifically
+		// for this.
+		this.ipcLogger_ = new Logger();
+		this.ipcLogger_.addTarget(TargetType.File, {
+			path: `${profilePath}/log-cross-app-ipc.txt`,
+		});
 	}
 
 	public electronApp() {
@@ -410,7 +426,7 @@ export default class ElectronAppWrapper {
 				if (message.target === 'plugin') {
 					const win = this.pluginWindows_[message.pluginId];
 					if (!win) {
-						this.logger().error(`Trying to send IPC message to non-existing plugin window: ${message.pluginId}`);
+						this.ipcLogger_.error(`Trying to send IPC message to non-existing plugin window: ${message.pluginId}`);
 						return;
 					}
 
@@ -465,12 +481,24 @@ export default class ElectronAppWrapper {
 		});
 	}
 
-	public quit() {
+	private onExit() {
 		this.stopPeriodicUpdateCheck();
+		this.profileLocker_.unlockSync();
+
+		// Probably doesn't matter if the server is not closed cleanly? Thus the lack of `await`
+		// eslint-disable-next-line promise/prefer-await-to-then -- Needed here because onExit() is not async
+		void stopServer(this.ipcServer_).catch(_error => {
+			// Ignore it since we're stopping, and to prevent unnecessary messages.
+		});
+	}
+
+	public quit() {
+		this.onExit();
 		this.electronApp_.quit();
 	}
 
 	public exit(errorCode = 0) {
+		this.onExit();
 		this.electronApp_.exit(errorCode);
 	}
 
@@ -536,20 +564,26 @@ export default class ElectronAppWrapper {
 		this.tray_ = null;
 	}
 
-	public ensureSingleInstance() {
-		if (this.env_ === 'dev') return false;
+	public async sendCrossAppIpcMessage(message: Message, port: number|null = null, options: SendMessageOptions = null) {
+		this.ipcLogger_.info('Sending message:', message);
 
-		const gotTheLock = this.electronApp_.requestSingleInstanceLock();
+		if (port === null) port = this.ipcStartPort_;
 
-		if (!gotTheLock) {
-			// Another instance is already running - exit
-			this.quit();
-			return true;
+		return await sendMessage(port, { ...message, sourcePort: this.ipcServer_.port }, {
+			logger: this.ipcLogger_,
+			...options,
+		});
+	}
+
+	public async ensureSingleInstance() {
+		// if (this.env_ === 'dev') return false;
+
+		interface OnSecondInstanceMessageData {
+			profilePath: string;
+			argv: string[];
 		}
 
-		// Someone tried to open a second instance - focus our window instead
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-		this.electronApp_.on('second-instance', (_e: any, argv: string[]) => {
+		const activateWindow = (argv: string[]) => {
 			const win = this.mainWindow();
 			if (!win) return;
 			if (win.isMinimized()) win.restore();
@@ -562,9 +596,85 @@ export default class ElectronAppWrapper {
 					void this.openCallbackUrl(url);
 				}
 			}
+		};
+
+		const messageHandlers: Record<string, IpcMessageHandler> = {
+			'onSecondInstance': async (message) => {
+				const data = message.data as OnSecondInstanceMessageData;
+				if (data.profilePath === this.profilePath_) activateWindow(data.argv);
+			},
+
+			'restartAltInstance': async (message) => {
+				if (bridge().altInstanceId()) return false;
+
+				// We do this in a timeout after a short interval because we need this call to
+				// return the response immediately, so that the caller can call `quit()`
+				setTimeout(async () => {
+					const maxWait = 10000;
+					const interval = 300;
+					const loopCount = Math.ceil(maxWait / interval);
+					let callingAppGone = false;
+
+					for (let i = 0; i < loopCount; i++) {
+						const response = await this.sendCrossAppIpcMessage({
+							action: 'ping',
+							data: null,
+						}, message.sourcePort, {
+							sendToSpecificPortOnly: true,
+						});
+
+						if (!response.length) {
+							callingAppGone = true;
+							break;
+						}
+
+						await msleep(interval);
+					}
+
+					if (callingAppGone) {
+						this.ipcLogger_.warn('restartAltInstance: App is gone - restarting it');
+						void bridge().launchNewAppInstance(this.env());
+					} else {
+						this.ipcLogger_.warn('restartAltInstance: Could not restart calling app because it was still open');
+					}
+				}, 100);
+
+				return true;
+			},
+
+			'ping': async (_message) => {
+				return true;
+			},
+		};
+
+		this.ipcServer_ = await startServer(this.ipcStartPort_, async (message) => {
+			if (messageHandlers[message.action]) {
+				this.ipcLogger_.info('Got message:', message);
+				return messageHandlers[message.action](message);
+			}
+
+			throw newHttpError(404);
+		}, {
+			logger: this.ipcLogger_,
 		});
 
-		return false;
+		// First check that no other app is running from that profile folder
+		const gotAppLock = await this.profileLocker_.lock();
+		if (gotAppLock) return false;
+
+		const message: Message = {
+			action: 'onSecondInstance',
+			data: {
+				senderPort: this.ipcServer_.port,
+				profilePath: this.profilePath_,
+				argv: process.argv,
+			},
+		};
+
+		await this.sendCrossAppIpcMessage(message);
+
+		this.quit();
+		return true;
 	}
 
 	public initializeCustomProtocolHandler(logger: LoggerWrapper) {
@@ -606,7 +716,7 @@ export default class ElectronAppWrapper {
 		// the "ready" event. So we use the function below to make sure that the app is ready.
 		await this.waitForElectronAppReady();
 
-		const alreadyRunning = this.ensureSingleInstance();
+		const alreadyRunning = await this.ensureSingleInstance();
 		if (alreadyRunning) return;
 
 		this.createWindow();

packages/app-desktop/app.ts

@@ -617,10 +617,11 @@ class Application extends BaseApplication {
 		clipperLogger.addTarget(TargetType.Console);
 
 		ClipperServer.instance().initialize(actionApi);
+		ClipperServer.instance().setEnabled(!Setting.value('altInstanceId'));
 		ClipperServer.instance().setLogger(clipperLogger);
 		ClipperServer.instance().setDispatch(this.store().dispatch);
 
-		if (Setting.value('clipperServer.autoStart')) {
+		if (ClipperServer.instance().enabled() && Setting.value('clipperServer.autoStart')) {
 			void ClipperServer.instance().start();
 		}
 

packages/app-desktop/bridge.ts

@@ -15,6 +15,7 @@ import isSafeToOpen from './utils/isSafeToOpen';
 import { closeSync, openSync, readSync, statSync } from 'fs';
 import { KB } from '@joplin/utils/bytes';
 import { defaultWindowId } from '@joplin/lib/reducer';
+import { execCommand } from '@joplin/utils';
 
 interface LastSelectedPath {
 	file: string;
@@ -43,16 +44,18 @@ export class Bridge {
 	private appName_: string;
 	private appId_: string;
 	private logFilePath_ = '';
+	private altInstanceId_ = '';
 
 	private extraAllowedExtensions_: string[] = [];
 	private onAllowedExtensionsChangeListener_: OnAllowedExtensionsChange = ()=>{};
 
-	public constructor(electronWrapper: ElectronAppWrapper, appId: string, appName: string, rootProfileDir: string, autoUploadCrashDumps: boolean) {
+	public constructor(electronWrapper: ElectronAppWrapper, appId: string, appName: string, rootProfileDir: string, autoUploadCrashDumps: boolean, altInstanceId: string) {
 		this.electronWrapper_ = electronWrapper;
 		this.appId_ = appId;
 		this.appName_ = appName;
 		this.rootProfileDir_ = rootProfileDir;
 		this.autoUploadCrashDumps_ = autoUploadCrashDumps;
+		this.altInstanceId_ = altInstanceId;
 		this.lastSelectedPaths_ = {
 			file: null,
 			directory: null,
@@ -218,6 +221,10 @@ export class Bridge {
 		return this.electronApp().electronApp().getLocale();
 	};
 
+	public altInstanceId() {
+		return this.altInstanceId_;
+	}
+
 	// Applies to electron-context-menu@3:
 	//
 	// For now we have to disable spell checking in non-editor text
@@ -491,7 +498,38 @@ export class Bridge {
 		}
 	}
 
-	public restart(linuxSafeRestart = true) {
+	public appLaunchCommand(env: string, altInstanceId = '') {
+		const altInstanceArgs = altInstanceId ? ['--alt-instance-id', altInstanceId] : [];
+
+		if (env === 'dev') {
+			// This is convenient to quickly test on dev, but the path needs to be adjusted
+			// depending on how things are setup.
+
+			return {
+				execPath: `${homedir()}/.npm-global/bin/electron`,
+				args: [
+					`${homedir()}/src/joplin/packages/app-desktop`,
+					'--env', 'dev',
+					'--log-level', 'debug',
+					'--open-dev-tools',
+					'--no-welcome',
+				].concat(altInstanceArgs),
+			};
+		} else {
+			return {
+				execPath: bridge().electronApp().electronApp().getPath('exe'),
+				args: [].concat(altInstanceArgs),
+			};
+		}
+	}
+
+	public async launchNewAppInstance(env: string) {
+		const cmd = this.appLaunchCommand(env, 'alt1');
+
+		await execCommand([cmd.execPath].concat(cmd.args), { detached: true });
+	}
+
+	public async restart() {
 		// Note that in this case we are not sending the "appClose" event
 		// to notify services and component that the app is about to close
 		// but for the current use-case it's not really needed.
@@ -502,8 +540,34 @@ export class Bridge {
 				execPath: process.env.PORTABLE_EXECUTABLE_FILE,
 			};
 			app.relaunch(options);
-		} else if (shim.isLinux() && linuxSafeRestart) {
-			this.showInfoMessageBox(_('The app is now going to close. Please relaunch it to complete the process.'));
+		} else if (this.altInstanceId_) {
+			// Couldn't get it to work using relaunch() - it would just "close" the app, but it
+			// would still be open in the tray except unusable. Or maybe it reopens it quickly but
+			// in a broken state. It might be due to the way it is launched from the main instance.
+			// So here we ask the main instance to relaunch this app after a short delay.
+
+			const responses = await this.electronApp().sendCrossAppIpcMessage({
+				action: 'restartAltInstance',
+				data: null,
+			});
+
+			// However is the main instance is not running, we're stuck, so the user needs to
+			// manually restart. `relaunch()` doesn't appear to work even when the main instance is
+			// not running.
+			const r = responses.find(r => !!r.response);
+
+			if (!r || !r.response) {
+				this.showInfoMessageBox(_('The app is now going to close. Please relaunch it to complete the process.'));
+
+				// Note: this should work, but doesn't:
+
+				// const cmd = this.appLaunchCommand(this.env(), this.altInstanceId_);
+
+				// app.relaunch({
+				// 	execPath: cmd.execPath,
+				// 	args: cmd.args,
+				// });
+			}
 		} else {
 			app.relaunch();
 		}
@@ -534,9 +598,9 @@ export class Bridge {
 
 let bridge_: Bridge = null;
 
-export function initBridge(wrapper: ElectronAppWrapper, appId: string, appName: string, rootProfileDir: string, autoUploadCrashDumps: boolean) {
+export function initBridge(wrapper: ElectronAppWrapper, appId: string, appName: string, rootProfileDir: string, autoUploadCrashDumps: boolean, altInstanceId: string) {
 	if (bridge_) throw new Error('Bridge already initialized');
-	bridge_ = new Bridge(wrapper, appId, appName, rootProfileDir, autoUploadCrashDumps);
+	bridge_ = new Bridge(wrapper, appId, appName, rootProfileDir, autoUploadCrashDumps, altInstanceId);
 	return bridge_;
 }
 

packages/app-desktop/commands/index.ts

@@ -6,6 +6,7 @@ import * as exportDeletionLog from './exportDeletionLog';
 import * as exportFolders from './exportFolders';
 import * as exportNotes from './exportNotes';
 import * as focusElement from './focusElement';
+import * as newAppInstance from './newAppInstance';
 import * as openNoteInNewWindow from './openNoteInNewWindow';
 import * as openProfileDirectory from './openProfileDirectory';
 import * as replaceMisspelling from './replaceMisspelling';
@@ -28,6 +29,7 @@ const index: any[] = [
 	exportFolders,
 	exportNotes,
 	focusElement,
+	newAppInstance,
 	openNoteInNewWindow,
 	openProfileDirectory,
 	replaceMisspelling,

packages/app-desktop/commands/newAppInstance.ts

@@ -0,0 +1,19 @@
+import { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
+import { _ } from '@joplin/lib/locale';
+import bridge from '../services/bridge';
+import Setting from '@joplin/lib/models/Setting';
+
+export const declaration: CommandDeclaration = {
+	name: 'newAppInstance',
+	label: () => _('New application instance...'),
+};
+
+export const runtime = (): CommandRuntime => {
+	return {
+		execute: async (_context: CommandContext) => {
+			await bridge().launchNewAppInstance(Setting.value('env'));
+		},
+
+		enabledCondition: '!isAltInstance',
+	};
+};

packages/app-desktop/gui/ClipperConfigScreen.tsx

@@ -24,6 +24,7 @@ class ClipperConfigScreenComponent extends React.Component {
 	}
 
 	private enableClipperServer_click() {
+		if (!ClipperServer.instance().enabled()) return;
 		Setting.setValue('clipperServer.autoStart', true);
 		void ClipperServer.instance().start();
 	}
@@ -70,6 +71,8 @@ class ClipperConfigScreenComponent extends React.Component {
 
 		const webClipperStatusComps = [];
 
+		const clipperEnabled = ClipperServer.instance().enabled();
+
 		if (this.props.clipperServerAutoStart) {
 			webClipperStatusComps.push(
 				<p key="text_1" style={theme.textStyle}>
@@ -95,13 +98,22 @@ class ClipperConfigScreenComponent extends React.Component {
 				</button>,
 			);
 		} else {
+			if (!clipperEnabled) {
+				webClipperStatusComps.push(
+					<p key="text_4" style={theme.textStyle}>
+						{_('The web clipper service cannot be enabled in this instance of Joplin.')}
+					</p>,
+				);
+			} else {
+				webClipperStatusComps.push(
+					<p key="text_4" style={theme.textStyle}>
+						{_('The web clipper service is not enabled.')}
+					</p>,
+				);
+			}
+
 			webClipperStatusComps.push(
-				<p key="text_4" style={theme.textStyle}>
-					{_('The web clipper service is not enabled.')}
-				</p>,
-			);
-			webClipperStatusComps.push(
-				<button key="enable_button" style={buttonStyle} onClick={this.enableClipperServer_click}>
+				<button key="enable_button" style={buttonStyle} onClick={this.enableClipperServer_click} disabled={!clipperEnabled}>
 					{_('Enable Web Clipper Service')}
 				</button>,
 			);

packages/app-desktop/gui/MainScreen.tsx

@@ -478,6 +478,10 @@ class MainScreenComponent extends React.Component<Props, State> {
 			});
 		};
 
+		const onDisableSync = () => {
+			Setting.setValue('sync.target', null);
+		};
+
 		const onViewSyncSettingsScreen = () => {
 			this.props.dispatch({
 				type: 'NAV_GO',
@@ -575,6 +579,8 @@ class MainScreenComponent extends React.Component<Props, State> {
 				_('Your Joplin Cloud credentials are invalid, please login.'),
 				_('Login to Joplin Cloud.'),
 				onViewJoplinCloudLoginScreen,
+				_('Disable synchronisation'),
+				onDisableSync,
 			);
 		}
 

packages/app-desktop/gui/MenuBar.tsx

@@ -172,6 +172,7 @@ interface Props {
 	pluginMenus: any[];
 	['spellChecker.enabled']: boolean;
 	['spellChecker.languages']: string[];
+	markdownEditorVisible: boolean;
 	plugins: PluginStates;
 	customCss: string;
 	locale: string;
@@ -278,6 +279,7 @@ function useMenuStates(menu: any, props: Props) {
 		props['notes.sortOrder.reverse'],
 		// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
 		props['folders.sortOrder.reverse'],
+		props.markdownEditorVisible,
 		props.tabMovesFocus,
 		props.noteListRendererId,
 		props.showNoteCounts,
@@ -479,6 +481,7 @@ function useMenu(props: Props) {
 				menuItemDic.focusElementNoteList,
 				menuItemDic.focusElementNoteTitle,
 				menuItemDic.focusElementNoteBody,
+				menuItemDic.focusElementNoteViewer,
 				menuItemDic.focusElementToolbar,
 			];
 
@@ -552,6 +555,7 @@ function useMenu(props: Props) {
 			const newFolderItem = menuItemDic.newFolder;
 			const newSubFolderItem = menuItemDic.newSubFolder;
 			const printItem = menuItemDic.print;
+			const newAppInstance = menuItemDic.newAppInstance;
 			const switchProfileItem = {
 				label: _('Switch profile'),
 				submenu: switchProfileMenuItems,
@@ -715,8 +719,11 @@ function useMenu(props: Props) {
 					}, {
 						type: 'separator',
 					},
-					printItem,
+					printItem, {
+						type: 'separator',
+					},
 					switchProfileItem,
+					newAppInstance,
 				],
 			};
 
@@ -789,6 +796,7 @@ function useMenu(props: Props) {
 						shim.isMac() ? noItem : menuItemDic.toggleMenuBar,
 						menuItemDic.toggleNoteList,
 						menuItemDic.toggleVisiblePanes,
+						menuItemDic.toggleEditorPlugin,
 						{
 							label: _('Layout button sequence'),
 							submenu: layoutButtonSequenceMenuItems,
@@ -1139,7 +1147,7 @@ function MenuBar(props: Props): any {
 
 
 const mapStateToProps = (state: AppState): Partial<Props> => {
-	const whenClauseContext = stateToWhenClauseContext(state);
+	const whenClauseContext = stateToWhenClauseContext(state, { windowId: state.windowId });
 
 	const secondaryWindowFocused = state.windowId !== defaultWindowId;
 
@@ -1165,6 +1173,7 @@ const mapStateToProps = (state: AppState): Partial<Props> => {
 		pluginMenus: stateUtils.selectArrayShallow({ array: pluginUtils.viewsByType(state.pluginService.plugins, 'menu') }, 'menuBar.pluginMenus'),
 		['spellChecker.languages']: state.settings['spellChecker.languages'],
 		['spellChecker.enabled']: state.settings['spellChecker.enabled'],
+		markdownEditorVisible: whenClauseContext.markdownEditorVisible,
 		plugins: state.pluginService.plugins,
 		customCss: state.customViewerCss,
 		profileConfig: state.profileConfig,

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/v6/useEditorCommands.ts

@@ -129,6 +129,14 @@ const useEditorCommands = (props: Props) => {
 					props.webviewRef.current.send('focus');
 				}
 			},
+			'viewer.focus': () => {
+				if (props.visiblePanes.includes('viewer')) {
+					const editorCursorLine = editorRef.current.getCursor().line;
+					props.webviewRef.current.focusLine(editorCursorLine);
+				} else {
+					logger.info('Viewer not focused (not visible).');
+				}
+			},
 			search: () => {
 				return editorRef.current.execCommand(EditorCommandType.ShowSearch);
 			},

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

@@ -1105,6 +1105,13 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 		};
 	}, [editor]);
 
+	useEffect(() => {
+		if (!editor) return;
+		// Meta+P is bound by default to print by TinyMCE. It can be unbound, but it seems necessary
+		// to do so after the editor loads. Meta+P should be able to trigger Joplin built-in shortcuts.
+		editor.shortcuts.remove('Meta+P');
+	}, [editor]);
+
 	// -----------------------------------------------------------------------------------------
 	// Handle onChange event
 	// -----------------------------------------------------------------------------------------

packages/app-desktop/gui/NoteEditor/commands/focusElementNoteViewer.ts

@@ -0,0 +1,22 @@
+import { CommandRuntime, CommandDeclaration } from '@joplin/lib/services/CommandService';
+import { _ } from '@joplin/lib/locale';
+import { FocusElementOptions } from '../../../commands/focusElement';
+import { WindowCommandDependencies } from '../utils/types';
+
+export const declaration: CommandDeclaration = {
+	name: 'focusElementNoteViewer',
+	label: () => _('Note viewer'),
+	parentLabel: () => _('Focus'),
+};
+
+export const runtime = (dependencies: WindowCommandDependencies): CommandRuntime => {
+	return {
+		execute: async (_context: unknown, options?: FocusElementOptions) => {
+			await dependencies.editorRef.current.execCommand({
+				name: 'viewer.focus',
+				value: options,
+			});
+		},
+		enabledCondition: 'markdownEditorVisible',
+	};
+};

packages/app-desktop/gui/NoteEditor/commands/index.ts

@@ -1,6 +1,7 @@
 // AUTO-GENERATED using `gulp buildScriptIndexes`
 import * as focusElementNoteBody from './focusElementNoteBody';
 import * as focusElementNoteTitle from './focusElementNoteTitle';
+import * as focusElementNoteViewer from './focusElementNoteViewer';
 import * as focusElementToolbar from './focusElementToolbar';
 import * as pasteAsText from './pasteAsText';
 import * as showLocalSearch from './showLocalSearch';
@@ -9,6 +10,7 @@ import * as showRevisions from './showRevisions';
 const index: any[] = [
 	focusElementNoteBody,
 	focusElementNoteTitle,
+	focusElementNoteViewer,
 	focusElementToolbar,
 	pasteAsText,
 	showLocalSearch,

packages/app-desktop/gui/NoteEditor/editorCommandDeclarations.ts

@@ -163,6 +163,9 @@ const declarations: CommandDeclaration[] = [
 	{
 		name: 'editor.execCommand',
 	},
+	{
+		name: 'viewer.focus',
+	},
 ];
 
 export default declarations;

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

@@ -10,6 +10,7 @@ const commandsWithDependencies = [
 	require('../commands/showLocalSearch'),
 	require('../commands/focusElementNoteTitle'),
 	require('../commands/focusElementNoteBody'),
+	require('../commands/focusElementNoteViewer'),
 	require('../commands/focusElementToolbar'),
 	require('../commands/pasteAsText'),
 ];

packages/app-desktop/gui/NoteTextViewer.tsx

@@ -28,6 +28,7 @@ export interface NoteViewerControl {
 	domReady(): boolean;
 	setHtml(html: string, options: SetHtmlOptions): void;
 	send(channel: string, arg0?: unknown, arg1?: unknown): void;
+	focusLine(editorLine: number): void;
 	focus(): void;
 	hasFocus(): boolean;
 }
@@ -107,6 +108,10 @@ const NoteTextViewer = forwardRef((props: Props, ref: ForwardedRef<NoteViewerCon
 					win.postMessage({ target: 'webview', name: 'focus', data: {} }, '*');
 				}
 
+				if (channel === 'focusLine') {
+					win.postMessage({ target: 'webview', name: 'focusLine', data: { line: arg0 } }, '*');
+				}
+
 				// External code should use .setHtml (rather than send('setHtml', ...))
 				if (channel === 'setHtml') {
 					win.postMessage({ target: 'webview', name: 'setHtml', data: { html: arg0, options: arg1 } }, '*');
@@ -139,6 +144,15 @@ const NoteTextViewer = forwardRef((props: Props, ref: ForwardedRef<NoteViewerCon
 			hasFocus: () => {
 				return webviewRef.current?.contains(parentDoc.activeElement);
 			},
+			focusLine: (lineNumber: number) => {
+				if (webviewRef.current) {
+					focus('NoteTextViewer::focusLine', webviewRef.current);
+					// A timeout seems necessary after focusing the viewer to prevent focus from jumping to the top
+					setTimeout(() => {
+						result.send('focusLine', lineNumber);
+					}, 100);
+				}
+			},
 		};
 		return result;
 	}, [parentDoc]);

packages/app-desktop/gui/Sidebar/hooks/useOnRenderListWrapper.tsx

@@ -22,13 +22,14 @@ interface CollapseExpandAllButtonProps {
 }
 
 const CollapseExpandAllButton = (props: CollapseExpandAllButtonProps) => {
-	// To allow it to be accessed by accessibility tools, the new folder button
+	// To allow it to be accessed by accessibility tools, the toggle button
 	// is not included in the portion of the list with role='tree'.
 	const icon = props.allFoldersCollapsed ? 'far fa-caret-square-right' : 'far fa-caret-square-down';
+	const label = props.allFoldersCollapsed ? _('Expand all notebooks') : _('Collapse all notebooks');
 
 	return <button onClick={() => onToggleAllFolders(props.allFoldersCollapsed)} className='sidebar-header-button -collapseall'>
 		<i
-			aria-label={_('Collapse / Expand all notebooks')}
+			aria-label={label}
 			role='img'
 			className={icon}
 		/>

packages/app-desktop/gui/Sidebar/listItemComponents/ListItemWrapper.tsx

@@ -23,6 +23,7 @@ interface Props {
 	draggable?: boolean;
 	'data-folder-id'?: string;
 	'data-id'?: string;
+	'data-tag-id'?: string;
 	'data-type'?: ModelType;
 }
 
@@ -55,6 +56,7 @@ const ListItemWrapper: React.FC<Props> = props => {
 			style={style}
 			data-folder-id={props['data-folder-id']}
 			data-id={props['data-id']}
+			data-tag-id={props['data-tag-id']}
 			data-type={props['data-type']}
 		>
 			{props.children}

packages/app-desktop/gui/menuCommandNames.ts

@@ -4,6 +4,7 @@ export default function() {
 		'copyDevCommand',
 		'exportPdf',
 		'focusElementNoteBody',
+		'focusElementNoteViewer',
 		'focusElementNoteList',
 		'focusElementNoteTitle',
 		'focusElementSideBar',
@@ -43,9 +44,11 @@ export default function() {
 		'togglePerFolderSortOrder',
 		'toggleSideBar',
 		'toggleVisiblePanes',
+		'toggleEditorPlugin',
 		'toggleTabMovesFocus',
 		'editor.deleteLine',
 		'editor.duplicateLine',
+		'newAppInstance',
 		// We cannot put the undo/redo commands in the menu because they are
 		// editor-specific commands. If we put them there it will break the
 		// undo/redo in regular text fields.

packages/app-desktop/gui/note-viewer/index.html

@@ -377,6 +377,53 @@
 			contentElement.scrollTop = scrollTop;
 		}
 
+		const getLineCorrespondingTo = (editorLineNumber) => {
+			const lineElements = document.getElementsByClassName('maps-to-line');
+			let lastLineElement;
+			let lastLine = 0;
+			for (const element of lineElements) {
+				// Stop just before the element that corresponds to a greater position
+				if (Number(element.getAttribute('source-line')) > editorLineNumber) {
+					break;
+				}
+				lastLineElement = element;
+			}
+			return lastLineElement;
+		};
+
+		const makeTemporarilyFocusable = (element) => {
+			const dataOriginalTabIndexAttr = 'data-original-tabindex';
+			const originalTabIndex = (
+				element.getAttribute(dataOriginalTabIndexAttr) ?? element.getAttribute('tabindex')
+			);
+			element.setAttribute(dataOriginalTabIndexAttr, originalTabIndex);
+			element.setAttribute('tabindex', '0');
+
+			return {
+				reset: () => {
+					element.setAttribute('tabindex', originalTabIndex);
+					element.removeAttribute(dataOriginalTabIndexAttr);
+				},
+			};
+		};
+
+		ipc.focusLine = (event) => {
+			const targetLine = event.line;
+			const lineElement = getLineCorrespondingTo(targetLine);
+			if (lineElement) {
+				// To allow focusing, the element needs to briefly have tabindex=0.
+				const { reset } = makeTemporarilyFocusable(lineElement);
+
+				lineElement.focus({ preventScroll: true });
+
+				// Reset the tabindex after the browser has had time to focus the element.
+				// When a screen reader is enabled, focus stays on the lineElement.
+				setTimeout(() => {
+					reset();
+				}, 50);
+			}
+		}
+
 		const rewriteFileUrls = (accessKey) => {
 			if (!accessKey) return;
 

packages/app-desktop/integration-tests/README.md

@@ -1,7 +1,9 @@
 # Integration tests
 
-The integration tests in this directory can be run with `yarn playwright test`.
+The integration tests in this directory can be run with `yarn test-ui`.
 
+- To run all tests from a specific file, use `yarn test-ui testFileName`. For example, `yarn test-ui wcag` to run the tests in `wcag.ts`.
+- To run all tests matching a pattern, use `yarn test-ui -g "pattern here"`, where `-g` is short for "grep".
 - Tests use a `test-profile` directory that should be re-created before every test.
 - Only one Electron application should be instantiated per test file.
 - Files in the `models/` directory follow [the page object model](https://playwright.dev/docs/pom).
@@ -15,3 +17,11 @@ with Playwright:
 - [The Playwright ElectronApp docs](https://playwright.dev/docs/api/class-electronapplication)
 - [Electron Playwright example repository](https://github.com/spaceagetv/electron-playwright-example)
 - [Playwright best practices](https://playwright.dev/docs/best-practices)
+
+# FAQ
+
+## How do I fix timeout-related test failures?
+
+If Playwright tests are timing out, consider modifying `playwright.config.ts` in the `app-desktop` folder. For example, increase the `timeout` option to `120_000` (2 minutes).
+
+Alternatively, try temporarily disabling `fullyParallel` (which disables running tests in parallel).

packages/app-desktop/integration-tests/main.spec.ts

@@ -116,7 +116,10 @@ test.describe('main', () => {
 		await editor.attachFileButton.click();
 
 		const viewerFrame = editor.getNoteViewerFrameLocator();
-		const renderedImage = viewerFrame.getByAltText(filename);
+		const renderedImage = viewerFrame
+			.getByAltText(filename)
+			// Work around occasional "resolved to 2 elements" errors in CI
+			.last();
 
 		const fullSize = await getImageSourceSize(renderedImage);
 

packages/app-desktop/integration-tests/markdownEditor.spec.ts

@@ -230,5 +230,28 @@ test.describe('markdownEditor', () => {
 		// Editor should be focused
 		await expect(focusInMarkdownEditor).toBeAttached();
 	});
+
+	test('focusElementNoteViewer should move focus to the viewer', async ({ mainWindow, electronApp }) => {
+		const mainScreen = await new MainScreen(mainWindow).setup();
+		await mainScreen.waitFor();
+		const noteEditor = mainScreen.noteEditor;
+
+		await mainScreen.createNewNote('Note');
+
+		await noteEditor.focusCodeMirrorEditor();
+		await mainWindow.keyboard.type('# Test');
+		await mainWindow.keyboard.press('Enter');
+		await mainWindow.keyboard.press('Enter');
+		await mainWindow.keyboard.type('Test paragraph.');
+
+		// Wait for rendering
+		await expect(noteEditor.getNoteViewerFrameLocator().getByText('Test paragraph.')).toBeAttached();
+
+		// Move focus
+		await mainScreen.goToAnything.runCommand(electronApp, 'focusElementNoteViewer');
+
+		// Note viewer should be focused
+		await expect(noteEditor.noteViewerContainer).toBeFocused();
+	});
 });
 

packages/app-desktop/main.js

@@ -25,28 +25,27 @@ process.on('unhandledRejection', (reason, p) => {
 	process.exit(1);
 });
 
-// Likewise, we want to know if a profile is specified early, in particular
-// to save the window state data.
-function getProfileFromArgs(args) {
+const getFlagValueFromArgs = (args, flag, defaultValue) => {
 	if (!args) return null;
-	const profileIndex = args.indexOf('--profile');
-	if (profileIndex <= 0 || profileIndex >= args.length - 1) return null;
-	const profileValue = args[profileIndex + 1];
-	return profileValue ? profileValue : null;
-}
+	const index = args.indexOf(flag);
+	if (index <= 0 || index >= args.length - 1) return defaultValue;
+	const value = args[index + 1];
+	return value ? value : defaultValue;
+};
 
 Logger.fsDriver_ = new FsDriverNode();
 
 const env = envFromArgs(process.argv);
-const profileFromArgs = getProfileFromArgs(process.argv);
+const profileFromArgs = getFlagValueFromArgs(process.argv, '--profile', null);
 const isDebugMode = !!process.argv && process.argv.indexOf('--debug') >= 0;
+const altInstanceId = getFlagValueFromArgs(process.argv, '--alt-instance-id', '');
 
 // We initialize all these variables here because they are needed from the main process. They are
 // then passed to the renderer process via the bridge.
 const appId = `net.cozic.joplin${env === 'dev' ? 'dev' : ''}-desktop`;
 let appName = env === 'dev' ? 'joplindev' : 'joplin';
 if (appId.indexOf('-desktop') >= 0) appName += '-desktop';
-const { rootProfileDir } = determineBaseAppDirs(profileFromArgs, appName);
+const { rootProfileDir } = determineBaseAppDirs(profileFromArgs, appName, altInstanceId);
 const settingsPath = `${rootProfileDir}/settings.json`;
 let autoUploadCrashDumps = false;
 
@@ -67,7 +66,7 @@ const initialCallbackUrl = process.argv.find((arg) => isCallbackUrl(arg));
 
 const wrapper = new ElectronAppWrapper(electronApp, env, rootProfileDir, isDebugMode, initialCallbackUrl);
 
-initBridge(wrapper, appId, appName, rootProfileDir, autoUploadCrashDumps);
+initBridge(wrapper, appId, appName, rootProfileDir, autoUploadCrashDumps, altInstanceId);
 
 wrapper.start().catch((error) => {
 	console.error('Electron App fatal error:');

packages/app-desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joplin/app-desktop",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "Joplin for Desktop",
   "main": "main.js",
   "private": true,
@@ -144,7 +144,7 @@
     "@types/styled-components": "5.1.32",
     "@types/tesseract.js": "2.0.0",
     "axios": "^1.7.7",
-    "electron": "34.0.0",
+    "electron": "35.0.1",
     "electron-builder": "24.13.3",
     "glob": "10.4.5",
     "gulp": "4.0.2",

packages/app-desktop/playwright.config.ts

@@ -24,7 +24,7 @@ export default defineConfig({
 	reporter: process.env.CI ? 'line' : 'html',
 
 	// The CI machines can sometimes be very slow. Increase per-test timeout in CI.
-	timeout: process.env.CI ? 50_000 : 30_000, // milliseconds
+	timeout: process.env.CI ? 70_000 : 60_000, // milliseconds
 
 	// Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions.
 	use: {

packages/app-desktop/runForTesting.sh

@@ -180,7 +180,7 @@ fi
 
 if [ "$IS_DESKTOP" = "1" ]; then
 	cd "$ROOT_DIR/packages/app-desktop"
-	yarn start --profile "$PROFILE_DIR"
+	yarn start --profile "$PROFILE_DIR" --alt-instance-id $USER_NUM
 else
 	cd "$ROOT_DIR/packages/app-cli"
 	if [[ $CMD == "--" ]]; then

packages/app-desktop/services/commands/stateToWhenClauseContext.ts

@@ -12,6 +12,7 @@ export default function stateToWhenClauseContext(state: AppState, options: WhenC
 	const windowId = options?.windowId ?? defaultWindowId;
 	const isMainWindow = windowId === defaultWindowId;
 	const windowState = stateUtils.windowStateById(state, windowId);
+	const isAltInstance = !!state.settings.altInstanceId;
 
 	return {
 		...libStateToWhenClauseContext(state, options),
@@ -26,6 +27,7 @@ export default function stateToWhenClauseContext(state: AppState, options: WhenC
 		gotoAnythingVisible: !!state.visibleDialogs['gotoAnything'],
 		sidebarVisible: isMainWindow && !!state.mainLayout && layoutItemProp(state.mainLayout, 'sideBar', 'visible'),
 		noteListHasNotes: !!windowState.notes.length,
+		isAltInstance,
 
 		// Deprecated
 		sideBarVisible: !!state.mainLayout && layoutItemProp(state.mainLayout, 'sideBar', 'visible'),

packages/app-desktop/services/restart.ts

@@ -2,9 +2,9 @@ import Setting from '@joplin/lib/models/Setting';
 import bridge from './bridge';
 
 
-export default async (linuxSafeRestart = true) => {
+export default async () => {
 	Setting.setValue('wasClosedSuccessfully', true);
 	await Setting.saveAll();
 
-	bridge().restart(linuxSafeRestart);
+	await bridge().restart();
 };

packages/app-desktop/tools/electronRebuild.js

@@ -25,7 +25,7 @@ async function main() {
 	// wrong one. However it means it will have to be manually upgraded for each
 	// new Electron release. Some ABI map there:
 	// https://github.com/electron/node-abi/tree/master/test
-	const forceAbiArgs = '--force-abi 132';
+	const forceAbiArgs = '--force-abi 134';
 
 	if (isWindows()) {
 		// Cannot run this in parallel, or the 64-bit version might end up

packages/app-desktop/utils/restartInSafeModeFromMain.ts

@@ -21,14 +21,14 @@ const restartInSafeModeFromMain = async () => {
 	shimInit({});
 
 	const startFlags = await processStartFlags(bridge().processArgv());
-	const { rootProfileDir } = determineBaseAppDirs(startFlags.matched.profileDir, appName);
+	const { rootProfileDir } = determineBaseAppDirs(startFlags.matched.profileDir, appName, Setting.value('altInstanceId'));
 	const { profileDir } = await initProfile(rootProfileDir);
 
 	// We can't access the database, so write to a file instead.
 	const safeModeFlagFile = join(profileDir, safeModeFlagFilename);
 	await writeFile(safeModeFlagFile, 'true', 'utf8');
 
-	bridge().restart();
+	await bridge().restart();
 };
 
 export default restartInSafeModeFromMain;

packages/app-mobile/android/app/build.gradle

@@ -86,8 +86,8 @@ android {
         applicationId "net.cozic.joplin"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-		versionCode 2097765
-		versionName "3.3.2"
+		versionCode 2097766
+		versionName "3.3.3"
         ndk {
             abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
         }

packages/app-mobile/components/Modal.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
-import { RefObject, useCallback, useMemo, useRef } from 'react';
-import { GestureResponderEvent, Modal, ModalProps, ScrollView, StyleSheet, View, ViewStyle, useWindowDimensions } from 'react-native';
+import { RefObject, useCallback, useMemo, useRef, useState } from 'react';
+import { GestureResponderEvent, Modal, ModalProps, Platform, Pressable, ScrollView, StyleSheet, View, ViewStyle, useWindowDimensions } from 'react-native';
 import { hasNotch } from 'react-native-device-info';
+import FocusControl from './accessibility/FocusControl/FocusControl';
+import { msleep, Second } from '@joplin/utils/time';
+import useAsyncEffect from '@joplin/lib/hooks/useAsyncEffect';
+import { ModalState } from './accessibility/FocusControl/types';
+import { _ } from '@joplin/lib/locale';
 
 interface ModalElementProps extends ModalProps {
 	children: React.ReactNode;
@@ -49,6 +54,13 @@ const useStyles = (hasScrollView: boolean, backgroundColor: string|undefined) =>
 				// This makes it possible to vertically center the content of scrollable modals.
 				flexGrow: 1,
 			},
+			dismissButton: {
+				position: 'absolute',
+				bottom: 0,
+				height: 12,
+				width: '100%',
+				zIndex: -1,
+			},
 		});
 	}, [hasScrollView, isLandscape, backgroundColor]);
 };
@@ -67,6 +79,36 @@ const useBackgroundTouchListeners = (onRequestClose: (event: GestureResponderEve
 	return { onShouldBackgroundCaptureTouch, onBackgroundTouchFinished };
 };
 
+const useModalStatus = (containerComponent: View|null, visible: boolean) => {
+	const contentMounted = !!containerComponent;
+	const [controlsFocus, setControlsFocus] = useState(false);
+	useAsyncEffect(async (event) => {
+		if (contentMounted) {
+			setControlsFocus(true);
+		} else {
+			// Accessibility: Work around Android's default focus-setting behavior.
+			// By default, React Native's Modal on Android sets focus about 0.8 seconds
+			// after the modal is dismissed. As a result, the Modal controls focus until
+			// roughly one second after the modal is dismissed.
+			if (Platform.OS === 'android') {
+				await msleep(Second);
+			}
+
+			if (!event.cancelled) {
+				setControlsFocus(false);
+			}
+		}
+	}, [contentMounted]);
+
+	let modalStatus = ModalState.Closed;
+	if (controlsFocus) {
+		modalStatus = visible ? ModalState.Open : ModalState.Closing;
+	} else if (visible) {
+		modalStatus = ModalState.Open;
+	}
+	return modalStatus;
+};
+
 const ModalElement: React.FC<ModalElementProps> = ({
 	children,
 	containerStyle,
@@ -84,29 +126,48 @@ const ModalElement: React.FC<ModalElementProps> = ({
 		</View>
 	);
 
-	const backgroundRef = useRef<View>();
-	const { onShouldBackgroundCaptureTouch, onBackgroundTouchFinished } = useBackgroundTouchListeners(modalProps.onRequestClose, backgroundRef);
 
+	const [containerComponent, setContainerComponent] = useState<View|null>(null);
+	const modalStatus = useModalStatus(containerComponent, modalProps.visible);
+
+	const containerRef = useRef<View|null>(null);
+	containerRef.current = containerComponent;
+	const { onShouldBackgroundCaptureTouch, onBackgroundTouchFinished } = useBackgroundTouchListeners(modalProps.onRequestClose, containerRef);
+
+
+	// A close button for accessibility tools. Since iOS accessibility focus order is based on the position
+	// of the element on the screen, the close button is placed after the modal content, rather than behind.
+	const closeButton = modalProps.onRequestClose ? <Pressable
+		style={styles.dismissButton}
+		onPress={modalProps.onRequestClose}
+		accessibilityLabel={_('Close dialog')}
+		accessibilityRole='button'
+	/> : null;
 	const contentAndBackdrop = <View
-		ref={backgroundRef}
+		ref={setContainerComponent}
 		style={styles.modalBackground}
 		onStartShouldSetResponder={onShouldBackgroundCaptureTouch}
 		onResponderRelease={onBackgroundTouchFinished}
-	>{content}</View>;
+	>
+		{content}
+		{closeButton}
+	</View>;
 
-	// supportedOrientations: On iOS, this allows the dialog to be shown in non-portrait orientations.
 	return (
-		<Modal
-			supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
-			{...modalProps}
-		>
-			{scrollOverflow ? (
-				<ScrollView
-					style={styles.modalScrollView}
-					contentContainerStyle={styles.modalScrollViewContent}
-				>{contentAndBackdrop}</ScrollView>
-			) : contentAndBackdrop}
-		</Modal>
+		<FocusControl.ModalWrapper state={modalStatus}>
+			<Modal
+				// supportedOrientations: On iOS, this allows the dialog to be shown in non-portrait orientations.
+				supportedOrientations={['portrait', 'portrait-upside-down', 'landscape', 'landscape-left', 'landscape-right']}
+				{...modalProps}
+			>
+				{scrollOverflow ? (
+					<ScrollView
+						style={styles.modalScrollView}
+						contentContainerStyle={styles.modalScrollViewContent}
+					>{contentAndBackdrop}</ScrollView>
+				) : contentAndBackdrop}
+			</Modal>
+		</FocusControl.ModalWrapper>
 	);
 };
 

packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.test.tsx

@@ -7,7 +7,6 @@ import '@testing-library/jest-native/extend-expect';
 
 import NoteBodyViewer from './NoteBodyViewer';
 import Setting from '@joplin/lib/models/Setting';
-import { MenuProvider } from 'react-native-popup-menu';
 import { resourceFetcher, setupDatabaseAndSynchronizer, supportDir, switchClient, synchronizerStart } from '@joplin/lib/testing/test-utils';
 import { MarkupLanguage } from '@joplin/renderer';
 import { HandleMessageCallback, OnMarkForDownloadCallback } from './hooks/useOnMessage';
@@ -16,6 +15,8 @@ import shim from '@joplin/lib/shim';
 import Note from '@joplin/lib/models/Note';
 import { ResourceInfo } from './hooks/useRerenderHandler';
 import getWebViewDomById from '../../utils/testing/getWebViewDomById';
+import TestProviderStack from '../testing/TestProviderStack';
+import createMockReduxStore from '../../utils/testing/createMockReduxStore';
 
 interface WrapperProps {
 	noteBody: string;
@@ -29,6 +30,7 @@ interface WrapperProps {
 const emptyObject = {};
 const emptyArray: string[] = [];
 const noOpFunction = () => {};
+const testStore = createMockReduxStore();
 const WrappedNoteViewer: React.FC<WrapperProps> = (
 	{
 		noteBody,
@@ -39,7 +41,7 @@ const WrappedNoteViewer: React.FC<WrapperProps> = (
 		onMarkForDownload,
 	}: WrapperProps,
 ) => {
-	return <MenuProvider>
+	return <TestProviderStack store={testStore}>
 		<NoteBodyViewer
 			themeId={Setting.THEME_LIGHT}
 			style={emptyObject}
@@ -56,7 +58,7 @@ const WrappedNoteViewer: React.FC<WrapperProps> = (
 			onScroll={onScroll}
 			pluginStates={emptyObject}
 		/>
-	</MenuProvider>;
+	</TestProviderStack>;
 };
 
 const getNoteViewerDom = async () => {

packages/app-mobile/components/ScreenHeader/Menu.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { useCallback, useMemo, useState } from 'react';
-import { StyleSheet, TextStyle, View, Text, ScrollView, useWindowDimensions } from 'react-native';
+import { StyleSheet, TextStyle, View, Text, ScrollView, useWindowDimensions, Platform } from 'react-native';
 import { themeStyle } from '../global-style';
 import { Menu, MenuOption as MenuOptionComponent, MenuOptions, MenuTrigger } from 'react-native-popup-menu';
 import AccessibleView from '../accessibility/AccessibleView';
 import debounce from '../../utils/debounce';
+import FocusControl from '../accessibility/FocusControl/FocusControl';
+import { ModalState } from '../accessibility/FocusControl/types';
 
 interface MenuOptionDivider {
 	isDivider: true;
@@ -81,18 +83,22 @@ const MenuComponent: React.FC<Props> = props => {
 	// When undefined/null: Don't auto-focus anything.
 	const [refocusCounter, setRefocusCounter] = useState<number|undefined>(undefined);
 
-	let key = 0;
+	let keyCounter = 0;
 	let isFirst = true;
 	for (const option of props.options) {
 		if (option.isDivider === true) {
 			menuOptionComponents.push(
-				<View key={`menuOption_divider_${key++}`} style={styles.divider} />,
+				<View key={`menuOption_divider_${keyCounter++}`} style={styles.divider} />,
 			);
 		} else {
-			const canAutoFocus = isFirst;
+			// Don't auto-focus on iOS -- as of RN 0.74, this causes focus to get stuck. However,
+			// the auto-focus seems to be necessary on web (and possibly Android) to avoid first focusing
+			// the dismiss button and other items not in the menu:
+			const canAutoFocus = isFirst && Platform.OS !== 'ios';
+			const key = `menuOption_${option.key ?? keyCounter++}`;
 			menuOptionComponents.push(
-				<MenuOptionComponent value={option.onPress} key={`menuOption_${option.key ?? key++}`} style={styles.contextMenuItem} disabled={!!option.disabled}>
-					<AccessibleView refocusCounter={canAutoFocus ? refocusCounter : undefined}>
+				<MenuOptionComponent value={option.onPress} key={key} style={styles.contextMenuItem} disabled={!!option.disabled}>
+					<AccessibleView refocusCounter={canAutoFocus ? refocusCounter : undefined} testID={key}>
 						<Text
 							style={option.disabled ? styles.contextMenuItemTextDisabled : styles.contextMenuItemText}
 							disabled={!!option.disabled}
@@ -105,42 +111,47 @@ const MenuComponent: React.FC<Props> = props => {
 		}
 	}
 
+	const [open, setOpen] = useState(false);
+
 	const onMenuItemSelect = useCallback((value: unknown) => {
 		if (typeof value === 'function') {
 			value();
 		}
 		setRefocusCounter(undefined);
+		setOpen(false);
 	}, []);
 
 	// debounce: If the menu is focused during its transition animation, it briefly
 	// appears to be in the wrong place. As such, add a brief delay before focusing.
-	const onMenuOpen = useMemo(() => debounce(() => {
+	const onMenuOpened = useMemo(() => debounce(() => {
 		setRefocusCounter(counter => (counter ?? 0) + 1);
+		setOpen(true);
 	}, 200), []);
 
 	// Resetting the refocus counter to undefined causes the menu to not be focused immediately
 	// after opening.
-	const onMenuClose = useCallback(() => {
+	const onMenuClosed = useCallback(() => {
 		setRefocusCounter(undefined);
+		setOpen(false);
 	}, []);
 
 	return (
 		<Menu
 			onSelect={onMenuItemSelect}
-			onClose={onMenuClose}
-			onOpen={onMenuOpen}
+			onClose={onMenuClosed}
+			onOpen={onMenuOpened}
 			style={styles.contextMenu}
 		>
 			<MenuTrigger style={styles.contextMenuButton} testID='screen-header-menu-trigger'>
 				{props.children}
 			</MenuTrigger>
 			<MenuOptions>
-				<ScrollView
-					style={styles.menuContentScroller}
-					aria-modal={true}
-					accessibilityViewIsModal={true}
-					testID={`menu-content-${refocusCounter ? 'refocusing' : ''}`}
-				>{menuOptionComponents}</ScrollView>
+				<FocusControl.ModalWrapper state={open ? ModalState.Open : ModalState.Closed}>
+					<ScrollView
+						style={styles.menuContentScroller}
+						testID={`menu-content-${refocusCounter ? 'refocusing' : ''}`}
+					>{menuOptionComponents}</ScrollView>
+				</FocusControl.ModalWrapper>
 			</MenuOptions>
 		</Menu>
 	);

packages/app-mobile/components/ScreenHeader/index.tsx

@@ -502,15 +502,15 @@ class ScreenHeaderComponent extends PureComponent<ScreenHeaderProps, ScreenHeade
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 		function sortButton(styles: any, onPress: OnPressCallback) {
 			return (
-				<TouchableOpacity
+				<IconButton
 					onPress={onPress}
+					themeId={themeId}
 
-					accessibilityLabel={_('Sort notes by')}
-					accessibilityRole="button">
-					<View style={styles.iconButton}>
-						<Icon name="filter-outline" style={styles.topIcon} />
-					</View>
-				</TouchableOpacity>
+					description={_('Sort notes by')}
+					iconName='ionicon filter-outline'
+					contentWrapperStyle={styles.iconButton}
+					iconStyle={styles.topIcon}
+				/>
 			);
 		}
 

packages/app-mobile/components/SideMenu.tsx

@@ -271,12 +271,14 @@ const SideMenuComponent: React.FC<Props> = props => {
 		<AccessibleView
 			inert={!open}
 			style={styles.menuWrapper}
+			testID='menu-wrapper'
 		>
 			<AccessibleView
 				// Auto-focuses an empty view at the beginning of the sidemenu -- if we instead
 				// focus the container view, VoiceOver fails to focus to any components within
 				// the sidebar.
 				refocusCounter={!open ? 1 : undefined}
+				testID='sidemenu-menu-focus-region'
 			/>
 
 			{props.menu}
@@ -287,8 +289,9 @@ const SideMenuComponent: React.FC<Props> = props => {
 		<AccessibleView
 			inert={open}
 			style={styles.contentWrapper}
+			testID='content-wrapper'
 		>
-			<AccessibleView refocusCounter={open ? 1 : undefined} />
+			<AccessibleView refocusCounter={open ? 1 : undefined} testID='sidemenu-content-focus-region' />
 			{props.children}
 		</AccessibleView>
 	);

packages/app-mobile/components/accessibility/AccessibleView.test.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import FocusControl from './FocusControl/FocusControl';
+import { render } from '@testing-library/react-native';
+import AccessibleView from './AccessibleView';
+import { AccessibilityInfo } from 'react-native';
+import ModalWrapper from './FocusControl/ModalWrapper';
+import { ModalState } from './FocusControl/types';
+
+interface TestContentWrapperProps {
+	mainContent: React.ReactNode;
+	dialogs: React.ReactNode;
+}
+
+const TestContentWrapper: React.FC<TestContentWrapperProps> = props => {
+	return <FocusControl.Provider>
+		{props.dialogs}
+		<FocusControl.MainAppContent>
+			{props.mainContent}
+		</FocusControl.MainAppContent>
+	</FocusControl.Provider>;
+};
+
+jest.mock('react-native', () => {
+	const ReactNative = jest.requireActual('react-native');
+	ReactNative.AccessibilityInfo.setAccessibilityFocus = jest.fn();
+	return ReactNative;
+});
+
+describe('AccessibleView', () => {
+	test('should wait for the currently-open dialog to dismiss before applying focus requests', () => {
+		const setFocusMock = AccessibilityInfo.setAccessibilityFocus as jest.Mock;
+		setFocusMock.mockClear();
+
+		interface TestContentOptions {
+			modalState: ModalState;
+			refocusCounter: undefined|number;
+		}
+		const renderTestContent = ({ modalState, refocusCounter }: TestContentOptions) => {
+			const mainContent = <AccessibleView refocusCounter={refocusCounter}/>;
+			const visibleDialog = <ModalWrapper state={modalState}>{null}</ModalWrapper>;
+			return <TestContentWrapper
+				mainContent={mainContent}
+				dialogs={visibleDialog}
+			/>;
+		};
+
+		render(renderTestContent({
+			refocusCounter: undefined,
+			modalState: ModalState.Open,
+		}));
+
+		// Increasing the refocusCounter for a background view while a dialog is visible
+		// should not try to focus the background view.
+		render(renderTestContent({
+			refocusCounter: 1,
+			modalState: ModalState.Open,
+		}));
+		expect(setFocusMock).not.toHaveBeenCalled();
+
+		// Focus should not be set until done closing
+		render(renderTestContent({
+			refocusCounter: 1,
+			modalState: ModalState.Closing,
+		}));
+		expect(setFocusMock).not.toHaveBeenCalled();
+
+		// Keeping the same refocus counter, but dismissing the dialog should focus
+		// the test view.
+		render(renderTestContent({
+			refocusCounter: 1,
+			modalState: ModalState.Closed,
+		}));
+		expect(setFocusMock).toHaveBeenCalled();
+	});
+});

packages/app-mobile/components/accessibility/AccessibleView.tsx

@@ -1,8 +1,9 @@
 import { focus } from '@joplin/lib/utils/focusHandler';
 import Logger from '@joplin/utils/Logger';
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import { AccessibilityInfo, findNodeHandle, Platform, UIManager, View, ViewProps } from 'react-native';
+import { AutoFocusContext } from './FocusControl/AutoFocusProvider';
 
 const logger = Logger.create('AccessibleView');
 
@@ -16,9 +17,68 @@ interface Props extends ViewProps {
 	refocusCounter?: number;
 }
 
+const useAutoFocus = (refocusCounter: number|null, containerNode: View|HTMLElement|null, debugLabel: string) => {
+	const autoFocusControl = useContext(AutoFocusContext);
+	const autoFocusControlRef = useRef(autoFocusControl);
+	autoFocusControlRef.current = autoFocusControl;
+	const debugLabelRef = useRef(debugLabel);
+	debugLabelRef.current = debugLabel;
+
+	useEffect(() => {
+		if ((refocusCounter ?? null) === null) return () => {};
+		if (!containerNode) return () => {};
+
+		const focusContainer = () => {
+			const doFocus = () => {
+				if (Platform.OS === 'web') {
+					// react-native-web defines UIManager.focus for setting the keyboard focus. However,
+					// this property is not available in standard react-native. As such, access it using type
+					// narrowing:
+					// eslint-disable-next-line no-restricted-properties
+					if (!('focus' in UIManager) || typeof UIManager.focus !== 'function') {
+						throw new Error('Failed to focus sidebar. UIManager.focus is not a function.');
+					}
+
+					// Disable the "use focusHandler for all focus calls" rule -- UIManager.focus requires
+					// an argument, which is not supported by focusHandler.
+					// eslint-disable-next-line no-restricted-properties
+					UIManager.focus(containerNode);
+				} else {
+					const handle = findNodeHandle(containerNode as View);
+					if (handle !== null) {
+						AccessibilityInfo.setAccessibilityFocus(handle);
+					} else {
+						logger.warn('Couldn\'t find a view to focus.');
+					}
+				}
+			};
+
+			focus(`AccessibleView::${debugLabelRef.current}`, {
+				focus: doFocus,
+			});
+		};
+
+		const canFocusNow = !autoFocusControlRef.current || autoFocusControlRef.current.canAutoFocus();
+		if (canFocusNow) {
+			focusContainer();
+			return () => {};
+		} else { // Delay autofocus
+			logger.debug(`Delaying autofocus for ${debugLabelRef.current}`);
+			// Allows the view to be refocused when, for example, a dialog is dismissed
+			autoFocusControlRef.current?.setAutofocusCallback(focusContainer);
+			return () => {
+				autoFocusControlRef.current?.removeAutofocusCallback(focusContainer);
+			};
+		}
+	}, [containerNode, refocusCounter]);
+};
+
 const AccessibleView: React.FC<Props> = ({ inert, refocusCounter, children, ...viewProps }) => {
 	const [containerRef, setContainerRef] = useState<View|HTMLElement|null>(null);
 
+	const debugLabel = viewProps.testID ?? 'AccessibleView';
+	useAutoFocus(refocusCounter, containerRef, debugLabel);
+
 	// On web, there's no clear way to disable keyboard focus for an element **and its descendants**
 	// without accessing the underlying HTML.
 	useEffect(() => {
@@ -32,39 +92,6 @@ const AccessibleView: React.FC<Props> = ({ inert, refocusCounter, children, ...v
 		}
 	}, [containerRef, inert]);
 
-	useEffect(() => {
-		if ((refocusCounter ?? null) === null) return;
-		if (!containerRef) return;
-
-		const autoFocus = () => {
-			if (Platform.OS === 'web') {
-				// react-native-web defines UIManager.focus for setting the keyboard focus. However,
-				// this property is not available in standard react-native. As such, access it using type
-				// narrowing:
-				// eslint-disable-next-line no-restricted-properties
-				if (!('focus' in UIManager) || typeof UIManager.focus !== 'function') {
-					throw new Error('Failed to focus sidebar. UIManager.focus is not a function.');
-				}
-
-				// Disable the "use focusHandler for all focus calls" rule -- UIManager.focus requires
-				// an argument, which is not supported by focusHandler.
-				// eslint-disable-next-line no-restricted-properties
-				UIManager.focus(containerRef);
-			} else {
-				const handle = findNodeHandle(containerRef as View);
-				if (handle !== null) {
-					AccessibilityInfo.setAccessibilityFocus(handle);
-				} else {
-					logger.warn('Couldn\'t find a view to focus.');
-				}
-			}
-		};
-
-		focus('AccessibleView', {
-			focus: autoFocus,
-		});
-	}, [containerRef, refocusCounter]);
-
 	const canFocus = (refocusCounter ?? null) !== null;
 
 	return <View

packages/app-mobile/components/accessibility/FocusControl/AutoFocusProvider.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+type AutoFocusCallback = ()=> void;
+
+interface AutoFocusControl {
+	// It isn't always possible to autofocus (e.g. due to a dialog obscuring focus).
+	canAutoFocus(): boolean;
+
+	// Sets the callback to be triggered when it becomes possible to autofocus
+	setAutofocusCallback(callback: AutoFocusCallback): void;
+	removeAutofocusCallback(callback: AutoFocusCallback): void;
+}
+
+export const AutoFocusContext = createContext<AutoFocusControl|null>(null);
+
+interface Props {
+	children: React.ReactNode;
+	allowAutoFocus: boolean;
+}
+
+const AutoFocusProvider: React.FC<Props> = ({ allowAutoFocus, children }) => {
+	const [autoFocusCallback, setAutofocusCallback] = useState<AutoFocusCallback|null>(null);
+	const allowAutoFocusRef = useRef(allowAutoFocus);
+	allowAutoFocusRef.current = allowAutoFocus;
+
+	useEffect(() => {
+		if (allowAutoFocus && autoFocusCallback) {
+			autoFocusCallback();
+			setAutofocusCallback(null);
+		}
+	}, [autoFocusCallback, allowAutoFocus]);
+
+	const removeAutofocusCallback = useCallback((toRemove: AutoFocusCallback) => {
+		setAutofocusCallback(callback => {
+			// Update the callback only if it's different
+			if (callback === toRemove) {
+				return null;
+			} else {
+				return callback;
+			}
+		});
+	}, []);
+
+	const autoFocusControl = useMemo((): AutoFocusControl => {
+		return {
+			canAutoFocus: () => {
+				return allowAutoFocusRef.current;
+			},
+			setAutofocusCallback: (callback) => {
+				setAutofocusCallback(() => callback);
+			},
+			removeAutofocusCallback,
+		};
+	}, [removeAutofocusCallback, setAutofocusCallback]);
+
+	return <AutoFocusContext.Provider value={autoFocusControl}>
+		{children}
+	</AutoFocusContext.Provider>;
+};
+
+export default AutoFocusProvider;

packages/app-mobile/components/accessibility/FocusControl/FocusControl.tsx

@@ -0,0 +1,11 @@
+import FocusControlProvider from './FocusControlProvider';
+import MainAppContent from './MainAppContent';
+import ModalWrapper from './ModalWrapper';
+
+const FocusControl = {
+	Provider: FocusControlProvider,
+	ModalWrapper,
+	MainAppContent,
+};
+
+export default FocusControl;

packages/app-mobile/components/accessibility/FocusControl/FocusControlProvider.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { createContext, useCallback, useMemo, useState } from 'react';
+import { ModalState } from './types';
+
+export interface FocusControl {
+	setModalState(dialogId: string, state: ModalState): void;
+
+	hasOpenModal: boolean;
+	hasClosingModal: boolean;
+}
+
+export const FocusControlContext = createContext<FocusControl|null>(null);
+
+interface Props {
+	children: React.ReactNode;
+}
+
+const FocusControlProvider: React.FC<Props> = props => {
+	type ModalStates = Record<string, ModalState>;
+	const [modalStates, setModalStates] = useState<ModalStates>({});
+
+	const setModalOpen = useCallback((dialogId: string, state: ModalState) => {
+		setModalStates(modalStates => {
+			modalStates = { ...modalStates };
+			if (state === ModalState.Closed) {
+				delete modalStates[dialogId];
+			} else {
+				modalStates[dialogId] = state;
+			}
+			return modalStates;
+		});
+	}, []);
+
+	const modalStateValues = Object.values(modalStates);
+	const hasOpenModal = modalStateValues.includes(ModalState.Open);
+	const hasClosingModal = modalStateValues.includes(ModalState.Closing);
+
+	const focusControl = useMemo((): FocusControl => {
+		return {
+			hasOpenModal: hasOpenModal,
+			hasClosingModal: hasClosingModal,
+			setModalState: setModalOpen,
+		};
+	}, [hasOpenModal, hasClosingModal, setModalOpen]);
+
+	return <FocusControlContext.Provider value={focusControl}>
+		{props.children}
+	</FocusControlContext.Provider>;
+};
+
+export default FocusControlProvider;

packages/app-mobile/components/accessibility/FocusControl/MainAppContent.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import AccessibleView from '../AccessibleView';
+import { FocusControlContext } from './FocusControlProvider';
+import { useContext } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import AutoFocusProvider from './AutoFocusProvider';
+
+interface Props {
+	children: React.ReactNode;
+	style?: StyleProp<ViewStyle>;
+}
+
+// A region that should not be accessibility focusable while a dialog
+// is open.
+const MainAppContent: React.FC<Props> = props => {
+	const { hasOpenModal, hasClosingModal } = useContext(FocusControlContext);
+	const blockFocus = hasOpenModal;
+	const allowAutoFocus = !hasClosingModal && !blockFocus;
+
+	return <AccessibleView inert={blockFocus} style={props.style}>
+		<AutoFocusProvider allowAutoFocus={allowAutoFocus}>
+			{props.children}
+		</AutoFocusProvider>
+	</AccessibleView>;
+};
+
+export default MainAppContent;

packages/app-mobile/components/accessibility/FocusControl/ModalWrapper.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { useContext, useEffect, useId } from 'react';
+import { FocusControlContext } from './FocusControlProvider';
+import { ModalState } from './types';
+
+interface Props {
+	children: React.ReactNode;
+	state: ModalState;
+}
+
+// A wrapper component that notifies the focus handler that a modal-like component
+// is visible. Modals that capture focus should wrap their content in this component.
+const ModalWrapper: React.FC<Props> = props => {
+	const { setModalState: setDialogState } = useContext(FocusControlContext);
+	const id = useId();
+	useEffect(() => {
+		if (!setDialogState) {
+			throw new Error('ModalContent components must have a FocusControlProvider as an ancestor. Is FocusControlProvider part of the provider stack?');
+		}
+		setDialogState(id, props.state);
+	}, [id, props.state, setDialogState]);
+
+	useEffect(() => {
+		return () => {
+			setDialogState?.(id, ModalState.Closed);
+		};
+	}, [id, setDialogState]);
+
+	return <>
+		{props.children}
+	</>;
+};
+
+export default ModalWrapper;

packages/app-mobile/components/accessibility/FocusControl/types.ts

@@ -0,0 +1,13 @@
+
+// eslint-disable-next-line import/prefer-default-export -- FocusControl currently only has one shared type for external use
+export enum ModalState {
+	// When `Open`, a modal blocks focus for the main app content.
+	Open,
+	// When `Closing`, a modal doesn't block main app content focus, but focus
+	// shouldn't be moved to the main app content yet.
+	// This is useful for native Modals, which have their own focus handling logic.
+	// If Joplin moves accessibility focus before the native Modal focus handling
+	// has completed, the Joplin-specified accessibility focus may be ignored.
+	Closing,
+	Closed,
+}

packages/app-mobile/components/global-style.ts

@@ -15,6 +15,7 @@ const baseStyle = {
 	fontSizeSmaller: 14,
 	disabledOpacity: 0.2,
 	lineHeight: '1.6em',
+	listTabSize: '1.7em',
 	// The default, may be overridden in settings:
 	noteViewerFontSize: 16,
 };

packages/app-mobile/components/plugins/dialogs/PluginDialogManager.tsx

@@ -7,6 +7,8 @@ import PluginService from '@joplin/lib/services/plugins/PluginService';
 import WebviewController, { ContainerType } from '@joplin/lib/services/plugins/WebviewController';
 import useViewInfos from './hooks/useViewInfos';
 import PluginPanelViewer from './PluginPanelViewer';
+import FocusControl from '../../accessibility/FocusControl/FocusControl';
+import { ModalState } from '../../accessibility/FocusControl/types';
 
 interface Props {
 	themeId: number;
@@ -40,12 +42,14 @@ const PluginDialogManager: React.FC<Props> = props => {
 					visible={true}
 					onDismiss={() => dismissDialog(viewInfo)}
 				>
-					<PluginDialogWebView
-						viewInfo={viewInfo}
-						themeId={props.themeId}
-						pluginStates={props.pluginStates}
-						pluginHtmlContents={props.pluginHtmlContents}
-					/>
+					<FocusControl.ModalWrapper state={ModalState.Open}>
+						<PluginDialogWebView
+							viewInfo={viewInfo}
+							themeId={props.themeId}
+							pluginStates={props.pluginStates}
+							pluginHtmlContents={props.pluginHtmlContents}
+						/>
+					</FocusControl.ModalWrapper>
 				</Modal>
 			</Portal>,
 		);

packages/app-mobile/components/screens/ConfigScreen/plugins/PluginBox/index.tsx

@@ -81,10 +81,11 @@ const PluginBox: React.FC<Props> = props => {
 	const styles = useStyles(props.isCompatible);
 
 	const CardWrapper = props.onShowPluginInfo ? TouchableRipple : View;
+	const containerIsButton = !!props.onShowPluginInfo;
 	return (
 		<CardWrapper
-			accessibilityRole={props.onShowPluginInfo ? 'button' : null}
-			accessible={true}
+			accessibilityRole={containerIsButton ? 'button' : null}
+			accessible={containerIsButton}
 			onPress={props.onShowPluginInfo ? onPress : null}
 			style={styles.cardContainer}
 		>

packages/app-mobile/components/screens/ConfigScreen/plugins/testUtils/WrappedPluginStates.tsx

@@ -2,13 +2,11 @@ import * as React from 'react';
 import { PluginSettings } from '@joplin/lib/services/plugins/PluginService';
 import configScreenStyles from '../../configScreenStyles';
 import Setting from '@joplin/lib/models/Setting';
-import { Provider } from 'react-redux';
 import { Store } from 'redux';
-import { PaperProvider } from 'react-native-paper';
 import PluginStates from '../PluginStates';
 import { AppState } from '../../../../../utils/types';
 import { useCallback, useState } from 'react';
-import { MenuProvider } from 'react-native-popup-menu';
+import TestProviderStack from '../../../../testing/TestProviderStack';
 
 interface WrapperProps {
 	initialPluginSettings: PluginSettings;
@@ -29,19 +27,15 @@ const PluginStatesWrapper = (props: WrapperProps) => {
 	}, []);
 
 	return (
-		<Provider store={props.store}>
-			<MenuProvider>
-				<PaperProvider>
-					<PluginStates
-						styles={styles}
-						themeId={Setting.THEME_LIGHT}
-						updatePluginStates={updatePluginStates}
-						pluginSettings={pluginSettings}
-						shouldShowBasedOnSearchQuery={shouldShowBasedOnSettingSearchQuery}
-					/>
-				</PaperProvider>
-			</MenuProvider>
-		</Provider>
+		<TestProviderStack store={props.store}>
+			<PluginStates
+				styles={styles}
+				themeId={Setting.THEME_LIGHT}
+				updatePluginStates={updatePluginStates}
+				pluginSettings={pluginSettings}
+				shouldShowBasedOnSearchQuery={shouldShowBasedOnSettingSearchQuery}
+			/>
+		</TestProviderStack>
 	);
 };
 

packages/app-mobile/components/testing/TestProviderStack.tsx

@@ -4,6 +4,7 @@ import { MenuProvider } from 'react-native-popup-menu';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
 import { AppState } from '../../utils/types';
+import FocusControl from '../accessibility/FocusControl/FocusControl';
 
 interface Props {
 	store: Store<AppState>;
@@ -12,11 +13,13 @@ interface Props {
 
 const TestProviderStack: React.FC<Props> = props => {
 	return <Provider store={props.store}>
-		<MenuProvider>
-			<PaperProvider>
-				{props.children}
-			</PaperProvider>
-		</MenuProvider>
+		<FocusControl.Provider>
+			<MenuProvider closeButtonLabel='Dismiss'>
+				<PaperProvider>
+					{props.children}
+				</PaperProvider>
+			</MenuProvider>
+		</FocusControl.Provider>
 	</Provider>;
 };
 

packages/app-mobile/components/voiceTyping/RecordingControls.tsx

@@ -43,12 +43,15 @@ const styles = StyleSheet.create({
 
 const RecordingControls: React.FC<Props> = props => {
 	const renderIcon = () => {
+		const loadingIcon: IconSource = ({ size }: { size: number }) => {
+			return <ActivityIndicator animating={true} style={{ width: size, height: size }} />;
+		};
 		const components: Record<RecorderState, IconSource> = {
-			[RecorderState.Loading]: ({ size }: { size: number }) => <ActivityIndicator animating={true} style={{ width: size, height: size }} />,
+			[RecorderState.Loading]: loadingIcon,
 			[RecorderState.Recording]: 'microphone',
 			[RecorderState.Idle]: 'microphone',
-			[RecorderState.Processing]: 'microphone',
-			[RecorderState.Downloading]: ({ size }: { size: number }) => <ActivityIndicator animating={true} style={{ width: size, height: size }} />,
+			[RecorderState.Processing]: loadingIcon,
+			[RecorderState.Downloading]: loadingIcon,
 			[RecorderState.Error]: 'alert-circle-outline',
 		};
 
@@ -67,6 +70,7 @@ const RecordingControls: React.FC<Props> = props => {
 						refocusCounter={1}
 						aria-live='polite'
 						role='heading'
+						testID='recording-controls-heading'
 					>
 						<Text variant='bodyMedium'>
 							{props.heading}

packages/app-mobile/components/voiceTyping/SpeechToTextBanner.tsx

@@ -62,7 +62,7 @@ const useVoiceTyping = ({ locale, provider, onSetPreview, onText }: UseVoiceTypi
 			// should be hidden (and voice typing should start).
 			setError(null);
 
-			await voiceTypingRef.current?.stop();
+			await voiceTypingRef.current?.cancel();
 			onSetPreviewRef.current?.('');
 
 			setModelIsOutdated(await builder.isDownloadedFromOutdatedUrl());
@@ -91,11 +91,11 @@ const useVoiceTyping = ({ locale, provider, onSetPreview, onText }: UseVoiceTypi
 	}, [builder]);
 
 	useEffect(() => () => {
-		void voiceTypingRef.current?.stop();
+		void voiceTypingRef.current?.cancel();
 	}, []);
 
 	const onRequestRedownload = useCallback(async () => {
-		await voiceTypingRef.current?.stop();
+		await voiceTypingRef.current?.cancel();
 		await builder.clearDownloads();
 		setMustDownloadModel(true);
 		setRedownloadCounter(value => value + 1);
@@ -142,8 +142,12 @@ const SpeechToTextComponent: React.FC<Props> = props => {
 		}
 	}, [recorderState, voiceTyping, props.onText]);
 
-	const onDismiss = useCallback(() => {
-		void voiceTyping?.stop();
+	const onDismiss = useCallback(async () => {
+		if (voiceTyping) {
+			setRecorderState(RecorderState.Processing);
+			await voiceTyping.stop();
+			setRecorderState(RecorderState.Idle);
+		}
 		props.onDismiss();
 	}, [voiceTyping, props.onDismiss]);
 
@@ -173,6 +177,7 @@ const SpeechToTextComponent: React.FC<Props> = props => {
 		{allowReDownload ? reDownloadButton : null}
 		<PrimaryButton
 			onPress={onDismiss}
+			disabled={recorderState === RecorderState.Processing}
 			accessibilityHint={_('Ends voice typing')}
 		>{_('Done')}</PrimaryButton>
 	</>;

packages/app-mobile/ios/Joplin/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,116 +1,517 @@
 {
-  "images": [
+  "images" : [
     {
-      "filename": "ios_marketing1024x1024.png",
-      "idiom": "ios-marketing",
-      "size": "1024x1024",
-      "scale": "1x"
+      "filename" : "ios20x20@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
-      "filename": "iphone_notification20x20@2x.png",
-      "idiom": "iphone",
-      "size": "20x20",
-      "scale": "2x"
+      "filename" : "ios20x20@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "20x20"
     },
     {
-      "filename": "iphone_notification20x20@3x.png",
-      "idiom": "iphone",
-      "size": "20x20",
-      "scale": "3x"
+      "filename" : "ios29x29@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
-      "filename": "iphone_settings29x29@2x.png",
-      "idiom": "iphone",
-      "size": "29x29",
-      "scale": "2x"
+      "filename" : "ios29x29@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "29x29"
     },
     {
-      "filename": "iphone_settings29x29@3x.png",
-      "idiom": "iphone",
-      "size": "29x29",
-      "scale": "3x"
+      "filename" : "ios38x38@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "38x38"
     },
     {
-      "filename": "iphone_spotlight40x40@2x.png",
-      "idiom": "iphone",
-      "size": "40x40",
-      "scale": "2x"
+      "filename" : "ios38x38@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "38x38"
     },
     {
-      "filename": "iphone_spotlight40x40@3x.png",
-      "idiom": "iphone",
-      "size": "40x40",
-      "scale": "3x"
+      "filename" : "ios40x40@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "40x40"
     },
     {
-      "filename": "iphone_app60x60@2x.png",
-      "idiom": "iphone",
-      "size": "60x60",
-      "scale": "2x"
+      "filename" : "ios40x40@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "40x40"
     },
     {
-      "filename": "iphone_app60x60@3x.png",
-      "idiom": "iphone",
-      "size": "60x60",
-      "scale": "3x"
+      "filename" : "ios60x60@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "60x60"
     },
     {
-      "filename": "ipad_notification20x20.png",
-      "idiom": "ipad",
-      "size": "20x20",
-      "scale": "1x"
+      "filename" : "ios60x60@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "60x60"
     },
     {
-      "filename": "ipad_notification20x20@2x.png",
-      "idiom": "ipad",
-      "size": "20x20",
-      "scale": "2x"
+      "filename" : "ios64x64@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "64x64"
     },
     {
-      "filename": "ipad_settings29x29.png",
-      "idiom": "ipad",
-      "size": "29x29",
-      "scale": "1x"
+      "filename" : "ios64x64@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "64x64"
     },
     {
-      "filename": "ipad_settings29x29@2x.png",
-      "idiom": "ipad",
-      "size": "29x29",
-      "scale": "2x"
+      "filename" : "ios68x68@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "68x68"
     },
     {
-      "filename": "ipad_spotlight40x40.png",
-      "idiom": "ipad",
-      "size": "40x40",
-      "scale": "1x"
+      "filename" : "ios76x76@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "76x76"
     },
     {
-      "filename": "ipad_spotlight40x40@2x.png",
-      "idiom": "ipad",
-      "size": "40x40",
-      "scale": "2x"
+      "filename" : "ios83.5x83.5@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "83.5x83.5"
     },
     {
-      "filename": "ipad_app76x76.png",
-      "idiom": "ipad",
-      "size": "76x76",
-      "scale": "1x"
+      "filename" : "ios1024x1024.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
     },
     {
-      "filename": "ipad_app76x76@2x.png",
-      "idiom": "ipad",
-      "size": "76x76",
-      "scale": "2x"
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark20x20@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
-      "filename": "ipad_pro_app83.5x83.5@2x.png",
-      "idiom": "ipad",
-      "size": "83.5x83.5",
-      "scale": "2x"
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark20x20@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "20x20"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark29x29@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "29x29"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark29x29@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "29x29"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark38x38@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "38x38"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark38x38@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "38x38"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark40x40@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "40x40"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark40x40@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "40x40"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark60x60@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "60x60"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark60x60@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark64x64@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "64x64"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark64x64@3x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "64x64"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark68x68@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "68x68"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark76x76@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "76x76"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark83.5x83.5@2x.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "83.5x83.5"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "ios_dark1024x1024.png",
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "20x20"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "20x20"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "29x29"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "29x29"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "38x38"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "38x38"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "40x40"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "40x40"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "60x60"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "64x64"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "3x",
+      "size" : "64x64"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "68x68"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "76x76"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "scale" : "2x",
+      "size" : "83.5x83.5"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "tinted"
+        }
+      ],
+      "idiom" : "universal",
+      "platform" : "ios",
+      "size" : "1024x1024"
     }
   ],
-  "info": {
-    "version": 1,
-    "author": "xcode"
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
   }
-}
+}