lib

Auto-updated using release-website.sh

.dockerignore

@@ -1,12 +1,19 @@
+_mydocs/
+_releases/
+.git/
+.yarn/cache/
+**/.DS_Store
 **/node_modules
 Assets/
-.git/
-_releases/
-packages/app-desktop
-packages/app-cli
-packages/app-mobile
-packages/app-clipper
-packages/generator-joplin
-packages/plugin-repo-cli
+docs/
+lerna-debug.log
+packages/app-cli/
+packages/app-clipper/
+packages/app-desktop/
+packages/app-mobile/
+packages/generator-joplin/
+packages/plugin-repo-cli/
 packages/server/db-*.sqlite
-packages/server/temp
+packages/server/dist/
+packages/server/logs/
+packages/server/temp/

.eslintignore

@@ -52,8 +52,6 @@ packages/app-mobile/lib/rnInjectedJs/
 packages/app-mobile/locales
 packages/app-mobile/node_modules
 packages/app-mobile/pluginAssets/
-packages/electron-process-manager/dist/
-packages/electron-process-manager/src/ui/
 packages/fork-*
 packages/htmlpack/dist/
 packages/lib/assets/
@@ -150,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
@@ -177,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
@@ -219,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
@@ -237,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
@@ -258,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
@@ -489,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
@@ -528,12 +556,18 @@ packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.js.map
 packages/app-desktop/gui/NoteList/NoteList.d.ts
 packages/app-desktop/gui/NoteList/NoteList.js
 packages/app-desktop/gui/NoteList/NoteList.js.map
+packages/app-desktop/gui/NoteList/NoteList2.d.ts
+packages/app-desktop/gui/NoteList/NoteList2.js
+packages/app-desktop/gui/NoteList/NoteList2.js.map
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.d.ts
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js
 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
@@ -723,6 +757,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
@@ -1032,6 +1069,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
@@ -1149,6 +1189,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
@@ -1233,6 +1276,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
@@ -1557,6 +1603,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
@@ -1635,6 +1699,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
@@ -1929,6 +1996,9 @@ packages/renderer/headerAnchor.js.map
 packages/renderer/htmlUtils.d.ts
 packages/renderer/htmlUtils.js
 packages/renderer/htmlUtils.js.map
+packages/renderer/htmlUtils.test.d.ts
+packages/renderer/htmlUtils.test.js
+packages/renderer/htmlUtils.test.js.map
 packages/renderer/index.d.ts
 packages/renderer/index.js
 packages/renderer/index.js.map
@@ -1959,6 +2029,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
@@ -2001,9 +2074,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

@@ -1,10 +1,5 @@
 #!/bin/bash
 
-# We want the script to stop as soon as an error is found. Otherwise if there's
-# an error during `yarn install` for example, it's also going to throw millions
-# of errors in test units, which makes debugging difficult.
-set -e
-
 # =============================================================================
 # Setup environment variables
 # =============================================================================
@@ -43,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"
@@ -174,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/stale.yml

@@ -1,25 +0,0 @@
-# Configuration for probot-stale - https://github.com/probot/stale
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 30
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - "good first issue"
-  - "upstream"
-  - "backlog"
-  - "high"
-  - "medium"
-  - "spec"
-  - "cannot reproduce"
-# Label to use when marking an issue as stale
-staleLabel: stale
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs.
-  You may comment on the issue and I will leave it open.
-  Thank you for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: >
-  Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.
-only: issues

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

@@ -0,0 +1,23 @@
+name: 'Close stale issues'
+on:
+  schedule:
+    - cron: '0 16 * * *'
+permissions:
+  issues: write
+jobs:
+  ProcessStaleIssues:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v4
+        with:
+          # Use this to do a dry run from a pull request
+          # debug-only: true
+          stale-issue-message: "Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions."
+          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,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
+          days-before-pr-stale: -1

.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
@@ -86,10 +87,22 @@ jobs:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           IS_CONTINUOUS_INTEGRATION: 1
           BUILD_SEQUENCIAL: 1
+        # To ensure that the operations stop on failure, all commands
+        # should be on one line with "&&" in between.
         run: |
-          yarn install
-          cd packages/app-desktop
-          yarn run dist
+          yarn install && cd packages/app-desktop && yarn run dist
+
+      # Build and package the Windows app, without publishing it, just to
+      # verify that the build process hasn't been broken.
+      - name: Build Windows app (no publishing)
+        if: runner.os == 'Windows' && !startsWith(github.ref, 'refs/tags/v')
+        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
 
   ServerDockerImage:
     runs-on: ${{ matrix.os }}
