desktop: fix linux tag opacity display issues

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.eslintignore

@@ -66,6 +66,7 @@ packages/lib/welcomeAssets.js
 packages/plugins/**/api
 packages/plugins/**/dist
 packages/server/dist/
+packages/utils/dist/
 packages/tools/node_modules
 packages/tools/PortableAppsLauncher
 packages/turndown-plugin-gfm/
@@ -835,6 +836,7 @@ packages/renderer/index.js
 packages/renderer/noteStyle.js
 packages/renderer/pathUtils.js
 packages/renderer/utils.js
+packages/tools/build-release-stats.js
 packages/tools/buildServerDocker.js
 packages/tools/buildServerDocker.test.js
 packages/tools/bundleDefaultPlugins.js
@@ -845,6 +847,7 @@ packages/tools/convertThemesToCss.js
 packages/tools/generate-database-types.js
 packages/tools/generate-images.js
 packages/tools/git-changelog.js
+packages/tools/git-changelog.test.js
 packages/tools/licenseChecker.js
 packages/tools/release-android.js
 packages/tools/release-cli.js
@@ -860,6 +863,7 @@ packages/tools/update-readme-download.js
 packages/tools/update-readme-sponsors.js
 packages/tools/updateMarkdownDoc.js
 packages/tools/utils/discourse.js
+packages/tools/utils/loadSponsors.js
 packages/tools/utils/translation.js
 packages/tools/website/build.js
 packages/tools/website/buildTranslations.js

.eslintrc.js

