Desktop release v2.8.4

Auto-updated using release-website.sh

.eslintignore

@@ -148,6 +148,9 @@ packages/app-desktop/checkForUpdates.js.map
 packages/app-desktop/commands/copyDevCommand.d.ts
 packages/app-desktop/commands/copyDevCommand.js
 packages/app-desktop/commands/copyDevCommand.js.map
+packages/app-desktop/commands/editProfileConfig.d.ts
+packages/app-desktop/commands/editProfileConfig.js
+packages/app-desktop/commands/editProfileConfig.js.map
 packages/app-desktop/commands/exportFolders.d.ts
 packages/app-desktop/commands/exportFolders.js
 packages/app-desktop/commands/exportFolders.js.map
@@ -175,6 +178,18 @@ packages/app-desktop/commands/startExternalEditing.js.map
 packages/app-desktop/commands/stopExternalEditing.d.ts
 packages/app-desktop/commands/stopExternalEditing.js
 packages/app-desktop/commands/stopExternalEditing.js.map
+packages/app-desktop/commands/switchProfile.d.ts
+packages/app-desktop/commands/switchProfile.js
+packages/app-desktop/commands/switchProfile.js.map
+packages/app-desktop/commands/switchProfile1.d.ts
+packages/app-desktop/commands/switchProfile1.js
+packages/app-desktop/commands/switchProfile1.js.map
+packages/app-desktop/commands/switchProfile2.d.ts
+packages/app-desktop/commands/switchProfile2.js
+packages/app-desktop/commands/switchProfile2.js.map
+packages/app-desktop/commands/switchProfile3.d.ts
+packages/app-desktop/commands/switchProfile3.js
+packages/app-desktop/commands/switchProfile3.js.map
 packages/app-desktop/commands/toggleExternalEditing.d.ts
 packages/app-desktop/commands/toggleExternalEditing.js
 packages/app-desktop/commands/toggleExternalEditing.js.map
@@ -217,6 +232,9 @@ packages/app-desktop/gui/Dialog.js.map
 packages/app-desktop/gui/DialogButtonRow.d.ts
 packages/app-desktop/gui/DialogButtonRow.js
 packages/app-desktop/gui/DialogButtonRow.js.map
+packages/app-desktop/gui/DialogButtonRow/useKeyboardHandler.d.ts
+packages/app-desktop/gui/DialogButtonRow/useKeyboardHandler.js
+packages/app-desktop/gui/DialogButtonRow/useKeyboardHandler.js.map
 packages/app-desktop/gui/DialogTitle.d.ts
 packages/app-desktop/gui/DialogTitle.js
 packages/app-desktop/gui/DialogTitle.js.map
@@ -235,6 +253,9 @@ packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.js.map
 packages/app-desktop/gui/ErrorBoundary.d.ts
 packages/app-desktop/gui/ErrorBoundary.js
 packages/app-desktop/gui/ErrorBoundary.js.map
+packages/app-desktop/gui/FolderIconBox.d.ts
+packages/app-desktop/gui/FolderIconBox.js
+packages/app-desktop/gui/FolderIconBox.js.map
 packages/app-desktop/gui/KeymapConfig/KeymapConfigScreen.d.ts
 packages/app-desktop/gui/KeymapConfig/KeymapConfigScreen.js
 packages/app-desktop/gui/KeymapConfig/KeymapConfigScreen.js.map
@@ -256,6 +277,9 @@ packages/app-desktop/gui/KeymapConfig/utils/useKeymap.js.map
 packages/app-desktop/gui/MainScreen/MainScreen.d.ts
 packages/app-desktop/gui/MainScreen/MainScreen.js
 packages/app-desktop/gui/MainScreen/MainScreen.js.map
+packages/app-desktop/gui/MainScreen/commands/addProfile.d.ts
+packages/app-desktop/gui/MainScreen/commands/addProfile.js
+packages/app-desktop/gui/MainScreen/commands/addProfile.js.map
 packages/app-desktop/gui/MainScreen/commands/commandPalette.d.ts
 packages/app-desktop/gui/MainScreen/commands/commandPalette.js
 packages/app-desktop/gui/MainScreen/commands/commandPalette.js.map
@@ -487,6 +511,12 @@ packages/app-desktop/gui/NoteEditor/utils/clipboardUtils.test.js.map
 packages/app-desktop/gui/NoteEditor/utils/contextMenu.d.ts
 packages/app-desktop/gui/NoteEditor/utils/contextMenu.js
 packages/app-desktop/gui/NoteEditor/utils/contextMenu.js.map
+packages/app-desktop/gui/NoteEditor/utils/contextMenu.test.d.ts
+packages/app-desktop/gui/NoteEditor/utils/contextMenu.test.js
+packages/app-desktop/gui/NoteEditor/utils/contextMenu.test.js.map
+packages/app-desktop/gui/NoteEditor/utils/contextMenuUtils.d.ts
+packages/app-desktop/gui/NoteEditor/utils/contextMenuUtils.js
+packages/app-desktop/gui/NoteEditor/utils/contextMenuUtils.js.map
 packages/app-desktop/gui/NoteEditor/utils/index.d.ts
 packages/app-desktop/gui/NoteEditor/utils/index.js
 packages/app-desktop/gui/NoteEditor/utils/index.js.map
@@ -532,6 +562,9 @@ packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js.map
 packages/app-desktop/gui/NoteList/commands/index.d.ts
 packages/app-desktop/gui/NoteList/commands/index.js
 packages/app-desktop/gui/NoteList/commands/index.js.map
+packages/app-desktop/gui/NoteList/types.d.ts
+packages/app-desktop/gui/NoteList/types.js
+packages/app-desktop/gui/NoteList/types.js.map
 packages/app-desktop/gui/NoteListControls/NoteListControls.d.ts
 packages/app-desktop/gui/NoteListControls/NoteListControls.js
 packages/app-desktop/gui/NoteListControls/NoteListControls.js.map
@@ -721,6 +754,9 @@ packages/app-desktop/gui/utils/convertToScreenCoordinates.js.map
 packages/app-desktop/gui/utils/loadScript.d.ts
 packages/app-desktop/gui/utils/loadScript.js
 packages/app-desktop/gui/utils/loadScript.js.map
+packages/app-desktop/loadResources.testEnv.d.ts
+packages/app-desktop/loadResources.testEnv.js
+packages/app-desktop/loadResources.testEnv.js.map
 packages/app-desktop/plugins/GotoAnything.d.ts
 packages/app-desktop/plugins/GotoAnything.js
 packages/app-desktop/plugins/GotoAnything.js.map
@@ -1030,6 +1066,9 @@ packages/lib/database.js.map
 packages/lib/debug/DebugService.d.ts
 packages/lib/debug/DebugService.js
 packages/lib/debug/DebugService.js.map
+packages/lib/dom.d.ts
+packages/lib/dom.js
+packages/lib/dom.js.map
 packages/lib/dummy.test.d.ts
 packages/lib/dummy.test.js
 packages/lib/dummy.test.js.map
@@ -1147,6 +1186,9 @@ packages/lib/models/NoteTag.js.map
 packages/lib/models/Resource.d.ts
 packages/lib/models/Resource.js
 packages/lib/models/Resource.js.map
+packages/lib/models/Resource.test.d.ts
+packages/lib/models/Resource.test.js
+packages/lib/models/Resource.test.js.map
 packages/lib/models/ResourceLocalState.d.ts
 packages/lib/models/ResourceLocalState.js
 packages/lib/models/ResourceLocalState.js.map
@@ -1231,6 +1273,9 @@ packages/lib/services/DecryptionWorker.js.map
 packages/lib/services/ExternalEditWatcher.d.ts
 packages/lib/services/ExternalEditWatcher.js
 packages/lib/services/ExternalEditWatcher.js.map
+packages/lib/services/ExternalEditWatcher/utils.d.ts
+packages/lib/services/ExternalEditWatcher/utils.js
+packages/lib/services/ExternalEditWatcher/utils.js.map
 packages/lib/services/ItemChangeUtils.d.ts
 packages/lib/services/ItemChangeUtils.js
 packages/lib/services/ItemChangeUtils.js.map
@@ -1555,6 +1600,24 @@ packages/lib/services/plugins/utils/validatePluginVersion.js.map
 packages/lib/services/plugins/utils/validatePluginVersion.test.d.ts
 packages/lib/services/plugins/utils/validatePluginVersion.test.js
 packages/lib/services/plugins/utils/validatePluginVersion.test.js.map
+packages/lib/services/profileConfig/index.d.ts
+packages/lib/services/profileConfig/index.js
+packages/lib/services/profileConfig/index.js.map
+packages/lib/services/profileConfig/index.test.d.ts
+packages/lib/services/profileConfig/index.test.js
+packages/lib/services/profileConfig/index.test.js.map
+packages/lib/services/profileConfig/initProfile.d.ts
+packages/lib/services/profileConfig/initProfile.js
+packages/lib/services/profileConfig/initProfile.js.map
+packages/lib/services/profileConfig/mergeGlobalAndLocalSettings.d.ts
+packages/lib/services/profileConfig/mergeGlobalAndLocalSettings.js
+packages/lib/services/profileConfig/mergeGlobalAndLocalSettings.js.map
+packages/lib/services/profileConfig/splitGlobalAndLocalSettings.d.ts
+packages/lib/services/profileConfig/splitGlobalAndLocalSettings.js
+packages/lib/services/profileConfig/splitGlobalAndLocalSettings.js.map
+packages/lib/services/profileConfig/types.d.ts
+packages/lib/services/profileConfig/types.js
+packages/lib/services/profileConfig/types.js.map
 packages/lib/services/rest/Api.d.ts
 packages/lib/services/rest/Api.js
 packages/lib/services/rest/Api.js.map
@@ -1633,6 +1696,9 @@ packages/lib/services/searchengine/SearchEngineUtils.js.map
 packages/lib/services/searchengine/SearchEngineUtils.test.d.ts
 packages/lib/services/searchengine/SearchEngineUtils.test.js
 packages/lib/services/searchengine/SearchEngineUtils.test.js.map
+packages/lib/services/searchengine/SearchFilter.test.d.ts
+packages/lib/services/searchengine/SearchFilter.test.js
+packages/lib/services/searchengine/SearchFilter.test.js.map
 packages/lib/services/searchengine/filterParser.d.ts
 packages/lib/services/searchengine/filterParser.js
 packages/lib/services/searchengine/filterParser.js.map
@@ -1960,6 +2026,9 @@ packages/tools/generate-images.js.map
 packages/tools/git-changelog.d.ts
 packages/tools/git-changelog.js
 packages/tools/git-changelog.js.map
+packages/tools/licenseChecker.d.ts
+packages/tools/licenseChecker.js
+packages/tools/licenseChecker.js.map
 packages/tools/release-android.d.ts
 packages/tools/release-android.js
 packages/tools/release-android.js.map
@@ -2002,9 +2071,21 @@ packages/tools/website/build.js.map
 packages/tools/website/updateDownloadPage.d.ts
 packages/tools/website/updateDownloadPage.js
 packages/tools/website/updateDownloadPage.js.map
+packages/tools/website/updateNews.d.ts
+packages/tools/website/updateNews.js
+packages/tools/website/updateNews.js.map
 packages/tools/website/utils/frontMatter.d.ts
 packages/tools/website/utils/frontMatter.js
 packages/tools/website/utils/frontMatter.js.map
+packages/tools/website/utils/openGraph.d.ts
+packages/tools/website/utils/openGraph.js
+packages/tools/website/utils/openGraph.js.map
+packages/tools/website/utils/openGraph.test.d.ts
+packages/tools/website/utils/openGraph.test.js
+packages/tools/website/utils/openGraph.test.js.map
+packages/tools/website/utils/parser.d.ts
+packages/tools/website/utils/parser.js
+packages/tools/website/utils/parser.js.map
 packages/tools/website/utils/pressCarousel.d.ts
 packages/tools/website/utils/pressCarousel.js
 packages/tools/website/utils/pressCarousel.js.map

.github/scripts/run_ci.sh

@@ -38,6 +38,8 @@ echo "GITHUB_REF=$GITHUB_REF"
 echo "RUNNER_OS=$RUNNER_OS"
 echo "GIT_TAG_NAME=$GIT_TAG_NAME"
 echo "BUILD_SEQUENCIAL=$BUILD_SEQUENCIAL"
+echo "SERVER_REPOSITORY=$SERVER_REPOSITORY"
+echo "SERVER_TAG_PREFIX=$SERVER_TAG_PREFIX"
 
 echo "IS_CONTINUOUS_INTEGRATION=$IS_CONTINUOUS_INTEGRATION"
 echo "IS_PULL_REQUEST=$IS_PULL_REQUEST"
@@ -169,10 +171,10 @@ cd "$ROOT_DIR/packages/app-desktop"
 if [[ $GIT_TAG_NAME = v* ]]; then
 	echo "Step: Building and publishing desktop application..."
 	USE_HARD_LINKS=false yarn run dist
-elif [[ $GIT_TAG_NAME = server-v* ]] && [[ $IS_LINUX = 1 ]]; then
+elif [[ $IS_LINUX = 1 ]] && [[ $GIT_TAG_NAME = $SERVER_TAG_PREFIX-* ]]; then
 	echo "Step: Building Docker Image..."
 	cd "$ROOT_DIR"
-	yarn run buildServerDocker --tag-name $GIT_TAG_NAME --push-images
+	yarn run buildServerDocker --tag-name $GIT_TAG_NAME --push-images --repository $SERVER_REPOSITORY
 else
 	echo "Step: Building but *not* publishing desktop application..."
 	USE_HARD_LINKS=false yarn run dist --publish=never

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

@@ -16,7 +16,7 @@ jobs:
           days-before-stale: 30
           days-before-close: 7
           operations-per-run: 1000
-          exempt-issue-labels: 'good first issue,upstream,backlog,high,medium,spec,cannot reproduce'
+          exempt-issue-labels: 'good first issue,upstream,backlog,high,medium,spec,cannot reproduce,enhancement'
           stale-issue-label: 'stale'
           close-issue-message: 'Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, feel free to create a new issue with up-to-date information.'
           # Don't process pull requests at all

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

@@ -5,7 +5,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [macos-latest, ubuntu-latest, windows-2016]
+        # Removed windows-2016 for now - discontinued by GitHub
+        os: [macos-latest, ubuntu-latest, windows-2019]
     steps:
 
       # Silence apt-get update errors (for example when a module doesn't
@@ -98,6 +99,8 @@ jobs:
         env:
           IS_CONTINUOUS_INTEGRATION: 1
           BUILD_SEQUENCIAL: 1
+          SERVER_REPOSITORY: joplin/server
+          SERVER_TAG_PREFIX: server
         run: |
           yarn install && cd packages/app-desktop && yarn run dist --publish=never
 
@@ -138,5 +141,5 @@ jobs:
           BUILD_SEQUENCIAL: 1
         run: |
           yarn install
-          yarn run buildServerDocker --tag-name server-v0.0.0
+          yarn run buildServerDocker --tag-name server-v0.0.0 --repository joplin/server
           

.gitignore

@@ -138,6 +138,9 @@ packages/app-desktop/checkForUpdates.js.map
 packages/app-desktop/commands/copyDevCommand.d.ts
 packages/app-desktop/commands/copyDevCommand.js
 packages/app-desktop/commands/copyDevCommand.js.map
+packages/app-desktop/commands/editProfileConfig.d.ts
+packages/app-desktop/commands/editProfileConfig.js
+packages/app-desktop/commands/editProfileConfig.js.map
 packages/app-desktop/commands/exportFolders.d.ts
 packages/app-desktop/commands/exportFolders.js
 packages/app-desktop/commands/exportFolders.js.map
@@ -165,6 +168,18 @@ packages/app-desktop/commands/startExternalEditing.js.map
 packages/app-desktop/commands/stopExternalEditing.d.ts
 packages/app-desktop/commands/stopExternalEditing.js
 packages/app-desktop/commands/stopExternalEditing.js.map
+packages/app-desktop/commands/switchProfile.d.ts
+packages/app-desktop/commands/switchProfile.js
+packages/app-desktop/commands/switchProfile.js.map
+packages/app-desktop/commands/switchProfile1.d.ts
+packages/app-desktop/commands/switchProfile1.js
+packages/app-desktop/commands/switchProfile1.js.map
+packages/app-desktop/commands/switchProfile2.d.ts
+packages/app-desktop/commands/switchProfile2.js
+packages/app-desktop/commands/switchProfile2.js.map
+packages/app-desktop/commands/switchProfile3.d.ts
+packages/app-desktop/commands/switchProfile3.js
+packages/app-desktop/commands/switchProfile3.js.map
 packages/app-desktop/commands/toggleExternalEditing.d.ts
 packages/app-desktop/commands/toggleExternalEditing.js
 packages/app-desktop/commands/toggleExternalEditing.js.map
@@ -207,6 +222,9 @@ packages/app-desktop/gui/Dialog.js.map
 packages/app-desktop/gui/DialogButtonRow.d.ts
 packages/app-desktop/gui/DialogButtonRow.js
 packages/app-desktop/gui/DialogButtonRow.js.map
+packages/app-desktop/gui/DialogButtonRow/useKeyboardHandler.d.ts
+packages/app-desktop/gui/DialogButtonRow/useKeyboardHandler.js
+packages/app-desktop/gui/DialogButtonRow/useKeyboardHandler.js.map
 packages/app-desktop/gui/DialogTitle.d.ts
 packages/app-desktop/gui/DialogTitle.js
 packages/app-desktop/gui/DialogTitle.js.map
@@ -225,6 +243,9 @@ packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.js.map
 packages/app-desktop/gui/ErrorBoundary.d.ts
 packages/app-desktop/gui/ErrorBoundary.js
 packages/app-desktop/gui/ErrorBoundary.js.map
+packages/app-desktop/gui/FolderIconBox.d.ts
+packages/app-desktop/gui/FolderIconBox.js
+packages/app-desktop/gui/FolderIconBox.js.map
 packages/app-desktop/gui/KeymapConfig/KeymapConfigScreen.d.ts
 packages/app-desktop/gui/KeymapConfig/KeymapConfigScreen.js
 packages/app-desktop/gui/KeymapConfig/KeymapConfigScreen.js.map
@@ -246,6 +267,9 @@ packages/app-desktop/gui/KeymapConfig/utils/useKeymap.js.map
 packages/app-desktop/gui/MainScreen/MainScreen.d.ts
 packages/app-desktop/gui/MainScreen/MainScreen.js
 packages/app-desktop/gui/MainScreen/MainScreen.js.map
+packages/app-desktop/gui/MainScreen/commands/addProfile.d.ts
+packages/app-desktop/gui/MainScreen/commands/addProfile.js
+packages/app-desktop/gui/MainScreen/commands/addProfile.js.map
 packages/app-desktop/gui/MainScreen/commands/commandPalette.d.ts
 packages/app-desktop/gui/MainScreen/commands/commandPalette.js
 packages/app-desktop/gui/MainScreen/commands/commandPalette.js.map
@@ -477,6 +501,12 @@ packages/app-desktop/gui/NoteEditor/utils/clipboardUtils.test.js.map
 packages/app-desktop/gui/NoteEditor/utils/contextMenu.d.ts
 packages/app-desktop/gui/NoteEditor/utils/contextMenu.js
 packages/app-desktop/gui/NoteEditor/utils/contextMenu.js.map
+packages/app-desktop/gui/NoteEditor/utils/contextMenu.test.d.ts
+packages/app-desktop/gui/NoteEditor/utils/contextMenu.test.js
+packages/app-desktop/gui/NoteEditor/utils/contextMenu.test.js.map
+packages/app-desktop/gui/NoteEditor/utils/contextMenuUtils.d.ts
+packages/app-desktop/gui/NoteEditor/utils/contextMenuUtils.js
+packages/app-desktop/gui/NoteEditor/utils/contextMenuUtils.js.map
 packages/app-desktop/gui/NoteEditor/utils/index.d.ts
 packages/app-desktop/gui/NoteEditor/utils/index.js
 packages/app-desktop/gui/NoteEditor/utils/index.js.map
@@ -522,6 +552,9 @@ packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js.map
 packages/app-desktop/gui/NoteList/commands/index.d.ts
 packages/app-desktop/gui/NoteList/commands/index.js
 packages/app-desktop/gui/NoteList/commands/index.js.map
+packages/app-desktop/gui/NoteList/types.d.ts
+packages/app-desktop/gui/NoteList/types.js
+packages/app-desktop/gui/NoteList/types.js.map
 packages/app-desktop/gui/NoteListControls/NoteListControls.d.ts
 packages/app-desktop/gui/NoteListControls/NoteListControls.js
 packages/app-desktop/gui/NoteListControls/NoteListControls.js.map
@@ -711,6 +744,9 @@ packages/app-desktop/gui/utils/convertToScreenCoordinates.js.map
 packages/app-desktop/gui/utils/loadScript.d.ts
 packages/app-desktop/gui/utils/loadScript.js
 packages/app-desktop/gui/utils/loadScript.js.map
+packages/app-desktop/loadResources.testEnv.d.ts
+packages/app-desktop/loadResources.testEnv.js
+packages/app-desktop/loadResources.testEnv.js.map
 packages/app-desktop/plugins/GotoAnything.d.ts
 packages/app-desktop/plugins/GotoAnything.js
 packages/app-desktop/plugins/GotoAnything.js.map
@@ -1020,6 +1056,9 @@ packages/lib/database.js.map
 packages/lib/debug/DebugService.d.ts
 packages/lib/debug/DebugService.js
 packages/lib/debug/DebugService.js.map
+packages/lib/dom.d.ts
+packages/lib/dom.js
+packages/lib/dom.js.map
 packages/lib/dummy.test.d.ts
 packages/lib/dummy.test.js
 packages/lib/dummy.test.js.map
@@ -1137,6 +1176,9 @@ packages/lib/models/NoteTag.js.map
 packages/lib/models/Resource.d.ts
 packages/lib/models/Resource.js
 packages/lib/models/Resource.js.map
+packages/lib/models/Resource.test.d.ts
+packages/lib/models/Resource.test.js
+packages/lib/models/Resource.test.js.map
 packages/lib/models/ResourceLocalState.d.ts
 packages/lib/models/ResourceLocalState.js
 packages/lib/models/ResourceLocalState.js.map
@@ -1221,6 +1263,9 @@ packages/lib/services/DecryptionWorker.js.map
 packages/lib/services/ExternalEditWatcher.d.ts
 packages/lib/services/ExternalEditWatcher.js
 packages/lib/services/ExternalEditWatcher.js.map
+packages/lib/services/ExternalEditWatcher/utils.d.ts
+packages/lib/services/ExternalEditWatcher/utils.js
+packages/lib/services/ExternalEditWatcher/utils.js.map
 packages/lib/services/ItemChangeUtils.d.ts
 packages/lib/services/ItemChangeUtils.js
 packages/lib/services/ItemChangeUtils.js.map
@@ -1545,6 +1590,24 @@ packages/lib/services/plugins/utils/validatePluginVersion.js.map
 packages/lib/services/plugins/utils/validatePluginVersion.test.d.ts
 packages/lib/services/plugins/utils/validatePluginVersion.test.js
 packages/lib/services/plugins/utils/validatePluginVersion.test.js.map
+packages/lib/services/profileConfig/index.d.ts
+packages/lib/services/profileConfig/index.js
+packages/lib/services/profileConfig/index.js.map
+packages/lib/services/profileConfig/index.test.d.ts
+packages/lib/services/profileConfig/index.test.js
+packages/lib/services/profileConfig/index.test.js.map
+packages/lib/services/profileConfig/initProfile.d.ts
+packages/lib/services/profileConfig/initProfile.js
+packages/lib/services/profileConfig/initProfile.js.map
+packages/lib/services/profileConfig/mergeGlobalAndLocalSettings.d.ts
+packages/lib/services/profileConfig/mergeGlobalAndLocalSettings.js
+packages/lib/services/profileConfig/mergeGlobalAndLocalSettings.js.map
+packages/lib/services/profileConfig/splitGlobalAndLocalSettings.d.ts
+packages/lib/services/profileConfig/splitGlobalAndLocalSettings.js
+packages/lib/services/profileConfig/splitGlobalAndLocalSettings.js.map
+packages/lib/services/profileConfig/types.d.ts
+packages/lib/services/profileConfig/types.js
+packages/lib/services/profileConfig/types.js.map
 packages/lib/services/rest/Api.d.ts
 packages/lib/services/rest/Api.js
 packages/lib/services/rest/Api.js.map
@@ -1623,6 +1686,9 @@ packages/lib/services/searchengine/SearchEngineUtils.js.map
 packages/lib/services/searchengine/SearchEngineUtils.test.d.ts
 packages/lib/services/searchengine/SearchEngineUtils.test.js
 packages/lib/services/searchengine/SearchEngineUtils.test.js.map
+packages/lib/services/searchengine/SearchFilter.test.d.ts
+packages/lib/services/searchengine/SearchFilter.test.js
+packages/lib/services/searchengine/SearchFilter.test.js.map
 packages/lib/services/searchengine/filterParser.d.ts
 packages/lib/services/searchengine/filterParser.js
 packages/lib/services/searchengine/filterParser.js.map
@@ -1950,6 +2016,9 @@ packages/tools/generate-images.js.map
 packages/tools/git-changelog.d.ts
 packages/tools/git-changelog.js
 packages/tools/git-changelog.js.map
+packages/tools/licenseChecker.d.ts
+packages/tools/licenseChecker.js
+packages/tools/licenseChecker.js.map
 packages/tools/release-android.d.ts
 packages/tools/release-android.js
 packages/tools/release-android.js.map
@@ -1992,9 +2061,21 @@ packages/tools/website/build.js.map
 packages/tools/website/updateDownloadPage.d.ts
 packages/tools/website/updateDownloadPage.js
 packages/tools/website/updateDownloadPage.js.map
+packages/tools/website/updateNews.d.ts
+packages/tools/website/updateNews.js
+packages/tools/website/updateNews.js.map
 packages/tools/website/utils/frontMatter.d.ts
 packages/tools/website/utils/frontMatter.js
 packages/tools/website/utils/frontMatter.js.map
+packages/tools/website/utils/openGraph.d.ts
+packages/tools/website/utils/openGraph.js
+packages/tools/website/utils/openGraph.js.map
+packages/tools/website/utils/openGraph.test.d.ts
+packages/tools/website/utils/openGraph.test.js
+packages/tools/website/utils/openGraph.test.js.map
+packages/tools/website/utils/parser.d.ts
+packages/tools/website/utils/parser.js
+packages/tools/website/utils/parser.js.map
 packages/tools/website/utils/pressCarousel.d.ts
 packages/tools/website/utils/pressCarousel.js
 packages/tools/website/utils/pressCarousel.js.map