@@ -128,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
@@ -516,12 +546,18 @@ packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.js.map
 packages/app-desktop/gui/NoteList/NoteList.d.ts
 packages/app-desktop/gui/NoteList/NoteList.js
 packages/app-desktop/gui/NoteList/NoteList.js.map
+packages/app-desktop/gui/NoteList/NoteList2.d.ts
+packages/app-desktop/gui/NoteList/NoteList2.js
+packages/app-desktop/gui/NoteList/NoteList2.js.map
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.d.ts
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js
 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 +747,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 +1059,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 +1179,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 +1266,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 +1593,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 +1689,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
@@ -1917,6 +1986,9 @@ packages/renderer/headerAnchor.js.map
 packages/renderer/htmlUtils.d.ts
 packages/renderer/htmlUtils.js
 packages/renderer/htmlUtils.js.map
+packages/renderer/htmlUtils.test.d.ts
+packages/renderer/htmlUtils.test.js
+packages/renderer/htmlUtils.test.js.map
 packages/renderer/index.d.ts
 packages/renderer/index.js
 packages/renderer/index.js.map
@@ -1947,6 +2019,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
@@ -1989,9 +2064,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

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%;
 }
 
 /*****************************************************************
@@ -728,6 +728,23 @@ footer .bottom-links-row p {
 	}
 }
 
+/*****************************************************************
+ MEDIUM VIEW
+ - Make menu bar elements smaller and closer to each others
+   so that everything fit.
+*****************************************************************/
+
+@media (max-width: 990px) {
+	#nav-section > .container {
+		max-width: 960px;
+	}
+
+	#nav-section .button-link {
+		padding: 4px 10px;
+		font-size: 15px;
+	}
+}
+
 /*****************************************************************
  NARROW VIEW
  - Top right menu is displayed
@@ -740,6 +757,23 @@ footer .bottom-links-row p {
 		padding-bottom: 130px;
 	}
 
+	#menu-mobile .social-links {
+		display: flex;
+		justify-content: center;
+		margin-top: 20px;
+	}
+
+	#menu-mobile .social-links a {
+		margin-left: 15px;
+		font-size: 20px;
+	}
+
+	#menu-mobile .social-links .social-link-mastodon,
+	#menu-mobile .social-links .social-link-reddit,
+	#menu-mobile .social-links .social-link-patreon {
+		display: none;
+	}
+
 	.front-page h1 {
 		font-size: 2.5em;
 	}
@@ -857,7 +891,7 @@ footer .bottom-links-row p {
 	}
 
 	#menu-mobile .button-link {
-		padding: 10px 15px;
+		padding: 4px 12px;
 		font-size: 16px;
 		margin-left: 0px;
 	}
@@ -903,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
 *****************************************************************/
@@ -1020,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/footer.mustache

@@ -1,15 +1,6 @@
 <footer class="darkblue-bg">
 	<div class="container">
-		<div class="row">
-			<div class="col-12 col-md-12 social-links">
-				<a href="https://twitter.com/joplinapp" title="Joplin Twitter feed"><i class="fab fa-twitter"></i></a>
-				<a href="https://mastodon.social/@joplinapp" title="Joplin Mastodon feed"><i class="fab fa-mastodon"></i></a>
-				<a href="https://www.patreon.com/joplin" title="Joplin Patreon"><i class="fab fa-patreon"></i></a>
-				<a href="https://discord.gg/VSj7AFHvpq" title="Joplin Discord chat"><i class="fab fa-discord"></i></a>
-				<a href="https://www.reddit.com/r/joplinapp/" title="Joplin Subreddit"><i class="fab fa-reddit"></i></a>
-				<a href="https://github.com/laurent22/joplin/" title="Joplin GitHub repository"><i class="fab fa-github"></i></a>
-			</div>
-		</div>
+		{{> socialFeeds}}
 
 		<div class="row bottom-links-row">
 			<div class="col-12 col-md-6">

Assets/WebsiteAssets/templates/partials/navbar.mustache

@@ -12,7 +12,8 @@
 				</a>
 			</div>
 			<div class="col-9 text-right d-none d-md-block">