@@ -91,6 +91,10 @@ module.exports = {
 		// Disable because of this: https://github.com/facebook/react/issues/16265
 		// "react-hooks/exhaustive-deps": "warn",
 
+		'jest/require-top-level-describe': ['error', { 'maxNumberOfTopLevelDescribes': 1 }],
+		'jest/no-identical-title': ['error'],
+		'jest/prefer-lowercase-title': ['error', { 'ignoreTopLevelDescribe': true }],
+
 		'promise/prefer-await-to-then': 'error',
 		'no-unneeded-ternary': 'error',
 
@@ -155,6 +159,7 @@ module.exports = {
 		// 'react-hooks',
 		'import',
 		'promise',
+		'jest',
 	],
 	'overrides': [
 		{
@@ -175,9 +180,7 @@ module.exports = {
 				'project': './tsconfig.eslint.json',
 			},
 			'rules': {
-				// Warn only because it would make it difficult to convert JS classes to TypeScript, unless we
-				// make everything public which is not great. New code however should specify member accessibility.
-				'@typescript-eslint/explicit-member-accessibility': ['warn'],
+				'@typescript-eslint/explicit-member-accessibility': ['error'],
 				'@typescript-eslint/type-annotation-spacing': ['error', { 'before': false, 'after': true }],
 				'@typescript-eslint/no-inferrable-types': ['error', { 'ignoreParameters': true, 'ignoreProperties': true }],
 				'@typescript-eslint/comma-dangle': ['error', {

.github/workflows/build-android.yml

@@ -6,6 +6,7 @@ on: [push, pull_request]
 
 jobs:
   pre_job:
+    if: github.repository == 'laurent22/joplin'
     runs-on: ubuntu-latest
     outputs:
       should_skip: ${{ steps.skip_check.outputs.should_skip }}
@@ -16,6 +17,7 @@ jobs:
           concurrent_skipping: 'same_content_newer'
 
   BuildAndroidDebug:
+    if: github.repository == 'laurent22/joplin'
     needs: pre_job
     if: needs.pre_job.outputs.should_skip != 'true'
     runs-on: ubuntu-latest

.github/workflows/cla.yml

@@ -7,12 +7,13 @@ on:
 
 jobs:
   CLAAssistant:
+    if: github.repository == 'laurent22/joplin'
     runs-on: ubuntu-latest
     steps:
       - name: "CLA Assistant"
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
         # Beta Release
-        uses: contributor-assistant/github-action@v2.2.1
+        uses: contributor-assistant/github-action@v2.3.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           # the below token should have repo scope and must be manually added by you in the repository's secret

.github/workflows/close-stale-issues.yml

@@ -6,6 +6,7 @@ permissions:
   issues: write
 jobs:
   ProcessStaleIssues:
+    if: github.repository == 'laurent22/joplin'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/stale@v4

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

@@ -2,6 +2,7 @@ name: Joplin Continuous Integration
 on: [push, pull_request]
 jobs:
   pre_job:
+    if: github.repository == 'laurent22/joplin'
     runs-on: ubuntu-latest
     outputs:
       should_skip: ${{ steps.skip_check.outputs.should_skip }}
@@ -14,7 +15,7 @@ jobs:
   Main:
     needs: pre_job
     # We always process server or desktop release tags, because they also publish the release
-    if: needs.pre_job.outputs.should_skip != 'true' || startsWith(github.ref, 'refs/tags/server-v') || startsWith(github.ref, 'refs/tags/v')
+    if: github.repository == 'laurent22/joplin' && (needs.pre_job.outputs.should_skip != 'true' || startsWith(github.ref, 'refs/tags/server-v') || startsWith(github.ref, 'refs/tags/v'))
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -129,7 +130,7 @@ jobs:
 
   ServerDockerImage:
     needs: pre_job
-    if: needs.pre_job.outputs.should_skip != 'true'
+    if: github.repository == 'laurent22/joplin' && needs.pre_job.outputs.should_skip != 'true'
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:

.gitignore

@@ -823,6 +823,7 @@ packages/renderer/index.js
 packages/renderer/noteStyle.js
 packages/renderer/pathUtils.js
 packages/renderer/utils.js
+packages/tools/build-release-stats.js
 packages/tools/buildServerDocker.js
 packages/tools/buildServerDocker.test.js
 packages/tools/bundleDefaultPlugins.js
@@ -833,6 +834,7 @@ packages/tools/convertThemesToCss.js
 packages/tools/generate-database-types.js
 packages/tools/generate-images.js
 packages/tools/git-changelog.js
+packages/tools/git-changelog.test.js
 packages/tools/licenseChecker.js
 packages/tools/release-android.js
 packages/tools/release-cli.js
@@ -848,6 +850,7 @@ packages/tools/update-readme-download.js
 packages/tools/update-readme-sponsors.js
 packages/tools/updateMarkdownDoc.js
 packages/tools/utils/discourse.js
+packages/tools/utils/loadSponsors.js
 packages/tools/utils/translation.js
 packages/tools/website/build.js
 packages/tools/website/buildTranslations.js

.npmpackagejsonlintrc.json

@@ -14,7 +14,8 @@
 					"@joplin/turndown-plugin-gfm",
 					"@joplin/tools",
 					"@joplin/react-native-saf-x",
-					"@joplin/react-native-alarm-notification"
+					"@joplin/react-native-alarm-notification",
+					"@joplin/utils"
 				]
 		  	}
 		]

Assets/WebsiteAssets/css/site.css

@@ -780,6 +780,7 @@ footer .bottom-links-row p {
 
 	#menu-mobile .social-links .social-link-mastodon,
 	#menu-mobile .social-links .social-link-reddit,
+	#menu-mobile .social-links .social-link-linkedin,
 	#menu-mobile .social-links .social-link-patreon {
 		display: none;
 	}
@@ -947,6 +948,41 @@ footer .bottom-links-row p {
 	}
 }
 
+/*****************************************************************
+ MORE NARROW VIEW
+ eg for Galaxy S9
+*****************************************************************/
+
+@media (max-width: 580px) {
+
+	#nav-section .plans-button {
+		display: none;
+	}
+
+}
+
+/*****************************************************************
+ MORE NARROW VIEW
+ eg for Galaxy S9
+*****************************************************************/
+
+@media (max-width: 400px) {
+
+	#nav-section .navbar-mobile-content a.sponsor-button .sponsor-button-label {
+		font-size: 12px;
+	}
+
+	#nav-section .navbar-mobile-content a.sponsor-button {
+		padding: 2px 6px;
+		margin-right: 0.2em;
+	}
+
+	#nav-section a {
+		margin-left: 5px;
+	}
+
+}
+
 /*****************************************************************
  VERY NARROW VIEW
  eg for Galaxy Fold
@@ -968,6 +1004,15 @@ footer .bottom-links-row p {
 		margin-left: 4px;
 	}
 
+	div.navbar-mobile-content a.sponsor-button {
+		margin-right: 10px;
+	}
+
+	#nav-section .button-link {
+		padding-left: 0;
+		padding-right: 0;
+	}
+
 }
 
 /*****************************************************************

Assets/WebsiteAssets/rss.xml

@@ -1,4 +1,7 @@
-<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Joplin]]></title><description><![CDATA[Joplin, the open source note-taking application]]></description><link>https://joplinapp.org</link><generator>RSS for Node</generator><lastBuildDate>Mon, 16 Jan 2023 00:00:00 GMT</lastBuildDate><atom:link href="https://joplinapp.org/rss.xml" rel="self" type="application/rss+xml"/><pubDate>Mon, 16 Jan 2023 00:00:00 GMT</pubDate><item><title><![CDATA[Introducing the "GitHub Actions Raw Log Viewer" extension for Chrome]]></title><description><![CDATA[<p>If you've ever used GitHub Actions, you will find that they provide by default a nice coloured output for the log. It looks good and it's even interactive! (You can click to collapse/expand blocks of text) But unfortunately it doesn't scale to large workflows, like we have for Joplin - the log can freeze and it will take forever to search for something. Indeed searching is done in &quot;real time&quot;... which mostly means it will freeze for a minute or two for each letter you type in the search box. Not great.</p>
+<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Joplin]]></title><description><![CDATA[Joplin, the open source note-taking application]]></description><link>https://joplinapp.org</link><generator>RSS for Node</generator><lastBuildDate>Thu, 02 Mar 2023 00:00:00 GMT</lastBuildDate><atom:link href="https://joplinapp.org/rss.xml" rel="self" type="application/rss+xml"/><pubDate>Thu, 02 Mar 2023 00:00:00 GMT</pubDate><item><title><![CDATA[Joplin will participate in JdLL 2023!]]></title><description><![CDATA[<p>On 1 and 2 April 2023, we will have a stand for Joplin at the <a href="https://www.jdll.org/">Journées du Logiciel Libre</a> in Lyon, France. The JdLL has been taking place in Lyon for 24 years and is a popular open source conference in France. We had a stand in 2020 and 2021 but that was cancelled due to Covid, so this year is a first for Joplin!</p>
+<p>Admission is free, so don't hesitate to come and meet us, exchange ideas and learn more about Joplin!</p>
+<p><img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/news/20230202-jdll.jpg" alt="Joplin at JdLL 2023"></p>
+]]></description><link>https://joplinapp.org/news/20230302-jdll-2023/</link><guid isPermaLink="false">20230302-jdll-2023</guid><pubDate>Thu, 02 Mar 2023 00:00:00 GMT</pubDate><twitter-text></twitter-text></item><item><title><![CDATA[Introducing the "GitHub Actions Raw Log Viewer" extension for Chrome]]></title><description><![CDATA[<p>If you've ever used GitHub Actions, you will find that they provide by default a nice coloured output for the log. It looks good and it's even interactive! (You can click to collapse/expand blocks of text) But unfortunately it doesn't scale to large workflows, like we have for Joplin - the log can freeze and it will take forever to search for something. Indeed searching is done in &quot;real time&quot;... which mostly means it will freeze for a minute or two for each letter you type in the search box. Not great.</p>
 <p>Thankfully GitHub provides an alternative access: the raw logs. This is much better because they will open as plain text, without any styling or JS magic, which means you can use the browser native search and it will be fast.</p>
 <p>But now the problem is that raw logs look like this:</p>
 <p><img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/news/20230116-ga-raw-log.png" alt="Raw log without extension"></p>
@@ -294,9 +297,4 @@
 <p>This release also includes about 30 various bug fixes and improvements.</p>
 <p>A notable one is a fix for GotoAnything, which recently wasn't working on first try.</p>
 <p>The plugin screen has also been improved so that search works even when GitHub is down or blocked, as it is in China in particular.</p>
-]]></description><link>https://joplinapp.org/news/20210929-144036/</link><guid isPermaLink="false">20210929-144036</guid><pubDate>Wed, 29 Sep 2021 14:40:36 GMT</pubDate><twitter-text></twitter-text></item><item><title><![CDATA[Introducing recommended plugins in the next Joplin version]]></title><description><![CDATA[<p>A common request from new users is how to know which plugin is safe to install or not. In fact probably all of them are safe but as a new user that's not necessarily easy to know. So to help with this, the next version of Joplin will support recommended plugins - those will be plugins that meet our standards of quality and performance, and they will be indicated by a small crown tag inside the plugin box. Recommended plugins will also appear on top when searching.</p>
-<p><img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/news/20210901-113415_0.png" alt=""></p>
-<p>For now, since we don't have a review process, the recommended plugins are those developed by the Joplin team and frequent contributors, because we know those are safe to use.</p>
-<p>Later we might have a review process and add more recommended plugins. That being said, in the meantime even if a plugin is not marked as recommended, there's a good chance it is still safe and have good performance too. Often you can search for it on the forum and if it's active with many users commenting, you're most likely good to go.</p>
-<p>But if there's any doubt, the recommended tag is a good way to be sure.</p>
-]]></description><link>https://joplinapp.org/news/20210901-113415/</link><guid isPermaLink="false">20210901-113415</guid><pubDate>Wed, 01 Sep 2021 11:34:15 GMT</pubDate><twitter-text></twitter-text></item></channel></rss>
+]]></description><link>https://joplinapp.org/news/20210929-144036/</link><guid isPermaLink="false">20210929-144036</guid><pubDate>Wed, 29 Sep 2021 14:40:36 GMT</pubDate><twitter-text></twitter-text></item></channel></rss>

Assets/WebsiteAssets/templates/partials/navbar.mustache

@@ -24,7 +24,8 @@
 			</div>
 			<div class="col-9 text-right d-block d-md-none navbar-mobile-content">
 				{{> twitterLink}}
-				<a href="{{baseUrl}}/cn/" class="fw500">中文</a>
+				<a href="{{baseUrl}}/cn/" class="fw500 chinese-page-link">中文</a>
+				{{> joplinCloudButton}}
 				{{> supportButton}}
 
 				<span class="pointer"

Assets/WebsiteAssets/templates/partials/socialFeeds.mustache

@@ -4,6 +4,7 @@
 		<a class="social-link-mastodon" href="https://mastodon.social/@joplinapp" title="Joplin Mastodon feed"><i class="fab fa-mastodon"></i></a>
 		<a class="social-link-patreon" href="https://www.patreon.com/joplin" title="Joplin Patreon"><i class="fab fa-patreon"></i></a>
 		<a class="social-link-discord" href="https://discord.gg/VSj7AFHvpq" title="Joplin Discord chat"><i class="fab fa-discord"></i></a>
+		<a class="social-link-linkedin" href="https://www.linkedin.com/company/joplin" title="Joplin LinkedIn Feed"><i class="fab fa-linkedin"></i></a>
 		<a class="social-link-reddit" href="https://www.reddit.com/r/joplinapp/" title="Joplin Subreddit"><i class="fab fa-reddit"></i></a>
 		<a class="social-link-github" href="https://github.com/laurent22/joplin/" title="Joplin GitHub repository"><i class="fab fa-github"></i></a>
 	</div>

Assets/WebsiteAssets/templates/partials/twitterLink.mustache

@@ -1 +1 @@
-<a href="https://twitter.com/joplinapp" title="Joplin Twitter feed" class="fw500"><i class="fab fa-twitter"></i></a>
+<a href="https://twitter.com/joplinapp" title="Joplin Twitter feed" class="fw500 twitter-link"><i class="fab fa-twitter"></i></a>

Dockerfile.server

@@ -30,6 +30,7 @@ COPY packages/fork-uslug ./packages/fork-uslug
 COPY packages/htmlpack ./packages/htmlpack
 COPY packages/renderer ./packages/renderer
 COPY packages/tools ./packages/tools
+COPY packages/utils ./packages/utils
 COPY packages/lib ./packages/lib
 COPY packages/server ./packages/server
 

README.md

@@ -72,14 +72,11 @@ A community maintained list of these distributions can be found here: [Unofficia
 <!-- SPONSORS-GITHUB -->
 |       |       |       |       |
 | :---: | :---: | :---: | :---: |
-| <img width="50" src="https://avatars2.githubusercontent.com/u/215668?s=96&v=4"/></br>[avanderberg](https://github.com/avanderberg) | <img width="50" src="https://avatars2.githubusercontent.com/u/3061769?s=96&v=4"/></br>[c-nagy](https://github.com/c-nagy) | <img width="50" src="https://avatars2.githubusercontent.com/u/70780798?s=96&v=4"/></br>[cabottech](https://github.com/cabottech) | <img width="50" src="https://avatars2.githubusercontent.com/u/67130?s=96&v=4"/></br>[chr15m](https://github.com/chr15m) |
-| <img width="50" src="https://avatars2.githubusercontent.com/u/4862947?s=96&v=4"/></br>[chrootlogin](https://github.com/chrootlogin) | <img width="50" src="https://avatars2.githubusercontent.com/u/82579431?s=96&v=4"/></br>[clmntsl](https://github.com/clmntsl) | <img width="50" src="https://avatars2.githubusercontent.com/u/808091?s=96&v=4"/></br>[cuongtransc](https://github.com/cuongtransc) | <img width="50" src="https://avatars2.githubusercontent.com/u/1307332?s=96&v=4"/></br>[dbrandonjohnson](https://github.com/dbrandonjohnson) |
-| <img width="50" src="https://avatars2.githubusercontent.com/u/1439535?s=96&v=4"/></br>[fbloise](https://github.com/fbloise) | <img width="50" src="https://avatars2.githubusercontent.com/u/49439044?s=96&v=4"/></br>[fourstepper](https://github.com/fourstepper) | <img width="50" src="https://avatars2.githubusercontent.com/u/38898566?s=96&v=4"/></br>[h4sh5](https://github.com/h4sh5) | <img width="50" src="https://avatars2.githubusercontent.com/u/3266447?s=96&v=4"/></br>[iamwillbar](https://github.com/iamwillbar) |
-| <img width="50" src="https://avatars2.githubusercontent.com/u/37297218?s=96&v=4"/></br>[Jesssullivan](https://github.com/Jesssullivan) | <img width="50" src="https://avatars2.githubusercontent.com/u/1310474?s=96&v=4"/></br>[jknowles](https://github.com/jknowles) | <img width="50" src="https://avatars2.githubusercontent.com/u/1248504?s=96&v=4"/></br>[joesfer](https://github.com/joesfer) | <img width="50" src="https://avatars2.githubusercontent.com/u/5588131?s=96&v=4"/></br>[kianenigma](https://github.com/kianenigma) |
-| <img width="50" src="https://avatars2.githubusercontent.com/u/24908652?s=96&v=4"/></br>[konishi-t](https://github.com/konishi-t) | <img width="50" src="https://avatars2.githubusercontent.com/u/42319182?s=96&v=4"/></br>[marcdw1289](https://github.com/marcdw1289) | <img width="50" src="https://avatars2.githubusercontent.com/u/1788010?s=96&v=4"/></br>[maxtruxa](https://github.com/maxtruxa) | <img width="50" src="https://avatars2.githubusercontent.com/u/29300939?s=96&v=4"/></br>[mcejp](https://github.com/mcejp) |
-| <img width="50" src="https://avatars2.githubusercontent.com/u/1168659?s=96&v=4"/></br>[nicholashead](https://github.com/nicholashead) | <img width="50" src="https://avatars2.githubusercontent.com/u/5782817?s=96&v=4"/></br>[piccobit](https://github.com/piccobit) | <img width="50" src="https://avatars2.githubusercontent.com/u/77214738?s=96&v=4"/></br>[Polymathic-Company](https://github.com/Polymathic-Company) | <img width="50" src="https://avatars2.githubusercontent.com/u/47742?s=96&v=4"/></br>[ravenscroftj](https://github.com/ravenscroftj) |
-| <img width="50" src="https://avatars2.githubusercontent.com/u/327998?s=96&v=4"/></br>[sif](https://github.com/sif) | <img width="50" src="https://avatars2.githubusercontent.com/u/54626606?s=96&v=4"/></br>[skyrunner15](https://github.com/skyrunner15) | <img width="50" src="https://avatars2.githubusercontent.com/u/765564?s=96&v=4"/></br>[taskcruncher](https://github.com/taskcruncher) | <img width="50" src="https://avatars2.githubusercontent.com/u/73081837?s=96&v=4"/></br>[thismarty](https://github.com/thismarty) |
-| <img width="50" src="https://avatars2.githubusercontent.com/u/15859362?s=96&v=4"/></br>[thomasbroussard](https://github.com/thomasbroussard) |       |       |       |
+| <img width="50" src="https://avatars2.githubusercontent.com/u/215668?s=96&v=4"/></br>[avanderberg](https://github.com/avanderberg) | <img width="50" src="https://avatars2.githubusercontent.com/u/67130?s=96&v=4"/></br>[chr15m](https://github.com/chr15m) | <img width="50" src="https://avatars2.githubusercontent.com/u/2793530?s=96&v=4"/></br>[CyberXZT](https://github.com/CyberXZT) | <img width="50" src="https://avatars2.githubusercontent.com/u/1307332?s=96&v=4"/></br>[dbrandonjohnson](https://github.com/dbrandonjohnson) |
+| <img width="50" src="https://avatars2.githubusercontent.com/u/49439044?s=96&v=4"/></br>[fourstepper](https://github.com/fourstepper) | <img width="50" src="https://avatars2.githubusercontent.com/u/64712218?s=96&v=4"/></br>[Hegghammer](https://github.com/Hegghammer) | <img width="50" src="https://avatars2.githubusercontent.com/u/3266447?s=96&v=4"/></br>[iamwillbar](https://github.com/iamwillbar) | <img width="50" src="https://avatars2.githubusercontent.com/u/1310474?s=96&v=4"/></br>[jknowles](https://github.com/jknowles) |
+| <img width="50" src="https://avatars2.githubusercontent.com/u/11947658?s=96&v=4"/></br>[KentBrockman](https://github.com/KentBrockman) | <img width="50" src="https://avatars2.githubusercontent.com/u/5588131?s=96&v=4"/></br>[kianenigma](https://github.com/kianenigma) | <img width="50" src="https://avatars2.githubusercontent.com/u/24908652?s=96&v=4"/></br>[konishi-t](https://github.com/konishi-t) | <img width="50" src="https://avatars2.githubusercontent.com/u/42319182?s=96&v=4"/></br>[marcdw1289](https://github.com/marcdw1289) |
+| <img width="50" src="https://avatars2.githubusercontent.com/u/126279083?s=96&v=4"/></br>[matmoly](https://github.com/matmoly) | <img width="50" src="https://avatars2.githubusercontent.com/u/1788010?s=96&v=4"/></br>[maxtruxa](https://github.com/maxtruxa) | <img width="50" src="https://avatars2.githubusercontent.com/u/29300939?s=96&v=4"/></br>[mcejp](https://github.com/mcejp) | <img width="50" src="https://avatars2.githubusercontent.com/u/31054972?s=96&v=4"/></br>[saarantras](https://github.com/saarantras) |
+| <img width="50" src="https://avatars2.githubusercontent.com/u/327998?s=96&v=4"/></br>[sif](https://github.com/sif) | <img width="50" src="https://avatars2.githubusercontent.com/u/765564?s=96&v=4"/></br>[taskcruncher](https://github.com/taskcruncher) | <img width="50" src="https://avatars2.githubusercontent.com/u/333944?s=96&v=4"/></br>[tateisu](https://github.com/tateisu) |       |
 <!-- SPONSORS-GITHUB -->
 
 <!-- TOC -->
@@ -505,6 +502,7 @@ Name | Description
 [Mastodon feed](https://mastodon.social/@joplinapp) | Follow us on Mastodon
 [Patreon page](https://www.patreon.com/joplin) |The latest news are often posted there
 [Discord server](https://discord.gg/VSj7AFHvpq) | Our chat server
+[LinkedIn](https://www.linkedin.com/company/joplin) | Our LinkedIn page
 [Sub-reddit](https://www.reddit.com/r/joplinapp/) | Also a good place to get help
 
 # Contributing
@@ -559,11 +557,11 @@ Current translations:
 <img src="https://joplinapp.org/images/flags/country-4x3/pt.png" width="16px"/>  |  Português (Portugal)  |  [pt_PT](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/pt_PT.po)  |  [Diogo Caveiro](mailto:dcaveiro@yahoo.com)  |  73%
 <img src="https://joplinapp.org/images/flags/country-4x3/ro.png" width="16px"/>  |  Română  |  [ro](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/ro.po)  |  [Cristi Duluta](mailto:cristi.duluta@gmail.com)  |  51%
 <img src="https://joplinapp.org/images/flags/country-4x3/si.png" width="16px"/>  |  Slovenian (Slovenija)  |  [sl_SI](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/sl_SI.po)  |  [Martin Korelič](mailto:martin.korelic@protonmail.com)  |  80%
-<img src="https://joplinapp.org/images/flags/country-4x3/se.png" width="16px"/>  |  Svenska  |  [sv](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/sv.po)  |  [Jonatan Nyberg](mailto:jonatan@autistici.org)  |  97%
-<img src="https://joplinapp.org/images/flags/country-4x3/th.png" width="16px"/>  |  Thai (ประเทศไทย)  |  [th_TH](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/th_TH.po)  |    |  37%
+<img src="https://joplinapp.org/images/flags/country-4x3/se.png" width="16px"/>  |  Svenska  |  [sv](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/sv.po)  |  [Jonatan Nyberg](mailto:jonatan@autistici.org)  |  96%
+<img src="https://joplinapp.org/images/flags/country-4x3/th.png" width="16px"/>  |  Thai (ประเทศไทย)  |  [th_TH](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/th_TH.po)  |    |  36%
 <img src="https://joplinapp.org/images/flags/country-4x3/vn.png" width="16px"/>  |  Tiếng Việt  |  [vi](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/vi.po)  |    |  78%
 <img src="https://joplinapp.org/images/flags/country-4x3/tr.png" width="16px"/>  |  Türkçe (Türkiye)  |  [tr_TR](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/tr_TR.po)  |  [Arda Kılıçdağı](mailto:arda@kilicdagi.com)  |  89%
-<img src="https://joplinapp.org/images/flags/country-4x3/ua.png" width="16px"/>  |  Ukrainian (Україна)  |  [uk_UA](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/uk_UA.po)  |  [Vyacheslav Andreykiv](mailto:vandreykiv@gmail.com)  |  73%
+<img src="https://joplinapp.org/images/flags/country-4x3/ua.png" width="16px"/>  |  Ukrainian (Україна)  |  [uk_UA](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/uk_UA.po)  |  [Vyacheslav Andreykiv](mailto:vandreykiv@gmail.com)  |  72%
 <img src="https://joplinapp.org/images/flags/country-4x3/gr.png" width="16px"/>  |  Ελληνικά (Ελλάδα)  |  [el_GR](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/el_GR.po)  |  [Harris Arvanitis](mailto:xaris@tuta.io)  |  88%
 <img src="https://joplinapp.org/images/flags/country-4x3/ru.png" width="16px"/>  |  Русский (Россия)  |  [ru_RU](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/ru_RU.po)  |  [Dmitriy Q](mailto:krotesk@mail.ru)  |  99%
 <img src="https://joplinapp.org/images/flags/country-4x3/rs.png" width="16px"/>  |  српски језик (Србија)  |  [sr_RS](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/sr_RS.po)  |    |  65%

joplin.code-workspace

@@ -329,6 +329,7 @@
 			"packages/renderer/MdToHtml/rules/sanitize_html.js": true,
 			"packages/server/db-*.sqlite": true,
 			"packages/server/dist/": true,
+			"packages/utils/dist/": true,
 			"packages/server/temp": true,
 			"packages/server/test.pid": true,
 			"phpunit.xml": true,

package.json

@@ -71,15 +71,16 @@
     "eslint": "8.31.0",
     "eslint-interactive": "10.3.0",
     "eslint-plugin-import": "2.27.4",
+    "eslint-plugin-jest": "27.2.1",
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.32.0",
-    "fs-extra": "11.1.0",
+    "fs-extra": "11.1.1",
     "glob": "8.1.0",
     "gulp": "4.0.2",
     "husky": "3.1.0",
     "lerna": "3.22.1",
-    "lint-staged": "13.1.2",
-    "madge": "5.0.2",
+    "lint-staged": "13.2.0",
+    "madge": "6.0.0",
     "npm-package-json-lint": "6.4.0",
     "typedoc": "0.17.8",
     "typescript": "4.9.4"
@@ -88,7 +89,7 @@
     "@types/fs-extra": "9.0.13",
     "http-server": "14.1.1",
     "node-gyp": "9.3.1",
-    "nodemon": "2.0.20"
+    "nodemon": "2.0.21"
   },
   "packageManager": "yarn@3.3.1",
   "resolutions": {

packages/app-cli/app/LinkSelector.ts

@@ -6,14 +6,14 @@ interface LinkStoreEntry {
 }
 
 class LinkSelector {
-	noteId_: string;
-	scrollTop_: number;
-	renderedText_: string;
-	currentLinkIndex_: number;
-	linkStore_: LinkStoreEntry[];
-	linkRegex_: RegExp;
+	private noteId_: string;
+	private scrollTop_: number;
+	private renderedText_: string;
+	private currentLinkIndex_: number;
+	private linkStore_: LinkStoreEntry[];
+	private linkRegex_: RegExp;
 
-	constructor() {
+	public constructor() {
 		this.noteId_ = null;
 		this.scrollTop_ = null; // used so 'o' won't open unhighlighted link after scrolling
 		this.renderedText_ = null;
@@ -22,22 +22,22 @@ class LinkSelector {
 		this.linkRegex_ = /http:\/\/[0-9.]+:[0-9]+\/[0-9]+/g;
 	}
 
-	get link(): string | null {
+	public get link(): string | null {
 		if (this.currentLinkIndex_ === null) return null;
 		return this.linkStore_[this.currentLinkIndex_].link;
 	}
 
-	get noteX(): number | null {
+	public get noteX(): number | null {
 		if (this.currentLinkIndex_ === null) return null;
 		return this.linkStore_[this.currentLinkIndex_].noteX;
 	}
 
-	get noteY(): number | null {
+	public get noteY(): number | null {
 		if (this.currentLinkIndex_ === null) return null;
 		return this.linkStore_[this.currentLinkIndex_].noteY;
 	}
 
-	findLinks(renderedText: string): LinkStoreEntry[] {
+	public findLinks(renderedText: string): LinkStoreEntry[] {
 		const newLinkStore: LinkStoreEntry[] = [];
 		const lines: string[] = renderedText.split('\n');
 		for (let i = 0; i < lines.length; i++) {
@@ -56,19 +56,19 @@ class LinkSelector {
 		return newLinkStore;
 	}
 
-	updateText(renderedText: string): void {
+	public updateText(renderedText: string): void {
 		this.currentLinkIndex_ = null;
 		this.renderedText_ = renderedText;
 		this.linkStore_ = this.findLinks(this.renderedText_);
 	}
 
-	updateNote(textWidget: any): void {
+	public updateNote(textWidget: any): void {
 		this.noteId_ = textWidget.noteId;
 		this.scrollTop_ = textWidget.scrollTop_;
 		this.updateText(textWidget.renderedText_);
 	}
 
-	scrollWidget(textWidget: any): void {
+	public scrollWidget(textWidget: any): void {
 		if (this.currentLinkIndex_ === null) return;
 
 		const noteY = this.linkStore_[this.currentLinkIndex_].noteY;
@@ -93,7 +93,7 @@ class LinkSelector {
 		return;
 	}
 
-	changeLink(textWidget: any, offset: number): void | null {
+	public changeLink(textWidget: any, offset: number): void | null {
 		if (textWidget.noteId !== this.noteId_) {
 			this.updateNote(textWidget);
 			this.changeLink(textWidget, offset);
@@ -123,7 +123,7 @@ class LinkSelector {
 		return;
 	}
 
-	openLink(textWidget: any): void {
+	public openLink(textWidget: any): void {
 		if (textWidget.noteId !== this.noteId_) return;
 		if (textWidget.renderedText_ !== this.renderedText_) return;
 		if (textWidget.scrollTop_ !== this.scrollTop_) return;

packages/app-cli/app/app-gui.js

@@ -8,7 +8,7 @@ const Resource = require('@joplin/lib/models/Resource').default;
 const Setting = require('@joplin/lib/models/Setting').default;
 const reducer = require('@joplin/lib/reducer').default;
 const { defaultState } = require('@joplin/lib/reducer');
-const { splitCommandString } = require('@joplin/lib/string-utils.js');
+const { splitCommandString } = require('@joplin/utils');
 const { reg } = require('@joplin/lib/registry.js');
 const { _ } = require('@joplin/lib/locale');
 const shim = require('@joplin/lib/shim').default;

packages/app-cli/app/app.js

@@ -9,7 +9,8 @@ const Tag = require('@joplin/lib/models/Tag').default;
 const Setting = require('@joplin/lib/models/Setting').default;
 const { reg } = require('@joplin/lib/registry.js');
 const { fileExtension } = require('@joplin/lib/path-utils');
-const { splitCommandString, splitCommandBatch } = require('@joplin/lib/string-utils');
+const { splitCommandString } = require('@joplin/utils');
+const { splitCommandBatch } = require('@joplin/lib/string-utils');
 const { _ } = require('@joplin/lib/locale');
 const fs = require('fs-extra');
 const { cliUtils } = require('./cli-utils.js');

packages/app-cli/app/base-command.ts

@@ -7,80 +7,80 @@ export default class BaseCommand {
 	protected prompt_: any = null;
 	protected dispatcher_: any;
 
-	usage(): string {
+	public usage(): string {
 		throw new Error('Usage not defined');
 	}
 
-	encryptionCheck(item: any) {
+	public encryptionCheck(item: any) {
 		if (item && item.encryption_applied) throw new Error(_('Cannot change encrypted item'));
 	}
 
-	description() {
+	public description() {
 		throw new Error('Description not defined');
 	}
 
-	async action(_args: any) {
+	public async action(_args: any) {
 		throw new Error('Action not defined');
 	}
 
-	compatibleUis() {
+	public compatibleUis() {
 		return ['cli', 'gui'];
 	}
 
-	supportsUi(ui: string) {
+	public supportsUi(ui: string) {
 		return this.compatibleUis().indexOf(ui) >= 0;
 	}
 
-	options(): any[] {
+	public options(): any[] {
 		return [];
 	}
 
-	hidden() {
+	public hidden() {
 		return false;
 	}
 
-	enabled() {
+	public enabled() {
 		return true;
 	}
 
-	cancellable() {
+	public cancellable() {
 		return false;
 	}
 
-	async cancel() {}
+	public async cancel() {}
 
-	name() {
+	public name() {
 		const r = this.usage().split(' ');
 		return r[0];
 	}
 
-	setDispatcher(fn: Function) {
+	public setDispatcher(fn: Function) {
 		this.dispatcher_ = fn;
 	}
 
-	dispatch(action: any) {
+	public dispatch(action: any) {
 		if (!this.dispatcher_) throw new Error('Dispatcher not defined');
 		return this.dispatcher_(action);
 	}
 
-	setStdout(fn: Function) {
+	public setStdout(fn: Function) {
 		this.stdout_ = fn;
 	}
 
-	stdout(text: string) {
+	public stdout(text: string) {
 		if (this.stdout_) this.stdout_(text);
 	}
 
-	setPrompt(fn: Function) {
+	public setPrompt(fn: Function) {
 		this.prompt_ = fn;
 	}
 
-	async prompt(message: string, options: any = null) {
+	public async prompt(message: string, options: any = null) {
 		if (!this.prompt_) throw new Error('Prompt is undefined');
 		return await this.prompt_(message, options);
 	}
 
-	metadata() {
+	public metadata() {
 		return {
 			name: this.name(),
 			usage: this.usage(),
@@ -89,7 +89,7 @@ export default class BaseCommand {
 		};
 	}
 
-	logger() {
+	public logger() {
 		return reg.logger();
 	}
 }

packages/app-cli/app/command-e2ee.ts

@@ -12,15 +12,15 @@ const imageType = require('image-type');
 const readChunk = require('read-chunk');
 
 class Command extends BaseCommand {
-	usage() {
+	public usage() {
 		return 'e2ee <command> [path]';
 	}
 
-	description() {
+	public description() {
 		return _('Manages E2EE configuration. Commands are `enable`, `disable`, `decrypt`, `status`, `decrypt-file`, and `target-status`.'); // `generate-ppk`
 	}
 
-	options() {
+	public options() {
 		return [
 			// This is here mostly for testing - shouldn't be used
 			['-p, --password <password>', 'Use this password as master password (For security reasons, it is not recommended to use this option).'],
@@ -30,7 +30,7 @@ class Command extends BaseCommand {
 		];
 	}
 
-	async action(args: any) {
+	public async action(args: any) {
 		const options = args.options;
 
 		const askForMasterKey = async (error: any) => {

packages/app-cli/app/command-edit.js

@@ -1,6 +1,6 @@
 const fs = require('fs-extra');
 const BaseCommand = require('./base-command').default;
-const { splitCommandString } = require('@joplin/lib/string-utils.js');
+const { splitCommandString } = require('@joplin/utils');
 const uuid = require('@joplin/lib/uuid').default;
 const { app } = require('./app.js');
 const { _ } = require('@joplin/lib/locale');

packages/app-cli/app/command-mkbook.ts

@@ -6,22 +6,22 @@ import Folder from '@joplin/lib/models/Folder';
 import { FolderEntity } from '@joplin/lib/services/database/types';
 
 class Command extends BaseCommand {
-	usage() {
+	public usage() {
 		return 'mkbook <new-notebook>';
 	}
 
-	description() {
+	public description() {
 		return _('Creates a new notebook.');
 	}
 
-	options() {
+	public options() {
 		return [
 			['-p, --parent <parent-notebook>', _('Create a new notebook under a parent notebook.')],
 		];
 	}
 
 	// validDestinationFolder check for presents and ambiguous folders
-	async validDestinationFolder(targetFolder: string) {
+	public async validDestinationFolder(targetFolder: string) {
 
 		const destinationFolder = await app().loadItem(BaseModel.TYPE_FOLDER, targetFolder);
 		if (!destinationFolder) {
@@ -36,14 +36,14 @@ class Command extends BaseCommand {
 		return destinationFolder;
 	}
 
-	async saveAndSwitchFolder(newFolder: FolderEntity) {
+	public async saveAndSwitchFolder(newFolder: FolderEntity) {
 
 		const folder = await Folder.save(newFolder, { userSideValidation: true });
 		app().switchCurrentFolder(folder);
 
 	}
 
-	async action(args: any) {
+	public async action(args: any) {
 		const targetFolder = args.options.parent;
 
 		const newFolder: FolderEntity = {

packages/app-cli/app/command-settingschema.ts

@@ -23,19 +23,19 @@ function settingTypeToSchemaType(type: SettingItemType): string {
 }
 
 class Command extends BaseCommand {
-	usage() {
+	public usage() {
 		return 'settingschema <file>';
 	}
 
-	description() {
+	public description() {
 		return 'Build the setting schema file';
 	}
 
-	enabled() {
+	public enabled() {
 		return false;
 	}
 
-	async action(args: any) {
+	public async action(args: any) {
 		const schema: Record<string, any> = {
 			title: 'JSON schema for Joplin setting files',
 			'$id': Setting.schemaUrl,

packages/app-cli/app/command-sync.ts

@@ -21,15 +21,15 @@ class Command extends BaseCommand {
 	private releaseLockFn_: Function = null;
 	private oneDriveApiUtils_: any = null;
 
-	usage() {
+	public usage() {
 		return 'sync';
 	}
 
-	description() {
+	public description() {
 		return _('Synchronises with remote storage.');
 	}
 
-	options() {
+	public options() {
 		return [
 			['--target <target>', _('Sync to provided target (defaults to sync.target config value)')],
 			['--upgrade', _('Upgrade the sync target to the latest version.')],
@@ -45,7 +45,7 @@ class Command extends BaseCommand {
 		return locker.check(filePath);
 	}
 
-	async doAuth() {
+	public async doAuth() {
 		const syncTarget = reg.syncTarget(this.syncTargetId_);
 		const syncTargetMd = SyncTargetRegistry.idToMetadata(this.syncTargetId_);
 
@@ -89,18 +89,18 @@ class Command extends BaseCommand {
 		return false;
 	}
 
-	cancelAuth() {
+	public cancelAuth() {
 		if (this.oneDriveApiUtils_) {
 			this.oneDriveApiUtils_.cancelOAuthDance();
 			return;
 		}
 	}
 
-	doingAuth() {
+	public doingAuth() {
 		return !!this.oneDriveApiUtils_;
 	}
 
-	async action(args: any) {
+	public async action(args: any) {
 		this.releaseLockFn_ = null;
 
 		// Lock is unique per profile/database
@@ -238,7 +238,7 @@ class Command extends BaseCommand {
 		cleanUp();
 	}
 
-	async cancel() {
+	public async cancel() {
 		if (this.doingAuth()) {
 			this.cancelAuth();
 			return;
@@ -263,7 +263,7 @@ class Command extends BaseCommand {
 		this.syncTargetId_ = null;
 	}
 
-	cancellable() {
+	public cancellable() {
 		return true;
 	}
 }

packages/app-cli/app/command-testing.ts

@@ -18,19 +18,19 @@ function itemCount(args: any) {
 }
 
 class Command extends BaseCommand {
-	usage() {
+	public usage() {
 		return 'testing <command> [arg0]';
 	}
 
-	description() {
+	public description() {
 		return 'testing';
 	}
 
-	enabled() {
+	public enabled() {
 		return false;
 	}
 
-	options(): any[] {
+	public options(): any[] {
 		return [
 			['--folder-count <count>', 'Folders to create'],
 			['--note-count <count>', 'Notes to create'],
@@ -40,7 +40,7 @@ class Command extends BaseCommand {
 		];
 	}
 
-	async action(args: any) {
+	public async action(args: any) {
 		const { command, options } = args;
 
 		if (command === 'populate') {

packages/app-cli/app/gui/StatusBarWidget.ts

@@ -5,7 +5,7 @@ const stripAnsi = require('strip-ansi');
 const { handleAutocompletion } = require('../autocompletion.js');
 
 export default class StatusBarWidget extends BaseWidget {
-	constructor() {
+	public constructor() {
 		super();
 
 		this.promptState_ = null;
@@ -14,20 +14,20 @@ export default class StatusBarWidget extends BaseWidget {
 		this.items_ = [];
 	}
 
-	get name() {
+	public get name() {
 		return 'statusBar';
 	}
 
-	get canHaveFocus() {
+	public get canHaveFocus() {
 		return false;
 	}
 
-	setItemAt(index: number, text: string) {
+	public setItemAt(index: number, text: string) {
 		this.items_[index] = stripAnsi(text).trim();
 		this.invalidate();
 	}
 
-	async prompt(initialText = '', promptString: any = null, options: any = null) {
+	public async prompt(initialText = '', promptString: any = null, options: any = null) {
 		if (this.promptState_) throw new Error('Another prompt already active');
 		if (promptString === null) promptString = ':';
 		if (options === null) options = {};
@@ -53,15 +53,15 @@ export default class StatusBarWidget extends BaseWidget {
 		return this.promptState_.promise;
 	}
 
-	get promptActive() {
+	public get promptActive() {
 		return !!this.promptState_;
 	}
 
-	get history() {
+	public get history() {
 		return this.history_;
 	}
 
-	resetCursor() {
+	public resetCursor() {
 		if (!this.promptActive) return;
 		if (!this.inputEventEmitter_) return;
 
@@ -70,7 +70,7 @@ export default class StatusBarWidget extends BaseWidget {
 		this.term.moveTo(this.absoluteInnerX + termutils.textLength(this.promptState_.promptString) + this.inputEventEmitter_.getInput().length, this.absoluteInnerY);
 	}
 
-	render() {
+	public render() {
 		super.render();
 
 		const doSaveCursor = !this.promptActive;

packages/app-cli/app/services/plugins/PluginRunner.ts

@@ -35,7 +35,7 @@ export default class PluginRunner extends BasePluginRunner {
 	private eventHandlers_: EventHandlers = {};
 	private activeSandboxCalls_: any = {};
 
-	constructor() {
+	public constructor() {
 		super();
 
 		this.eventHandler = this.eventHandler.bind(this);
@@ -64,7 +64,7 @@ export default class PluginRunner extends BasePluginRunner {
 		};
 	}
 
-	async run(plugin: Plugin, sandbox: Global): Promise<void> {
+	public async run(plugin: Plugin, sandbox: Global): Promise<void> {
 		return new Promise((resolve: Function, reject: Function) => {
 			const onStarted = () => {
 				plugin.off('started', onStarted);

packages/app-cli/package.json

@@ -30,34 +30,36 @@
       2019,
       2020,
       2021,
-      2022
+      2022,
+      2023
     ],
     "owner": "Laurent Cozic"
   },
-  "version": "2.10.3",
+  "version": "2.11.0",
   "bin": "./main.js",
   "engines": {
     "node": ">=10.0.0"
   },
   "dependencies": {
-    "@joplin/lib": "~2.10",
-    "@joplin/renderer": "~2.10",
+    "@joplin/lib": "~2.11",
+    "@joplin/renderer": "~2.11",
+    "@joplin/utils": "~2.11",
     "aws-sdk": "2.1290.0",
     "chalk": "4.1.2",
     "compare-version": "0.1.2",
-    "fs-extra": "11.1.0",
+    "fs-extra": "11.1.1",
     "html-entities": "1.4.0",
     "image-type": "3.1.0",
     "keytar": "7.9.0",
     "md5": "2.3.0",
     "node-rsa": "1.1.1",
-    "open": "8.4.1",
+    "open": "8.4.2",
     "proper-lockfile": "4.1.2",
     "read-chunk": "2.1.0",
     "server-destroy": "1.0.1",
     "sharp": "0.31.3",
     "sprintf-js": "1.1.2",
-    "sqlite3": "5.1.4",
+    "sqlite3": "5.1.6",
     "string-padding": "1.0.2",
     "strip-ansi": "6.0.1",
     "tcp-port-used": "1.0.2",
@@ -68,7 +70,7 @@
     "yargs-parser": "21.1.1"
   },
   "devDependencies": {
-    "@joplin/tools": "~2.10",
+    "@joplin/tools": "~2.11",
     "@types/fs-extra": "9.0.13",
     "@types/jest": "29.2.6",
     "@types/node": "18.11.18",

packages/app-cli/tests/services/keychain/KeychainService.ts

@@ -1,3 +1,5 @@
+/* eslint-disable jest/require-top-level-describe */
+
 import KeychainService from '@joplin/lib/services/keychain/KeychainService';
 import shim from '@joplin/lib/shim';
 import Setting from '@joplin/lib/models/Setting';

packages/app-cli/tests/services/plugins/RepositoryApi.ts

