Merge branch 'dev' into macos_universal

.eslintignore

@@ -407,7 +407,6 @@ packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.js
 packages/app-mobile/components/ProfileSwitcher/useProfileConfig.js
 packages/app-mobile/components/ScreenHeader.js
 packages/app-mobile/components/SelectDateTimeDialog.js
-packages/app-mobile/components/SideMenu.js
 packages/app-mobile/components/TextInput.js
 packages/app-mobile/components/app-nav.js
 packages/app-mobile/components/biometrics/BiometricPopup.js

.eslintrc.js

@@ -42,6 +42,8 @@ module.exports = {
 		'zxcvbn': 'readonly',
 
 		'tinymce': 'readonly',
+
+		'JSX': 'readonly',
 	},
 	'parserOptions': {
 		'ecmaVersion': 2018,
@@ -108,6 +110,9 @@ module.exports = {
 		'semi': ['error', 'always'],
 		'eol-last': ['error', 'always'],
 		'quotes': ['error', 'single'],
+
+		// Note that "indent" only applies to JavaScript files. See
+		// https://github.com/laurent22/joplin/issues/8360
 		'indent': ['error', 'tab'],
 		'comma-dangle': ['error', {
 			'arrays': 'always-multiline',
@@ -184,6 +189,12 @@ module.exports = {
 				'project': './tsconfig.eslint.json',
 			},
 			'rules': {
+				'@typescript-eslint/indent': ['error', 'tab', {
+					'ignoredNodes': [
+						// See https://github.com/typescript-eslint/typescript-eslint/issues/1824
+						'TSUnionType',
+					],
+				}],
 				'@typescript-eslint/ban-ts-comment': ['error'],
 				'@typescript-eslint/ban-types': 'error',
 				'@typescript-eslint/explicit-member-accessibility': ['error'],

.gitignore

@@ -352,6 +352,7 @@ packages/app-mobile/components/CustomButton.js
 packages/app-mobile/components/Dropdown.js
 packages/app-mobile/components/ExtendedWebView.js
 packages/app-mobile/components/FolderPicker.js
+packages/app-mobile/components/Modal.js
 packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useOnMessage.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useOnResourceLongPress.js
@@ -392,7 +393,6 @@ packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.js
 packages/app-mobile/components/ProfileSwitcher/useProfileConfig.js
 packages/app-mobile/components/ScreenHeader.js
 packages/app-mobile/components/SelectDateTimeDialog.js
-packages/app-mobile/components/SideMenu.js
 packages/app-mobile/components/TextInput.js
 packages/app-mobile/components/app-nav.js
 packages/app-mobile/components/biometrics/BiometricPopup.js

packages/app-mobile/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
 	presets: ['module:metro-react-native-babel-preset'],
+	plugins: ['react-native-reanimated/plugin'],
 };

packages/app-mobile/components/Modal.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Modal, ModalProps, StyleSheet, View, ViewStyle } from 'react-native';
+import { hasNotch } from 'react-native-device-info';
+
+interface ModalElementProps extends ModalProps {
+	children: React.ReactNode;
+	containerStyle?: ViewStyle;
+	elevation?: number;
+}
+
+const ModalElement: React.FC<ModalElementProps> = ({
+	children,
+	containerStyle,
+	...modalProps
+}) => {
+	return (
+		<Modal {...modalProps}>
+			<View style={[styleSheet.modalContainer, containerStyle ? containerStyle : null]}>
+				{children}
+			</View>
+		</Modal>
+	);
+};
+
+const styleSheet = StyleSheet.create({
+	modalContainer: {
+		marginTop: hasNotch() ? 65 : 15,
+		marginBottom: hasNotch() ? 35 : 15,
+	},
+});
+
+export default ModalElement;

packages/app-mobile/components/ModalDialog.js

@@ -1,8 +1,10 @@
 const React = require('react');
-const { Text, Modal, View, StyleSheet, Button } = require('react-native');
+const { Text, View, StyleSheet, Button } = require('react-native');
 const { themeStyle } = require('./global-style.js');
 const { _ } = require('@joplin/lib/locale');
 
+import Modal from './Modal';
+
 class ModalDialog extends React.Component {
 	constructor() {
 		super();
@@ -30,6 +32,7 @@ class ModalDialog extends React.Component {
 				margin: 20,
 				padding: 10,
 				borderRadius: 5,
+				elevation: 10,
 			},
 			modalContentWrapper2: {
 				flex: 1,
@@ -56,17 +59,15 @@ class ModalDialog extends React.Component {
 
 		return (
 			<View style={this.styles().modalWrapper}>
-				<Modal transparent={true} visible={true} onRequestClose={() => {}}>
+				<Modal transparent={true} visible={true} onRequestClose={() => {}} containerStyle={this.styles().modalContentWrapper}>
-					<View elevation={10} style={this.styles().modalContentWrapper}>
+					<Text style={this.styles().title}>{this.props.title}</Text>
-						<Text style={this.styles().title}>{this.props.title}</Text>
+					<View style={this.styles().modalContentWrapper2}>{ContentComponent}</View>
-						<View style={this.styles().modalContentWrapper2}>{ContentComponent}</View>
+					<View style={this.styles().buttonRow}>
-						<View style={this.styles().buttonRow}>
+						<View style={{ flex: 1 }}>
-							<View style={{ flex: 1 }}>
+							<Button disabled={!buttonBarEnabled} title={_('OK')} onPress={this.props.onOkPress}></Button>
-								<Button disabled={!buttonBarEnabled} title={_('OK')} onPress={this.props.onOkPress}></Button>
+						</View>
-							</View>
+						<View style={{ flex: 1, marginLeft: 5 }}>
-							<View style={{ flex: 1, marginLeft: 5 }}>
+							<Button disabled={!buttonBarEnabled} title={_('Cancel')} onPress={this.props.onCancelPress}></Button>
-								<Button disabled={!buttonBarEnabled} title={_('Cancel')} onPress={this.props.onCancelPress}></Button>
-							</View>
 						</View>
 					</View>
 				</Modal>

packages/app-mobile/components/NoteEditor/EditLinkDialog.tsx

@@ -3,8 +3,9 @@
 const React = require('react');
 const { useState, useEffect, useMemo, useRef } = require('react');
 const { StyleSheet } = require('react-native');
-const { View, Modal, Text, TextInput, Button } = require('react-native');
+const { View, Text, TextInput, Button } = require('react-native');
 
+import Modal from '../Modal';
 import { themeStyle } from '@joplin/lib/theme';
 import { _ } from '@joplin/lib/locale';
 import { EditorControl } from './types';
@@ -43,7 +44,6 @@ const EditLinkDialog = (props: LinkDialogProps) => {
 				margin: 15,
 				padding: 30,
 				backgroundColor: theme.backgroundColor,
-
 				elevation: 5,
 				shadowOffset: {
 					width: 1,
@@ -132,23 +132,22 @@ const EditLinkDialog = (props: LinkDialogProps) => {
 	return (
 		<Modal
 			animationType="slide"
+			containerStyle={styles.modalContent}
 			transparent={true}
 			visible={props.visible}
 			onRequestClose={() => {
 				props.editorControl.hideLinkDialog();
 			}}>
-			<View style={styles.modalContent}>
+			<Text style={styles.header}>{_('Edit link')}</Text>
-				<Text style={styles.header}>{_('Edit link')}</Text>
+			<View>
-				<View>
+				{linkTextInput}
-					{linkTextInput}
+				{linkURLInput}
-					{linkURLInput}
-				</View>
-				<Button
-					style={styles.button}
-					onPress={onSubmit}
-					title={_('Done')}
-				/>
 			</View>
+			<Button
+				style={styles.button}
+				onPress={onSubmit}
+				title={_('Done')}
+			/>
 		</Modal>
 	);
 };

packages/app-mobile/components/NoteEditor/SearchPanel.tsx

@@ -25,9 +25,9 @@ export const defaultSearchState: SearchState = {
 };
 
 export interface SearchPanelProps {
-    searchControl: SearchControl;
+	searchControl: SearchControl;
-    searchState: SearchState;
+	searchState: SearchState;
-    editorSettings: EditorSettings;
+	editorSettings: EditorSettings;
 }
 
 interface ActionButtonProps {

packages/app-mobile/components/NoteEditor/types.ts

@@ -15,9 +15,9 @@ export interface EditorSettings {
 	// [themeStyle(themeId: number)] doesn't work. As such, we need both
 	// the [themeId] and [themeData].
 	themeId: number;
-    themeData: Theme;
+	themeData: Theme;
 
-    katexEnabled: boolean;
+	katexEnabled: boolean;
 	spellcheckEnabled: boolean;
 }
 
@@ -41,14 +41,14 @@ export interface SelectionChangeEvent {
 }
 
 export interface SearchControl {
-    findNext(): void;
+	findNext(): void;
-    findPrevious(): void;
+	findPrevious(): void;
-    replaceCurrent(): void;
+	replaceCurrent(): void;
-    replaceAll(): void;
+	replaceAll(): void;
 	setSearchState(state: SearchState): void;
 
-    showSearch(): void;
+	showSearch(): void;
-    hideSearch(): void;
+	hideSearch(): void;
 }
 
 export interface SearchState {
@@ -57,7 +57,7 @@ export interface SearchState {
 
 	searchText: string;
 	replaceText: string;
-    dialogVisible: boolean;
+	dialogVisible: boolean;
 }
 
 // Possible types of lists in the editor

packages/app-mobile/components/SideMenu.ts

@@ -1,22 +0,0 @@
-const { connect } = require('react-redux');
-const SideMenu_ = require('react-native-side-menu-updated').default;
-import { Dimensions } from 'react-native';
-import { State } from '@joplin/lib/reducer';
-
-class SideMenuComponent extends SideMenu_ {
-	public onLayoutChange(e: any) {
-		const { width, height } = e.nativeEvent.layout;
-		const openMenuOffsetPercentage = this.props.openMenuOffset / Dimensions.get('window').width;
-		const openMenuOffset = width * openMenuOffsetPercentage;
-		const hiddenMenuOffset = width * this.state.hiddenMenuOffsetPercentage;
-		this.setState({ width, height, openMenuOffset, hiddenMenuOffset });
-	}
-}
-
-const SideMenu = connect((state: State) => {
-	return {
-		isOpen: state.showSideMenu,
-	};
-})(SideMenuComponent);
-
-export default SideMenu;

packages/app-mobile/components/getResponsiveValue.ts

@@ -17,15 +17,15 @@ import { Dimensions } from 'react-native';
 
 export interface ValueMap {
 	// Value to use on small-width displays
-    sm?: number;
+	sm?: number;
 	// Value to use on medium-width displays
-    md?: number;
+	md?: number;
 	// Value to use on large-width displays
-    lg?: number;
+	lg?: number;
 	// Value to use on extra-large width displays
-    xl?: number;
+	xl?: number;
 	// Value to use on extra-extra-large width displays
-    xxl?: number;
+	xxl?: number;
 }
 
 export default function getResponsiveValue(valueMap: ValueMap): number {

packages/app-mobile/index.js

@@ -10,6 +10,9 @@
 import 'react-native-get-random-values';
 import 'react-native-url-polyfill/auto';
 
+// Set up required for react-native-drawer-layout (See: https://reactnavigation.org/docs/drawer-layout/ v6.x)
+import 'react-native-gesture-handler';
+
 import { LogBox, AppRegistry } from 'react-native';
 const Root = require('./root').default;
 

packages/app-mobile/ios/Podfile.lock

@@ -467,16 +467,47 @@ PODS:
     - React-Core
   - RNDateTimePicker (7.1.0):
     - React-Core
+  - RNDeviceInfo (10.6.0):
+    - React-Core
   - RNExitApp (1.1.0):
     - React
   - RNFileViewer (2.1.5):
     - React-Core
   - RNFS (2.20.0):
     - React-Core
+  - RNGestureHandler (2.9.0):
+    - React-Core
   - RNLocalize (3.0.0):
     - React-Core
   - RNQuickAction (0.3.13):
     - React
+  - RNReanimated (3.1.0):
+    - DoubleConversion
+    - FBLazyVector
+    - FBReactNativeSpec
+    - glog
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
+    - React-callinvoker
+    - React-Core
+    - React-Core/DevSupport
+    - React-Core/RCTWebSocket
+    - React-CoreModules
+    - React-cxxreact
+    - React-jsi
+    - React-jsiexecutor
+    - React-jsinspector
+    - React-RCTActionSheet
+    - React-RCTAnimation
+    - React-RCTBlob
+    - React-RCTImage
+    - React-RCTLinking
+    - React-RCTNetwork
+    - React-RCTSettings
+    - React-RCTText
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNSecureRandom (1.0.1):
     - React
   - RNShare (8.2.2):
@@ -577,11 +608,14 @@ DEPENDENCIES:
   - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
   - "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)"
   - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
+  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNExitApp (from `../node_modules/react-native-exit-app`)
   - RNFileViewer (from `../node_modules/react-native-file-viewer`)
   - RNFS (from `../node_modules/react-native-fs`)
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNLocalize (from `../node_modules/react-native-localize`)
   - RNQuickAction (from `../node_modules/react-native-quick-actions`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNSecureRandom (from `../node_modules/react-native-securerandom`)
   - RNShare (from `../node_modules/react-native-share`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
@@ -718,16 +752,22 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/push-notification-ios"
   RNDateTimePicker:
     :path: "../node_modules/@react-native-community/datetimepicker"
+  RNDeviceInfo:
+    :path: "../node_modules/react-native-device-info"
   RNExitApp:
     :path: "../node_modules/react-native-exit-app"
   RNFileViewer:
     :path: "../node_modules/react-native-file-viewer"
   RNFS:
     :path: "../node_modules/react-native-fs"
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
   RNLocalize:
     :path: "../node_modules/react-native-localize"
   RNQuickAction:
     :path: "../node_modules/react-native-quick-actions"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNSecureRandom:
     :path: "../node_modules/react-native-securerandom"
   RNShare:
@@ -808,11 +848,14 @@ SPEC CHECKSUMS:
   RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495
   RNCPushNotificationIOS: 64218f3c776c03d7408284a819b2abfda1834bc8
   RNDateTimePicker: 7ecd54a97fc3749f38c3c89a171f6cbd52f3c142
+  RNDeviceInfo: 475a4c447168d0ad4c807e48ef5e0963a0f4eb1b
   RNExitApp: c4e052df2568b43bec8a37c7cd61194d4cfee2c3
   RNFileViewer: ce7ca3ac370e18554d35d6355cffd7c30437c592
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
+  RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
   RNLocalize: 5944c97d2fe8150913a51ddd5eab4e23a82bd80d
   RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
+  RNReanimated: b1220a0e5168745283ff5d53bfc7d2144b2cee1b
   RNSecureRandom: 07efbdf2cd99efe13497433668e54acd7df49fef
   RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
@@ -824,4 +867,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 3b2cace838120977b5b54871752c9dddf5a11cea
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.12.0

packages/app-mobile/package.json

@@ -43,13 +43,16 @@
     "react-native": "0.71.10",
     "react-native-action-button": "2.8.5",
     "react-native-camera": "4.2.1",
+    "react-native-device-info": "10.6.0",
     "react-native-dialogbox": "0.6.10",
     "react-native-document-picker": "8.2.1",
+    "react-native-drawer-layout": "3.2.0",
     "react-native-dropdownalert": "4.5.1",
     "react-native-exit-app": "1.1.0",
     "react-native-file-viewer": "2.1.5",
     "react-native-fingerprint-scanner": "6.0.0",
     "react-native-fs": "2.20.0",
+    "react-native-gesture-handler": "2.9.0",
     "react-native-get-random-values": "1.9.0",
     "react-native-image-picker": "5.4.2",
     "react-native-image-resizer": "1.4.5",
@@ -58,11 +61,11 @@
     "react-native-paper": "5.8.0",
     "react-native-popup-menu": "0.16.1",
     "react-native-quick-actions": "0.3.13",
+    "react-native-reanimated": "3.1.0",
     "react-native-rsa-native": "2.0.5",
     "react-native-safe-area-context": "4.5.3",
     "react-native-securerandom": "1.0.1",
     "react-native-share": "8.2.2",
-    "react-native-side-menu-updated": "1.3.2",
     "react-native-sqlite-storage": "6.0.1",
     "react-native-url-polyfill": "1.3.0",
     "react-native-vector-icons": "9.2.0",

packages/app-mobile/root.tsx

@@ -28,7 +28,7 @@ import SyncTargetJoplinCloud from '@joplin/lib/SyncTargetJoplinCloud';
 import SyncTargetOneDrive from '@joplin/lib/SyncTargetOneDrive';
 import initProfile from '@joplin/lib/services/profileConfig/initProfile';
 const VersionInfo = require('react-native-version-info').default;
-const { Keyboard, BackHandler, Animated, View, StatusBar, Platform, Dimensions } = require('react-native');
+const { Keyboard, BackHandler, View, StatusBar, Platform, Dimensions } = require('react-native');
 import { AppState as RNAppState, EmitterSubscription, Linking, NativeEventSubscription } from 'react-native';
 import getResponsiveValue from './components/getResponsiveValue';
 import NetInfo from '@react-native-community/netinfo';
@@ -67,7 +67,7 @@ const { OneDriveLoginScreen } = require('./components/screens/onedrive-login.js'
 import EncryptionConfigScreen from './components/screens/encryption-config';
 const { DropboxLoginScreen } = require('./components/screens/dropbox-login.js');
 const { MenuContext } = require('react-native-popup-menu');
-import SideMenu from './components/SideMenu';
+import { Drawer } from 'react-native-drawer-layout';
 import SideMenuContent from './components/side-menu-content';
 const { SideMenuContentNote } = require('./components/side-menu-content-note.js');
 const { DatabaseDriverReactNative } = require('./utils/database-driver-react-native');
@@ -116,6 +116,9 @@ import ProfileEditor from './components/ProfileSwitcher/ProfileEditor';
 import sensorInfo, { SensorInfo } from './components/biometrics/sensorInfo';
 import { getCurrentProfile } from '@joplin/lib/services/profileConfig';
 import { getDatabaseName, getProfilesRootDir, getResourceDir, setDispatch } from './services/profiles';
+import { ReactNode } from 'react';
+
+type SideMenuPosition = 'left' | 'right';
 
 const logger = Logger.create('root');
 
@@ -712,7 +715,6 @@ class AppComponent extends React.Component {
 		super();
 
 		this.state = {
-			sideMenuContentOpacity: new Animated.Value(0),
 			sideMenuWidth: this.getSideMenuWidth(),
 			sensorInfo: null,
 		};
@@ -956,8 +958,8 @@ class AppComponent extends React.Component {
 		if (this.props.appState !== 'ready') return null;
 		const theme: Theme = themeStyle(this.props.themeId);
 
-		let sideMenuContent = null;
+		let sideMenuContent: ReactNode = null;
-		let menuPosition = 'left';
+		let menuPosition: SideMenuPosition = 'left';
 
 		if (this.props.routeName === 'Note') {
 			sideMenuContent = <SafeAreaView style={{ flex: 1, backgroundColor: theme.backgroundColor }}><SideMenuContentNote options={this.props.noteSideMenuOptions}/></SafeAreaView>;
@@ -996,18 +998,20 @@ class AppComponent extends React.Component {
 
 		const mainContent = (
 			<View style={{ flex: 1, backgroundColor: theme.backgroundColor }}>
-				<SideMenu
+				<Drawer
-					menu={sideMenuContent}
+					// Need to reset the key here based on menu position, otherwise
-					edgeHitWidth={5}
+					// the drawer will flash open on screen and close every time the
-					openMenuOffset={this.state.sideMenuWidth}
+					// drawer position switches (i.e. when opening or closing a note)
-					menuPosition={menuPosition}
+					key={`main-drawer-${menuPosition}`}
-					onChange={(isOpen: boolean) => this.sideMenu_change(isOpen)}
+					open={this.props.showSideMenu}
-					onSliding={(percent: number) => {
+					onOpen={() => this.sideMenu_change(true)}
-						this.props.dispatch({
+					onClose={() => this.sideMenu_change(false)}
-							type: 'SIDE_MENU_OPEN_PERCENT',
+					drawerPosition={menuPosition}
-							value: percent,
+					swipeEdgeWidth={15}
-						});
+					drawerStyle={{
+						width: this.state.sideMenuWidth,
 					}}
+					renderDrawerContent={() => sideMenuContent}
 				>
 					<StatusBar barStyle={statusBarStyle} />
 					<MenuContext style={{ flex: 1 }}>
@@ -1024,7 +1028,7 @@ class AppComponent extends React.Component {
 							/> }
 						</SafeAreaView>
 					</MenuContext>
-				</SideMenu>
+				</Drawer>
 			</View>
 		);
 

packages/app-mobile/utils/setupNotifications.ts

@@ -3,8 +3,8 @@ import { Dispatch } from 'redux';
 const { NativeEventEmitter, NativeModules, Platform } = require('react-native');
 
 interface NotificationData {
-    joplinNotificationId: string;
+	joplinNotificationId: string;
-    noteId: string;
+	noteId: string;
 }
 
 export default async (dispatch: Dispatch) => {

packages/lib/EventDispatcher.test.ts

@@ -1,9 +1,9 @@
 import EventDispatcher from './EventDispatcher';
 
 enum TestKey {
-    FooEvent,
+	FooEvent,
-    BarEvent,
+	BarEvent,
-    BazEvent,
+	BazEvent,
 }
 
 describe('EventDispatcher', () => {

packages/lib/callbackUrlUtils.ts

@@ -19,14 +19,14 @@ export function getTagCallbackUrl(tagId: string) {
 }
 
 export const enum CallbackUrlCommand {
-    OpenNote = 'openNote',
+	OpenNote = 'openNote',
-    OpenFolder = 'openFolder',
+	OpenFolder = 'openFolder',
-    OpenTag = 'openTag',
+	OpenTag = 'openTag',
 }
 
 export interface CallbackUrlInfo {
-    command: CallbackUrlCommand;
+	command: CallbackUrlCommand;
-    params: Record<string, string>;
+	params: Record<string, string>;
 }
 
 export function parseCallbackUrl(s: string): CallbackUrlInfo {

packages/lib/hooks/useElementSize.ts

@@ -3,8 +3,8 @@ const { useCallback, useEffect, useState } = shim.react();
 import useEventListener from './useEventListener';
 
 interface Size {
-  width: number;
+	width: number;
-  height: number;
+	height: number;
 }
 
 function useElementSize(elementRef: any): Size {

packages/lib/migrations/42.ts

@@ -2,7 +2,7 @@ import Setting from '../models/Setting';
 import checkProviderIsSupported from '../utils/webDAVUtils';
 
 interface Script {
-  exec: ()=> Promise<void>;
+	exec: ()=> Promise<void>;
 }
 
 const script: Script = <Script>{};

packages/lib/services/plugins/PluginService.ts

@@ -38,7 +38,7 @@ export interface DefaultPluginSettings {
 }
 
 export interface DefaultPluginsInfo {
-    [pluginId: string]: DefaultPluginSettings;
+	[pluginId: string]: DefaultPluginSettings;
 }
 
 export interface PluginSetting {

packages/lib/services/searchengine/queryBuilder.ts

@@ -9,8 +9,8 @@ interface Term {
 }
 
 enum Relation {
-    OR = 'OR',
+	OR = 'OR',
-    AND = 'AND',
+	AND = 'AND',
 }
 
 enum Operation {

packages/lib/versionInfo.ts

@@ -4,8 +4,8 @@ import { reg } from './registry';
 import { Plugins } from './services/plugins/PluginService';
 
 interface PluginList {
-  completeList: string;
+	completeList: string;
-  summary: string;
+	summary: string;
 }
 
 function getPluginLists(plugins: Plugins): PluginList {

packages/pdf-viewer/hooks/useVisibleOnSelect.ts

@@ -2,9 +2,9 @@ import { useRef, useEffect, MutableRefObject } from 'react';
 
 export interface VisibleOnSelect {
 	container: MutableRefObject<HTMLElement>;
-    wrapperRef: MutableRefObject<HTMLElement>;
+	wrapperRef: MutableRefObject<HTMLElement>;
 	isVisible: boolean;
-    isSelected: boolean;
+	isSelected: boolean;
 }
 
 // Used in thumbnail view, to scroll to the newly selected page.

packages/pdf-viewer/types.ts

@@ -5,9 +5,9 @@ export interface ScaledSize {
 }
 
 export interface IconButtonProps {
-    onClick: ()=> void;
+	onClick: ()=> void;
-    size?: number;
+	size?: number;
-    color?: string;
+	color?: string;
 }
 
 export interface RenderRequest {

packages/pdf-viewer/ui/IconButtons.tsx

@@ -24,12 +24,12 @@ const ButtonElement = styled.button<{ hoverColor?: string; size?: number; color?
 `;
 
 interface BaseButtonProps {
-    icon: IconDefinition;
+	icon: IconDefinition;
-    onClick: ()=> void;
+	onClick: ()=> void;
-    name: string;
+	name: string;
-    size: number;
+	size: number;
-    color: string;
+	color: string;
-    hoverColor?: string;
+	hoverColor?: string;
 }
 
 function BaseButton({ onClick, icon, name, size, color, hoverColor }: BaseButtonProps) {

packages/react-native-saf-x/src/index.ts

@@ -29,66 +29,66 @@ export type Encoding = 'utf8' | 'base64' | 'ascii';
 
 /** Native interface of the module */
 interface SafxInterface {
-  openDocumentTree(persist: boolean): Promise<DocumentFileDetail | null>;
+	openDocumentTree(persist: boolean): Promise<DocumentFileDetail | null>;
-  openDocument(
+	openDocument(
-    persist: boolean,
+		persist: boolean,
-    multiple: boolean,
+		multiple: boolean,
-  ): Promise<DocumentFileDetail[] | null>;
+	): Promise<DocumentFileDetail[] | null>;
-  createDocument(
+	createDocument(
-    data: string,
+		data: string,
-    encoding?: string,
+		encoding?: string,
-    initialName?: string,
+		initialName?: string,
-    mimeType?: string,
+		mimeType?: string,
-  ): Promise<DocumentFileDetail | null>;
+	): Promise<DocumentFileDetail | null>;
-  hasPermission(uriString: string): Promise<boolean>;
+	hasPermission(uriString: string): Promise<boolean>;
-  exists(uriString: string): Promise<boolean>;
+	exists(uriString: string): Promise<boolean>;
-  readFile(uriString: string, encoding?: Encoding): Promise<string>;
+	readFile(uriString: string, encoding?: Encoding): Promise<string>;
-  writeFile(
+	writeFile(
-    uriString: string,
+		uriString: string,
-    data: string,
+		data: string,
-    encoding?: Encoding,
+		encoding?: Encoding,
-    mimeType?: string,
+		mimeType?: string,
-    append?: boolean,
+		append?: boolean,
-  ): Promise<void>;
+	): Promise<void>;
-  createFile(uriString: string, mimeType?: string): Promise<DocumentFileDetail>;
+	createFile(uriString: string, mimeType?: string): Promise<DocumentFileDetail>;
-  unlink(uriString: string): Promise<boolean>;
+	unlink(uriString: string): Promise<boolean>;
-  mkdir(uriString: string): Promise<DocumentFileDetail>;
+	mkdir(uriString: string): Promise<DocumentFileDetail>;
-  rename(uriString: string, newName: string): Promise<DocumentFileDetail>;
+	rename(uriString: string, newName: string): Promise<DocumentFileDetail>;
-  getPersistedUriPermissions(): Promise<string[]>;
+	getPersistedUriPermissions(): Promise<string[]>;
-  releasePersistableUriPermission(uriString: string): Promise<void>;
+	releasePersistableUriPermission(uriString: string): Promise<void>;
-  listFiles(uriString: string): Promise<DocumentFileDetail[]>;
+	listFiles(uriString: string): Promise<DocumentFileDetail[]>;
-  stat(uriString: string): Promise<DocumentFileDetail>;
+	stat(uriString: string): Promise<DocumentFileDetail>;
-  transferFile(
+	transferFile(
-    srcUri: string,
+		srcUri: string,
-    destUri: string,
+		destUri: string,
-    replaceIfDestExist: boolean,
+		replaceIfDestExist: boolean,
-    copy: boolean,
+		copy: boolean,
-  ): Promise<DocumentFileDetail | null>;
+	): Promise<DocumentFileDetail | null>;
 }
 
 export type DocumentFileDetail = {
-  uri: string;
+	uri: string;
-  name: string;
+	name: string;
-  type: 'directory' | 'file';
+	type: 'directory' | 'file';
-  lastModified: number;
+	lastModified: number;
-  mime: string;
+	mime: string;
-  size: number;
+	size: number;
 };
 
 export type FileOperationOptions = {
-  /** Defaults to `'utf8'` */
+	/** Defaults to `'utf8'` */
-  encoding?: Encoding;
+	encoding?: Encoding;
 
-  /** Append data to the file. If not set file content will be overwritten. */
+	/** Append data to the file. If not set file content will be overwritten. */
-  append?: boolean;
+	append?: boolean;
 
-  /** mime type of the file being saved. Defaults to '\*\/\*' */
+	/** mime type of the file being saved. Defaults to '\*\/\*' */
-  mimeType?: string;
+	mimeType?: string;
 };
 
 export type CreateDocumentOptions = FileOperationOptions & {
-  /** initial display name when opening file picker */
+	/** initial display name when opening file picker */
-  initialName?: string;
+	initialName?: string;
 };
 
 // Open the Document Picker to select a folder. Read/Write Permission will be granted to the selected folder.
@@ -98,10 +98,10 @@ export function openDocumentTree(persist: boolean) {
 }
 
 export type OpenDocumentOptions = {
-  /** should the permission of returned document(s) be persisted ? */
+	/** should the permission of returned document(s) be persisted ? */
-  persist?: boolean;
+	persist?: boolean;
-  /** should the file picker allow multiple documents ? */
+	/** should the file picker allow multiple documents ? */
-  multiple?: boolean;
+	multiple?: boolean;
 };
 
 // Open the Document Picker to select a file.
@@ -206,7 +206,7 @@ export function stat(uriString: string) {
 }
 
 type FileTransferOptions = {
-  replaceIfDestinationExists?: boolean;
+	replaceIfDestinationExists?: boolean;
 };
 
 // Copy file from source uri to destination uri.

packages/server/src/db.ts

@@ -18,9 +18,9 @@ require('pg').types.setTypeParser(20, (val: any) => {
 // Also need this to get integers for count() queries.
 // https://knexjs.org/#Builder-count
 declare module 'knex/types/result' {
-    interface Registry {
+	interface Registry {
-        Count: number;
+		Count: number;
-    }
+	}
 }
 
 const logger = Logger.create('db');

packages/server/src/services/database/types.ts

@@ -12,7 +12,7 @@ export enum NotificationLevel {
 }
 
 export enum ItemType {
-    Item = 1,
+	Item = 1,
 	UserItem = 2,
 	User,
 }

packages/tools/bundleDefaultPlugins.ts

@@ -6,7 +6,7 @@ import { execCommand } from '@joplin/utils';
 const fetch = require('node-fetch');
 
 interface PluginAndVersion {
-   [pluginId: string]: string;
+	[pluginId: string]: string;
 }
 
 interface PluginIdAndName {

yarn.lock

@@ -1385,7 +1385,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.20.7, @babel/helper-create-class-features-plugin@npm:^7.21.0":
+"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.20.7, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-create-class-features-plugin@npm:7.22.5"
   dependencies:
@@ -1985,6 +1985,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-jsx@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-syntax-jsx@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 8829d30c2617ab31393d99cec2978e41f014f4ac6f01a1cecf4c4dd8320c3ec12fdc3ce121126b2d8d32f6887e99ca1a0bad53dedb1e6ad165640b92b24980ce
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4, @babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3":
   version: 7.10.4
   resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4"
@@ -2084,6 +2095,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-typescript@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-syntax-typescript@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 8ab7718fbb026d64da93681a57797d60326097fd7cb930380c8bffd9eb101689e90142c760a14b51e8e69c88a73ba3da956cb4520a3b0c65743aee5c71ef360a
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-arrow-functions@npm:^7.0.0, @babel/plugin-transform-arrow-functions@npm:^7.18.6":
   version: 7.22.5
   resolution: "@babel/plugin-transform-arrow-functions@npm:7.22.5"
@@ -2277,7 +2299,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.0.0, @babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.19.6":
+"@babel/plugin-transform-modules-commonjs@npm:^7.0.0, @babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.19.6, @babel/plugin-transform-modules-commonjs@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.22.5"
   dependencies:
@@ -2339,6 +2361,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-object-assign@npm:^7.16.7":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-object-assign@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 5b672d72c7b12973e5e5881c3e69ab02474c44add224a9972b9450f859e713b2065fa18b88797b1393ad72cb952c0b14d80fa36960a17d6b558f24ee5cde219c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-object-super@npm:^7.0.0, @babel/plugin-transform-object-super@npm:^7.18.6":
   version: 7.22.5
   resolution: "@babel/plugin-transform-object-super@npm:7.22.5"
@@ -2542,6 +2575,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-typescript@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-typescript@npm:7.22.5"
+  dependencies:
+    "@babel/helper-annotate-as-pure": ^7.22.5
+    "@babel/helper-create-class-features-plugin": ^7.22.5
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/plugin-syntax-typescript": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: d12f1ca1ef1f2a54432eb044d2999705d1205ebe211c2a7f05b12e8eb2d2a461fd7657b5486b2f2f1efe7c0c0dc8e80725b767073d40fe4ae059a7af057b05e4
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-unicode-escapes@npm:^7.18.10":
   version: 7.22.5
   resolution: "@babel/plugin-transform-unicode-escapes@npm:7.22.5"
@@ -2691,6 +2738,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/preset-typescript@npm:^7.16.7":
+  version: 7.22.5
+  resolution: "@babel/preset-typescript@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-validator-option": ^7.22.5
+    "@babel/plugin-syntax-jsx": ^7.22.5
+    "@babel/plugin-transform-modules-commonjs": ^7.22.5
+    "@babel/plugin-transform-typescript": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 7be1670cb4404797d3a473bd72d66eb2b3e0f2f8a672a5e40bdb0812cc66085ec84bcd7b896709764cabf042fdc6b7f2d4755ac7cce10515eb596ff61dab5154
+  languageName: node
+  linkType: hard
+
 "@babel/register@npm:^7.13.16":
   version: 7.18.9
   resolution: "@babel/register@npm:7.18.9"
@@ -3386,6 +3448,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@egjs/hammerjs@npm:^2.0.17":
+  version: 2.0.17
+  resolution: "@egjs/hammerjs@npm:2.0.17"
+  dependencies:
+    "@types/hammerjs": ^2.0.36
+  checksum: 8945137cec5837edd70af3f2e0ea621543eb0aa3b667e6269ec6485350f4d120c2434b37c7c30b1cf42a65275dd61c1f24626749c616696d3956ac0c008c4766
+  languageName: node
+  linkType: hard
+
 "@electron/get@npm:^1.14.1":
   version: 1.14.1
   resolution: "@electron/get@npm:1.14.1"
@@ -4402,13 +4473,16 @@ __metadata:
     react-native: 0.71.10
     react-native-action-button: 2.8.5
     react-native-camera: 4.2.1
+    react-native-device-info: 10.6.0
     react-native-dialogbox: 0.6.10
     react-native-document-picker: 8.2.1
+    react-native-drawer-layout: 3.2.0
     react-native-dropdownalert: 4.5.1
     react-native-exit-app: 1.1.0
     react-native-file-viewer: 2.1.5
     react-native-fingerprint-scanner: 6.0.0
     react-native-fs: 2.20.0
+    react-native-gesture-handler: 2.9.0
     react-native-get-random-values: 1.9.0
     react-native-image-picker: 5.4.2
     react-native-image-resizer: 1.4.5
@@ -4417,11 +4491,11 @@ __metadata:
     react-native-paper: 5.8.0
     react-native-popup-menu: 0.16.1
     react-native-quick-actions: 0.3.13
+    react-native-reanimated: 3.1.0
     react-native-rsa-native: 2.0.5
     react-native-safe-area-context: 4.5.3
     react-native-securerandom: 1.0.1
     react-native-share: 8.2.2
-    react-native-side-menu-updated: 1.3.2
     react-native-sqlite-storage: 6.0.1
     react-native-url-polyfill: 1.3.0
     react-native-vector-icons: 9.2.0
@@ -7369,6 +7443,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hammerjs@npm:^2.0.36":
+  version: 2.0.41
+  resolution: "@types/hammerjs@npm:2.0.41"
+  checksum: d16fbd688fc9b18cc270abe8dea8d4c50ef7bd8375e593d92c233d299387933a6b003c8db69819344833052458bc5f9ef1b472001277a49f095928d184356006
+  languageName: node
+  linkType: hard
+
 "@types/hoist-non-react-statics@npm:*, @types/hoist-non-react-statics@npm:^3.3.0, @types/hoist-non-react-statics@npm:^3.3.1":
   version: 3.3.1
   resolution: "@types/hoist-non-react-statics@npm:3.3.1"
@@ -27906,6 +27987,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-device-info@npm:10.6.0":
+  version: 10.6.0
+  resolution: "react-native-device-info@npm:10.6.0"
+  peerDependencies:
+    react-native: "*"
+  checksum: 7a7cc438844552aef687b4a5b8efd0cd0a2959e0a3b771febfbe0b6a9ca8ff05a563e2912b30b83523bd3d5143d6616ca8fac0476abf01936a726e1578211ebb
+  languageName: node
+  linkType: hard
+
 "react-native-dialogbox@npm:0.6.10":
   version: 0.6.10
   resolution: "react-native-dialogbox@npm:0.6.10"
@@ -27934,6 +28024,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-drawer-layout@npm:3.2.0":
+  version: 3.2.0
+  resolution: "react-native-drawer-layout@npm:3.2.0"
+  dependencies:
+    use-latest-callback: ^0.1.5
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+    react-native-gesture-handler: ">= 1.0.0"
+    react-native-reanimated: ">= 1.0.0"
+  checksum: 67237e650e1245297ec08b9cf90c74aed25dfefbf66c972dae6be5913df78d98f04c5e90e98e396e8ea2b97eca8df0db1872a7608509e29f86491b5d3db36b3a
+  languageName: node
+  linkType: hard
+
 "react-native-dropdownalert@npm:4.5.1":
   version: 4.5.1
   resolution: "react-native-dropdownalert@npm:4.5.1"
@@ -27984,6 +28088,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-gesture-handler@npm:2.9.0":
+  version: 2.9.0
+  resolution: "react-native-gesture-handler@npm:2.9.0"
+  dependencies:
+    "@egjs/hammerjs": ^2.0.17
+    hoist-non-react-statics: ^3.3.0
+    invariant: ^2.2.4
+    lodash: ^4.17.21
+    prop-types: ^15.7.2
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 6bfdd9d23486193424dcfb0073dd821a216c2783dde746d73a3441e920602343f09efa10261c6f09fcbcb645d029a95305c86f61997053c01ad89751c8c6d236
+  languageName: node
+  linkType: hard
+
 "react-native-get-random-values@npm:1.9.0":
   version: 1.9.0
   resolution: "react-native-get-random-values@npm:1.9.0"
@@ -28084,6 +28204,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-reanimated@npm:3.1.0":
+  version: 3.1.0
+  resolution: "react-native-reanimated@npm:3.1.0"
+  dependencies:
+    "@babel/plugin-transform-object-assign": ^7.16.7
+    "@babel/preset-typescript": ^7.16.7
+    convert-source-map: ^2.0.0
+    invariant: ^2.2.4
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+    "@babel/plugin-proposal-nullish-coalescing-operator": ^7.0.0-0
+    "@babel/plugin-proposal-optional-chaining": ^7.0.0-0
+    "@babel/plugin-transform-arrow-functions": ^7.0.0-0
+    "@babel/plugin-transform-shorthand-properties": ^7.0.0-0
+    "@babel/plugin-transform-template-literals": ^7.0.0-0
+    react: "*"
+    react-native: "*"
+  checksum: 28279642056c7b214649ff14d3c9f1e914c9dd3dd74afc734fc10d1af088a2c3b0e187751e2713d54fc0a9916c394068b29aec51e754b51625a4179f10e38bcd
+  languageName: node
+  linkType: hard
+
 "react-native-rsa-native@npm:2.0.5":
   version: 2.0.5
   resolution: "react-native-rsa-native@npm:2.0.5"
@@ -28119,15 +28260,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-side-menu-updated@npm:1.3.2":
-  version: 1.3.2
-  resolution: "react-native-side-menu-updated@npm:1.3.2"
-  dependencies:
-    prop-types: ^15.5.10
-  checksum: 5d7ae7d2b372c80d9f7a3472f945daa6c11b43f00193ebec92fdb40ee853e86f522686736aa6a510a4fb09479c8eb7e4f14b53ad117d7e23749cd58c3c9d6cb7
-  languageName: node
-  linkType: hard
-
 "react-native-sqlite-storage@npm:6.0.1":
   version: 6.0.1
   resolution: "react-native-sqlite-storage@npm:6.0.1"