-				<a href="{{baseUrl}}/news/" class="fw500">What's New</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>
 				{{#showJoplinCloudLinks}}
@@ -21,6 +22,7 @@
 				{{> supportButton}}
 			</div>
 			<div class="col-9 text-right d-block d-md-none navbar-mobile-content">
+				{{> twitterLink}}
 				{{> supportButton}}
 
 				<span class="pointer"
@@ -43,7 +45,7 @@
 						</div>
 
 						<div class="text-center menu-mobile-top">
-							<a href="{{baseUrl}}/news/" class="fw500 mobile-menu-link">What's New</a>
+							<a href="{{baseUrl}}/news/" class="fw500 mobile-menu-link">News</a>
 							<a href="{{baseUrl}}/help/" class="fw500 mobile-menu-link">Help</a>
 							<a href="{{forumUrl}}" class="fw500 mobile-menu-link">Forum</a>
 						</div>
@@ -59,6 +61,8 @@
 					{{#showToc}}
 						<div id="toc-mobile">{{{tocHtml}}}</div>
 					{{/showToc}}
+
+					{{> socialFeeds}}
 					
 					<div>
 						<p class="light-blue mobile-menu-link-bottom text-center">

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/socialFeeds.mustache

@@ -0,0 +1,10 @@
+<div class="row">
+	<div class="col-12 col-md-12 social-links">
+		<a class="social-link-twitter" href="https://twitter.com/joplinapp" title="Joplin Twitter feed"><i class="fab fa-twitter"></i></a>
+		<a class="social-link-mastodon" href="https://mastodon.social/@joplinapp" title="Joplin Mastodon feed"><i class="fab fa-mastodon"></i></a>
+		<a class="social-link-patreon" href="https://www.patreon.com/joplin" title="Joplin Patreon"><i class="fab fa-patreon"></i></a>
+		<a class="social-link-discord" href="https://discord.gg/VSj7AFHvpq" title="Joplin Discord chat"><i class="fab fa-discord"></i></a>
+		<a class="social-link-reddit" href="https://www.reddit.com/r/joplinapp/" title="Joplin Subreddit"><i class="fab fa-reddit"></i></a>
+		<a class="social-link-github" href="https://github.com/laurent22/joplin/" title="Joplin GitHub repository"><i class="fab fa-github"></i></a>
+	</div>
+</div>

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`
-- macOS: Install Cocoapods - `brew install cocoapods`
-- Windows: Install Windows Build Tools - `yarn install -g windows-build-tools --vs2015`
+- 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`.
 - 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,96 +1,75 @@
-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)"
-RUN echo "Npm: $(npm --version)"
-RUN echo "Yarn: $(yarn --version)"
+WORKDIR /build
+
+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
+# but we can delete it anyway. We can delete the cache because we use
+# `nodeLinker: node-modules`. If we ever implement Zero Install, we'll need to
+# keep the cache.
+#
+# Note that `yarn install` ignores `NODE_ENV=production` and will install dev
+# dependencies too, but this is fine because we need them to build the app.
+
+RUN BUILD_SEQUENCIAL=1 yarn install --inline-builds \
+    && yarn cache clean \
+    && rm -rf .yarn/berry
+
+# =============================================================================
+# 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
 
-ENV NODE_ENV development
-
-WORKDIR /home/$user
-
-RUN mkdir /home/$user/logs
-
-# Install the root scripts but don't run postinstall (which would bootstrap
-# and build TypeScript files, but we don't have the TypeScript files at
-# this point)
-
-COPY --chown=$user:$user package*.json ./
-COPY --chown=$user:$user .yarn ./.yarn
-COPY --chown=$user:$user .yarnrc.yml .
-COPY --chown=$user:$user yarn.lock .
-COPY --chown=$user:$user gulpfile.js .
-
-RUN yarn install --inline-builds --mode=skip-build
-
-# To take advantage of the Docker cache, we first copy all the package.json
-# and package-lock.json files, as they rarely change, and then bootstrap
-# all the packages.
-#
-# Note that bootstrapping the packages will run all the postinstall
-# scripts, which means that for packages that have such scripts, we need to
-# copy all the files.
-#
-# We can't run boostrap with "--ignore-scripts" because that would
-# prevent certain sub-packages, such as sqlite3, from being built
-
-COPY --chown=$user:$user packages/fork-sax/package*.json ./packages/fork-sax/
-COPY --chown=$user:$user packages/fork-uslug/package*.json ./packages/fork-uslug/
-COPY --chown=$user:$user packages/htmlpack/package*.json ./packages/htmlpack/
-COPY --chown=$user:$user packages/renderer/package*.json ./packages/renderer/
-COPY --chown=$user:$user packages/tools/package*.json ./packages/tools/
-COPY --chown=$user:$user packages/lib/package*.json ./packages/lib/
-COPY --chown=$user:$user tsconfig.json .
-
-# The following have postinstall scripts so we need to copy all the files.
-# Since they should rarely change this is not an issue
-
-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/
-
-# Then bootstrap only, without compiling the TypeScript files
-
-RUN yarn install --inline-builds --mode=skip-build
-
-# Now copy the source files. Put lib and server last as they are more likely to change.
-
-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
-
-# Finally build everything, in particular the TypeScript files. We can't just
-# run `yarn run build` because that wouldn't run the postinstall scripts in
-# dependencies (for example the sqlite3 native module would not be built). So
-# instead we run `yarn install`, which is going to install again all the
-# packages (but because it's already done it should be fast), and then run the
-# postinstall scripts, as well as build scripts.
-
-RUN BUILD_SEQUENCIAL=1 yarn install --inline-builds
+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}
 
-# Not clear what's the equivalent of "--prefix" in Yarn 3, so keep using npm for
-# now.
-CMD [ "npm", "--prefix", "packages/server", "start" ]
+# 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

Joplin_install_and_update.sh

@@ -219,7 +219,8 @@ then
 	Type=Application
 	Categories=Office;
 	MimeType=x-scheme-handler/joplin;
-	X-GNOME-SingleWindow=true
+	X-GNOME-SingleWindow=true // should be removed eventually as it was upstream to be an XDG specification
+	SingleMainWindow=true
 	EOF
     
     # Update application icons

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,19 +55,18 @@ 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 -->
@@ -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/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
 
@@ -300,7 +308,6 @@ To add a **Bucket Policy** from the AWS S3 Web Console, navigate to the **Permis
         {
             "Sid": "VisualEditor0",
             "Effect": "Allow",
-            "Principal": "*",
             "Action": [
                   "s3:ListBucket",
                   "s3:GetBucketLocation",
@@ -473,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.
@@ -531,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)  |  93%
-<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  |  27%
-<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)  |  67%
-<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)  |    |  53%
-<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)  |  93%
-<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)  |  97%
-<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)  |  89%
-<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  |  97%
-<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)  |  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)  |    |  51%
+<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)  |  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: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)  |  99%
-<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  |  30%
-<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  |  93%
+<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)  |  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)  |  34%
-<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)  |  92%
-<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)  |  90%
-<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)  |  78%
-<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)  |    |  81%
-<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)  |  85%
-<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  |  90%
-<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)  |  64%
-<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)  |  84%
-<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)  |  94%
-<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)  |  84%
-<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)  |  59%
-<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)  |  93%
-<img src="https://joplinapp.org/images/flags/country-4x3/se.png" width="16px"/>  |  Svenska  |  [sv](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/sv.po)  |  [Jonatan Nyberg](mailto:jonatan@autistici.org)  |  97%
-<img src="https://joplinapp.org/images/flags/country-4x3/th.png" width="16px"/>  |  Thai (ประเทศไทย)  |  [th_TH](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/th_TH.po)  |    |  43%
-<img src="https://joplinapp.org/images/flags/country-4x3/vi.png" width="16px"/>  |  Tiếng Việt  |  [vi](https://github.com/laurent22/joplin/blob/dev/packages/tools/locales/vi.po)  |    |  90%
-<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)  |  93%
-<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)  |  83%
-<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)  |  87%
-<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)  |  93%
-<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)  |    |  76%
-<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)  |  97%
-<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)  |  90%
-<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)  |  98%
-<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)  |  89%
+<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)  |  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",

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/tests/md_to_html/image_with_alt_title.html