.yarn/patches/markdown-it-multimd-table-npm-4.1.1-47e334d4bd

@@ -1,43 +0,0 @@
-diff --git a/index.js b/index.js
-index 85d89900d5fe575dd0c19430209fb1703b03554e..5fa68cc9a4bd2b21a7188bd263262fd9b1604ac6 100644
---- a/index.js
-+++ b/index.js
-@@ -145,7 +145,8 @@ module.exports = function multimd_table_plugin(md, options) {
-         colspan, leftToken,
-         rowspan, upTokens = [],
-         tableLines, tgroupLines,
--        tag, text, range, r, c, b;
-+        tag, text, range, r, c, b, t,
-+        blockState;
- 
-     if (startLine + 2 > endLine) { return false; }
- 
-@@ -315,18 +316,26 @@ module.exports = function multimd_table_plugin(md, options) {
- 
-         /* Multiline. Join the text and feed into markdown-it blockParser. */
-         if (options.multiline && trToken.meta.multiline && trToken.meta.mbounds) {
--          text = [ text.trimRight() ];
-+          // Pad the text with empty lines to ensure the line number mapping is correct
-+          text = new Array(trToken.map[0]).fill('').concat([ text.trimRight() ]);
-           for (b = 1; b < trToken.meta.mbounds.length; b++) {
-             /* Line with N bounds has cells indexed from 0 to N-2 */
-             if (c > trToken.meta.mbounds[b].length - 2) { continue; }
-             range = [ trToken.meta.mbounds[b][c] + 1, trToken.meta.mbounds[b][c + 1] ];
-             text.push(state.src.slice.apply(state.src, range).trimRight());
-           }
--          state.md.block.parse(text.join('\n'), state.md, state.env, state.tokens);
-+          blockState = new state.md.block.State(text.join('\n'), state.md, state.env, []);
-+          blockState.level = trToken.level + 1;
-+          // Start tokenizing from the actual content (trToken.map[0])
-+          state.md.block.tokenize(blockState, trToken.map[0], blockState.lineMax);
-+          for (t = 0; t < blockState.tokens.length; t++) {
-+            state.tokens.push(blockState.tokens[t]);
-+          }
-         } else {
-           token          = state.push('inline', '', 0);
-           token.content  = text.trim();
-           token.map      = trToken.map;
-+          token.level    = trToken.level + 1;
-           token.children = [];
-         }
- 

Assets/WebsiteAssets/css/site.css

@@ -307,7 +307,7 @@ p,
 div.navbar-mobile-content a.sponsor-button {
 	padding: 4px 12px;
 	font-size: 0.9em;
-	margin-right: 1em;
+	margin-right: 0.5em;
 }
 
 #nav-section.white-bg a {
@@ -670,9 +670,9 @@ footer .bottom-links-row p {
     margin-right: auto;
 }
 
-.news-page     img,
-.news-item-page img {
-	max-width: 650px;
+.news-page .main-content img,
+.news-item-page .main-content img {
+	max-width: 100%;
 }
 
 /*****************************************************************
@@ -740,7 +740,7 @@ footer .bottom-links-row p {
 	}
 
 	#nav-section .button-link {
-		padding: 4px 12px;
+		padding: 4px 10px;
 		font-size: 15px;
 	}
 }
@@ -937,6 +937,25 @@ footer .bottom-links-row p {
 	}
 }
 
+/*****************************************************************
+ VERY NARROW VIEW
+ eg for Galaxy Fold
+*****************************************************************/
+
+@media (max-width: 350px) {
+
+	#nav-section .navbar-mobile-content a.sponsor-button {
+		background-color: transparent;
+		color: #0557ba !important;
+		font-size: 18px;
+	}
+
+	#nav-section .navbar-mobile-content a.sponsor-button .sponsor-button-label {
+		display: none;
+	}
+
+}
+
 /*****************************************************************
  PLANS PAGE
 *****************************************************************/
@@ -1054,6 +1073,10 @@ footer .bottom-links-row p {
 	display: none;
 }
 
+.joplin-cloud-feature-list table {
+	width: 100%;
+}
+
 .price-row .plan-type {
 	display: flex;
 	align-items: center;

Assets/WebsiteAssets/templates/front.mustache

@@ -10,8 +10,8 @@
 		<link rel="icon" href="{{imageBaseUrl}}/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
-		<meta name="description" content="Joplin, the open source note-taking application" />
 		<link rel="stylesheet" href="{{{assetUrls.css.fontawesome}}}">
+		{{> openGraphTags}}
 		<link
 			rel="stylesheet"
 			href="{{cssBaseUrl}}/bootstrap5.0.2.min.css"

Assets/WebsiteAssets/templates/main-new.mustache

@@ -23,7 +23,7 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 		<link rel="icon" href="{{imageBaseUrl}}/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
-		<meta name="description" content="Joplin, the open source note-taking application" />
+		{{> openGraphTags}}
 		<link
 			rel="stylesheet"
 			href="{{cssBaseUrl}}/bootstrap5.0.2.min.css"
@@ -65,11 +65,6 @@ https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}
 							{{{contentHtml}}}
 							{{#showBottomLinks}}
 								<div class="bottom-links">
-									{{#discussOnForumLink}}
-										<a class="bottom-link" href="{{{discussOnForumLink}}}">
-											<i class="fab fa-discourse"></i></i> Discuss on the forum
-										</a>
-									{{/discussOnForumLink}}
 									{{#showImproveThisDoc}}
 										<a class="bottom-link" href="https://github.com/laurent22/joplin/blob/dev/{{{sourceMarkdownFile}}}">
 											<i class="fab fa-github"></i> Improve this doc

Assets/WebsiteAssets/templates/partials/navbar.mustache

@@ -12,7 +12,7 @@
 				</a>
 			</div>
 			<div class="col-9 text-right d-none d-md-block">
-				<a href="https://twitter.com/joplinapp" title="Joplin Twitter feed" class="fw500"><i class="fab fa-twitter"></i></a>
+				{{> twitterLink}}
 				<a href="{{baseUrl}}/news/" class="fw500">News</a>
 				<a href="{{baseUrl}}/help/" class="fw500">Help</a>
 				<a href="{{forumUrl}}" class="fw500">Forum</a>
@@ -22,6 +22,7 @@
 				{{> supportButton}}
 			</div>
 			<div class="col-9 text-right d-block d-md-none navbar-mobile-content">
+				{{> twitterLink}}
 				{{> supportButton}}
 
 				<span class="pointer"

Assets/WebsiteAssets/templates/partials/openGraphTags.mustache

@@ -0,0 +1,14 @@
+{{#openGraph}}
+	<meta name="description" content="{{openGraph.description}}" />
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:site" content="@joplinapp" />
+	<meta property="og:url" content="{{{openGraph.url}}}" />
+	<meta property="og:title" content="{{openGraph.title}}" />
+	<meta property="twitter:title" content="{{openGraph.title}}" />
+	<meta property="og:description" content="{{openGraph.description}}" />
+	<meta property="twitter:description" content="{{openGraph.description}}" />
+	{{#openGraph.image}}
+		<meta property="og:image" content="{{{openGraph.image}}}" />
+		<meta property="twitter:image" content="{{{openGraph.image}}}" />
+	{{/openGraph.image}}
+{{/openGraph}}

Assets/WebsiteAssets/templates/partials/plan.mustache

@@ -6,11 +6,11 @@
 			</div>
 
 			<div class="plan-price plan-price-monthly">
-				{{priceMonthly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;/month</sub>
+				{{priceMonthly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;/month{{#footnote}} (*){{/footnote}}</sub>
 			</div>
 
 			<div class="plan-price plan-price-yearly">
-				{{priceYearly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;/month</sub>
+				{{priceYearly.formattedMonthlyAmount}}<sub class="per-month">&nbsp;/month{{#footnote}} (*){{/footnote}}</sub>
 			</div>
 		</div>
 
@@ -20,17 +20,19 @@
 			</div>
 		</div>
 
-		{{#featuresOn}}
+		{{#featureLabelsOn}}
 			<p><i class="fas fa-check feature feature-on"></i>{{.}}</p>
-		{{/featuresOn}}
+		{{/featureLabelsOn}}
 
-		{{#featuresOff}}
+		{{#featureLabelsOff}}
 			<p class="unchecked-text"><i class="fas fa-times feature feature-off"></i>{{.}}</p>
-		{{/featuresOff}}
+		{{/featureLabelsOff}}
 		
 		<p class="text-center subscribe-wrapper">
 			<a id="subscribeButton-{{name}}" href="{{cfaUrl}}" class="button-link btn-white subscribeButton">{{cfaLabel}}</a>
 		</p>
+
+		{{#footnote}}<sub>(*) {{.}}</sub>{{/footnote}}
 	</div>
 
 	<script>

Assets/WebsiteAssets/templates/partials/supportButton.mustache

@@ -1,3 +1,3 @@
 <a class="button-link btn-blue sponsor-button" href="{{baseUrl}}/donate">
-	<i class="fas fa-heart heart-full"></i><i class="far fa-heart heart-line"></i>&nbsp;Support us
+	<i class="fas fa-heart heart-full"></i><i class="far fa-heart heart-line"></i><span class="sponsor-button-label">&nbsp;Support us</span>
 </a>

Assets/WebsiteAssets/templates/partials/twitterLink.mustache

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

Assets/WebsiteAssets/templates/plans.mustache

@@ -42,13 +42,23 @@
 				{{> plan}}
 			{{/plans.pro}}
 
-			{{#plans.business}}
+			{{#plans.teams}}
 				{{> plan}}
-			{{/plans.business}}
+			{{/plans.teams}}
 
 			<p class="joplin-cloud-login-info">Already have a Joplin Cloud account? <a href="https://joplincloud.com">Login now</a></p>
 		</div>
 
+		<div class="row">
+			<div>
+				<h1>Feature comparison</h1>
+				<div class="joplin-cloud-feature-list">
+					{{{featureListHtml}}}
+				</div>
+				<p>&nbsp;</p>
+			</div>
+		</div>
+
 		<div class="row">
 			{{{faqHtml}}}
 		</div>

BUILD.md

@@ -18,14 +18,15 @@ There are also a few forks of existing packages under the "fork-*" name.
 
 ## Required dependencies
 
-- Install node 16+ - https://nodejs.org/en/
-  - [Enable yarn](https://yarnpkg.com/getting-started/install): `corepack enable`
+- Install Node 16+. On Windows, also install the build tools - https://nodejs.org/en/
+  - [Enable Yarn](https://yarnpkg.com/getting-started/install): `corepack enable`
 - macOS: Install Cocoapods - `brew install cocoapods`. Apple Silicon [may require libvips](https://github.com/laurent22/joplin/pull/5966#issuecomment-1007158597) - `brew install vips`.
-- Windows: Install Windows Build Tools - `yarn install -g windows-build-tools --vs2015`
 - Linux: Install dependencies - `sudo apt install build-essential libnss3 libsecret-1-dev python rsync`
 
 ## Building
 
+Make sure the path to the project directory does not contain spaces or the build may fail.
+
 Before doing anything else, from the root of the project, run:
 
 	yarn install

CONTRIBUTING.md

@@ -38,7 +38,8 @@ If you want to start contributing to the project's code, please follow these gui
 - **Changes that will consist of more than 50 lines of code should be discussed on the [Joplin Forum](https://discourse.joplinapp.org/)**, so that you don't spend too much time implementing something that might not be accepted.
 - All the applications share the same backend (database, synchronisation, settings, models, business logic, etc.) so if you change something in the backend in one app, make sure it still works in the other apps. Usually it does, but keep this in mind.
 - Pull requests that make many changes using an automated tool, like for spell fixing, styling, etc. will not be accepted. An exception would be if the changes have been discussed in the forum and someone has agreed to review **and test** the pull request.
-- Pull requests that make address multiple issues will most likely stall and eventually be closed. This is because we might be fine with one of the changes but not with others and untangling that kind of pull request is too much hassle both for maintainers and the person who submitted it. So most of the time someone gives up and the PR gets closed. So please keep the pull request focused on one issue.
+- Pull requests that address multiple issues will most likely stall and eventually be closed. This is because we might be fine with one of the changes but not with others and untangling that kind of pull request is too much hassle both for maintainers and the person who submitted it. So most of the time someone gives up and the PR gets closed. So please keep the pull request focused on one issue.
+- **Do not mark your reviewer's comments as "resolved"**. If you do that, the comments will be hidden and the reviewer will not know what are the pending issues in the pull request. Only the reviewer should resolve the comments.
 
 Building the apps is relatively easy - please [see the build instructions](https://github.com/laurent22/joplin/blob/dev/BUILD.md) for more details.
 
@@ -52,37 +53,57 @@ For changes made to the Desktop client that affect the user interface, refer to
 
 ## Automated tests
 
-When submitting a pull request for a new feature or a bug fix, please add automated tests for your code whenever possible. Tests in Joplin are divided into **unit tests** and **feature tests**.
+When submitting a pull request for a new feature or a bug fix, please add automated tests. We use [Jest](https://jestjs.io/) as a testing framework so you will need to be familiar with it or go through their documentation.
 
-* **Unit tests** are used to test models, services or utility classes - they are relatively low level. Unit tests should be prefixed with the type of class that is being tested - for example "models_Folder" or "services_SearchEngine".
+### Running the tests
 
-* **Feature tests** on the other hand are to test higher level functionalities such as interactions with the GUI and how they affect the underlying model. Often these tests would dispatch Redux actions, and inspect how the application state has been changed. The feature tests should be prefixed with "feature_", for example "feature_TagList". There's a good explanation on what qualifies as a feature test in [this post](https://github.com/laurent22/joplin/pull/2819#issuecomment-603502230).
-
-The tests are under packages/app-cli/tests. To get them running, you first need to build the CLI app:
-
-```sh
-yarn install
-cd packages/app-cli
-```
-
-To run all the test units:
+To run all the test units, run from the root:
 
 ```sh
 yarn test
 ```
 
+Or you can go inside a package folder, and run the tests from there. For example to run all the library tests, go in `packages/lib` and run `yarn test`
+
 To run just one particular file:
 
 ```sh
-yarn test --filter=markdownUtils # Don't add the .js extension
+# Run all the tests in markdownUtils.test.ts
+yarn test markdownUtils
 ```
 
-To filter tests. For example, to run all the test units that contain "should handle conflict" in their description:
+To run only a particular test in a file:
 
 ```sh
-yarn test --filter="should handle conflict"
+# Run only the test described as "should handle conflict"
+# inside markdownUtils.test.ts:
+yarn test markdownUtils --filter="should handle conflict"
 ```
 
+### Adding a new test file
+
+To add a test, simply create a new file with an extension `.test.ts` in the same directory. For example if you are working on the file `example.ts`, create a file `example.test.ts` for the unit tests. If this file already exist, simply add your tests directly to it.
+
+### Setting the testing environment
+
+Many utility functions are available under the package `@joplin/lib/testing/test-utils`. Have a look for example at [Note.test.ts](https://github.com/laurent22/joplin/blob/dev/packages/lib/models/Note.test.ts) to see how to setup test units with database support and synchroniser support. Note that this is not needed for all tests - if you just have a simple functions to test you won't need that extra setup.
+
+### Testing React Hooks
+
+To test React Hooks please use the package `@testing-library/react-hooks`. See [useLayoutItemSizes.test.ts](https://github.com/laurent22/joplin/blob/dev/packages/app-desktop/gui/ResizableLayout/utils/useLayoutItemSizes.test.ts) for an example.
+
+### If it is not possible to add tests
+
+More often than not, it is actually possible to add tests - just go back to your code and see if it can be refactored and certain functionalities moved to simple functions (with no dependencies). Once you have a simple function, you can easily add unit tests for it.
+
+Additionally, if the unit tests are not sufficient, please provide a **manual testing plan**, which should include detailed steps on:
+
+- How to test that your feature is working. Include at least 5 tests. Try to think of the possible inputs - if it's a list, how does it work with 0 elements, or 1, or 10, or 100,000. If it's a text input, how does it work with an empty string, or a very large string, etc. Basically don't just put one test that check the best case scenario.
+
+- How to verify that related parts of the applications are not broken. For example if you changed the note loading logic, check that the toolbar is still working as expected (and not modifying the previously loaded note for example), check that switching from one note to another still works. Look at the note list and verify that the note title is updated there too, etc.
+
+A reviewer should be able to run the app with your changes, then do the above steps to verify that everything's working as expected.
+
 ## About abandoned pull requests
 
 It happens that a pull request is started but not finished and despite our attempts to contact the contributor, we don't hear from them again.

Dockerfile.server

@@ -1,50 +1,37 @@
-FROM node:16-bullseye
+# =============================================================================
+# Build stage
+# =============================================================================
+
+FROM node:16-bullseye AS builder
 
 RUN apt-get update \
     && apt-get install -y \
-    python \
+    python tini \
     && rm -rf /var/lib/apt/lists/*
 
 # Enables Yarn
 RUN corepack enable
 
-RUN echo "Node: $(node --version)" \
-    && echo "Npm: $(npm --version)" \
-    && echo "Yarn: $(yarn --version)"
+WORKDIR /build
 
-ARG user=joplin
-
-RUN useradd --create-home --shell /bin/bash $user
-USER $user
-
-ENV NODE_ENV production
-ENV RUNNING_IN_DOCKER 1
-EXPOSE ${APP_PORT}
-
-WORKDIR /home/$user
-
-RUN mkdir /home/$user/logs \
-    && mkdir /home/$user/.yarn
-
-COPY --chown=$user:$user .yarn/patches ./.yarn/patches
-COPY --chown=$user:$user .yarn/plugins ./.yarn/plugins
-COPY --chown=$user:$user .yarn/releases ./.yarn/releases
-COPY --chown=$user:$user package.json .
-COPY --chown=$user:$user .yarnrc.yml .
-COPY --chown=$user:$user yarn.lock .
-COPY --chown=$user:$user gulpfile.js .
-COPY --chown=$user:$user tsconfig.json .
-COPY --chown=$user:$user packages/turndown ./packages/turndown
-COPY --chown=$user:$user packages/turndown-plugin-gfm ./packages/turndown-plugin-gfm
-COPY --chown=$user:$user packages/fork-htmlparser2 ./packages/fork-htmlparser2
-COPY --chown=$user:$user packages/server/package*.json ./packages/server/
-COPY --chown=$user:$user packages/fork-sax ./packages/fork-sax
-COPY --chown=$user:$user packages/fork-uslug ./packages/fork-uslug
-COPY --chown=$user:$user packages/htmlpack ./packages/htmlpack
-COPY --chown=$user:$user packages/renderer ./packages/renderer
-COPY --chown=$user:$user packages/tools ./packages/tools
-COPY --chown=$user:$user packages/lib ./packages/lib
-COPY --chown=$user:$user packages/server ./packages/server
+COPY .yarn/plugins ./.yarn/plugins
+COPY .yarn/releases ./.yarn/releases
+COPY package.json .
+COPY .yarnrc.yml .
+COPY yarn.lock .
+COPY gulpfile.js .
+COPY tsconfig.json .
+COPY packages/turndown ./packages/turndown
+COPY packages/turndown-plugin-gfm ./packages/turndown-plugin-gfm
+COPY packages/fork-htmlparser2 ./packages/fork-htmlparser2
+COPY packages/server/package*.json ./packages/server/
+COPY packages/fork-sax ./packages/fork-sax
+COPY packages/fork-uslug ./packages/fork-uslug
+COPY packages/htmlpack ./packages/htmlpack
+COPY packages/renderer ./packages/renderer
+COPY packages/tools ./packages/tools
+COPY packages/lib ./packages/lib
+COPY packages/server ./packages/server
 
 # For some reason there's both a .yarn/cache and .yarn/berry/cache that are
 # being generated, and both have the same content. Not clear why it does this
@@ -59,10 +46,30 @@ RUN BUILD_SEQUENCIAL=1 yarn install --inline-builds \
     && yarn cache clean \
     && rm -rf .yarn/berry
 
-# Call the command directly, without going via npm:
-# https://github.com/nodejs/docker-node/blob/main/docs/BestPractices.md#cmd
-WORKDIR "/home/$user/packages/server"
-CMD [ "node", "dist/app.js" ]
+# =============================================================================
+# Final stage - we copy only the relevant files from the build stage and start
+# from a smaller base image.
+# =============================================================================
+
+FROM node:16-bullseye-slim
+
+ARG user=joplin
+RUN useradd --create-home --shell /bin/bash $user
+
+USER $user
+
+COPY --chown=$user:$user --from=builder /build/packages /home/$user/packages
+COPY --chown=$user:$user --from=builder /usr/bin/tini /usr/local/bin/tini
+
+ENV NODE_ENV=production
+ENV RUNNING_IN_DOCKER=1
+EXPOSE ${APP_PORT}
+
+# Use Tini to start Joplin Server:
+# https://github.com/nodejs/docker-node/blob/main/docs/BestPractices.md#handling-kernel-signals
+WORKDIR /home/$user/packages/server
+ENTRYPOINT ["tini", "--"]
+CMD ["node", "dist/app.js"]
 
 # Build-time metadata
 # https://github.com/opencontainers/image-spec/blob/master/annotations.md

LICENSE

@@ -10,6 +10,11 @@ under that directory is licensed under the default license, which is MIT.
 
 * * *
 
+Joplin® is a trademark of Cozic Ltd registered in the European Union, with
+filing number 018544315.
+
+* * *
+
 Logo and Icon License
 
 The Joplin logos and icons are copyright (c) Laurent Cozic, all rights reserved,

README.md

@@ -4,13 +4,19 @@
 
 * * *
 
+🌞 Joplin participates in **Google Summer of Code 2022**! More info on [the announcement post](https://github.com/laurent22/joplin/blob/dev/readme/news/20220308-gsoc2022-start.md). 🌞
+
+* * *
+
 <img width="64" src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/LinuxIcons/256x256.png" align="left" /> **Joplin** is a free, open source note taking and to-do application, which can handle a large number of notes organised into notebooks. The notes are searchable, can be copied, tagged and modified either from the applications directly or from your own text editor. The notes are in [Markdown format](#markdown).
 
-Notes exported from Evernote via .enex files [can be imported](#importing) into Joplin, including the formatted content (which is converted to Markdown), resources (images, attachments, etc.) and complete metadata (geolocation, updated time, created time, etc.). Plain Markdown files can also be imported.
+Notes exported from Evernote [can be imported](#importing) into Joplin, including the formatted content (which is converted to Markdown), resources (images, attachments, etc.) and complete metadata (geolocation, updated time, created time, etc.). Plain Markdown files can also be imported.
 
-The notes can be [synchronised](#synchronisation) with various cloud services including [Nextcloud](https://nextcloud.com/), Dropbox, OneDrive, WebDAV or the file system (for example with a network directory). When synchronising the notes, notebooks, tags and other metadata are saved to plain text files which can be easily inspected, backed up and moved around.
+The notes can be securely [synchronised](#synchronisation) using [end-to-end encryption](#encryption) with various cloud services including Nextcloud, Dropbox, OneDrive and [Joplin Cloud](https://joplinapp.org/plans/).
 
-The application is available for Windows, Linux, macOS, Android and iOS (the terminal app also works on FreeBSD). A [Web Clipper](https://github.com/laurent22/joplin/blob/dev/readme/clipper.md), to save web pages and screenshots from your browser, is also available for [Firefox](https://addons.mozilla.org/firefox/addon/joplin-web-clipper/) and [Chrome](https://chrome.google.com/webstore/detail/joplin-web-clipper/alofnhikmmkdbbbgpnglcpdollgjjfek?hl=en-GB).
+Full text search is available on all platforms to quickly find the information you need. The app can be customised using plugins and themes, and you can also easily create your own.
+
+The application is available for Windows, Linux, macOS, Android and iOS. A [Web Clipper](https://github.com/laurent22/joplin/blob/dev/readme/clipper.md), to save web pages and screenshots from your browser, is also available for [Firefox](https://addons.mozilla.org/firefox/addon/joplin-web-clipper/) and [Chrome](https://chrome.google.com/webstore/detail/joplin-web-clipper/alofnhikmmkdbbbgpnglcpdollgjjfek?hl=en-GB).
 
 <div class="top-screenshot"><img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/home-top-img.png" style="max-width: 100%; max-height: 35em;"></div>
 
@@ -22,11 +28,11 @@ Three types of applications are available: for **desktop** (Windows, macOS and L
 
 Operating System | Download
 ---|---
-Windows (32 and 64-bit) | <a href='https://github.com/laurent22/joplin/releases/download/v2.6.10/Joplin-Setup-2.6.10.exe'><img alt='Get it on Windows' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeWindows.png'/></a>
-macOS | <a href='https://github.com/laurent22/joplin/releases/download/v2.6.10/Joplin-2.6.10.dmg'><img alt='Get it on macOS' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeMacOS.png'/></a>
-Linux | <a href='https://github.com/laurent22/joplin/releases/download/v2.6.10/Joplin-2.6.10.AppImage'><img alt='Get it on Linux' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeLinux.png'/></a>
+Windows (32 and 64-bit) | <a href='https://github.com/laurent22/joplin/releases/download/v2.7.15/Joplin-Setup-2.7.15.exe'><img alt='Get it on Windows' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeWindows.png'/></a>
+macOS | <a href='https://github.com/laurent22/joplin/releases/download/v2.7.15/Joplin-2.7.15.dmg'><img alt='Get it on macOS' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeMacOS.png'/></a>
+Linux | <a href='https://github.com/laurent22/joplin/releases/download/v2.7.15/Joplin-2.7.15.AppImage'><img alt='Get it on Linux' width="134px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeLinux.png'/></a>
 
-**On Windows**, you may also use the <a href='https://github.com/laurent22/joplin/releases/download/v2.6.10/JoplinPortable.exe'>Portable version</a>. The [portable application](https://en.wikipedia.org/wiki/Portable_application) allows installing the software on a portable device such as a USB key. Simply copy the file JoplinPortable.exe in any directory on that USB key ; the application will then create a directory called "JoplinProfile" next to the executable file.
+**On Windows**, you may also use the <a href='https://github.com/laurent22/joplin/releases/download/v2.7.15/JoplinPortable.exe'>Portable version</a>. The [portable application](https://en.wikipedia.org/wiki/Portable_application) allows installing the software on a portable device such as a USB key. Simply copy the file JoplinPortable.exe in any directory on that USB key ; the application will then create a directory called "JoplinProfile" next to the executable file.
 
 **On Linux**, the recommended way is to use the following installation script as it will handle the desktop icon too:
 
@@ -36,7 +42,7 @@ Linux | <a href='https://github.com/laurent22/joplin/releases/download/v2.6.10/J
 
 Operating System | Download | Alt. Download
 ---|---|---
-Android | <a href='https://play.google.com/store/apps/details?id=net.cozic.joplin&utm_source=GitHub&utm_campaign=README&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' height="40px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeAndroid.png'/></a> | or download the APK file: [64-bit](https://github.com/laurent22/joplin-android/releases/download/android-v2.6.9/joplin-v2.6.9.apk) [32-bit](https://github.com/laurent22/joplin-android/releases/download/android-v2.6.9/joplin-v2.6.9-32bit.apk)
+Android | <a href='https://play.google.com/store/apps/details?id=net.cozic.joplin&utm_source=GitHub&utm_campaign=README&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' height="40px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeAndroid.png'/></a> | or download the APK file: [64-bit](https://github.com/laurent22/joplin-android/releases/download/android-v2.7.2/joplin-v2.7.2.apk) [32-bit](https://github.com/laurent22/joplin-android/releases/download/android-v2.7.2/joplin-v2.7.2-32bit.apk)
 iOS | <a href='https://itunes.apple.com/us/app/joplin/id1315599797'><img alt='Get it on the App Store' height="40px" src='https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/BadgeIOS.png'/></a> | -
 
 ## Terminal application
@@ -49,23 +55,22 @@ To start it, type `joplin`.
 
 For usage information, please refer to the full [Joplin Terminal Application Documentation](https://joplinapp.org/terminal/).
 
-### Unsupported methods
-
-There are other ways to install the terminal application. However, they are not supported and problems must be reported to the upstream projects.
-
-Operating system | Method
------------------|----------------
-Arch Linux       | An Arch Linux package is available [here](https://aur.archlinux.org/packages/joplin/). To install it, use an AUR wrapper such as yay: `yay -S joplin`. Both the CLI tool (type `joplin`) and desktop app (type `joplin-desktop`) are packaged. You can also install a compiled version with the [chaotic-aur](https://wiki.archlinux.org/index.php/Unofficial_user_repositories#chaotic-aur) repository. For support, please go to the [GitHub repo](https://github.com/masterkorp/joplin-pkgbuild). If you are interested in [pre-release](https://joplinapp.org/prereleases/) you have [joplin-beta](https://aur.archlinux.org/packages/joplin-beta).
-Flatpak          | A Flatpak is available on [Flathub](https://flathub.org/apps/details/net.cozic.joplin_desktop). To install it, run `flatpak install net.cozic.joplin_desktop` after [setting up Flathub](https://flatpak.org/setup/). GUI software managers on most distros support Flatpak installation.
-
 ## Web Clipper
 
 The Web Clipper is a browser extension that allows you to save web pages and screenshots from your browser. For more information on how to install and use it, see the [Web Clipper Help Page](https://github.com/laurent22/joplin/blob/dev/readme/clipper.md).
 
+## Unofficial Alternative Distributions
+
+There are a number of unofficial alternative Joplin distributions. If you do not want to or cannot use appimages or any of the other officially supported releases then you may wish to consider these.
+
+However these come with a caveat in that they are not officially supported so certain issues may not be supportable by the main project. Rather support requests, bug reports and general advice would need to go to the maintainers of these distributions.
+
+A community maintained list of these distributions can be found here: [Unofficial Joplin distributions](https://discourse.joplinapp.org/t/unofficial-alternative-joplin-distributions/23703)
+
 # Sponsors
 
 <!-- SPONSORS-ORG -->
-<a href="https://seirei.ne.jp"><img title="Serei Network" width="256" src="https://joplinapp.org/images/sponsors/SeireiNetwork.png"/></a> <a href="https://usrigging.com/"><img title="U.S. Ringing Supply" width="256" src="https://joplinapp.org/images/sponsors/RingingSupply.svg"/></a> <a href="https://www.hosting.de/nextcloud/?mtm_campaign=managed-nextcloud&amp;mtm_kwd=joplinapp&amp;mtm_source=joplinapp-github&amp;mtm_medium=banner"><img title="Hosting.de" width="256" src="https://joplinapp.org/images/sponsors/HostingDe.png"/></a>
+<a href="https://seirei.ne.jp"><img title="Serei Network" width="256" src="https://joplinapp.org/images/sponsors/SeireiNetwork.png"/></a> <a href="https://usrigging.com/"><img title="U.S. Ringing Supply" width="256" src="https://joplinapp.org/images/sponsors/RingingSupply.svg"/></a> <a href="https://www.hosting.de/nextcloud/?mtm_campaign=managed-nextcloud&amp;mtm_kwd=joplinapp&amp;mtm_source=joplinapp-github&amp;mtm_medium=banner"><img title="Hosting.de" width="256" src="https://joplinapp.org/images/sponsors/HostingDe.png"/></a> <a href="https://residence-greece.com/"><img title="Greece Golden Visa" width="256" src="https://joplinapp.org/images/sponsors/ResidenceGreece.jpg"/></a>
 <!-- SPONSORS-ORG -->
 
 * * *
@@ -75,10 +80,11 @@ The Web Clipper is a browser extension that allows you to save web pages and scr
 | :---: | :---: | :---: | :---: |
 | <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/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/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/47742?s=96&v=4"/></br>[ravenscroftj](https://github.com/ravenscroftj) | <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/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/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/47742?s=96&v=4"/></br>[ravenscroftj](https://github.com/ravenscroftj) | <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) |       |       |       |
 <!-- SPONSORS-GITHUB -->
 
 <!-- TOC -->
@@ -125,7 +131,9 @@ The Web Clipper is a browser extension that allows you to save web pages and scr
 - Development
 
 	- [How to build the apps](https://github.com/laurent22/joplin/blob/dev/BUILD.md)
+	- [Writing a technical spec](https://github.com/laurent22/joplin/blob/dev/readme/technical_spec.md)
 	- [End-to-end encryption spec](https://github.com/laurent22/joplin/blob/dev/readme/spec/e2ee.md)
+	- [Desktop application styling](https://github.com/laurent22/joplin/blob/dev/readme/spec/desktop_styling.md)
 	- [Note History spec](https://github.com/laurent22/joplin/blob/dev/readme/spec/history.md)
 	- [Sync Lock spec](https://github.com/laurent22/joplin/blob/dev/readme/spec/sync_lock.md)
 	- [Synchronous Scroll spec](https://github.com/laurent22/joplin/blob/dev/readme/spec/sync_scroll.md)
@@ -135,11 +143,11 @@ The Web Clipper is a browser extension that allows you to save web pages and scr
 	- [Server: Delta Sync](https://github.com/laurent22/joplin/blob/dev/readme/spec/server_delta_sync.md)
 	- [Server: Sharing](https://github.com/laurent22/joplin/blob/dev/readme/spec/server_sharing.md)
 
-- Google Summer of Code 2021
+- Google Summer of Code 2022
 
-	- [Google Summer of Code 2021](https://github.com/laurent22/joplin/blob/dev/readme/gsoc2021/index.md)
-	- [How to submit a GSoC pull request](https://github.com/laurent22/joplin/blob/dev/readme/gsoc2021/pull_request_guidelines.md)
-	- [Project Ideas](https://github.com/laurent22/joplin/blob/dev/readme/gsoc2021/ideas.md)
+	- [Google Summer of Code 2022](https://github.com/laurent22/joplin/blob/dev/readme/gsoc2022/index.md)
+	- [How to submit a GSoC pull request](https://github.com/laurent22/joplin/blob/dev/readme/gsoc2022/pull_request_guidelines.md)
+	- [Project Ideas](https://github.com/laurent22/joplin/blob/dev/readme/gsoc2022/ideas.md)
 
 - About
 
@@ -472,24 +480,6 @@ Notes are sorted by "relevance". Currently it means the notes that contain the r
 
 In the desktop application, press <kbd>Ctrl+P</kbd> or <kbd>Cmd+P</kbd> and type a note title or part of its content to jump to it. Or type <kbd>#</kbd> followed by a tag name, or <kbd>@</kbd> followed by a notebook name.
 
-# Privacy
-
-Joplin values your privacy and security by giving you complete control over your information and digital footprint.
-
-Joplin applications do not send any data to any service without your authorisation. Any data that Joplin saves, such as notes or images, are saved to your own device and you are free to delete this data at any time.
-
-Joplin has many modern features, some of which use third-party services. You can disable any or all of these features in the application settings. These features are:
-
-|Feature | Description | Default|
-|--------|-------------|--------|
-|Auto-update|Joplin periodically connects to GitHub to check for new releases.|Enabled|
-|Geo-location|Joplin saves geo-location information in note properties when you create a note.|Enabled|
-|Synchronisation|Joplin supports synchronisation of your notes across multiple devices. If you choose to synchronise with a third-party, such as OneDrive, the notes will be sent to your OneDrive account, in which case the third-party privacy policy applies.|Disabled|
-
-Joplin is developed as an open-source application and the source code is freely available online to inspect.
-
-For any question about Joplin privacy, please leave a message on the [Joplin Forum](https://discourse.joplinapp.org/).
-
 # Donations
 
 Donations to Joplin support the development of the project. Developing quality applications mostly takes time, but there are also some expenses, such as digital certificates to sign the applications, app store fees, hosting, etc. Most of all, your donation will make it possible to keep up the current development standard.
@@ -530,47 +520,47 @@ Current translations:
 <!-- LOCALE-TABLE-AUTO-GENERATED -->
 &nbsp;  |  Language  |  Po File  |  Last translator  |  Percent done
 ---|---|---|---|---
-<img src="https://joplinapp.org/images/flags/country-4x3/arableague.png" width="16px"/>  |  Arabic  |  [ar](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/ar.po)  |  [Whaell O](mailto:Whaell@protonmail.com)  |  92%
+<img src="https://joplinapp.org/images/flags/country-4x3/arableague.png" width="16px"/>  |  Arabic  |  [ar](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/ar.po)  |  [Whaell O](mailto:Whaell@protonmail.com)  |  90%
 <img src="https://joplinapp.org/images/flags/es/basque_country.png" width="16px"/>  |  Basque  |  [eu](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/eu.po)  |  juan.abasolo@ehu.eus  |  26%
-<img src="https://joplinapp.org/images/flags/country-4x3/ba.png" width="16px"/>  |  Bosnian (Bosna i Hercegovina)  |  [bs_BA](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/bs_BA.po)  |  [Derviš T.](mailto:dervis.t@pm.me)  |  66%
-<img src="https://joplinapp.org/images/flags/country-4x3/bg.png" width="16px"/>  |  Bulgarian (България)  |  [bg_BG](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/bg_BG.po)  |    |  52%
-<img src="https://joplinapp.org/images/flags/es/catalonia.png" width="16px"/>  |  Catalan  |  [ca](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/ca.po)  |  [Xavi Ivars](mailto:xavi.ivars@gmail.com)  |  98%
-<img src="https://joplinapp.org/images/flags/country-4x3/hr.png" width="16px"/>  |  Croatian (Hrvatska)  |  [hr_HR](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/hr_HR.po)  |  [Milo Ivir](mailto:mail@milotype.de)  |  96%
-<img src="https://joplinapp.org/images/flags/country-4x3/cz.png" width="16px"/>  |  Czech (Česká republika)  |  [cs_CZ](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/cs_CZ.po)  |  [Michal Stanke](mailto:michal@stanke.cz)  |  88%
+<img src="https://joplinapp.org/images/flags/country-4x3/ba.png" width="16px"/>  |  Bosnian (Bosna i Hercegovina)  |  [bs_BA](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/bs_BA.po)  |  [Derviš T.](mailto:dervis.t@pm.me)  |  65%
+<img src="https://joplinapp.org/images/flags/country-4x3/bg.png" width="16px"/>  |  Bulgarian (България)  |  [bg_BG](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/bg_BG.po)  |    |  51%
+<img src="https://joplinapp.org/images/flags/es/catalonia.png" width="16px"/>  |  Catalan  |  [ca](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/ca.po)  |  [Xavi Ivars](mailto:xavi.ivars@gmail.com)  |  97%
+<img src="https://joplinapp.org/images/flags/country-4x3/hr.png" width="16px"/>  |  Croatian (Hrvatska)  |  [hr_HR](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/hr_HR.po)  |  [Milo Ivir](mailto:mail@milotype.de)  |  94%
+<img src="https://joplinapp.org/images/flags/country-4x3/cz.png" width="16px"/>  |  Czech (Česká republika)  |  [cs_CZ](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/cs_CZ.po)  |  [Michal Stanke](mailto:michal@stanke.cz)  |  87%
 <img src="https://joplinapp.org/images/flags/country-4x3/dk.png" width="16px"/>  |  Dansk (Danmark)  |  [da_DK](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/da_DK.po)  |  ERYpTION  |  98%
-<img src="https://joplinapp.org/images/flags/country-4x3/de.png" width="16px"/>  |  Deutsch (Deutschland)  |  [de_DE](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/de_DE.po)  |  [MrKanister](mailto:s.robin@tutanota.de)  |  98%
-<img src="https://joplinapp.org/images/flags/country-4x3/ee.png" width="16px"/>  |  Eesti Keel (Eesti)  |  [et_EE](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/et_EE.po)  |    |  51%
+<img src="https://joplinapp.org/images/flags/country-4x3/de.png" width="16px"/>  |  Deutsch (Deutschland)  |  [de_DE](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/de_DE.po)  |  [MrKanister](mailto:pthrp_bnsrv@aleeas.com)  |  99%
+<img src="https://joplinapp.org/images/flags/country-4x3/ee.png" width="16px"/>  |  Eesti Keel (Eesti)  |  [et_EE](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/et_EE.po)  |    |  50%
 <img src="https://joplinapp.org/images/flags/country-4x3/gb.png" width="16px"/>  |  English (United Kingdom)  |  [en_GB](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/en_GB.po)  |    |  100%
 <img src="https://joplinapp.org/images/flags/country-4x3/us.png" width="16px"/>  |  English (United States of America)  |  [en_US](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/en_US.po)  |    |  100%
-<img src="https://joplinapp.org/images/flags/country-4x3/es.png" width="16px"/>  |  Español (España)  |  [es_ES](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/es_ES.po)  |  [Francisco Mora](mailto:francisco.m.collao@gmail.com)  |  98%
+<img src="https://joplinapp.org/images/flags/country-4x3/es.png" width="16px"/>  |  Español (España)  |  [es_ES](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/es_ES.po)  |  [Francisco Mora](mailto:francisco.m.collao@gmail.com)  |  96%
 <img src="https://joplinapp.org/images/flags/esperanto.png" width="16px"/>  |  Esperanto  |  [eo](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/eo.po)  |  Marton Paulo  |  29%
-<img src="https://joplinapp.org/images/flags/country-4x3/fi.png" width="16px"/>  |  Finnish (Suomi)  |  [fi_FI](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/fi_FI.po)  |  mrkaato  |  92%
-<img src="https://joplinapp.org/images/flags/country-4x3/fr.png" width="16px"/>  |  Français (France)  |  [fr_FR](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/fr_FR.po)  |  Laurent Cozic  |  98%
+<img src="https://joplinapp.org/images/flags/country-4x3/fi.png" width="16px"/>  |  Finnish (Suomi)  |  [fi_FI](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/fi_FI.po)  |  miucci  |  92%
+<img src="https://joplinapp.org/images/flags/country-4x3/fr.png" width="16px"/>  |  Français (France)  |  [fr_FR](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/fr_FR.po)  |  Laurent Cozic  |  100%
 <img src="https://joplinapp.org/images/flags/es/galicia.png" width="16px"/>  |  Galician (España)  |  [gl_ES](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/gl_ES.po)  |  [Marcos Lans](mailto:marcoslansgarza@gmail.com)  |  33%
-<img src="https://joplinapp.org/images/flags/country-4x3/id.png" width="16px"/>  |  Indonesian (Indonesia)  |  [id_ID](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/id_ID.po)  |  [eresytter](mailto:42007357+eresytter@users.noreply.github.com)  |  91%
-<img src="https://joplinapp.org/images/flags/country-4x3/it.png" width="16px"/>  |  Italiano (Italia)  |  [it_IT](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/it_IT.po)  |  [Albano Battistella](mailto:albano_battistella@hotmail.com)  |  89%
-<img src="https://joplinapp.org/images/flags/country-4x3/hu.png" width="16px"/>  |  Magyar (Magyarország)  |  [hu_HU](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/hu_HU.po)  |  [Magyari Balázs](mailto:balmag@gmail.com)  |  77%
-<img src="https://joplinapp.org/images/flags/country-4x3/be.png" width="16px"/>  |  Nederlands (België, Belgique, Belgien)  |  [nl_BE](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/nl_BE.po)  |    |  90%
-<img src="https://joplinapp.org/images/flags/country-4x3/nl.png" width="16px"/>  |  Nederlands (Nederland)  |  [nl_NL](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/nl_NL.po)  |  [MetBril](mailto:metbril@users.noreply.github.com)  |  84%
-<img src="https://joplinapp.org/images/flags/country-4x3/no.png" width="16px"/>  |  Norwegian (Norge, Noreg)  |  [nb_NO](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/nb_NO.po)  |  Alexander Dawson  |  89%
-<img src="https://joplinapp.org/images/flags/country-4x3/ir.png" width="16px"/>  |  Persian  |  [fa](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/fa.po)  |  [Kourosh Firoozbakht](mailto:kourox@protonmail.com)  |  63%
-<img src="https://joplinapp.org/images/flags/country-4x3/pl.png" width="16px"/>  |  Polski (Polska)  |  [pl_PL](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/pl_PL.po)  |  [konhi](mailto:hello.konhi@gmail.com)  |  83%
-<img src="https://joplinapp.org/images/flags/country-4x3/br.png" width="16px"/>  |  Português (Brasil)  |  [pt_BR](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/pt_BR.po)  |  [Felipe Viggiano](mailto:felipeviggiano@gmail.com)  |  92%
-<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)  |  83%
-<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)  |  58%
-<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)  |  92%
-<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)  |  98%
-<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)  |    |  42%
-<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)  |    |  89%
-<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)  |  92%
-<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)  |  82%
-<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)  |  86%
-<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)  |  [Sergey Segeda](mailto:thesermanarm@gmail.com)  |  92%
-<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)  |    |  75%
-<img src="https://joplinapp.org/images/flags/country-4x3/cn.png" width="16px"/>  |  中文 (简体)  |  [zh_CN](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/zh_CN.po)  |  [南宫小骏](mailto:jackytsu@vip.qq.com)  |  96%
-<img src="https://joplinapp.org/images/flags/country-4x3/tw.png" width="16px"/>  |  中文 (繁體)  |  [zh_TW](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/zh_TW.po)  |  [SiderealArt](mailto:nelson22768384@gmail.com)  |  89%
-<img src="https://joplinapp.org/images/flags/country-4x3/jp.png" width="16px"/>  |  日本語 (日本)  |  [ja_JP](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/ja_JP.po)  |  [genneko](mailto:genneko217@gmail.com)  |  97%
-<img src="https://joplinapp.org/images/flags/country-4x3/kr.png" width="16px"/>  |  한국어  |  [ko](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/ko.po)  |  [Ji-Hyeon Gim](mailto:potatogim@potatogim.net)  |  88%
+<img src="https://joplinapp.org/images/flags/country-4x3/id.png" width="16px"/>  |  Indonesian (Indonesia)  |  [id_ID](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/id_ID.po)  |  [eresytter](mailto:42007357+eresytter@users.noreply.github.com)  |  90%
+<img src="https://joplinapp.org/images/flags/country-4x3/it.png" width="16px"/>  |  Italiano (Italia)  |  [it_IT](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/it_IT.po)  |  [Albano Battistella](mailto:albano_battistella@hotmail.com)  |  87%
+<img src="https://joplinapp.org/images/flags/country-4x3/hu.png" width="16px"/>  |  Magyar (Magyarország)  |  [hu_HU](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/hu_HU.po)  |  [Magyari Balázs](mailto:balmag@gmail.com)  |  76%
+<img src="https://joplinapp.org/images/flags/country-4x3/be.png" width="16px"/>  |  Nederlands (België, Belgique, Belgien)  |  [nl_BE](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/nl_BE.po)  |    |  89%
+<img src="https://joplinapp.org/images/flags/country-4x3/nl.png" width="16px"/>  |  Nederlands (Nederland)  |  [nl_NL](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/nl_NL.po)  |  [MetBril](mailto:metbril@users.noreply.github.com)  |  83%
+<img src="https://joplinapp.org/images/flags/country-4x3/no.png" width="16px"/>  |  Norwegian (Norge, Noreg)  |  [nb_NO](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/nb_NO.po)  |  Alexander Dawson  |  88%
+<img src="https://joplinapp.org/images/flags/country-4x3/ir.png" width="16px"/>  |  Persian  |  [fa](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/fa.po)  |  [Kourosh Firoozbakht](mailto:kourox@protonmail.com)  |  62%
+<img src="https://joplinapp.org/images/flags/country-4x3/pl.png" width="16px"/>  |  Polski (Polska)  |  [pl_PL](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/pl_PL.po)  |  [konhi](mailto:hello.konhi@gmail.com)  |  82%
+<img src="https://joplinapp.org/images/flags/country-4x3/br.png" width="16px"/>  |  Português (Brasil)  |  [pt_BR](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/pt_BR.po)  |  [Felipe Viggiano](mailto:felipeviggiano@gmail.com)  |  91%
+<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)  |  82%
+<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)  |  57%
+<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)  |  91%
+<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)  |    |  41%
+<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)  |    |  88%
+<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)  |  98%
+<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)  |  81%
+<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)  |  84%
+<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)  |  [Sergey Segeda](mailto:thesermanarm@gmail.com)  |  91%
+<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)  |    |  73%
+<img src="https://joplinapp.org/images/flags/country-4x3/cn.png" width="16px"/>  |  中文 (简体)  |  [zh_CN](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/zh_CN.po)  |  [horaceyoung](mailto:yonghaoharry@gmail.com)  |  99%
+<img src="https://joplinapp.org/images/flags/country-4x3/tw.png" width="16px"/>  |  中文 (繁體)  |  [zh_TW](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/zh_TW.po)  |  [SiderealArt](mailto:nelson22768384@gmail.com)  |  88%
+<img src="https://joplinapp.org/images/flags/country-4x3/jp.png" width="16px"/>  |  日本語 (日本)  |  [ja_JP](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/ja_JP.po)  |  [genneko](mailto:genneko217@gmail.com)  |  96%
+<img src="https://joplinapp.org/images/flags/country-4x3/kr.png" width="16px"/>  |  한국어  |  [ko](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/ko.po)  |  [Ji-Hyeon Gim](mailto:potatogim@potatogim.net)  |  87%
 <!-- LOCALE-TABLE-AUTO-GENERATED -->
 
 # Contributors

docker-compose.server.yml

@@ -1,8 +1,19 @@
 # This is a sample docker-compose file that can be used to run Joplin Server
 # along with a PostgreSQL server.
 #
-# All environment variables are optional. If you don't set them, you will get a
-# warning from docker-compose, however the app should use working defaults.
+# Update the following fields in the stanza below:
+#
+# POSTGRES_USER
+# POSTGRES_PASSWORD
+# APP_BASE_URL
+#
+# APP_BASE_URL: This is the base public URL where the service will be running.
+#	- If Joplin Server needs to be accessible over the internet, configure APP_BASE_URL as follows: https://example.com/joplin. 
+#	- If Joplin Server does not need to be accessible over the internet, set the the APP_BASE_URL to your server's hostname. 
+#     For Example: http://[hostname]:22300. The base URL can include the port.
+# APP_PORT: The local port on which the Docker container will listen. 
+#	- This would typically be mapped to port to 443 (TLS) with a reverse proxy.
+#	- If Joplin Server does not need to be accessible over the internet, the port can be mapped to 22300.
 
 version: '3'
 

fastlane/metadata/android/de/short_description.txt

@@ -0,0 +1 @@
+eine Notiz- und Aufgaben-App mit Sync zwischen Linux, macOS, Windows

fastlane/metadata/android/en-US/full_description.txt

@@ -0,0 +1,9 @@
+<strong>Joplin</strong> is a note taking and to-do application, which can handle a large number of notes organised into notebooks. The notes are searchable, can be copied, tagged and modified either from the applications directly or from your own text editor. The notes are in <a href="#markdown">Markdown format</a>.
+
+Notes exported from Evernote and other applications <a href="https://joplinapp.org/help/#importing">can be imported</a> into Joplin, including the formatted content (which is converted to Markdown), resources (images, attachments, etc.) and complete metadata (geolocation, updated time, created time, etc.). Plain Markdown files can also be imported.
+
+The notes can be securely <a href="https://joplinapp.org/help/#synchronisation">synchronised</a> using <a href="https://joplinapp.org/help/#encryption">end-to-end encryption</a> with various cloud services including Nextcloud, Dropbox, OneDrive and <a href="https://joplinapp.org/plans/">Joplin Cloud</a>.
+
+Full text search is available on all platforms to quickly find the information you need. The app can be customised using plugins and themes, and you can also easily create your own.
+
+The application is available for Windows, Linux, macOS, Android and iOS. A <a href="https://joplinapp.org/clipper/">Web Clipper</a>, to save web pages and screenshots from your browser, is also available for <a href="https://addons.mozilla.org/firefox/addon/joplin-web-clipper/">Firefox</a> and <a href="https://chrome.google.com/webstore/detail/joplin-web-clipper/alofnhikmmkdbbbgpnglcpdollgjjfek?hl=en-GB">Chrome</a>.

fastlane/metadata/android/en-US/short_description.txt

@@ -0,0 +1 @@
+a note taking and to-do app with sync between Linux, macOS, Windows, and mobile

package.json

@@ -18,6 +18,7 @@
     "buildCommandIndex": "gulp buildCommandIndex",
     "buildPluginDoc": "typedoc --name 'Joplin Plugin API Documentation' --mode file -theme './Assets/PluginDocTheme/' --readme './Assets/PluginDocTheme/index.md' --excludeNotExported --excludeExternals --excludePrivate --excludeProtected --out ../joplin-website/docs/api/references/plugin_api packages/lib/services/plugins/api/",
     "updateMarkdownDoc": "node ./packages/tools/updateMarkdownDoc",
+    "updateNews": "node ./packages/tools/website/updateNews",
     "buildSettingJsonSchema": "yarn workspace joplin start settingschema ../../../joplin-website/docs/schema/settings.json",
     "buildTranslations": "node packages/tools/build-translation.js",
     "buildWebsite": "node ./packages/tools/website/build.js && yarn run buildPluginDoc && yarn run buildSettingJsonSchema",
@@ -31,7 +32,7 @@
     "linter": "eslint --resolve-plugins-relative-to . --fix --quiet --ext .js --ext .jsx --ext .ts --ext .tsx",
     "postinstall": "gulp build",
     "publishAll": "git pull && yarn run buildParallel && lerna version --yes --no-private --no-git-tag-version && gulp completePublishAll",
-    "releaseAndroid": "yarn run buildParallel && export PATH=\"/usr/local/opt/openjdk@11/bin:$PATH\" && node packages/tools/release-android.js",
+    "releaseAndroid": "PATH=\"/usr/local/opt/openjdk@11/bin:$PATH\" node packages/tools/release-android.js",
     "releaseAndroidClean": "node packages/tools/release-android.js",
     "releaseCli": "node packages/tools/release-cli.js",
     "releaseClipper": "node packages/tools/release-clipper.js",
@@ -78,8 +79,5 @@
     "node-gyp": "^8.4.1",
     "nodemon": "^2.0.9"
   },
-  "packageManager": "yarn@3.1.1",
-  "resolutions": {
-    "markdown-it-multimd-table@4.1.1": "patch:markdown-it-multimd-table@npm:4.1.1#.yarn/patches/markdown-it-multimd-table-npm-4.1.1-47e334d4bd"
-  }
+  "packageManager": "yarn@3.1.1"
 }

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

@@ -313,6 +313,14 @@ async function fetchAllNotes() {
 				lines.push('');
 				lines.push('\tcurl -F \'data=@/path/to/file.jpg\' -F \'props={"title":"my resource title"}\' http://localhost:41184/resources');
 				lines.push('');
+				lines.push('To **update** the resource content, you can make a PUT request with the same arguments:');
+				lines.push('');
+				lines.push('\tcurl -X PUT -F \'data=@/path/to/file.jpg\' -F \'props={"title":"my modified title"}\' http://localhost:41184/resources/8fe1417d7b184324bf6b0122b76c4696');
+				lines.push('');
+				lines.push('Or if you only need to update the resource properties (title, etc.), without changing the content, you can make a regular PUT request:');
+				lines.push('');
+				lines.push('\tcurl -X PUT --data \'{"title": "My new title"}\' http://localhost:41184/resources/8fe1417d7b184324bf6b0122b76c4696');
+				lines.push('');
 				lines.push('The "data" field is required, while the "props" one is not. If not specified, default values will be used.');
 				lines.push('');
 				lines.push('**From a plugin** the syntax to create a resource is also a bit special:');
@@ -368,6 +376,11 @@ async function fetchAllNotes() {
 			lines.push(`Sets the properties of the ${singular} with ID :id`);
 			lines.push('');
 
+			if (model.type === BaseModel.TYPE_RESOURCE) {
+				lines.push('You may also update the file data by specifying a file (See `POST /resources` example).');
+				lines.push('');
+			}
+
 			lines.push(`## DELETE /${tableName}/:id`);
 			lines.push('');
 			lines.push(`Deletes the ${singular} with ID :id`);

packages/app-cli/createUsers.sh

@@ -45,7 +45,7 @@ while [ "$NUM" -lt 400 ]; do
 	echo "config keychain.supported 0" >> "$CMD_FILE" 
 	echo "config sync.target 10" >> "$CMD_FILE" 
 	echo "config sync.10.username $USER_EMAIL" >> "$CMD_FILE" 
-	echo "config sync.10.password hunter1hunter2hunter3" >> "$CMD_FILE"
+	echo "config sync.10.password 111111" >> "$CMD_FILE"
 	echo "sync" >> "$CMD_FILE"
 
 	yarn start --profile "$PROFILE_DIR" batch "$CMD_FILE"

packages/app-cli/package.json

@@ -33,14 +33,14 @@
     ],
     "owner": "Laurent Cozic"
   },
-  "version": "2.7.0",
+  "version": "2.8.0",
   "bin": "./main.js",
   "engines": {
     "node": ">=10.0.0"
   },
   "dependencies": {
-    "@joplin/lib": "~2.7",
-    "@joplin/renderer": "~2.7",
+    "@joplin/lib": "~2.8",
+    "@joplin/renderer": "~2.8",
     "aws-sdk": "^2.588.0",
     "chalk": "^4.1.0",
     "compare-version": "^0.1.2",
@@ -67,7 +67,7 @@
     "yargs-parser": "^7.0.0"
   },
   "devDependencies": {
-    "@joplin/tools": "~2.7",
+    "@joplin/tools": "~2.8",
     "@types/fs-extra": "^9.0.6",
     "@types/jest": "^26.0.15",
     "@types/node": "^14.14.6",

packages/app-cli/tests/MdToHtml.ts

@@ -242,9 +242,9 @@ describe('MdToHtml', function() {
 		{
 			const input = '# Head\nFruits\n- Apple\n';
 			const result = await mdToHtml.render(input, null, { bodyOnly: true, mapsToLine: true });
-			expect(result.html.trim()).toBe('<h1 id="head" class="maps-to-line" source-line="0">Head</h1>\n' +
-				'<p class="maps-to-line" source-line="1">Fruits</p>\n' +
-				'<ul>\n<li class="maps-to-line" source-line="2">Apple</li>\n</ul>'
+			expect(result.html.trim()).toBe('<h1 id="head" class="maps-to-line" source-line="0" source-line-end="1">Head</h1>\n' +
+				'<p class="maps-to-line" source-line="1" source-line-end="2">Fruits</p>\n' +
+				'<ul>\n<li class="maps-to-line" source-line="2" source-line-end="3">Apple</li>\n</ul>'
 			);
 		}
 	}));

packages/app-cli/tools/populateDatabase.ts

@@ -44,7 +44,7 @@ const processUser = async (userNum: number) => {
 
 	try {
 		const userEmail = `user${userNum}@example.com`;
-		const userPassword = 'hunter1hunter2hunter3';
+		const userPassword = '111111';
 		const commandFile = `${tempDir}/populateDatabase-${userNum}.txt`;
 		const profileDir = `${homedir()}/.config/joplindev-populate/joplindev-testing-${userNum}`;
 

packages/app-clipper/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Joplin Web Clipper [DEV]",
-    "version": "2.7.0",
+    "version": "2.8.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-clipper/popup/src/App.js

@@ -63,13 +63,15 @@ class AppComponent extends Component {
 			contentScriptLoaded: false,
 			selectedTags: [],
 			contentScriptError: '',
+			newNoteId: null,
 		});
 
-		this.confirm_click = () => {
+		this.confirm_click = async () => {
 			const content = Object.assign({}, this.props.clippedContent);
 			content.tags = this.state.selectedTags.join(',');
 			content.parent_id = this.props.selectedFolderId;
-			bridge().sendContentToJoplin(content);
+			const response = await bridge().sendContentToJoplin(content);
+			this.setState({ newNoteId: response.id });
 		};
 
 		this.contentTitle_change = (event) => {
@@ -402,6 +404,24 @@ class AppComponent extends Component {
 			);
 		};
 
+		const openNewNoteButton = () => {
+
+			if (!this.state.newNoteId) { return null; } else {
+				return (
+					// The jopin:// link must be opened in a new tab. When it's opened for the first time, a system dialog will ask for the user's permission.
+					// The system dialog is too big to fit into the popup so the user will not be able to see the dialog buttons and get stuck.
+					<a
+						className="Button"
+						href={`joplin://x-callback-url/openNote?id=${encodeURIComponent(this.state.newNoteId)}`}
+						target="_blank"
+						onClick={() => this.setState({ newNoteId: null })}
+					>
+          Open newly created note
+					</a>
+				);
+			}
+		};
+
 		const tagDataListOptions = [];
 		for (let i = 0; i < this.props.tags.length; i++) {
 			const tag = this.props.tags[i];
@@ -437,6 +457,7 @@ class AppComponent extends Component {
 				</div>
 				{ warningComponent }
 				{ previewComponent }
+				{ openNewNoteButton() }
 				{ clipperStatusComp() }
 			</div>
 		);

packages/app-clipper/popup/src/bridge.js

@@ -463,9 +463,11 @@ class Bridge {
 			// This is the perfect Heisenbug - it happens always when opening the popup the first time EXCEPT
 			// when the debugger is open. Then everything is working fine and the bug NEVER EVER happens,
 			// so it's impossible to understand what's going on.
-			await this.clipperApiExec('POST', 'notes', { nounce: this.nounce_++ }, content);
+			const response = await this.clipperApiExec('POST', 'notes', { nounce: this.nounce_++ }, content);
 
 			this.dispatch({ type: 'CONTENT_UPLOAD', operation: { uploading: false, success: true } });
+
+			return response;
 		} catch (error) {
 			if (error.message === '{"error":"Duplicate Nounce"}') {
 				this.dispatch({ type: 'CONTENT_UPLOAD', operation: { uploading: false, success: true } });

packages/app-desktop/app.ts

@@ -354,8 +354,7 @@ class Application extends BaseApplication {
 		}
 
 		// Loads app-wide styles. (Markdown preview-specific styles loaded in app.js)
-		const filename = Setting.custom_css_files.JOPLIN_APP;
-		await injectCustomStyles('appStyles', `${dir}/${filename}`);
+		await injectCustomStyles('appStyles', Setting.customCssFilePath(Setting.customCssFilenames.JOPLIN_APP));
 
 		AlarmService.setDriver(new AlarmServiceDriverNode({ appName: packageInfo.build.appId }));
 		AlarmService.setLogger(reg.logger());
@@ -433,7 +432,7 @@ class Application extends BaseApplication {
 		});
 
 		// Loads custom Markdown preview styles
-		const cssString = await loadCustomCss(`${Setting.value('profileDir')}/userstyle.css`);
+		const cssString = await loadCustomCss(Setting.customCssFilePath(Setting.customCssFilenames.RENDERED_MARKDOWN));
 		this.store().dispatch({
 			type: 'CUSTOM_CSS_APPEND',
 			css: cssString,
@@ -522,6 +521,7 @@ class Application extends BaseApplication {
 				migrationService: MigrationService.instance(),
 				decryptionWorker: DecryptionWorker.instance(),
 				commandService: CommandService.instance(),
+				pluginService: PluginService.instance(),
 				bridge: bridge(),
 				debug: new DebugService(reg.db()),
 			};
@@ -554,11 +554,17 @@ class Application extends BaseApplication {
 		// setTimeout(() => {
 		// 	this.dispatch({
 		// 		type: 'DIALOG_OPEN',
-		// 		name: 'editFolder',
-		// 		props: { folderId: '3d90f7da26b947dc9c8c6c65e86cd231' },
+		// 		name: 'syncWizard',
 		// 	});
 		// }, 2000);
 
+		// setTimeout(() => {
+		// 	this.dispatch({
+		// 		type: 'DIALOG_OPEN',
+		// 		name: 'editFolder',
+		// 	});
+		// }, 3000);
+
 		// setTimeout(() => {
 		// 	this.dispatch({
 		// 		type: 'NAV_GO',

packages/app-desktop/bridge.ts

@@ -9,6 +9,13 @@ interface LastSelectedPath {
 	directory: string;
 }
 
+interface OpenDialogOptions {
+	properties?: string[];
+	defaultPath?: string;
+	createDirectory?: boolean;
+	filters?: any[];
+}
+
 export class Bridge {
 
 	private electronWrapper_: ElectronAppWrapper;
@@ -155,14 +162,14 @@ export class Bridge {
 		return filePath;
 	}
 
-	async showOpenDialog(options: any = null) {
+	async showOpenDialog(options: OpenDialogOptions = null) {
 		const { dialog } = require('electron');
 		if (!options) options = {};
 		let fileType = 'file';
 		if (options.properties && options.properties.includes('openDirectory')) fileType = 'directory';
 		if (!('defaultPath' in options) && (this.lastSelectedPaths_ as any)[fileType]) options.defaultPath = (this.lastSelectedPaths_ as any)[fileType];
 		if (!('createDirectory' in options)) options.createDirectory = true;
-		const { filePaths } = await dialog.showOpenDialog(this.window(), options);
+		const { filePaths } = await dialog.showOpenDialog(this.window(), options as any);
 		if (filePaths && filePaths.length) {
 			(this.lastSelectedPaths_ as any)[fileType] = dirname(filePaths[0]);
 		}
@@ -258,7 +265,7 @@ export class Bridge {
 		}
 	}
 
-	restart() {
+	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.
@@ -269,7 +276,7 @@ export class Bridge {
 				execPath: process.env.PORTABLE_EXECUTABLE_FILE,
 			};
 			app.relaunch(options);
-		} else if (shim.isLinux()) {
+		} else if (shim.isLinux() && linuxSafeRestart) {
 			this.showInfoMessageBox(_('The app is now going to close. Please relaunch it to complete the process.'));
 		} else {
 			app.relaunch();

packages/app-desktop/commands/editProfileConfig.ts

@@ -0,0 +1,19 @@
+import { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
+import Setting from '@joplin/lib/models/Setting';
+import { openFileWithExternalEditor } from '@joplin/lib/services/ExternalEditWatcher/utils';
+import bridge from '../services/bridge';
+import { _ } from '@joplin/lib/locale';
+
+export const declaration: CommandDeclaration = {
+	name: 'editProfileConfig',
+	label: () => _('Edit profile configuration...'),
+};
+
+export const runtime = (): CommandRuntime => {
+	return {
+		execute: async (_context: CommandContext) => {
+			await openFileWithExternalEditor(`${Setting.value('rootProfileDir')}/profiles.json`, bridge());
+		},
+		enabledCondition: 'hasMultiProfiles',
+	};
+};

packages/app-desktop/commands/index.ts

@@ -1,5 +1,6 @@
 // AUTO-GENERATED using `gulp buildCommandIndex`
 import * as copyDevCommand from './copyDevCommand';
+import * as editProfileConfig from './editProfileConfig';
 import * as exportFolders from './exportFolders';
 import * as exportNotes from './exportNotes';
 import * as focusElement from './focusElement';
@@ -8,11 +9,16 @@ import * as replaceMisspelling from './replaceMisspelling';
 import * as restoreNoteRevision from './restoreNoteRevision';
 import * as startExternalEditing from './startExternalEditing';
 import * as stopExternalEditing from './stopExternalEditing';
+import * as switchProfile from './switchProfile';
+import * as switchProfile1 from './switchProfile1';
+import * as switchProfile2 from './switchProfile2';
+import * as switchProfile3 from './switchProfile3';
 import * as toggleExternalEditing from './toggleExternalEditing';
 import * as toggleSafeMode from './toggleSafeMode';
 
 const index:any[] = [
 	copyDevCommand,
+	editProfileConfig,
 	exportFolders,
 	exportNotes,
 	focusElement,
@@ -21,6 +27,10 @@ const index:any[] = [
 	restoreNoteRevision,
 	startExternalEditing,
 	stopExternalEditing,
+	switchProfile,
+	switchProfile1,
+	switchProfile2,
+	switchProfile3,
 	toggleExternalEditing,
 	toggleSafeMode,
 ];

packages/app-desktop/commands/replaceMisspelling.ts

@@ -1,19 +1,12 @@
 import CommandService, { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
 import { AppState } from '../app.reducer';
 import bridge from '../services/bridge';
+import { isInsideContainer } from '@joplin/lib/dom';
 
 export const declaration: CommandDeclaration = {
 	name: 'replaceMisspelling',
 };
 
-function isInsideContainer(node: any, className: string): boolean {
-	while (node) {
-		if (node.classList && node.classList.contains(className)) return true;
-		node = node.parentNode;
-	}
-	return false;
-}
-
 export const runtime = (): CommandRuntime => {
 	return {
 		execute: async (context: CommandContext, suggestion: string) => {

packages/app-desktop/commands/switchProfile.ts

@@ -0,0 +1,26 @@
+import { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
+import Setting from '@joplin/lib/models/Setting';
+import { saveProfileConfig } from '@joplin/lib/services/profileConfig';
+import { ProfileConfig } from '@joplin/lib/services/profileConfig/types';
+import bridge from '../services/bridge';
+
+export const declaration: CommandDeclaration = {
+	name: 'switchProfile',
+};
+
+export const runtime = (): CommandRuntime => {
+	return {
+		execute: async (context: CommandContext, profileId: string) => {
+			const currentConfig = context.state.profileConfig;
+			if (currentConfig.currentProfileId === profileId) return;
+
+			const newConfig: ProfileConfig = {
+				...currentConfig,
+				currentProfileId: profileId,
+			};
+
+			await saveProfileConfig(`${Setting.value('rootProfileDir')}/profiles.json`, newConfig);
+			bridge().restart(false);
+		},
+	};
+};

packages/app-desktop/commands/switchProfile1.ts

@@ -0,0 +1,16 @@
+import CommandService, { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
+import { _ } from '@joplin/lib/locale';
+import { profileIdByIndex } from '@joplin/lib/services/profileConfig';
+
+export const declaration: CommandDeclaration = {
+	name: 'switchProfile1',
+	label: () => _('Switch to profile %d', 1),
+};
+
+export const runtime = (): CommandRuntime => {
+	return {
+		execute: async (context: CommandContext) => {
+			await CommandService.instance().execute('switchProfile', profileIdByIndex(context.state.profileConfig, 0));
+		},
+	};
+};

packages/app-desktop/commands/switchProfile2.ts

@@ -0,0 +1,16 @@
+import CommandService, { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
+import { _ } from '@joplin/lib/locale';
+import { profileIdByIndex } from '@joplin/lib/services/profileConfig';
+
+export const declaration: CommandDeclaration = {
+	name: 'switchProfile2',
+	label: () => _('Switch to profile %d', 2),
+};
+
+export const runtime = (): CommandRuntime => {
+	return {
+		execute: async (context: CommandContext) => {
+			await CommandService.instance().execute('switchProfile', profileIdByIndex(context.state.profileConfig, 1));
+		},
+	};
+};

packages/app-desktop/commands/switchProfile3.ts

@@ -0,0 +1,16 @@
+import CommandService, { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
+import { _ } from '@joplin/lib/locale';
+import { profileIdByIndex } from '@joplin/lib/services/profileConfig';
+
+export const declaration: CommandDeclaration = {
+	name: 'switchProfile3',
+	label: () => _('Switch to profile %d', 3),
+};
+
+export const runtime = (): CommandRuntime => {
+	return {
+		execute: async (context: CommandContext) => {
+			await CommandService.instance().execute('switchProfile', profileIdByIndex(context.state.profileConfig, 2));
+		},
+	};
+};

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

@@ -7,6 +7,7 @@ import bridge from '../../services/bridge';
 import Setting, { AppType, SyncStartupOperation } from '@joplin/lib/models/Setting';
 import control_PluginsStates from './controls/plugins/PluginsStates';
 import EncryptionConfigScreen from '../EncryptionConfigScreen/EncryptionConfigScreen';
+import { reg } from '@joplin/lib/registry';
 const { connect } = require('react-redux');
 const { themeStyle } = require('@joplin/lib/theme');
 const pathUtils = require('@joplin/lib/path-utils');
@@ -26,7 +27,7 @@ class ConfigScreenComponent extends React.Component<any, any> {
 	constructor(props: any) {
 		super(props);
 
-		shared.init(this);
+		shared.init(this, reg);
 
 		this.state = {
 			selectedSectionName: 'general',

packages/app-desktop/gui/Dialog.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 
 const DialogModalLayer = styled.div`
@@ -33,20 +32,6 @@ interface Props {
 }
 
 export default function Dialog(props: Props) {
-	const onWindowKeydown = useCallback((event: any) => {
-		if (event.key === 'Escape') {
-			if (props.onClose) props.onClose();
-		}
-	}, [props.onClose]);
-
-	useEffect(() => {
-		window.addEventListener('keydown', onWindowKeydown);
-
-		return () => {
-			window.removeEventListener('keydown', onWindowKeydown);
-		};
-	}, [onWindowKeydown]);
-
 	return (
 		<DialogModalLayer className={props.className}>
 			<DialogRoot>

packages/app-desktop/gui/DialogButtonRow.tsx

@@ -1,7 +1,8 @@
-const React = require('react');
-import { useMemo } from 'react';
-const { _ } = require('@joplin/lib/locale');
-const { themeStyle } = require('@joplin/lib/theme');
+import * as React from 'react';
+import { useMemo, useCallback } from 'react';
+import { _ } from '@joplin/lib/locale';
+import { themeStyle } from '@joplin/lib/theme';
+import useKeyboardHandler from './DialogButtonRow/useKeyboardHandler';
 
 export interface ButtonSpec {
 	name: string;
@@ -37,32 +38,26 @@ export default function DialogButtonRow(props: Props) {
 		};
 	}, [theme.buttonStyle]);
 
-	const okButton_click = () => {
-		if (props.onClick) props.onClick({ buttonName: 'ok' });
-	};
+	const onOkButtonClick = useCallback(() => {
+		if (props.onClick && !props.okButtonDisabled) props.onClick({ buttonName: 'ok' });
+	}, [props.onClick, props.okButtonDisabled]);
 
-	const cancelButton_click = () => {
-		if (props.onClick) props.onClick({ buttonName: 'cancel' });
-	};
+	const onCancelButtonClick = useCallback(() => {
+		if (props.onClick && !props.cancelButtonDisabled) props.onClick({ buttonName: 'cancel' });
+	}, [props.onClick, props.cancelButtonDisabled]);
 
-	const customButton_click = (event: ClickEvent) => {
+	const onCustomButtonClick = useCallback((event: ClickEvent) => {
 		if (props.onClick) props.onClick(event);
-	};
+	}, [props.onClick]);
 
-	const onKeyDown = (event: any) => {
-		if (event.keyCode === 13) {
-			okButton_click();
-		} else if (event.keyCode === 27) {
-			cancelButton_click();
-		}
-	};
+	const onKeyDown = useKeyboardHandler({ onOkButtonClick, onCancelButtonClick });
 
 	const buttonComps = [];
 
 	if (props.customButtons) {
 		for (const b of props.customButtons) {
 			buttonComps.push(
-				<button key={b.name} style={buttonStyle} onClick={() => customButton_click({ buttonName: b.name })} onKeyDown={onKeyDown}>
+				<button key={b.name} style={buttonStyle} onClick={() => onCustomButtonClick({ buttonName: b.name })} onKeyDown={onKeyDown}>
 					{b.label}
 				</button>
 			);
@@ -71,7 +66,7 @@ export default function DialogButtonRow(props: Props) {
 
 	if (props.okButtonShow !== false) {
 		buttonComps.push(
-			<button disabled={props.okButtonDisabled} key="ok" style={buttonStyle} onClick={okButton_click} ref={props.okButtonRef} onKeyDown={onKeyDown}>
+			<button disabled={props.okButtonDisabled} key="ok" style={buttonStyle} onClick={onOkButtonClick} ref={props.okButtonRef} onKeyDown={onKeyDown}>
 				{props.okButtonLabel ? props.okButtonLabel : _('OK')}
 			</button>
 		);
@@ -79,7 +74,7 @@ export default function DialogButtonRow(props: Props) {
 
 	if (props.cancelButtonShow !== false) {
 		buttonComps.push(
-			<button disabled={props.cancelButtonDisabled} key="cancel" style={Object.assign({}, buttonStyle)} onClick={cancelButton_click}>
+			<button disabled={props.cancelButtonDisabled} key="cancel" style={Object.assign({}, buttonStyle)} onClick={onCancelButtonClick}>
 				{props.cancelButtonLabel ? props.cancelButtonLabel : _('Cancel')}
 			</button>
 		);

packages/app-desktop/gui/DialogButtonRow/useKeyboardHandler.ts

@@ -0,0 +1,62 @@
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { isInsideContainer } from '@joplin/lib/dom';
+
+interface Props {
+	onOkButtonClick: Function;
+	onCancelButtonClick: Function;
+}
+
+const globalKeydownHandlers: string[] = [];
+
+export default (props: Props) => {
+	const [elementId] = useState(`${Math.round(Math.random() * 10000000)}`);
+	const globalKeydownHandlersRef = useRef(globalKeydownHandlers);
+
+	useEffect(() => {
+		globalKeydownHandlersRef.current.push(elementId);
+		return () => {
+			const idx = globalKeydownHandlersRef.current.findIndex(e => e === elementId);
+			globalKeydownHandlersRef.current.splice(idx, 1);
+		};
+	}, []);
+
+	const isTopDialog = () => {
+		const ln = globalKeydownHandlersRef.current.length;
+		return ln && globalKeydownHandlersRef.current[ln - 1] === elementId;
+	};
+
+	const isInSubModal = (targetElement: any) => {
+		// If we are inside a sub-modal within the dialog, we shouldn't handle
+		// global key events. It can be for example the emoji picker. In general
+		// it's difficult to know whether an element is a modal or not, so we'll
+		// have to add special cases here. Normally there shouldn't be many of
+		// these.
+		if (isInsideContainer(targetElement, 'emoji-picker')) return true;
+		return false;
+	};
+
+	const onKeyDown = useCallback((event: any) => {
+		// Early exit if it's neither ENTER nor ESCAPE, because isInSubModal
+		// function can be costly.
+		if (event.keyCode !== 13 && event.keyCode !== 27) return;
+
+		if (!isTopDialog() || isInSubModal(event.target)) return;
+
+		if (event.keyCode === 13) {
+			if (event.target.nodeName !== 'TEXTAREA') {
+				props.onOkButtonClick();
+			}
+		} else if (event.keyCode === 27) {
+			props.onCancelButtonClick();
+		}
+	}, [props.onOkButtonClick, props.onCancelButtonClick]);
+
+	useEffect(() => {
+		document.addEventListener('keydown', onKeyDown);
+		return () => {
+			document.removeEventListener('keydown', onKeyDown);
+		};
+	}, [onKeyDown]);
+
+	return onKeyDown;
+};

packages/app-desktop/gui/EditFolderDialog/Dialog.tsx

@@ -8,9 +8,11 @@ import StyledInput from '../style/StyledInput';
 import { IconSelector, ChangeEvent } from './IconSelector';
 import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect';
 import Folder from '@joplin/lib/models/Folder';
-import { FolderEntity, FolderIcon } from '@joplin/lib/services/database/types';
+import { FolderEntity, FolderIcon, FolderIconType } from '@joplin/lib/services/database/types';
 import Button from '../Button/Button';
 import bridge from '../../services/bridge';
+import shim from '@joplin/lib/shim';
+import FolderIconBox from '../FolderIconBox';
 
 interface Props {
 	themeId: number;
@@ -93,6 +95,34 @@ export default function(props: Props) {
 		setFolderIcon(null);
 	}, []);
 
+	const onBrowseClick = useCallback(async () => {
+		const filePaths = await bridge().showOpenDialog({
+			filters: [
+				{
+					name: _('Images'),
+					extensions: ['jpg', 'jpeg', 'png'],
+				},
+			],
+		});
+		if (filePaths.length !== 1) return;
+		const filePath = filePaths[0];
+
+		try {
+			const dataUrl = await shim.imageToDataUrl(filePath, 256);
+			setFolderIcon(icon => {
+				return {
+					...icon,
+					emoji: '',
+					name: '',
+					type: FolderIconType.DataUrl,
+					dataUrl,
+				};
+			});
+		} catch (error) {
+			await bridge().showErrorMessageBox(error.message);
+		}
+	}, []);
+
 	function renderForm() {
 		return (
 			<div>
@@ -105,11 +135,14 @@ export default function(props: Props) {
 					<div className="form-input-group">
 						<label>{_('Icon')}</label>
 						<div className="icon-selector-row">
+							{ folderIcon && <div className="foldericon"><FolderIconBox folderIcon={folderIcon} /></div> }
 							<IconSelector
+								title={_('Select emoji...')}
 								icon={folderIcon}
 								onChange={onFolderIconChange}
 							/>
-							<Button ml={1} title={_('Clear')} onClick={onClearClick}/>
+							<Button ml={1} title={_('Select file...')} onClick={onBrowseClick}/>
+							{ folderIcon && <Button ml={1} title={_('Clear')} onClick={onClearClick}/> }
 						</div>
 					</div>
 				</div>

packages/app-desktop/gui/EditFolderDialog/IconSelector.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState, useCallback, useRef } from 'react';
 import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect';
 import { loadScript } from '../utils/loadScript';
 import Button from '../Button/Button';
-import { FolderIcon } from '@joplin/lib/services/database/types';
+import { FolderIcon, FolderIconType } from '@joplin/lib/services/database/types';
 import bridge from '../../services/bridge';
 
 export interface ChangeEvent {
@@ -15,6 +15,7 @@ type ChangeHandler = (event: ChangeEvent)=> void;
 interface Props {
 	onChange: ChangeHandler;
 	icon: FolderIcon | null;
+	title: string;
 }
 
 export const IconSelector = (props: Props) => {
@@ -62,7 +63,7 @@ export const IconSelector = (props: Props) => {
 		});
 
 		const onEmoji = (selection: FolderIcon) => {
-			props.onChange({ value: selection });
+			props.onChange({ value: { ...selection, type: FolderIconType.Emoji } });
 		};
 
 		p.on('emoji', onEmoji);
@@ -78,16 +79,25 @@ export const IconSelector = (props: Props) => {
 		picker.togglePicker(buttonRef.current);
 	}, [picker]);
 
-	const buttonText = props.icon ? props.icon.emoji : '...';
+	// const buttonText = props.icon ? props.icon.emoji : '...';
 
 	return (
 		<Button
 			disabled={!picker}
 			ref={buttonRef}
 			onClick={onClick}
-			title={buttonText}
-			isSquare={true}
-			fontSize={20}
+			title={props.title}
 		/>
 	);
+
+	// return (
+	// 	<Button
+	// 		disabled={!picker}
+	// 		ref={buttonRef}
+	// 		onClick={onClick}
+	// 		title={buttonText}
+	// 		isSquare={true}
+	// 		fontSize={20}
+	// 	/>
+	// );
 };

packages/app-desktop/gui/EditFolderDialog/style.scss

@@ -1,4 +1,13 @@
 .icon-selector-row {
 	display: flex;
 	flex-direction: row;
+	align-items: center;
+}
+
+.icon-selector-row > .foldericon {
+	margin-right: 5px;
+	display: flex;
+	border: 1px solid var(--joplin-divider-color);
+	padding: 5px;
+	background-color: var(--joplin-background-color);
 }

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

@@ -137,7 +137,7 @@ const EncryptionConfigScreen = (props: Props) => {
 				return (
 					<td style={theme.textStyle}>
 						<input type="password" style={passwordStyle} value={password} onChange={event => onInputPasswordChange(mk, event.target.value)} />{' '}
-						<button style={theme.buttonStyle} onClick={() => onSavePasswordClick(mk, props.passwords)}>
+						<button style={theme.buttonStyle} onClick={() => onSavePasswordClick(mk, { ...props.passwords, ...inputPasswords })}>
 							{_('Save')}
 						</button>
 					</td>
@@ -268,7 +268,7 @@ const EncryptionConfigScreen = (props: Props) => {
 		const buttonTitle = CommandService.instance().label('openMasterPasswordDialog');
 
 		const needPasswordMessage = !needMasterPassword ? null : (
-			<p className="needpassword">{_('Your master password is needed to decrypt some of your data.')}<br/>{_('Please click on "%s" to proceed', buttonTitle)}</p>
+			<p className="needpassword">{_('Your password is needed to decrypt some of your data.')}<br/>{_('Please click on "%s" to proceed, or set the passwords in the "%s" list below.', buttonTitle, _('Encryption keys'))}</p>
 		);
 
 		return (

packages/app-desktop/gui/EncryptionConfigScreen/style.scss

@@ -5,6 +5,7 @@
 .manage-password-section > .status {
 	display: flex;
 	flex-direction: row;
+	align-items: center;
 }
 
 .manage-password-section > .needpassword {

packages/app-desktop/gui/FolderIconBox.tsx

@@ -0,0 +1,17 @@
+import { FolderIcon, FolderIconType } from '@joplin/lib/services/database/types';
+
+interface Props {
+	folderIcon: FolderIcon;
+}
+
+export default function(props: Props) {
+	const folderIcon = props.folderIcon;
+
+	if (folderIcon.type === FolderIconType.Emoji) {
+		return <span style={{ fontSize: 20 }}>{folderIcon.emoji}</span>;
+	} else if (folderIcon.type === FolderIconType.DataUrl) {
+		return <img style={{ width: 20, height: 20 }} src={folderIcon.dataUrl} />;
+	} else {
+		throw new Error(`Unsupported folder icon type: ${folderIcon.type}`);
+	}
+}

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

@@ -8,7 +8,7 @@ import NoteEditor from '../NoteEditor/NoteEditor';
 import NoteContentPropertiesDialog from '../NoteContentPropertiesDialog';
 import ShareNoteDialog from '../ShareNoteDialog';
 import CommandService from '@joplin/lib/services/CommandService';
-import { PluginStates, utils as pluginUtils } from '@joplin/lib/services/plugins/reducer';
+import { PluginHtmlContents, PluginStates, utils as pluginUtils } from '@joplin/lib/services/plugins/reducer';
 import Sidebar from '../Sidebar/Sidebar';
 import UserWebview from '../../services/plugins/UserWebview';
 import UserWebviewDialog from '../../services/plugins/UserWebviewDialog';
@@ -37,7 +37,7 @@ import { localSyncInfoFromState } from '@joplin/lib/services/synchronizer/syncIn
 import { parseCallbackUrl } from '@joplin/lib/callbackUrlUtils';
 import ElectronAppWrapper from '../../ElectronAppWrapper';
 import { showMissingMasterKeyMessage } from '@joplin/lib/services/e2ee/utils';
-import { MasterKeyEntity } from '../../../lib/services/e2ee/types';
+import { MasterKeyEntity } from '@joplin/lib/services/e2ee/types';
 import commands from './commands/index';
 import invitationRespond from '../../services/share/invitationRespond';
 const { connect } = require('react-redux');
@@ -53,6 +53,7 @@ interface LayerModalState {
 
 interface Props {
 	plugins: PluginStates;
+	pluginHtmlContents: PluginHtmlContents;
 	pluginsLoaded: boolean;
 	hasNotesBeingSaved: boolean;
 	dispatch: Function;
@@ -723,12 +724,13 @@ class MainScreenComponent extends React.Component<Props, State> {
 				}
 			} else {
 				const { view, plugin } = viewInfo;
+				const html = this.props.pluginHtmlContents[plugin.id]?.[view.id] ?? '';
 
 				return <UserWebview
 					key={view.id}
 					viewId={view.id}
 					themeId={this.props.themeId}
-					html={view.html}
+					html={html}
 					scripts={view.scripts}
 					pluginId={plugin.id}
 					borderBottom={true}
@@ -762,12 +764,13 @@ class MainScreenComponent extends React.Component<Props, State> {
 			const { plugin, view } = info;
 			if (view.containerType !== ContainerType.Dialog) continue;
 			if (!view.opened) continue;
+			const html = this.props.pluginHtmlContents[plugin.id]?.[view.id] ?? '';
 
 			output.push(<UserWebviewDialog
 				key={view.id}
 				viewId={view.id}
 				themeId={this.props.themeId}
-				html={view.html}
+				html={html}
 				scripts={view.scripts}
 				pluginId={plugin.id}
 				buttons={view.buttons}
@@ -865,6 +868,7 @@ const mapStateToProps = (state: AppState) => {
 		selectedNoteId: state.selectedNoteIds.length === 1 ? state.selectedNoteIds[0] : null,
 		pluginsLegacy: state.pluginsLegacy,
 		plugins: state.pluginService.plugins,
+		pluginHtmlContents: state.pluginService.pluginHtmlContents,
 		customCss: state.customCss,
 		editorNoteStatuses: state.editorNoteStatuses,
 		hasNotesBeingSaved: stateUtils.hasNotesBeingSaved(state),

packages/app-desktop/gui/MainScreen/commands/addProfile.ts

@@ -0,0 +1,34 @@
+import { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
+import { _ } from '@joplin/lib/locale';
+import { createNewProfile, saveProfileConfig } from '@joplin/lib/services/profileConfig';
+import Setting from '@joplin/lib/models/Setting';
+import bridge from '../../../services/bridge';
+
+export const declaration: CommandDeclaration = {
+	name: 'addProfile',
+	label: () => _('Create new profile...'),
+};
+
+export const runtime = (comp: any): CommandRuntime => {
+	return {
+		execute: async (context: CommandContext) => {
+			comp.setState({
+				promptOptions: {
+					label: _('Profile name:'),
+					buttons: ['create', 'cancel'],
+					value: '',
+					onClose: async (answer: string) => {
+						if (answer) {
+							const { newConfig, newProfile } = createNewProfile(context.state.profileConfig, answer);
+							newConfig.currentProfileId = newProfile.id;
+							await saveProfileConfig(`${Setting.value('rootProfileDir')}/profiles.json`, newConfig);
+							bridge().restart(false);
+						}
+
+						comp.setState({ promptOptions: null });
+					},
+				},
+			});
+		},
+	};
+};

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

@@ -1,4 +1,5 @@
 // AUTO-GENERATED using `gulp buildCommandIndex`
+import * as addProfile from './addProfile';
 import * as commandPalette from './commandPalette';
 import * as editAlarm from './editAlarm';
 import * as exportPdf from './exportPdf';
@@ -38,6 +39,7 @@ import * as toggleSideBar from './toggleSideBar';
 import * as toggleVisiblePanes from './toggleVisiblePanes';
 
 const index:any[] = [
+	addProfile,
 	commandPalette,
 	editAlarm,
 	exportPdf,

packages/app-desktop/gui/MasterPasswordDialog/Dialog.tsx

@@ -34,6 +34,12 @@ export default function(props: Props) {
 	const [updatingPassword, setUpdatingPassword] = useState(false);
 	const [mode, setMode] = useState<Mode>(Mode.Set);
 
+	const showCurrentPassword = useMemo(() => {
+		if ([MasterPasswordStatus.NotSet, MasterPasswordStatus.Invalid].includes(status)) return false;
+		if (mode === Mode.Reset) return false;
+		return true;
+	}, [status]);
+
 	const onClose = useCallback(() => {
 		props.dispatch({
 			type: 'DIALOG_CLOSE',
@@ -63,7 +69,7 @@ export default function(props: Props) {
 			setUpdatingPassword(true);
 			try {
 				if (mode === Mode.Set) {
-					await updateMasterPassword(currentPassword, password1);
+					await updateMasterPassword(showCurrentPassword ? currentPassword : null, password1);
 				} else if (mode === Mode.Reset) {
 					await resetMasterPassword(EncryptionService.instance(), KvStore.instance(), ShareService.instance(), password1);
 				} else {
@@ -115,7 +121,7 @@ export default function(props: Props) {
 	}, [password1, password2, updatingPassword, needToRepeatPassword]);
 
 	useEffect(() => {
-		setShowPasswordForm(status === MasterPasswordStatus.NotSet);
+		setShowPasswordForm([MasterPasswordStatus.NotSet, MasterPasswordStatus.Invalid].includes(status));
 	}, [status]);
 
 	useAsyncEffect(async (event: AsyncEffectEvent) => {
@@ -131,8 +137,7 @@ export default function(props: Props) {
 
 	function renderPasswordForm() {
 		const renderCurrentPassword = () => {
-			if (status === MasterPasswordStatus.NotSet) return null;
-			if (mode === Mode.Reset) return null;
+			if (!showCurrentPassword) return null;
 
 			// If the master password is in the keychain we preload it into the
 			// field and allow displaying it. That way if the user has forgotten

packages/app-desktop/gui/MenuBar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef, useCallback } from 'react';
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
 import { AppState } from '../app.reducer';
 import InteropService from '@joplin/lib/services/interop/InteropService';
 import { stateUtils } from '@joplin/lib/reducer';
@@ -18,9 +18,9 @@ import menuCommandNames from './menuCommandNames';
 import stateToWhenClauseContext from '../services/commands/stateToWhenClauseContext';
 import bridge from '../services/bridge';
 import checkForUpdates from '../checkForUpdates';
-
 const { connect } = require('react-redux');
 import { reg } from '@joplin/lib/registry';
+import { ProfileConfig } from '@joplin/lib/services/profileConfig/types';
 const packageInfo = require('../packageInfo.js');
 const { clipboard } = require('electron');
 const Menu = bridge().Menu;
@@ -39,7 +39,7 @@ function pluginMenuItemsCommandNames(menuItems: MenuItem[]): string[] {
 	return output;
 }
 
-function pluginCommandNames(plugins: PluginStates): string[] {
+function getPluginCommandNames(plugins: PluginStates): string[] {
 	let output: string[] = [];
 
 	for (const view of pluginUtils.viewsByType(plugins, 'menu')) {
@@ -70,6 +70,42 @@ function createPluginMenuTree(label: string, menuItems: MenuItem[], onMenuItemCl
 	return output;
 }
 
+const useSwitchProfileMenuItems = (profileConfig: ProfileConfig, menuItemDic: any) => {
+	return useMemo(() => {
+		const switchProfileMenuItems: any[] = [];
+
+		for (let i = 0; i < profileConfig.profiles.length; i++) {
+			const profile = profileConfig.profiles[i];
+
+			let menuItem: any = {};
+			const profileNum = i + 1;
+
+			if (menuItemDic[`switchProfile${profileNum}`]) {
+				menuItem = { ...menuItemDic[`switchProfile${profileNum}`] };
+			} else {
+				menuItem = {
+					label: profile.name,
+					click: () => {
+						void CommandService.instance().execute('switchProfile', profile.id);
+					},
+				};
+			}
+
+			menuItem.label = profile.name;
+			menuItem.type = 'checkbox';
+			menuItem.checked = profileConfig.currentProfileId === profile.id;
+
+			switchProfileMenuItems.push(menuItem);
+		}
+
+		switchProfileMenuItems.push({ type: 'separator' });
+		switchProfileMenuItems.push(menuItemDic.addProfile);
+		switchProfileMenuItems.push(menuItemDic.editProfileConfig);
+
+		return switchProfileMenuItems;
+	}, [profileConfig, menuItemDic]);
+};
+
 interface Props {
 	dispatch: Function;
 	menuItemProps: any;
@@ -90,6 +126,7 @@ interface Props {
 	plugins: PluginStates;
 	customCss: string;
 	locale: string;
+	profileConfig: ProfileConfig;
 }
 
 const commandNames: string[] = menuCommandNames();
@@ -174,6 +211,12 @@ function useMenu(props: Props) {
 	const [keymapLastChangeTime, setKeymapLastChangeTime] = useState(Date.now());
 	const [modulesLastChangeTime, setModulesLastChangeTime] = useState(Date.now());
 
+	// We use a ref here because the plugin state can change frequently when
+	// switching note since any plugin view might be rendered again. However we
+	// need this plugin state only in a click handler when exporting notes, and
+	// for that a ref is sufficient.
+	const pluginsRef = useRef(props.plugins);
+
 	const onMenuItemClick = useCallback((commandName: string) => {
 		void CommandService.instance().execute(commandName);
 	}, []);
@@ -241,6 +284,18 @@ function useMenu(props: Props) {
 	const onImportModuleClickRef = useRef(null);
 	onImportModuleClickRef.current = onImportModuleClick;
 
+	const pluginCommandNames = useMemo(() => props.pluginMenuItems.map((view: any) => view.commandName), [props.pluginMenuItems]);
+
+	const menuItemDic = useMemo(() => {
+		return menuUtils.commandsToMenuItems(
+			commandNames.concat(pluginCommandNames),
+			(commandName: string) => onMenuItemClickRef.current(commandName),
+			props.locale
+		);
+	}, [commandNames, pluginCommandNames, props.locale]);
+
+	const switchProfileMenuItems: any[] = useSwitchProfileMenuItems(props.profileConfig, menuItemDic);
+
 	useEffect(() => {
 		let timeoutId: any = null;
 
@@ -249,13 +304,6 @@ function useMenu(props: Props) {
 
 			const keymapService = KeymapService.instance();
 
-			const pluginCommandNames = props.pluginMenuItems.map((view: any) => view.commandName);
-			const menuItemDic = menuUtils.commandsToMenuItems(
-				commandNames.concat(pluginCommandNames),
-				(commandName: string) => onMenuItemClickRef.current(commandName),
-				props.locale
-			);
-
 			const quitMenuItem = {
 				label: _('Quit'),
 				accelerator: keymapService.getAccelerator('quit'),
@@ -329,7 +377,7 @@ function useMenu(props: Props) {
 									(action: any) => props.dispatch(action),
 									module,
 									{
-										plugins: props.plugins,
+										plugins: pluginsRef.current,
 										customCss: props.customCss,
 									}
 								);
@@ -347,6 +395,12 @@ function useMenu(props: Props) {
 				}
 			}
 
+			importItems.push({ type: 'separator' });
+			importItems.push({
+				label: _('Other applications...'),
+				click: () => { void bridge().openExternal('https://discourse.joplinapp.org/t/importing-notes-from-other-notebook-applications/22425'); },
+			});
+
 			exportItems.push(
 				menuItemDic.exportPdf
 			);
@@ -379,6 +433,10 @@ function useMenu(props: Props) {
 			const newFolderItem = menuItemDic.newFolder;
 			const newSubFolderItem = menuItemDic.newSubFolder;
 			const printItem = menuItemDic.print;
+			const switchProfileItem = {
+				label: _('Switch profile'),
+				submenu: switchProfileMenuItems,
+			};
 
 			let toolsItems: any[] = [];
 
@@ -493,6 +551,8 @@ function useMenu(props: Props) {
 					platforms: ['darwin'],
 				},
 
+				shim.isMac() ? noItem : switchProfileItem,
+
 				shim.isMac() ? {
 					label: _('Hide %s', 'Joplin'),
 					platforms: ['darwin'],
@@ -539,6 +599,7 @@ function useMenu(props: Props) {
 						type: 'separator',
 					},
 					printItem,
+					switchProfileItem,
 				],
 			};
 
@@ -566,8 +627,15 @@ function useMenu(props: Props) {
 						menuItemDic.textPaste,
 						menuItemDic.textSelectAll,
 						separator(),
-						menuItemDic['editor.undo'],
-						menuItemDic['editor.redo'],
+						// Using the generic "undo"/"redo" roles mean the menu
+						// item will work in every text fields, whether it's the
+						// editor or a regular text field.
+						{
+							role: 'undo',
+						},
+						{
+							role: 'redo',
+						},
 						separator(),
 						menuItemDic.textBold,
 						menuItemDic.textItalic,
@@ -835,7 +903,20 @@ function useMenu(props: Props) {
 			clearTimeout(timeoutId);
 			timeoutId = null;
 		};
-	}, [props.routeName, props.pluginMenuItems, props.pluginMenus, keymapLastChangeTime, modulesLastChangeTime, props['spellChecker.language'], props['spellChecker.enabled'], props.plugins, props.customCss, props.locale]);
+	}, [
+		props.routeName,
+		props.pluginMenuItems,
+		props.pluginMenus,
+		keymapLastChangeTime,
+		modulesLastChangeTime,
+		props['spellChecker.language'],
+		props['spellChecker.enabled'],
+		props.customCss,
+		props.locale,
+		props.profileConfig,
+		switchProfileMenuItems,
+		menuItemDic,
+	]);
 
 	useMenuStates(menu, props);
 
@@ -876,7 +957,7 @@ const mapStateToProps = (state: AppState) => {
 	const whenClauseContext = stateToWhenClauseContext(state);
 
 	return {
-		menuItemProps: menuUtils.commandsToMenuItemProps(commandNames.concat(pluginCommandNames(state.pluginService.plugins)), whenClauseContext),
+		menuItemProps: menuUtils.commandsToMenuItemProps(commandNames.concat(getPluginCommandNames(state.pluginService.plugins)), whenClauseContext),
 		locale: state.settings.locale,
 		routeName: state.route.routeName,
 		selectedFolderId: state.selectedFolderId,
@@ -894,6 +975,7 @@ const mapStateToProps = (state: AppState) => {
 		['spellChecker.enabled']: state.settings['spellChecker.enabled'],
 		plugins: state.pluginService.plugins,
 		customCss: state.customCss,
+		profileConfig: state.profileConfig,
 	};
 };
 

packages/app-desktop/gui/Navigator.jsx

@@ -39,7 +39,7 @@ class NavigatorComponent extends Component {
 		};
 
 		return (
-			<div style={this.props.style}>
+			<div style={this.props.style} className={this.props.className}>
 				<Screen style={screenStyle} {...screenProps} />
 			</div>
 		);

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

@@ -515,8 +515,9 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 				color: ${theme.searchMarkerColor} !important;
 			}
 
+			/* We need !important because the search marker is overridden by CodeMirror's own text selection marker */
 			.cm-search-marker-selected {
-				background: ${theme.selectedColor2};
+				background: ${theme.selectedColor2} !important;
 				color: ${theme.color2} !important;
 			}
 
@@ -648,6 +649,11 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 		// undefined. Maybe due to the error boundary that unmount components.
 		// Since we can't do much about it we just print an error.
 		if (webviewRef.current && webviewRef.current.wrappedInstance) {
+			// To keep consistency among CodeMirror's editing and scroll percents
+			// of Editor and Viewer.
+			const percent = getLineScrollPercent();
+			setEditorPercentScroll(percent);
+			options.percent = percent;
 			webviewRef.current.wrappedInstance.send('setHtml', renderedBody.html, options);
 		} else {
 			console.error('Trying to set HTML on an undefined webview ref');
@@ -731,15 +737,19 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 	// It might be buggy, refer to the below issue
 	// https://github.com/laurent22/joplin/pull/3974#issuecomment-718936703
 	useEffect(() => {
-		function pointerInsideEditor(x: number, y: number) {
+		function pointerInsideEditor(params: any) {
+			const x = params.x, y = params.y, isEditable = params.isEditable, inputFieldType = params.inputFieldType;
 			const elements = document.getElementsByClassName('codeMirrorEditor');
-			if (!elements.length) return null;
+
+			// inputFieldType: The input field type of CodeMirror is "textarea" so the inputFieldType = "none",
+			// and any single-line input above codeMirror has inputFieldType value according to the type of input e.g.(text = plainText, password = password, ...).
+			if (!elements.length || !isEditable || inputFieldType !== 'none') return null;
 			const rect = convertToScreenCoordinates(Setting.value('windowContentZoomFactor'), elements[0].getBoundingClientRect());
 			return rect.x < x && rect.y < y && rect.right > x && rect.bottom > y;
 		}
 
 		async function onContextMenu(_event: any, params: any) {
-			if (!pointerInsideEditor(params.x, params.y)) return;
+			if (!pointerInsideEditor(params)) return;
 
 			const menu = new Menu();
 

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/Editor.tsx

@@ -100,6 +100,7 @@ export interface EditorProps {
 function Editor(props: EditorProps, ref: any) {
 	const [editor, setEditor] = useState(null);
 	const editorParent = useRef(null);
+	const lastEditTime = useRef(NaN);
 
 	// Codemirror plugins add new commands to codemirror (or change it's behavior)
 	// This command adds the smartListIndent function which will be bound to tab
@@ -120,6 +121,7 @@ function Editor(props: EditorProps, ref: any) {
 	const editor_change = useCallback((cm: any, change: any) => {
 		if (props.onChange && change.origin !== 'setValue') {
 			props.onChange(cm.getValue());
+			lastEditTime.current = Date.now();
 		}
 	}, [props.onChange]);
 
@@ -154,7 +156,8 @@ function Editor(props: EditorProps, ref: any) {
 	}, [props.onResize]);
 
 	const editor_update = useCallback((cm: any) => {
-		props.onUpdate(cm);
+		const edited = Date.now() - lastEditTime.current <= 100;
+		props.onUpdate(cm, edited);
 	}, [props.onUpdate]);
 
 	useEffect(() => {

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useEditorSearch.ts

@@ -8,6 +8,7 @@ export default function useEditorSearch(CodeMirror: any) {
 	const [scrollbarMarks, setScrollbarMarks] = useState(null);
 	const [previousKeywordValue, setPreviousKeywordValue] = useState(null);
 	const [previousIndex, setPreviousIndex] = useState(null);
+	const [previousSearchTimestamp, setPreviousSearchTimestamp] = useState(0);
 	const [overlayTimeout, setOverlayTimeout] = useState(null);
 	const overlayTimeoutRef = useRef(null);
 	overlayTimeoutRef.current = overlayTimeout;
@@ -51,7 +52,7 @@ export default function useEditorSearch(CodeMirror: any) {
 	// Highlights the currently active found work
 	// It's possible to get tricky with this fucntions and just use findNext/findPrev
 	// but this is fast enough and works more naturally with the current search logic
-	function highlightSearch(cm: any, searchTerm: RegExp, index: number, scrollTo: boolean) {
+	function highlightSearch(cm: any, searchTerm: RegExp, index: number, scrollTo: boolean, withSelection: boolean) {
 		const cursor = cm.getSearchCursor(searchTerm);
 
 		let match: any = null;
@@ -64,7 +65,13 @@ export default function useEditorSearch(CodeMirror: any) {
 		}
 
 		if (match) {
-			if (scrollTo) cm.setSelection(match.from, match.to);
+			if (scrollTo) {
+				if (withSelection) {
+					cm.setSelection(match.from, match.to);
+				} else {
+					cm.scrollTo(match);
+				}
+			}
 			return cm.markText(match.from, match.to, { className: 'cm-search-marker-selected' });
 		}
 
@@ -90,7 +97,7 @@ export default function useEditorSearch(CodeMirror: any) {
 
 	CodeMirror.defineExtension('setMarkers', function(keywords: any, options: any) {
 		if (!options) {
-			options = { selectedIndex: 0 };
+			options = { selectedIndex: 0, searchTimestamp: 0 };
 		}
 
 		clearMarkers();
@@ -107,16 +114,15 @@ export default function useEditorSearch(CodeMirror: any) {
 			const searchTerm = getSearchTerm(keyword);
 
 			// We only want to scroll the first keyword into view in the case of a multi keyword search
-			const scrollTo = i === 0 && (previousKeywordValue !== keyword.value || previousIndex !== options.selectedIndex ||
-				// If there is only one choice, scrollTo should be true. The below is a dummy of nMatches === 1.
-				options.selectedIndex === 0);
+			const scrollTo = i === 0 && (previousKeywordValue !== keyword.value || previousIndex !== options.selectedIndex || options.searchTimestamp !== previousSearchTimestamp);
 
-			const match = highlightSearch(this, searchTerm, options.selectedIndex, scrollTo);
+			const match = highlightSearch(this, searchTerm, options.selectedIndex, scrollTo, !!options.withSelection);
 			if (match) marks.push(match);
 		}
 
 		setMarkers(marks);
 		setPreviousIndex(options.selectedIndex);
+		setPreviousSearchTimestamp(options.searchTimestamp);
 
 		// SEARCHOVERLAY
 		// We only want to highlight all matches when there is only 1 search term

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollHandler.ts

@@ -17,7 +17,7 @@ export default function useScrollHandler(editorRef: any, webviewRef: any, onScro
 		const now = Date.now();
 		if (now >= ignoreNextEditorScrollTime_.current) ignoreNextEditorScrollEventCount_.current = 0;
 		if (ignoreNextEditorScrollEventCount_.current < 10) { // for safety
-			ignoreNextEditorScrollTime_.current = now + 200;
+			ignoreNextEditorScrollTime_.current = now + 1000;
 			ignoreNextEditorScrollEventCount_.current += 1;
 		}
 	};
@@ -157,8 +157,9 @@ export default function useScrollHandler(editorRef: any, webviewRef: any, onScro
 	// When heights of lines are updated in CodeMirror, 'update' events are raised.
 	// If such an update event is raised, scroll position should be restored.
 	// See https://github.com/laurent22/joplin/issues/5981
-	const editor_update = useCallback((cm) => {
+	const editor_update = useCallback((cm: any, edited: boolean) => {
 		if (isCodeMirrorReady(cm)) {
+			if (edited) return;
 			const linesHeight = cm.heightAtLine(cm.lineCount()) - cm.heightAtLine(0);
 			if (lastLinesHeight_.current !== linesHeight) {
 				// To avoid cancelling intentional scroll position changes,

packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useContextMenu.ts

@@ -3,7 +3,8 @@ import { PluginStates } from '@joplin/lib/services/plugins/reducer';
 import SpellCheckerService from '@joplin/lib/services/spellChecker/SpellCheckerService';
 import { useEffect } from 'react';
 import bridge from '../../../../../services/bridge';
-import { menuItems, ContextMenuOptions, ContextMenuItemType } from '../../../utils/contextMenu';
+import { ContextMenuOptions, ContextMenuItemType } from '../../../utils/contextMenuUtils';
+import { menuItems } from '../../../utils/contextMenu';
 import MenuUtils from '@joplin/lib/services/commands/MenuUtils';
 import CommandService from '@joplin/lib/services/CommandService';
 import convertToScreenCoordinates from '../../../../utils/convertToScreenCoordinates';
@@ -67,6 +68,8 @@ export default function(editor: any, plugins: PluginStates, dispatch: Function)
 			contextMenuActionOptions.current = {
 				itemType,
 				resourceId,
+				filename: null,
+				mime: null,
 				linkToCopy,
 				textToCopy: null,
 				htmlToCopy: editor.selection ? editor.selection.getContent() : '',

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

@@ -93,11 +93,11 @@ const declarations: CommandDeclaration[] = [
 	},
 	{
 		name: 'editor.undo',
-		label: () => _('Undo'),
+		label: () => _('Editor: %s', _('Undo')),
 	},
 	{
 		name: 'editor.redo',
-		label: () => _('Redo'),
+		label: () => _('Editor: %s', _('Redo')),
 	},
 	{
 		name: 'editor.indentLess',

packages/app-desktop/gui/NoteEditor/utils/contextMenu.test.ts

@@ -0,0 +1,41 @@
+/** @jest-environment ./loadResources.testEnv */
+// eslint-disable-next-line strict, lines-around-directive
+'use strict';
+// use strict is necessary here so that typescript doesn't place "use strict" above the jest docblock
+// https://github.com/microsoft/TypeScript/issues/15819#issuecomment-782235619
+
+import { textToDataUri, svgUriToPng } from './contextMenuUtils';
+
+jest.mock('@joplin/lib/models/Resource');
+
+describe('contextMenu', () => {
+	it('should provide proper copy path', async () => {
+		const testCase = [
+			'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">test</svg>',
+			'image/svg+xml',
+		];
+		const expectedText = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIj50ZXN0PC9zdmc+';
+		expect(textToDataUri(testCase[0], testCase[1])).toBe(expectedText);
+	});
+
+	it('should convert to png binary', async () => {
+		const testCase = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiIGhlaWdodD0iMTAwcHgiIHdpZHRoPSIxMDBweCI+CjxnPgoJPHBhdGggZD0iTTI4LjEsMzYuNmM0LjYsMS45LDEyLjIsMS42LDIwLjksMS4xYzguOS0wLjQsMTktMC45LDI4LjksMC45YzYuMywxLjIsMTEuOSwzLjEsMTYuOCw2Yy0xLjUtMTIuMi03LjktMjMuNy0xOC42LTMxLjMgICBjLTQuOS0wLjItOS45LDAuMy0xNC44LDEuNEM0Ny44LDE3LjksMzYuMiwyNS42LDI4LjEsMzYuNnoiLz4KCTxwYXRoIGQ9Ik03MC4zLDkuOEM1Ny41LDMuNCw0Mi44LDMuNiwzMC41LDkuNWMtMyw2LTguNCwxOS42LTUuMywyNC45YzguNi0xMS43LDIwLjktMTkuOCwzNS4yLTIzLjFDNjMuNywxMC41LDY3LDEwLDcwLjMsOS44eiIvPgoJPHBhdGggZD0iTTE2LjUsNTEuM2MwLjYtMS43LDEuMi0zLjQsMi01LjFjLTMuOC0zLjQtNy41LTctMTEtMTAuOGMtMi4xLDYuMS0yLjgsMTIuNS0yLjMsMTguN0M5LjYsNTEuMSwxMy40LDUwLjIsMTYuNSw1MS4zeiIvPgoJPHBhdGggZD0iTTksMzEuNmMzLjUsMy45LDcuMiw3LjYsMTEuMSwxMS4xYzAuOC0xLjYsMS43LTMuMSwyLjYtNC42YzAuMS0wLjIsMC4zLTAuNCwwLjQtMC42Yy0yLjktMy4zLTMuMS05LjItMC42LTE3LjYgICBjMC44LTIuNywxLjgtNS4zLDIuNy03LjRjLTUuMiwzLjQtOS44LDgtMTMuMywxMy43QzEwLjgsMjcuOSw5LjgsMjkuNyw5LDMxLjZ6Ii8+Cgk8cGF0aCBkPSJNMTUuNCw1NC43Yy0yLjYtMS02LjEsMC43LTkuNywzLjRjMS4yLDYuNiwzLjksMTMsOCwxOC41QzEzLDY5LjMsMTMuNSw2MS44LDE1LjQsNTQuN3oiLz4KCTxwYXRoIGQ9Ik0zOS44LDU3LjZDNTQuMyw2Ni43LDcwLDczLDg2LjUsNzYuNGMwLjYtMC44LDEuMS0xLjYsMS43LTIuNWM0LjgtNy43LDctMTYuMyw2LjgtMjQuOGMtMTMuOC05LjMtMzEuMy04LjQtNDUuOC03LjcgICBjLTkuNSwwLjUtMTcuOCwwLjktMjMuMi0xLjdjLTAuMSwwLjEtMC4yLDAuMy0wLjMsMC40Yy0xLDEuNy0yLDMuNC0yLjksNS4xQzI4LjIsNDkuNywzMy44LDUzLjksMzkuOCw1Ny42eiIvPgoJPHBhdGggZD0iTTI2LjIsODguMmMzLjMsMiw2LjcsMy42LDEwLjIsNC43Yy0zLjUtNi4yLTYuMy0xMi42LTguOC0xOC41Yy0zLjEtNy4yLTUuOC0xMy41LTktMTcuMmMtMS45LDgtMiwxNi40LTAuMywyNC43ICAgQzIwLjYsODQuMiwyMy4yLDg2LjMsMjYuMiw4OC4yeiIvPgoJPHBhdGggZD0iTTMwLjksNzNjMi45LDYuOCw2LjEsMTQuNCwxMC41LDIxLjJjMTUuNiwzLDMyLTIuMyw0Mi42LTE0LjZDNjcuNyw3Niw1Mi4yLDY5LjYsMzcuOSw2MC43QzMyLDU3LDI2LjUsNTMsMjEuMyw0OC42ICAgYy0wLjYsMS41LTEuMiwzLTEuNyw0LjZDMjQuMSw1Ny4xLDI3LjMsNjQuNSwzMC45LDczeiIvPgo8L2c+Cjwvc3ZnPg==';
+		const png = await svgUriToPng(document, testCase);
+		expect(png).toBeInstanceOf(Uint8Array);
+	});
+
+	it('should throw error on invalid svg uri', async () => {
+		// We are mocking console.error since jsdom throws errors to console when we try to load an invalid img
+		// https://github.com/facebook/jest/pull/5267#issuecomment-356605468
+		const consoleError = console.error;
+		console.error = jest.fn();
+		const testCases: Array<string> = [
+			'data:image/svg+xml;base64,error',
+			'invalid',
+		];
+		for (const testCase of testCases) {
+			await expect(svgUriToPng(document, testCase)).rejects.toBeInstanceOf(Error);
+		}
+		console.error = consoleError;
+	});
+});

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

@@ -2,6 +2,7 @@ import ResourceEditWatcher from '@joplin/lib/services/ResourceEditWatcher/index'
 import { _ } from '@joplin/lib/locale';
 import { copyHtmlToClipboard } from './clipboardUtils';
 import bridge from '../../../services/bridge';
+import { ContextMenuItemType, ContextMenuOptions, ContextMenuItems, resourceInfo, textToDataUri, svgUriToPng } from './contextMenuUtils';
 const Menu = bridge().Menu;
 const MenuItem = bridge().MenuItem;
 import Resource from '@joplin/lib/models/Resource';
@@ -10,43 +11,10 @@ import BaseModel from '@joplin/lib/BaseModel';
 import { processPastedHtml } from './resourceHandling';
 import { NoteEntity, ResourceEntity } from '@joplin/lib/services/database/types';
 const fs = require('fs-extra');
+const { writeFile } = require('fs-extra');
 const { clipboard } = require('electron');
 const { toSystemSlashes } = require('@joplin/lib/path-utils');
 
-export enum ContextMenuItemType {
-	None = '',
-	Image = 'image',
-	Resource = 'resource',
-	Text = 'text',
-	Link = 'link',
-}
-
-export interface ContextMenuOptions {
-	itemType: ContextMenuItemType;
-	resourceId: string;
-	linkToCopy: string;
-	textToCopy: string;
-	htmlToCopy: string;
-	insertContent: Function;
-	isReadOnly?: boolean;
-}
-
-interface ContextMenuItem {
-	label: string;
-	onAction: Function;
-	isActive: Function;
-}
-
-interface ContextMenuItems {
-	[key: string]: ContextMenuItem;
-}
-
-async function resourceInfo(options: ContextMenuOptions): Promise<any> {
-	const resource = options.resourceId ? await Resource.load(options.resourceId) : null;
-	const resourcePath = resource ? Resource.fullPath(resource) : '';
-	return { resource, resourcePath };
-}
-
 function handleCopyToClipboard(options: ContextMenuOptions) {
 	if (options.textToCopy) {
 		clipboard.writeText(options.textToCopy);
@@ -55,6 +23,12 @@ function handleCopyToClipboard(options: ContextMenuOptions) {
 	}
 }
 
+async function saveFileData(data: any, filename: string) {
+	const newFilePath = await bridge().showSaveDialog({ defaultPath: filename });
+	if (!newFilePath) return;
+	await writeFile(newFilePath, data);
+}
+
 export async function openItemById(itemId: string, dispatch: Function, hash: string = '') {
 
 	const item = await BaseItem.loadItemById(itemId);
@@ -100,7 +74,7 @@ export function menuItems(dispatch: Function): ContextMenuItems {
 			onAction: async (options: ContextMenuOptions) => {
 				await openItemById(options.resourceId, dispatch);
 			},
-			isActive: (itemType: ContextMenuItemType) => itemType === ContextMenuItemType.Image || itemType === ContextMenuItemType.Resource,
+			isActive: (itemType: ContextMenuItemType, options: ContextMenuOptions) => !options.textToCopy && (itemType === ContextMenuItemType.Image || itemType === ContextMenuItemType.Resource),
 		},
 		saveAs: {
 			label: _('Save as...'),
@@ -112,7 +86,32 @@ export function menuItems(dispatch: Function): ContextMenuItems {
 				if (!filePath) return;
 				await fs.copy(resourcePath, filePath);
 			},
-			isActive: (itemType: ContextMenuItemType) => itemType === ContextMenuItemType.Image || itemType === ContextMenuItemType.Resource,
+			// We handle images received as text seperately as it can be saved in multiple formats
+			isActive: (itemType: ContextMenuItemType, options: ContextMenuOptions) => !options.textToCopy && (itemType === ContextMenuItemType.Image || itemType === ContextMenuItemType.Resource),
+		},
+		saveAsSvg: {
+			label: _('Save as SVG'),
+			onAction: async (options: ContextMenuOptions) => {
+				await saveFileData(options.textToCopy, options.filename);
+			},
+			isActive: (itemType: ContextMenuItemType, options: ContextMenuOptions) => !!options.textToCopy && itemType === ContextMenuItemType.Image && options.mime?.startsWith('image/svg'),
+		},
+		saveAsPng: {
+			label: _('Save as PNG'),
+			onAction: async (options: ContextMenuOptions) => {
+				// First convert it to png then save
+				if (options.mime != 'image/svg+xml') {
+					throw new Error(`Unsupported image type: ${options.mime}`);
+				}
+				if (!options.filename) {
+					throw new Error('Filename is needed to save as png');
+				}
+				const dataUri = textToDataUri(options.textToCopy, options.mime);
+				const png = await svgUriToPng(document, dataUri);
+				const filename = options.filename.replace('.svg', '.png');
+				await saveFileData(png, filename);
+			},
+			isActive: (itemType: ContextMenuItemType, options: ContextMenuOptions) => !!options.textToCopy && itemType === ContextMenuItemType.Image && options.mime?.startsWith('image/svg'),
 		},
 		revealInFolder: {
 			label: _('Reveal file in folder'),
@@ -120,13 +119,20 @@ export function menuItems(dispatch: Function): ContextMenuItems {
 				const { resourcePath } = await resourceInfo(options);
 				bridge().showItemInFolder(resourcePath);
 			},
-			isActive: (itemType: ContextMenuItemType) => itemType === ContextMenuItemType.Image || itemType === ContextMenuItemType.Resource,
+			isActive: (itemType: ContextMenuItemType, options: ContextMenuOptions) => !options.textToCopy && itemType === ContextMenuItemType.Image || itemType === ContextMenuItemType.Resource,
 		},
 		copyPathToClipboard: {
 			label: _('Copy path to clipboard'),
 			onAction: async (options: ContextMenuOptions) => {
-				const { resourcePath } = await resourceInfo(options);
-				clipboard.writeText(toSystemSlashes(resourcePath));
+				let path = '';
+				if (options.textToCopy && options.mime) {
+					path = textToDataUri(options.textToCopy, options.mime);
+				} else {
+					const { resourcePath } = await resourceInfo(options);
+					if (resourcePath) path = toSystemSlashes(resourcePath);
+				}
+				if (!path) return;
+				clipboard.writeText(path);
 			},
 			isActive: (itemType: ContextMenuItemType) => itemType === ContextMenuItemType.Image || itemType === ContextMenuItemType.Resource,
 		},
@@ -137,7 +143,7 @@ export function menuItems(dispatch: Function): ContextMenuItems {
 				const image = bridge().createImageFromPath(resourcePath);
 				clipboard.writeImage(image);
 			},
-			isActive: (itemType: ContextMenuItemType) => itemType === ContextMenuItemType.Image,
+			isActive: (itemType: ContextMenuItemType, options: ContextMenuOptions) => !options.textToCopy && itemType === ContextMenuItemType.Image,
 		},
 		cut: {
 			label: _('Cut'),
@@ -145,14 +151,14 @@ export function menuItems(dispatch: Function): ContextMenuItems {
 				handleCopyToClipboard(options);
 				options.insertContent('');
 			},
-			isActive: (_itemType: ContextMenuItemType, options: ContextMenuOptions) => !options.isReadOnly && (!!options.textToCopy || !!options.htmlToCopy),
+			isActive: (itemType: ContextMenuItemType, options: ContextMenuOptions) => itemType != ContextMenuItemType.Image && (!options.isReadOnly && (!!options.textToCopy || !!options.htmlToCopy)),
 		},
 		copy: {
 			label: _('Copy'),
 			onAction: async (options: ContextMenuOptions) => {
 				handleCopyToClipboard(options);
 			},
-			isActive: (_itemType: ContextMenuItemType, options: ContextMenuOptions) => !!options.textToCopy || !!options.htmlToCopy,
+			isActive: (itemType: ContextMenuItemType, options: ContextMenuOptions) => itemType != ContextMenuItemType.Image && (!!options.textToCopy || !!options.htmlToCopy),
 		},
 		paste: {
 			label: _('Paste'),
@@ -184,7 +190,6 @@ export default async function contextMenu(options: ContextMenuOptions, dispatch:
 	const items = menuItems(dispatch);
 
 	if (!('readyOnly' in options)) options.isReadOnly = true;
-
 	for (const itemKey in items) {
 		const item = items[itemKey];
 

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

@@ -0,0 +1,92 @@
+import Resource from '@joplin/lib/models/Resource';
+
+export enum ContextMenuItemType {
+	None = '',
+	Image = 'image',
+	Resource = 'resource',
+	Text = 'text',
+	Link = 'link',
+}
+
+export interface ContextMenuOptions {
+	itemType: ContextMenuItemType;
+	resourceId: string;
+	mime: string;
+	filename: string;
+	linkToCopy: string;
+	textToCopy: string;
+	htmlToCopy: string;
+	insertContent: Function;
+	isReadOnly?: boolean;
+}
+
+export interface ContextMenuItem {
+	label: string;
+	onAction: Function;
+	isActive: Function;
+}
+
+export interface ContextMenuItems {
+	[key: string]: ContextMenuItem;
+}
+
+export async function resourceInfo(options: ContextMenuOptions) {
+	const resource = options.resourceId ? await Resource.load(options.resourceId) : null;
+	const resourcePath = resource ? Resource.fullPath(resource) : null;
+	const filename = resource ? (resource.filename ? resource.filename : resource.title) : options.filename ? options.filename : '';
+	return { resource, resourcePath, filename };
+}
+
+export function textToDataUri(text: string, mime: string): string {
+	return `data:${mime};base64,${Buffer.from(text).toString('base64')}`;
+}
+
+export const svgUriToPng = (document: Document, svg: string) => {
+	return new Promise<Uint8Array>((resolve, reject) => {
+		let canvas: HTMLCanvasElement;
+		let img: HTMLImageElement;
+
+		const cleanUpAndReject = (e: Error) => {
+			if (canvas) canvas.remove();
+			if (img) img.remove();
+			return reject(e);
+		};
+
+		try {
+			img = document.createElement('img');
+			if (!img) throw new Error('Failed to create img element');
+		} catch (e) {
+			return cleanUpAndReject(e);
+		}
+
+		img.onload = function() {
+			try {
+				canvas = document.createElement('canvas');
+				if (!canvas) throw new Error('Failed to create canvas element');
+				canvas.width = img.width;
+				canvas.height = img.height;
+				const ctx = canvas.getContext('2d');
+				if (!ctx) throw new Error('Failed to get context');
+				ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);
+				const pngUri = canvas.toDataURL('image/png');
+				if (!pngUri) throw new Error('Failed to generate png uri');
+				const pngBase64 = pngUri.split(',')[1];
+				const byteString = atob(pngBase64);
+				// write the bytes of the string to a typed array
+				const buff = new Uint8Array(byteString.length);
+				for (let i = 0; i < byteString.length; i++) {
+					buff[i] = byteString.charCodeAt(i);
+				}
+				canvas.remove();
+				img.remove();
+				resolve(buff);
+			} catch (err) {
+				cleanUpAndReject(err);
+			}
+		};
+		img.onerror = function(e) {
+			cleanUpAndReject(new Error(e.toString()));
+		};
+		img.src = svg;
+	});
+};

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

@@ -35,6 +35,8 @@ export default function useMessageHandler(scrollWhenReady: any, setScrollWhenRea
 			const menu = await contextMenu({
 				itemType: arg0 && arg0.type,
 				resourceId: arg0.resourceId,
+				filename: arg0.filename,
+				mime: arg0.mime,
 				textToCopy: arg0.textToCopy,
 				linkToCopy: arg0.linkToCopy || null,
 				htmlToCopy: '',

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

@@ -92,6 +92,7 @@ export default function useNoteSearchBar() {
 				selectedIndex: localSearch.selectedIndex,
 				separateWordSearch: false,
 				searchTimestamp: localSearch.timestamp,
+				withSelection: true,
 			},
 			keywords: [
 				{

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

@@ -4,6 +4,7 @@ interface SearchMarkersOptions {
 	searchTimestamp: number;
 	selectedIndex: number;
 	separateWordSearch: boolean;
+	withSelection?: boolean;
 }
 
 export interface SearchMarkers {

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

@@ -1,3 +1,5 @@
+import * as React from 'react';
+import { useMemo, useEffect, useState, useRef, useCallback } from 'react';
 import { AppState } from '../../app.reducer';
 import eventManager from '@joplin/lib/eventManager';
 import NoteListUtils from '../utils/NoteListUtils';
@@ -11,12 +13,12 @@ import CommandService from '@joplin/lib/services/CommandService';
 import shim from '@joplin/lib/shim';
 import styled from 'styled-components';
 import { themeStyle } from '@joplin/lib/theme';
-const React = require('react');
-
 const { ItemList } = require('../ItemList.min.js');
 const { connect } = require('react-redux');
 import Note from '@joplin/lib/models/Note';
 import Folder from '@joplin/lib/models/Folder';
+import { Props } from './types';
+import usePrevious from '../hooks/usePrevious';
 
 const commands = [
 	require('./commands/focusElementNoteList'),
@@ -29,50 +31,48 @@ const StyledRoot = styled.div`
 	border-right: 1px solid ${(props: any) => props.theme.dividerColor};
 `;
 
-class NoteListComponent extends React.Component {
-	constructor() {
-		super();
+const itemAnchorRefs_: any = {
+	current: {},
+};
 
-		CommandService.instance().componentRegisterCommands(this, commands);
+export const itemAnchorRef = (itemId: string) => {
+	if (itemAnchorRefs_.current[itemId] && itemAnchorRefs_.current[itemId].current) return itemAnchorRefs_.current[itemId].current;
+	return null;
+};
 
-		this.itemHeight = 34;
+const NoteListComponent = (props: Props) => {
+	const [dragOverTargetNoteIndex, setDragOverTargetNoteIndex] = useState(null);
+	const [width, setWidth] = useState(0);
+	const [, setHeight] = useState(0);
 
-		this.state = {
-			dragOverTargetNoteIndex: null,
-			width: 0,
-			height: 0,
+	useEffect(() => {
+		itemAnchorRefs_.current = {};
+		CommandService.instance().registerCommands(commands);
+
+		return () => {
+			itemAnchorRefs_.current = {};
+			CommandService.instance().unregisterCommands(commands);
 		};
+	}, []);
 
-		this.noteListRef = React.createRef();
-		this.itemListRef = React.createRef();
-		this.itemAnchorRefs_ = {};
+	const itemHeight = 34;
 
-		this.renderItem = this.renderItem.bind(this);
-		this.onKeyDown = this.onKeyDown.bind(this);
-		this.noteItem_titleClick = this.noteItem_titleClick.bind(this);
-		this.noteItem_noteDragOver = this.noteItem_noteDragOver.bind(this);
-		this.noteItem_noteDrop = this.noteItem_noteDrop.bind(this);
-		this.noteItem_checkboxClick = this.noteItem_checkboxClick.bind(this);
-		this.noteItem_dragStart = this.noteItem_dragStart.bind(this);
-		this.onGlobalDrop_ = this.onGlobalDrop_.bind(this);
-		this.registerGlobalDragEndEvent_ = this.registerGlobalDragEndEvent_.bind(this);
-		this.unregisterGlobalDragEndEvent_ = this.unregisterGlobalDragEndEvent_.bind(this);
-		this.itemContextMenu = this.itemContextMenu.bind(this);
-		this.resizableLayout_resize = this.resizableLayout_resize.bind(this);
-	}
+	const focusItemIID_ = useRef<any>(null);
+	const noteListRef = useRef(null);
+	const itemListRef = useRef(null);
 
-	style() {
-		if (this.styleCache_ && this.styleCache_[this.props.themeId]) return this.styleCache_[this.props.themeId];
+	let globalDragEndEventRegistered_ = false;
 
-		const theme = themeStyle(this.props.themeId);
+	const style = useMemo(() => {
+		const theme = themeStyle(props.themeId);
 
-		const style = {
+		return {
 			root: {
 				backgroundColor: theme.backgroundColor,
 			},
 			listItem: {
 				maxWidth: '100%',
-				height: this.itemHeight,
+				height: itemHeight,
 				boxSizing: 'border-box',
 				display: 'flex',
 				alignItems: 'stretch',
@@ -99,76 +99,71 @@ class NoteListComponent extends React.Component {
 				textDecoration: 'line-through',
 			},
 		};
+	}, [props.themeId, itemHeight]);
 
-		this.styleCache_ = {};
-		this.styleCache_[this.props.themeId] = style;
-
-		return style;
-	}
-
-	itemContextMenu(event: any) {
+	const itemContextMenu = useCallback((event: any) => {
 		const currentItemId = event.currentTarget.getAttribute('data-id');
 		if (!currentItemId) return;
 
 		let noteIds = [];
-		if (this.props.selectedNoteIds.indexOf(currentItemId) < 0) {
+		if (props.selectedNoteIds.indexOf(currentItemId) < 0) {
 			noteIds = [currentItemId];
 		} else {
-			noteIds = this.props.selectedNoteIds;
+			noteIds = props.selectedNoteIds;
 		}
 
 		if (!noteIds.length) return;
 
 		const menu = NoteListUtils.makeContextMenu(noteIds, {
-			notes: this.props.notes,
-			dispatch: this.props.dispatch,
-			watchedNoteFiles: this.props.watchedNoteFiles,
-			plugins: this.props.plugins,
-			inConflictFolder: this.props.selectedFolderId === Folder.conflictFolderId(),
-			customCss: this.props.customCss,
+			notes: props.notes,
+			dispatch: props.dispatch,
+			watchedNoteFiles: props.watchedNoteFiles,
+			plugins: props.plugins,
+			inConflictFolder: props.selectedFolderId === Folder.conflictFolderId(),
+			customCss: props.customCss,
 		});
 
 		menu.popup(bridge().window());
-	}
+	}, [props.selectedNoteIds, props.notes, props.dispatch, props.watchedNoteFiles,props.plugins, props.selectedFolderId, props.customCss]);
 
-	onGlobalDrop_() {
-		this.unregisterGlobalDragEndEvent_();
-		this.setState({ dragOverTargetNoteIndex: null });
-	}
+	const onGlobalDrop_ = () => {
+		unregisterGlobalDragEndEvent_();
+		setDragOverTargetNoteIndex(null);
+	};
 
-	registerGlobalDragEndEvent_() {
-		if (this.globalDragEndEventRegistered_) return;
-		this.globalDragEndEventRegistered_ = true;
-		document.addEventListener('dragend', this.onGlobalDrop_);
-	}
+	const registerGlobalDragEndEvent_ = () => {
+		if (globalDragEndEventRegistered_) return;
+		globalDragEndEventRegistered_ = true;
+		document.addEventListener('dragend', onGlobalDrop_);
+	};
 
-	unregisterGlobalDragEndEvent_() {
-		this.globalDragEndEventRegistered_ = false;
-		document.removeEventListener('dragend', this.onGlobalDrop_);
-	}
+	const unregisterGlobalDragEndEvent_ = () => {
+		globalDragEndEventRegistered_ = false;
+		document.removeEventListener('dragend', onGlobalDrop_);
+	};
 
-	dragTargetNoteIndex_(event: any) {
-		return Math.abs(Math.round((event.clientY - this.itemListRef.current.offsetTop() + this.itemListRef.current.offsetScroll()) / this.itemHeight));
-	}
+	const dragTargetNoteIndex_ = (event: any) => {
+		return Math.abs(Math.round((event.clientY - itemListRef.current.offsetTop() + itemListRef.current.offsetScroll()) / itemHeight));
+	};
 
-	noteItem_noteDragOver(event: any) {
-		if (this.props.notesParentType !== 'Folder') return;
+	const noteItem_noteDragOver = (event: any) => {
+		if (props.notesParentType !== 'Folder') return;
 
 		const dt = event.dataTransfer;
 
 		if (dt.types.indexOf('text/x-jop-note-ids') >= 0) {
 			event.preventDefault();
-			const newIndex = this.dragTargetNoteIndex_(event);
-			if (this.state.dragOverTargetNoteIndex === newIndex) return;
-			this.registerGlobalDragEndEvent_();
-			this.setState({ dragOverTargetNoteIndex: newIndex });
+			const newIndex = dragTargetNoteIndex_(event);
+			if (dragOverTargetNoteIndex === newIndex) return;
+			registerGlobalDragEndEvent_();
+			setDragOverTargetNoteIndex(newIndex);
 		}
-	}
+	};
 
-	async noteItem_noteDrop(event: any) {
-		if (this.props.notesParentType !== 'Folder') return;
+	const noteItem_noteDrop = async (event: any) => {
+		if (props.notesParentType !== 'Folder') return;
 
-		if (this.props.noteSortOrder !== 'order') {
+		if (props.noteSortOrder !== 'order') {
 			const doIt = await bridge().showConfirmMessageBox(_('To manually sort the notes, the sort order must be changed to "%s" in the menu "%s" > "%s"', _('Custom order'), _('View'), _('Sort notes by')), {
 				buttons: [_('Do it now'), _('Cancel')],
 			});
@@ -181,17 +176,17 @@ class NoteListComponent extends React.Component {
 		// TODO: check that parent type is folder
 
 		const dt = event.dataTransfer;
-		this.unregisterGlobalDragEndEvent_();
-		this.setState({ dragOverTargetNoteIndex: null });
+		unregisterGlobalDragEndEvent_();
+		setDragOverTargetNoteIndex(null);
 
-		const targetNoteIndex = this.dragTargetNoteIndex_(event);
+		const targetNoteIndex = dragTargetNoteIndex_(event);
 		const noteIds = JSON.parse(dt.getData('text/x-jop-note-ids'));
 
-		void Note.insertNotesAt(this.props.selectedFolderId, noteIds, targetNoteIndex);
-	}
+		void Note.insertNotesAt(props.selectedFolderId, noteIds, targetNoteIndex);
+	};
 
 
-	async noteItem_checkboxClick(event: any, item: any) {
+	const noteItem_checkboxClick = async (event: any, item: any) => {
 		const checked = event.target.checked;
 		const newNote = {
 			id: item.id,
@@ -199,37 +194,37 @@ class NoteListComponent extends React.Component {
 		};
 		await Note.save(newNote, { userSideValidation: true });
 		eventManager.emit('todoToggle', { noteId: item.id, note: newNote });
-	}
+	};
 
-	async noteItem_titleClick(event: any, item: any) {
+	const noteItem_titleClick = async (event: any, item: any) => {
 		if (event.ctrlKey || event.metaKey) {
 			event.preventDefault();
-			this.props.dispatch({
+			props.dispatch({
 				type: 'NOTE_SELECT_TOGGLE',
 				id: item.id,
 			});
 		} else if (event.shiftKey) {
 			event.preventDefault();
-			this.props.dispatch({
+			props.dispatch({
 				type: 'NOTE_SELECT_EXTEND',
 				id: item.id,
 			});
 		} else {
-			this.props.dispatch({
+			props.dispatch({
 				type: 'NOTE_SELECT',
 				id: item.id,
 			});
 		}
-	}
+	};
 
-	noteItem_dragStart(event: any) {
+	const noteItem_dragStart = (event: any) => {
 		let noteIds = [];
 
 		// Here there is two cases:
 		// - If multiple notes are selected, we drag the group
 		// - If only one note is selected, we drag the note that was clicked on (which might be different from the currently selected note)
-		if (this.props.selectedNoteIds.length >= 2) {
-			noteIds = this.props.selectedNoteIds;
+		if (props.selectedNoteIds.length >= 2) {
+			noteIds = props.selectedNoteIds;
 		} else {
 			const clickedNoteId = event.currentTarget.getAttribute('data-id');
 			if (clickedNoteId) noteIds.push(clickedNoteId);
@@ -240,61 +235,66 @@ class NoteListComponent extends React.Component {
 		event.dataTransfer.setDragImage(new Image(), 1, 1);
 		event.dataTransfer.clearData();
 		event.dataTransfer.setData('text/x-jop-note-ids', JSON.stringify(noteIds));
-	}
+	};
 
-	renderItem(item: any, index: number) {
+	const renderItem = useCallback((item: any, index: number) => {
 		const highlightedWords = () => {
-			if (this.props.notesParentType === 'Search') {
-				const query = BaseModel.byId(this.props.searches, this.props.selectedSearchId);
+			if (props.notesParentType === 'Search') {
+				const query = BaseModel.byId(props.searches, props.selectedSearchId);
 				if (query) {
-					return this.props.highlightedWords;
+					return props.highlightedWords;
 				}
 			}
 			return [];
 		};
 
-		if (!this.itemAnchorRefs_[item.id]) this.itemAnchorRefs_[item.id] = React.createRef();
-		const ref = this.itemAnchorRefs_[item.id];
+		if (!itemAnchorRefs_.current[item.id]) itemAnchorRefs_.current[item.id] = React.createRef();
+		const ref = itemAnchorRefs_.current[item.id];
 
 		return <NoteListItem
 			ref={ref}
 			key={item.id}
-			style={this.style()}
+			style={style}
 			item={item}
 			index={index}
-			themeId={this.props.themeId}
-			width={this.state.width}
-			height={this.itemHeight}
-			dragItemIndex={this.state.dragOverTargetNoteIndex}
+			themeId={props.themeId}
+			width={width}
+			height={itemHeight}
+			dragItemIndex={dragOverTargetNoteIndex}
 			highlightedWords={highlightedWords()}
-			isProvisional={this.props.provisionalNoteIds.includes(item.id)}
-			isSelected={this.props.selectedNoteIds.indexOf(item.id) >= 0}
-			isWatched={this.props.watchedNoteFiles.indexOf(item.id) < 0}
-			itemCount={this.props.notes.length}
-			onCheckboxClick={this.noteItem_checkboxClick}
-			onDragStart={this.noteItem_dragStart}
-			onNoteDragOver={this.noteItem_noteDragOver}
-			onNoteDrop={this.noteItem_noteDrop}
-			onTitleClick={this.noteItem_titleClick}
-			onContextMenu={this.itemContextMenu}
+			isProvisional={props.provisionalNoteIds.includes(item.id)}
+			isSelected={props.selectedNoteIds.indexOf(item.id) >= 0}
+			isWatched={props.watchedNoteFiles.indexOf(item.id) < 0}
+			itemCount={props.notes.length}
+			onCheckboxClick={noteItem_checkboxClick}
+			onDragStart={noteItem_dragStart}
+			onNoteDragOver={noteItem_noteDragOver}
+			onNoteDrop={noteItem_noteDrop}
+			onTitleClick={noteItem_titleClick}
+			onContextMenu={itemContextMenu}
 		/>;
-	}
+	}, [style, props.themeId, width, itemHeight, dragOverTargetNoteIndex, props.provisionalNoteIds, props.selectedNoteIds, props.watchedNoteFiles,
+		props.notes,
+		props.notesParentType,
+		props.searches,
+		props.selectedSearchId,
+		props.highlightedWords,
+	]);
 
-	itemAnchorRef(itemId: string) {
-		if (this.itemAnchorRefs_[itemId] && this.itemAnchorRefs_[itemId].current) return this.itemAnchorRefs_[itemId].current;
-		return null;
-	}
+	const previousSelectedNoteIds = usePrevious(props.selectedNoteIds, []);
+	const previousNotes = usePrevious(props.notes, []);
+	const previousVisible = usePrevious(props.visible, false);
 
-	componentDidUpdate(prevProps: any) {
-		if (prevProps.selectedNoteIds !== this.props.selectedNoteIds && this.props.selectedNoteIds.length === 1) {
-			const id = this.props.selectedNoteIds[0];
-			const doRefocus = this.props.notes.length < prevProps.notes.length;
+	useEffect(() => {
+		if (previousSelectedNoteIds !== props.selectedNoteIds && props.selectedNoteIds.length === 1) {
+			const id = props.selectedNoteIds[0];
+			const doRefocus = props.notes.length < previousNotes.length;
 
-			for (let i = 0; i < this.props.notes.length; i++) {
-				if (this.props.notes[i].id === id) {
-					this.itemListRef.current.makeItemIndexVisible(i);
+			for (let i = 0; i < props.notes.length; i++) {
+				if (props.notes[i].id === id) {
+					itemListRef.current.makeItemIndexVisible(i);
 					if (doRefocus) {
-						const ref = this.itemAnchorRef(id);
+						const ref = itemAnchorRef(id);
 						if (ref) ref.focus();
 					}
 					break;
@@ -302,24 +302,24 @@ class NoteListComponent extends React.Component {
 			}
 		}
 
-		if (prevProps.visible !== this.props.visible) {
-			this.updateSizeState();
+		if (previousVisible !== props.visible) {
+			updateSizeState();
 		}
-	}
+	}, [previousSelectedNoteIds,previousNotes, previousVisible, props.selectedNoteIds, props.notes]);
 
-	scrollNoteIndex_(keyCode: any, ctrlKey: any, metaKey: any, noteIndex: any) {
+	const scrollNoteIndex_ = (keyCode: any, ctrlKey: any, metaKey: any, noteIndex: any) => {
 
 		if (keyCode === 33) {
 			// Page Up
-			noteIndex -= (this.itemListRef.current.visibleItemCount() - 1);
+			noteIndex -= (itemListRef.current.visibleItemCount() - 1);
 
 		} else if (keyCode === 34) {
 			// Page Down
-			noteIndex += (this.itemListRef.current.visibleItemCount() - 1);
+			noteIndex += (itemListRef.current.visibleItemCount() - 1);
 
 		} else if ((keyCode === 35 && ctrlKey) || (keyCode === 40 && metaKey)) {
 			// CTRL+End, CMD+Down
-			noteIndex = this.props.notes.length - 1;
+			noteIndex = props.notes.length - 1;
 
 		} else if ((keyCode === 36 && ctrlKey) || (keyCode === 38 && metaKey)) {
 			// CTRL+Home, CMD+Up
@@ -334,31 +334,31 @@ class NoteListComponent extends React.Component {
 			noteIndex += 1;
 		}
 		if (noteIndex < 0) noteIndex = 0;
-		if (noteIndex > this.props.notes.length - 1) noteIndex = this.props.notes.length - 1;
+		if (noteIndex > props.notes.length - 1) noteIndex = props.notes.length - 1;
 		return noteIndex;
-	}
+	};
 
-	async onKeyDown(event: any) {
+	const onKeyDown = async (event: any) => {
 		const keyCode = event.keyCode;
-		const noteIds = this.props.selectedNoteIds;
+		const noteIds = props.selectedNoteIds;
 
 		if (noteIds.length > 0 && (keyCode === 40 || keyCode === 38 || keyCode === 33 || keyCode === 34 || keyCode === 35 || keyCode == 36)) {
 			// DOWN / UP / PAGEDOWN / PAGEUP / END / HOME
 			const noteId = noteIds[0];
-			let noteIndex = BaseModel.modelIndexById(this.props.notes, noteId);
+			let noteIndex = BaseModel.modelIndexById(props.notes, noteId);
 
-			noteIndex = this.scrollNoteIndex_(keyCode, event.ctrlKey, event.metaKey, noteIndex);
+			noteIndex = scrollNoteIndex_(keyCode, event.ctrlKey, event.metaKey, noteIndex);
 
-			const newSelectedNote = this.props.notes[noteIndex];
+			const newSelectedNote = props.notes[noteIndex];
 
-			this.props.dispatch({
+			props.dispatch({
 				type: 'NOTE_SELECT',
 				id: newSelectedNote.id,
 			});
 
-			this.itemListRef.current.makeItemIndexVisible(noteIndex);
+			itemListRef.current.makeItemIndexVisible(noteIndex);
 
-			this.focusNoteId_(newSelectedNote.id);
+			focusNoteId_(newSelectedNote.id);
 
 			event.preventDefault();
 		}
@@ -373,7 +373,7 @@ class NoteListComponent extends React.Component {
 			// SPACE
 			event.preventDefault();
 
-			const notes = BaseModel.modelsByIds(this.props.notes, noteIds);
+			const notes = BaseModel.modelsByIds(props.notes, noteIds);
 			const todos = notes.filter((n: any) => !!n.is_todo);
 			if (!todos.length) return;
 
@@ -382,7 +382,7 @@ class NoteListComponent extends React.Component {
 				await Note.save(toggledTodo);
 			}
 
-			this.focusNoteId_(todos[0].id);
+			focusNoteId_(todos[0].id);
 		}
 
 		if (keyCode === 9) {
@@ -400,62 +400,63 @@ class NoteListComponent extends React.Component {
 			// Ctrl+A key
 			event.preventDefault();
 
-			this.props.dispatch({
+			props.dispatch({
 				type: 'NOTE_SELECT_ALL',
 			});
 		}
-	}
+	};
 
-	focusNoteId_(noteId: string) {
+	const focusNoteId_ = (noteId: string) => {
 		// - We need to focus the item manually otherwise focus might be lost when the
 		//   list is scrolled and items within it are being rebuilt.
 		// - We need to use an interval because when leaving the arrow pressed, the rendering
 		//   of items might lag behind and so the ref is not yet available at this point.
-		if (!this.itemAnchorRef(noteId)) {
-			if (this.focusItemIID_) shim.clearInterval(this.focusItemIID_);
-			this.focusItemIID_ = shim.setInterval(() => {
-				if (this.itemAnchorRef(noteId)) {
-					this.itemAnchorRef(noteId).focus();
-					shim.clearInterval(this.focusItemIID_);
-					this.focusItemIID_ = null;
+		if (!itemAnchorRef(noteId)) {
+			if (focusItemIID_.current) shim.clearInterval(focusItemIID_.current);
+			focusItemIID_.current = shim.setInterval(() => {
+				if (itemAnchorRef(noteId)) {
+					itemAnchorRef(noteId).focus();
+					shim.clearInterval(focusItemIID_.current);
+					focusItemIID_.current = null;
 				}
 			}, 10);
 		} else {
-			this.itemAnchorRef(noteId).focus();
+			itemAnchorRef(noteId).focus();
 		}
-	}
+	};
 
-	updateSizeState() {
-		this.setState({
-			width: this.noteListRef.current.clientWidth,
-			height: this.noteListRef.current.clientHeight,
-		});
-	}
+	const updateSizeState = () => {
+		setWidth(noteListRef.current.clientWidth);
+		setHeight(noteListRef.current.clientHeight);
+	};
 
-	resizableLayout_resize() {
-		this.updateSizeState();
-	}
+	const resizableLayout_resize = () => {
+		updateSizeState();
+	};
 
-	componentDidMount() {
-		this.props.resizableLayoutEventEmitter.on('resize', this.resizableLayout_resize);
-		this.updateSizeState();
-	}
+	useEffect(() => {
+		props.resizableLayoutEventEmitter.on('resize', resizableLayout_resize);
+		return () => {
+			props.resizableLayoutEventEmitter.off('resize', resizableLayout_resize);
+		};
+	}, [props.resizableLayoutEventEmitter]);
 
-	componentWillUnmount() {
-		if (this.focusItemIID_) {
-			shim.clearInterval(this.focusItemIID_);
-			this.focusItemIID_ = null;
-		}
+	useEffect(() => {
+		updateSizeState();
 
-		this.props.resizableLayoutEventEmitter.off('resize', this.resizableLayout_resize);
+		return () => {
+			if (focusItemIID_.current) {
+				shim.clearInterval(focusItemIID_.current);
+				focusItemIID_.current = null;
+			}
+			CommandService.instance().componentUnregisterCommands(commands);
+		};
+	}, []);
 
-		CommandService.instance().componentUnregisterCommands(commands);
-	}
+	const renderEmptyList = () => {
+		if (props.notes.length) return null;
 
-	renderEmptyList() {
-		if (this.props.notes.length) return null;
-
-		const theme = themeStyle(this.props.themeId);
+		const theme = themeStyle(props.themeId);
 		const padding = 10;
 		const emptyDivStyle = {
 			padding: `${padding}px`,
@@ -464,39 +465,35 @@ class NoteListComponent extends React.Component {
 			backgroundColor: theme.backgroundColor,
 			fontFamily: theme.fontFamily,
 		};
-		// emptyDivStyle.width = emptyDivStyle.width - padding * 2;
-		// emptyDivStyle.height = emptyDivStyle.height - padding * 2;
-		return <div style={emptyDivStyle}>{this.props.folders.length ? _('No notes in here. Create one by clicking on "New note".') : _('There is currently no notebook. Create one by clicking on "New notebook".')}</div>;
-	}
+		return <div style={emptyDivStyle}>{props.folders.length ? _('No notes in here. Create one by clicking on "New note".') : _('There is currently no notebook. Create one by clicking on "New notebook".')}</div>;
+	};
 
-	renderItemList(style: any) {
-		if (!this.props.notes.length) return null;
+	const renderItemList = () => {
+		if (!props.notes.length) return null;
 
 		return (
 			<ItemList
-				ref={this.itemListRef}
-				disabled={this.props.isInsertingNotes}
-				itemHeight={this.style().listItem.height}
+				ref={itemListRef}
+				disabled={props.isInsertingNotes}
+				itemHeight={style.listItem.height}
 				className={'note-list'}
-				items={this.props.notes}
-				style={style}
-				itemRenderer={this.renderItem}
-				onKeyDown={this.onKeyDown}
+				items={props.notes}
+				style={props.size}
+				itemRenderer={renderItem}
+				onKeyDown={onKeyDown}
 			/>
 		);
-	}
+	};
 
-	render() {
-		if (!this.props.size) throw new Error('props.size is required');
+	if (!props.size) throw new Error('props.size is required');
 
-		return (
-			<StyledRoot ref={this.noteListRef}>
-				{this.renderEmptyList()}
-				{this.renderItemList(this.props.size)}
-			</StyledRoot>
-		);
-	}
-}
+	return (
+		<StyledRoot ref={noteListRef}>
+			{renderEmptyList()}
+			{renderItemList()}
+		</StyledRoot>
+	);
+};
 
 const mapStateToProps = (state: AppState) => {
 	return {

packages/app-desktop/gui/NoteList/commands/focusElementNoteList.ts

@@ -1,6 +1,7 @@
 import { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
 import { _ } from '@joplin/lib/locale';
 import { stateUtils } from '@joplin/lib/reducer';
+import { itemAnchorRef } from '../NoteList';
 
 export const declaration: CommandDeclaration = {
 	name: 'focusElementNoteList',
@@ -8,13 +9,13 @@ export const declaration: CommandDeclaration = {
 	parentLabel: () => _('Focus'),
 };
 
-export const runtime = (comp: any): CommandRuntime => {
+export const runtime = (): CommandRuntime => {
 	return {
 		execute: async (context: CommandContext, noteId: string = null) => {
 			noteId = noteId || stateUtils.selectedNoteId(context.state);
 
 			if (noteId) {
-				const ref = comp.itemAnchorRef(noteId);
+				const ref = itemAnchorRef(noteId);
 				if (ref) ref.focus();
 			}
 		},

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

@@ -0,0 +1,24 @@
+import { FolderEntity, NoteEntity } from '@joplin/lib/services/database/types';
+import { PluginStates } from '@joplin/lib/services/plugins/reducer';
+
+export interface Props {
+	themeId: any;
+	selectedNoteIds: string[];
+	notes: NoteEntity[];
+	dispatch: Function;
+	watchedNoteFiles: any[];
+	plugins: PluginStates;
+	selectedFolderId: string;
+	customCss: string;
+	notesParentType: string;
+	noteSortOrder: string;
+	resizableLayoutEventEmitter: any;
+	isInsertingNotes: boolean;
+	folders: FolderEntity[];
+	size: any;
+	searches: any[];
+	selectedSearchId: string;
+	highlightedWords: string[];
+	provisionalNoteIds: string[];
+	visible: boolean;
+}

packages/app-desktop/gui/NoteListItem.tsx

@@ -110,7 +110,7 @@ function NoteListItem(props: NoteListItemProps, ref: any) {
 
 	let listItemTitleStyle = Object.assign({}, props.style.listItemTitle);
 	listItemTitleStyle.paddingLeft = !item.is_todo ? hPadding : 4;
-	if (item.is_shared) listItemTitleStyle.color = theme.colorWarn2;
+	if (item.is_shared) listItemTitleStyle.color = theme.colorWarn3;
 	if (item.is_todo && !!item.todo_completed) listItemTitleStyle = Object.assign(listItemTitleStyle, props.style.listItemTitleCompleted);
 
 	const displayTitle = Note.displayTitle(item);

packages/app-desktop/gui/PromptDialog.jsx

@@ -231,6 +231,13 @@ class PromptDialog extends React.Component {
 		}
 
 		const buttonComps = [];
+		if (buttonTypes.indexOf('create') >= 0) {
+			buttonComps.push(
+				<button key="create" disabled={!this.state.answer} style={styles.button} onClick={() => onClose(true, 'create')}>
+					{_('Create')}
+				</button>
+			);
+		}
 		if (buttonTypes.indexOf('ok') >= 0) {
 			buttonComps.push(
 				<button key="ok" disabled={!this.state.answer} style={styles.button} onClick={() => onClose(true, 'ok')}>

packages/app-desktop/gui/Root.tsx

@@ -228,7 +228,7 @@ class RootComponent extends React.Component<Props, any> {
 					<StyleSheetContainer themeId={this.props.themeId}></StyleSheetContainer>
 					<MenuBar/>
 					<GlobalStyle/>
-					<Navigator style={navigatorStyle} screens={screens} />
+					<Navigator style={navigatorStyle} screens={screens} className={`profile-${this.props.profileConfigCurrentProfileId}`} />
 					{this.renderModalMessage(this.modalDialogProps())}
 					{this.renderDialogs()}
 				</ThemeProvider>
@@ -245,6 +245,7 @@ const mapStateToProps = (state: AppState) => {
 		themeId: state.settings.theme,
 		needApiAuth: state.needApiAuth,
 		dialogs: state.dialogs,
+		profileConfigCurrentProfileId: state.profileConfig.currentProfileId,
 	};
 };
 

packages/app-desktop/gui/ShareNoteDialog.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import JoplinServerApi from '@joplin/lib/JoplinServerApi';
 import { _, _n } from '@joplin/lib/locale';
 import Note from '@joplin/lib/models/Note';
@@ -15,6 +15,7 @@ import Button from './Button/Button';
 import { connect } from 'react-redux';
 import { AppState } from '../app.reducer';
 import { getEncryptionEnabled } from '@joplin/lib/services/synchronizer/syncInfoUtils';
+import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
 const { clipboard } = require('electron');
 
 interface Props {
@@ -22,6 +23,7 @@ interface Props {
 	noteIds: Array<string>;
 	onClose: Function;
 	shares: StateShare[];
+	syncTargetId: number;
 }
 
 function styles_(props: Props) {
@@ -69,9 +71,10 @@ export function ShareNoteDialog(props: Props) {
 	console.info('Render ShareNoteDialog');
 
 	const [notes, setNotes] = useState<NoteEntity[]>([]);
+	const [recursiveShare, setRecursiveShare] = useState<boolean>(false);
 	const [sharesState, setSharesState] = useState<string>('unknown');
-	// const [shares, setShares] = useState<SharesMap>({});
 
+	const syncTargetInfo = useMemo(() => SyncTargetRegistry.infoById(props.syncTargetId), [props.syncTargetId]);
 	const noteCount = notes.length;
 	const theme = themeStyle(props.themeId);
 	const styles = styles_(props);
@@ -102,7 +105,7 @@ export function ShareNoteDialog(props: Props) {
 		clipboard.writeText(links.join('\n'));
 	};
 
-	const shareLinkButton_click = async () => {
+	const shareLinkButton_click = useCallback(async () => {
 		const service = ShareService.instance();
 
 		let hasSynced = false;
@@ -121,7 +124,7 @@ export function ShareNoteDialog(props: Props) {
 				const newShares: StateShare[] = [];
 
 				for (const note of notes) {
-					const share = await service.shareNote(note.id);
+					const share = await service.shareNote(note.id, recursiveShare);
 					newShares.push(share);
 				}
 
@@ -149,17 +152,7 @@ export function ShareNoteDialog(props: Props) {
 
 			break;
 		}
-	};
-
-	// const removeNoteButton_click = (event: any) => {
-	// 	const newNotes = [];
-	// 	for (let i = 0; i < notes.length; i++) {
-	// 		const n = notes[i];
-	// 		if (n.id === event.noteId) continue;
-	// 		newNotes.push(n);
-	// 	}
-	// 	setNotes(newNotes);
-	// };
+	}, [recursiveShare, notes]);
 
 	const unshareNoteButton_click = async (event: any) => {
 		await ShareService.instance().unshareNote(event.noteId);
@@ -171,22 +164,6 @@ export function ShareNoteDialog(props: Props) {
 			<Button tooltip={_('Unpublish note')} iconName="fas fa-share-alt" onClick={() => unshareNoteButton_click({ noteId: note.id })}/>
 		);
 
-		// const removeButton = notes.length <= 1 ? null : (
-		// 	<Button iconName="fa fa-times" onClick={() => removeNoteButton_click({ noteId: note.id })}/>
-		// );
-
-		// const unshareButton = !shares[note.id] ? null : (
-		// 	<button onClick={() => unshareNoteButton_click({ noteId: note.id })} style={styles.noteRemoveButton}>
-		// 		<i style={styles.noteRemoveButtonIcon} className={'fas fa-share-alt'}></i>
-		// 	</button>
-		// );
-
-		// const removeButton = notes.length <= 1 ? null : (
-		// 	<button onClick={() => removeNoteButton_click({ noteId: note.id })} style={styles.noteRemoveButton}>
-		// 		<i style={styles.noteRemoveButtonIcon} className={'fa fa-times'}></i>
-		// 	</button>
-		// );
-
 		return (
 			<div key={note.id} style={styles.note}>
 				<span style={styles.noteTitle}>{note.title}</span>{unshareButton}
@@ -214,11 +191,26 @@ export function ShareNoteDialog(props: Props) {
 		return <div style={theme.textStyle}>{_('Note: When a note is shared, it will no longer be encrypted on the server.')}<hr/></div>;
 	}
 
-	function renderContent() {
+	const onRecursiveShareChange = useCallback(() => {
+		setRecursiveShare(v => !v);
+	}, []);
+
+	const renderRecursiveShareCheckbox = () => {
+		if (!syncTargetInfo.supportsRecursiveLinkedNotes) return null;
+
 		return (
-			<div style={styles.root}>
+			<div className="form-input-group form-input-group-checkbox">
+				<input id="recursiveShare" name="recursiveShare" type="checkbox" checked={!!recursiveShare} onChange={onRecursiveShareChange} /> <label htmlFor="recursiveShare">{_('Also publish linked notes')}</label>
+			</div>
+		);
+	};
+
+	const renderContent = () => {
+		return (
+			<div style={styles.root} className="form">
 				<DialogTitle title={_('Publish Notes')}/>
 				{renderNoteList(notes)}
+				{renderRecursiveShareCheckbox()}
 				<button disabled={['creating', 'synchronizing'].indexOf(sharesState) >= 0} style={styles.copyShareLinkButton} onClick={shareLinkButton_click}>{_n('Copy Shareable Link', 'Copy Shareable Links', noteCount)}</button>
 				<div style={theme.textStyle}>{statusMessage(sharesState)}</div>
 				{renderEncryptionWarningMessage()}
@@ -230,7 +222,7 @@ export function ShareNoteDialog(props: Props) {
 				/>
 			</div>
 		);
-	}
+	};
 
 	return (
 		<Dialog renderContent={renderContent}/>
@@ -240,6 +232,7 @@ export function ShareNoteDialog(props: Props) {
 const mapStateToProps = (state: AppState) => {
 	return {
 		shares: state.shareService.shares.filter(s => !!s.note_id),
+		syncTargetId: state.settings['sync.target'],
 	};
 };
 

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

@@ -17,11 +17,12 @@ import Folder from '@joplin/lib/models/Folder';
 import Note from '@joplin/lib/models/Note';
 import Tag from '@joplin/lib/models/Tag';
 import Logger from '@joplin/lib/Logger';
-import { FolderEntity } from '@joplin/lib/services/database/types';
+import { FolderEntity, FolderIcon } from '@joplin/lib/services/database/types';
 import stateToWhenClauseContext from '../../services/commands/stateToWhenClauseContext';
 import { store } from '@joplin/lib/reducer';
 import PerFolderSortOrderService from '../../services/sortOrder/PerFolderSortOrderService';
 import { getFolderCallbackUrl, getTagCallbackUrl } from '@joplin/lib/callbackUrlUtils';
+import FolderIconBox from '../FolderIconBox';
 const { connect } = require('react-redux');
 const shared = require('@joplin/lib/components/shared/side-menu-shared.js');
 const { themeStyle } = require('@joplin/lib/theme');
@@ -77,6 +78,12 @@ function ExpandLink(props: any) {
 	);
 }
 
+const renderFolderIcon = (folderIcon: FolderIcon) => {
+	if (!folderIcon) return null;
+
+	return <div style={{ marginRight: 5, display: 'flex' }}><FolderIconBox folderIcon={folderIcon}/></div>;
+};
+
 function FolderItem(props: any) {
 	const { hasChildren, isExpanded, parentId, depth, selected, folderId, folderTitle, folderIcon, anchorRef, noteCount, onFolderDragStart_, onFolderDragOver_, onFolderDrop_, itemContextMenu, folderItem_click, onFolderToggleClick_, shareId } = props;
 
@@ -84,8 +91,6 @@ function FolderItem(props: any) {
 
 	const shareIcon = shareId && !parentId ? <StyledShareIcon className="fas fa-share-alt"></StyledShareIcon> : null;
 
-	const icon = folderIcon ? <span style={{ fontSize: 20, marginRight: 5 }}>{folderIcon.emoji}</span> : null;
-
 	return (
 		<StyledListItem depth={depth} selected={selected} className={`list-item-container list-item-depth-${depth} ${selected ? 'selected' : ''}`} onDragStart={onFolderDragStart_} onDragOver={onFolderDragOver_} onDrop={onFolderDrop_} draggable={true} data-folder-id={folderId}>
 			<ExpandLink themeId={props.themeId} hasChildren={hasChildren} folderId={folderId} onClick={onFolderToggleClick_} isExpanded={isExpanded}/>
@@ -105,7 +110,7 @@ function FolderItem(props: any) {
 				}}
 				onDoubleClick={onFolderToggleClick_}
 			>
-				{icon}<span className="title" style={{ lineHeight: 0 }}>{folderTitle}</span>
+				{renderFolderIcon(folderIcon)}<span className="title" style={{ lineHeight: 0 }}>{folderTitle}</span>
 				{shareIcon} {noteCountComp}
 			</StyledListItemAnchor>
 		</StyledListItem>

packages/app-desktop/gui/SyncWizard/Dialog.tsx

@@ -193,34 +193,36 @@ export default function(props: Props) {
 	const onJoplinCloudLoginClick = useCallback(async () => {
 		setJoplinCloudLoginInProgress(true);
 
+		let result = null;
+
 		try {
-			const result = await SyncTargetJoplinCloud.checkConfig({
+			result = await SyncTargetJoplinCloud.checkConfig({
 				password: () => joplinCloudPassword,
 				path: () => Setting.value('sync.10.path'),
 				userContentPath: () => Setting.value('sync.10.userContentPath'),
 				username: () => joplinCloudEmail,
 			});
-
-			if (result.ok) {
-				Setting.setValue('sync.target', 10);
-				Setting.setValue('sync.10.username', joplinCloudEmail);
-				Setting.setValue('sync.10.password', joplinCloudPassword);
-				await Setting.saveAll();
-
-				alert(_('Thank you! Your Joplin Cloud account is now setup and ready to use.'));
-
-				closeDialog(props.dispatch);
-
-				props.dispatch({
-					type: 'NAV_GO',
-					routeName: 'Main',
-				});
-			} else {
-				alert(_('There was an error setting up your Joplin Cloud account. Please verify your email and password and try again. Error was:\n\n%s', result.errorMessage));
-			}
 		} finally {
 			setJoplinCloudLoginInProgress(false);
 		}
+
+		if (result.ok) {
+			Setting.setValue('sync.target', 10);
+			Setting.setValue('sync.10.username', joplinCloudEmail);
+			Setting.setValue('sync.10.password', joplinCloudPassword);
+			await Setting.saveAll();
+
+			alert(_('Thank you! Your Joplin Cloud account is now setup and ready to use.'));
+
+			closeDialog(props.dispatch);
+
+			props.dispatch({
+				type: 'NAV_GO',
+				routeName: 'Main',
+			});
+		} else {
+			alert(_('There was an error setting up your Joplin Cloud account. Please verify your email and password and try again. Error was:\n\n%s', result.errorMessage));
+		}
 	}, [joplinCloudEmail, joplinCloudPassword, props.dispatch]);
 
 	const onJoplinCloudCreateAccountClick = useCallback(() => {
@@ -230,10 +232,10 @@ export default function(props: Props) {
 	function renderJoplinCloudLoginForm() {
 		return (
 			<JoplinCloudLoginForm>
-				<div>{_('Login below.')} <CreateAccountLink href="#" onClick={onJoplinCloudCreateAccountClick}>{_('Or create an account.')}</CreateAccountLink></div>
-				<FormLabel>Email</FormLabel>
+				<div style={{ fontSize: '16px' }}>{_('Login below.')} <CreateAccountLink href="#" onClick={onJoplinCloudCreateAccountClick}>{_('Or create an account.')}</CreateAccountLink></div>
+				<FormLabel>{_('Email')}</FormLabel>
 				<StyledInput type="email" onChange={onJoplinCloudEmailChange}/>
-				<FormLabel>Password</FormLabel>
+				<FormLabel>{_('Password')}</FormLabel>
 				<StyledInput type="password" onChange={onJoplinCloudPasswordChange}/>
 				<SelectButton mt="1.3em" disabled={joplinCloudLoginInProgress} level={ButtonLevel.Primary} title={_('Login')} onClick={onJoplinCloudLoginClick}/>
 			</JoplinCloudLoginForm>

packages/app-desktop/gui/menuCommandNames.ts

@@ -40,8 +40,13 @@ export default function() {
 		'toggleVisiblePanes',
 		'editor.deleteLine',
 		'editor.duplicateLine',
-		'editor.undo',
-		'editor.redo',
+		// We cannot put the undo/redo commands in the menu because they are
+		// editor-specific commands. If we put them there it will break the
+		// undo/redo in regular text fields.
+		// https://github.com/laurent22/joplin/issues/6214
+
+		// 'editor.undo',
+		// 'editor.redo',
 		'editor.indentLess',
 		'editor.indentMore',
 		'editor.toggleComment',
@@ -55,5 +60,10 @@ export default function() {
 		'gotoAnything',
 		'commandPalette',
 		'openMasterPasswordDialog',
+		'addProfile',
+		'editProfileConfig',
+		'switchProfile1',
+		'switchProfile2',
+		'switchProfile3',
 	];
 }

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

@@ -116,7 +116,7 @@
 			const now = Date.now();
 			if (now >= ignoreNextScrollTime_) ignoreNextScrollEventCount_ = 0;
 			if (ignoreNextScrollEventCount_ < 10) { // for safety
-				ignoreNextScrollTime_ = now + 200;
+				ignoreNextScrollTime_ = now + 1000;
 				ignoreNextScrollEventCount_ += 1;
 			}
 		};
@@ -277,6 +277,9 @@
 		let restoreAndRefreshTimeoutID_ = null;
 		let restoreAndRefreshTimeout_ = Date.now();
 
+		// If 'noteRenderComplete' message is ongoing, resizing should not trigger a 'percentScroll' messsage.
+		let noteRenderCompleteMessageIsOngoing_ = false;
+
 		// A callback anonymous function invoked when the scroll height changes.
 		const onRendering = observeRendering((cause, height, heightChanged) => {
 			if (!alreadyAllImagesLoaded && !scrollmap.isPresent()) {
@@ -285,16 +288,17 @@
 					alreadyAllImagesLoaded = true;
 					scrollmap.refresh();
 					restorePercentScroll();
+					noteRenderCompleteMessageIsOngoing_ = true;
 					ipcProxySendToHost('noteRenderComplete');
 					return;
 				}
 			}
-			if (!heightChanged) return;
+			if (!heightChanged && cause !== 'dom-changed') return;
 			const restoreAndRefresh = () => {
 				scrollmap.refresh();
 				restorePercentScroll();
 				// To ensures Editor's scroll position is synced with Viewer's
-				ipcProxySendToHost('percentScroll', percentScroll_);
+				if (!noteRenderCompleteMessageIsOngoing_) ipcProxySendToHost('percentScroll', percentScroll_);
 			};
 			const now = Date.now();
 			if (now < restoreAndRefreshTimeout_) {
@@ -333,7 +337,11 @@
 			contentElement.innerHTML = html;
 
 			scrollmap.create(event.options.markupLineCount);
-			restorePercentScroll(); // First, a quick treatment is applied.
+			if (typeof event.options.percent !== 'number') {
+				restorePercentScroll(); // First, a quick treatment is applied.
+			} else {
+				setPercentScroll(event.options.percent);
+			}
 
 			addPluginAssets(event.options.pluginAssets);
 
@@ -345,11 +353,13 @@
 
 			if (scrollmap.isPresent()) {
 				// Now, ready to receive scrollToHash/setPercentScroll from Editor.
+				noteRenderCompleteMessageIsOngoing_ = true;
 				ipcProxySendToHost('noteRenderComplete');
 			}
 		}
 
 		ipc.setPercentScroll = (event) => {
+			noteRenderCompleteMessageIsOngoing_ = false;
 			setPercentScroll(event.percent);
 		}
 
@@ -580,9 +590,24 @@
 		}));
 
 		document.addEventListener('contextmenu', webviewLib.logEnabledEventHandler(event => {
-			let element = event.target;
-
 			// To handle right clicks on resource icons
+			let element = event.target;
+			
+			// Mermaid svgs are wrapped inside a <pre> with class "mermaid"
+			let mermaidElement = element.closest(".mermaid")?.children[0];
+			if (mermaidElement) {
+				const svgString = new XMLSerializer().serializeToString(mermaidElement);
+				if (!!svgString) {
+					ipcProxySendToHost('contextMenu', {
+						type: 'image',
+						textToCopy: svgString,
+						mime: 'image/svg+xml',
+						filename: mermaidElement.id + '.svg',
+					});
+				}
+				return;
+			}
+
 			if (element && !element.getAttribute('data-resource-id')) element = element.parentElement;
 
 			if (element && element.getAttribute('data-resource-id')) {

packages/app-desktop/gui/note-viewer/scrollmap.js

@@ -45,7 +45,8 @@ scrollmap.get_ = () => {
 	// Each map entry is total-ordered.
 	let last = 0;
 	for (let i = 0; i < elems.length; i++) {
-		const top = elems[i].getBoundingClientRect().top - offset;
+		const rect = elems[i].getBoundingClientRect();
+		const top = rect.top - offset;
 		const line = Number(elems[i].getAttribute('source-line'));
 		const percent = Math.max(0, Math.min(1, top / height));
 		if (map.line[last] < line && map.percent[last] < percent) {
@@ -53,12 +54,20 @@ scrollmap.get_ = () => {
 			map.percent.push(percent);
 			last += 1;
 		}
+		const bottom = rect.bottom - offset;
+		const lineEnd = Number(elems[i].getAttribute('source-line-end'));
+		const percentEnd = Math.max(0, Math.min(1, bottom / height));
+		if (map.line[last] < lineEnd && map.percent[last] < percentEnd) {
+			map.line.push(lineEnd);
+			map.percent.push(percentEnd);
+			last += 1;
+		}
 	}
 	const lineCount = scrollmap.lineCount_;
 	if (lineCount) {
 		map.lineCount = lineCount;
 	} else {
-		if (map.lineCount <= map.line[last]) map.lineCount = map.line[last] + 1;
+		if (map.lineCount < map.line[last]) map.lineCount = map.line[last];
 	}
 	if (map.percent[last] < 1) {
 		map.line.push(lineCount || 1e10);

packages/app-desktop/loadResources.testEnv.ts

@@ -0,0 +1,20 @@
+/**
+ * A Jest custom test Environment to load the resources for the tests.
+ * Use this test envirenment when you work with resources like images, files.
+ * See gui/NoteEditor/utils/contextMenu.test.ts for an example.
+ */
+
+const JSDOMEnvironment = require('jest-environment-jsdom');
+import type { EnvironmentContext } from '@jest/environment';
+import type { Config } from '@jest/types';
+
+
+export default class CustomEnvironment extends JSDOMEnvironment {
+	constructor(config: Config.ProjectConfig, context?: EnvironmentContext) {
+		// Resources is set to 'usable' to enable fetching of resources like images and fonts while testing
+		// Which does not happen by default in jest
+		// https://stackoverflow.com/a/49482563
+		config.testEnvironmentOptions.resources = 'usable';
+		super(config, context);
+	}
+}

packages/app-desktop/main-html.js

@@ -112,7 +112,15 @@ document.addEventListener('auxclick', event => event.preventDefault());
 // Each link (rendered as a button or list item) has its own custom click event
 // so disable the default. In particular this will disable Ctrl+Clicking a link
 // which would open a new browser window.
-document.addEventListener('click', (event) => event.preventDefault());
+document.addEventListener('click', (event) => {
+	// We don't apply this to labels and inputs because it would break
+	// checkboxes. Such a global event handler is probably not a good idea
+	// anyway but keeping it for now, as it doesn't seem to break anything else.
+	// https://github.com/facebook/react/issues/13477#issuecomment-489274045
+	if (['LABEL', 'INPUT'].includes(event.target.nodeName)) return;
+
+	event.preventDefault();
+});
 
 app().start(bridge().processArgv()).then((result) => {
 	if (!result || !result.action) {

packages/app-desktop/main.scss

@@ -180,6 +180,22 @@ h2 {
 	margin-bottom: 10px;
 }
 
+.form > .form-input-group-checkbox {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.form > .form-input-group-checkbox > input {
+	display: flex;
+	margin-right: 6px;
+}
+
+.form > .form-input-group-checkbox > label {
+	display: flex;
+	margin-bottom: 0;
+}
+
 .bold {
 	font-weight: bold;
 }
@@ -259,4 +275,5 @@ Component-specific classes
 
 .master-password-dialog .fa-times {
 	color: var(--joplin-color-error);
+	margin-left: 5px;
 }

packages/app-desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joplin/app-desktop",
-  "version": "2.7.7",
+  "version": "2.8.4",
   "description": "Joplin for Desktop",
   "main": "main.js",
   "private": true,
@@ -67,7 +67,7 @@
     },
     "nsis": {
       "oneClick": false,
-      "allowToChangeInstallationDirectory": true,
+      "allowToChangeInstallationDirectory": false,
       "differentialPackage": false
     },
     "portable": {
@@ -105,7 +105,7 @@
   },
   "homepage": "https://github.com/laurent22/joplin#readme",
   "devDependencies": {
-    "@joplin/tools": "~2.7",
+    "@joplin/tools": "~2.8",
     "@testing-library/react-hooks": "^3.4.2",
     "@types/jest": "^26.0.15",
     "@types/node": "^14.14.6",
@@ -116,6 +116,7 @@
     "app-builder-bin": "^1.9.11",
     "babel-cli": "^6.26.0",
     "babel-preset-react": "^6.24.1",
+    "canvas": "^2.9.0",
     "electron": "14.1.0",
     "electron-builder": "^22.11.7",
     "electron-notarize": "^1.0.0",
@@ -137,8 +138,8 @@
     "@electron/remote": "^2.0.1",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@joeattardi/emoji-button": "^4.6.0",
-    "@joplin/lib": "~2.7",
-    "@joplin/renderer": "~2.7",
+    "@joplin/lib": "~2.8",
+    "@joplin/renderer": "~2.8",
     "async-mutex": "^0.1.3",
     "codemirror": "^5.56.0",
     "color": "^3.1.2",

packages/app-desktop/runForTesting.sh

@@ -92,7 +92,7 @@ do
 		echo "config sync.target 10" >> "$CMD_FILE" 
 		# echo "config sync.10.path http://api.joplincloud.local:22300" >> "$CMD_FILE" 
 		echo "config sync.10.username $USER_EMAIL" >> "$CMD_FILE" 
-		echo "config sync.10.password hunter1hunter2hunter3" >> "$CMD_FILE"
+		echo "config sync.10.password 111111" >> "$CMD_FILE"
 	
 	elif [[ $CMD == "e2ee" ]]; then
 	

packages/app-desktop/services/plugins/BackOffHandler.ts

@@ -10,23 +10,39 @@ const logger = Logger.create('BackOffHandler');
 //    When a plugin needs to be throttled that way a warning is displayed so
 //    that the author gets an opportunity to fix it.
 //
-// 2. If the plugin makes many simultaneous calls (over 100), the handler throws
-//    an exception to stop the plugin. In that case the plugin will be broken,
-//    but most plugins will not get this error anyway because call are usually
-//    made in sequence. It might reveal a bug though - for example if the plugin
+// 2. If the plugin makes many simultaneous calls, the handler throws an
+//    exception to stop the plugin. In that case the plugin will be broken, but
+//    most plugins will not get this error anyway because call are usually made
+//    in sequence. It might reveal a bug though - for example if the plugin
 //    makes a call every 1 second, but does not wait for the response (or assume
 //    the response will come in less than one second). In that case, the back
 //    off intervals combined with the incorrect code will make the plugin fail.
 
 export default class BackOffHandler {
 
-	private backOffIntervals_ = Array(100).fill(0).concat([0, 1, 1, 2, 3, 5, 8]);
+	// The current logic is:
+	//
+	// - Up to 200 calls per 10 seconds without restrictions
+	// - For calls 200 to 300, a 1 second wait time is applied
+	// - Over 300 calls, a 2 seconds wait time is applied
+	// - After 10 seconds without making any call, the limits are reset (back to
+	//   0 second between calls).
+	//
+	// If more than 50 simultaneous calls are being throttled, it's a bug in the
+	// plugin (not waiting for API responses), so we stop responding and throw
+	// an error.
+
+	private backOffIntervals_ =
+		Array(200).fill(0).concat(
+			Array(100).fill(1)).concat(
+			[2]);
+
 	private lastRequestTime_ = 0;
 	private pluginId_: string;
-	private resetBackOffInterval_ = (this.backOffIntervals_[this.backOffIntervals_.length - 1] + 1) * 1000;
+	private resetBackOffInterval_ = 10 * 1000; // (this.backOffIntervals_[this.backOffIntervals_.length - 1] + 1) * 1000;
 	private backOffIndex_ = 0;
 	private waitCount_ = 0;
-	private maxWaitCount_ = 100;
+	private maxWaitCount_ = 50;
 
 	public constructor(pluginId: string) {
 		this.pluginId_ = pluginId;
@@ -54,7 +70,7 @@ export default class BackOffHandler {
 
 		logger.warn(`Plugin ${this.pluginId_}: Applying a backoff of ${interval} seconds due to frequent plugin API calls. Consider reducing the number of calls, caching the data, or requesting more data per call. API call was: `, path, args, `[Wait count: ${this.waitCount_}]`);
 
-		if (this.waitCount_ > this.maxWaitCount_) throw new Error(`Plugin ${this.pluginId_}: More than ${this.maxWaitCount_} API alls are waiting - aborting. Please consider queuing the API calls in your plugins to reduce the load on the application.`);
+		if (this.waitCount_ > this.maxWaitCount_) throw new Error(`Plugin ${this.pluginId_}: More than ${this.maxWaitCount_} API calls are waiting - aborting. Please consider queuing the API calls in your plugins to reduce the load on the application.`);
 
 		await time.sleep(interval);
 

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

@@ -157,13 +157,13 @@ export default class PluginRunner extends BasePluginRunner {
 				const debugMappedArgs = fullPath.includes('setHtml') ? '<hidden>' : mappedArgs;
 				logger.debug(`Got message (3): ${fullPath}`, debugMappedArgs);
 
+				this.recordCallStat(plugin.id);
+
 				try {
 					await this.backOffHandler(plugin.id).wait(fullPath, debugMappedArgs);
 				} catch (error) {
-					// For now, we don't disable the plugin, but still print the
-					// errors so that any issue can be investigated easily.
 					logger.error(error);
-					// return;
+					return;
 				}
 
 				let result: any = null;

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

@@ -146,8 +146,8 @@ android {
         applicationId "net.cozic.joplin"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-		versionCode 2097665
-		versionName "2.7.0"
+		versionCode 2097667
+		versionName "2.8.0"
 		ndk {
 			abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
 		}

packages/app-mobile/components/CameraView.tsx

@@ -210,7 +210,7 @@ class CameraView extends Component {
 						<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'flex-end' }}>
 							<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: 20 }}>
 								{ reverseCameraButton }
-								<TouchableOpacity onPress={this.photo_onPress}>
+								<TouchableOpacity onPress={this.photo_onPress} disabled={this.state.snapping}>
 									<View style={{ flexDirection: 'row', borderRadius: 90, width: 90, height: 90, backgroundColor: '#ffffffaa', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
 										<Icon
 											name={photoIcon}

packages/app-mobile/components/Dropdown.js

@@ -38,10 +38,9 @@ class Dropdown extends React.Component {
 		const listTop = Math.min(maxListTop, this.state.headerSize.y + this.state.headerSize.height);
 
 		const wrapperStyle = {
-			width: this.state.headerSize.width,
 			height: listHeight + 2, // +2 for the border (otherwise it makes the scrollbar appear)
 			marginTop: listTop,
-			marginLeft: this.state.headerSize.x,
+			alignSelf: 'center',
 		};
 
 		const itemListStyle = Object.assign({}, this.props.itemListStyle ? this.props.itemListStyle : {}, {
@@ -87,6 +86,7 @@ class Dropdown extends React.Component {
 		if (this.props.labelTransform && this.props.labelTransform === 'trim') headerLabel = headerLabel.trim();
 
 		const closeList = () => {
+			if (this.props.onClose) this.props.onClose();
 			this.setState({ listVisible: false });
 		};
 
@@ -116,6 +116,7 @@ class Dropdown extends React.Component {
 					onPress={() => {
 						this.updateHeaderCoordinates();
 						this.setState({ listVisible: true });
+						if (this.props.onOpen) this.props.onOpen();
 					}}
 				>
 					<Text ellipsizeMode="tail" numberOfLines={1} style={headerStyle}>