@@ -47,9 +47,11 @@ describe('services_plugins_RepositoryApi', () => {
 
 	it('should tell if a plugin can be updated', (async () => {
 		const api = await newRepoApi();
-		expect(await api.pluginCanBeUpdated('org.joplinapp.plugins.ToggleSidebars', '1.0.0')).toBe(true);
-		expect(await api.pluginCanBeUpdated('org.joplinapp.plugins.ToggleSidebars', '1.0.2')).toBe(false);
-		expect(await api.pluginCanBeUpdated('does.not.exist', '1.0.0')).toBe(false);
+
+		expect(await api.pluginCanBeUpdated('org.joplinapp.plugins.ToggleSidebars', '1.0.0', '3.0.0')).toBe(true);
+		expect(await api.pluginCanBeUpdated('org.joplinapp.plugins.ToggleSidebars', '1.0.0', '1.0.0')).toBe(false);
+		expect(await api.pluginCanBeUpdated('org.joplinapp.plugins.ToggleSidebars', '1.0.2', '3.0.0')).toBe(false);
+		expect(await api.pluginCanBeUpdated('does.not.exist', '1.0.0', '3.0.0')).toBe(false);
 	}));
 
 });

packages/app-cli/tools/populateDatabase.ts

@@ -19,7 +19,7 @@
 
 import * as fs from 'fs-extra';
 import { homedir } from 'os';
-import { execCommand2 } from '@joplin/tools/tool-utils';
+import { execCommand } from '@joplin/utils';
 import { chdir } from 'process';
 
 const minUserNum = 1;