@@ -0,0 +1,4 @@
+<img src=":/39e66095b2cd427e9f13464487514d2e" alt="">
+<img src=":/39e66095b2cd427e9f13464487514d2e" alt="" title="some-title">
+<img src=":/39e66095b2cd427e9f13464487514d2e" alt="some-alt-text">
+<img src=":/39e66095b2cd427e9f13464487514d2e" alt="some-alt-text" title="some-title">

packages/app-cli/tests/md_to_html/image_with_alt_title.md

@@ -0,0 +1,4 @@
+![](:/39e66095b2cd427e9f13464487514d2e)
+![](:/39e66095b2cd427e9f13464487514d2e "some-title")
+![some-alt-text](:/39e66095b2cd427e9f13464487514d2e)
+![some-alt-text](:/39e66095b2cd427e9f13464487514d2e "some-title")

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/ElectronAppWrapper.ts

@@ -9,7 +9,6 @@ const path = require('path');
 const { dirname } = require('@joplin/lib/path-utils');
 const fs = require('fs-extra');
 const { ipcMain } = require('electron');
-const { openProcessManager } = require('@joplin/electron-process-manager');
 
 interface RendererProcessQuitReply {
 	canClose: boolean;
@@ -42,10 +41,6 @@ export default class ElectronAppWrapper {
 		this.initialCallbackUrl_ = initialCallbackUrl;
 	}
 
-	public openProcessManager() {
-		openProcessManager(require('@electron/remote/main'));
-	}
-
 	electronApp() {
 		return this.electronApp_;
 	}

packages/app-desktop/app.ts

@@ -446,8 +446,9 @@ class Application extends BaseApplication {
 
 		await this.checkForLegacyTemplates();
 
-		// Note: Auto-update currently doesn't work in Linux: it downloads the update
-		// but then doesn't install it on exit.
+		// Note: Auto-update is a misnomer in the code.
+		// The code below only checks, if a new version is available.
+		// We only allow Windows and macOS users to automatically check for updates
 		if (shim.isWindows() || shim.isMac()) {
 			const runAutoUpdateCheck = () => {
 				if (Setting.value('autoUpdateEnabled')) {
@@ -553,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;
@@ -30,10 +37,6 @@ export class Bridge {
 		return !this.electronApp().electronApp().isPackaged;
 	}
 
-	public openProcessManager() {
-		this.electronApp().openProcessManager();
-	}
-
 	// The build directory contains additional external files that are going to
 	// be packaged by Electron Builder. This is for files that need to be
 	// accessed outside of the Electron app (for example the application icon).
@@ -159,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]);
 		}

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, profileIndex: number) => {
+			const currentConfig = context.state.profileConfig;
+			if (currentConfig.currentProfile === profileIndex) return;
+
+			const newConfig: ProfileConfig = {
+				...currentConfig,
+				currentProfile: profileIndex,
+			};
+
+			await saveProfileConfig(`${Setting.value('rootProfileDir')}/profiles.json`, newConfig);
+			bridge().restart();
+		},
+	};
+};

packages/app-desktop/commands/switchProfile1.ts

@@ -0,0 +1,15 @@
+import CommandService, { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
+import { _ } from '@joplin/lib/locale';
+
+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', 0);
+		},
+	};
+};

packages/app-desktop/commands/switchProfile2.ts

@@ -0,0 +1,15 @@
+import CommandService, { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
+import { _ } from '@joplin/lib/locale';
+
+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', 1);
+		},
+	};
+};

packages/app-desktop/commands/switchProfile3.ts

@@ -0,0 +1,15 @@
+import CommandService, { CommandRuntime, CommandDeclaration, CommandContext } from '@joplin/lib/services/CommandService';
+import { _ } from '@joplin/lib/locale';
+
+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', 2);
+		},
+	};
+};

packages/app-desktop/gui/ClipperConfigScreen.tsx

@@ -56,7 +56,7 @@ class ClipperConfigScreenComponent extends React.Component {
 
 		const containerStyle = Object.assign({}, theme.containerStyle, {
 			overflowY: 'scroll',
-			padding: theme.configScreenPadding,
+			// padding: theme.configScreenPadding,
 			backgroundColor: theme.backgroundColor3,
 		});
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useRef, useEffect } from 'react';
 import { _ } from '@joplin/lib/locale';
 import DialogButtonRow, { ClickEvent } from '../DialogButtonRow';
 import Dialog from '../Dialog';
@@ -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;
@@ -22,6 +24,7 @@ interface Props {
 export default function(props: Props) {
 	const [folderTitle, setFolderTitle] = useState('');
 	const [folderIcon, setFolderIcon] = useState<FolderIcon>();
+	const titleInputRef = useRef(null);
 
 	const isNew = !props.folderId;
 
@@ -41,6 +44,14 @@ export default function(props: Props) {
 		});
 	}, [props.dispatch]);
 
+	useEffect(() => {
+		titleInputRef.current.focus();
+
+		setTimeout(() => {
+			titleInputRef.current.select();
+		}, 100);
+	}, []);
+
 	const onButtonRowClick = useCallback(async (event: ClickEvent) => {
 		if (event.buttonName === 'cancel') {
 			onClose();
@@ -84,23 +95,54 @@ 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>
 				<div className="form">
 					<div className="form-input-group">
 						<label>{_('Title')}</label>
-						<StyledInput type="text" value={folderTitle} onChange={onFolderTitleChange}/>
+						<StyledInput type="text" ref={titleInputRef} value={folderTitle} onChange={onFolderTitleChange}/>
 					</div>
 
 					<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/KeymapConfig/styles/index.ts

@@ -5,7 +5,7 @@ export default function styles(themeId: number) {
 		return {
 			container: {
 				...theme.containerStyle,
-				padding: theme.configScreenPadding,
+				// padding: theme.configScreenPadding,
 				backgroundColor: theme.backgroundColor3,
 			},
 			actionsContainer: {

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

@@ -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');

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 = await createNewProfile(context.state.profileConfig, answer);
+							newConfig.currentProfile = newConfig.profiles.length - 1;
+							await saveProfileConfig(`${Setting.value('rootProfileDir')}/profiles.json`, newConfig);
+							bridge().restart();
+						}
+
+						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', i);
+					},
+				};
+			}
+
+			menuItem.label = profile.name;
+			menuItem.type = 'checkbox';
+			menuItem.checked = profileConfig.currentProfile === i;
+
+			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,
@@ -726,13 +794,6 @@ function useMenu(props: Props) {
 							});
 						},
 					},