@@ -66,7 +66,7 @@ const processUser = async (userNum: number) => {
 
 		await chdir(cliDir);
 
-		await execCommand2(['yarn', 'run', 'start-no-build', '--', '--profile', profileDir, 'batch', commandFile]);
+		await execCommand(['yarn', 'run', 'start-no-build', '--', '--profile', profileDir, 'batch', commandFile]);
 	} catch (error) {
 		console.error(`Could not process user ${userNum}:`, error);
 	} finally {
@@ -90,7 +90,7 @@ const main = async () => {
 
 	// Build the app once before starting, because we'll use start-no-build to
 	// run the scripts (faster)
-	await execCommand2(['yarn', 'run', 'build']);
+	await execCommand(['yarn', 'run', 'build']);
 
 	const focusUserNum = 0;
 

packages/app-clipper/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Joplin Web Clipper [DEV]",
-    "version": "2.10.0",
+    "version": "2.11.0",
     "description": "Capture and save web pages and screenshots from your browser to Joplin.",
     "homepage_url": "https://joplinapp.org",
     "content_security_policy": "script-src 'self'; object-src 'self'",

packages/app-desktop/ElectronAppWrapper.ts

@@ -33,7 +33,7 @@ export default class ElectronAppWrapper {
 	private pluginWindows_: PluginWindows = {};
 	private initialCallbackUrl_: string = null;
 
-	constructor(electronApp: any, env: string, profilePath: string, isDebugMode: boolean, initialCallbackUrl: string) {
+	public constructor(electronApp: any, env: string, profilePath: string, isDebugMode: boolean, initialCallbackUrl: string) {
 		this.electronApp_ = electronApp;
 		this.env_ = env;
 		this.isDebugMode_ = isDebugMode;
@@ -41,31 +41,31 @@ export default class ElectronAppWrapper {
 		this.initialCallbackUrl_ = initialCallbackUrl;
 	}
 
-	electronApp() {
+	public electronApp() {
 		return this.electronApp_;
 	}
 
-	setLogger(v: Logger) {
+	public setLogger(v: Logger) {
 		this.logger_ = v;
 	}
 
-	logger() {
+	public logger() {
 		return this.logger_;
 	}
 
-	window() {
+	public window() {
 		return this.win_;
 	}
 
-	env() {
+	public env() {
 		return this.env_;
 	}
 
-	initialCallbackUrl() {
+	public initialCallbackUrl() {
 		return this.initialCallbackUrl_;
 	}
 
-	createWindow() {
+	public createWindow() {
 		// Set to true to view errors if the application does not start
 		const debugEarlyBugs = this.env_ === 'dev' || this.isDebugMode_;
 
@@ -236,11 +236,11 @@ export default class ElectronAppWrapper {
 		}
 	}
 
-	registerPluginWindow(pluginId: string, window: any) {
+	public registerPluginWindow(pluginId: string, window: any) {
 		this.pluginWindows_[pluginId] = window;
 	}
 
-	async waitForElectronAppReady() {
+	public async waitForElectronAppReady() {
 		if (this.electronApp().isReady()) return Promise.resolve();
 
 		return new Promise<void>((resolve) => {
@@ -253,25 +253,25 @@ export default class ElectronAppWrapper {
 		});
 	}
 
-	quit() {
+	public quit() {
 		this.electronApp_.quit();
 	}
 
-	exit(errorCode = 0) {
+	public exit(errorCode = 0) {
 		this.electronApp_.exit(errorCode);
 	}
 
-	trayShown() {
+	public trayShown() {
 		return !!this.tray_;
 	}
 
 	// This method is used in macOS only to hide the whole app (and not just the main window)
 	// including the menu bar. This follows the macOS way of hiding an app.
-	hide() {
+	public hide() {
 		this.electronApp_.hide();
 	}
 
-	buildDir() {
+	public buildDir() {
 		if (this.buildDir_) return this.buildDir_;
 		let dir = `${__dirname}/build`;
 		if (!fs.pathExistsSync(dir)) {
@@ -283,7 +283,7 @@ export default class ElectronAppWrapper {
 		return dir;
 	}
 
-	trayIconFilename_() {
+	private trayIconFilename_() {
 		let output = '';
 
 		if (process.platform === 'darwin') {
@@ -298,7 +298,7 @@ export default class ElectronAppWrapper {
 	}
 
 	// Note: this must be called only after the "ready" event of the app has been dispatched
-	createTray(contextMenu: any) {
+	public createTray(contextMenu: any) {
 		try {
 			this.tray_ = new Tray(`${this.buildDir()}/icons/${this.trayIconFilename_()}`);
 			this.tray_.setToolTip(this.electronApp_.name);
@@ -312,13 +312,13 @@ export default class ElectronAppWrapper {
 		}
 	}
 
-	destroyTray() {
+	public destroyTray() {
 		if (!this.tray_) return;
 		this.tray_.destroy();
 		this.tray_ = null;
 	}
 
-	ensureSingleInstance() {
+	public ensureSingleInstance() {
 		if (this.env_ === 'dev') return false;
 
 		const gotTheLock = this.electronApp_.requestSingleInstanceLock();
@@ -347,7 +347,7 @@ export default class ElectronAppWrapper {
 		return false;
 	}
 
-	async start() {
+	public async start() {
 		// Since we are doing other async things before creating the window, we might miss
 		// the "ready" event. So we use the function below to make sure that the app is ready.
 		await this.waitForElectronAppReady();
@@ -375,7 +375,7 @@ export default class ElectronAppWrapper {
 		});
 	}
 
-	async openCallbackUrl(url: string) {
+	public async openCallbackUrl(url: string) {
 		this.win_.webContents.send('asynchronous-message', 'openCallbackUrl', {
 			url: url,
 		});

packages/app-desktop/app.reducer.test.ts

@@ -3,7 +3,7 @@ import appReducer, { createAppDefaultState } from './app.reducer';
 
 describe('app.reducer', () => {
 
-	it('DIALOG_OPEN', async () => {
+	it('should handle DIALOG_OPEN', async () => {
 		const state: AppState = createAppDefaultState({}, {});
 
 		let newState = appReducer(state, {

packages/app-desktop/bridge.ts

@@ -21,7 +21,7 @@ export class Bridge {
 	private electronWrapper_: ElectronAppWrapper;
 	private lastSelectedPaths_: LastSelectedPath;
 
-	constructor(electronWrapper: ElectronAppWrapper) {
+	public constructor(electronWrapper: ElectronAppWrapper) {
 		this.electronWrapper_ = electronWrapper;
 		this.lastSelectedPaths_ = {
 			file: null,
@@ -29,11 +29,11 @@ export class Bridge {
 		};
 	}
 
-	electronApp() {
+	public electronApp() {
 		return this.electronWrapper_;
 	}
 
-	electronIsDev() {
+	public electronIsDev() {
 		return !this.electronApp().electronApp().isPackaged;
 	}
 
@@ -60,11 +60,11 @@ export class Bridge {
 		return `${__dirname}/vendor`;
 	}
 
-	env() {
+	public env() {
 		return this.electronWrapper_.env();
 	}
 
-	processArgv() {
+	public processArgv() {
 		return process.argv;
 	}
 
@@ -114,44 +114,44 @@ export class Bridge {
 		});
 	}
 
-	window() {
+	public window() {
 		return this.electronWrapper_.window();
 	}
 
-	showItemInFolder(fullPath: string) {
+	public showItemInFolder(fullPath: string) {
 		return require('electron').shell.showItemInFolder(toSystemSlashes(fullPath));
 	}
 
-	newBrowserWindow(options: any) {
+	public newBrowserWindow(options: any) {
 		return new BrowserWindow(options);
 	}
 
-	windowContentSize() {
+	public windowContentSize() {
 		if (!this.window()) return { width: 0, height: 0 };
 		const s = this.window().getContentSize();
 		return { width: s[0], height: s[1] };
 	}
 
-	windowSize() {
+	public windowSize() {
 		if (!this.window()) return { width: 0, height: 0 };
 		const s = this.window().getSize();
 		return { width: s[0], height: s[1] };
 	}
 
-	windowSetSize(width: number, height: number) {
+	public windowSetSize(width: number, height: number) {
 		if (!this.window()) return;
 		return this.window().setSize(width, height);
 	}
 
-	openDevTools() {
+	public openDevTools() {
 		return this.window().webContents.openDevTools();
 	}
 
-	closeDevTools() {
+	public closeDevTools() {
 		return this.window().webContents.closeDevTools();
 	}
 
-	async showSaveDialog(options: any) {
+	public async showSaveDialog(options: any) {
 		const { dialog } = require('electron');
 		if (!options) options = {};
 		if (!('defaultPath' in options) && this.lastSelectedPaths_.file) options.defaultPath = this.lastSelectedPaths_.file;
@@ -162,7 +162,7 @@ export class Bridge {
 		return filePath;
 	}
 
-	async showOpenDialog(options: OpenDialogOptions = null) {
+	public async showOpenDialog(options: OpenDialogOptions = null) {
 		const { dialog } = require('electron');
 		if (!options) options = {};
 		let fileType = 'file';
@@ -177,13 +177,13 @@ export class Bridge {
 	}
 
 	// Don't use this directly - call one of the showXxxxxxxMessageBox() instead
-	showMessageBox_(window: any, options: any): number {
+	private showMessageBox_(window: any, options: any): number {
 		const { dialog } = require('electron');
 		if (!window) window = this.window();
 		return dialog.showMessageBoxSync(window, options);
 	}
 
-	showErrorMessageBox(message: string) {
+	public showErrorMessageBox(message: string) {
 		return this.showMessageBox_(this.window(), {
 			type: 'error',
 			message: message,
@@ -191,7 +191,7 @@ export class Bridge {
 		});
 	}
 
-	showConfirmMessageBox(message: string, options: any = null) {
+	public showConfirmMessageBox(message: string, options: any = null) {
 		options = {
 			buttons: [_('OK'), _('Cancel')],
 			...options,
@@ -208,7 +208,7 @@ export class Bridge {
 	}
 
 	/* returns the index of the clicked button */
-	showMessageBox(message: string, options: any = null) {
+	public showMessageBox(message: string, options: any = null) {
 		if (options === null) options = {};
 
 		const result = this.showMessageBox_(this.window(), Object.assign({}, {
@@ -220,7 +220,7 @@ export class Bridge {
 		return result;
 	}
 
-	showInfoMessageBox(message: string, options: any = {}) {
+	public showInfoMessageBox(message: string, options: any = {}) {
 		const result = this.showMessageBox_(this.window(), Object.assign({}, {
 			type: 'info',
 			message: message,
@@ -229,35 +229,35 @@ export class Bridge {
 		return result === 0;
 	}
 
-	setLocale(locale: string) {
+	public setLocale(locale: string) {
 		setLocale(locale);
 	}
 
-	get Menu() {
+	public get Menu() {
 		return require('electron').Menu;
 	}
 
-	get MenuItem() {
+	public get MenuItem() {
 		return require('electron').MenuItem;
 	}
 
-	openExternal(url: string) {
+	public openExternal(url: string) {
 		return require('electron').shell.openExternal(url);
 	}
 
-	async openItem(fullPath: string) {
+	public async openItem(fullPath: string) {
 		return require('electron').shell.openPath(toSystemSlashes(fullPath));
 	}
 
-	screen() {
+	public screen() {
 		return require('electron').screen;
 	}
 
-	shouldUseDarkColors() {
+	public shouldUseDarkColors() {
 		return nativeTheme.shouldUseDarkColors;
 	}
 
-	addEventListener(name: string, fn: Function) {
+	public addEventListener(name: string, fn: Function) {
 		if (name === 'nativeThemeUpdated') {
 			nativeTheme.on('updated', fn);
 		} else {
@@ -265,7 +265,7 @@ export class Bridge {
 		}
 	}
 
-	restart(linuxSafeRestart = true) {
+	public restart(linuxSafeRestart = true) {
 		// 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.

packages/app-desktop/gui/ClipperConfigScreen.tsx

@@ -2,7 +2,6 @@ const React = require('react');
 const { connect } = require('react-redux');
 const { clipboard } = require('electron');
 import ExtensionBadge from './ExtensionBadge';
-import bridge from '../services/bridge';
 import { themeStyle } from '@joplin/lib/theme';
 import { _ } from '@joplin/lib/locale';
 import ClipperServer from '@joplin/lib/ClipperServer';
@@ -11,37 +10,29 @@ import EncryptionService from '@joplin/lib/services/e2ee/EncryptionService';
 import { AppState } from '../app.reducer';
 
 class ClipperConfigScreenComponent extends React.Component {
-	constructor() {
+	public constructor() {
 		super();
 
 		this.copyToken_click = this.copyToken_click.bind(this);
 	}
 
-	disableClipperServer_click() {
+	private disableClipperServer_click() {
 		Setting.setValue('clipperServer.autoStart', false);
 		void ClipperServer.instance().stop();
 	}
 
-	enableClipperServer_click() {
+	private enableClipperServer_click() {
 		Setting.setValue('clipperServer.autoStart', true);
 		void ClipperServer.instance().start();
 	}
 
-	chromeButton_click() {
-		void bridge().openExternal('https://chrome.google.com/webstore/detail/joplin-web-clipper/alofnhikmmkdbbbgpnglcpdollgjjfek');
-	}
-
-	firefoxButton_click() {
-		void bridge().openExternal('https://addons.mozilla.org/en-US/firefox/addon/joplin-web-clipper/');
-	}
-
-	copyToken_click() {
+	private copyToken_click() {
 		clipboard.writeText(this.props.apiToken);
 
 		alert(_('Token has been copied to the clipboard!'));
 	}
 
-	renewToken_click() {
+	private renewToken_click() {
 		if (confirm(_('Are you sure you want to renew the authorisation token?'))) {
 			void EncryptionService.instance()
 				.generateApiToken()
@@ -52,7 +43,7 @@ class ClipperConfigScreenComponent extends React.Component {
 		}
 	}
 
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 
 		const containerStyle = Object.assign({}, theme.containerStyle, {

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

@@ -26,9 +26,9 @@ const settingKeyToControl: any = {
 
 class ConfigScreenComponent extends React.Component<any, any> {
 
-	rowStyle_: any = null;
+	private rowStyle_: any = null;
 
-	constructor(props: any) {
+	public constructor(props: any) {
 		super(props);
 
 		shared.init(this, reg);
@@ -55,15 +55,15 @@ class ConfigScreenComponent extends React.Component<any, any> {
 		this.handleSettingButton = this.handleSettingButton.bind(this);
 	}
 
-	async checkSyncConfig_() {
+	private async checkSyncConfig_() {
 		await shared.checkSyncConfig(this, this.state.settings);
 	}
 
-	UNSAFE_componentWillMount() {
+	public UNSAFE_componentWillMount() {
 		this.setState({ settings: this.props.settings });
 	}
 
-	componentDidMount() {
+	public componentDidMount() {
 		if (this.props.defaultSection) {
 			this.setState({ selectedSectionName: this.props.defaultSection }, () => {
 				this.switchSection(this.props.defaultSection);
@@ -93,7 +93,7 @@ class ConfigScreenComponent extends React.Component<any, any> {
 		}
 	}
 
-	sectionByName(name: string) {
+	public sectionByName(name: string) {
 		const sections = shared.settingsSections({ device: 'desktop', settings: this.state.settings });
 		for (const section of sections) {
 			if (section.name === name) return section;
@@ -102,7 +102,7 @@ class ConfigScreenComponent extends React.Component<any, any> {
 		throw new Error(`Invalid section name: ${name}`);
 	}
 
-	screenFromName(screenName: string) {
+	public screenFromName(screenName: string) {
 		if (screenName === 'encryption') return <EncryptionConfigScreen/>;
 		if (screenName === 'server') return <ClipperConfigScreen themeId={this.props.themeId}/>;
 		if (screenName === 'keymap') return <KeymapConfigScreen themeId={this.props.themeId}/>;
@@ -110,7 +110,7 @@ class ConfigScreenComponent extends React.Component<any, any> {
 		throw new Error(`Invalid screen name: ${screenName}`);
 	}
 
-	switchSection(name: string) {
+	public switchSection(name: string) {
 		const section = this.sectionByName(name);
 		let screenName = '';
 		if (section.isScreen) {
@@ -125,11 +125,11 @@ class ConfigScreenComponent extends React.Component<any, any> {
 		this.setState({ selectedSectionName: section.name, screenName: screenName });
 	}
 
-	sidebar_selectionChange(event: any) {
+	private sidebar_selectionChange(event: any) {
 		this.switchSection(event.section.name);
 	}
 
-	renderSectionDescription(section: any) {
+	public renderSectionDescription(section: any) {
 		const description = Setting.sectionDescription(section.name);
 		if (!description) return null;
 
@@ -141,7 +141,7 @@ class ConfigScreenComponent extends React.Component<any, any> {
 		);
 	}
 
-	sectionToComponent(key: string, section: any, settings: any, selected: boolean) {
+	public sectionToComponent(key: string, section: any, settings: any, selected: boolean) {
 		const theme = themeStyle(this.props.themeId);
 
 		const createSettingComponents = (advanced: boolean) => {
@@ -284,7 +284,7 @@ class ConfigScreenComponent extends React.Component<any, any> {
 		return description ? <div style={this.descriptionStyle(themeId)}>{description}</div> : null;
 	}
 
-	settingToComponent(key: string, value: any) {
+	public settingToComponent(key: string, value: any) {
 		const theme = themeStyle(this.props.themeId);
 
 		const output: any = null;
@@ -657,26 +657,26 @@ class ConfigScreenComponent extends React.Component<any, any> {
 		}
 	}
 
-	async onApplyClick() {
+	public async onApplyClick() {
 		shared.saveSettings(this);
 		await this.checkNeedRestart();
 	}
 
-	async onSaveClick() {
+	public async onSaveClick() {
 		shared.saveSettings(this);
 		await this.checkNeedRestart();
 		this.props.dispatch({ type: 'NAV_BACK' });
 	}
 
-	onCancelClick() {
+	public onCancelClick() {
 		this.props.dispatch({ type: 'NAV_BACK' });
 	}
 
-	hasChanges() {
+	public hasChanges() {
 		return !!this.state.changedSettingKeys.length;
 	}
 
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 
 		const style = Object.assign({},

packages/app-desktop/gui/ConfigScreen/controls/plugins/PluginsStates.tsx

@@ -143,7 +143,7 @@ export default function(props: Props) {
 		let cancelled = false;
 
 		async function fetchPluginIds() {
-			const pluginIds = await repoApi().canBeUpdatedPlugins(pluginItems.map(p => p.manifest));
+			const pluginIds = await repoApi().canBeUpdatedPlugins(pluginItems.map(p => p.manifest), pluginService.appVersion);
 			if (cancelled) return;
 			const conv: Record<string, boolean> = {};
 			pluginIds.forEach(id => conv[id] = true);
@@ -155,7 +155,7 @@ export default function(props: Props) {
 		return () => {
 			cancelled = true;
 		};
-	}, [manifestsLoaded, pluginItems]);
+	}, [manifestsLoaded, pluginItems, pluginService.appVersion]);
 
 	const onDelete = useCallback(async (event: ItemEvent) => {
 		const item = event.item;

packages/app-desktop/gui/DropboxLoginScreen.tsx

@@ -13,19 +13,19 @@ interface Props {
 
 class DropboxLoginScreenComponent extends React.Component<any, any> {
 
-	shared_: any;
+	private shared_: any;
 
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 
 		this.shared_ = new Shared(this, (msg: string) => bridge().showInfoMessageBox(msg), (msg: string) => bridge().showErrorMessageBox(msg));
 	}
 
-	UNSAFE_componentWillMount() {
+	public UNSAFE_componentWillMount() {
 		this.shared_.refreshUrl();
 	}
 
-	render() {
+	public render() {
 		const style = this.props.style;
 		const theme = themeStyle(this.props.themeId);
 

packages/app-desktop/gui/ErrorBoundary.tsx

@@ -32,7 +32,7 @@ export default class ErrorBoundary extends React.Component<Props, State> {
 
 	public state: State = { error: null, errorInfo: null, pluginInfos: [], plugins: {} };
 
-	componentDidCatch(error: any, errorInfo: ErrorInfo) {
+	public componentDidCatch(error: any, errorInfo: ErrorInfo) {
 		if (typeof error === 'string') error = { message: error };
 
 		const pluginInfos: PluginInfo[] = [];
@@ -58,7 +58,7 @@ export default class ErrorBoundary extends React.Component<Props, State> {
 		this.setState({ error, errorInfo, pluginInfos, plugins });
 	}
 
-	componentDidMount() {
+	public componentDidMount() {
 		const onAppClose = () => {
 			ipcRenderer.send('asynchronous-message', 'appCloseReply', {
 				canClose: true,
@@ -68,12 +68,12 @@ export default class ErrorBoundary extends React.Component<Props, State> {
 		ipcRenderer.on('appClose', onAppClose);
 	}
 
-	renderMessage() {
+	public renderMessage() {
 		const message = this.props.message || 'Joplin encountered a fatal error and could not continue.';
 		return <p>{message}</p>;
 	}
 
-	render() {
+	public render() {
 		if (this.state.error) {
 			const safeMode_click = async () => {
 				Setting.setValue('isSafeMode', true);

packages/app-desktop/gui/HelpButton.tsx

@@ -11,17 +11,17 @@ interface Props {
 }
 
 class HelpButtonComponent extends React.Component<Props> {
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 
 		this.onClick = this.onClick.bind(this);
 	}
 
-	onClick() {
+	public onClick() {
 		if (this.props.onClick) this.props.onClick();
 	}
 
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 		const style = Object.assign({}, this.props.style, { color: theme.color, textDecoration: 'none' });
 		const helpIconStyle = { flex: 0, width: 16, height: 16, marginLeft: 10 };

packages/app-desktop/gui/IconButton.tsx

@@ -9,7 +9,7 @@ interface Props {
 }
 
 class IconButton extends React.Component<Props> {
-	render() {
+	public render() {
 		const style = this.props.style;
 		const theme = themeStyle(this.props.themeId);
 		const iconStyle = {

packages/app-desktop/gui/ImportScreen.tsx

@@ -24,7 +24,7 @@ interface State {
 }
 
 class ImportScreenComponent extends React.Component<Props, State> {
-	UNSAFE_componentWillMount() {
+	public UNSAFE_componentWillMount() {
 		this.setState({
 			doImport: true,
 			filePath: this.props.filePath,
@@ -32,7 +32,7 @@ class ImportScreenComponent extends React.Component<Props, State> {
 		});
 	}
 
-	UNSAFE_componentWillReceiveProps(newProps: Props) {
+	public UNSAFE_componentWillReceiveProps(newProps: Props) {
 		if (newProps.filePath) {
 			this.setState(
 				{
@@ -47,13 +47,13 @@ class ImportScreenComponent extends React.Component<Props, State> {
 		}
 	}
 
-	componentDidMount() {
+	public componentDidMount() {
 		if (this.state.filePath && this.state.doImport) {
 			void this.doImport();
 		}
 	}
 
-	addMessage(key: string, text: string) {
+	public addMessage(key: string, text: string) {
 		const messages = this.state.messages.slice();
 
 		messages.push({ key: key, text: text });
@@ -61,7 +61,7 @@ class ImportScreenComponent extends React.Component<Props, State> {
 		this.setState({ messages: messages });
 	}
 
-	uniqueMessages() {
+	public uniqueMessages() {
 		const output = [];
 		const messages = this.state.messages.slice();
 		const foundKeys = [];
@@ -74,7 +74,7 @@ class ImportScreenComponent extends React.Component<Props, State> {
 		return output;
 	}
 
-	async doImport() {
+	public async doImport() {
 		const filePath = this.props.filePath;
 		const folderTitle = await Folder.findUniqueItemTitle(filename(filePath));
 
@@ -109,7 +109,7 @@ class ImportScreenComponent extends React.Component<Props, State> {
 		this.setState({ doImport: false });
 	}
 
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 		const messages = this.uniqueMessages();
 

packages/app-desktop/gui/ItemList.tsx

@@ -1,4 +1,7 @@
 import * as React from 'react';
+import Logger from '@joplin/lib/Logger';
+
+const logger = Logger.create('ItemList');
 
 interface Props {
 	style: any;
@@ -8,6 +11,7 @@ interface Props {
 	onKeyDown?: Function;
 	itemRenderer: Function;
 	className?: string;
+	onNoteDrop?: Function;
 }
 
 interface State {
@@ -20,7 +24,7 @@ class ItemList extends React.Component<Props, State> {
 	private scrollTop_: number;
 	private listRef: any;
 
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 
 		this.scrollTop_ = 0;
@@ -29,14 +33,15 @@ class ItemList extends React.Component<Props, State> {
 
 		this.onScroll = this.onScroll.bind(this);
 		this.onKeyDown = this.onKeyDown.bind(this);
+		this.onDrop = this.onDrop.bind(this);
 	}
 
-	visibleItemCount(props: Props = undefined) {
+	public visibleItemCount(props: Props = undefined) {
 		if (typeof props === 'undefined') props = this.props;
 		return Math.ceil(props.style.height / props.itemHeight);
 	}
 
-	updateStateItemIndexes(props: Props = undefined) {
+	public updateStateItemIndexes(props: Props = undefined) {
 		if (typeof props === 'undefined') props = this.props;
 
 		const topItemIndex = Math.floor(this.scrollTop_ / props.itemHeight);
@@ -45,38 +50,66 @@ class ItemList extends React.Component<Props, State> {
 		let bottomItemIndex = topItemIndex + (visibleItemCount - 1);
 		if (bottomItemIndex >= props.items.length) bottomItemIndex = props.items.length - 1;
 
+		// EDGE CASE:
+		// ref: https://github.com/laurent22/joplin/issues/4124
+		// when the note list is hidden, visibleItemCount is negative, and scroll top is positive when a note is selected
+		if (visibleItemCount < 0 && this.scrollTop_ > 0) {
+			logger.warn('Resetting scrollTop to 0. visibleItemCount is negative, scrollTop is positive.');
+			// we will reset the scroll top so that there is no blank space at the top of note list
+			this.scrollTop_ = 0;
+		}
+
 		this.setState({
 			topItemIndex: topItemIndex,
 			bottomItemIndex: bottomItemIndex,
 		});
 	}
 
-	offsetTop() {
+	public offsetTop() {
 		return this.listRef.current ? this.listRef.current.offsetTop : 0;
 	}
 
-	offsetScroll() {
+	public offsetScroll() {
 		return this.scrollTop_;
 	}
 
-	UNSAFE_componentWillMount() {
+	public UNSAFE_componentWillMount() {
 		this.updateStateItemIndexes();
 	}
 
-	UNSAFE_componentWillReceiveProps(newProps: Props) {
+	public UNSAFE_componentWillReceiveProps(newProps: Props) {
 		this.updateStateItemIndexes(newProps);
 	}
 
-	onScroll(event: any) {
+	public componentDidUpdate(): void {
+		// EDGE CASE
+		// scroll top is not updated when item list visibility is toggled
+		// if the user was at the bottom of the item list before hiding, blank spaces are added at the bottom of the item list
+		if (this.offsetScroll() !== this.listRef.current?.scrollTop) {
+			logger.warn(`scrollTop mismatch. Updating scrollTop with current listRef scrollTop(${this.listRef.current.scrollTop})`);
+			// update scroll postion once if there is a mismatch in scroll position after showing item list
+			this.onScroll({
+				target: {
+					scrollTop: this.listRef.current.scrollTop,
+				},
+			});
+		}
+	}
+
+	public onScroll(event: any) {
 		this.scrollTop_ = event.target.scrollTop;
 		this.updateStateItemIndexes();
 	}
 
-	onKeyDown(event: any) {
+	public onKeyDown(event: any) {
 		if (this.props.onKeyDown) this.props.onKeyDown(event);
 	}
 
-	makeItemIndexVisible(itemIndex: number) {
+	public onDrop(event: any) {
+		if (this.props.onNoteDrop) this.props.onNoteDrop(event);
+	}
+
+	public makeItemIndexVisible(itemIndex: number) {
 		const top = Math.min(this.props.items.length - 1, this.state.topItemIndex);
 		const bottom = Math.max(0, this.state.bottomItemIndex);
 
@@ -113,7 +146,7 @@ class ItemList extends React.Component<Props, State> {
 	// 	return true;
 	// }
 
-	render() {
+	public render() {
 		const items = this.props.items;
 		const style = Object.assign({}, this.props.style, {
 			overflowX: 'hidden',
@@ -141,7 +174,7 @@ class ItemList extends React.Component<Props, State> {
 		if (this.props.className) classes.push(this.props.className);
 
 		return (
-			<div ref={this.listRef} className={classes.join(' ')} style={style} onScroll={this.onScroll} onKeyDown={this.onKeyDown}>
+			<div ref={this.listRef} className={classes.join(' ')} style={style} onScroll={this.onScroll} onKeyDown={this.onKeyDown} onDrop={this.onDrop}>
 				{itemComps}
 			</div>
 		);

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

@@ -123,7 +123,7 @@ class MainScreenComponent extends React.Component<Props, State> {
 	private styles_: any;
 	private promptOnClose_: Function;
 
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 
 		this.state = {
@@ -250,11 +250,11 @@ class MainScreenComponent extends React.Component<Props, State> {
 		return this.updateLayoutPluginViews(output, plugins);
 	}
 
-	window_resize() {
+	private window_resize() {
 		this.updateRootLayoutSize();
 	}
 
-	setupAppCloseHandling() {
+	public setupAppCloseHandling() {
 		this.waitForNotesSavedIID_ = null;
 
 		// This event is dispached from the main process when the app is about
@@ -289,11 +289,11 @@ class MainScreenComponent extends React.Component<Props, State> {
 		});
 	}
 
-	notePropertiesDialog_close() {
+	private notePropertiesDialog_close() {
 		this.setState({ notePropertiesDialogOptions: {} });
 	}
 
-	noteContentPropertiesDialog_close() {
+	private noteContentPropertiesDialog_close() {
 		this.setState({ noteContentPropertiesDialogOptions: {} });
 	}
 
@@ -305,14 +305,14 @@ class MainScreenComponent extends React.Component<Props, State> {
 		this.setState({ shareFolderDialogOptions: { visible: false, folderId: '' } });
 	}
 
-	updateMainLayout(layout: LayoutItem) {
+	public updateMainLayout(layout: LayoutItem) {
 		this.props.dispatch({
 			type: 'MAIN_LAYOUT_SET',
 			value: layout,
 		});
 	}
 
-	updateRootLayoutSize() {
+	public updateRootLayoutSize() {
 		this.updateMainLayout(produce(this.props.mainLayout, (draft: any) => {
 			const s = this.rootLayoutSize();
 			draft.width = s.width;
@@ -320,7 +320,7 @@ class MainScreenComponent extends React.Component<Props, State> {
 		}));
 	}
 
-	componentDidUpdate(prevProps: Props, prevState: State) {
+	public componentDidUpdate(prevProps: Props, prevState: State) {
 		if (prevProps.style.width !== this.props.style.width ||
 			prevProps.style.height !== this.props.style.height ||
 			this.messageBoxVisible(prevProps) !== this.messageBoxVisible(this.props)
@@ -383,24 +383,24 @@ class MainScreenComponent extends React.Component<Props, State> {
 		}
 	}
 
-	layoutModeListenerKeyDown(event: any) {
+	public layoutModeListenerKeyDown(event: any) {
 		if (event.key !== 'Escape') return;
 		if (!this.props.layoutMoveMode) return;
 		void CommandService.instance().execute('toggleLayoutMoveMode');
 	}
 
-	componentDidMount() {
+	public componentDidMount() {
 		window.addEventListener('keydown', this.layoutModeListenerKeyDown);
 	}
 
-	componentWillUnmount() {
+	public componentWillUnmount() {
 		this.unregisterCommands();
 
 		window.removeEventListener('resize', this.window_resize);
 		window.removeEventListener('keydown', this.layoutModeListenerKeyDown);
 	}
 
-	async waitForNoteToSaved(noteId: string) {
+	public async waitForNoteToSaved(noteId: string) {
 		while (noteId && this.props.editorNoteStatuses[noteId] === 'saving') {
 			// eslint-disable-next-line no-console
 			console.info('Waiting for note to be saved...', this.props.editorNoteStatuses);
@@ -408,7 +408,7 @@ class MainScreenComponent extends React.Component<Props, State> {
 		}
 	}
 
-	async printTo_(target: string, options: any) {
+	public async printTo_(target: string, options: any) {
 		// Concurrent print calls are disallowed to avoid incorrect settings being restored upon completion
 		if (this.isPrinting_) {
 			// eslint-disable-next-line no-console
@@ -449,23 +449,23 @@ class MainScreenComponent extends React.Component<Props, State> {
 		this.isPrinting_ = false;
 	}
 
-	rootLayoutSize() {
+	public rootLayoutSize() {
 		return {
 			width: window.innerWidth,
 			height: this.rowHeight(),
 		};
 	}
 
-	rowHeight() {
+	public rowHeight() {
 		if (!this.props) return 0;
 		return this.props.style.height - (this.messageBoxVisible() ? this.messageBoxHeight() : 0);
 	}
 
-	messageBoxHeight() {
+	public messageBoxHeight() {
 		return 50;
 	}
 
-	styles(themeId: number, width: number, height: number, messageBoxVisible: boolean) {
+	public styles(themeId: number, width: number, height: number, messageBoxVisible: boolean) {
 		const styleKey = [themeId, width, height, messageBoxVisible].join('_');
 		if (styleKey === this.styleKey_) return this.styles_;
 
@@ -539,7 +539,7 @@ class MainScreenComponent extends React.Component<Props, State> {
 		);
 	}
 
-	renderNotification(theme: any, styles: any) {
+	public renderNotification(theme: any, styles: any) {
 		if (!this.messageBoxVisible()) return null;
 
 		const onViewStatusScreen = () => {
@@ -658,33 +658,33 @@ class MainScreenComponent extends React.Component<Props, State> {
 		);
 	}
 
-	messageBoxVisible(props: Props = null) {
+	public messageBoxVisible(props: Props = null) {
 		if (!props) props = this.props;
 		return props.hasDisabledSyncItems || props.showMissingMasterKeyMessage || props.showNeedUpgradingMasterKeyMessage || props.showShouldReencryptMessage || props.hasDisabledEncryptionItems || this.props.shouldUpgradeSyncTarget || props.isSafeMode || this.showShareInvitationNotification(props) || this.props.needApiAuth || this.props.showInstallTemplatesPlugin;
 	}
 
-	registerCommands() {
+	public registerCommands() {
 		for (const command of commands) {
 			CommandService.instance().registerRuntime(command.declaration.name, command.runtime(this));
 		}
 	}
 
-	unregisterCommands() {
+	public unregisterCommands() {
 		for (const command of commands) {
 			CommandService.instance().unregisterRuntime(command.declaration.name);
 		}
 	}
 
-	resizableLayout_resize(event: any) {
+	private resizableLayout_resize(event: any) {
 		this.updateMainLayout(event.layout);
 	}
 
-	resizableLayout_moveButtonClick(event: MoveButtonClickEvent) {
+	private resizableLayout_moveButtonClick(event: MoveButtonClickEvent) {
 		const newLayout = move(this.props.mainLayout, event.itemKey, event.direction);
 		this.updateMainLayout(newLayout);
 	}
 
-	resizableLayout_renderItem(key: string, event: any) {
+	private resizableLayout_renderItem(key: string, event: any) {
 		// Key should never be undefined but somehow it can happen, also not
 		// clear how. For now in this case render nothing so that the app
 		// doesn't crash.
@@ -770,7 +770,7 @@ class MainScreenComponent extends React.Component<Props, State> {
 		}
 	}
 
-	renderPluginDialogs() {
+	public renderPluginDialogs() {
 		const output = [];
 		const infos = pluginUtils.viewInfosByType(this.props.plugins, 'webview');
 
@@ -801,7 +801,7 @@ class MainScreenComponent extends React.Component<Props, State> {
 		);
 	}
 
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 		const style = Object.assign(
 			{

packages/app-desktop/gui/MenuBar.tsx

@@ -489,7 +489,6 @@ function useMenu(props: Props) {
 			function _showAbout() {
 				const v = versionInfo(packageInfo, PluginService.instance().plugins);
 
-
 				const copyToClipboard = bridge().showMessageBox(v.message, {
 					icon: `${bridge().electronApp().buildDir()}/icons/128x128.png`,
 					buttons: [_('Copy'), _('OK')],

packages/app-desktop/gui/Navigator.tsx

@@ -9,7 +9,7 @@ interface Props {
 }
 
 class NavigatorComponent extends React.Component<Props> {
-	UNSAFE_componentWillReceiveProps(newProps: Props) {
+	public UNSAFE_componentWillReceiveProps(newProps: Props) {
 		if (newProps.route) {
 			const screenInfo = this.props.screens[newProps.route.routeName];
 			const devMarker = Setting.value('env') === 'dev' ? ` (DEV - ${Setting.value('profileDir')})` : '';
@@ -21,7 +21,7 @@ class NavigatorComponent extends React.Component<Props> {
 		}
 	}
 
-	updateWindowTitle(title: string) {
+	public updateWindowTitle(title: string) {
 		try {
 			if (bridge().window()) bridge().window().setTitle(title);
 		} catch (error) {
@@ -29,7 +29,7 @@ class NavigatorComponent extends React.Component<Props> {
 		}
 	}
 
-	render() {
+	public render() {
 		if (!this.props.route) throw new Error('Route must not be null');
 
 		const route = this.props.route;

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

@@ -77,16 +77,6 @@ function stripMarkup(markupLanguage: number, markup: string, options: any = null
 	return	markupToHtml_.stripMarkup(markupLanguage, markup, options);
 }
 
-function createSyntheticClipboardEventWithoutHTML(): ClipboardEvent {
-	const clipboardData = new DataTransfer();
-	for (const format of clipboard.availableFormats()) {
-		if (format !== 'text/html') {
-			clipboardData.setData(format, clipboard.read(format));
-		}
-	}
-	return new ClipboardEvent('paste', { clipboardData });
-}
-
 interface TinyMceCommand {
 	name: string;
 	value?: any;
@@ -1076,24 +1066,24 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 			}
 		}
 
-		function onKeyDown(event: any) {
+		async function onKeyDown(event: any) {
 			// It seems "paste as text" is handled automatically on Windows and Linux,
 			// so we need to run the below code only on macOS. If we were to run this
 			// on Windows/Linux, we would have this double-paste issue:
 			// https://github.com/laurent22/joplin/issues/4243
 
-			// Handle "paste as text". Note that when pressing CtrlOrCmd+Shift+V it's going
-			// to trigger the "keydown" event but not the "paste" event, so it's ok to process
-			// it here and we don't need to do anything special in onPaste
-			if (!shim.isWindows() && !shim.isLinux()) {
-				if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.code === 'KeyV') {
-					pasteAsPlainText();
-				}
+			// While "paste as text" functionality is handled by Windows and Linux, if we
+			// want to allow the user to customize the shortcut we need to prevent when it
+			// has the default value so it doesn't paste the content twice
+			// (one by the system and the other by our code)
+			if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.code === 'KeyV') {
+				event.preventDefault();
+				pasteAsPlainText(null);
 			}
 		}
 
-		async function onPasteAsText() {
-			await onPaste(createSyntheticClipboardEventWithoutHTML());
+		function onPasteAsText() {
+			pasteAsPlainText(null);
 		}
 
 		editor.on(TinyMceEditorEvents.KeyUp, onKeyUp);

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

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react';
 import { ResourceInfos } from './types';
 import markupLanguageUtils from '../../../utils/markupLanguageUtils';
 import Setting from '@joplin/lib/models/Setting';
+import shim from '@joplin/lib/shim';
 
 const { themeStyle } = require('@joplin/lib/theme');
 import Note from '@joplin/lib/models/Note';
@@ -23,6 +24,7 @@ export interface MarkupToHtmlOptions {
 	useCustomPdfViewer?: boolean;
 	noteId?: string;
 	vendorDir?: string;
+	platformName?: string;
 }
 
 export default function useMarkupToHtml(deps: HookDependencies) {
@@ -40,6 +42,7 @@ export default function useMarkupToHtml(deps: HookDependencies) {
 		options = {
 			replaceResourceInternalToExternalLinks: false,
 			resourceInfos: {},
+			platformName: shim.platformName(),
 			...options,
 		};
 
@@ -62,6 +65,7 @@ export default function useMarkupToHtml(deps: HookDependencies) {
 			postMessageSyntax: 'ipcProxySendToHost',
 			splitted: true,
 			externalAssetsOnly: true,
+			codeHighlightCacheKey: 'useMarkupToHtml',
 		}, options));
 
 		return result;

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

@@ -241,6 +241,7 @@ const NoteListComponent = (props: Props) => {
 		event.dataTransfer.setDragImage(new Image(), 1, 1);
 		event.dataTransfer.clearData();
 		event.dataTransfer.setData('text/x-jop-note-ids', JSON.stringify(noteIds));
+		event.dataTransfer.effectAllowed = 'move';
 	};
 
 	const renderItem = useCallback((item: any, index: number) => {
@@ -275,7 +276,6 @@ const NoteListComponent = (props: Props) => {
 			onCheckboxClick={noteItem_checkboxClick}
 			onDragStart={noteItem_dragStart}
 			onNoteDragOver={noteItem_noteDragOver}
-			onNoteDrop={noteItem_noteDrop}
 			onTitleClick={noteItem_titleClick}
 			onContextMenu={itemContextMenu}
 		/>;
@@ -295,7 +295,7 @@ const NoteListComponent = (props: Props) => {
 	useEffect(() => {
 		if (previousSelectedNoteIds !== props.selectedNoteIds && props.selectedNoteIds.length === 1) {
 			const id = props.selectedNoteIds[0];
-			const doRefocus = props.notes.length < previousNotes.length;
+			const doRefocus = props.notes.length < previousNotes.length && !props.focusedField;
 
 			for (let i = 0; i < props.notes.length; i++) {
 				if (props.notes[i].id === id) {
@@ -312,8 +312,7 @@ const NoteListComponent = (props: Props) => {
 		if (previousVisible !== props.visible) {
 			updateSizeState();
 		}
-		// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
-	}, [previousSelectedNoteIds, previousNotes, previousVisible, props.selectedNoteIds, props.notes]);
+	}, [previousSelectedNoteIds, previousNotes, previousVisible, props.selectedNoteIds, props.notes, props.focusedField, props.visible]);
 
 	const scrollNoteIndex_ = (keyCode: any, ctrlKey: any, metaKey: any, noteIndex: any) => {
 
@@ -526,6 +525,7 @@ const NoteListComponent = (props: Props) => {
 				style={props.size}
 				itemRenderer={renderItem}
 				onKeyDown={onKeyDown}
+				onNoteDrop={noteItem_noteDrop}
 			/>
 		);
 	};
@@ -559,6 +559,7 @@ const mapStateToProps = (state: AppState) => {
 		highlightedWords: state.highlightedWords,
 		plugins: state.pluginService.plugins,
 		customCss: state.customCss,
+		focusedField: state.focusedField,
 	};
 };
 

packages/app-desktop/gui/NoteList/types.ts

@@ -23,4 +23,5 @@ export interface Props {
 	highlightedWords: string[];
 	provisionalNoteIds: string[];
 	visible: boolean;
+	focusedField: string;
 }

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

@@ -1,6 +1,6 @@
 import { AppState } from '../../app.reducer';
 import * as React from 'react';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useMemo, useState } from 'react';
 import SearchBar from '../SearchBar/SearchBar';
 import Button, { ButtonLevel, ButtonSize, buttonSizePx } from '../Button/Button';
 import CommandService from '@joplin/lib/services/CommandService';
@@ -11,6 +11,13 @@ import { _ } from '@joplin/lib/locale';
 const { connect } = require('react-redux');
 const styled = require('styled-components').default;
 
+enum BaseBreakpoint {
+	Sm = 75,
+	Md = 80,
+	Lg = 120,
+	Xl = 474,
+}
+
 interface Props {
 	showNewNoteButtons: boolean;
 	sortOrderButtonsVisible: boolean;
@@ -18,6 +25,15 @@ interface Props {
 	sortOrderReverse: boolean;
 	notesParentType: string;
 	height: number;
+	width: number;
+	onContentHeightChange: (sameRow: boolean)=> void;
+}
+
+interface Breakpoints {
+	Sm: number;
+	Md: number;
+	Lg: number;
+	Xl: number;
 }
 
 const StyledRoot = styled.div`
@@ -34,7 +50,9 @@ const StyledButton = styled(Button)`
 	width: auto;
 	height: 26px;
 	min-height: 26px;
-	flex: 1 0 auto;
+	min-width: 37px;
+	max-width: none;
+	white-space: nowrap;
 
   .fa, .fas {
     font-size: 11px;
@@ -54,7 +72,13 @@ const StyledPairButtonR = styled(Button)`
 	width: auto;
 `;
 
-const RowContainer = styled.div`
+const TopRow = styled.div`
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 8px;
+`;
+
+const BottomRow = styled.div`
 	display: flex;
 	flex-direction: row;
 	flex: 1 1 auto;
@@ -68,7 +92,102 @@ const SortOrderButtonsContainer = styled.div`
 `;
 
 function NoteListControls(props: Props) {
+	const [dynamicBreakpoints, setDynamicBreakpoints] = useState<Breakpoints>({ Sm: BaseBreakpoint.Sm, Md: BaseBreakpoint.Md, Lg: BaseBreakpoint.Lg, Xl: BaseBreakpoint.Xl });
+
 	const searchBarRef = useRef(null);
+	const newNoteRef = useRef(null);
+	const newTodoRef = useRef(null);
+	const noteControlsRef = useRef(null);
+	const searchAndSortRef = useRef(null);
+
+	const getTextWidth = (text: string): number => {
+		const canvas = document.createElement('canvas');
+		if (!canvas) throw new Error('Failed to create canvas element');
+		const ctx = canvas.getContext('2d');
+		if (!ctx) throw new Error('Failed to get context');
+		const fontWeight = getComputedStyle(newNoteRef.current).getPropertyValue('font-weight');
+		const fontSize = getComputedStyle(newNoteRef.current).getPropertyValue('font-size');
+		const fontFamily = getComputedStyle(newNoteRef.current).getPropertyValue('font-family');
+		ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+
+		return ctx.measureText(text).width;
+	};
+
+	// Initialize language-specific breakpoints
+	useEffect(() => {
+		// Use the longest string to calculate the amount of extra width needed
+		const smAdditional = getTextWidth(_('note')) > getTextWidth(_('to-do')) ? getTextWidth(_('note')) : getTextWidth(_('to-do'));
+		const mdAdditional = getTextWidth(_('New note')) > getTextWidth(_('New to-do')) ? getTextWidth(_('New note')) : getTextWidth(_('New to-do'));
+
+		const Sm = BaseBreakpoint.Sm + smAdditional * 2;
+		const Md = BaseBreakpoint.Md + mdAdditional * 2;
+		const Lg = BaseBreakpoint.Lg + Md;
+		const Xl = BaseBreakpoint.Xl;
+
+		setDynamicBreakpoints({ Sm, Md, Lg, Xl });
+	}, []);
+
+	const breakpoint = useMemo(() => {
+		// Find largest breakpoint that width is less than
+		const index = Object.values(dynamicBreakpoints).findIndex(x => props.width < x);
+
+		return index === -1 ? dynamicBreakpoints.Xl : Object.values(dynamicBreakpoints)[index];
+	}, [props.width, dynamicBreakpoints]);
+
+	const noteButtonText = useMemo(() => {
+		if (breakpoint === dynamicBreakpoints.Sm) {
+			return '';
+		} else if (breakpoint === dynamicBreakpoints.Md) {
+			return _('note');
+		} else {
+			return _('New note');
+		}
+	}, [breakpoint, dynamicBreakpoints]);
+
+	const todoButtonText = useMemo(() => {
+		if (breakpoint === dynamicBreakpoints.Sm) {
+			return '';
+		} else if (breakpoint === dynamicBreakpoints.Md) {
+			return _('to-do');
+		} else {
+			return _('New to-do');
+		}
+	}, [breakpoint, dynamicBreakpoints]);
+
+	const noteIcon = useMemo(() => {
+		if (breakpoint === dynamicBreakpoints.Sm) {
+			return 'icon-note';
+		} else {
+			return 'fas fa-plus';
+		}
+	}, [breakpoint, dynamicBreakpoints]);
+
+	const todoIcon = useMemo(() => {
+		if (breakpoint === dynamicBreakpoints.Sm) {
+			return 'far fa-check-square';
+		} else {
+			return 'fas fa-plus';
+		}
+	}, [breakpoint, dynamicBreakpoints]);
+
+	const showTooltip = useMemo(() => {
+		if (breakpoint === dynamicBreakpoints.Sm) {
+			return true;
+		} else {
+			return false;
+		}
+	}, [breakpoint, dynamicBreakpoints.Sm]);
+
+	useEffect(() => {
+		if (breakpoint === dynamicBreakpoints.Xl) {
+			noteControlsRef.current.style.flexDirection = 'row';
+			searchAndSortRef.current.style.flex = '2 1 auto';
+			props.onContentHeightChange(true);
+		} else {
+			noteControlsRef.current.style.flexDirection = 'column';
+			props.onContentHeightChange(false);
+		}
+	}, [breakpoint, dynamicBreakpoints, props.onContentHeightChange]);
 
 	useEffect(() => {
 		CommandService.instance().registerRuntime('focusSearch', focusSearchRuntime(searchBarRef));
@@ -127,64 +246,63 @@ function NoteListControls(props: Props) {
 		if (!props.showNewNoteButtons) return null;
 
 		return (
-			<RowContainer>
-				<StyledButton
+			<TopRow className="new-note-todo-buttons">
+				<StyledButton ref={newNoteRef}
 					className="new-note-button"
-					tooltip={CommandService.instance().label('newNote')}
-					iconName="fas fa-plus"
-					title={_('%s', 'New note')}
+					tooltip={ showTooltip ? CommandService.instance().label('newNote') : '' }
+					iconName={noteIcon}
+					title={_('%s', noteButtonText)}
 					level={ButtonLevel.Primary}
 					size={ButtonSize.Small}
 					onClick={onNewNoteButtonClick}
 				/>
-				<StyledButton
+				<StyledButton ref={newTodoRef}
 					className="new-todo-button"
-					tooltip={CommandService.instance().label('newTodo')}
-					iconName="fas fa-plus"
-					title={_('%s', 'New to-do')}
+					tooltip={ showTooltip ? CommandService.instance().label('newTodo') : '' }
+					iconName={todoIcon}
+					title={_('%s', todoButtonText)}
 					level={ButtonLevel.Secondary}
 					size={ButtonSize.Small}
 					onClick={onNewTodoButtonClick}
 				/>
-			</RowContainer>
+			</TopRow>
 		);
 	}
 
 	return (
-		<StyledRoot>
+		<StyledRoot ref={noteControlsRef}>
 			{renderNewNoteButtons()}
-			<RowContainer>
+			<BottomRow ref={searchAndSortRef} className="search-and-sort">
 				<SearchBar inputRef={searchBarRef}/>
-				<SortOrderButtonsContainer>
-					{showsSortOrderButtons() &&
-					<StyledPairButtonL
-						className="sort-order-field-button"
-						tooltip={sortOrderFieldTooltip()}
-						iconName={sortOrderFieldIcon()}
-						level={ButtonLevel.Secondary}
-						size={ButtonSize.Small}
-						onClick={onSortOrderFieldButtonClick}
-					/>
-					}
-					{showsSortOrderButtons() &&
-					<StyledPairButtonR
-						className="sort-order-reverse-button"
-						tooltip={CommandService.instance().label('toggleNotesSortOrderReverse')}
-						iconName={sortOrderReverseIcon()}
-						level={ButtonLevel.Secondary}
-						size={ButtonSize.Small}
-						onClick={onSortOrderReverseButtonClick}
-					/>
-					}
-				</SortOrderButtonsContainer>
-			</RowContainer>
+				{showsSortOrderButtons() &&
+					<SortOrderButtonsContainer>
+						<StyledPairButtonL
+							className="sort-order-field-button"
+							tooltip={sortOrderFieldTooltip()}
+							iconName={sortOrderFieldIcon()}
+							level={ButtonLevel.Secondary}
+							size={ButtonSize.Small}
+							onClick={onSortOrderFieldButtonClick}
+						/>
+						<StyledPairButtonR
+							className="sort-order-reverse-button"
+							tooltip={CommandService.instance().label('toggleNotesSortOrderReverse')}
+							iconName={sortOrderReverseIcon()}
+							level={ButtonLevel.Secondary}
+							size={ButtonSize.Small}
+							onClick={onSortOrderReverseButtonClick}
+						/>
+					</SortOrderButtonsContainer>
+				}
+			</BottomRow>
 		</StyledRoot>
 	);
 }
 
 const mapStateToProps = (state: AppState) => {
 	return {
-		showNewNoteButtons: state.focusedField !== 'globalSearch',
+		// TODO: showNewNoteButtons and the logic associated is not needed anymore.
+		showNewNoteButtons: true,
 		sortOrderButtonsVisible: state.settings['notes.sortOrder.buttonsVisible'],
 		sortOrderField: state.settings['notes.sortOrder.field'],
 		sortOrderReverse: state.settings['notes.sortOrder.reverse'],

packages/app-desktop/gui/NoteListItem.tsx

@@ -56,7 +56,6 @@ interface NoteListItemProps {
 	onCheckboxClick: any;
 	onDragStart: any;
 	onNoteDragOver: any;
-	onNoteDrop: any;
 	onTitleClick: any;
 	onContextMenu(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void;
 }
@@ -175,7 +174,6 @@ function NoteListItem(props: NoteListItemProps, ref: any) {
 		<StyledRoot
 			className={classNames}
 			onDragOver={props.onNoteDragOver}
-			onDrop={props.onNoteDrop}
 			width={props.width}
 			height={props.height}
 			isProvisional={props.isProvisional}

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

@@ -1,6 +1,6 @@
 import { themeStyle } from '@joplin/lib/theme';
 import * as React from 'react';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import NoteList from '../NoteList/NoteList';
 import NoteListControls from '../NoteListControls/NoteListControls';
 import { Size } from '../ResizableLayout/utils/types';
@@ -22,7 +22,15 @@ const StyledRoot = styled.div`
 
 export default function NoteListWrapper(props: Props) {
 	const theme = themeStyle(props.themeId);
-	const controlHeight = theme.topRowHeight;
+	const [controlHeight, setControlHeight] = useState(theme.topRowHeight);
+
+	const onContentHeightChange = (sameRow: boolean) => {
+		if (sameRow) {
+			setControlHeight(theme.topRowHeight);
+		} else {
+			setControlHeight(theme.topRowHeight * 2);
+		}
+	};
 
 	const noteListSize = useMemo(() => {
 		return {
@@ -33,7 +41,7 @@ export default function NoteListWrapper(props: Props) {
 
 	return (
 		<StyledRoot>
-			<NoteListControls height={controlHeight}/>
+			<NoteListControls height={controlHeight} width={noteListSize.width} onContentHeightChange={onContentHeightChange}/>
 			<NoteList resizableLayoutEventEmitter={props.resizableLayoutEventEmitter} size={noteListSize} visible={props.visible}/>
 		</StyledRoot>
 	);

packages/app-desktop/gui/NotePropertiesDialog.tsx

@@ -31,7 +31,7 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 	private styleKey_: number;
 	private styles_: any;
 
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 
 		this.revisionsLink_click = this.revisionsLink_click.bind(this);
@@ -56,17 +56,17 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		};
 	}
 
-	componentDidMount() {
+	public componentDidMount() {
 		void this.loadNote(this.props.noteId);
 	}
 
-	componentDidUpdate() {
+	public componentDidUpdate() {
 		if (this.state.editedKey === null) {
 			this.okButton.current.focus();
 		}
 	}
 
-	async loadNote(noteId: string) {
+	public async loadNote(noteId: string) {
 		if (!noteId) {
 			this.setState({ formNote: null });
 		} else {
@@ -76,7 +76,7 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		}
 	}
 
-	latLongFromLocation(location: string) {
+	public latLongFromLocation(location: string) {
 		const o: any = {};
 		const l = location.split(',');
 		if (l.length === 2) {
@@ -89,7 +89,7 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		return o;
 	}
 
-	noteToFormNote(note: NoteEntity) {
+	public noteToFormNote(note: NoteEntity) {
 		const formNote: any = {};
 
 		formNote.user_updated_time = time.formatMsToLocal(note.user_updated_time);
@@ -113,7 +113,7 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		return formNote;
 	}
 
-	formNoteToNote(formNote: any) {
+	public formNoteToNote(formNote: any) {
 		const note = Object.assign({ id: formNote.id }, this.latLongFromLocation(formNote.location));
 		note.user_created_time = time.formatLocalToMs(formNote.user_created_time);
 		note.user_updated_time = time.formatLocalToMs(formNote.user_updated_time);
@@ -127,7 +127,7 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		return note;
 	}
 
-	styles(themeId: number) {
+	public styles(themeId: number) {
 		const styleKey = themeId;
 		if (styleKey === this.styleKey_) return this.styles_;
 
@@ -168,7 +168,7 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		return this.styles_;
 	}
 
-	async closeDialog(applyChanges: boolean) {
+	public async closeDialog(applyChanges: boolean) {
 		if (applyChanges) {
 			await this.saveProperty();
 			const note = this.formNoteToNote(this.state.formNote);
@@ -183,16 +183,16 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		}
 	}
 
-	buttonRow_click(event: any) {
+	private buttonRow_click(event: any) {
 		void this.closeDialog(event.buttonName === 'ok');
 	}
 
-	revisionsLink_click() {
+	private revisionsLink_click() {
 		void this.closeDialog(false);
 		if (this.props.onRevisionLinkClick) this.props.onRevisionLinkClick();
 	}
 
-	editPropertyButtonClick(key: string, initialValue: any) {
+	public editPropertyButtonClick(key: string, initialValue: any) {
 		this.setState({
 			editedKey: key,
 			editedValue: initialValue,
@@ -207,7 +207,7 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		}, 100);
 	}
 
-	async saveProperty() {
+	public async saveProperty() {
 		if (!this.state.editedKey) return;
 
 		return new Promise((resolve: Function) => {
@@ -233,7 +233,7 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		});
 	}
 
-	async cancelProperty() {
+	public async cancelProperty() {
 		return new Promise((resolve: Function) => {
 			this.okButton.current.focus();
 			this.setState({
@@ -245,7 +245,7 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		});
 	}
 
-	createNoteField(key: string, value: any) {
+	public createNoteField(key: string, value: any) {
 		const styles = this.styles(this.props.themeId);
 		const theme = themeStyle(this.props.themeId);
 		const labelComp = <label style={Object.assign({}, theme.textStyle, theme.controlBoxLabel)}>{this.formatLabel(key)}</label>;
@@ -364,12 +364,12 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		);
 	}
 
-	formatLabel(key: string) {
+	public formatLabel(key: string) {
 		if (this.keyToLabel_[key]) return this.keyToLabel_[key];
 		return key;
 	}
 
-	formatValue(key: string, note: NoteEntity) {
+	public formatValue(key: string, note: NoteEntity) {
 		if (key === 'location') {
 			if (!Number(note.latitude) && !Number(note.longitude)) return null;
 			const dms = formatcoords(Number(note.latitude), Number(note.longitude));
@@ -383,7 +383,7 @@ class NotePropertiesDialog extends React.Component<Props, State> {
 		return (note as any)[key];
 	}
 
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 		const formNote = this.state.formNote;
 

packages/app-desktop/gui/NoteRevisionViewer.tsx

@@ -38,7 +38,7 @@ class NoteRevisionViewerComponent extends React.PureComponent<Props, State> {
 	private viewerRef_: any;
 	private helpButton_onClick: Function;
 
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 
 		this.state = {
@@ -57,7 +57,7 @@ class NoteRevisionViewerComponent extends React.PureComponent<Props, State> {
 		this.webview_ipcMessage = this.webview_ipcMessage.bind(this);
 	}
 
-	style() {
+	public style() {
 		const theme = themeStyle(this.props.themeId);
 
 		const style = {
@@ -74,7 +74,7 @@ class NoteRevisionViewerComponent extends React.PureComponent<Props, State> {
 		return style;
 	}
 
-	async viewer_domReady() {
+	private async viewer_domReady() {
 		// this.viewerRef_.current.openDevTools();
 
 		const revisions = await Revision.allByType(BaseModel.TYPE_NOTE, this.props.noteId);
@@ -90,7 +90,7 @@ class NoteRevisionViewerComponent extends React.PureComponent<Props, State> {
 		);
 	}
 
-	async importButton_onClick() {
+	private async importButton_onClick() {
 		if (!this.state.note) return;
 		this.setState({ restoring: true });
 		await RevisionService.instance().importRevisionNote(this.state.note);
@@ -98,11 +98,11 @@ class NoteRevisionViewerComponent extends React.PureComponent<Props, State> {
 		alert(RevisionService.instance().restoreSuccessMessage(this.state.note));
 	}
 
-	backButton_click() {
+	private backButton_click() {
 		if (this.props.onBack) this.props.onBack();
 	}
 
-	revisionList_onChange(event: any) {
+	private revisionList_onChange(event: any) {
 		const value = event.target.value;
 
 		if (!value) {
@@ -119,7 +119,7 @@ class NoteRevisionViewerComponent extends React.PureComponent<Props, State> {
 		}
 	}
 
-	async reloadNote() {
+	public async reloadNote() {
 		let noteBody = '';
 		let markupLanguage = MarkupToHtml.MARKUP_LANGUAGE_MARKDOWN;
 		if (!this.state.revisions.length || !this.state.currentRevId) {
@@ -153,7 +153,7 @@ class NoteRevisionViewerComponent extends React.PureComponent<Props, State> {
 		});
 	}
 
-	async webview_ipcMessage(event: any) {
+	private async webview_ipcMessage(event: any) {
 		// For the revision view, we only suppport a minimal subset of the IPC messages.
 		// For example, we don't need interactive checkboxes or sync between viewer and editor view.
 		// We try to get most links work though, except for internal (joplin://) links.
@@ -183,7 +183,7 @@ class NoteRevisionViewerComponent extends React.PureComponent<Props, State> {
 		}
 	}
 
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 		const style = this.style();
 

packages/app-desktop/gui/NoteSearchBar.tsx

@@ -20,7 +20,7 @@ class NoteSearchBar extends React.Component<Props> {
 
 	private backgroundColor: any;
 
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 
 		this.searchInput_change = this.searchInput_change.bind(this);
@@ -33,7 +33,7 @@ class NoteSearchBar extends React.Component<Props> {
 		this.backgroundColor = undefined;
 	}
 
-	style() {
+	public style() {
 		const theme = themeStyle(this.props.themeId);
 
 		const style = {
@@ -46,7 +46,7 @@ class NoteSearchBar extends React.Component<Props> {
 		return style;
 	}
 
-	buttonIconComponent(iconName: string, clickHandler: any, isEnabled: boolean) {
+	public buttonIconComponent(iconName: string, clickHandler: any, isEnabled: boolean) {
 		const theme = themeStyle(this.props.themeId);
 
 		const searchButton = {
@@ -74,12 +74,12 @@ class NoteSearchBar extends React.Component<Props> {
 		);
 	}
 
-	searchInput_change(event: any) {
+	private searchInput_change(event: any) {
 		const query = event.currentTarget.value;
 		this.triggerOnChange(query);
 	}
 
-	searchInput_keyDown(event: any) {
+	private searchInput_keyDown(event: any) {
 		if (event.keyCode === 13) {
 			// ENTER
 			event.preventDefault();
@@ -106,28 +106,28 @@ class NoteSearchBar extends React.Component<Props> {
 		}
 	}
 
-	previousButton_click() {
+	private previousButton_click() {
 		if (this.props.onPrevious) this.props.onPrevious();
 	}
 
-	nextButton_click() {
+	private nextButton_click() {
 		if (this.props.onNext) this.props.onNext();
 	}
 
-	closeButton_click() {
+	private closeButton_click() {
 		if (this.props.onClose) this.props.onClose();
 	}
 
-	triggerOnChange(query: string) {
+	public triggerOnChange(query: string) {
 		if (this.props.onChange) this.props.onChange(query);
 	}
 
-	focus() {
+	public focus() {
 		(this.refs.searchInput as any).focus();
 		(this.refs.searchInput as any).select();
 	}
 
-	render() {
+	public render() {
 		const query = this.props.query ? this.props.query : '';
 
 		// backgroundColor needs to cached to a local variable to prevent the

packages/app-desktop/gui/NoteStatusBar.tsx

@@ -11,7 +11,7 @@ interface Props {
 }
 
 class NoteStatusBarComponent extends React.Component<Props> {
-	style() {
+	public style() {
 		const theme = themeStyle(this.props.themeId);
 
 		const style = {
@@ -24,7 +24,7 @@ class NoteStatusBarComponent extends React.Component<Props> {
 		return style;
 	}
 
-	render() {
+	public render() {
 		const note = this.props.note;
 		return <div style={this.style().root}>{time.formatMsToLocal(note.user_updated_time)}</div>;
 	}

packages/app-desktop/gui/NoteTextViewer.tsx

@@ -17,7 +17,7 @@ export default class NoteTextViewerComponent extends React.Component<Props, any>
 	private webviewRef_: any;
 	private webviewListeners_: any = null;
 
-	constructor(props: any) {
+	public constructor(props: any) {
 		super(props);
 
 		this.webviewRef_ = React.createRef();
@@ -41,20 +41,20 @@ export default class NoteTextViewerComponent extends React.Component<Props, any>
 		this.webview_message = this.webview_message.bind(this);
 	}
 
-	webview_domReady(event: any) {
+	private webview_domReady(event: any) {
 		this.domReady_ = true;
 		if (this.props.onDomReady) this.props.onDomReady(event);
 	}
 
-	webview_ipcMessage(event: any) {
+	private webview_ipcMessage(event: any) {
 		if (this.props.onIpcMessage) this.props.onIpcMessage(event);
 	}
 
-	webview_load() {
+	private webview_load() {
 		this.webview_domReady({});
 	}
 
-	webview_message(event: any) {
+	private webview_message(event: any) {
 		if (!event.data || event.data.target !== 'main') return;
 
 		const callName = event.data.name;
@@ -68,11 +68,11 @@ export default class NoteTextViewerComponent extends React.Component<Props, any>
 		}
 	}
 
-	domReady() {
+	public domReady() {
 		return this.domReady_;
 	}
 
-	initWebview() {
+	public initWebview() {
 		const wv = this.webviewRef_.current;
 
 		if (!this.webviewListeners_) {
@@ -92,7 +92,7 @@ export default class NoteTextViewerComponent extends React.Component<Props, any>
 		this.webviewRef_.current.contentWindow.addEventListener('message', this.webview_message);
 	}
 
-	destroyWebview() {
+	public destroyWebview() {
 		const wv = this.webviewRef_.current;
 		if (!wv || !this.initialized_) return;
 
@@ -115,28 +115,28 @@ export default class NoteTextViewerComponent extends React.Component<Props, any>
 		this.domReady_ = false;
 	}
 
-	focus() {
+	public focus() {
 		if (this.webviewRef_.current) {
 			this.webviewRef_.current.focus();
 		}
 	}
 
-	tryInit() {
+	public tryInit() {
 		if (!this.initialized_ && this.webviewRef_.current) {
 			this.initWebview();
 			this.initialized_ = true;
 		}
 	}
 
-	componentDidMount() {
+	public componentDidMount() {
 		this.tryInit();
 	}
 
-	componentDidUpdate() {
+	public componentDidUpdate() {
 		this.tryInit();
 	}
 
-	componentWillUnmount() {
+	public componentWillUnmount() {
 		this.destroyWebview();
 	}
 
@@ -144,7 +144,7 @@ export default class NoteTextViewerComponent extends React.Component<Props, any>
 	// Wrap WebView functions
 	// ----------------------------------------------------------------
 
-	send(channel: string, arg0: any = null, arg1: any = null) {
+	public send(channel: string, arg0: any = null, arg1: any = null) {
 		const win = this.webviewRef_.current.contentWindow;
 
 		if (channel === 'focus') {
@@ -172,7 +172,7 @@ export default class NoteTextViewerComponent extends React.Component<Props, any>
 	// Wrap WebView functions (END)
 	// ----------------------------------------------------------------
 
-	render() {
+	public render() {
 		const viewerStyle = Object.assign({}, { border: 'none' }, this.props.viewerStyle);
 		return <iframe className="noteTextViewer" ref={this.webviewRef_} style={viewerStyle} src="gui/note-viewer/index.html"></iframe>;
 	}

packages/app-desktop/gui/OneDriveLoginScreen.tsx

@@ -14,7 +14,7 @@ interface Props {
 }
 
 class OneDriveLoginScreenComponent extends React.Component<any, any> {
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 
 		this.state = {
@@ -22,7 +22,7 @@ class OneDriveLoginScreenComponent extends React.Component<any, any> {
 		};
 	}
 
-	async componentDidMount() {
+	public async componentDidMount() {
 		const log = (s: any) => {
 			this.setState((state: any) => {
 				const authLog = state.authLog.slice();
@@ -48,15 +48,15 @@ class OneDriveLoginScreenComponent extends React.Component<any, any> {
 		}
 	}
 
-	startUrl() {
+	public startUrl() {
 		return reg.syncTarget().api().authCodeUrl(this.redirectUrl());
 	}
 
-	redirectUrl() {
+	public redirectUrl() {
 		return reg.syncTarget().api().nativeClientRedirectUrl();
 	}
 
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 
 		const logComps = [];

packages/app-desktop/gui/PromptDialog.tsx

@@ -27,13 +27,13 @@ export default class PromptDialog extends React.Component<Props, any> {
 	private styles_: any;
 	private styleKey_: string;
 
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 
 		this.answerInput_ = React.createRef();
 	}
 
-	UNSAFE_componentWillMount() {
+	public UNSAFE_componentWillMount() {
 		this.setState({
 			visible: false,
 			answer: this.props.defaultValue ? this.props.defaultValue : '',
@@ -41,7 +41,7 @@ export default class PromptDialog extends React.Component<Props, any> {
 		this.focusInput_ = true;
 	}
 
-	UNSAFE_componentWillReceiveProps(newProps: Props) {
+	public UNSAFE_componentWillReceiveProps(newProps: Props) {
 		if ('visible' in newProps && newProps.visible !== this.props.visible) {
 			this.setState({ visible: newProps.visible });
 			if (newProps.visible) this.focusInput_ = true;
@@ -52,12 +52,12 @@ export default class PromptDialog extends React.Component<Props, any> {
 		}
 	}
 
-	componentDidUpdate() {
+	public componentDidUpdate() {
 		if (this.focusInput_ && this.answerInput_.current) this.answerInput_.current.focus();
 		this.focusInput_ = false;
 	}
 
-	styles(themeId: number, width: number, height: number, visible: boolean) {
+	public styles(themeId: number, width: number, height: number, visible: boolean) {
 		const styleKey = `${themeId}_${width}_${height}_${visible}`;
 		if (styleKey === this.styleKey_) return this.styles_;
 
@@ -181,7 +181,7 @@ export default class PromptDialog extends React.Component<Props, any> {
 		return this.styles_;
 	}
 
-	render() {
+	public render() {
 		const style = this.props.style;
 		const theme = themeStyle(this.props.themeId);
 		const buttonTypes = this.props.buttons ? this.props.buttons : ['ok', 'cancel'];

packages/app-desktop/gui/ResizableLayout/utils/movements.test.ts

@@ -147,7 +147,7 @@ describe('movements', () => {
 		expect(canMove(MoveDirection.Right, findItemByKey(layout, 'col2'), findItemByKey(layout, 'root'))).toBe(false);
 	});
 
-	test('Container with only one child should take the width of its parent', () => {
+	test('container with only one child should take the width of its parent', () => {
 		let layout: LayoutItem = validateLayout({
 			key: 'root',
 			width: 100,
@@ -170,7 +170,7 @@ describe('movements', () => {
 		expect(layout.children[0].children[0].width).toBe(undefined);
 	});
 
-	test('Temp container should take the width of the child it replaces', () => {
+	test('temp container should take the width of the child it replaces', () => {
 		let layout: LayoutItem = validateLayout({
 			key: 'root',
 			width: 100,
@@ -198,7 +198,7 @@ describe('movements', () => {
 		expect(layout.children[0].children[1].width).toBe(undefined);
 	});
 
-	test('Last child should have flexible width if all siblings have fixed width', () => {
+	test('last child should have flexible width if all siblings have fixed width', () => {
 		let layout: LayoutItem = validateLayout({
 			key: 'root',
 			width: 100,

packages/app-desktop/gui/ResizableLayout/utils/useLayoutItemSizes.test.ts

@@ -260,10 +260,6 @@ describe('useLayoutItemSizes', () => {
 		expect(sizes.col4.width).toBe(50);
 	});
 
-});
-
-describe('calculateMaxSizeAvailableForItem', () => {
-
 	test('should give maximum available space this item can take up during resizing', () => {
 		const layout: LayoutItem = validateLayout({
 			key: 'root',

packages/app-desktop/gui/ResourceScreen.tsx

@@ -135,7 +135,7 @@ const getNextSortingOrderType = (s: SortingType): SortingType => {
 const MAX_RESOURCES = 10000;
 
 class ResourceScreenComponent extends React.Component<Props, State> {
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 		this.state = {
 			resources: undefined,
@@ -147,7 +147,7 @@ class ResourceScreenComponent extends React.Component<Props, State> {
 		};
 	}
 
-	async reloadResources(sorting: ActiveSorting) {
+	public async reloadResources(sorting: ActiveSorting) {
 		this.setState({ isLoading: true });
 		const resources = await Resource.all({
 			order: [{
@@ -161,11 +161,11 @@ class ResourceScreenComponent extends React.Component<Props, State> {
 		this.setState({ resources, isLoading: false });
 	}
 
-	componentDidMount() {
+	public componentDidMount() {
 		void this.reloadResources(this.state.sorting);
 	}
 
-	onResourceDelete(resource: InnerResource) {
+	public onResourceDelete(resource: InnerResource) {
 		const ok = bridge().showConfirmMessageBox(_('Delete attachment "%s"?', resource.title), {
 			buttons: [_('Delete'), _('Cancel')],
 			defaultId: 1,
@@ -184,7 +184,7 @@ class ResourceScreenComponent extends React.Component<Props, State> {
 			});
 	}
 
-	openResource(resource: InnerResource) {
+	public openResource(resource: InnerResource) {
 		const resourcePath = Resource.fullPath(resource);
 		const ok = bridge().openExternal(`file://${resourcePath}`);
 		if (!ok) {
@@ -192,7 +192,7 @@ class ResourceScreenComponent extends React.Component<Props, State> {
 		}
 	}
 
-	onToggleSortOrder(sortOrder: SortingOrder) {
+	public onToggleSortOrder(sortOrder: SortingOrder) {
 		let newSorting = { ...this.state.sorting };
 		if (sortOrder === this.state.sorting.order) {
 			newSorting.type = getNextSortingOrderType(newSorting.type);
@@ -206,7 +206,7 @@ class ResourceScreenComponent extends React.Component<Props, State> {
 		void this.reloadResources(newSorting);
 	}
 
-	render() {
+	public render() {
 		const style = this.props.style;
 		const theme = themeStyle(this.props.themeId);
 

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { useEffect, useRef, useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+import shim from '@joplin/lib/shim';
 import { StyledRoot, StyledAddButton, StyledShareIcon, StyledHeader, StyledHeaderIcon, StyledAllNotesIcon, StyledHeaderLabel, StyledListItem, StyledListItemAnchor, StyledExpandLink, StyledNoteCount, StyledSyncReportText, StyledSyncReport, StyledSynchronizeButton } from './styles';
 import { ButtonLevel } from '../Button/Button';
 import CommandService from '@joplin/lib/services/CommandService';
@@ -38,6 +40,24 @@ const { clipboard } = require('electron');
 
 const logger = Logger.create('Sidebar');
 
+const StyledFoldersHolder = styled.div`
+	// linux bug: https://github.com/laurent22/joplin/issues/7506#issuecomment-1447101057
+	& a.list-item {
+		${shim.isLinux() && {
+		opacity: 1,
+	}}
+	}
+`;
+const TagsHolder = styled.div`
+	// linux bug: https://github.com/laurent22/joplin/issues/8000
+	// solution ref: https://github.com/laurent22/joplin/issues/7506#issuecomment-1447101057
+	& a.list-item {
+		${shim.isLinux() && {
+		opacity: 1,
+	}}
+	}
+`;
+
 interface Props {
 	themeId: number;
 	dispatch: Function;
@@ -705,13 +725,13 @@ const SidebarComponent = (props: Props) => {
 		const folderItems = [renderAllNotesItem(theme, allNotesSelected)].concat(result.items);
 		folderItemsOrder_.current = result.order;
 		items.push(
-			<div
+			<StyledFoldersHolder
 				className={`folders ${props.folderHeaderIsExpanded ? 'expanded' : ''}`}
 				key="folder_items"
 				style={foldersStyle}
 			>
 				{folderItems}
-			</div>
+			</StyledFoldersHolder>
 		);
 	}
 
@@ -727,9 +747,9 @@ const SidebarComponent = (props: Props) => {
 		tagItemsOrder_.current = result.order;
 
 		items.push(
-			<div className="tags" key="tag_items" style={{ display: props.tagHeaderIsExpanded ? 'block' : 'none' }}>
+			<TagsHolder className="tags" key="tag_items" style={{ display: props.tagHeaderIsExpanded ? 'block' : 'none' }}>
 				{tagItems}
-			</div>
+			</TagsHolder>
 		);
 	}
 

packages/app-desktop/gui/TagItem.tsx

@@ -5,7 +5,7 @@ import CommandService from '@joplin/lib/services/CommandService';
 import { AppState } from '../app.reducer';
 
 class TagItemComponent extends React.Component {
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 		const style = Object.assign({}, theme.tagStyle);
 		const { title, id } = this.props;

packages/app-desktop/gui/ToolbarBase.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 class ToolbarBaseComponent extends React.Component<Props, any> {
 
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 
 		const style: any = Object.assign({

packages/app-desktop/gui/ToolbarSpace.tsx

@@ -6,7 +6,7 @@ interface Props {
 }
 
 class ToolbarSpace extends React.Component<Props> {
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 		const style = Object.assign({}, theme.toolbarStyle);
 		style.minWidth = style.height / 2;

packages/app-desktop/gui/dialogs.ts

@@ -7,11 +7,11 @@ const smalltalk = require('smalltalk');
 const logger = Logger.create('dialogs');
 
 class Dialogs {
-	async alert(message: string, title = '') {
+	public async alert(message: string, title = '') {
 		await smalltalk.alert(title, message);
 	}
 
-	async confirm(message: string, title = '', options: any = {}) {
+	public async confirm(message: string, title = '', options: any = {}) {
 		try {
 			await smalltalk.confirm(title, message, options);
 			return true;
@@ -21,7 +21,7 @@ class Dialogs {
 		}
 	}
 
-	async prompt(message: string, title = '', defaultValue = '', options: any = null) {
+	public async prompt(message: string, title = '', defaultValue = '', options: any = null) {
 		if (options === null) options = {};
 
 		try {

packages/app-desktop/gui/utils/NoteListUtils.ts

@@ -26,7 +26,7 @@ interface ContextMenuProps {
 }
 
 export default class NoteListUtils {
-	static makeContextMenu(noteIds: string[], props: ContextMenuProps) {
+	public static makeContextMenu(noteIds: string[], props: ContextMenuProps) {
 		const cmdService = CommandService.instance();
 
 		const menuUtils = new MenuUtils(cmdService);
@@ -212,7 +212,7 @@ export default class NoteListUtils {
 		return menu;
 	}
 
-	static async confirmDeleteNotes(noteIds: string[]) {
+	public static async confirmDeleteNotes(noteIds: string[]) {
 		if (!noteIds.length) return;
 
 		const msg = await Note.deleteMessage(noteIds);

packages/app-desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joplin/app-desktop",
-  "version": "2.10.8",
+  "version": "2.11.1",
   "description": "Joplin for Desktop",
   "main": "main.js",
   "private": true,
@@ -107,7 +107,7 @@
   },
   "homepage": "https://github.com/laurent22/joplin#readme",
   "devDependencies": {
-    "@joplin/tools": "~2.10",
+    "@joplin/tools": "~2.11",
     "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "29.2.6",
     "@types/node": "18.11.18",
@@ -136,9 +136,9 @@
     "@electron/remote": "2.0.9",
     "@fortawesome/fontawesome-free": "5.15.4",
     "@joeattardi/emoji-button": "4.6.4",
-    "@joplin/lib": "~2.10",
-    "@joplin/pdf-viewer": "~2.10",
-    "@joplin/renderer": "~2.10",
+    "@joplin/lib": "~2.11",
+    "@joplin/pdf-viewer": "~2.11",
+    "@joplin/renderer": "~2.11",
     "async-mutex": "0.4.0",
     "codemirror": "5.65.9",
     "color": "3.2.1",
@@ -147,7 +147,7 @@
     "debounce": "1.2.1",
     "electron-window-state": "5.0.3",
     "formatcoords": "1.1.3",
-    "fs-extra": "11.1.0",
+    "fs-extra": "11.1.1",
     "highlight.js": "11.7.0",
     "immer": "7.0.15",
     "keytar": "7.9.0",
@@ -163,15 +163,15 @@
     "react-datetime": "3.2.0",
     "react-dom": "18.2.0",
     "react-redux": "8.0.5",
-    "react-select": "5.7.0",
+    "react-select": "5.7.1",
     "react-toggle-button": "2.2.0",
     "react-tooltip": "4.5.1",
     "redux": "4.2.1",
     "reselect": "4.1.7",
     "roboto-fontface": "0.10.0",
     "smalltalk": "2.5.1",
-    "sqlite3": "5.1.4",
-    "styled-components": "5.3.6",
+    "sqlite3": "5.1.6",
+    "styled-components": "5.3.9",
     "styled-system": "5.1.5",
     "taboverride": "4.0.3",
     "tinymce": "5.10.6"

packages/app-desktop/plugins/GotoAnything.tsx

@@ -65,7 +65,7 @@ class GotoAnything {
 	public static Dialog: any;
 	public static manifest: any;
 
-	onTrigger(event: any) {
+	public onTrigger(event: any) {
 		this.dispatch({
 			type: 'PLUGINLEGACY_DIALOG_SET',
 			open: true,
@@ -85,7 +85,7 @@ class Dialog extends React.PureComponent<Props, State> {
 	private markupToHtml_: MarkupToHtml;
 	private userCallback_: any = null;
 
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 
 		const startString = props?.userData?.startString ? props?.userData?.startString : '';
@@ -119,7 +119,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		if (startString) this.scheduleListUpdate();
 	}
 
-	style() {
+	public style() {
 		const styleKey = [this.props.themeId, this.state.listType, this.state.resultsInBody ? '1' : '0'].join('-');
 
 		if (this.styles_[styleKey]) return this.styles_[styleKey];
@@ -184,7 +184,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		return this.styles_[styleKey];
 	}
 
-	componentDidMount() {
+	public componentDidMount() {
 		document.addEventListener('keydown', this.onKeyDown);
 
 		this.props.dispatch({
@@ -193,7 +193,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		});
 	}
 
-	componentWillUnmount() {
+	public componentWillUnmount() {
 		if (this.listUpdateIID_) shim.clearTimeout(this.listUpdateIID_);
 		document.removeEventListener('keydown', this.onKeyDown);
 
@@ -203,7 +203,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		});
 	}
 
-	onKeyDown(event: any) {
+	public onKeyDown(event: any) {
 		if (event.keyCode === 27) { // ESCAPE
 			this.props.dispatch({
 				pluginName: PLUGIN_NAME,
@@ -213,7 +213,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		}
 	}
 
-	modalLayer_onClick(event: any) {
+	private modalLayer_onClick(event: any) {
 		if (event.currentTarget === event.target) {
 			this.props.dispatch({
 				pluginName: PLUGIN_NAME,
@@ -223,17 +223,17 @@ class Dialog extends React.PureComponent<Props, State> {
 		}
 	}
 
-	helpButton_onClick() {
+	private helpButton_onClick() {
 		this.setState({ showHelp: !this.state.showHelp });
 	}
 
-	input_onChange(event: any) {
+	private input_onChange(event: any) {
 		this.setState({ query: event.target.value });
 
 		this.scheduleListUpdate();
 	}
 
-	scheduleListUpdate() {
+	public scheduleListUpdate() {
 		if (this.listUpdateIID_) shim.clearTimeout(this.listUpdateIID_);
 
 		this.listUpdateIID_ = shim.setTimeout(async () => {
@@ -242,12 +242,12 @@ class Dialog extends React.PureComponent<Props, State> {
 		}, 100);
 	}
 
-	async keywords(searchQuery: string) {
+	public async keywords(searchQuery: string) {
 		const parsedQuery = await SearchEngine.instance().parseQuery(searchQuery);
 		return SearchEngine.instance().allParsedQueryTerms(parsedQuery);
 	}
 
-	markupToHtml() {
+	public markupToHtml() {
 		if (this.markupToHtml_) return this.markupToHtml_;
 		this.markupToHtml_ = markupLanguageUtils.newMarkupToHtml();
 		return this.markupToHtml_;
@@ -262,7 +262,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		};
 	}
 
-	async updateList() {
+	public async updateList() {
 		let resultsInBody = false;
 
 		if (!this.state.query) {
@@ -402,7 +402,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		this.itemListRef.current.makeItemIndexVisible(index);
 	}
 
-	async gotoItem(item: any) {
+	public async gotoItem(item: any) {
 		this.props.dispatch({
 			pluginName: PLUGIN_NAME,
 			type: 'PLUGINLEGACY_DIALOG_SET',
@@ -465,7 +465,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		}
 	}
 
-	listItem_onClick(event: any) {
+	private listItem_onClick(event: any) {
 		const itemId = event.currentTarget.getAttribute('data-id');
 		const parentId = event.currentTarget.getAttribute('data-parent-id');
 		const itemType = Number(event.currentTarget.getAttribute('data-type'));
@@ -478,7 +478,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		});
 	}
 
-	renderItem(item: SearchResult) {
+	public renderItem(item: SearchResult) {
 		const theme = themeStyle(this.props.themeId);
 		const style = this.style();
 		const isSelected = item.id === this.state.selectedItemId;
@@ -502,7 +502,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		);
 	}
 
-	selectedItemIndex(results: any[] = undefined, itemId: string = undefined) {
+	public selectedItemIndex(results: any[] = undefined, itemId: string = undefined) {
 		if (typeof results === 'undefined') results = this.state.results;
 		if (typeof itemId === 'undefined') itemId = this.state.selectedItemId;
 		for (let i = 0; i < results.length; i++) {
@@ -512,13 +512,13 @@ class Dialog extends React.PureComponent<Props, State> {
 		return -1;
 	}
 
-	selectedItem() {
+	public selectedItem() {
 		const index = this.selectedItemIndex();
 		if (index < 0) return null;
 		return { ...this.state.results[index], commandArgs: this.state.commandArgs };
 	}
 
-	input_onKeyDown(event: any) {
+	private input_onKeyDown(event: any) {
 		const keyCode = event.keyCode;
 
 		if (this.state.results.length > 0 && (keyCode === 40 || keyCode === 38)) { // DOWN / UP
@@ -554,7 +554,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		return maxItemCount * itemHeight;
 	}
 
-	renderList() {
+	public renderList() {
 		const style = this.style();
 
 		const itemListStyle = {
@@ -573,7 +573,7 @@ class Dialog extends React.PureComponent<Props, State> {
 		);
 	}
 
-	render() {
+	public render() {
 		const theme = themeStyle(this.props.themeId);
 		const style = this.style();
 		const helpComp = !this.state.showHelp ? null : <div className="help-text" style={style.help}>{_('Type a note title or part of its content to jump to it. Or type # followed by a tag name, or @ followed by a notebook name. Or type : to search for commands.')}</div>;

packages/app-desktop/services/sortOrder/PerFolderSortOrderService.test.ts

@@ -6,15 +6,15 @@ const { shimInit } = require('@joplin/lib/shim-init-node.js');
 const folderId1 = 'aa012345678901234567890123456789';
 const folderId2 = 'bb012345678901234567890123456789';
 
-beforeAll(async () => {
-	shimInit();
-	Setting.autoSaveEnabled = false;
-	PerFolderSortOrderService.initialize();
-	Setting.setValue('notes.perFolderSortOrderEnabled', true);
-});
-
 describe('PerFolderSortOrderService', () => {
 
+	beforeAll(async () => {
+		shimInit();
+		Setting.autoSaveEnabled = false;
+		PerFolderSortOrderService.initialize();
+		Setting.setValue('notes.perFolderSortOrderEnabled', true);
+	});
+
 	test('get(), isSet() and set()', async () => {
 		// Clear all per-folder sort order
 		expect(PerFolderSortOrderService.isSet(folderId1)).toBe(false);

packages/app-desktop/services/sortOrder/notesSortOrderUtils.test.ts

@@ -2,13 +2,13 @@ import { notesSortOrderFieldArray, notesSortOrderNextField, setNotesSortOrder }
 import Setting from '@joplin/lib/models/Setting';
 const { shimInit } = require('@joplin/lib/shim-init-node.js');
 
-beforeAll(() => {
-	shimInit();
-	Setting.autoSaveEnabled = false;
-});
-
 describe('notesSortOrderUtils', () => {
 
+	beforeAll(() => {
+		shimInit();
+		Setting.autoSaveEnabled = false;
+	});
+
 	it('should always provide the same ordered fields', async () => {
 		const expected = ['user_updated_time', 'user_created_time', 'title', 'order'];
 		expect(notesSortOrderFieldArray()).toStrictEqual(expected);

packages/app-mobile/.prettierrc.js

@@ -1,6 +0,0 @@
-module.exports = {
-  bracketSpacing: false,
-  jsxBracketSameLine: true,
-  singleQuote: true,
-  trailingComma: 'all',
-};

packages/app-mobile/PluginAssetsLoader.ts

@@ -6,24 +6,24 @@ import KvStore from '@joplin/lib/services/KvStore';
 
 export default class PluginAssetsLoader {
 
-	static instance_: PluginAssetsLoader = null;
-	logger_: any = null;
+	private static instance_: PluginAssetsLoader = null;
+	private logger_: any = null;
 
-	static instance() {
+	public static instance() {
 		if (PluginAssetsLoader.instance_) return PluginAssetsLoader.instance_;
 		PluginAssetsLoader.instance_ = new PluginAssetsLoader();
 		return PluginAssetsLoader.instance_;
 	}
 
-	setLogger(logger: any) {
+	public setLogger(logger: any) {
 		this.logger_ = logger;
 	}
 
-	logger() {
+	public logger() {
 		return this.logger_;
 	}
 
-	async importAssets() {
+	public async importAssets() {
 		const destDir = `${Setting.value('resourceDir')}/pluginAssets`;
 		await shim.fsDriver().mkdir(destDir);
 

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

@@ -150,8 +150,8 @@ android {
         applicationId "net.cozic.joplin"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-		versionCode 2097683
-		versionName "2.10.7"
+		versionCode 2097685
+		versionName "2.11.0"
 		// ndk {
 		// 	abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
 		// }

packages/app-mobile/components/BackButtonDialogBox.ts

@@ -2,7 +2,7 @@ const { BackButtonService } = require('../services/back-button.js');
 const DialogBox = require('react-native-dialogbox').default;
 
 export default class BackButtonDialogBox extends DialogBox {
-	constructor(props: any) {
+	public constructor(props: any) {
 		super(props);
 
 		this.backHandler_ = () => {
@@ -14,7 +14,7 @@ export default class BackButtonDialogBox extends DialogBox {
 		};
 	}
 
-	async componentDidUpdate() {
+	public async componentDidUpdate() {
 		if (this.state.isVisible) {
 			BackButtonService.addHandler(this.backHandler_);
 		} else {

packages/app-mobile/components/CameraView.tsx

@@ -14,7 +14,7 @@ import Setting from '@joplin/lib/models/Setting';
 Icon.loadFont().catch((error: any) => { console.info(error); });
 
 class CameraView extends Component {
-	constructor() {
+	public constructor() {
 		super();
 
 		const dimensions = Dimensions.get('window');
@@ -34,18 +34,18 @@ class CameraView extends Component {
 		this.onLayout = this.onLayout.bind(this);
 	}
 
-	onLayout(event: any) {
+	public onLayout(event: any) {
 		this.setState({
 			screenWidth: event.nativeEvent.layout.width,
 			screenHeight: event.nativeEvent.layout.height,
 		});
 	}
 
-	back_onPress() {
+	private back_onPress() {
 		if (this.props.onCancel) this.props.onCancel();
 	}
 
-	reverse_onPress() {
+	private reverse_onPress() {
 		if (this.props.cameraType === RNCamera.Constants.Type.back) {
 			Setting.setValue('camera.type', RNCamera.Constants.Type.front);
 		} else {
@@ -53,7 +53,7 @@ class CameraView extends Component {
 		}
 	}
 
-	ratio_onPress() {
+	private ratio_onPress() {
 		if (this.state.ratios.length <= 1) return;
 
 		let index = this.state.ratios.indexOf(this.props.cameraRatio);
@@ -62,7 +62,7 @@ class CameraView extends Component {
 		Setting.setValue('camera.ratio', this.state.ratios[index]);
 	}
 
-	async photo_onPress() {
+	private async photo_onPress() {
 		if (!this.camera || !this.props.onPhoto) return;
 
 		this.setState({ snapping: true });
@@ -79,14 +79,14 @@ class CameraView extends Component {
 
 	}
 
-	async onCameraReady() {
+	public async onCameraReady() {
 		if (this.supportsRatios()) {
 			const ratios = await this.camera.getSupportedRatiosAsync();
 			this.setState({ ratios: ratios });
 		}
 	}
 
-	renderButton(onPress: Function, iconNameOrIcon: any, style: any) {
+	public renderButton(onPress: Function, iconNameOrIcon: any, style: any) {
 		let icon = null;
 
 		if (typeof iconNameOrIcon === 'string') {
@@ -112,7 +112,7 @@ class CameraView extends Component {
 		);
 	}
 
-	fitRectIntoBounds(rect: any, bounds: any) {
+	public fitRectIntoBounds(rect: any, bounds: any) {
 		const rectRatio = rect.width / rect.height;
 		const boundsRatio = bounds.width / bounds.height;
 
@@ -130,7 +130,7 @@ class CameraView extends Component {
 		return newDimensions;
 	}
 
-	cameraRect(ratio: string) {
+	public cameraRect(ratio: string) {
 		// To keep the calculations simpler, it's assumed that the phone is in
 		// portrait orientation. Then at the end we swap the values if needed.
 		const splitted = ratio.split(':');
@@ -152,11 +152,11 @@ class CameraView extends Component {
 		return output;
 	}
 
-	supportsRatios() {
+	public supportsRatios() {
 		return shim.mobilePlatform() === 'android';
 	}
 
-	render() {
+	public render() {
 		const photoIcon = this.state.snapping ? 'md-checkmark' : 'md-camera';
 
 		const displayRatios = this.supportsRatios() && this.state.ratios.length > 1;

packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.test.ts

@@ -239,17 +239,5 @@ describe('markdownCommands', () => {
 		expect(sel.from).toBe('> Testing...> \n> \n'.length);
 		expect(sel.to).toBe(editor.state.doc.length);
 	});
-
-	it('toggling inline code should both create and navigate out of an inline code region', async () => {
-		const initialDocText = 'Testing...\n\n';
-		const editor = await createEditor(initialDocText, EditorSelection.cursor(initialDocText.length), []);
-
-		toggleCode(editor);
-		editor.dispatch(editor.state.replaceSelection('f(x) = ...'));
-		toggleCode(editor);
-
-		editor.dispatch(editor.state.replaceSelection(' is a function.'));
-		expect(editor.state.doc.toString()).toBe('Testing...\n\n`f(x) = ...` is a function.');
-	});
 });
 

packages/app-mobile/components/NoteEditor/CodeMirror/markdownCommands.toggleList.test.ts

@@ -101,56 +101,56 @@ describe('markdownCommands.toggleList', () => {
 	// 	);
 	// });
 
-	it('should not preserve indentation when removing sublists', async () => {
-		const preSubListText = '# List test\n * This\n * is\n';
-		const initialDocText = `${preSubListText}\t1. a\n\t2. test\n * of list toggling`;
+	// it('should not preserve indentation when removing sublists', async () => {
+	// 	const preSubListText = '# List test\n * This\n * is\n';
+	// 	const initialDocText = `${preSubListText}\t1. a\n\t2. test\n * of list toggling`;
 
-		const editor = await createEditor(
-			initialDocText,
-			EditorSelection.range(preSubListText.length, `${preSubListText}\t1. a\n\t2. test`.length),
-			['ATXHeading1', 'BulletList', 'OrderedList']
-		);
+	// 	const editor = await createEditor(
+	// 		initialDocText,
+	// 		EditorSelection.range(preSubListText.length, `${preSubListText}\t1. a\n\t2. test`.length),
+	// 		['ATXHeading1', 'BulletList', 'OrderedList']
+	// 	);
 
-		// Indentation should not be preserved when removing lists
-		toggleList(ListType.OrderedList)(editor);
-		expect(editor.state.selection.main.from).toBe(preSubListText.length);
-		expect(editor.state.doc.toString()).toBe(
-			'# List test\n * This\n * is\na\ntest\n * of list toggling'
-		);
+	// 	// Indentation should not be preserved when removing lists
+	// 	toggleList(ListType.OrderedList)(editor);
+	// 	expect(editor.state.selection.main.from).toBe(preSubListText.length);
+	// 	expect(editor.state.doc.toString()).toBe(
+	// 		'# List test\n * This\n * is\na\ntest\n * of list toggling'
+	// 	);
 
-		// Put the cursor in the middle of the list
-		editor.dispatch({ selection: EditorSelection.cursor(preSubListText.length) });
+	// 	// Put the cursor in the middle of the list
+	// 	editor.dispatch({ selection: EditorSelection.cursor(preSubListText.length) });
 
-		// Sublists should be changed
-		toggleList(ListType.CheckList)(editor);
-		const expectedChecklistPart =
-			'# List test\n - [ ] This\n - [ ] is\n - [ ] a\n - [ ] test\n - [ ] of list toggling';
-		expect(editor.state.doc.toString()).toBe(
-			expectedChecklistPart
-		);
+	// 	// Sublists should be changed
+	// 	toggleList(ListType.CheckList)(editor);
+	// 	const expectedChecklistPart =
+	// 		'# List test\n - [ ] This\n - [ ] is\n - [ ] a\n - [ ] test\n - [ ] of list toggling';
+	// 	expect(editor.state.doc.toString()).toBe(
+	// 		expectedChecklistPart
+	// 	);
 
-		editor.dispatch({ selection: EditorSelection.cursor(editor.state.doc.length) });
-		editor.dispatch(editor.state.replaceSelection('\n\n\n'));
+	// 	editor.dispatch({ selection: EditorSelection.cursor(editor.state.doc.length) });
+	// 	editor.dispatch(editor.state.replaceSelection('\n\n\n'));
 
-		// toggleList should also create a new list if the cursor is on an empty line.
-		toggleList(ListType.OrderedList)(editor);
-		editor.dispatch(editor.state.replaceSelection('Test.\n2. Test2\n3. Test3'));
+	// 	// toggleList should also create a new list if the cursor is on an empty line.
+	// 	toggleList(ListType.OrderedList)(editor);
+	// 	editor.dispatch(editor.state.replaceSelection('Test.\n2. Test2\n3. Test3'));
 
-		expect(editor.state.doc.toString()).toBe(
-			`${expectedChecklistPart}\n\n\n1. Test.\n2. Test2\n3. Test3`
-		);
+	// 	expect(editor.state.doc.toString()).toBe(
+	// 		`${expectedChecklistPart}\n\n\n1. Test.\n2. Test2\n3. Test3`
+	// 	);
 
-		toggleList(ListType.CheckList)(editor);
-		expect(editor.state.doc.toString()).toBe(
-			`${expectedChecklistPart}\n\n\n- [ ] Test.\n- [ ] Test2\n- [ ] Test3`
-		);
+	// 	toggleList(ListType.CheckList)(editor);
+	// 	expect(editor.state.doc.toString()).toBe(
+	// 		`${expectedChecklistPart}\n\n\n- [ ] Test.\n- [ ] Test2\n- [ ] Test3`
+	// 	);
 
-		// The entire checklist should have been selected (and thus will now be indented)
-		increaseIndent(editor);
-		expect(editor.state.doc.toString()).toBe(
-			`${expectedChecklistPart}\n\n\n\t- [ ] Test.\n\t- [ ] Test2\n\t- [ ] Test3`
-		);
-	});
+	// 	// The entire checklist should have been selected (and thus will now be indented)
+	// 	increaseIndent(editor);
+	// 	expect(editor.state.doc.toString()).toBe(
+	// 		`${expectedChecklistPart}\n\n\n\t- [ ] Test.\n\t- [ ] Test2\n\t- [ ] Test3`
+	// 	);
+	// });
 
 	it('should toggle a numbered list without changing its sublists', async () => {
 		const initialDocText = '1. Foo\n2. Bar\n3. Baz\n\t- Test\n\t- of\n\t- sublists\n4. Foo';

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

@@ -30,6 +30,7 @@ interface Props {
 	initialSelection?: Selection;
 	style: ViewStyle;
 	contentStyle?: ViewStyle;
+	toolbarEnabled: boolean;
 
 	onChange: ChangeEventHandler;
 	onSelectionChange: SelectionChangeEventHandler;
@@ -364,6 +365,19 @@ function NoteEditor(props: Props, ref: any) {
 		console.error('NoteEditor: webview error');
 	}, []);
 
+	const toolbar = <MarkdownToolbar
+		style={{
+			// Don't show the markdown toolbar if there isn't enough space
+			// for it:
+			flexShrink: 1,
+		}}
+		editorSettings={editorSettings}
+		editorControl={editorControl}
+		selectionState={selectionState}
+		searchState={searchState}
+		onAttach={props.onAttach}
+	/>;
+
 	// - `scrollEnabled` prevents iOS from scrolling the document (has no effect on Android)
 	//    when an editable region (e.g. a the full-screen NoteEditor) is focused.
 	return (
@@ -401,18 +415,7 @@ function NoteEditor(props: Props, ref: any) {
 				searchState={searchState}
 			/>
 
-			<MarkdownToolbar
-				style={{
-					// Don't show the markdown toolbar if there isn't enough space
-					// for it:
-					flexShrink: 1,
-				}}
-				editorSettings={editorSettings}
-				editorControl={editorControl}
-				selectionState={selectionState}
-				searchState={searchState}
-				onAttach={props.onAttach}
-			/>
+			{props.toolbarEnabled ? toolbar : null}
 		</View>
 	);
 }

packages/app-mobile/components/SelectDateTimeDialog.tsx

@@ -52,7 +52,7 @@ const styles = StyleSheet.create({
 
 export default class SelectDateTimeDialog extends React.PureComponent<any, any> {
 
-	constructor(props: any) {
+	public constructor(props: any) {
 		super(props);
 
 		this.state = {
@@ -67,37 +67,37 @@ export default class SelectDateTimeDialog extends React.PureComponent<any, any>
 		this.onSetDate = this.onSetDate.bind(this);
 	}
 
-	UNSAFE_componentWillReceiveProps(newProps: any) {
+	public UNSAFE_componentWillReceiveProps(newProps: any) {
 		if (newProps.date !== this.state.date) {
 			this.setState({ date: newProps.date });
 		}
 	}
 
-	onAccept() {
+	public onAccept() {
 		if (this.props.onAccept) this.props.onAccept(this.state.date);
 	}
 
-	onReject() {
+	public onReject() {
 		if (this.props.onReject) this.props.onReject();
 	}
 
-	onClear() {
+	public onClear() {
 		if (this.props.onAccept) this.props.onAccept(null);
 	}
 
-	onPickerConfirm(selectedDate: Date) {
+	public onPickerConfirm(selectedDate: Date) {
 		this.setState({ date: selectedDate, showPicker: false });
 	}
 
-	onPickerCancel() {
+	public onPickerCancel() {
 		this.setState({ showPicker: false });
 	}
 
-	onSetDate() {
+	public onSetDate() {
 		this.setState({ showPicker: true });
 	}
 
-	renderContent() {
+	public renderContent() {
 		const theme = themeStyle(this.props.themeId);
 
 		return (
@@ -118,7 +118,7 @@ export default class SelectDateTimeDialog extends React.PureComponent<any, any>
 		);
 	}
 
-	render() {
+	public render() {
 		const modalVisible = this.props.shown;
 
 		if (!modalVisible) return null;

packages/app-mobile/components/SideMenu.ts

@@ -4,7 +4,7 @@ import { Dimensions } from 'react-native';
 import { State } from '@joplin/lib/reducer';
 
 class SideMenuComponent extends SideMenu_ {
-	onLayoutChange(e: any) {
+	public onLayoutChange(e: any) {
 		const { width, height } = e.nativeEvent.layout;
 		const openMenuOffsetPercentage = this.props.openMenuOffset / Dimensions.get('window').width;
 		const openMenuOffset = width * openMenuOffsetPercentage;

packages/app-mobile/components/app-nav.tsx

@@ -25,7 +25,7 @@ class AppNavComponent extends Component<Props, State> {
 	private keyboardDidHideListener: EmitterSubscription|null = null;
 	private keyboardWillChangeFrameListener: EmitterSubscription|null = null;
 
-	constructor(props: Props) {
+	public constructor(props: Props) {
 		super(props);
 
 		this.previousRouteName_ = null;
@@ -35,7 +35,7 @@ class AppNavComponent extends Component<Props, State> {
 		};
 	}
 
-	UNSAFE_componentWillMount() {
+	public UNSAFE_componentWillMount() {
 		if (Platform.OS === 'ios') {
 			this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow.bind(this));
 			this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide.bind(this));
@@ -43,7 +43,7 @@ class AppNavComponent extends Component<Props, State> {
 		}
 	}
 
-	componentWillUnmount() {
+	public componentWillUnmount() {
 		this.keyboardDidShowListener?.remove();
 		this.keyboardDidHideListener?.remove();
 		this.keyboardWillChangeFrameListener?.remove();
@@ -53,15 +53,15 @@ class AppNavComponent extends Component<Props, State> {
 		this.keyboardWillChangeFrameListener = null;
 	}
 
-	keyboardDidShow() {
+	public keyboardDidShow() {
 		this.setState({ autoCompletionBarExtraHeight: 30 });
 	}
 
-	keyboardDidHide() {
+	public keyboardDidHide() {
 		this.setState({ autoCompletionBarExtraHeight: 0 });
 	}
 
-	keyboardWillChangeFrame = (evt: KeyboardEvent) => {
+	private keyboardWillChangeFrame = (evt: KeyboardEvent) => {
 		const windowWidth = Dimensions.get('window').width;
 
 		// If the keyboard isn't as wide as the window, the floating keyboard is diabled.
@@ -71,7 +71,7 @@ class AppNavComponent extends Component<Props, State> {
 		});
 	};
 
-	render() {
+	public render() {
 		if (!this.props.route) throw new Error('Route must not be null');
 
 		// Note: certain screens are kept into memory, in particular Notes and Search

packages/app-mobile/components/biometrics/BiometricPopup.tsx

@@ -13,7 +13,11 @@ interface Props {
 }
 
 export default (props: Props) => {
-	const [initialPromptDone, setInitialPromptDone] = useState(Setting.value('security.biometricsInitialPromptDone'));
+	// The initial prompt is there so that the user can choose to opt-in to
+	// biometrics auth the first time the app is launched. However since it
+	// doesn't work properly, we disable it. We only want the user to enable the
+	// feature after they've read the description in the config screen.
+	const [initialPromptDone, setInitialPromptDone] = useState(true); // useState(Setting.value('security.biometricsInitialPromptDone'));
 	const [display, setDisplay] = useState(!!props.sensorInfo.supportedSensors && (props.sensorInfo.enabled || !initialPromptDone));
 	const [tryBiometricsCheck, setTryBiometricsCheck] = useState(initialPromptDone);
 

packages/app-mobile/components/biometrics/sensorInfo.ts

@@ -8,6 +8,18 @@ export interface SensorInfo {
 }
 
 export default async (): Promise<SensorInfo> => {
+	// Early exit if the feature is disabled, so that we don't make any
+	// FingerprintScanner scanner calls, since it seems they can fail and freeze
+	// the app.
+
+	if (!Setting.value('security.biometricsEnabled')) {
+		return {
+			enabled: false,
+			sensorsHaveChanged: false,
+			supportedSensors: '',
+		};
+	}
+
 	let hasChanged = false;
 	let supportedSensors = '';
 

packages/app-mobile/components/getResponsiveValue.test.ts

@@ -25,12 +25,12 @@ const testCases: testCase[] = [
 
 describe('getResponsiveValue', () => {
 
-	test('Should throw exception if value map is an empty object', () => {
+	test('should throw exception if value map is an empty object', () => {
 		const input = {};
 		expect(() => getResponsiveValue(input)).toThrow('valueMap cannot be an empty object!');
 	});
 
-	test('Should return correct values', () => {
+	test('should return correct values', () => {
 		const mockReturnValues = [
 			{ width: 400 },
 			{ width: 480 },

packages/app-mobile/components/screens/ConfigScreen.tsx

@@ -25,7 +25,7 @@ import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
 import { openDocumentTree } from '@joplin/react-native-saf-x';
 
 class ConfigScreenComponent extends BaseScreenComponent {
-	static navigationOptions(): any {
+	public static navigationOptions(): any {
 		return { header: null };
 	}
 
@@ -200,7 +200,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
 		};
 	}
 
-	async checkFilesystemPermission() {
+	public async checkFilesystemPermission() {
 		if (Platform.OS !== 'android') {
 			// Not implemented yet
 			return true;
@@ -212,11 +212,11 @@ class ConfigScreenComponent extends BaseScreenComponent {
 		});
 	}
 
-	UNSAFE_componentWillMount() {
+	public UNSAFE_componentWillMount() {
 		this.setState({ settings: this.props.settings });
 	}
 
-	styles() {
+	public styles() {
 		const themeId = this.props.themeId;
 		const theme = themeStyle(themeId);
 
@@ -376,7 +376,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
 		BackButtonService.removeHandler(this.handleBackButtonPress);
 	}
 
-	renderHeader(key: string, title: string) {
+	public renderHeader(key: string, title: string) {
 		const theme = themeStyle(this.props.themeId);
 		return (
 			<View key={key} style={this.styles().headerWrapperStyle} onLayout={(event: any) => this.onHeaderLayout(key, event)}>
@@ -410,7 +410,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
 		);
 	}
 
-	sectionToComponent(key: string, section: any, settings: any) {
+	public sectionToComponent(key: string, section: any, settings: any) {
 		const settingComps = [];
 
 		for (let i = 0; i < section.metadatas.length; i++) {
@@ -474,7 +474,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
 		return !hasDescription ? this.styles().settingContainer : this.styles().settingContainerNoBottomBorder;
 	}
 
-	settingToComponent(key: string, value: any) {
+	public settingToComponent(key: string, value: any) {
 		const themeId = this.props.themeId;
 		const theme = themeStyle(themeId);
 		const output: any = null;
@@ -599,7 +599,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
 		return output;
 	}
 
-	render() {
+	public render() {
 		const settings = this.state.settings;
 
 		const theme = themeStyle(this.props.themeId);

packages/app-mobile/components/screens/Note.tsx

@@ -51,11 +51,11 @@ const emptyArray: any[] = [];
 const logger = Logger.create('screens/Note');
 
 class NoteScreenComponent extends BaseScreenComponent {
-	static navigationOptions(): any {
+	public static navigationOptions(): any {
 		return { header: null };
 	}
 
-	constructor() {
+	public constructor() {
 		super();
 		this.state = {
 			note: Note.new(),
@@ -280,7 +280,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		});
 	}
 
-	screenHeader_undoButtonPress() {
+	private screenHeader_undoButtonPress() {
 		if (this.useEditorBeta()) {
 			this.editorRef.current.undo();
 		} else {
@@ -288,7 +288,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}
 	}
 
-	screenHeader_redoButtonPress() {
+	private screenHeader_redoButtonPress() {
 		if (this.useEditorBeta()) {
 			this.editorRef.current.redo();
 		} else {
@@ -296,13 +296,13 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}
 	}
 
-	undoState(noteBody: string = null) {
+	public undoState(noteBody: string = null) {
 		return {
 			body: noteBody === null ? this.state.note.body : noteBody,
 		};
 	}
 
-	styles() {
+	public styles() {
 		const themeId = this.props.themeId;
 		const theme = themeStyle(themeId);
 
@@ -392,11 +392,11 @@ class NoteScreenComponent extends BaseScreenComponent {
 		return this.styles_[cacheKey];
 	}
 
-	isModified() {
+	public isModified() {
 		return shared.isModified(this);
 	}
 
-	async requestGeoLocationPermissions() {
+	public async requestGeoLocationPermissions() {
 		if (!Setting.value('trackLocation')) return;
 
 		const response = await checkPermissions(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, {
@@ -413,7 +413,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}
 	}
 
-	async componentDidMount() {
+	public async componentDidMount() {
 		BackButtonService.addHandler(this.backHandler);
 		NavService.addHandler(this.navHandler);
 
@@ -436,11 +436,11 @@ class NoteScreenComponent extends BaseScreenComponent {
 		void this.requestGeoLocationPermissions();
 	}
 
-	onMarkForDownload(event: any) {
+	public onMarkForDownload(event: any) {
 		void ResourceFetcher.instance().markForDownload(event.resourceId);
 	}
 
-	componentDidUpdate(prevProps: any) {
+	public componentDidUpdate(prevProps: any) {
 		if (this.doFocusUpdate_) {
 			this.doFocusUpdate_ = false;
 			this.focusUpdate();
@@ -454,7 +454,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}
 	}
 
-	componentWillUnmount() {
+	public componentWillUnmount() {
 		BackButtonService.removeHandler(this.backHandler);
 		NavService.removeHandler(this.navHandler);
 
@@ -467,13 +467,13 @@ class NoteScreenComponent extends BaseScreenComponent {
 		if (this.undoRedoService_) this.undoRedoService_.off('stackChange', this.undoRedoService_stackChange);
 	}
 
-	title_changeText(text: string) {
+	private title_changeText(text: string) {
 		shared.noteComponent_change(this, 'title', text);
 		this.setState({ newAndNoTitleChangeNoteId: null });
 		this.scheduleSave();
 	}
 
-	body_changeText(text: string) {
+	private body_changeText(text: string) {
 		if (!this.undoRedoService_.canUndo) {
 			this.undoRedoService_.push(this.undoState());
 		} else {
@@ -484,7 +484,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		this.scheduleSave();
 	}
 
-	body_selectionChange(event: any) {
+	private body_selectionChange(event: any) {
 		if (this.useEditorBeta()) {
 			this.selection = event.selection;
 		} else {
@@ -492,34 +492,34 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}
 	}
 
-	makeSaveAction() {
+	public makeSaveAction() {
 		return async () => {
 			return shared.saveNoteButton_press(this, null, null);
 		};
 	}
 
-	saveActionQueue(noteId: string) {
+	public saveActionQueue(noteId: string) {
 		if (!this.saveActionQueues_[noteId]) {
 			this.saveActionQueues_[noteId] = new AsyncActionQueue(500);
 		}
 		return this.saveActionQueues_[noteId];
 	}
 
-	scheduleSave() {
+	public scheduleSave() {
 		this.saveActionQueue(this.state.note.id).push(this.makeSaveAction());
 	}
 
-	async saveNoteButton_press(folderId: string = null) {
+	private async saveNoteButton_press(folderId: string = null) {
 		await shared.saveNoteButton_press(this, folderId, null);
 
 		Keyboard.dismiss();
 	}
 
-	async saveOneProperty(name: string, value: any) {
+	public async saveOneProperty(name: string, value: any) {
 		await shared.saveOneProperty(this, name, value);
 	}
 
-	async deleteNote_onPress() {
+	private async deleteNote_onPress() {
 		const note = this.state.note;
 		if (!note.id) return;
 
@@ -546,7 +546,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		return result;
 	}
 
-	async imageDimensions(uri: string) {
+	public async imageDimensions(uri: string) {
 		return new Promise((resolve, reject) => {
 			Image.getSize(
 				uri,
@@ -560,7 +560,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		});
 	}
 
-	async resizeImage(localFilePath: string, targetPath: string, mimeType: string) {
+	public async resizeImage(localFilePath: string, targetPath: string, mimeType: string) {
 		const maxSize = Resource.IMAGE_MAX_DIMENSION;
 
 		const dimensions: any = await this.imageDimensions(localFilePath);
@@ -609,7 +609,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		return true;
 	}
 
-	async attachFile(pickerResponse: any, fileType: string) {
+	public async attachFile(pickerResponse: any, fileType: string) {
 		if (!pickerResponse) {
 			// User has cancelled
 			return;
@@ -727,11 +727,11 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}
 	}
 
-	takePhoto_onPress() {
+	private takePhoto_onPress() {
 		this.setState({ showCamera: true });
 	}
 
-	cameraView_onPhoto(data: any) {
+	private cameraView_onPhoto(data: any) {
 		void this.attachFile(
 			{
 				uri: data.uri,
@@ -743,7 +743,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		this.setState({ showCamera: false });
 	}
 
-	cameraView_onCancel() {
+	private cameraView_onCancel() {
 		this.setState({ showCamera: false });
 	}
 
@@ -754,34 +754,30 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}
 	}
 
-	toggleIsTodo_onPress() {
+	private toggleIsTodo_onPress() {
 		shared.toggleIsTodo_onPress(this);
 
 		this.scheduleSave();
 	}
 
-	tags_onPress() {
+	private tags_onPress() {
 		if (!this.state.note || !this.state.note.id) return;
 
 		this.setState({ noteTagDialogShown: true });
 	}
 
-	async share_onPress() {
+	private async share_onPress() {
 		await Share.share({
 			message: `${this.state.note.title}\n\n${this.state.note.body}`,
 			title: this.state.note.title,
 		});
 	}
 
-	properties_onPress() {
+	private properties_onPress() {
 		this.props.dispatch({ type: 'SIDE_MENU_OPEN' });
 	}
 
-	setAlarm_onPress() {
-		this.setState({ alarmDialogShown: true });
-	}
-
-	async onAlarmDialogAccept(date: Date) {
+	public async onAlarmDialogAccept(date: Date) {
 		const newNote = Object.assign({}, this.state.note);
 		newNote.todo_due = date ? date.getTime() : 0;
 
@@ -790,11 +786,11 @@ class NoteScreenComponent extends BaseScreenComponent {
 		this.setState({ alarmDialogShown: false });
 	}
 
-	onAlarmDialogReject() {
+	public onAlarmDialogReject() {
 		this.setState({ alarmDialogShown: false });
 	}
 
-	async showOnMap_onPress() {
+	private async showOnMap_onPress() {
 		if (!this.state.note.id) return;
 
 		const note = await Note.load(this.state.note.id);
@@ -807,7 +803,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}
 	}
 
-	async showSource_onPress() {
+	private async showSource_onPress() {
 		if (!this.state.note.id) return;
 
 		const note = await Note.load(this.state.note.id);
@@ -818,12 +814,12 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}
 	}
 
-	copyMarkdownLink_onPress() {
+	private copyMarkdownLink_onPress() {
 		const note = this.state.note;
 		Clipboard.setString(Note.markdownTag(note));
 	}
 
-	sideMenuOptions() {
+	public sideMenuOptions() {
 		const note = this.state.note;
 		if (!note) return [];
 
@@ -854,7 +850,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		return output;
 	}
 
-	async showAttachMenu() {
+	public async showAttachMenu() {
 		const buttons = [];
 
 		// On iOS, it will show "local files", which means certain files saved from the browser
@@ -875,7 +871,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		if (buttonId === 'attachPhoto') void this.attachPhoto_onPress();
 	}
 
-	menuOptions() {
+	public menuOptions() {
 		const note = this.state.note;
 		const isTodo = note && !!note.is_todo;
 		const isSaved = note && note.id;
@@ -959,11 +955,11 @@ class NoteScreenComponent extends BaseScreenComponent {
 		return output;
 	}
 
-	async todoCheckbox_change(checked: boolean) {
+	private async todoCheckbox_change(checked: boolean) {
 		await this.saveOneProperty('todo_completed', checked ? time.unixMs() : 0);
 	}
 
-	scheduleFocusUpdate() {
+	public scheduleFocusUpdate() {
 		if (this.focusUpdateIID_) shim.clearTimeout(this.focusUpdateIID_);
 
 		this.focusUpdateIID_ = shim.setTimeout(() => {
@@ -972,7 +968,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}, 100);
 	}
 
-	focusUpdate() {
+	public focusUpdate() {
 		if (this.focusUpdateIID_) shim.clearTimeout(this.focusUpdateIID_);
 		this.focusUpdateIID_ = null;
 
@@ -990,7 +986,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		// }
 	}
 
-	async folderPickerOptions_valueChanged(itemValue: any) {
+	private async folderPickerOptions_valueChanged(itemValue: any) {
 		const note = this.state.note;
 		const isProvisionalNote = this.props.provisionalNoteIds.includes(note.id);
 
@@ -1011,7 +1007,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		});
 	}
 
-	folderPickerOptions() {
+	public folderPickerOptions() {
 		const options = {
 			enabled: true,
 			selectedFolderId: this.state.folder ? this.state.folder.id : null,
@@ -1024,7 +1020,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 		return this.folderPickerOptions_;
 	}
 
-	onBodyViewerLoadEnd() {
+	public onBodyViewerLoadEnd() {
 		shim.setTimeout(() => {
 			this.setState({ HACK_webviewLoadingState: 1 });
 			shim.setTimeout(() => {
@@ -1033,11 +1029,11 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}, 5);
 	}
 
-	onBodyViewerCheckboxChange(newBody: string) {
+	public onBodyViewerCheckboxChange(newBody: string) {
 		void this.saveOneProperty('body', newBody);
 	}
 
-	render() {
+	public render() {
 		if (this.state.isLoading) {
 			return (
 				<View style={this.styles().screen}>
@@ -1122,6 +1118,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 
 				bodyComponent = <NoteEditor
 					ref={this.editorRef}
+					toolbarEnabled={this.props.toolbarEnabled}
 					themeId={this.props.themeId}
 					initialText={note.body}
 					initialSelection={this.selection}
@@ -1235,6 +1232,7 @@ const NoteScreen = connect((state: any) => {
 		themeId: state.settings.theme,
 		editorFont: [state.settings['style.editor.fontFamily']],
 		editorFontSize: state.settings['style.editor.fontSize'],
+		toolbarEnabled: state.settings['editor.mobile.toolbarEnabled'],
 		ftsEnabled: state.settings['db.ftsEnabled'],
 		sharedData: state.sharedData,
 		showSideMenu: state.showSideMenu,

packages/app-mobile/components/screens/Notes.tsx

@@ -21,7 +21,7 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 
 	private onAppStateChangeSub_: NativeEventSubscription = null;
 
-	constructor() {
+	public constructor() {
 		super();
 
 		this.onAppStateChange_ = async () => {
@@ -78,7 +78,7 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 		};
 	}
 
-	styles() {
+	public styles() {
 		if (!this.styles_) this.styles_ = {};
 		const themeId = this.props.themeId;
 		const cacheKey = themeId;
@@ -96,24 +96,24 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 		return this.styles_[cacheKey];
 	}
 
-	async componentDidMount() {
+	public async componentDidMount() {
 		BackButtonService.addHandler(this.backHandler);
 		await this.refreshNotes();
 		this.onAppStateChangeSub_ = RNAppState.addEventListener('change', this.onAppStateChange_);
 	}
 
-	async componentWillUnmount() {
+	public async componentWillUnmount() {
 		if (this.onAppStateChangeSub_) this.onAppStateChangeSub_.remove();
 		BackButtonService.removeHandler(this.backHandler);
 	}
 
-	async componentDidUpdate(prevProps: any) {
+	public async componentDidUpdate(prevProps: any) {
 		if (prevProps.notesOrder !== this.props.notesOrder || prevProps.selectedFolderId !== this.props.selectedFolderId || prevProps.selectedTagId !== this.props.selectedTagId || prevProps.selectedSmartFilterId !== this.props.selectedSmartFilterId || prevProps.notesParentType !== this.props.notesParentType) {
 			await this.refreshNotes(this.props);
 		}
 	}
 
-	async refreshNotes(props: any = null) {
+	public async refreshNotes(props: any = null) {
 		if (props === null) props = this.props;
 
 		const options = {
@@ -149,36 +149,7 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 		});
 	}
 
-	deleteFolder_onPress(folderId: string) {
-		// eslint-disable-next-line promise/prefer-await-to-then -- Old code before rule was applied
-		dialogs.confirm(this, _('Delete notebook? All notes and sub-notebooks within this notebook will also be deleted.')).then((ok: boolean) => {
-			if (!ok) return;
-
-			Folder.delete(folderId)
-			// eslint-disable-next-line promise/prefer-await-to-then -- Old code before rule was applied
-				.then(() => {
-					this.props.dispatch({
-						type: 'NAV_GO',
-						routeName: 'Notes',
-						smartFilterId: 'c3176726992c11e9ac940492261af972',
-					});
-				})
-			// eslint-disable-next-line promise/prefer-await-to-then -- Old code before rule was applied
-				.catch(error => {
-					alert(error.message);
-				});
-		});
-	}
-
-	editFolder_onPress(folderId: string) {
-		this.props.dispatch({
-			type: 'NAV_GO',
-			routeName: 'Folder',
-			folderId: folderId,
-		});
-	}
-
-	newNoteNavigate = async (folderId: string, isTodo: boolean) => {
+	public newNoteNavigate = async (folderId: string, isTodo: boolean) => {
 		const newNote = await Note.save({
 			parent_id: folderId,
 			is_todo: isTodo ? 1 : 0,
@@ -191,7 +162,7 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 		});
 	};
 
-	parentItem(props: any = null) {
+	public parentItem(props: any = null) {
 		if (!props) props = this.props;
 
 		let output = null;
@@ -208,7 +179,7 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 		return output;
 	}
 
-	folderPickerOptions() {
+	public folderPickerOptions() {
 		const options = {
 			enabled: this.props.noteSelectionEnabled,
 			mustSelect: true,
@@ -220,7 +191,7 @@ class NotesScreenComponent extends BaseScreenComponent<any> {
 		return this.folderPickerOptions_;
 	}
 
-	render() {
+	public render() {
 		const parent = this.parentItem();
 		const theme = themeStyle(this.props.themeId);
 

packages/app-mobile/components/screens/search.tsx

@@ -27,11 +27,11 @@ class SearchScreenComponent extends BaseScreenComponent {
 	private styles_: any = {};
 	private scheduleSearchTimer_: any = null;
 
-	static navigationOptions() {
+	public static navigationOptions() {
 		return { header: null } as any;
 	}
 
-	constructor() {
+	public constructor() {
 		super();
 		this.state = {
 			query: '',
@@ -39,7 +39,7 @@ class SearchScreenComponent extends BaseScreenComponent {
 		};
 	}
 
-	styles() {
+	public styles() {
 		const theme = themeStyle(this.props.themeId);
 
 		if (this.styles_[this.props.themeId]) return this.styles_[this.props.themeId];
@@ -72,17 +72,17 @@ class SearchScreenComponent extends BaseScreenComponent {
 		return this.styles_[this.props.themeId];
 	}
 
-	componentDidMount() {
+	public componentDidMount() {
 		this.setState({ query: this.props.query });
 		void this.refreshSearch(this.props.query);
 		this.isMounted_ = true;
 	}
 
-	componentWillUnmount() {
+	public componentWillUnmount() {
 		this.isMounted_ = false;
 	}
 
-	clearButton_press() {
+	private clearButton_press() {
 		this.props.dispatch({
 			type: 'SEARCH_QUERY',
 			query: '',
@@ -92,7 +92,7 @@ class SearchScreenComponent extends BaseScreenComponent {
 		void this.refreshSearch('');
 	}
 
-	async refreshSearch(query: string = null) {
+	public async refreshSearch(query: string = null) {
 		if (!this.props.visible) return;
 
 		query = gotoAnythingStyleQuery(query);
@@ -130,7 +130,7 @@ class SearchScreenComponent extends BaseScreenComponent {
 		this.setState({ notes: notes });
 	}
 
-	scheduleSearch() {
+	public scheduleSearch() {
 		if (this.scheduleSearchTimer_) clearTimeout(this.scheduleSearchTimer_);
 
 		this.scheduleSearchTimer_ = setTimeout(() => {
@@ -139,7 +139,7 @@ class SearchScreenComponent extends BaseScreenComponent {
 		}, 200);
 	}
 
-	searchTextInput_changeText(text: string) {
+	private searchTextInput_changeText(text: string) {
 		this.setState({ query: text });
 
 		this.props.dispatch({
@@ -150,7 +150,7 @@ class SearchScreenComponent extends BaseScreenComponent {
 		this.scheduleSearch();
 	}
 
-	render() {
+	public render() {
 		if (!this.isMounted_) return null;
 
 		const theme = themeStyle(this.props.themeId);

packages/app-mobile/ios/Joplin.xcodeproj/project.pbxproj

@@ -517,13 +517,13 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Joplin/Joplin.entitlements;
-				CURRENT_PROJECT_VERSION = 88;
+				CURRENT_PROJECT_VERSION = 89;
 				DEVELOPMENT_TEAM = A9BXAFS6CT;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Joplin/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 12.10.4;
+				MARKETING_VERSION = 12.11.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -546,12 +546,12 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Joplin/Joplin.entitlements;
-				CURRENT_PROJECT_VERSION = 88;
+				CURRENT_PROJECT_VERSION = 89;
 				DEVELOPMENT_TEAM = A9BXAFS6CT;
 				INFOPLIST_FILE = Joplin/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 12.10.4;
+				MARKETING_VERSION = 12.11.0;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -698,14 +698,14 @@
 				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
 				CODE_SIGN_ENTITLEMENTS = ShareExtension/ShareExtension.entitlements;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 88;
+				CURRENT_PROJECT_VERSION = 89;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = A9BXAFS6CT;
 				GCC_C_LANGUAGE_STANDARD = gnu11;
 				INFOPLIST_FILE = ShareExtension/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
-				MARKETING_VERSION = 12.10.4;
+				MARKETING_VERSION = 12.11.0;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = net.cozic.joplin.ShareExtension;
@@ -729,14 +729,14 @@
 				CODE_SIGN_ENTITLEMENTS = ShareExtension/ShareExtension.entitlements;
 				CODE_SIGN_STYLE = Automatic;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 88;
+				CURRENT_PROJECT_VERSION = 89;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = A9BXAFS6CT;
 				GCC_C_LANGUAGE_STANDARD = gnu11;
 				INFOPLIST_FILE = ShareExtension/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
-				MARKETING_VERSION = 12.10.4;
+				MARKETING_VERSION = 12.11.0;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = net.cozic.joplin.ShareExtension;
 				PRODUCT_NAME = "$(TARGET_NAME)";

packages/app-mobile/ios/Podfile.lock

@@ -306,7 +306,7 @@ PODS:
   - React-jsinspector (0.70.6)
   - React-logger (0.70.6):
     - glog
-  - react-native-alarm-notification (2.10.0):
+  - react-native-alarm-notification (2.11.0):
     - React
   - react-native-camera (4.2.1):
     - React-Core
@@ -316,7 +316,7 @@ PODS:
     - React-Core
   - react-native-camera/RN (4.2.1):
     - React-Core
-  - react-native-document-picker (8.1.3):
+  - react-native-document-picker (8.1.4):
     - React-Core
   - react-native-fingerprint-scanner (6.0.0):
     - React
@@ -324,7 +324,7 @@ PODS:
     - React-Core
   - react-native-get-random-values (1.8.0):
     - React-Core
-  - react-native-image-picker (5.0.2):
+  - react-native-image-picker (5.1.0):
     - React-Core
   - react-native-image-resizer (1.4.5):
     - React-Core
@@ -332,7 +332,7 @@ PODS:
     - React-Core
   - react-native-rsa-native (2.0.5):
     - React
-  - react-native-saf-x (2.10.2):
+  - react-native-saf-x (2.11.0):
     - React-Core
   - react-native-safe-area-context (4.5.0):
     - RCT-Folly
@@ -432,7 +432,7 @@ PODS:
     - React
   - RNSecureRandom (1.0.1):
     - React
-  - RNShare (8.1.0):
+  - RNShare (8.2.1):
     - React-Core
   - RNVectorIcons (9.2.0):
     - React-Core
@@ -714,17 +714,17 @@ SPEC CHECKSUMS:
   React-jsiexecutor: b4a65947391c658450151275aa406f2b8263178f
   React-jsinspector: 60769e5a0a6d4b32294a2456077f59d0266f9a8b
   React-logger: 1623c216abaa88974afce404dc8f479406bbc3a0
-  react-native-alarm-notification: 0f58eaa37a4188480536fd7ab62db9b1dfba392f
+  react-native-alarm-notification: 26527410a6162d07a9dc57f4bbc62e94ff48e65d
   react-native-camera: 3eae183c1d111103963f3dd913b65d01aef8110f
-  react-native-document-picker: 958e2bc82e128be69055be261aeac8d872c8d34c
+  react-native-document-picker: a9bd26996d1b2e4f412dd186041714c79af381d0
   react-native-fingerprint-scanner: ac6656f18c8e45a7459302b84da41a44ad96dbbe
   react-native-geolocation: 69f4fd37650b8e7fee91816d395e62dd16f5ab8d
   react-native-get-random-values: a6ea6a8a65dc93e96e24a11105b1a9c8cfe1d72a
-  react-native-image-picker: a5dddebb4d2955ac4712a4ed66b00a85f62a63ac
+  react-native-image-picker: c33d4e79f0a14a2b66e5065e14946ae63749660b
   react-native-image-resizer: d9fb629a867335bdc13230ac2a58702bb8c8828f
   react-native-netinfo: 2517ad504b3d303e90d7a431b0fcaef76d207983
   react-native-rsa-native: 12132eb627797529fdb1f0d22fd0f8f9678df64a
-  react-native-saf-x: db5a33862e7aec0f9f2d4cccfe7264b09b234e2e
+  react-native-saf-x: 9bd5238d3b43d76bbec64aa82c173ac20a4bce9f
   react-native-safe-area-context: 39c2d8be3328df5d437ac1700f4f3a4f75716acc
   react-native-slider: 33b8d190b59d4f67a541061bb91775d53d617d9d
   react-native-sqlite-storage: f6d515e1c446d1e6d026aa5352908a25d4de3261
@@ -751,7 +751,7 @@ SPEC CHECKSUMS:
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNQuickAction: 6d404a869dc872cde841ad3147416a670d13fa93
   RNSecureRandom: 07efbdf2cd99efe13497433668e54acd7df49fef
-  RNShare: 48b3113cd089a2be8ff0515c3ae7a46a4db8a76b
+  RNShare: eaee3dd5a06dad397c7d3b14762007035c5de405
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Yoga: 99caf8d5ab45e9d637ee6e0174ec16fbbb01bcfc

packages/app-mobile/package.json

@@ -2,7 +2,7 @@
   "name": "@joplin/app-mobile",
   "description": "Joplin for Mobile",
   "license": "AGPL-3.0-or-later",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "private": true,
   "scripts": {
     "start": "react-native start --reset-cache",
@@ -18,10 +18,10 @@
     "postinstall": "jetify && yarn run build"
   },
   "dependencies": {
-    "@joplin/lib": "~2.10",
-    "@joplin/react-native-alarm-notification": "~2.10",
-    "@joplin/react-native-saf-x": "~2.10",
-    "@joplin/renderer": "~2.10",
+    "@joplin/lib": "~2.11",
+    "@joplin/react-native-alarm-notification": "~2.11",
+    "@joplin/react-native-saf-x": "~2.11",
+    "@joplin/renderer": "~2.11",
     "@react-native-community/clipboard": "1.5.1",
     "@react-native-community/datetimepicker": "6.7.5",
     "@react-native-community/geolocation": "2.1.0",
@@ -44,23 +44,23 @@
     "react-native-action-button": "2.8.5",
     "react-native-camera": "4.2.1",
     "react-native-dialogbox": "0.6.10",
-    "react-native-document-picker": "8.1.3",
+    "react-native-document-picker": "8.1.4",
     "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-get-random-values": "1.8.0",
-    "react-native-image-picker": "5.0.2",
+    "react-native-image-picker": "5.1.0",
     "react-native-image-resizer": "1.4.5",
     "react-native-modal-datetime-picker": "14.0.1",
-    "react-native-paper": "5.1.4",
+    "react-native-paper": "5.3.1",
     "react-native-popup-menu": "0.16.1",
     "react-native-quick-actions": "0.3.13",
     "react-native-rsa-native": "2.0.5",
     "react-native-safe-area-context": "4.5.0",
     "react-native-securerandom": "1.0.1",
-    "react-native-share": "8.1.0",
+    "react-native-share": "8.2.1",
     "react-native-side-menu-updated": "1.3.2",
     "react-native-sqlite-storage": "6.0.1",
     "react-native-url-polyfill": "1.3.0",
@@ -92,7 +92,7 @@
     "@codemirror/search": "6.2.3",
     "@codemirror/state": "6.1.4",
     "@codemirror/view": "6.7.1",
-    "@joplin/tools": "~2.10",
+    "@joplin/tools": "~2.11",
     "@lezer/highlight": "1.1.3",
     "@types/fs-extra": "9.0.13",
     "@types/jest": "29.2.6",
@@ -100,7 +100,7 @@
     "@types/react-redux": "7.1.25",
     "babel-plugin-module-resolver": "4.1.0",
     "execa": "4.1.0",
-    "fs-extra": "11.1.0",
+    "fs-extra": "11.1.1",
     "gulp": "4.0.2",
     "jest": "29.4.3",
     "jest-environment-jsdom": "29.4.3",
@@ -108,7 +108,7 @@
     "jsdom": "21.0.0",
     "md5-file": "5.0.0",
     "metro-react-native-babel-preset": "0.72.3",
-    "nodemon": "2.0.20",
+    "nodemon": "2.0.21",
     "ts-jest": "29.0.5",
     "ts-loader": "9.4.2",
     "ts-node": "10.9.1",

packages/app-mobile/root.tsx

@@ -501,7 +501,7 @@ async function initialize(dispatch: Function) {
 		if (Setting.value('env') === 'prod') {
 			await db.open({ name: getDatabaseName(currentProfile, isSubProfile) });
 		} else {
-			await db.open({ name: getDatabaseName(currentProfile, isSubProfile) });
+			await db.open({ name: getDatabaseName(currentProfile, isSubProfile, '-1') });
 
 			// await db.clearForTesting();
 		}

packages/app-mobile/services/AlarmServiceDriver.ios.ts

@@ -8,7 +8,7 @@ export default class AlarmServiceDriver {
 	private inAppNotificationHandler_: any = null;
 	private logger_: Logger;
 
-	constructor(logger: Logger) {
+	public constructor(logger: Logger) {
 		this.logger_ = logger;
 		PushNotificationIOS.addEventListener('localNotification', (instance: any) => {
 			if (!this.inAppNotificationHandler_) return;
@@ -23,19 +23,19 @@ export default class AlarmServiceDriver {
 		});
 	}
 
-	hasPersistentNotifications() {
+	public hasPersistentNotifications() {
 		return true;
 	}
 
-	notificationIsSet() {
+	public notificationIsSet() {
 		throw new Error('Available only for non-persistent alarms');
 	}
 
-	setInAppNotificationHandler(v: any) {
+	public setInAppNotificationHandler(v: any) {
 		this.inAppNotificationHandler_ = v;
 	}
 
-	async hasPermissions(perm: any = null) {
+	public async hasPermissions(perm: any = null) {
 		if (perm !== null) return perm.alert && perm.badge && perm.sound;
 
 		if (this.hasPermission_ !== null) return this.hasPermission_;
@@ -49,7 +49,7 @@ export default class AlarmServiceDriver {
 		});
 	}
 
-	async requestPermissions() {
+	public async requestPermissions() {
 		const options: any = {
 			alert: 1,
 			badge: 1,
@@ -60,11 +60,11 @@ export default class AlarmServiceDriver {
 		return this.hasPermissions(newPerm);
 	}
 
-	async clearNotification(id: number) {
+	public async clearNotification(id: number) {
 		PushNotificationIOS.cancelLocalNotifications({ id: `${id}` });
 	}
 
-	async scheduleNotification(notification: Notification) {
+	public async scheduleNotification(notification: Notification) {
 		if (!(await this.hasPermissions())) {
 			const ok = await this.requestPermissions();
 			if (!ok) return;