-					{
-						id: 'help:toggleTaskList',
-						label: _('Open plugin task list'),
-						click: () => {
-							bridge().openProcessManager();
-						},
-					},
 
 					menuItemDic.toggleSafeMode,
 					menuItemDic.openProfileDirectory,
@@ -842,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);
 
@@ -883,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,
@@ -901,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/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx

@@ -67,7 +67,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 
 	usePluginServiceRegistration(ref);
 
-	const { resetScroll, editor_scroll, setEditorPercentScroll, setViewerPercentScroll, editor_resize,
+	const { resetScroll, editor_scroll, setEditorPercentScroll, setViewerPercentScroll, editor_resize, editor_update, getLineScrollPercent,
 	} = useScrollHandler(editorRef, webviewRef, props.onScroll);
 
 	const codeMirror_change = useCallback((newBody: string) => {
@@ -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;
 			}
 
@@ -576,9 +577,14 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 		const arg0 = args && args.length >= 1 ? args[0] : null;
 
 		if (msg.indexOf('checkboxclick:') === 0) {
-			const newBody = shared.toggleCheckbox(msg, props.content);
+			const { line, from, to } = shared.toggleCheckboxRange(msg, props.content);
 			if (editorRef.current) {
-				editorRef.current.updateBody(newBody);
+				// To cancel CodeMirror's layout drift, the scroll position
+				// is recorded before updated, and then it is restored.
+				// Ref. https://github.com/laurent22/joplin/issues/5890
+				const percent = getLineScrollPercent();
+				editorRef.current.replaceRange(line, from, to);
+				setEditorPercentScroll(percent);
 			}
 		} else if (msg === 'percentScroll') {
 			const percent = arg0;
@@ -643,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');
@@ -726,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();
 
@@ -838,6 +853,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 					onEditorPaste={onEditorPaste}
 					isSafeMode={props.isSafeMode}
 					onResize={editor_resize}
+					onUpdate={editor_update}
 				/>
 			</div>
 		);

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

@@ -94,11 +94,13 @@ export interface EditorProps {
 	onEditorPaste: any;
 	isSafeMode: boolean;
 	onResize: any;
+	onUpdate: any;
 }
 
 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
@@ -119,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]);
 
@@ -148,6 +151,15 @@ function Editor(props: EditorProps, ref: any) {
 		event.dataTransfer.dropEffect = 'copy';
 	}, []);
 
+	const editor_resize = useCallback((cm: any) => {
+		props.onResize(cm);
+	}, [props.onResize]);
+
+	const editor_update = useCallback((cm: any) => {
+		const edited = Date.now() - lastEditTime.current <= 100;
+		props.onUpdate(cm, edited);
+	}, [props.onUpdate]);
+
 	useEffect(() => {
 		if (!editorParent.current) return () => {};
 
@@ -190,7 +202,8 @@ function Editor(props: EditorProps, ref: any) {
 		cm.on('paste', editor_paste);
 		cm.on('drop', editor_drop);
 		cm.on('dragover', editor_drag);
-		cm.on('refresh', props.onResize);
+		cm.on('refresh', editor_resize);
+		cm.on('update', editor_update);
 
 		// It's possible for searchMarkers to be available before the editor
 		// In these cases we set the markers asap so the user can see them as
@@ -204,7 +217,8 @@ function Editor(props: EditorProps, ref: any) {
 			cm.off('paste', editor_paste);
 			cm.off('drop', editor_drop);
 			cm.off('dragover', editor_drag);
-			cm.off('refresh', props.onResize);
+			cm.off('refresh', editor_resize);
+			cm.off('update', editor_update);
 			editorParent.current.removeChild(cm.getWrapperElement());
 			setEditor(null);
 		};

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

@@ -7,13 +7,17 @@ export default function useScrollHandler(editorRef: any, webviewRef: any, onScro
 	const ignoreNextEditorScrollTime_ = useRef(Date.now());
 	const ignoreNextEditorScrollEventCount_ = useRef(0);
 	const delayedSetEditorPercentScrollTimeoutID_ = useRef(null);
+	const scrollTopIsUncertain_ = useRef(true);
+	const lastResizeHeight_ = useRef(NaN);
+	const lastLinesHeight_ = useRef(NaN);
+	const restoreEditorPercentScrollTimeoutId_ = useRef<any>(null);
 
 	// Ignores one next scroll event for a short time.
 	const ignoreNextEditorScrollEvent = () => {
 		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;
 		}
 	};
@@ -54,23 +58,33 @@ export default function useScrollHandler(editorRef: any, webviewRef: any, onScro
 			if (isCodeMirrorReady(cm)) {
 				// calculates editor's GUI-dependent pixel-based raw percent
 				const newEditorPercent = translateScrollPercentL2E(cm, scrollPercent_.current);
-				const oldEditorPercent = cm.getScrollPercent();
+				const oldEditorPercent = scrollTopIsUncertain_.current ? NaN : cm.getScrollPercent();
 				if (!(Math.abs(newEditorPercent - oldEditorPercent) < 1e-8)) {
 					ignoreNextEditorScrollEvent();
 					cm.setScrollPercent(newEditorPercent);
 				}
+				scrollTopIsUncertain_.current = false;
 			} else {
 				retry += 1;
-				if (retry <= 10) {
+				if (retry <= 3) {
 					delayedSetEditorPercentScrollTimeoutID_.current = shim.setTimeout(fn, 50);
 				}
+				scrollTopIsUncertain_.current = true;
+				lastResizeHeight_.current = NaN;
+				lastLinesHeight_.current = NaN;
 			}
 		};
 		fn();
 	};
 
 	const restoreEditorPercentScroll = () => {
-		if (isCodeMirrorReady(editorRef.current)) {
+		if (restoreEditorPercentScrollTimeoutId_.current) {
+			shim.clearTimeout(restoreEditorPercentScrollTimeoutId_.current);
+			restoreEditorPercentScrollTimeoutId_.current = null;
+		}
+		const cm = editorRef.current;
+		if (isCodeMirrorReady(cm)) {
+			lastLinesHeight_.current = cm.heightAtLine(cm.lineCount()) - cm.heightAtLine(0);
 			setEditorPercentScrollInternal(scrollPercent_.current);
 		}
 	};
@@ -90,22 +104,27 @@ export default function useScrollHandler(editorRef: any, webviewRef: any, onScro
 	}, [scheduleOnScroll]);
 
 	const editor_scroll = useCallback(() => {
-		if (isNextEditorScrollEventIgnored()) return;
-
+		const ignored = isNextEditorScrollEventIgnored();
 		const cm = editorRef.current;
 		if (isCodeMirrorReady(cm)) {
+			if (scrollTopIsUncertain_.current) return;
 			const editorPercent = Math.max(0, Math.min(1, cm.getScrollPercent()));
 			if (!isNaN(editorPercent)) {
 				// when switching to another note, the percent can sometimes be NaN
 				// this is coming from `gui/NoteEditor/NoteBody/CodeMirror/utils/useScrollUtils.ts`
 				// when CodeMirror returns scroll info with heigth == clientHeigth
 				// https://github.com/laurent22/joplin/issues/4797
-
-				// calculates GUI-independent line-based percent
-				const percent = translateScrollPercentE2L(cm, editorPercent);
-				scrollPercent_.current = percent;
-				setViewerPercentScroll(percent);
+				if (!ignored) {
+					// calculates GUI-independent line-based percent
+					const percent = translateScrollPercentE2L(cm, editorPercent);
+					scrollPercent_.current = percent;
+					setViewerPercentScroll(percent);
+				}
 			}
+		} else {
+			scrollTopIsUncertain_.current = true;
+			lastResizeHeight_.current = NaN;
+			lastLinesHeight_.current = NaN;
 		}
 	}, [setViewerPercentScroll]);
 
@@ -113,17 +132,61 @@ export default function useScrollHandler(editorRef: any, webviewRef: any, onScro
 		scrollPercent_.current = 0;
 		if (editorRef.current) {
 			editorRef.current.setScrollPercent(0);
+			scrollTopIsUncertain_.current = false;
 		}
 	}, []);
 
 	const editor_resize = useCallback((cm) => {
-		if (cm) {
-			restoreEditorPercentScroll();
+		if (isCodeMirrorReady(cm)) {
+			// This handler is called when resized and refreshed.
+			// Only when resized, the scroll position is restored.
+			const info = cm.getScrollInfo();
+			const height = info.height - info.clientHeight;
+			if (height !== lastResizeHeight_.current) {
+				// When resized, restoring is performed immediately.
+				restoreEditorPercentScroll();
+				lastResizeHeight_.current = height;
+			}
+		} else {
+			scrollTopIsUncertain_.current = true;
+			lastResizeHeight_.current = NaN;
+			lastLinesHeight_.current = NaN;
+		}
+	}, []);
+
+	// 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: 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,
+				// restoring is performed in a timeout handler.
+				if (!restoreEditorPercentScrollTimeoutId_.current) {
+					restoreEditorPercentScrollTimeoutId_.current = shim.setTimeout(restoreEditorPercentScroll, 10);
+				}
+			}
+		} else {
+			scrollTopIsUncertain_.current = true;
+			lastResizeHeight_.current = NaN;
+			lastLinesHeight_.current = NaN;
+		}
+	}, []);
+
+	const getLineScrollPercent = useCallback(() => {
+		const cm = editorRef.current;
+		if (isCodeMirrorReady(cm)) {
+			const ePercent = cm.getScrollPercent();
+			return translateScrollPercentE2L(cm, ePercent);
+		} else {
+			return scrollPercent_.current;
 		}
 	}, []);
 
 	return {
-		resetScroll, setEditorPercentScroll, setViewerPercentScroll, editor_scroll, editor_resize,
+		resetScroll, setEditorPercentScroll, setViewerPercentScroll, editor_scroll, editor_resize, editor_update, getLineScrollPercent,
 	};
 }
 

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): Promise<any> {
+	const resource = options.resourceId ? await Resource.load(options.resourceId) : null;
+	const filePath = resource ? Resource.fullPath(resource) : null;
+	const filename = resource ? (resource.filename ? resource.filename : resource.title) : options.filename ? options.filename : '';
+	return { resource, filePath, 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/NoteSearchBar.jsx

@@ -167,8 +167,8 @@ class NoteSearchBarComponent extends React.Component {
 						type="text"
 						style={{ width: 200, marginRight: 5, backgroundColor: this.backgroundColor, color: theme.color }}
 					/>
-					{allowScrolling ? nextButton : null}
 					{allowScrolling ? previousButton : null}
+					{allowScrolling ? nextButton : null}
 					{allowScrolling ? matchesFoundString : null}
 					{!allowScrolling ? viewerWarning : null}
 				</div>

packages/app-desktop/gui/PromptDialog.jsx

@@ -56,7 +56,7 @@ class PromptDialog extends React.Component {
 			top: 0,
 			left: 0,
 			width: width,
-			height: height - paddingTop,
+			height: height,
 			backgroundColor: 'rgba(0,0,0,0.6)',
 			display: visible ? 'flex' : 'none',
 			alignItems: 'flex-start',
@@ -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/SearchBar/SearchBar.tsx

@@ -15,6 +15,7 @@ export const Root = styled.div`
 	position: relative;
 	display: flex;
 	width: 100%;
+	min-width: 30px;
 `;
 
 interface Props {
@@ -138,6 +139,21 @@ function SearchBar(props: Props) {
 		}
 	}, [props.notesParentType, onExitSearch]);
 
+	// When the searchbar is remounted, exit the search if it was previously open
+	// or else other buttons stay hidden (e.g. when opening Layout Editor and closing it)
+	// https://github.com/laurent22/joplin/issues/5953
+	useEffect(() => {
+		if (props.notesParentType === 'Search' || props.isFocused) {
+			if (props.isFocused) {
+				props.dispatch({
+					type: 'FOCUS_CLEAR',
+					field: 'globalSearch',
+				});
+			}
+			void onExitSearch(true);
+		}
+	}, []);
+
 	return (
 		<Root className="search-bar">
 			<SearchInput

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/TagItem.jsx

@@ -1,14 +1,15 @@
 const React = require('react');
 const { connect } = require('react-redux');
 const { themeStyle } = require('@joplin/lib/theme');
+const CommandService = require('@joplin/lib/services/CommandService').default;
 
 class TagItemComponent extends React.Component {
 	render() {
 		const theme = themeStyle(this.props.themeId);
 		const style = Object.assign({}, theme.tagStyle);
-		const title = this.props.title;
+		const { title, id } = this.props;
 
-		return <span style={style}>{title}</span>;
+		return <button style={style} onClick={() => CommandService.instance().execute('openTag', id)}>{title}</button>;
 	}
 }
 

packages/app-desktop/gui/TagList.tsx

@@ -42,6 +42,7 @@ function TagList(props: Props) {
 		for (let i = 0; i < tags.length; i++) {
 			const props = {
 				title: tags[i].title,
+				id: tags[i].id,
 				key: tags[i].id,
 			};
 			output.push(<TagItem {...props} />);

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,14 +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
+				if (!noteRenderCompleteMessageIsOngoing_) ipcProxySendToHost('percentScroll', percentScroll_);
 			};
 			const now = Date.now();
 			if (now < restoreAndRefreshTimeout_) {
@@ -331,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);
 
@@ -343,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);
 		}
 
@@ -578,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);