init

.eslintignore

@@ -62,7 +62,6 @@ packages/app-mobile/locales
 packages/app-mobile/node_modules
 packages/app-mobile/pluginAssets/
 packages/fork-*
-!packages/fork-uslug
 packages/default-plugins/plugin-base-repo/
 packages/default-plugins/plugin-sources/
 packages/htmlpack/dist/
@@ -160,9 +159,7 @@ packages/app-desktop/commands/exportNotes.js
 packages/app-desktop/commands/focusElement.js
 packages/app-desktop/commands/index.js
 packages/app-desktop/commands/openNoteInNewWindow.js
-packages/app-desktop/commands/openPrimaryAppInstance.js
 packages/app-desktop/commands/openProfileDirectory.js
-packages/app-desktop/commands/openSecondaryAppInstance.js
 packages/app-desktop/commands/replaceMisspelling.js
 packages/app-desktop/commands/restoreNoteRevision.js
 packages/app-desktop/commands/startExternalEditing.js
@@ -267,7 +264,6 @@ packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useKeyboardRefocusHan
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useLinkTooltips.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useScroll.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useTabIndenter.js
-packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useTextPatternsLookup.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useWebViewApi.js
 packages/app-desktop/gui/NoteEditor/NoteEditor.js
 packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.js
@@ -276,7 +272,6 @@ packages/app-desktop/gui/NoteEditor/WarningBanner/BannerContent.js
 packages/app-desktop/gui/NoteEditor/WarningBanner/WarningBanner.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementNoteBody.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementNoteTitle.js
-packages/app-desktop/gui/NoteEditor/commands/focusElementNoteViewer.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementToolbar.js
 packages/app-desktop/gui/NoteEditor/commands/index.js
 packages/app-desktop/gui/NoteEditor/commands/pasteAsText.js
@@ -358,16 +353,13 @@ packages/app-desktop/gui/NoteSearchBar.js
 packages/app-desktop/gui/NoteStatusBar.js
 packages/app-desktop/gui/NoteTextViewer.js
 packages/app-desktop/gui/NoteToolbar/NoteToolbar.js
+packages/app-desktop/gui/NotyfContext.js
 packages/app-desktop/gui/OneDriveLoginScreen.js
 packages/app-desktop/gui/PasswordInput/LabelledPasswordInput.js
 packages/app-desktop/gui/PasswordInput/PasswordInput.js
 packages/app-desktop/gui/PasswordInput/types.js
 packages/app-desktop/gui/PdfViewer.js
 packages/app-desktop/gui/PluginNotification/PluginNotification.js
-packages/app-desktop/gui/PopupNotification/NotificationItem.js
-packages/app-desktop/gui/PopupNotification/PopupNotificationList.js
-packages/app-desktop/gui/PopupNotification/PopupNotificationProvider.js
-packages/app-desktop/gui/PopupNotification/types.js
 packages/app-desktop/gui/PromptDialog.js
 packages/app-desktop/gui/ResizableLayout/LayoutItemContainer.js
 packages/app-desktop/gui/ResizableLayout/MoveButtons.js
@@ -429,7 +421,6 @@ packages/app-desktop/gui/ToolbarBase.js
 packages/app-desktop/gui/ToolbarButton/ToolbarButton.js
 packages/app-desktop/gui/ToolbarSpace.js
 packages/app-desktop/gui/TrashNotification/TrashNotification.js
-packages/app-desktop/gui/TrashNotification/TrashNotificationMessage.js
 packages/app-desktop/gui/UpdateNotification/UpdateNotification.js
 packages/app-desktop/gui/WindowCommandsAndDialogs/AppDialogs.js
 packages/app-desktop/gui/WindowCommandsAndDialogs/ModalMessageOverlay.js
@@ -534,8 +525,8 @@ packages/app-desktop/integration-tests/simpleBackup.spec.js
 packages/app-desktop/integration-tests/util/activateMainMenuItem.js
 packages/app-desktop/integration-tests/util/createStartupArgs.js
 packages/app-desktop/integration-tests/util/extendedExpect.js
+packages/app-desktop/integration-tests/util/firstNonDevToolsWindow.js
 packages/app-desktop/integration-tests/util/getImageSourceSize.js
-packages/app-desktop/integration-tests/util/getMainWindow.js
 packages/app-desktop/integration-tests/util/setDarkMode.js
 packages/app-desktop/integration-tests/util/setFilePickerResponse.js
 packages/app-desktop/integration-tests/util/setMessageBoxResponse.js
@@ -556,16 +547,13 @@ packages/app-desktop/services/plugins/UserWebview.js
 packages/app-desktop/services/plugins/UserWebviewDialog.js
 packages/app-desktop/services/plugins/UserWebviewDialogButtonBar.js
 packages/app-desktop/services/plugins/hooks/useContentSize.js
-packages/app-desktop/services/plugins/hooks/useFormData.js
 packages/app-desktop/services/plugins/hooks/useHtmlLoader.js
-packages/app-desktop/services/plugins/hooks/useMessageHandler.js
 packages/app-desktop/services/plugins/hooks/useScriptLoader.js
 packages/app-desktop/services/plugins/hooks/useSubmitHandler.js
 packages/app-desktop/services/plugins/hooks/useThemeCss.test.js
 packages/app-desktop/services/plugins/hooks/useThemeCss.js
 packages/app-desktop/services/plugins/hooks/useViewIsReady.js
 packages/app-desktop/services/plugins/hooks/useWebviewToPluginMessages.js
-packages/app-desktop/services/plugins/types.js
 packages/app-desktop/services/restart.js
 packages/app-desktop/services/sortOrder/PerFolderSortOrderService.test.js
 packages/app-desktop/services/sortOrder/PerFolderSortOrderService.js
@@ -593,7 +581,6 @@ packages/app-desktop/utils/restartInSafeModeFromMain.test.js
 packages/app-desktop/utils/restartInSafeModeFromMain.js
 packages/app-desktop/utils/window/types.js
 packages/app-mobile/PluginAssetsLoader.js
-packages/app-mobile/commands/dismissPluginPanels.js
 packages/app-mobile/commands/index.js
 packages/app-mobile/commands/newNote.test.js
 packages/app-mobile/commands/newNote.js
@@ -603,7 +590,6 @@ packages/app-mobile/commands/scrollToHash.js
 packages/app-mobile/commands/util/goToNote.js
 packages/app-mobile/commands/util/showResource.js
 packages/app-mobile/components/BetaChip.js
-packages/app-mobile/components/BottomDrawer.js
 packages/app-mobile/components/CameraView/ActionButtons.js
 packages/app-mobile/components/CameraView/Camera/index.jest.js
 packages/app-mobile/components/CameraView/Camera/index.js
@@ -697,22 +683,15 @@ packages/app-mobile/components/SelectDateTimeDialog.js
 packages/app-mobile/components/SideMenu.js
 packages/app-mobile/components/SideMenuContentNote.js
 packages/app-mobile/components/TextInput.js
-packages/app-mobile/components/accessibility/AccessibleView.test.js
+packages/app-mobile/components/ToggleSpaceButton.js
+packages/app-mobile/components/accessibility/AccessibleModalMenu.js
 packages/app-mobile/components/accessibility/AccessibleView.js
-packages/app-mobile/components/accessibility/FocusControl/AutoFocusProvider.js
-packages/app-mobile/components/accessibility/FocusControl/FocusControl.js
-packages/app-mobile/components/accessibility/FocusControl/FocusControlProvider.js
-packages/app-mobile/components/accessibility/FocusControl/MainAppContent.js
-packages/app-mobile/components/accessibility/FocusControl/ModalWrapper.js
-packages/app-mobile/components/accessibility/FocusControl/types.js
 packages/app-mobile/components/app-nav.js
 packages/app-mobile/components/base-screen.js
 packages/app-mobile/components/biometrics/BiometricPopup.js
 packages/app-mobile/components/biometrics/biometricAuthenticate.js
 packages/app-mobile/components/biometrics/sensorInfo.js
 packages/app-mobile/components/buttons/FloatingActionButton.js
-packages/app-mobile/components/buttons/LabelledIconButton.js
-packages/app-mobile/components/buttons/MultiTouchableOpacity.js
 packages/app-mobile/components/buttons/TextButton.js
 packages/app-mobile/components/buttons/index.js
 packages/app-mobile/components/getResponsiveValue.test.js
@@ -759,11 +738,8 @@ packages/app-mobile/components/screens/ConfigScreen/SectionSelector/SectionTab.j
 packages/app-mobile/components/screens/ConfigScreen/SectionSelector/index.js
 packages/app-mobile/components/screens/ConfigScreen/SettingComponent.js
 packages/app-mobile/components/screens/ConfigScreen/SettingItem.js
-packages/app-mobile/components/screens/ConfigScreen/SettingTextInput.js
 packages/app-mobile/components/screens/ConfigScreen/SettingsButton.js
 packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.js
-packages/app-mobile/components/screens/ConfigScreen/ValidatedIntegerInput.test.js
-packages/app-mobile/components/screens/ConfigScreen/ValidatedIntegerInput.js
 packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.js
 packages/app-mobile/components/screens/ConfigScreen/plugins/EnablePluginSupportPage.js
 packages/app-mobile/components/screens/ConfigScreen/plugins/InstalledPluginBox.js
@@ -803,9 +779,7 @@ packages/app-mobile/components/screens/Note/commands/setTags.js
 packages/app-mobile/components/screens/Note/commands/toggleVisiblePanes.js
 packages/app-mobile/components/screens/Note/types.js
 packages/app-mobile/components/screens/NoteTagsDialog.js
-packages/app-mobile/components/screens/Notes/NewNoteButton.test.js
-packages/app-mobile/components/screens/Notes/NewNoteButton.js
-packages/app-mobile/components/screens/Notes/Notes.js
+packages/app-mobile/components/screens/Notes.js
 packages/app-mobile/components/screens/SearchScreen/SearchResults.js
 packages/app-mobile/components/screens/SearchScreen/index.js
 packages/app-mobile/components/screens/ShareManager/AcceptedShareItem.js
@@ -860,7 +834,6 @@ packages/app-mobile/utils/createRootStyle.js
 packages/app-mobile/utils/database-driver-react-native.js
 packages/app-mobile/utils/database-driver-react-native.web.js
 packages/app-mobile/utils/debounce.js
-packages/app-mobile/utils/focusView.js
 packages/app-mobile/utils/fs-driver/constants.js
 packages/app-mobile/utils/fs-driver/fs-driver-rn.js
 packages/app-mobile/utils/fs-driver/fs-driver-rn.web.js
@@ -873,10 +846,9 @@ packages/app-mobile/utils/fs-driver/testUtil/createFilesFromPathRecord.js
 packages/app-mobile/utils/fs-driver/testUtil/verifyDirectoryMatches.js
 packages/app-mobile/utils/getPackageInfo.js
 packages/app-mobile/utils/getVersionInfoText.js
-packages/app-mobile/utils/hooks/useKeyboardState.js
+packages/app-mobile/utils/hooks/useKeyboardVisible.js
 packages/app-mobile/utils/hooks/useOnLongPressProps.js
 packages/app-mobile/utils/hooks/useReduceMotionEnabled.js
-packages/app-mobile/utils/hooks/useSafeAreaPadding.js
 packages/app-mobile/utils/image/fileToImage.web.js
 packages/app-mobile/utils/image/getImageDimensions.js
 packages/app-mobile/utils/image/resizeImage.js
@@ -885,7 +857,6 @@ packages/app-mobile/utils/injectedJs.js
 packages/app-mobile/utils/ipc/RNToWebViewMessenger.js
 packages/app-mobile/utils/ipc/WebViewToRNMessenger.js
 packages/app-mobile/utils/lockToSingleInstance.js
-packages/app-mobile/utils/makeShowMessageBox.test.js
 packages/app-mobile/utils/makeShowMessageBox.js
 packages/app-mobile/utils/pickDocument.js
 packages/app-mobile/utils/polyfills/bufferPolyfill.js
@@ -926,8 +897,6 @@ packages/editor/CodeMirror/editorCommands/duplicateLine.js
 packages/editor/CodeMirror/editorCommands/editorCommands.js
 packages/editor/CodeMirror/editorCommands/insertLineAfter.test.js
 packages/editor/CodeMirror/editorCommands/insertLineAfter.js
-packages/editor/CodeMirror/editorCommands/jumpToHash.test.js
-packages/editor/CodeMirror/editorCommands/jumpToHash.js
 packages/editor/CodeMirror/editorCommands/sortSelectedLines.test.js
 packages/editor/CodeMirror/editorCommands/sortSelectedLines.js
 packages/editor/CodeMirror/editorCommands/supportsCommand.js
@@ -943,8 +912,6 @@ packages/editor/CodeMirror/markdown/computeSelectionFormatting.test.js
 packages/editor/CodeMirror/markdown/computeSelectionFormatting.js
 packages/editor/CodeMirror/markdown/decoratorExtension.test.js
 packages/editor/CodeMirror/markdown/decoratorExtension.js
-packages/editor/CodeMirror/markdown/insertNewlineContinueMarkup.test.js
-packages/editor/CodeMirror/markdown/insertNewlineContinueMarkup.js
 packages/editor/CodeMirror/markdown/markdownCommands.bulletedVsChecklist.test.js
 packages/editor/CodeMirror/markdown/markdownCommands.test.js
 packages/editor/CodeMirror/markdown/markdownCommands.toggleList.test.js
@@ -1008,8 +975,6 @@ packages/fork-htmlparser2/src/__tests__/events.js
 packages/fork-htmlparser2/src/__tests__/stream.js
 packages/fork-htmlparser2/src/index.spec.js
 packages/fork-htmlparser2/src/index.js
-packages/fork-uslug/lib/uslug.test.js
-packages/fork-uslug/lib/uslug.js
 packages/generator-joplin/generators/app/templates/api/index.js
 packages/generator-joplin/generators/app/templates/api/noteListType.js
 packages/generator-joplin/generators/app/templates/api/types.js
@@ -1061,7 +1026,6 @@ packages/lib/commands/renderMarkup.test.js
 packages/lib/commands/renderMarkup.js
 packages/lib/commands/showEditorPlugin.js
 packages/lib/commands/synchronize.js
-packages/lib/commands/toggleAllFolders.test.js
 packages/lib/commands/toggleAllFolders.js
 packages/lib/commands/toggleEditorPlugin.js
 packages/lib/components/EncryptionConfigScreen/utils.test.js
@@ -1099,8 +1063,6 @@ packages/lib/fs-driver-base.js
 packages/lib/fs-driver-node.js
 packages/lib/fsDriver.test.js
 packages/lib/geolocation-node.js
-packages/lib/getAppName.test.js
-packages/lib/getAppName.js
 packages/lib/hooks/useAsyncEffect.js
 packages/lib/hooks/useElementSize.js
 packages/lib/hooks/useEventListener.js

.eslintrc.js

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

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
-blank_issues_enabled: true
+blank_issues_enabled: false
 contact_links:
     - name: Feature Requests
       url: https://discourse.joplinapp.org/c/features/
       about: Discuss ideas for new features or changes
     - name: Support
       url: https://discourse.joplinapp.org/c/support/
-      about: Please ask for help here
+      about: Please ask for help here

.github/scripts/publish_docker_manifest.sh

@@ -1,34 +0,0 @@
-#!/bin/bash
-
-VERSION=$(echo "$GIT_TAG_NAME" | grep -oE '[0-9]+\.[0-9]+\.[0-9]+')
-
-echo "GIT_TAG_NAME=$GIT_TAG_NAME"
-echo "VERSION=$VERSION"
-echo "SERVER_TAG_PREFIX=$SERVER_TAG_PREFIX"
-echo "SERVER_REPOSITORY=$SERVER_REPOSITORY"
-
-# Check if it's a server release, otherwise exit
-if [[ $GIT_TAG_NAME != $SERVER_TAG_PREFIX-* ]]; then
-	exit 0
-fi
-
-docker manifest inspect $SERVER_REPOSITORY:arm64-$VERSION > /dev/null 2>&1
-if [ $? -ne 0 ]; then
-	echo "Image $SERVER_REPOSITORY:arm64-$VERSION does not exist on the remote registry."
-	exit 0
-fi
-
-docker manifest inspect $SERVER_REPOSITORY:amd64-$VERSION > /dev/null 2>&1
-if [ $? -ne 0 ]; then
-	echo "Image $SERVER_REPOSITORY:amd64-$VERSION does not exist on the remote registry."
-	exit 0
-fi
-
-docker manifest create $SERVER_REPOSITORY:$VERSION \
-	$SERVER_REPOSITORY:arm64-$VERSION \
-	$SERVER_REPOSITORY:amd64-$VERSION
-
-docker manifest annotate $SERVER_REPOSITORY:$VERSION $SERVER_REPOSITORY:arm64-$VERSION --arch arm64
-docker manifest annotate $SERVER_REPOSITORY:$VERSION $SERVER_REPOSITORY:amd64-$VERSION --arch amd64
-
-docker manifest push $SERVER_REPOSITORY:$VERSION

.github/scripts/run_ci.sh

@@ -35,8 +35,6 @@ else
 	IS_MACOS=1
 fi
 
-DOCKER_IMAGE_PLATFORM="linux/amd64"
-
 # Tests can randomly fail in some cases, so only run them when not publishing
 # a release
 RUN_TESTS=0
@@ -45,33 +43,10 @@ if [ "$IS_SERVER_RELEASE" = 0 ] && [ "$IS_DESKTOP_RELEASE" = 0 ]; then
 	RUN_TESTS=1
 fi
 
-if [ "$RUNNER_ARCH" == "ARM64" ] && [ "$IS_SERVER_RELEASE" == "0" ]; then
-	# We exit now because nothing works properly with the ARM64 architecture.
-	# We only proceed  if building the server image.
-	echo "Running on ARM64 and not trying to build server image - early exit"
-	exit 0
-fi
-
-if [ "$RUNNER_ARCH" == "ARM64" ]; then
-	# Canvas is only needed for tests and it doesn't build in ARM64 so remove it
-	RUN_TESTS=0
-	cd "$ROOT_DIR/packages/lib"
-	yarn remove canvas
-	cd "$ROOT_DIR"
-
-	DOCKER_IMAGE_PLATFORM="linux/arm64"
-
-	# Delete certain directories because `yarn install` will fail on ARM64.
-	rm -rf app-desktop
-	rm -rf app-mobile
-fi
-
 # =============================================================================
 # Print environment
 # =============================================================================
 
-echo "RUNNER_OS=$RUNNER_OS"
-echo "RUNNER_ARCH=$RUNNER_ARCH"
 echo "GITHUB_WORKFLOW=$GITHUB_WORKFLOW"
 echo "GITHUB_EVENT_NAME=$GITHUB_EVENT_NAME"
 echo "GITHUB_REF=$GITHUB_REF"
@@ -80,7 +55,6 @@ 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 "DOCKER_IMAGE_PLATFORM=$DOCKER_IMAGE_PLATFORM"
 
 echo "IS_CONTINUOUS_INTEGRATION=$IS_CONTINUOUS_INTEGRATION"
 echo "IS_PULL_REQUEST=$IS_PULL_REQUEST"
@@ -303,7 +277,7 @@ if [ "$IS_DESKTOP_RELEASE" == "1" ]; then
 elif [[ $IS_LINUX = 1 ]] && [ "$IS_SERVER_RELEASE" == "1" ]; then
 	echo "Step: Building Docker Image..."
 	cd "$ROOT_DIR"
-	yarn buildServerDocker --platform $DOCKER_IMAGE_PLATFORM --tag-name $GIT_TAG_NAME --push-images --repository $SERVER_REPOSITORY
+	yarn buildServerDocker --tag-name $GIT_TAG_NAME --push-images --repository $SERVER_REPOSITORY
 else
 	echo "Step: Building but *not* publishing desktop application..."
 	

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

@@ -9,12 +9,47 @@ jobs:
       matrix:
         # Do not use unbuntu-latest because it causes `The operation was canceled` failures:
         # https://github.com/actions/runner-images/issues/6709
-        os: [macos-13, ubuntu-22.04, windows-2019, ubuntu-22.04-arm]
+        os: [macos-13, ubuntu-20.04, windows-2019]
     steps:
-      - uses: actions/checkout@v4
 
-      - name: Setup build environment
-        uses: ./.github/workflows/shared/setup-build-environment
+      # Trying to fix random networking issues on Windows
+      # https://github.com/actions/runner-images/issues/1187#issuecomment-686735760
+      - name: Disable TCP/UDP offload on Windows
+        if: runner.os == 'Windows'
+        run: Disable-NetAdapterChecksumOffload -Name * -TcpIPv4 -UdpIPv4 -TcpIPv6 -UdpIPv6
+
+      - name: Disable TCP/UDP offload on Linux
+        if: runner.os == 'Linux'
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Disable TCP/UDP offload on macOS
+        if: runner.os == 'macOS'
+        run: |
+          sudo sysctl -w net.link.generic.system.hwcksum_tx=0
+          sudo sysctl -w net.link.generic.system.hwcksum_rx=0
+
+      # Silence apt-get update errors (for example when a module doesn't
+      # exist) since otherwise it will make the whole build fails, even though
+      # it might work without update. libsecret-1-dev is required for keytar -
+      # https://github.com/atom/node-keytar
+
+      - name: Install Linux dependencies
+        if: runner.os == 'Linux'
+        run: |
+          sudo apt-get update || true
+          sudo apt-get install -y gettext
+          sudo apt-get install -y libsecret-1-dev
+          sudo apt-get install -y translate-toolkit
+          sudo apt-get install -y rsync
+          # Provides a virtual display on Linux. Used for Playwright integration
+          # testing.
+          sudo apt-get install -y xvfb
+
+      - name: Install macOs dependencies
+        if: runner.os == 'macOS'
+        run: |
+          # Required for building the canvas package
+          brew install pango
 
       - name: Install Docker Engine
         # if: runner.os == 'Linux' && startsWith(github.ref, 'refs/tags/server-v')
@@ -27,11 +62,26 @@ jobs:
           sudo apt-get install -y lsb-release
           curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
           echo \
-              "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
+              "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
               $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
           sudo apt-get update || true
-          sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin
+          sudo apt-get install -y docker-ce docker-ce-cli containerd.io
 
+      - uses: actions/checkout@v4
+      - uses: olegtarasov/get-tag@v2.1.3
+      - uses: dtolnay/rust-toolchain@stable
+      - uses: actions/setup-node@v4
+        with:
+          # We need to pin the version to 18.15, because 18.16+ fails with this error:
+          # https://github.com/facebook/react-native/issues/36440
+          node-version: '18.15.0'
+          cache: 'yarn'
+
+      - name: Install Yarn
+        run: |
+          # https://yarnpkg.com/getting-started/install
+          corepack enable
+      
       # Login to Docker only if we're on a server release tag. If we run this on
       # a pull request it will fail because the PR doesn't have access to
       # secrets
@@ -41,6 +91,15 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      # macos-latest ships with Python 3.12 by default, but this removes a
+      # utility that's used by electron-builder (distutils) so we need to pin
+      # Python to an earlier version.
+      # Fixes error `ModuleNotFoundError: No module named 'distutils'`
+      # Ref: https://github.com/nodejs/node-gyp/issues/2869
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+
       - name: Run tests, build and publish Linux and macOS apps
         if: runner.os == 'Linux' || runner.os == 'macOs'
         env:
@@ -84,15 +143,6 @@ jobs:
         run: |
           yarn install && cd packages/app-desktop && yarn dist --publish=never
 
-      - name: Publish Docker manifest
-        if: runner.os == 'Linux'
-        env:
-          SERVER_REPOSITORY: joplin/server
-          SERVER_TAG_PREFIX: server
-        run: |
-          chmod 700 "${GITHUB_WORKSPACE}/.github/scripts/publish_docker_manifest.sh"
-          "${GITHUB_WORKSPACE}/.github/scripts/publish_docker_manifest.sh"
-
   ServerDockerImage:
     if: github.repository == 'laurent22/joplin'
     runs-on: ${{ matrix.os }}
@@ -100,7 +150,7 @@ jobs:
       matrix:
         # Do not use unbuntu-latest because it causes `The operation was canceled` failures:
         # https://github.com/actions/runner-images/issues/6709
-        os: [ubuntu-22.04, ubuntu-22.04-arm]
+        os: [ubuntu-20.04]
     steps:
 
       - name: Install Docker Engine
@@ -112,10 +162,10 @@ jobs:
           sudo apt-get install -y lsb-release
           curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
           echo \
-              "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
+              "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
               $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
           sudo apt-get update || true
-          sudo apt-get install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin
+          sudo apt-get install -y docker-ce docker-ce-cli containerd.io
 
       - uses: actions/checkout@v4
 
@@ -133,30 +183,17 @@ jobs:
         env:
           BUILD_SEQUENCIAL: 1
         run: |
-          if [ "$RUNNER_ARCH" == "ARM64" ]; then
-            DOCKER_IMAGE_PLATFORM="linux/arm64"
-          fi
-
-          echo "RUNNER_OS=$RUNNER_OS"
-          echo "RUNNER_ARCH=$RUNNER_ARCH"
-          echo "DOCKER_IMAGE_PLATFORM=$DOCKER_IMAGE_PLATFORM"
-
-          # Canvas is only needed for tests and it doesn't build in ARM64 so remove it
-          cd packages/lib
-          yarn remove canvas
-          cd ../..
-          
           yarn install
-          yarn buildServerDocker --platform $DOCKER_IMAGE_PLATFORM --tag-name server-v0.0.0 --repository joplin/server
+          yarn buildServerDocker --tag-name server-v0.0.0 --repository joplin/server
 
           # Basic test to ensure that the created build is valid. It should exit with
-          # code 0 if it works.
-          docker run joplin/server:$(dpkg --print-architecture)-0.0.0 node dist/app.js migrate list
+          # code 0  if it works.
+          docker run joplin/server:0.0.0-beta node dist/app.js migrate list
  
       - name: Check HTTP request
         run: |
           # Need to pass environment variables:
-          docker run -p 22300:22300 joplin/server:$(dpkg --print-architecture)-0.0.0 node dist/app.js --env dev &
+          docker run -p 22300:22300 joplin/server:0.0.0-beta node dist/app.js --env dev &
 
           # Wait for server to start
           sleep 30

.github/workflows/shared/setup-build-environment/action.yml

@@ -1,72 +0,0 @@
-name: 'Setup build environment'
-description: 'Install Joplin build dependencies'
-runs:
-  using: 'composite'
-  steps:
-    # Trying to fix random networking issues on Windows
-    # https://github.com/actions/runner-images/issues/1187#issuecomment-686735760
-    - name: Disable TCP/UDP offload on Windows
-      if: runner.os == 'Windows'
-      shell: pwsh
-      run: Disable-NetAdapterChecksumOffload -Name * -TcpIPv4 -UdpIPv4 -TcpIPv6 -UdpIPv6
-
-    - name: Disable TCP/UDP offload on Linux
-      if: runner.os == 'Linux'
-      shell: bash
-      run: sudo ethtool -K eth0 tx off rx off
-
-    - name: Disable TCP/UDP offload on macOS
-      if: runner.os == 'macOS'
-      shell: bash
-      run: |
-        sudo sysctl -w net.link.generic.system.hwcksum_tx=0
-        sudo sysctl -w net.link.generic.system.hwcksum_rx=0
-
-    # Silence apt-get update errors (for example when a module doesn't
-    # exist) since otherwise it will make the whole build fails, even though
-    # it might work without update. libsecret-1-dev is required for keytar -
-    # https://github.com/atom/node-keytar
-
-    - name: Install Linux dependencies
-      if: runner.os == 'Linux'
-      shell: bash
-      run: |
-        sudo apt-get update || true
-        sudo apt-get install -y gettext
-        sudo apt-get install -y libsecret-1-dev
-        sudo apt-get install -y translate-toolkit
-        sudo apt-get install -y rsync
-        # Provides a virtual display on Linux. Used for Playwright integration
-        # testing.
-        sudo apt-get install -y xvfb
-
-    - name: Install macOs dependencies
-      if: runner.os == 'macOS'
-      shell: bash
-      run: |
-        # Required for building the canvas package
-        brew install pango
-
-    - uses: olegtarasov/get-tag@v2.1.3
-    - uses: dtolnay/rust-toolchain@stable
-    - uses: actions/setup-node@v4
-      with:
-        # We need to pin the version to 18.15, because 18.16+ fails with this error:
-        # https://github.com/facebook/react-native/issues/36440
-        node-version: '18.15.0'
-        cache: 'yarn'
-
-    - name: Install Yarn
-      shell: bash
-      run: |
-        # https://yarnpkg.com/getting-started/install
-        corepack enable
-
-    # macos-latest ships with Python 3.12 by default, but this removes a
-    # utility that's used by electron-builder (distutils) so we need to pin
-    # Python to an earlier version.
-    # Fixes error `ModuleNotFoundError: No module named 'distutils'`
-    # Ref: https://github.com/nodejs/node-gyp/issues/2869
-    - uses: actions/setup-python@v5
-      with:
-        python-version: '3.11'

.github/workflows/ui-tests.yml

@@ -1,30 +0,0 @@
-name: Joplin UI tests
-on: [push, pull_request]
-permissions:
-  contents: read
-jobs:
-  Main:
-    # Don't run on forks
-    if: github.repository == 'laurent22/joplin'
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        os: [macos-13, ubuntu-22.04, windows-2025]
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup build environment
-        uses: ./.github/workflows/shared/setup-build-environment
-      - name: Build
-        run: yarn install
-      - name: Run UI tests
-        shell: bash
-        run: |
-          cd ${GITHUB_WORKSPACE}/packages/app-desktop/
-          bash ./integration-tests/run-ci.sh
-      # See https://playwright.dev/docs/ci-intro#setting-up-github-actions
-      - uses: actions/upload-artifact@v4
-        if: ${{ !cancelled() }}
-        with:
-          name: playwright-report-${{ matrix.os }}
-          path: packages/app-desktop/playwright-report/
-          retention-days: 7

.gitignore

@@ -134,9 +134,7 @@ packages/app-desktop/commands/exportNotes.js
 packages/app-desktop/commands/focusElement.js
 packages/app-desktop/commands/index.js
 packages/app-desktop/commands/openNoteInNewWindow.js
-packages/app-desktop/commands/openPrimaryAppInstance.js
 packages/app-desktop/commands/openProfileDirectory.js
-packages/app-desktop/commands/openSecondaryAppInstance.js
 packages/app-desktop/commands/replaceMisspelling.js
 packages/app-desktop/commands/restoreNoteRevision.js
 packages/app-desktop/commands/startExternalEditing.js
@@ -241,7 +239,6 @@ packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useKeyboardRefocusHan
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useLinkTooltips.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useScroll.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useTabIndenter.js
-packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useTextPatternsLookup.js
 packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/useWebViewApi.js
 packages/app-desktop/gui/NoteEditor/NoteEditor.js
 packages/app-desktop/gui/NoteEditor/NoteTitle/NoteTitleBar.js
@@ -250,7 +247,6 @@ packages/app-desktop/gui/NoteEditor/WarningBanner/BannerContent.js
 packages/app-desktop/gui/NoteEditor/WarningBanner/WarningBanner.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementNoteBody.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementNoteTitle.js
-packages/app-desktop/gui/NoteEditor/commands/focusElementNoteViewer.js
 packages/app-desktop/gui/NoteEditor/commands/focusElementToolbar.js
 packages/app-desktop/gui/NoteEditor/commands/index.js
 packages/app-desktop/gui/NoteEditor/commands/pasteAsText.js
@@ -332,16 +328,13 @@ packages/app-desktop/gui/NoteSearchBar.js
 packages/app-desktop/gui/NoteStatusBar.js
 packages/app-desktop/gui/NoteTextViewer.js
 packages/app-desktop/gui/NoteToolbar/NoteToolbar.js
+packages/app-desktop/gui/NotyfContext.js
 packages/app-desktop/gui/OneDriveLoginScreen.js
 packages/app-desktop/gui/PasswordInput/LabelledPasswordInput.js
 packages/app-desktop/gui/PasswordInput/PasswordInput.js
 packages/app-desktop/gui/PasswordInput/types.js
 packages/app-desktop/gui/PdfViewer.js
 packages/app-desktop/gui/PluginNotification/PluginNotification.js
-packages/app-desktop/gui/PopupNotification/NotificationItem.js
-packages/app-desktop/gui/PopupNotification/PopupNotificationList.js
-packages/app-desktop/gui/PopupNotification/PopupNotificationProvider.js
-packages/app-desktop/gui/PopupNotification/types.js
 packages/app-desktop/gui/PromptDialog.js
 packages/app-desktop/gui/ResizableLayout/LayoutItemContainer.js
 packages/app-desktop/gui/ResizableLayout/MoveButtons.js
@@ -403,7 +396,6 @@ packages/app-desktop/gui/ToolbarBase.js
 packages/app-desktop/gui/ToolbarButton/ToolbarButton.js
 packages/app-desktop/gui/ToolbarSpace.js
 packages/app-desktop/gui/TrashNotification/TrashNotification.js
-packages/app-desktop/gui/TrashNotification/TrashNotificationMessage.js
 packages/app-desktop/gui/UpdateNotification/UpdateNotification.js
 packages/app-desktop/gui/WindowCommandsAndDialogs/AppDialogs.js
 packages/app-desktop/gui/WindowCommandsAndDialogs/ModalMessageOverlay.js
@@ -508,8 +500,8 @@ packages/app-desktop/integration-tests/simpleBackup.spec.js
 packages/app-desktop/integration-tests/util/activateMainMenuItem.js
 packages/app-desktop/integration-tests/util/createStartupArgs.js
 packages/app-desktop/integration-tests/util/extendedExpect.js
+packages/app-desktop/integration-tests/util/firstNonDevToolsWindow.js
 packages/app-desktop/integration-tests/util/getImageSourceSize.js
-packages/app-desktop/integration-tests/util/getMainWindow.js
 packages/app-desktop/integration-tests/util/setDarkMode.js
 packages/app-desktop/integration-tests/util/setFilePickerResponse.js
 packages/app-desktop/integration-tests/util/setMessageBoxResponse.js
@@ -530,16 +522,13 @@ packages/app-desktop/services/plugins/UserWebview.js
 packages/app-desktop/services/plugins/UserWebviewDialog.js
 packages/app-desktop/services/plugins/UserWebviewDialogButtonBar.js
 packages/app-desktop/services/plugins/hooks/useContentSize.js
-packages/app-desktop/services/plugins/hooks/useFormData.js
 packages/app-desktop/services/plugins/hooks/useHtmlLoader.js
-packages/app-desktop/services/plugins/hooks/useMessageHandler.js
 packages/app-desktop/services/plugins/hooks/useScriptLoader.js
 packages/app-desktop/services/plugins/hooks/useSubmitHandler.js
 packages/app-desktop/services/plugins/hooks/useThemeCss.test.js
 packages/app-desktop/services/plugins/hooks/useThemeCss.js
 packages/app-desktop/services/plugins/hooks/useViewIsReady.js
 packages/app-desktop/services/plugins/hooks/useWebviewToPluginMessages.js
-packages/app-desktop/services/plugins/types.js
 packages/app-desktop/services/restart.js
 packages/app-desktop/services/sortOrder/PerFolderSortOrderService.test.js
 packages/app-desktop/services/sortOrder/PerFolderSortOrderService.js
@@ -567,7 +556,6 @@ packages/app-desktop/utils/restartInSafeModeFromMain.test.js
 packages/app-desktop/utils/restartInSafeModeFromMain.js
 packages/app-desktop/utils/window/types.js
 packages/app-mobile/PluginAssetsLoader.js
-packages/app-mobile/commands/dismissPluginPanels.js
 packages/app-mobile/commands/index.js
 packages/app-mobile/commands/newNote.test.js
 packages/app-mobile/commands/newNote.js
@@ -577,7 +565,6 @@ packages/app-mobile/commands/scrollToHash.js
 packages/app-mobile/commands/util/goToNote.js
 packages/app-mobile/commands/util/showResource.js
 packages/app-mobile/components/BetaChip.js
-packages/app-mobile/components/BottomDrawer.js
 packages/app-mobile/components/CameraView/ActionButtons.js
 packages/app-mobile/components/CameraView/Camera/index.jest.js
 packages/app-mobile/components/CameraView/Camera/index.js
@@ -671,22 +658,15 @@ packages/app-mobile/components/SelectDateTimeDialog.js
 packages/app-mobile/components/SideMenu.js
 packages/app-mobile/components/SideMenuContentNote.js
 packages/app-mobile/components/TextInput.js
-packages/app-mobile/components/accessibility/AccessibleView.test.js
+packages/app-mobile/components/ToggleSpaceButton.js
+packages/app-mobile/components/accessibility/AccessibleModalMenu.js
 packages/app-mobile/components/accessibility/AccessibleView.js
-packages/app-mobile/components/accessibility/FocusControl/AutoFocusProvider.js
-packages/app-mobile/components/accessibility/FocusControl/FocusControl.js
-packages/app-mobile/components/accessibility/FocusControl/FocusControlProvider.js
-packages/app-mobile/components/accessibility/FocusControl/MainAppContent.js
-packages/app-mobile/components/accessibility/FocusControl/ModalWrapper.js
-packages/app-mobile/components/accessibility/FocusControl/types.js
 packages/app-mobile/components/app-nav.js
 packages/app-mobile/components/base-screen.js
 packages/app-mobile/components/biometrics/BiometricPopup.js
 packages/app-mobile/components/biometrics/biometricAuthenticate.js
 packages/app-mobile/components/biometrics/sensorInfo.js
 packages/app-mobile/components/buttons/FloatingActionButton.js
-packages/app-mobile/components/buttons/LabelledIconButton.js
-packages/app-mobile/components/buttons/MultiTouchableOpacity.js
 packages/app-mobile/components/buttons/TextButton.js
 packages/app-mobile/components/buttons/index.js
 packages/app-mobile/components/getResponsiveValue.test.js
@@ -733,11 +713,8 @@ packages/app-mobile/components/screens/ConfigScreen/SectionSelector/SectionTab.j
 packages/app-mobile/components/screens/ConfigScreen/SectionSelector/index.js
 packages/app-mobile/components/screens/ConfigScreen/SettingComponent.js
 packages/app-mobile/components/screens/ConfigScreen/SettingItem.js
-packages/app-mobile/components/screens/ConfigScreen/SettingTextInput.js
 packages/app-mobile/components/screens/ConfigScreen/SettingsButton.js
 packages/app-mobile/components/screens/ConfigScreen/SettingsToggle.js
-packages/app-mobile/components/screens/ConfigScreen/ValidatedIntegerInput.test.js
-packages/app-mobile/components/screens/ConfigScreen/ValidatedIntegerInput.js
 packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.js
 packages/app-mobile/components/screens/ConfigScreen/plugins/EnablePluginSupportPage.js
 packages/app-mobile/components/screens/ConfigScreen/plugins/InstalledPluginBox.js
@@ -777,9 +754,7 @@ packages/app-mobile/components/screens/Note/commands/setTags.js
 packages/app-mobile/components/screens/Note/commands/toggleVisiblePanes.js
 packages/app-mobile/components/screens/Note/types.js
 packages/app-mobile/components/screens/NoteTagsDialog.js
-packages/app-mobile/components/screens/Notes/NewNoteButton.test.js
-packages/app-mobile/components/screens/Notes/NewNoteButton.js
-packages/app-mobile/components/screens/Notes/Notes.js
+packages/app-mobile/components/screens/Notes.js
 packages/app-mobile/components/screens/SearchScreen/SearchResults.js
 packages/app-mobile/components/screens/SearchScreen/index.js
 packages/app-mobile/components/screens/ShareManager/AcceptedShareItem.js
@@ -834,7 +809,6 @@ packages/app-mobile/utils/createRootStyle.js
 packages/app-mobile/utils/database-driver-react-native.js
 packages/app-mobile/utils/database-driver-react-native.web.js
 packages/app-mobile/utils/debounce.js
-packages/app-mobile/utils/focusView.js
 packages/app-mobile/utils/fs-driver/constants.js
 packages/app-mobile/utils/fs-driver/fs-driver-rn.js
 packages/app-mobile/utils/fs-driver/fs-driver-rn.web.js
@@ -847,10 +821,9 @@ packages/app-mobile/utils/fs-driver/testUtil/createFilesFromPathRecord.js
 packages/app-mobile/utils/fs-driver/testUtil/verifyDirectoryMatches.js
 packages/app-mobile/utils/getPackageInfo.js
 packages/app-mobile/utils/getVersionInfoText.js
-packages/app-mobile/utils/hooks/useKeyboardState.js
+packages/app-mobile/utils/hooks/useKeyboardVisible.js
 packages/app-mobile/utils/hooks/useOnLongPressProps.js
 packages/app-mobile/utils/hooks/useReduceMotionEnabled.js
-packages/app-mobile/utils/hooks/useSafeAreaPadding.js
 packages/app-mobile/utils/image/fileToImage.web.js
 packages/app-mobile/utils/image/getImageDimensions.js
 packages/app-mobile/utils/image/resizeImage.js
@@ -859,7 +832,6 @@ packages/app-mobile/utils/injectedJs.js
 packages/app-mobile/utils/ipc/RNToWebViewMessenger.js
 packages/app-mobile/utils/ipc/WebViewToRNMessenger.js
 packages/app-mobile/utils/lockToSingleInstance.js
-packages/app-mobile/utils/makeShowMessageBox.test.js
 packages/app-mobile/utils/makeShowMessageBox.js
 packages/app-mobile/utils/pickDocument.js
 packages/app-mobile/utils/polyfills/bufferPolyfill.js
@@ -900,8 +872,6 @@ packages/editor/CodeMirror/editorCommands/duplicateLine.js
 packages/editor/CodeMirror/editorCommands/editorCommands.js
 packages/editor/CodeMirror/editorCommands/insertLineAfter.test.js
 packages/editor/CodeMirror/editorCommands/insertLineAfter.js
-packages/editor/CodeMirror/editorCommands/jumpToHash.test.js
-packages/editor/CodeMirror/editorCommands/jumpToHash.js
 packages/editor/CodeMirror/editorCommands/sortSelectedLines.test.js
 packages/editor/CodeMirror/editorCommands/sortSelectedLines.js
 packages/editor/CodeMirror/editorCommands/supportsCommand.js
@@ -917,8 +887,6 @@ packages/editor/CodeMirror/markdown/computeSelectionFormatting.test.js
 packages/editor/CodeMirror/markdown/computeSelectionFormatting.js
 packages/editor/CodeMirror/markdown/decoratorExtension.test.js
 packages/editor/CodeMirror/markdown/decoratorExtension.js
-packages/editor/CodeMirror/markdown/insertNewlineContinueMarkup.test.js
-packages/editor/CodeMirror/markdown/insertNewlineContinueMarkup.js
 packages/editor/CodeMirror/markdown/markdownCommands.bulletedVsChecklist.test.js
 packages/editor/CodeMirror/markdown/markdownCommands.test.js
 packages/editor/CodeMirror/markdown/markdownCommands.toggleList.test.js
@@ -982,8 +950,6 @@ packages/fork-htmlparser2/src/__tests__/events.js
 packages/fork-htmlparser2/src/__tests__/stream.js
 packages/fork-htmlparser2/src/index.spec.js
 packages/fork-htmlparser2/src/index.js
-packages/fork-uslug/lib/uslug.test.js
-packages/fork-uslug/lib/uslug.js
 packages/generator-joplin/generators/app/templates/api/index.js
 packages/generator-joplin/generators/app/templates/api/noteListType.js
 packages/generator-joplin/generators/app/templates/api/types.js
@@ -1035,7 +1001,6 @@ packages/lib/commands/renderMarkup.test.js
 packages/lib/commands/renderMarkup.js
 packages/lib/commands/showEditorPlugin.js
 packages/lib/commands/synchronize.js
-packages/lib/commands/toggleAllFolders.test.js
 packages/lib/commands/toggleAllFolders.js
 packages/lib/commands/toggleEditorPlugin.js
 packages/lib/components/EncryptionConfigScreen/utils.test.js
@@ -1073,8 +1038,6 @@ packages/lib/fs-driver-base.js
 packages/lib/fs-driver-node.js
 packages/lib/fsDriver.test.js
 packages/lib/geolocation-node.js
-packages/lib/getAppName.test.js
-packages/lib/getAppName.js
 packages/lib/hooks/useAsyncEffect.js
 packages/lib/hooks/useElementSize.js
 packages/lib/hooks/useEventListener.js

.husky/pre-commit

@@ -1 +0,0 @@
-corepack yarn lint-staged

.yarn/patches/@react-native-community-slider-npm-4.4.4-d78e472f48.patch

@@ -0,0 +1,62 @@
+diff --git a/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java b/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
+index a5bb95eec3337b93a2338a2869a2bda176c91cae..87817688eb280c2f702c26dc35558c6a0a4db1ea 100644
+--- a/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
++++ b/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
+@@ -42,12 +42,20 @@ public class ReactSliderManager extends SimpleViewManager<ReactSlider> implement
+             public void onProgressChanged(SeekBar seekbar, int progress, boolean fromUser) {
+               ReactSlider slider = (ReactSlider)seekbar;
+ 
+-              if(progress < slider.getLowerLimit()) {
+-                progress = slider.getLowerLimit();
+-                seekbar.setProgress(progress);
+-              } else if (progress > slider.getUpperLimit()) {
+-                progress = slider.getUpperLimit();
+-                seekbar.setProgress(progress);
++              // During initialization, lowerLimit can be greater than upperLimit.
++              //
++              // If a change event is received during this, we need a check to prevent
++              // infinite recursion.
++              //
++              // Issue: https://github.com/callstack/react-native-slider/issues/571
++              if (slider.getLowerLimit() <= slider.getUpperLimit()) {
++                if(progress < slider.getLowerLimit()) {
++                  progress = slider.getLowerLimit();
++                  seekbar.setProgress(progress);
++                } else if (progress > slider.getUpperLimit()) {
++                  progress = slider.getUpperLimit();
++                  seekbar.setProgress(progress);
++                }
+               }
+ 
+               ReactContext reactContext = (ReactContext) seekbar.getContext();
+diff --git a/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java b/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
+index 3ff5930f85a3cd92c2549925f41058abb188a57e..ab3681fdfe0b736c97020e1434e450c8183e6f18 100644
+--- a/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
++++ b/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java
+@@ -30,12 +30,20 @@ public class ReactSliderManager extends SimpleViewManager<ReactSlider> {
+             public void onProgressChanged(SeekBar seekbar, int progress, boolean fromUser) {
+               ReactSlider slider = (ReactSlider)seekbar;
+ 
+-              if(progress < slider.getLowerLimit()) {
+-                progress = slider.getLowerLimit();
+-                seekbar.setProgress(progress);
+-              } else if(progress > slider.getUpperLimit()) {
+-                progress = slider.getUpperLimit();
+-                seekbar.setProgress(progress);
++              // During initialization, lowerLimit can be greater than upperLimit.
++              //
++              // If a change event is received during this, we need a check to prevent
++              // infinite recursion.
++              //
++              // Issue: https://github.com/callstack/react-native-slider/issues/571
++              if (slider.getLowerLimit() <= slider.getUpperLimit()) {
++                if(progress < slider.getLowerLimit()) {
++                  progress = slider.getLowerLimit();
++                  seekbar.setProgress(progress);
++                } else if (progress > slider.getUpperLimit()) {
++                  progress = slider.getUpperLimit();
++                  seekbar.setProgress(progress);
++                }
+               }
+ 
+               ReactContext reactContext = (ReactContext) seekbar.getContext();

.yarn/patches/husky-npm-3.1.0-5cc13e4e34.patch

@@ -0,0 +1,33 @@
+diff --git a/lib/runner/index.js b/lib/runner/index.js
+index 87e3b3957619728e3ed1ca61e2d83df1c49f928f..6d5ab905415da0577341c8f5b67d4806adcf7549 100644
+--- a/lib/runner/index.js
++++ b/lib/runner/index.js
+@@ -68,15 +68,19 @@ function run([, scriptPath, hookName = '', HUSKY_GIT_PARAMS], getStdinFn = get_s
+             return 0;
+         }
+         catch (err) {
+-            const noVerifyMessage = [
+-                'commit-msg',
+-                'pre-commit',
+-                'pre-rebase',
+-                'pre-push'
+-            ].includes(hookName)
+-                ? '(add --no-verify to bypass)'
+-                : '(cannot be bypassed with --no-verify due to Git specs)';
+-            console.log(`husky > ${hookName} hook failed ${noVerifyMessage}`);
++            // We do not want to print this "add --no-verify to bypass" message because that's
++            // literally what some developers do instead of trying to fix the errors.
++
++            // const noVerifyMessage = [
++            //     'commit-msg',
++            //     'pre-commit',
++            //     'pre-rebase',
++            //     'pre-push'
++            // ].includes(hookName)
++            //     ? '(add --no-verify to bypass)'
++            //     : '(cannot be bypassed with --no-verify due to Git specs)';
++            
++            console.log(`husky > ${hookName} hook failed (Please fix the errors listed above and try again)`);
+             return err.code;
+         }
+     });

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

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

Assets/JoplinLetterBlue.svg

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

Assets/TinyMCE/JoplinLists/src/main/ts/actions/ToggleList.ts

@@ -48,7 +48,7 @@ const updateListWithDetails = function (dom, el, detail) {
 };
 
 const removeStyles = (dom, element: HTMLElement, styles: string[]) => {
-  Tools.each(styles, (style) => dom.setStyle(element, style, ''));
+  Tools.each(styles, (style) => dom.setStyle(element, { [style]: '' }));
 };
 
 const getEndPointNode = function (editor, rng, start, root) {

Assets/WebsiteAssets/js/script.js

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

Assets/WebsiteAssets/templates/front.mustache

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

Dockerfile.server

@@ -7,9 +7,6 @@ FROM node:18 AS builder
 RUN apt-get update \
     && apt-get install -y \
     python3 tini \
-    # needed for node-canvas for ARM32 platform.
-    # See also https://github.com/Automattic/node-canvas/wiki/Installation:-Ubuntu-and-other-Debian-based-systems  
-    libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev \
     && rm -rf /var/lib/apt/lists/*
 
 # Enables Yarn
@@ -50,9 +47,9 @@ RUN sed --in-place '/onenote-converter/d' ./packages/lib/package.json
 # 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 --mount=type=cache,target=/build/.yarn/cache --mount=type=cache,target=/build/.yarn/berry/cache\
-    BUILD_SEQUENCIAL=1 yarn config set cacheFolder /build/.yarn/cache \
-    && yarn install --inline-builds
+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
@@ -84,11 +81,10 @@ CMD ["yarn", "start-prod"]
 ARG BUILD_DATE
 ARG REVISION
 ARG VERSION
-ARG SOURCE
 LABEL org.opencontainers.image.created="$BUILD_DATE" \
       org.opencontainers.image.title="Joplin Server" \
       org.opencontainers.image.description="Docker image for Joplin Server" \
       org.opencontainers.image.url="https://joplinapp.org/" \
       org.opencontainers.image.revision="$REVISION" \
-      org.opencontainers.image.source="$SOURCE" \
-      org.opencontainers.image.version="$VERSION"
+      org.opencontainers.image.source="https://github.com/laurent22/joplin.git" \
+      org.opencontainers.image.version="${VERSION}"

Joplin_install_and_update.sh

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

README.md

@@ -31,7 +31,7 @@ Please see the [donation page](https://github.com/laurent22/joplin/blob/dev/read
 # Sponsors
 
 <!-- SPONSORS-ORG -->
-<a href="https://seirei.ne.jp"><img title="Serei Network" width="256" src="https://joplinapp.org/images/sponsors/SeireiNetwork.png"/></a> <a href="https://www.hosting.de/nextcloud/?mtm_campaign=managed-nextcloud&amp;mtm_kwd=joplinapp&amp;mtm_source=joplinapp-webseite&amp;mtm_medium=banner"><img title="Hosting.de" width="256" src="https://joplinapp.org/images/sponsors/HostingDe.png"/></a> <a href="https://citricsheep.com"><img title="Citric Sheep" width="256" src="https://joplinapp.org/images/sponsors/CitricSheep.png"/></a> <a href="https://sorted.travel/?utm_source=joplinapp"><img title="Sorted Travel" width="256" src="https://joplinapp.org/images/sponsors/SortedTravel.png"/></a> <a href="https://celebian.com"><img title="Celebian" width="256" src="https://joplinapp.org/images/sponsors/Celebian.png"/></a> <a href="https://bestkru.com"><img title="BestKru" width="256" src="https://joplinapp.org/images/sponsors/BestKru.png"/></a> <a href="https://www.socialfollowers.uk/buy-tiktok-followers/"><img title="Social Followers" width="256" src="https://joplinapp.org/images/sponsors/SocialFollowers.png"/></a> <a href="https://stormlikes.com/"><img title="Stormlikes" width="256" src="https://joplinapp.org/images/sponsors/Stormlikes.png"/></a> <a href="https://route4me.com"><img title="Route4Me" width="256" src="https://joplinapp.org/images/sponsors/Route4Me.png"/></a> <a href="https://casinoreviews.net"><img title="Casino Reviews" width="256" src="https://joplinapp.org/images/sponsors/CasinoReviews.png"/></a> <a href="https://topagency.webflow.io"><img title="WebDesignAgency" width="256" src="https://joplinapp.org/images/sponsors/WebDesignAgency.png" alt="topagency"/></a> <a href="https://realgambling.ca/"><img title="RealGambling.ca" width="256" src="https://joplinapp.org/images/sponsors/RealGambling.png" alt="RealGambling.ca"/></a> <a href="https://essaypro.com/"><img title="write an essay online with EssayPro" width="256" src="https://joplinapp.org/images/sponsors/EssayPro.png" alt="write an essay online with EssayPro"/></a> <a href="https://www.slotozilla.com/nz/no-deposit-bonus"><img title="casino without making any upfront cost" width="256" src="https://joplinapp.org/images/sponsors/Slotozilla.png" alt="casino without making any upfront cost"/></a> <a href="https://www.reddit.com/r/tiktokRise/"><img title="Tiktok Rise" width="256" src="https://joplinapp.org/images/sponsors/TiktokRise.jpg" alt="Tiktok Rise"/></a> <a href="https://essaywriter.pro"><img title="write my essay services by EssayWriter" width="256" src="https://joplinapp.org/images/sponsors/EssayWriterPro.png" alt="write my essay services by EssayWriter"/></a>
+<a href="https://seirei.ne.jp"><img title="Serei Network" width="256" src="https://joplinapp.org/images/sponsors/SeireiNetwork.png"/></a> <a href="https://www.hosting.de/nextcloud/?mtm_campaign=managed-nextcloud&amp;mtm_kwd=joplinapp&amp;mtm_source=joplinapp-webseite&amp;mtm_medium=banner"><img title="Hosting.de" width="256" src="https://joplinapp.org/images/sponsors/HostingDe.png"/></a> <a href="https://citricsheep.com"><img title="Citric Sheep" width="256" src="https://joplinapp.org/images/sponsors/CitricSheep.png"/></a> <a href="https://sorted.travel/?utm_source=joplinapp"><img title="Sorted Travel" width="256" src="https://joplinapp.org/images/sponsors/SortedTravel.png"/></a> <a href="https://celebian.com"><img title="Celebian" width="256" src="https://joplinapp.org/images/sponsors/Celebian.png"/></a> <a href="https://bestkru.com"><img title="BestKru" width="256" src="https://joplinapp.org/images/sponsors/BestKru.png"/></a> <a href="https://www.socialfollowers.uk/buy-tiktok-followers/"><img title="Social Followers" width="256" src="https://joplinapp.org/images/sponsors/SocialFollowers.png"/></a> <a href="https://stormlikes.com/"><img title="Stormlikes" width="256" src="https://joplinapp.org/images/sponsors/Stormlikes.png"/></a> <a href="https://route4me.com"><img title="Route4Me" width="256" src="https://joplinapp.org/images/sponsors/Route4Me.png"/></a> <a href="https://casinoreviews.net"><img title="Casino Reviews" width="256" src="https://joplinapp.org/images/sponsors/CasinoReviews.png"/></a> <a href="https://useviral.com.br/"><img title="Comprar seguidores Instagram" width="256" src="https://joplinapp.org/images/sponsors/Useviral.png"/></a> <a href="https://ca.edubirdie.com/"><img title="Achieve academic success with Edubirdie — your trusted partner for expert writing assistance and resources!" width="256" src="https://joplinapp.org/images/sponsors/Edubirdie.png" alt="EduBirdie"/></a> <a href="https://topagency.webflow.io"><img title="WebDesignAgency" width="256" src="https://joplinapp.org/images/sponsors/WebDesignAgency.png" alt="web design agency"/></a> <a href="https://realgambling.ca/"><img title="RealGambling.ca" width="256" src="https://joplinapp.org/images/sponsors/RealGambling.png" alt="RealGambling.ca"/></a> <a href="https://essaypro.com/"><img title="write an essay online with EssayPro" width="256" src="https://joplinapp.org/images/sponsors/EssayPro.png" alt="write an essay online with EssayPro"/></a> <a href="https://www.slotozilla.com/nz/no-deposit-bonus"><img title="casino without making any upfront cost" width="256" src="https://joplinapp.org/images/sponsors/Slotozilla.png" alt="casino without making any upfront cost"/></a>
 <!-- SPONSORS-ORG -->
 
 * * *
@@ -42,7 +42,7 @@ Please see the [donation page](https://github.com/laurent22/joplin/blob/dev/read
 | <img width="50" src="https://avatars2.githubusercontent.com/u/97193607?s=96&v=4"/></br>[Akhil-CM](https://github.com/Akhil-CM) | <img width="50" src="https://avatars2.githubusercontent.com/u/552452?s=96&v=4"/></br>[andypiper](https://github.com/andypiper) | <img width="50" src="https://avatars2.githubusercontent.com/u/215668?s=96&v=4"/></br>[avanderberg](https://github.com/avanderberg) | <img width="50" src="https://avatars2.githubusercontent.com/u/67130?s=96&v=4"/></br>[chr15m](https://github.com/chr15m) |
 | <img width="50" src="https://avatars2.githubusercontent.com/u/1177810?s=96&v=4"/></br>[felixstorm](https://github.com/felixstorm) | <img width="50" src="https://avatars2.githubusercontent.com/u/8030470?s=96&v=4"/></br>[Galliver7](https://github.com/Galliver7) | <img width="50" src="https://avatars2.githubusercontent.com/u/64712218?s=96&v=4"/></br>[Hegghammer](https://github.com/Hegghammer) | <img width="50" src="https://avatars2.githubusercontent.com/u/11947658?s=96&v=4"/></br>[KentBrockman](https://github.com/KentBrockman) |
 | <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/327998?s=96&v=4"/></br>[sif](https://github.com/sif) | <img width="50" src="https://avatars2.githubusercontent.com/u/765564?s=96&v=4"/></br>[taskcruncher](https://github.com/taskcruncher) |
-| <img width="50" src="https://avatars2.githubusercontent.com/u/668977?s=96&v=4"/></br>[ugoertz](https://github.com/ugoertz) |       |       |       |
+|       |       |       |       |
 <!-- SPONSORS-GITHUB -->
 	
 # Community
@@ -50,10 +50,9 @@ Please see the [donation page](https://github.com/laurent22/joplin/blob/dev/read
 Name | Description
 --- | ---
 [Support Forum](https://discourse.joplinapp.org/) | This is the main place for general discussion about Joplin, user support, software development questions, and to discuss new features. Also where the latest beta versions are released and discussed.
-[Patreon page](https://www.patreon.com/joplin) |The latest news are often posted there
 [Bluesky feed](https://bsky.app/profile/joplinapp.bsky.social) | Follow us on Bluesky
 [Mastodon feed](https://mastodon.social/@joplinapp) | Follow us on Mastodon
-[YouTube](https://www.youtube.com/@joplinapp) | Discover information and tutorials on how to use the apps
+[Patreon page](https://www.patreon.com/joplin) |The latest news are often posted there
 [Discord server](https://discord.gg/VSj7AFHvpq) | Our chat server
 [LinkedIn](https://www.linkedin.com/company/joplin) | Our LinkedIn page
 [Lemmy Community](https://sopuli.xyz/c/joplinapp) | Also a good place to get help

crowdin.yml

@@ -6,19 +6,18 @@ files:
   - source: /readme/**/*
     translation: /readme/i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name%
     ignore: 
-      - /**/*.jpg
-      - /**/*.json
-      - /**/*.png
-      - /**/*.yml
       - /readme/_i18n
+      - /readme/i18n
       - /readme/about/changelog
       - /readme/about/stats.md
       - /readme/api
+      - /readme/dev
+      - /readme/news
       - /readme/cla.md
       - /readme/connection_check.md
-      - /readme/dev
-      - /readme/i18n
-      - /readme/licenses.md
-      - /readme/news
       - /readme/privacy.md
+      - /**/*.yml
+      - /**/*.json
+      - /**/*.png
+      - /**/*.jpg
     

devbox.json

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

package.json

@@ -38,7 +38,7 @@
     "linter-precommit": "eslint --resolve-plugins-relative-to . --fix --ext .js --ext .jsx --ext .ts --ext .tsx",
     "linter": "eslint --resolve-plugins-relative-to . --fix --quiet --ext .js --ext .jsx --ext .ts --ext .tsx",
     "packageJsonLint": "node ./packages/tools/packageJsonLint.js",
-    "postinstall": "husky && gulp build",
+    "postinstall": "gulp build",
     "postPreReleasesToForum": "node ./packages/tools/postPreReleasesToForum",
     "publishAll": "git pull && yarn buildParallel && lerna version --yes --no-private --no-git-tag-version && gulp completePublishAll",
     "releaseAndroid": "PATH=\"/usr/local/opt/openjdk@17/bin:$PATH\" node packages/tools/release-android.js",
@@ -64,6 +64,11 @@
     "watch": "yarn workspaces foreach --parallel --verbose --interlaced --jobs 999 run watch",
     "watchWebsite": "nodemon --delay 1 --watch Assets/WebsiteAssets --watch packages/tools/website --watch packages/tools/website/utils --watch packages/doc-builder/build --ext md,ts,js,mustache,css,tsx,gif,png,svg --exec \"node packages/tools/website/build.js && http-server --port 8077 ../joplin-website/docs -a localhost\""
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "corepack yarn lint-staged"
+    }
+  },
   "devDependencies": {
     "@crowdin/cli": "3",
     "@joplin/utils": "~2.12",
@@ -81,7 +86,7 @@
     "fs-extra": "11.2.0",
     "glob": "10.4.5",
     "gulp": "4.0.2",
-    "husky": "9.1.7",
+    "husky": "3.1.0",
     "lerna": "3.22.1",
     "lint-staged": "15.2.8",
     "madge": "7.0.0",
@@ -103,13 +108,14 @@
     "app-builder-lib@24.4.0": "patch:app-builder-lib@npm%3A24.4.0#./.yarn/patches/app-builder-lib-npm-24.4.0-05322ff057.patch",
     "nanoid": "patch:nanoid@npm%3A3.3.7#./.yarn/patches/nanoid-npm-3.3.7-98824ba130.patch",
     "pdfjs-dist": "patch:pdfjs-dist@npm%3A3.11.174#./.yarn/patches/pdfjs-dist-npm-3.11.174-67f2fee6d6.patch",
+    "@react-native-community/slider": "patch:@react-native-community/slider@npm%3A4.4.4#./.yarn/patches/@react-native-community-slider-npm-4.4.4-d78e472f48.patch",
+    "husky": "patch:husky@npm%3A3.1.0#./.yarn/patches/husky-npm-3.1.0-5cc13e4e34.patch",
     "chokidar@^2.0.0": "3.5.3",
     "react-native@0.74.1": "patch:react-native@npm%3A0.74.1#./.yarn/patches/react-native-npm-0.74.1-754c02ae9e.patch",
     "rn-fetch-blob@0.12.0": "patch:rn-fetch-blob@npm%3A0.12.0#./.yarn/patches/rn-fetch-blob-npm-0.12.0-cf02e3c544.patch",
     "app-builder-lib@26.0.0-alpha.7": "patch:app-builder-lib@npm%3A26.0.0-alpha.7#./.yarn/patches/app-builder-lib-npm-26.0.0-alpha.7-e1b3dca119.patch",
     "app-builder-lib@24.13.3": "patch:app-builder-lib@npm%3A24.13.3#./.yarn/patches/app-builder-lib-npm-24.13.3-86a66c0bf3.patch",
     "react-native-sqlite-storage@6.0.1": "patch:react-native-sqlite-storage@npm%3A6.0.1#./.yarn/patches/react-native-sqlite-storage-npm-6.0.1-8369d747bd.patch",
-    "react-native-paper@5.13.1": "patch:react-native-paper@npm%3A5.13.1#./.yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch",
-    "react-native-popup-menu@0.16.1": "patch:react-native-popup-menu@npm%3A0.16.1#./.yarn/patches/react-native-popup-menu-npm-0.16.1-28fd66ecb5.patch"
+    "react-native-paper@5.13.1": "patch:react-native-paper@npm%3A5.13.1#./.yarn/patches/react-native-paper-npm-5.13.1-f153e542e2.patch"
   }
 }

packages/app-cli/tests/support/plugins/content_script/src/markdownItTestPlugin.ts

@@ -13,6 +13,13 @@ export default function(context) {
 				const token = tokens[idx];
 				if (token.info !== 'justtesting') return defaultRender(tokens, idx, options, env, self);
 
+				const postMessageWithResponseTest = `
+					webviewApi.postMessage('${contentScriptId}', 'justtesting').then(function(response) {
+						console.info('Got response in content script: ' + response);
+					});
+					return false;
+				`;
+
 				// Rich text editor support:
 				// The joplin-editable and joplin-source CSS classes mark the generated div
 				// as a region that needs special processing when converting back to markdown.
@@ -31,23 +38,14 @@ export default function(context) {
 						${richTextEditorMetadata}
 
 						<p>JUST TESTING: <pre>${markdownIt.utils.escapeHtml(leftPad(token.content.trim(), 10, 'x'))}</pre></p>
-						<p>
-							<a
-								href="#"
-								data-content-script-id="${markdownIt.utils.escapeHtml(contentScriptId)}"
-								class="post-message-link"
-							>
-								Click to post a message "justtesting" to plugin and check the response in the console
-							</a>
-						</p>
+						<p><a href="#" onclick="${postMessageWithResponseTest.replace(/\n/g, ' ')}">Click to post a message "justtesting" to plugin and check the response in the console</a></p>
 					</div>
 				`;
 			};
 		},
 		assets: function() {
 			return [
-				{ name: 'markdownItTestPlugin.css' },
-				{ name: 'markdownItTestPluginRuntime.js' },
+				{ name: 'markdownItTestPlugin.css' }
 			];
 		},
 	}

packages/app-cli/tests/support/plugins/content_script/src/markdownItTestPluginRuntime.js

@@ -1,14 +0,0 @@
-const addClickHandlers = () => {
-	const postMessageLinks = document.querySelectorAll('.post-message-link');
-	for (const link of postMessageLinks) {
-		const contentScriptId = link.getAttribute('data-content-script-id');
-		link.onclick = async () => {
-			const response = await webviewApi.postMessage(contentScriptId, 'justtesting');
-			link.textContent = 'Got response in content script: ' + response;
-		};
-	}
-};
-
-document.addEventListener('joplin-noteDidUpdate', () => {
-	addClickHandlers();
-});

packages/app-desktop/ElectronAppWrapper.ts

@@ -1,12 +1,11 @@
-import Logger, { LoggerWrapper, TargetType } from '@joplin/utils/Logger';
+import Logger, { LoggerWrapper } from '@joplin/utils/Logger';
 import { PluginMessage } from './services/plugins/PluginRunner';
 import AutoUpdaterService, { defaultUpdateInterval, initialUpdateStartup } from './services/autoUpdater/AutoUpdaterService';
 import type ShimType from '@joplin/lib/shim';
 const shim: typeof ShimType = require('@joplin/lib/shim').default;
 import { isCallbackUrl } from '@joplin/lib/callbackUrlUtils';
-import { FileLocker } from '@joplin/utils/fs';
-import { IpcMessageHandler, IpcServer, Message, newHttpError, sendMessage, SendMessageOptions, startServer, stopServer } from '@joplin/utils/ipc';
-import { BrowserWindow, Tray, WebContents, screen, App } from 'electron';
+
+import { BrowserWindow, Tray, WebContents, screen } from 'electron';
 import bridge from './bridge';
 const url = require('url');
 const path = require('path');
@@ -20,9 +19,6 @@ import handleCustomProtocols, { CustomProtocolHandler } from './utils/customProt
 import { clearTimeout, setTimeout } from 'timers';
 import { resolve } from 'path';
 import { defaultWindowId } from '@joplin/lib/reducer';
-import { msleep, Second } from '@joplin/utils/time';
-import determineBaseAppDirs from '@joplin/lib/determineBaseAppDirs';
-import getAppName from '@joplin/lib/getAppName';
 
 interface RendererProcessQuitReply {
 	canClose: boolean;
@@ -38,21 +34,13 @@ interface SecondaryWindowData {
 	electronId: number;
 }
 
-export interface Options {
-	env: string;
-	profilePath: string|null;
-	isDebugMode: boolean;
-	isEndToEndTesting: boolean;
-	initialCallbackUrl: string;
-}
-
 export default class ElectronAppWrapper {
 	private logger_: Logger = null;
-	private electronApp_: App;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+	private electronApp_: any;
 	private env_: string;
 	private isDebugMode_: boolean;
 	private profilePath_: string;
-	private isEndToEndTesting_: boolean;
 
 	private win_: BrowserWindow = null;
 	private mainWindowHidden_ = true;
@@ -70,29 +58,13 @@ export default class ElectronAppWrapper {
 	private customProtocolHandler_: CustomProtocolHandler = null;
 	private updatePollInterval_: ReturnType<typeof setTimeout>|null = null;
 
-	private profileLocker_: FileLocker|null = null;
-	private ipcServer_: IpcServer|null = null;
-	private ipcStartPort_ = 2658;
-
-	private ipcLogger_: Logger;
-
-	public constructor(electronApp: App, { env, profilePath, isDebugMode, initialCallbackUrl, isEndToEndTesting }: Options) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+	public constructor(electronApp: any, env: string, profilePath: string|null, isDebugMode: boolean, initialCallbackUrl: string) {
 		this.electronApp_ = electronApp;
 		this.env_ = env;
 		this.isDebugMode_ = isDebugMode;
 		this.profilePath_ = profilePath;
 		this.initialCallbackUrl_ = initialCallbackUrl;
-		this.isEndToEndTesting_ = isEndToEndTesting;
-
-		this.profileLocker_ = new FileLocker(`${this.profilePath_}/lock`);
-
-		// Note: in certain contexts `this.logger_` doesn't seem to be available, especially for IPC
-		// calls, either because it hasn't been set or other issue. So we set one here specifically
-		// for this.
-		this.ipcLogger_ = new Logger();
-		this.ipcLogger_.addTarget(TargetType.File, {
-			path: `${profilePath}/log-cross-app-ipc.txt`,
-		});
 	}
 
 	public electronApp() {
@@ -212,6 +184,7 @@ export default class ElectronAppWrapper {
 				spellcheck: true,
 				enableRemoteModule: true,
 			},
+			webviewTag: true,
 			// We start with a hidden window, which is then made visible depending on the showTrayIcon setting
 			// https://github.com/laurent22/joplin/issues/2031
 			//
@@ -288,9 +261,7 @@ export default class ElectronAppWrapper {
 		// Waiting for one of the ready events might work but they might not be triggered if there's an error, so
 		// the easiest is to use a timeout. Keep in mind that if you get a white window on Windows it might be due
 		// to this line though.
-		//
-		// Don't show the dev tools while end-to-end testing to simplify the logic that finds the main window.
-		if (debugEarlyBugs && !this.isEndToEndTesting_) {
+		if (debugEarlyBugs) {
 			// Since a recent release of Electron (v34?), calling openDevTools() here does nothing
 			// if a plugin devtool window is already opened. Maybe because they do a check on
 			// `isDevToolsOpened` which indeed returns `true` (but shouldn't since it's for a
@@ -439,7 +410,7 @@ export default class ElectronAppWrapper {
 				if (message.target === 'plugin') {
 					const win = this.pluginWindows_[message.pluginId];
 					if (!win) {
-						this.ipcLogger_.error(`Trying to send IPC message to non-existing plugin window: ${message.pluginId}`);
+						this.logger().error(`Trying to send IPC message to non-existing plugin window: ${message.pluginId}`);
 						return;
 					}
 
@@ -494,24 +465,12 @@ export default class ElectronAppWrapper {
 		});
 	}
 
-	private onExit() {
-		this.stopPeriodicUpdateCheck();
-		this.profileLocker_.unlockSync();
-
-		// Probably doesn't matter if the server is not closed cleanly? Thus the lack of `await`
-		// eslint-disable-next-line promise/prefer-await-to-then -- Needed here because onExit() is not async
-		void stopServer(this.ipcServer_).catch(_error => {
-			// Ignore it since we're stopping, and to prevent unnecessary messages.
-		});
-	}
-
 	public quit() {
-		this.onExit();
+		this.stopPeriodicUpdateCheck();
 		this.electronApp_.quit();
 	}
 
 	public exit(errorCode = 0) {
-		this.onExit();
 		this.electronApp_.exit(errorCode);
 	}
 
@@ -577,32 +536,20 @@ export default class ElectronAppWrapper {
 		this.tray_ = null;
 	}
 
-	public async sendCrossAppIpcMessage(message: Message, port: number|null = null, options: SendMessageOptions = null) {
-		this.ipcLogger_.info('Sending message:', message);
+	public ensureSingleInstance() {
+		if (this.env_ === 'dev') return false;
 
-		if (port === null) port = this.ipcStartPort_;
+		const gotTheLock = this.electronApp_.requestSingleInstanceLock();
 
-		return await sendMessage(port, {
-			...message,
-			sourcePort: this.ipcServer_.port,
-			secretKey: this.ipcServer_.secretKey,
-		}, {
-			logger: this.ipcLogger_,
-			...options,
-		});
-	}
-
-	public async ensureSingleInstance() {
-		// When end-to-end testing, multiple instances of Joplin are intentionally created at the same time,
-		// or very close to one another. The single instance handling logic can interfere with this, so disable it.
-		if (this.isEndToEndTesting_) return false;
-
-		interface OnSecondInstanceMessageData {
-			profilePath: string;
-			argv: string[];
+		if (!gotTheLock) {
+			// Another instance is already running - exit
+			this.quit();
+			return true;
 		}
 
-		const activateWindow = (argv: string[]) => {
+		// Someone tried to open a second instance - focus our window instead
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+		this.electronApp_.on('second-instance', (_e: any, argv: string[]) => {
 			const win = this.mainWindow();
 			if (!win) return;
 			if (win.isMinimized()) win.restore();
@@ -615,96 +562,13 @@ export default class ElectronAppWrapper {
 					void this.openCallbackUrl(url);
 				}
 			}
-		};
-
-		const messageHandlers: Record<string, IpcMessageHandler> = {
-			'onSecondInstance': async (message) => {
-				const data = message.data as OnSecondInstanceMessageData;
-				if (data.profilePath === this.profilePath_) activateWindow(data.argv);
-			},
-
-			'restartAltInstance': async (message) => {
-				if (bridge().altInstanceId()) return false;
-
-				// We do this in a timeout after a short interval because we need this call to
-				// return the response immediately, so that the caller can call `quit()`
-				setTimeout(async () => {
-					const maxWait = 10000;
-					const interval = 300;
-					const loopCount = Math.ceil(maxWait / interval);
-					let callingAppGone = false;
-
-					for (let i = 0; i < loopCount; i++) {
-						const response = await this.sendCrossAppIpcMessage({
-							action: 'ping',
-							data: null,
-							secretKey: this.ipcServer_.secretKey,
-						}, message.sourcePort, {
-							sendToSpecificPortOnly: true,
-						});
-
-						if (!response.length) {
-							callingAppGone = true;
-							break;
-						}
-
-						await msleep(interval);
-					}
-
-					if (callingAppGone) {
-						// Wait a bit more because even if the app is not responding, the process
-						// might still be there for a short while.
-						await msleep(1000);
-						this.ipcLogger_.warn('restartAltInstance: App is gone - restarting it');
-						void bridge().launchAltAppInstance(this.env());
-					} else {
-						this.ipcLogger_.warn('restartAltInstance: Could not restart calling app because it was still open');
-					}
-				}, 100);
-
-				return true;
-			},
-
-			'ping': async (_message) => {
-				return true;
-			},
-		};
-
-		const defaultProfileDir = determineBaseAppDirs('', getAppName(true, this.env() === 'dev'), '').rootProfileDir;
-		const secretKeyFilePath = `${defaultProfileDir}/ipc_secret_key.txt`;
-
-		this.ipcLogger_.info('Starting server using secret key:', secretKeyFilePath);
-
-		this.ipcServer_ = await startServer(this.ipcStartPort_, secretKeyFilePath, async (message) => {
-			if (messageHandlers[message.action]) {
-				this.ipcLogger_.info('Got message:', message);
-				return messageHandlers[message.action](message);
-			}
-
-			throw newHttpError(404);
-		}, {
-			logger: this.ipcLogger_,
 		});
 
-		// First check that no other app is running from that profile folder
-		const gotAppLock = await this.profileLocker_.lock();
-		if (gotAppLock) return false;
+		return false;
+	}
 
-		const message: Message = {
-			action: 'onSecondInstance',
-			data: {
-				senderPort: this.ipcServer_.port,
-				profilePath: this.profilePath_,
-				argv: process.argv,
-			},
-			secretKey: this.ipcServer_.secretKey,
-		};
-
-		await this.sendCrossAppIpcMessage(message);
-
-		this.quit();
-		if (this.env() === 'dev') console.warn(`Closing the application because another instance is already running, or the previous instance was force-quit within the last ${Math.round(this.profileLocker_.options.interval / Second)} seconds.`);
-		return true;
+	public initializeCustomProtocolHandler(logger: LoggerWrapper) {
+		this.customProtocolHandler_ ??= handleCustomProtocols(logger);
 	}
 
 	// Electron's autoUpdater has to be init from the main process
@@ -742,10 +606,9 @@ export default class ElectronAppWrapper {
 		// the "ready" event. So we use the function below to make sure that the app is ready.
 		await this.waitForElectronAppReady();
 
-		const alreadyRunning = await this.ensureSingleInstance();
+		const alreadyRunning = this.ensureSingleInstance();
 		if (alreadyRunning) return;
 
-		this.customProtocolHandler_ = handleCustomProtocols();
 		this.createWindow();
 
 		this.electronApp_.on('before-quit', () => {

packages/app-desktop/app.ts

@@ -456,6 +456,9 @@ class Application extends BaseApplication {
 			bridge().openDevTools();
 		}
 
+		bridge().electronApp().initializeCustomProtocolHandler(
+			Logger.create('handleCustomProtocols'),
+		);
 		this.protocolHandler_ = bridge().electronApp().getCustomProtocolHandler();
 		this.protocolHandler_.allowReadAccessToDirectory(__dirname); // App bundle directory
 		this.protocolHandler_.allowReadAccessToDirectory(Setting.value('cacheDir'));
@@ -614,11 +617,10 @@ class Application extends BaseApplication {
 		clipperLogger.addTarget(TargetType.Console);
 
 		ClipperServer.instance().initialize(actionApi);
-		ClipperServer.instance().setEnabled(!Setting.value('altInstanceId'));
 		ClipperServer.instance().setLogger(clipperLogger);
 		ClipperServer.instance().setDispatch(this.store().dispatch);
 
-		if (ClipperServer.instance().enabled() && Setting.value('clipperServer.autoStart')) {
+		if (Setting.value('clipperServer.autoStart')) {
 			void ClipperServer.instance().start();
 		}
 

packages/app-desktop/bridge.ts

@@ -6,6 +6,7 @@ import { dirname, toSystemSlashes } from '@joplin/lib/path-utils';
 import { fileUriToPath } from '@joplin/utils/url';
 import { urlDecode } from '@joplin/lib/string-utils';
 import * as Sentry from '@sentry/electron/main';
+import { ErrorEvent } from '@sentry/types/types';
 import { homedir } from 'os';
 import { msleep } from '@joplin/utils/time';
 import { pathExists, pathExistsSync, writeFileSync } from 'fs-extra';
@@ -14,7 +15,6 @@ import isSafeToOpen from './utils/isSafeToOpen';
 import { closeSync, openSync, readSync, statSync } from 'fs';
 import { KB } from '@joplin/utils/bytes';
 import { defaultWindowId } from '@joplin/lib/reducer';
-import { execCommand } from '@joplin/utils';
 
 interface LastSelectedPath {
 	file: string;
@@ -43,18 +43,16 @@ export class Bridge {
 	private appName_: string;
 	private appId_: string;
 	private logFilePath_ = '';
-	private altInstanceId_ = '';
 
 	private extraAllowedExtensions_: string[] = [];
 	private onAllowedExtensionsChangeListener_: OnAllowedExtensionsChange = ()=>{};
 
-	public constructor(electronWrapper: ElectronAppWrapper, appId: string, appName: string, rootProfileDir: string, autoUploadCrashDumps: boolean, altInstanceId: string) {
+	public constructor(electronWrapper: ElectronAppWrapper, appId: string, appName: string, rootProfileDir: string, autoUploadCrashDumps: boolean) {
 		this.electronWrapper_ = electronWrapper;
 		this.appId_ = appId;
 		this.appName_ = appName;
 		this.rootProfileDir_ = rootProfileDir;
 		this.autoUploadCrashDumps_ = autoUploadCrashDumps;
-		this.altInstanceId_ = altInstanceId;
 		this.lastSelectedPaths_ = {
 			file: null,
 			directory: null,
@@ -100,9 +98,9 @@ export class Bridge {
 					if (logAttachment) hint.attachments = [logAttachment];
 					const date = (new Date()).toISOString().replace(/[:-]/g, '').split('.')[0];
 
-					type ErrorEventWithLog = (typeof event) & {
+					interface ErrorEventWithLog extends ErrorEvent {
 						log: string[];
-					};
+					}
 
 					const errorEventWithLog: ErrorEventWithLog = {
 						...event,
@@ -122,10 +120,6 @@ export class Bridge {
 			},
 
 			integrations: [Sentry.electronMinidumpIntegration()],
-
-			// Using the default ipcMode value causes <iframe>s that use custom protocols to
-			// have isSecureOrigin: false, limiting which browser APIs are available.
-			ipcMode: Sentry.IPCMode.Classic,
 		};
 
 		if (this.autoUploadCrashDumps_) options.dsn = 'https://cceec550871b1e8a10fee4c7a28d5cf2@o4506576757522432.ingest.sentry.io/4506594281783296';
@@ -224,10 +218,6 @@ export class Bridge {
 		return this.electronApp().electronApp().getLocale();
 	};
 
-	public altInstanceId() {
-		return this.altInstanceId_;
-	}
-
 	// Applies to electron-context-menu@3:
 	//
 	// For now we have to disable spell checking in non-editor text
@@ -501,44 +491,7 @@ export class Bridge {
 		}
 	}
 
-	public appLaunchCommand(env: string, altInstanceId = '') {
-		const altInstanceArgs = altInstanceId ? ['--alt-instance-id', altInstanceId] : [];
-
-		if (env === 'dev') {
-			// This is convenient to quickly test on dev, but the path needs to be adjusted
-			// depending on how things are setup.
-
-			return {
-				execPath: `${homedir()}/.npm-global/bin/electron`,
-				args: [
-					`${homedir()}/src/joplin/packages/app-desktop`,
-					'--env', 'dev',
-					'--log-level', 'debug',
-					'--open-dev-tools',
-					'--no-welcome',
-				].concat(altInstanceArgs),
-			};
-		} else {
-			return {
-				execPath: bridge().electronApp().electronApp().getPath('exe'),
-				args: [].concat(altInstanceArgs),
-			};
-		}
-	}
-
-	public async launchAltAppInstance(env: string) {
-		const cmd = this.appLaunchCommand(env, 'alt1');
-
-		await execCommand([cmd.execPath].concat(cmd.args), { detached: true });
-	}
-
-	public async launchMainAppInstance(env: string) {
-		const cmd = this.appLaunchCommand(env, '');
-
-		await execCommand([cmd.execPath].concat(cmd.args), { detached: true });
-	}
-
-	public async restart() {
+	public restart(linuxSafeRestart = true) {
 		// Note that in this case we are not sending the "appClose" event
 		// to notify services and component that the app is about to close
 		// but for the current use-case it's not really needed.
@@ -549,39 +502,13 @@ export class Bridge {
 				execPath: process.env.PORTABLE_EXECUTABLE_FILE,
 			};
 			app.relaunch(options);
-		} else if (this.altInstanceId_) {
-			// Couldn't get it to work using relaunch() - it would just "close" the app, but it
-			// would still be open in the tray except unusable. Or maybe it reopens it quickly but
-			// in a broken state. It might be due to the way it is launched from the main instance.
-			// So here we ask the main instance to relaunch this app after a short delay.
-
-			const responses = await this.electronApp().sendCrossAppIpcMessage({
-				action: 'restartAltInstance',
-				data: null,
-			});
-
-			// However is the main instance is not running, we're stuck, so the user needs to
-			// manually restart. `relaunch()` doesn't appear to work even when the main instance is
-			// not running.
-			const r = responses.find(r => !!r.response);
-
-			if (!r || !r.response) {
-				this.showInfoMessageBox(_('The app is now going to close. Please relaunch it to complete the process.'));
-
-				// Note: this should work, but doesn't:
-
-				// const cmd = this.appLaunchCommand(this.env(), this.altInstanceId_);
-
-				// app.relaunch({
-				// 	execPath: cmd.execPath,
-				// 	args: cmd.args,
-				// });
-			}
+		} else if (shim.isLinux() && linuxSafeRestart) {
+			this.showInfoMessageBox(_('The app is now going to close. Please relaunch it to complete the process.'));
 		} else {
 			app.relaunch();
 		}
 
-		this.electronApp().exit();
+		app.exit();
 	}
 
 	public createImageFromPath(path: string) {
@@ -607,9 +534,9 @@ export class Bridge {
 
 let bridge_: Bridge = null;
 
-export function initBridge(wrapper: ElectronAppWrapper, appId: string, appName: string, rootProfileDir: string, autoUploadCrashDumps: boolean, altInstanceId: string) {
+export function initBridge(wrapper: ElectronAppWrapper, appId: string, appName: string, rootProfileDir: string, autoUploadCrashDumps: boolean) {
 	if (bridge_) throw new Error('Bridge already initialized');
-	bridge_ = new Bridge(wrapper, appId, appName, rootProfileDir, autoUploadCrashDumps, altInstanceId);
+	bridge_ = new Bridge(wrapper, appId, appName, rootProfileDir, autoUploadCrashDumps);
 	return bridge_;
 }
 

packages/app-desktop/commands/index.ts

@@ -7,9 +7,7 @@ import * as exportFolders from './exportFolders';
 import * as exportNotes from './exportNotes';
 import * as focusElement from './focusElement';
 import * as openNoteInNewWindow from './openNoteInNewWindow';
-import * as openPrimaryAppInstance from './openPrimaryAppInstance';
 import * as openProfileDirectory from './openProfileDirectory';
-import * as openSecondaryAppInstance from './openSecondaryAppInstance';
 import * as replaceMisspelling from './replaceMisspelling';
 import * as restoreNoteRevision from './restoreNoteRevision';
 import * as startExternalEditing from './startExternalEditing';
@@ -31,9 +29,7 @@ const index: any[] = [
 	exportNotes,
 	focusElement,
 	openNoteInNewWindow,
-	openPrimaryAppInstance,
 	openProfileDirectory,
-	openSecondaryAppInstance,
 	replaceMisspelling,
 	restoreNoteRevision,
 	startExternalEditing,

packages/app-desktop/commands/openPrimaryAppInstance.ts

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

packages/app-desktop/commands/openSecondaryAppInstance.ts

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

packages/app-desktop/gui/ClipperConfigScreen.tsx

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

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

@@ -40,7 +40,7 @@ export default function ButtonBar(props: Props) {
 	}
 
 	return (
-		<StyledRoot className='button-bar'>
+		<StyledRoot>
 			<Button
 				onClick={props.onCancelClick}
 				level={ButtonLevel.Secondary}

packages/app-desktop/gui/MainScreen.tsx

@@ -83,7 +83,6 @@ interface Props {
 	notesColumns: NoteListColumns;
 	showInvalidJoplinCloudCredential: boolean;
 	toast: Toast;
-	shouldSwitchToAppleSiliconVersion: boolean;
 }
 
 interface ShareFolderDialogOptions {
@@ -479,10 +478,6 @@ class MainScreenComponent extends React.Component<Props, State> {
 			});
 		};
 
-		const onDisableSync = () => {
-			Setting.setValue('sync.target', null);
-		};
-
 		const onViewSyncSettingsScreen = () => {
 			this.props.dispatch({
 				type: 'NAV_GO',
@@ -493,11 +488,6 @@ class MainScreenComponent extends React.Component<Props, State> {
 			});
 		};
 
-		const onDownloadAppleSiliconVersion = () => {
-			// The website should redirect to the correct version
-			shim.openUrl('https://joplinapp.org/download/');
-		};
-
 		const onRestartAndUpgrade = async () => {
 			Setting.setValue('sync.upgradeState', Setting.SYNC_UPGRADE_STATE_MUST_DO);
 			await Setting.saveAll();
@@ -580,19 +570,11 @@ class MainScreenComponent extends React.Component<Props, State> {
 			);
 		} else if (this.props.mustUpgradeAppMessage) {
 			msg = this.renderNotificationMessage(this.props.mustUpgradeAppMessage);
-		} else if (this.props.shouldSwitchToAppleSiliconVersion) {
-			msg = this.renderNotificationMessage(
-				_('You are running the Intel version of Joplin on an Apple Silicon processor. Download the Apple Silicon one for better performance.'),
-				_('Download it now'),
-				onDownloadAppleSiliconVersion,
-			);
 		} else if (this.props.showInvalidJoplinCloudCredential) {
 			msg = this.renderNotificationMessage(
 				_('Your Joplin Cloud credentials are invalid, please login.'),
 				_('Login to Joplin Cloud.'),
 				onViewJoplinCloudLoginScreen,
-				_('Disable synchronisation'),
-				onDisableSync,
 			);
 		}
 
@@ -623,8 +605,7 @@ class MainScreenComponent extends React.Component<Props, State> {
 			this.showShareInvitationNotification(props) ||
 			this.props.needApiAuth ||
 			!!this.props.mustUpgradeAppMessage ||
-			props.showInvalidJoplinCloudCredential ||
-			props.shouldSwitchToAppleSiliconVersion;
+			props.showInvalidJoplinCloudCredential;
 	}
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
@@ -804,7 +785,7 @@ class MainScreenComponent extends React.Component<Props, State> {
 					// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 					dispatch={this.props.dispatch as any}
 				/>
-				<UpdateNotification />
+				<UpdateNotification themeId={this.props.themeId} />
 				<PluginNotification
 					themeId={this.props.themeId}
 					toast={this.props.toast}
@@ -852,7 +833,6 @@ const mapStateToProps = (state: AppState) => {
 		notesColumns: validateColumns(state.settings['notes.columns']),
 		showInvalidJoplinCloudCredential: state.settings['sync.target'] === 10 && state.mustAuthenticate,
 		toast: state.toast,
-		shouldSwitchToAppleSiliconVersion: shim.isAppleSilicon() && process.arch !== 'arm64',
 	};
 };
 

packages/app-desktop/gui/MenuBar.tsx

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

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

@@ -167,9 +167,7 @@ const CodeMirror = (props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 			scrollTo: (options: ScrollOptions) => {
 				if (options.type === ScrollOptionTypes.Hash) {
 					if (!webviewRef.current) return;
-					const hash: string = options.value;
-					webviewRef.current.send('scrollToHash', hash);
-					editorRef.current.jumpToHash(hash);
+					webviewRef.current.send('scrollToHash', options.value as string);
 				} else if (options.type === ScrollOptionTypes.Percent) {
 					const percent = options.value as number;
 					setEditorPercentScroll(percent);

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

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

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

@@ -43,10 +43,6 @@ import useKeyboardRefocusHandler from './utils/useKeyboardRefocusHandler';
 import useDocument from '../../../hooks/useDocument';
 import useEditDialog from './utils/useEditDialog';
 import useEditDialogEventListeners from './utils/useEditDialogEventListeners';
-import Setting from '@joplin/lib/models/Setting';
-import useTextPatternsLookup from './utils/useTextPatternsLookup';
-import { toFileProtocolPath } from '@joplin/utils/path';
-import { RenderResultPluginAsset } from '@joplin/renderer/types';
 
 const logger = Logger.create('TinyMCE');
 
@@ -60,7 +56,7 @@ const logger = Logger.create('TinyMCE');
 //
 // The problem is that the list plugin was, unknown to me, relying on this <br/>
 // being present. Without it, trying to add a bullet point or checkbox on an
-// empty document, adds an empty paragraph. The exact reason for this is unclear
+// empty document, does nothing. The exact reason for this is unclear
 // so as a workaround we manually add this <br> for empty documents,
 // which fixes the issue.
 //
@@ -73,8 +69,8 @@ const logger = Logger.create('TinyMCE');
 //
 // Perhaps upgrading the list plugin (which is a fork of TinyMCE own list plugin)
 // would help?
-function preprocessHtml(html: string): string {
-	return html === '' ? '<p></p>' : html;
+function awfulInitHack(html: string): string {
+	return html === '<div id="rendered-md"></div>' ? '<div id="rendered-md"><p></p></div>' : html;
 }
 
 
@@ -658,7 +654,6 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 	// Create and setup the editor
 	// -----------------------------------------------------------------------------------------
 
-	const textPatternsLookupRef = useTextPatternsLookup({ enabled: props.enableTextPatterns, enableMath: props.mathEnabled });
 	useEffect(() => {
 		if (!scriptLoaded) return;
 		if (!editorContainer) return;
@@ -731,25 +726,6 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 				language_url: ['en_US', 'en_GB'].includes(language) ? undefined : `${bridge().vendorDir()}/lib/tinymce/langs/${language}`,
 				toolbar: toolbar.join(' '),
 				localization_function: _,
-				// See https://www.tiny.cloud/docs/tinymce/latest/tinymce-and-csp/#content_security_policy
-				content_security_policy: Setting.value('featureFlag.richText.useStrictContentSecurityPolicy') ? [
-					// Media: *: Allow users to include images and videos from the internet (e.g. ![](http://example.com/image.png)).
-					// Media: blob: Allow loading images/videos/audio from blob URLs. The Rich Text Editor
-					//      replaces certain base64 URLs with blob URLs.
-					// Media: data: Allow loading images and other media from data: URLs
-					'default-src \'self\'',
-					'img-src \'self\' blob: data: *', // Images
-					'media-src \'self\' blob: data: *', // Audio and video players
-
-					// Disallow certain unused features
-					'child-src \'none\'', // Should not contain sub-frames
-					'object-src \'none\'', // Objects can be used for script injection
-					'form-action \'none\'', // No submitting forms
-
-					// Styles: unsafe-inline: TinyMCE uses inline style="" styles.
-					// Styles: *: Allow users to include styles from the internet (e.g. <style src="https://example.com/style.css">)
-					'style-src \'self\' \'unsafe-inline\' * data:',
-				].join(' ; ') : undefined,
 				contextmenu: false,
 				browser_spellcheck: true,
 
@@ -760,42 +736,9 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 					joplinSub: { inline: 'sub', remove: 'all' },
 					joplinSup: { inline: 'sup', remove: 'all' },
 					code: { inline: 'code', remove: 'all', attributes: { spellcheck: 'false' } },
-					// Foreground color: The remove_similar: true is necessary here for the "remove formatting"
-					// button to work. See https://github.com/tinymce/tinymce/issues/5026.
-					forecolor: { inline: 'span', styles: { color: '%value' }, remove_similar: true },
+					forecolor: { inline: 'span', styles: { color: '%value' } },
 				},
-				text_patterns: [],
-				text_patterns_lookup: () => textPatternsLookupRef.current(),
-
 				setup: (editor: Editor) => {
-					editor.addCommand('joplinMath', async () => {
-						const katex = editor.selection.getContent();
-						const md = `$${katex}$`;
-
-						// Save and clear the selection -- when this command is activated by a text pattern,
-						// TinyMCE:
-						// 1. Adjusts the selection just before calling the command to include the to-be-formatted text.
-						// 2. Calls the command.
-						// 3. Removes the "$" characters and restores the selection.
-						//
-						// As a result, the selection needs to be saved and restored.
-						const mathSelection = editor.selection.getBookmark();
-
-						const result = await markupToHtml.current(MarkupLanguage.Markdown, md, { bodyOnly: true });
-
-						// Replace the math...
-						const finalSelection = editor.selection.getBookmark();
-						editor.selection.moveToBookmark(mathSelection);
-						editor.selection.setContent(result.html);
-						editor.selection.moveToBookmark(finalSelection); // ...then move the selection back.
-
-						// Fire update events
-						editor.fire(TinyMceEditorEvents.JoplinChange);
-						dispatchDidUpdate(editor);
-						// The last replacement seems to need to be manually added to the undo history
-						editor.undoManager.add();
-					});
-
 					editor.addCommand('joplinAttach', () => {
 						insertResourcesIntoContentRef.current();
 					});
@@ -948,16 +891,6 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 			return docHead_;
 		}
 
-		const assetToUrl = (asset: RenderResultPluginAsset) => {
-			if (asset.pathIsAbsolute) {
-				// This is important on Windows, where the C:/ at the start of the path
-				// is interpreted as a relative subfolder without the file:// prefix.
-				return toFileProtocolPath(asset.path);
-			} else {
-				return asset.path;
-			}
-		};
-
 		const allCssFiles = [
 			`${bridge().vendorDir()}/lib/@fortawesome/fontawesome-free/css/all.min.css`,
 			`gui/note-viewer/pluginAssets/highlight.js/${theme.codeThemeCss}`,
@@ -965,14 +898,16 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 			pluginAssets
 				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 				.filter((a: any) => a.mime === 'text/css')
-				.map(assetToUrl),
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+				.map((a: any) => a.path),
 		);
 
 		const allJsFiles = [].concat(
 			pluginAssets
 				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 				.filter((a: any) => a.mime === 'application/javascript')
-				.map(assetToUrl),
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+				.map((a: any) => a.path),
 		);
 
 		const filePathToElementId = (path: string) => {
@@ -1047,7 +982,6 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 		return true;
 	}
 
-	const lastNoteIdRef = useRef(props.noteId);
 	useEffect(() => {
 		if (!editor) return () => {};
 
@@ -1061,10 +995,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 		const loadContent = async () => {
 			const resourcesEqual = resourceInfosEqual(lastOnChangeEventInfo.current.resourceInfos, props.resourceInfos);
 
-			// Use nextOnChangeEventInfo's noteId -- lastOnChangeEventInfo can be slightly out-of-date.
-			const differentNoteId = lastNoteIdRef.current !== props.noteId;
-			const differentContent = lastOnChangeEventInfo.current.content !== props.content;
-			if (differentNoteId || differentContent || !resourcesEqual) {
+			if (lastOnChangeEventInfo.current.content !== props.content || !resourcesEqual) {
 				const result = await props.markupToHtml(
 					props.contentMarkupLanguage,
 					props.content,
@@ -1075,11 +1006,6 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 						// This prevents HTML-style resource URLs (e.g. <a href="file://path/to/resource/.../"></a>)
 						// from being discarded.
 						allowedFilePrefixes: [props.resourceDirectory],
-
-						// Remove the wrapping <div id="rendered-md">...</div>, which can cause
-						// TinyMCE to crash in some cases.
-						// See https://github.com/tinymce/tinymce/issues/10276
-						bodyOnly: true,
 					}),
 				);
 				if (cancelled) return;
@@ -1091,12 +1017,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 				// when the note content is updated externally.
 				const offsetBookmarkId = 2;
 				const bookmark = editor.selection.getBookmark(offsetBookmarkId);
-				const htmlAndCss = [
-					`<style>${result.cssStrings?.join('\n')}</style>`,
-					preprocessHtml(result.html),
-				].join('\n');
-				editor.setContent(htmlAndCss);
-				lastNoteIdRef.current = props.noteId;
+				editor.setContent(awfulInitHack(result.html));
 
 				if (lastOnChangeEventInfo.current.contentKey !== props.contentKey) {
 					// Need to clear UndoManager to avoid this problem:
@@ -1128,7 +1049,6 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 
 			const allAssetsOptions: NoteStyleOptions = {
 				contentMaxWidthTarget: '.mce-content-body',
-				contentWrapperSelector: '.mce-content-body',
 				scrollbarSize: props.scrollbarSize,
 				themeId: props.contentMarkupLanguage === MarkupLanguage.Html ? 1 : null,
 				whiteBackgroundNoteRendering: props.whiteBackgroundNoteRendering,
@@ -1146,7 +1066,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 			cancelled = true;
 		};
 		// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
-	}, [editor, props.noteId, props.themeId, props.scrollbarSize, props.markupToHtml, props.allAssets, props.content, props.resourceInfos, props.contentKey, props.contentMarkupLanguage, props.whiteBackgroundNoteRendering]);
+	}, [editor, props.themeId, props.scrollbarSize, props.markupToHtml, props.allAssets, props.content, props.resourceInfos, props.contentKey, props.contentMarkupLanguage, props.whiteBackgroundNoteRendering]);
 
 	useEffect(() => {
 		if (!editor) return () => {};
@@ -1185,13 +1105,6 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 		};
 	}, [editor]);
 
-	useEffect(() => {
-		if (!editor) return;
-		// Meta+P is bound by default to print by TinyMCE. It can be unbound, but it seems necessary
-		// to do so after the editor loads. Meta+P should be able to trigger Joplin built-in shortcuts.
-		editor.shortcuts.remove('Meta+P');
-	}, [editor]);
-
 	// -----------------------------------------------------------------------------------------
 	// Handle onChange event
 	// -----------------------------------------------------------------------------------------

packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js

@@ -1576,7 +1576,7 @@
     var removeStyles = function (dom, element, styles) {
       Tools.each(styles, function (style) {
         var _a;
-        return dom.setStyle(element, style, '');
+        return dom.setStyle(element, (_a = {}, _a[style] = '', _a));
       });
     };
     var getEndPointNode = function (editor, rng, start, root) {

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

@@ -7,7 +7,8 @@ import { ContextMenuOptions, ContextMenuItemType } from '../../../utils/contextM
 import { menuItems } from '../../../utils/contextMenu';
 import MenuUtils from '@joplin/lib/services/commands/MenuUtils';
 import CommandService from '@joplin/lib/services/CommandService';
-import type { ContextMenuParams, Event as ElectronEvent, MenuItemConstructorOptions } from 'electron';
+import Setting from '@joplin/lib/models/Setting';
+import type { Event as ElectronEvent, MenuItemConstructorOptions } from 'electron';
 
 import Resource from '@joplin/lib/models/Resource';
 import { TinyMceEditorEvents } from './types';
@@ -22,6 +23,33 @@ const Menu = bridge().Menu;
 const MenuItem = bridge().MenuItem;
 const menuUtils = new MenuUtils(CommandService.instance());
 
+// x and y are the absolute coordinates, as returned by the context-menu event
+// handler on the webContent. This function will return null if the point is
+// not within the TinyMCE editor.
+function contextMenuElement(editor: Editor, x: number, y: number) {
+	if (!editor || !editor.getDoc()) return null;
+
+	const containerDoc = editor.getContainer().ownerDocument;
+	const iframes = containerDoc.getElementsByClassName('tox-edit-area__iframe');
+	if (!iframes.length) return null;
+
+	const zoom = Setting.value('windowContentZoomFactor') / 100;
+	const xScreen = x / zoom;
+	const yScreen = y / zoom;
+
+	// We use .elementFromPoint to handle the case where a dialog is covering
+	// part of the editor.
+	const targetElement = containerDoc.elementFromPoint(xScreen, yScreen);
+	if (targetElement !== iframes[0]) {
+		return null;
+	}
+
+	const iframeRect = iframes[0].getBoundingClientRect();
+	const relativeX = xScreen - iframeRect.left;
+	const relativeY = yScreen - iframeRect.top;
+	return editor.getDoc().elementFromPoint(relativeX, relativeY);
+}
+
 interface ContextMenuActionOptions {
 	current: ContextMenuOptions;
 }
@@ -32,7 +60,7 @@ export default function(editor: Editor, plugins: PluginStates, dispatch: Dispatc
 	useEffect(() => {
 		if (!editor) return () => {};
 
-		const contextMenuItems = menuItems(dispatch);
+		const contextMenuItems = menuItems(dispatch, htmlToMd, mdToHtml);
 		const targetWindow = bridge().activeWindow();
 
 		const makeMainMenuItems = (element: Element) => {
@@ -102,7 +130,13 @@ export default function(editor: Editor, plugins: PluginStates, dispatch: Dispatc
 			return [];
 		};
 
-		const showContextMenu = (element: HTMLElement, misspelledWord: string|null, dictionarySuggestions: string[]) => {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+		function onContextMenu(event: ElectronEvent, params: any) {
+			const element = contextMenuElement(editor, params.x, params.y);
+			if (!element) return;
+
+			event.preventDefault();
+
 			const menu = new Menu();
 			const menuItems: MenuItemType[] = [];
 			const toMenuItems = (specs: MenuItemConstructorOptions[]) => {
@@ -111,7 +145,7 @@ export default function(editor: Editor, plugins: PluginStates, dispatch: Dispatc
 
 			menuItems.push(...makeEditableMenuItems(element));
 			menuItems.push(...makeMainMenuItems(element));
-			const spellCheckerMenuItems = SpellCheckerService.instance().contextMenuItems(misspelledWord, dictionarySuggestions);
+			const spellCheckerMenuItems = SpellCheckerService.instance().contextMenuItems(params.misspelledWord, params.dictionarySuggestions);
 			menuItems.push(
 				...toMenuItems(spellCheckerMenuItems),
 			);
@@ -123,49 +157,13 @@ export default function(editor: Editor, plugins: PluginStates, dispatch: Dispatc
 				menu.append(item);
 			}
 			menu.popup({ window: targetWindow });
-		};
+		}
 
-		let lastTarget: EventTarget|null = null;
-		const onElectronContextMenu = (event: ElectronEvent, params: ContextMenuParams) => {
-			if (!lastTarget) return;
-			const element = lastTarget as HTMLElement;
-			lastTarget = null;
-
-			event.preventDefault();
-			showContextMenu(element, params.misspelledWord, params.dictionarySuggestions);
-		};
-
-		const onBrowserContextMenu = (event: PointerEvent) => {
-			const isKeyboard = event.buttons === 0;
-			if (isKeyboard) {
-				// Context menu events from the keyboard seem to always use <body> as the
-				// event target. Since which context menu is displayed depends on what the
-				// target is, using event.target for keyboard-triggered contextmenu events
-				// would prevent keyboard-only users from accessing certain functionality.
-				// To fix this, use the selection instead.
-				lastTarget = editor.selection.getNode();
-			} else {
-				lastTarget = event.target;
-			}
-
-			// Plugins in the Rich Text Editor (e.g. the mermaid renderer) can sometimes
-			// create custom right-click events. These don't trigger the Electron 'context-menu'
-			// event. As such, the context menu must be shown manually.
-			const isFromPlugin = !event.isTrusted;
-			if (isFromPlugin) {
-				event.preventDefault();
-				showContextMenu(lastTarget as HTMLElement, null, []);
-				lastTarget = null;
-			}
-		};
-
-		targetWindow.webContents.prependListener('context-menu', onElectronContextMenu);
-		editor.on('contextmenu', onBrowserContextMenu);
+		targetWindow.webContents.prependListener('context-menu', onContextMenu);
 
 		return () => {
-			editor.off('contextmenu', onBrowserContextMenu);
 			if (!targetWindow.isDestroyed() && targetWindow?.webContents?.off) {
-				targetWindow.webContents.off('context-menu', onElectronContextMenu);
+				targetWindow.webContents.off('context-menu', onContextMenu);
 			}
 		};
 	}, [editor, plugins, dispatch, htmlToMd, mdToHtml, editDialog]);

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

@@ -1,40 +0,0 @@
-import { useRef } from 'react';
-
-interface TextPatternOptions {
-	enabled: boolean;
-	enableMath: boolean;
-}
-
-const useTextPatternsLookup = ({ enabled, enableMath }: TextPatternOptions) => {
-	const getTextPatterns = () => {
-		if (!enabled) return [];
-
-		return [
-			// See https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#text_patterns
-			// for the default TinyMCE text patterns
-			{ start: '==', end: '==', format: 'joplinHighlight' },
-			// Only replace math if math rendering is enabled.
-			enableMath && { start: '$', end: '$', cmd: 'joplinMath' },
-			{ start: '`', end: '`', format: 'code' },
-			{ start: '*', end: '*', format: 'italic' },
-			{ start: '**', end: '**', format: 'bold' },
-			{ start: '#', format: 'h1' },
-			{ start: '##', format: 'h2' },
-			{ start: '###', format: 'h3' },
-			{ start: '####', format: 'h4' },
-			{ start: '#####', format: 'h5' },
-			{ start: '######', format: 'h6' },
-			{ start: '1.', cmd: 'InsertOrderedList' },
-			{ start: '*', cmd: 'InsertUnorderedList' },
-			{ start: '-', cmd: 'InsertUnorderedList' },
-		].filter(pattern => !!pattern);
-	};
-
-	// Store the lookup callback in a ref so that the editor doesn't need to be reloaded
-	// to use the new patterns:
-	const patternLookupRef = useRef(getTextPatterns);
-	patternLookupRef.current = getTextPatterns;
-	return patternLookupRef;
-};
-
-export default useTextPatternsLookup;

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

@@ -2,37 +2,72 @@ import PluginService from '@joplin/lib/services/plugins/PluginService';
 import { useEffect } from 'react';
 import { Editor } from 'tinymce';
 
-interface WebViewApi {
-	postMessage: (contentScriptId: string, message: unknown)=> Promise<unknown>;
-}
-
-interface ExtendedWindow extends Window {
-	webviewApi: WebViewApi;
-}
-
-const useWebViewApi = (editor: Editor, containerWindow: Window) => {
+const useWebViewApi = (editor: Editor, window: Window) => {
 	useEffect(() => {
 		if (!editor) return ()=>{};
-		if (!containerWindow) return ()=>{};
+		if (!window) return ()=>{};
 
-		const editorWindow = editor.getWin() as ExtendedWindow;
-		const webviewApi: WebViewApi = {
-			postMessage: async (contentScriptId: string, message: unknown) => {
-				const pluginService = PluginService.instance();
-				const plugin = pluginService.pluginById(
-					pluginService.pluginIdByContentScriptId(contentScriptId),
-				);
-				return await plugin.emitContentScriptMessage(contentScriptId, message);
-			},
+		const scriptElement = window.document.createElement('script');
+		const channelId = `plugin-post-message-${Math.random()}`;
+		scriptElement.appendChild(window.document.createTextNode(`
+			window.webviewApi = {
+				postMessage: (contentScriptId, message) => {
+					const channelId = ${JSON.stringify(channelId)};
+					const messageId = Math.random();
+					window.parent.postMessage({
+						channelId,
+						messageId,
+						contentScriptId,
+						message,
+					}, '*');
+
+					const waitForResponse = async () => {
+						while (true) {
+							const messageEvent = await new Promise(resolve => {
+								window.addEventListener('message', event => {
+									resolve(event);
+								}, {once: true});
+							});
+	
+							if (messageEvent.source !== window.parent || messageEvent.data.messageId !== messageId) {
+								continue;
+							}
+	
+							const data = messageEvent.data;
+							return data.response;
+						}
+					};
+
+					return waitForResponse();
+				},
+			};
+		`));
+		const editorWindow = editor.getWin();
+		editorWindow.document.head.appendChild(scriptElement);
+
+		const onMessageHandler = async (event: MessageEvent) => {
+			if (event.source !== editorWindow || event.data.channelId !== channelId) {
+				return;
+			}
+
+			const contentScriptId = event.data.contentScriptId;
+			const pluginService = PluginService.instance();
+			const plugin = pluginService.pluginById(
+				pluginService.pluginIdByContentScriptId(contentScriptId),
+			);
+			const result = await plugin.emitContentScriptMessage(contentScriptId, event.data.message);
+			editorWindow.postMessage({
+				messageId: event.data.messageId,
+				response: result,
+			}, '*');
 		};
-		editorWindow.webviewApi = webviewApi;
+		window.addEventListener('message', onMessageHandler);
 
 		return () => {
-			if (editorWindow.webviewApi === webviewApi) {
-				editorWindow.webviewApi = undefined;
-			}
+			window.removeEventListener('message', onMessageHandler);
+			scriptElement.remove();
 		};
-	}, [editor, containerWindow]);
+	}, [editor, window]);
 };
 
 export default useWebViewApi;

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

@@ -163,7 +163,8 @@ function NoteEditorContent(props: NoteEditorProps) {
 		scrollbarSize: props.scrollbarSize,
 	});
 
-	const allAssets = useCallback(async (markupLanguage: number, options: AllAssetsOptions = null) => {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+	const allAssets = useCallback(async (markupLanguage: number, options: AllAssetsOptions = null): Promise<any[]> => {
 		options = {
 			contentMaxWidthTarget: '',
 			...options,
@@ -171,7 +172,7 @@ function NoteEditorContent(props: NoteEditorProps) {
 
 		const theme = themeStyle(options.themeId ? options.themeId : props.themeId);
 
-		const markupToHtml = markupLanguageUtils.newMarkupToHtml(props.plugins, {
+		const markupToHtml = markupLanguageUtils.newMarkupToHtml({}, {
 			resourceBaseUrl: `joplin-content://note-viewer/${Setting.value('resourceDir')}/`,
 			customCss: props.customCss,
 		});
@@ -182,7 +183,7 @@ function NoteEditorContent(props: NoteEditorProps) {
 			scrollbarSize: props.scrollbarSize,
 			whiteBackgroundNoteRendering: options.whiteBackgroundNoteRendering,
 		});
-	}, [props.plugins, props.themeId, props.scrollbarSize, props.customCss, props.contentMaxWidth]);
+	}, [props.themeId, props.scrollbarSize, props.customCss, props.contentMaxWidth]);
 
 	const handleProvisionalFlag = useCallback(() => {
 		if (props.isProvisional) {
@@ -422,7 +423,6 @@ function NoteEditorContent(props: NoteEditorProps) {
 
 	const searchMarkers = useSearchMarkers(showLocalSearch, localSearchMarkerOptions, props.searches, props.selectedSearchId, props.highlightedWords);
 
-	const markupLanguage = formNote.markup_language;
 	const editorProps: NoteBodyEditorProps = {
 		ref: editorRef,
 		contentKey: formNote.id,
@@ -432,7 +432,7 @@ function NoteEditorContent(props: NoteEditorProps) {
 		onWillChange: onBodyWillChange,
 		onMessage: onMessage,
 		content: formNote.body,
-		contentMarkupLanguage: markupLanguage,
+		contentMarkupLanguage: formNote.markup_language,
 		contentOriginalCss: formNote.originalCss,
 		resourceInfos: resourceInfos,
 		resourceDirectory: Setting.value('resourceDir'),
@@ -451,14 +451,11 @@ function NoteEditorContent(props: NoteEditorProps) {
 		searchMarkers: searchMarkers,
 		visiblePanes: props.noteVisiblePanes || ['editor', 'viewer'],
 		keyboardMode: Setting.value('editor.keyboardMode'),
-		enableTextPatterns: Setting.value('editor.enableTextPatterns'),
 		tabMovesFocus: props.tabMovesFocus,
 		locale: Setting.value('locale'),
 		onDrop: onDrop,
 		noteToolbarButtonInfos: props.toolbarButtonInfos,
 		plugins: props.plugins,
-		// KaTeX isn't supported in HTML notes
-		mathEnabled: markupLanguage === MarkupLanguage.Markdown && Setting.value('markdown.plugin.katex'),
 		fontSize: Setting.value('style.editor.fontSize'),
 		contentMaxWidth: props.contentMaxWidth,
 		scrollbarSize: props.scrollbarSize,

packages/app-desktop/gui/NoteEditor/WarningBanner/WarningBanner.tsx

@@ -36,6 +36,7 @@ const incompatiblePluginIds = [
 	// cSpell:disable
 	'com.septemberhx.Joplin.Enhancement',
 	'ylc395.noteLinkSystem',
+	'outline',
 	'joplin.plugin.cmoptions',
 	'com.asdibiase.joplin-languagetool',
 	// cSpell:enable

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

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

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

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

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

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

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

@@ -8,11 +8,13 @@ const MenuItem = bridge().MenuItem;
 import Resource, { resourceOcrStatusToString } from '@joplin/lib/models/Resource';
 import BaseItem from '@joplin/lib/models/BaseItem';
 import BaseModel, { ModelType } from '@joplin/lib/BaseModel';
+import { processPastedHtml } from './resourceHandling';
 import { NoteEntity, ResourceEntity, ResourceOcrStatus } from '@joplin/lib/services/database/types';
 import { TinyMceEditorEvents } from '../NoteBody/TinyMCE/utils/types';
 import { itemIsReadOnlySync, ItemSlice } from '@joplin/lib/models/utils/readOnly';
 import Setting from '@joplin/lib/models/Setting';
 import ItemChange from '@joplin/lib/models/ItemChange';
+import { HtmlToMarkdownHandler, MarkupToHtmlHandler } from './types';
 import shim from '@joplin/lib/shim';
 import { openFileWithExternalEditor } from '@joplin/lib/services/ExternalEditWatcher/utils';
 const fs = require('fs-extra');
@@ -79,7 +81,7 @@ export async function openItemById(itemId: string, dispatch: Function, hash = ''
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
-export function menuItems(dispatch: Function): ContextMenuItems {
+export function menuItems(dispatch: Function, htmlToMd: HtmlToMarkdownHandler, mdToHtml: MarkupToHtmlHandler): ContextMenuItems {
 	return {
 		open: {
 			label: _('Open...'),
@@ -193,10 +195,17 @@ export function menuItems(dispatch: Function): ContextMenuItems {
 		},
 		paste: {
 			label: _('Paste'),
-			onAction: async (_options: ContextMenuOptions) => {
-				bridge().activeWindow().webContents.paste();
+			onAction: async (options: ContextMenuOptions) => {
+				const pastedHtml = clipboard.readHTML();
+				let content = pastedHtml ? pastedHtml : clipboard.readText();
+
+				if (pastedHtml) {
+					content = await processPastedHtml(pastedHtml, htmlToMd, mdToHtml);
+				}
+
+				options.insertContent(content);
 			},
-			isActive: (_itemType: ContextMenuItemType, options: ContextMenuOptions) => !options.isReadOnly && clipboard.availableFormats().length > 0,
+			isActive: (_itemType: ContextMenuItemType, options: ContextMenuOptions) => !options.isReadOnly && (!!clipboard.readText() || !!clipboard.readHTML()),
 		},
 		pasteAsText: {
 			label: _('Paste as text'),
@@ -219,7 +228,7 @@ export function menuItems(dispatch: Function): ContextMenuItems {
 export default async function contextMenu(options: ContextMenuOptions, dispatch: Function) {
 	const menu = new Menu();
 
-	const items = menuItems(dispatch);
+	const items = menuItems(dispatch, options.htmlToMd, options.mdToHtml);
 
 	if (!('readyOnly' in options)) options.isReadOnly = true;
 	for (const itemKey in items) {

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

@@ -124,7 +124,6 @@ export interface NoteBodyEditorProps {
 	visiblePanes: string[];
 	keyboardMode: string;
 	tabMovesFocus: boolean;
-	enableTextPatterns: boolean;
 	resourceInfos: ResourceInfos;
 	resourceDirectory: string;
 	locale: string;
@@ -132,7 +131,6 @@ export interface NoteBodyEditorProps {
 	onDrop: DropHandler;
 	noteToolbarButtonInfos: ToolbarItem[];
 	plugins: PluginStates;
-	mathEnabled: boolean;
 	fontSize: number;
 	contentMaxWidth: number;
 	isSafeMode: boolean;

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

@@ -97,15 +97,7 @@ const useRefreshFormNoteOnChange = (formNoteRef: RefObject<FormNote>, editorId:
 
 			await initNoteState(n, false);
 			if (event.cancelled) return;
-			setFormNoteRefreshScheduled(oldValue => {
-				// If a new refresh was scheduled between initNoteState
-				// and now:
-				if (oldValue !== formNoteRefreshScheduled) {
-					return oldValue;
-				}
-				// A refresh is no longer scheduled
-				return 0;
-			});
+			setFormNoteRefreshScheduled(0);
 		};
 
 		await loadNote();
@@ -114,8 +106,8 @@ const useRefreshFormNoteOnChange = (formNoteRef: RefObject<FormNote>, editorId:
 	const refreshFormNote = useCallback(() => {
 		// Increase the counter to cancel any ongoing refresh attempts
 		// and start a new one.
-		setFormNoteRefreshScheduled(count => count + 1);
-	}, []);
+		setFormNoteRefreshScheduled(formNoteRefreshScheduled + 1);
+	}, [formNoteRefreshScheduled]);
 
 	// When switching from the plugin editor to the built-in editor, we refresh the note since the
 	// plugin may have modified it via the data API.

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

@@ -0,0 +1,43 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const react_1 = require('react');
+const markupLanguageUtils_1 = require('@joplin/lib/utils/markupLanguageUtils');
+const Setting_1 = require('@joplin/lib/models/Setting');
+const shim_1 = require('@joplin/lib/shim');
+const { themeStyle } = require('@joplin/lib/theme');
+const Note_1 = require('@joplin/lib/models/Note');
+const resourceUtils_1 = require('@joplin/lib/models/utils/resourceUtils');
+function useMarkupToHtml(deps) {
+	const { themeId, customCss, plugins, whiteBackgroundNoteRendering } = deps;
+	const resourceBaseUrl = (0, react_1.useMemo)(() => {
+		return `joplin-content://note-viewer/${Setting_1.default.value('resourceDir')}/`;
+	}, []);
+	const markupToHtml = (0, react_1.useMemo)(() => {
+		return markupLanguageUtils_1.default.newMarkupToHtml(plugins, {
+			resourceBaseUrl,
+			customCss: customCss || '',
+		});
+	}, [plugins, customCss, resourceBaseUrl]);
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+	return (0, react_1.useCallback)(async (markupLanguage, md, options = null) => {
+		options = { replaceResourceInternalToExternalLinks: false, resourceInfos: {}, platformName: shim_1.default.platformName(), ...options };
+		md = md || '';
+		const theme = themeStyle(themeId);
+		let resources = {};
+		if (options.replaceResourceInternalToExternalLinks) {
+			md = await Note_1.default.replaceResourceInternalToExternalLinks(md, { useAbsolutePaths: true });
+		} else {
+			resources = options.resourceInfos;
+		}
+		delete options.replaceResourceInternalToExternalLinks;
+		const result = await markupToHtml.render(markupLanguage, md, theme, { codeTheme: theme.codeThemeCss, resources: resources, postMessageSyntax: 'ipcProxySendToHost', splitted: true, externalAssetsOnly: true, codeHighlightCacheKey: 'useMarkupToHtml', settingValue: deps.settingValue, whiteBackgroundNoteRendering, itemIdToUrl: (id, urlParameters = '') => {
+			if (!(id in resources) || !resources[id]) {
+				return null;
+			}
+			return (0, resourceUtils_1.resourceFullPath)(resources[id].item, resourceBaseUrl) + urlParameters;
+		}, ...options });
+		return result;
+	}, [themeId, markupToHtml, whiteBackgroundNoteRendering, resourceBaseUrl, deps.settingValue]);
+}
+exports.default = useMarkupToHtml;
+// # sourceMappingURL=useMarkupToHtml.js.map

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

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

packages/app-desktop/gui/NoteTextViewer.tsx

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

packages/app-desktop/gui/NotyfContext.tsx

@@ -0,0 +1,20 @@
+// Based on https://github.com/caroso1222/notyf/blob/master/recipes/react.md
+
+import * as React from 'react';
+import { Notyf } from 'notyf';
+import { ToastType } from '@joplin/lib/services/plugins/api/types';
+
+export default React.createContext(
+	new Notyf({
+		// Set your global Notyf configuration here
+		duration: 6000,
+		types: [
+			{
+				type: ToastType.Info,
+				icon: false,
+				className: 'notyf__toast--info',
+				background: 'blue', // Need to set a background, otherwise Notyf won't create the background element. But the color will be overriden in CSS.
+			},
+		],
+	}),
+);

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { useContext, useEffect, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
+import NotyfContext from '../NotyfContext';
+import useAsyncEffect from '@joplin/lib/hooks/useAsyncEffect';
 import { Toast, ToastType } from '@joplin/lib/services/plugins/api/types';
-import { PopupNotificationContext } from '../PopupNotification/PopupNotificationProvider';
-import { NotificationType } from '../PopupNotification/types';
+import { INotyfNotificationOptions } from 'notyf';
 
 const emptyToast = (): Toast => {
 	return {
@@ -19,23 +19,26 @@ interface Props {
 }
 
 export default (props: Props) => {
-	const popupManager = useContext(PopupNotificationContext);
-
+	const notyfContext = useContext(NotyfContext);
 	const toast = useMemo(() => {
 		const toast: Toast = props.toast ? props.toast : emptyToast();
 		return toast;
 	}, [props.toast]);
 
-	useEffect(() => {
+	useAsyncEffect(async () => {
 		if (!toast.message) return;
 
-		popupManager.createPopup(() => toast.message, {
-			type: toast.type as string as NotificationType,
-		}).scheduleDismiss(toast.duration);
+		const options: Partial<INotyfNotificationOptions> = {
+			type: toast.type,
+			message: toast.message,
+			duration: toast.duration,
+		};
+
+		notyfContext.open(options);
 		// toast.timestamp needs to be included in the dependency list to allow
 		// showing multiple toasts with the same message, one after another.
 		// See https://github.com/laurent22/joplin/issues/11783
-	}, [toast.message, toast.duration, toast.type, toast.timestamp, popupManager]);
+	}, [toast.message, toast.duration, toast.type, toast.timestamp, notyfContext]);
 
 	return <div style={{ display: 'none' }}/>;
 };

packages/app-desktop/gui/PopupNotification/NotificationItem.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { NotificationType } from './types';
-import { _ } from '@joplin/lib/locale';
-
-interface Props {
-	children: React.ReactNode;
-	key: string;
-	type: NotificationType;
-	dismissing: boolean;
-	popup: boolean;
-}
-
-const NotificationItem: React.FC<Props> = props => {
-	const [iconClassName, iconLabel] = (() => {
-		if (props.type === NotificationType.Success) {
-			return ['fas fa-check', _('Success')];
-		}
-		if (props.type === NotificationType.Error) {
-			return ['fas fa-times', _('Error')];
-		}
-		if (props.type === NotificationType.Info) {
-			return ['fas fa-info', _('Info')];
-		}
-		return ['', ''];
-	})();
-
-	const containerModifier = (() => {
-		if (props.type === NotificationType.Success) return '-success';
-		if (props.type === NotificationType.Error) return '-error';
-		if (props.type === NotificationType.Info) return '-info';
-		return '';
-	})();
-
-	const icon = <i
-		role='img'
-		aria-label={iconLabel}
-		className={`icon ${iconClassName}`}
-	/>;
-
-	return <li
-		role={props.popup ? 'alert' : undefined}
-		className={`popup-notification-item ${containerModifier} ${props.dismissing ? '-dismissing' : ''}`}
-	>
-		{iconClassName ? icon : null}
-		<div className='ripple'/>
-		<div className='content'>
-			{props.children}
-		</div>
-	</li>;
-};
-
-export default NotificationItem;

packages/app-desktop/gui/PopupNotification/PopupNotificationList.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { VisibleNotificationsContext } from './PopupNotificationProvider';
-import NotificationItem from './NotificationItem';
-import { useContext } from 'react';
-import { _ } from '@joplin/lib/locale';
-
-interface Props {}
-
-// This component displays the popups managed by PopupNotificationContext.
-// This allows popups to be shown in multiple windows at the same time.
-const PopupNotificationList: React.FC<Props> = () => {
-	const popupSpecs = useContext(VisibleNotificationsContext);
-	const popups = [];
-	for (const spec of popupSpecs) {
-		if (spec.dismissed) continue;
-
-		popups.push(
-			<NotificationItem
-				key={spec.key}
-				type={spec.type}
-				dismissing={!!spec.dismissAt}
-				popup={true}
-			>{spec.content()}</NotificationItem>,
-		);
-	}
-	popups.reverse();
-
-	if (popups.length) {
-		return <ul
-			className='popup-notification-list -overlay'
-			role='group'
-			aria-label={_('Notifications')}
-		>
-			{popups}
-		</ul>;
-	} else {
-		return null;
-	}
-};
-
-export default PopupNotificationList;

packages/app-desktop/gui/PopupNotification/PopupNotificationProvider.tsx

@@ -1,122 +0,0 @@
-import * as React from 'react';
-import { createContext, useMemo, useRef, useState } from 'react';
-import { NotificationType, PopupHandle, PopupControl as PopupManager } from './types';
-import { Hour, msleep } from '@joplin/utils/time';
-
-export const PopupNotificationContext = createContext<PopupManager|null>(null);
-export const VisibleNotificationsContext = createContext<PopupSpec[]>([]);
-
-interface Props {
-	children: React.ReactNode;
-}
-
-interface PopupSpec {
-	key: string;
-	dismissAt?: number;
-	dismissed: boolean;
-	type: NotificationType;
-	content: ()=> React.ReactNode;
-}
-
-const PopupNotificationProvider: React.FC<Props> = props => {
-	const [popupSpecs, setPopupSpecs] = useState<PopupSpec[]>([]);
-	const nextPopupKey = useRef(0);
-
-	const popupManager = useMemo((): PopupManager => {
-		const removeOldPopups = () => {
-			// The WCAG allows dismissing notifications older than 20 hours.
-			setPopupSpecs(popups => popups.filter(popup => {
-				if (!popup.dismissed) {
-					return true;
-				}
-
-				const dismissedRecently = popup.dismissAt > performance.now() - Hour * 20;
-				return dismissedRecently;
-			}));
-		};
-
-		const removePopupWithKey = (key: string) => {
-			setPopupSpecs(popups => popups.filter(p => p.key !== key));
-		};
-
-		type UpdatePopupCallback = (popup: PopupSpec)=> PopupSpec;
-		const updatePopupWithKey = (key: string, updateCallback: UpdatePopupCallback) => {
-			setPopupSpecs(popups => popups.map(p => {
-				if (p.key === key) {
-					return updateCallback(p);
-				} else {
-					return p;
-				}
-			}));
-		};
-
-		const dismissAnimationDelay = 600;
-		const dismissPopup = async (key: string) => {
-			// Start the dismiss animation
-			updatePopupWithKey(key, popup => ({
-				...popup,
-				dismissAt: performance.now() + dismissAnimationDelay,
-			}));
-
-			await msleep(dismissAnimationDelay);
-
-			updatePopupWithKey(key, popup => ({
-				...popup,
-				dismissed: true,
-			}));
-			removeOldPopups();
-		};
-
-		const dismissAndRemovePopup = async (key: string) => {
-			await dismissPopup(key);
-			removePopupWithKey(key);
-		};
-
-		const manager: PopupManager = {
-			createPopup: (content, { type } = {}): PopupHandle => {
-				const key = `popup-${nextPopupKey.current++}`;
-				const newPopup: PopupSpec = {
-					key,
-					content,
-					type,
-					dismissed: false,
-				};
-
-				setPopupSpecs(popups => {
-					const newPopups = [...popups];
-
-					// Replace the existing popup, if it exists
-					const insertIndex = newPopups.findIndex(p => p.key === key);
-					if (insertIndex === -1) {
-						newPopups.push(newPopup);
-					} else {
-						newPopups.splice(insertIndex, 1, newPopup);
-					}
-
-					return newPopups;
-				});
-
-				const handle: PopupHandle = {
-					remove() {
-						void dismissAndRemovePopup(key);
-					},
-					scheduleDismiss(delay = 5_500) {
-						setTimeout(() => {
-							void dismissPopup(key);
-						}, delay);
-					},
-				};
-				return handle;
-			},
-		};
-		return manager;
-	}, []);
-
-	return <PopupNotificationContext.Provider value={popupManager}>
-		<VisibleNotificationsContext.Provider value={popupSpecs}>
-			{props.children}
-		</VisibleNotificationsContext.Provider>
-	</PopupNotificationContext.Provider>;
-};
-
-export default PopupNotificationProvider;

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

@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-export type PopupHandle = {
-	remove(): void;
-	scheduleDismiss(delay?: number): void;
-};
-
-export enum NotificationType {
-	Info = 'info',
-	Success = 'success',
-	Error = 'error',
-}
-
-export type NotificationContentCallback = ()=> React.ReactNode;
-
-export interface PopupOptions {
-	type?: NotificationType;
-}
-
-export interface PopupControl {
-	createPopup(content: NotificationContentCallback, props?: PopupOptions): PopupHandle;
-}

packages/app-desktop/gui/Root.tsx

@@ -30,7 +30,6 @@ import WindowCommandsAndDialogs from './WindowCommandsAndDialogs/WindowCommandsA
 import { defaultWindowId, stateUtils, WindowState } from '@joplin/lib/reducer';
 import bridge from '../services/bridge';
 import EditorWindow from './NoteEditor/EditorWindow';
-import PopupNotificationProvider from './PopupNotification/PopupNotificationProvider';
 const { ThemeProvider, StyleSheetManager, createGlobalStyle } = require('styled-components');
 
 interface Props {
@@ -198,15 +197,13 @@ class RootComponent extends React.Component<Props, any> {
 		return (
 			<StyleSheetManager disableVendorPrefixes>
 				<ThemeProvider theme={theme}>
-					<PopupNotificationProvider>
-						<StyleSheetContainer/>
-						<MenuBar/>
-						<GlobalStyle/>
-						<WindowCommandsAndDialogs windowId={defaultWindowId} />
-						<Navigator style={navigatorStyle} screens={screens} className={`profile-${this.props.profileConfigCurrentProfileId}`} />
-						{this.renderSecondaryWindows()}
-						{this.renderModalMessage(this.modalDialogProps())}
-					</PopupNotificationProvider>
+					<StyleSheetContainer/>
+					<MenuBar/>
+					<GlobalStyle/>
+					<WindowCommandsAndDialogs windowId={defaultWindowId} />
+					<Navigator style={navigatorStyle} screens={screens} className={`profile-${this.props.profileConfigCurrentProfileId}`} />
+					{this.renderSecondaryWindows()}
+					{this.renderModalMessage(this.modalDialogProps())}
 				</ThemeProvider>
 			</StyleSheetManager>
 		);

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

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

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

@@ -6,9 +6,7 @@ interface Props {
 }
 
 const EmptyExpandLink: React.FC<Props> = props => {
-	return <a className={`sidebar-expand-link ${props.className ?? ''}`}>
-		<ExpandIcon isVisible={false} isExpanded={false}/>
-	</a>;
+	return <a className={`sidebar-expand-link ${props.className ?? ''}`}><ExpandIcon isVisible={false} isExpanded={false}/></a>;
 };
 
 export default EmptyExpandLink;

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

@@ -1,10 +1,15 @@
 import * as React from 'react';
 import { _ } from '@joplin/lib/locale';
 
-interface ExpandIconProps {
+type ExpandIconProps = {
 	isExpanded: boolean;
-	isVisible: boolean;
-}
+	isVisible: true;
+	targetTitle: string;
+}|{
+	isExpanded: boolean;
+	isVisible: false;
+	targetTitle?: string;
+};
 
 const ExpandIcon: React.FC<ExpandIconProps> = props => {
 	const classNames = ['sidebar-expand-icon'];
@@ -18,17 +23,12 @@ const ExpandIcon: React.FC<ExpandIconProps> = props => {
 			return undefined;
 		}
 		if (props.isExpanded) {
-			return _('Expanded');
+			return _('Expanded, press space to collapse.');
 		}
-		return _('Collapsed');
+		return _('Collapsed, press space to expand.');
 	};
 	const label = getLabel();
-	return <i
-		className={classNames.join(' ')}
-		aria-hidden={!props.isVisible}
-		aria-label={label}
-		role='img'
-	></i>;
+	return <i className={classNames.join(' ')} aria-label={label} role='img'></i>;
 };
 
 export default ExpandIcon;

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

@@ -5,6 +5,7 @@ import EmptyExpandLink from './EmptyExpandLink';
 
 interface ExpandLinkProps {
 	folderId: string;
+	folderTitle: string;
 	hasChildren: boolean;
 	isExpanded: boolean;
 	className: string;
@@ -14,7 +15,7 @@ interface ExpandLinkProps {
 const ExpandLink: React.FC<ExpandLinkProps> = props => {
 	return props.hasChildren ? (
 		<a className={`sidebar-expand-link ${props.className}`} data-folder-id={props.folderId} onClick={props.onClick} role='button'>
-			<ExpandIcon isVisible={true} isExpanded={props.isExpanded} />
+			<ExpandIcon isVisible={true} isExpanded={props.isExpanded} targetTitle={props.folderTitle}/>
 		</a>
 	) : (
 		<EmptyExpandLink className={props.className}/>

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

@@ -11,7 +11,6 @@ import { ModelType } from '@joplin/lib/BaseModel';
 import { _ } from '@joplin/lib/locale';
 import NoteCount from './NoteCount';
 import ListItemWrapper, { ListItemRef } from './ListItemWrapper';
-import { useId } from 'react';
 
 const renderFolderIcon = (folderIcon: FolderIcon) => {
 	if (!folderIcon) {
@@ -66,7 +65,6 @@ function FolderItem(props: FolderItemProps) {
 		if (!showFolderIcon) return null;
 		return renderFolderIcon(folderIcon);
 	};
-	const titleId = useId();
 
 	return (
 		<ListItemWrapper
@@ -87,13 +85,9 @@ function FolderItem(props: FolderItemProps) {
 			data-folder-id={folderId}
 			data-id={folderId}
 			data-type={ModelType.Folder}
-			// Accessibility labels: Don't include the expand/collapse link in the description,
-			// since this information is already conveyed by aria-* props.
-			aria-labelledby={titleId}
 		>
 			<StyledListItemAnchor
 				className="list-item"
-				id={titleId}
 				isConflictFolder={folderId === Folder.conflictFolderId()}
 				selected={selected}
 				shareId={shareId}
@@ -112,6 +106,7 @@ function FolderItem(props: FolderItemProps) {
 				// title first.
 				className='toggle'
 				hasChildren={hasChildren}
+				folderTitle={folderTitle}
 				folderId={folderId}
 				onClick={onFolderToggleClick_}
 				isExpanded={isExpanded}

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

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

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

@@ -1,13 +1,15 @@
-import * as React from 'react';
-import { useContext, useEffect, useRef } from 'react';
+import { useContext, useCallback, useMemo, useRef } from 'react';
 import { StateLastDeletion } from '@joplin/lib/reducer';
 import { _, _n } from '@joplin/lib/locale';
+import NotyfContext from '../NotyfContext';
+import { waitForElement } from '@joplin/lib/dom';
+import useAsyncEffect from '@joplin/lib/hooks/useAsyncEffect';
+import { htmlentities } from '@joplin/utils/html';
 import restoreItems from '@joplin/lib/services/trash/restoreItems';
 import { ModelType } from '@joplin/lib/BaseModel';
+import { themeStyle } from '@joplin/lib/theme';
 import { Dispatch } from 'redux';
-import { PopupNotificationContext } from '../PopupNotification/PopupNotificationProvider';
-import { NotificationType } from '../PopupNotification/types';
-import TrashNotificationMessage from './TrashNotificationMessage';
+import { NotyfNotification } from 'notyf';
 
 interface Props {
 	lastDeletion: StateLastDeletion;
@@ -16,29 +18,50 @@ interface Props {
 	dispatch: Dispatch;
 }
 
-const onCancelClick = async (lastDeletion: StateLastDeletion) => {
-	if (lastDeletion.folderIds.length) {
-		await restoreItems(ModelType.Folder, lastDeletion.folderIds);
-	}
-
-	if (lastDeletion.noteIds.length) {
-		await restoreItems(ModelType.Note, lastDeletion.noteIds);
-	}
-};
-
 export default (props: Props) => {
-	const popupManager = useContext(PopupNotificationContext);
+	const notyfContext = useContext(NotyfContext);
+	const notificationRef = useRef<NotyfNotification | null>(null);
 
-	const lastDeletionNotificationTimeRef = useRef<number>();
-	lastDeletionNotificationTimeRef.current = props.lastDeletionNotificationTime;
+	const theme = useMemo(() => {
+		return themeStyle(props.themeId);
+	}, [props.themeId]);
 
-	useEffect(() => {
-		const lastDeletionNotificationTime = lastDeletionNotificationTimeRef.current;
-		if (!props.lastDeletion || props.lastDeletion.timestamp <= lastDeletionNotificationTime) return;
+	const notyf = useMemo(() => {
+		const output = notyfContext;
+		output.options.types = notyfContext.options.types.map(type => {
+			if (type.type === 'success') {
+				type.background = theme.backgroundColor5;
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+				(type.icon as any).color = theme.backgroundColor5;
+			}
+			return type;
+		});
+		return output;
+	}, [notyfContext, theme]);
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+	const onCancelClick = useCallback(async (event: any) => {
+		notyf.dismiss(notificationRef.current);
+		notificationRef.current = null;
+
+		const lastDeletion: StateLastDeletion = JSON.parse(event.currentTarget.getAttribute('data-lastDeletion'));
+
+		if (lastDeletion.folderIds.length) {
+			await restoreItems(ModelType.Folder, lastDeletion.folderIds);
+		}
+
+		if (lastDeletion.noteIds.length) {
+			await restoreItems(ModelType.Note, lastDeletion.noteIds);
+		}
+	}, [notyf]);
+
+	useAsyncEffect(async (event) => {
+		if (!props.lastDeletion || props.lastDeletion.timestamp <= props.lastDeletionNotificationTime) return;
 
 		props.dispatch({ type: 'DELETION_NOTIFICATION_DONE' });
 
 		let msg = '';
+
 		if (props.lastDeletion.folderIds.length) {
 			msg = _('The notebook and its content was successfully moved to the trash.');
 		} else if (props.lastDeletion.noteIds.length) {
@@ -47,15 +70,16 @@ export default (props: Props) => {
 			return;
 		}
 
-		const handleCancelClick = () => {
-			notification.remove();
-			void onCancelClick(props.lastDeletion);
-		};
-		const notification = popupManager.createPopup(() => (
-			<TrashNotificationMessage message={msg} onCancel={handleCancelClick}/>
-		), { type: NotificationType.Success });
-		notification.scheduleDismiss();
-	}, [props.lastDeletion, props.dispatch, popupManager]);
+		const linkId = `deletion-notification-cancel-${Math.floor(Math.random() * 1000000)}`;
+		const cancelLabel = _('Cancel');
+
+		const notification = notyf.success(`${msg} <a href="#" class="cancel" data-lastDeletion="${htmlentities(JSON.stringify(props.lastDeletion))}" id="${linkId}">${cancelLabel}</a>`);
+		notificationRef.current = notification;
+
+		const element: HTMLAnchorElement = await waitForElement(document, linkId);
+		if (event.cancelled) return;
+		element.addEventListener('click', onCancelClick);
+	}, [props.lastDeletion, notyf, props.dispatch]);
 
 	return <div style={{ display: 'none' }}/>;
 };

packages/app-desktop/gui/TrashNotification/TrashNotificationMessage.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { _ } from '@joplin/lib/locale';
-import { useCallback, useState } from 'react';
-
-interface Props {
-	message: string;
-	onCancel: ()=> void;
-}
-
-const TrashNotificationMessage: React.FC<Props> = props => {
-	const [cancelling, setCancelling] = useState(false);
-	const onCancel = useCallback(() => {
-		setCancelling(true);
-		props.onCancel();
-	}, [props.onCancel]);
-
-	return <>
-		{props.message}
-		{' '}
-		<button
-			className="link-button"
-			onClick={onCancel}
-		>{cancelling ? _('Cancelling...') : _('Cancel')}</button>
-	</>;
-};
-
-export default TrashNotificationMessage;

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

@@ -0,0 +1,27 @@
+body .notyf {
+	color: var(--joplin-color5);
+}
+
+.notyf__toast {
+
+	> .notyf__wrapper {
+
+		> .notyf__message {
+
+			> .cancel {
+				color: var(--joplin-color5);
+				text-decoration: underline;
+			}
+
+		}
+
+		> .notyf__icon {
+
+			> .notyf__icon--success {
+				background-color: var(--joplin-color5);
+			}
+
+		}
+
+	}
+}

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

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { useCallback, useContext, useEffect } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { themeStyle } from '@joplin/lib/theme';
+import NotyfContext from '../NotyfContext';
 import { UpdateInfo } from 'electron-updater';
 import { ipcRenderer, IpcRendererEvent } from 'electron';
 import { AutoUpdaterEvents } from '../../services/autoUpdater/AutoUpdaterService';
+import { NotyfEvent, NotyfNotification } from 'notyf';
 import { _ } from '@joplin/lib/locale';
+import { htmlentities } from '@joplin/utils/html';
 import shim from '@joplin/lib/shim';
-import { PopupNotificationContext } from '../PopupNotification/PopupNotificationProvider';
-import Button, { ButtonLevel } from '../Button/Button';
-import { NotificationType } from '../PopupNotification/types';
 
-interface Props {
+interface UpdateNotificationProps {
+	themeId: number;
 }
 
 export enum UpdateNotificationEvents {
@@ -20,61 +22,111 @@ export enum UpdateNotificationEvents {
 
 const changelogLink = 'https://github.com/laurent22/joplin/releases';
 
-const openChangelogLink = () => {
+window.openChangelogLink = () => {
 	shim.openUrl(changelogLink);
 };
 
-const handleApplyUpdate = () => {
-	ipcRenderer.send('apply-update-now');
-};
+const UpdateNotification = ({ themeId }: UpdateNotificationProps) => {
+	const notyfContext = useContext(NotyfContext);
+	const notificationRef = useRef<NotyfNotification | null>(null); // Use ref to hold the current notification
+
+	const theme = useMemo(() => themeStyle(themeId), [themeId]);
+
+	const notyf = useMemo(() => {
+		const output = notyfContext;
+		output.options.types = notyfContext.options.types.map(type => {
+			if (type.type === 'success') {
+				type.background = theme.backgroundColor5;
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+				(type.icon as any).color = theme.backgroundColor5;
+			}
+			return type;
+		});
+		return output;
+	}, [notyfContext, theme]);
+
+	const handleDismissNotification = useCallback(() => {
+		notyf.dismiss(notificationRef.current);
+		notificationRef.current = null;
+	}, [notyf]);
+
+	const handleApplyUpdate = useCallback(() => {
+		ipcRenderer.send('apply-update-now');
+		handleDismissNotification();
+	}, [handleDismissNotification]);
 
-const UpdateNotification: React.FC<Props> = () => {
-	const popupManager = useContext(PopupNotificationContext);
 
 	const handleUpdateDownloaded = useCallback((_event: IpcRendererEvent, info: UpdateInfo) => {
-		const notification = popupManager.createPopup(() => (
-			<div className='update-notification'>
-				{_('A new update (%s) is available', info.version)}
-				<button className='link-button' onClick={openChangelogLink}>{
-					_('See changelog')
-				}</button>
-				<div className='buttons'>
-					<Button
-						level={ButtonLevel.Tertiary}
-						onClick={() => {
-							notification.remove();
-							handleApplyUpdate();
-						}}
-						title={_('Restart now')}
-					/>
-					<Button
-						level={ButtonLevel.Tertiary}
-						onClick={() => notification.remove()}
-						title={_('Update later')}
-					/>
-				</div>
+		if (notificationRef.current) return;
+
+		const updateAvailableHtml = htmlentities(_('A new update (%s) is available', info.version));
+		const seeChangelogHtml = htmlentities(_('See changelog'));
+		const restartNowHtml = htmlentities(_('Restart now'));
+		const updateLaterHtml = htmlentities(_('Update later'));
+
+		const messageHtml = `
+		<div class="update-notification" style="color: ${theme.color2};">
+			${updateAvailableHtml}  <a href="#" onclick="openChangelogLink()" style="color: ${theme.color2};">${seeChangelogHtml}</a>
+			<div style="display: flex; gap: 10px; margin-top: 8px;">
+				<button onclick="document.dispatchEvent(new CustomEvent('${UpdateNotificationEvents.ApplyUpdate}'))" class="notyf__button notyf__button--confirm" style="color: ${theme.color2};">${restartNowHtml}</button>
+				<button onclick="document.dispatchEvent(new CustomEvent('${UpdateNotificationEvents.Dismiss}'))" class="notyf__button notyf__button--dismiss" style="color: ${theme.color2};">${updateLaterHtml}</button>
 			</div>
-		));
-	}, [popupManager]);
+		</div>
+		`;
+
+		const notification: NotyfNotification = notyf.open({
+			type: 'success',
+			message: messageHtml,
+			position: {
+				x: 'right',
+				y: 'bottom',
+			},
+			duration: 0,
+		});
+
+		notificationRef.current = notification;
+	}, [notyf, theme]);
 
 	const handleUpdateNotAvailable = useCallback(() => {
-		const notification = popupManager.createPopup(() => (
-			<div className='update-notification'>
-				{_('No updates available')}
+		if (notificationRef.current) return;
+
+		const noUpdateMessageHtml = htmlentities(_('No updates available'));
+
+		const messageHtml = `
+			<div class="update-notification" style="color: ${theme.color2};">
+				${noUpdateMessageHtml}
 			</div>
-		), { type: NotificationType.Info });
-		notification.scheduleDismiss();
-	}, [popupManager]);
+		`;
+
+		const notification: NotyfNotification = notyf.open({
+			type: 'success',
+			message: messageHtml,
+			position: {
+				x: 'right',
+				y: 'bottom',
+			},
+			duration: 5000,
+		});
+
+		notification.on(NotyfEvent.Dismiss, () => {
+			notificationRef.current = null;
+		});
+
+		notificationRef.current = notification;
+	}, [notyf, theme]);
 
 	useEffect(() => {
 		ipcRenderer.on(AutoUpdaterEvents.UpdateDownloaded, handleUpdateDownloaded);
 		ipcRenderer.on(AutoUpdaterEvents.UpdateNotAvailable, handleUpdateNotAvailable);
+		document.addEventListener(UpdateNotificationEvents.ApplyUpdate, handleApplyUpdate);
+		document.addEventListener(UpdateNotificationEvents.Dismiss, handleDismissNotification);
 
 		return () => {
 			ipcRenderer.removeListener(AutoUpdaterEvents.UpdateDownloaded, handleUpdateDownloaded);
 			ipcRenderer.removeListener(AutoUpdaterEvents.UpdateNotAvailable, handleUpdateNotAvailable);
+			document.removeEventListener(UpdateNotificationEvents.ApplyUpdate, handleApplyUpdate);
 		};
-	}, [handleUpdateDownloaded, handleUpdateNotAvailable]);
+	}, [handleApplyUpdate, handleDismissNotification, handleUpdateDownloaded, handleUpdateNotAvailable]);
 
 
 	return (

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

@@ -1,11 +1,27 @@
 .update-notification {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 
-	> .buttons {
-		display: flex;
-		gap: 10px;
-		margin-top: 8px;
-	}
+    .button-container {
+        display: flex;
+        gap: 10px;
+        margin-top: 8px;
+    }
+
+    .notyf__button {
+        padding: 5px 10px;
+        border: 1px solid;
+        border-radius: 4px;
+        background-color: transparent;
+        cursor: pointer;
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+    }
+
+    a {
+        text-decoration: underline; 
+    }
 }

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

@@ -18,7 +18,6 @@ import useWindowCommands from './utils/useWindowCommands';
 import PluginDialogs from './PluginDialogs';
 import useSyncDialogState from './utils/useSyncDialogState';
 import AppDialogs from './AppDialogs';
-import PopupNotificationList from '../PopupNotification/PopupNotificationList';
 
 const PluginManager = require('@joplin/lib/services/PluginManager');
 
@@ -114,9 +113,7 @@ const WindowCommandsAndDialogs: React.FC<Props> = props => {
 	const dialogInfo = PluginManager.instance().pluginDialogToShow(props.pluginsLegacy);
 	const pluginDialog = !dialogInfo ? null : <dialogInfo.Dialog {...dialogInfo.props} />;
 
-	const {
-		noteContentPropertiesDialogOptions, notePropertiesDialogOptions, shareNoteDialogOptions, shareFolderDialogOptions, promptOptions,
-	} = dialogState;
+	const { noteContentPropertiesDialogOptions, notePropertiesDialogOptions, shareNoteDialogOptions, shareFolderDialogOptions, promptOptions } = dialogState;
 
 
 	return <>
@@ -176,8 +173,6 @@ const WindowCommandsAndDialogs: React.FC<Props> = props => {
 			buttons={promptOptions && 'buttons' in promptOptions ? promptOptions.buttons : null}
 			inputType={promptOptions && 'inputType' in promptOptions ? promptOptions.inputType : null}
 		/>
-
-		<PopupNotificationList/>
 	</>;
 };
 

packages/app-desktop/gui/WindowCommandsAndDialogs/commands/toggleNoteList.ts

@@ -3,7 +3,6 @@ import { _ } from '@joplin/lib/locale';
 import setLayoutItemProps from '../../ResizableLayout/utils/setLayoutItemProps';
 import layoutItemProp from '../../ResizableLayout/utils/layoutItemProp';
 import { AppState } from '../../../app.reducer';
-import { WindowControl } from '../utils/useWindowControl';
 
 export const declaration: CommandDeclaration = {
 	name: 'toggleNoteList',
@@ -11,16 +10,14 @@ export const declaration: CommandDeclaration = {
 	iconName: 'fas fa-align-justify',
 };
 
-export const runtime = (control: WindowControl): CommandRuntime => {
+export const runtime = (): CommandRuntime => {
 	return {
 		execute: async (context: CommandContext) => {
 			const layout = (context.state as AppState).mainLayout;
 
-			const visible = !layoutItemProp(layout, 'noteList', 'visible');
 			const newLayout = setLayoutItemProps(layout, 'noteList', {
-				visible,
+				visible: !layoutItemProp(layout, 'noteList', 'visible'),
 			});
-			control.announcePanelVisibility(_('Note list'), visible);
 
 			// Toggling the sidebar will affect the size of most other on-screen components.
 			// Dispatching a window resize event is a bit of a hack, but it ensures that any

packages/app-desktop/gui/WindowCommandsAndDialogs/commands/toggleSideBar.ts

@@ -3,7 +3,6 @@ import { _ } from '@joplin/lib/locale';
 import setLayoutItemProps from '../../ResizableLayout/utils/setLayoutItemProps';
 import layoutItemProp from '../../ResizableLayout/utils/layoutItemProp';
 import { AppState } from '../../../app.reducer';
-import { WindowControl } from '../utils/useWindowControl';
 
 export const declaration: CommandDeclaration = {
 	name: 'toggleSideBar',
@@ -11,16 +10,14 @@ export const declaration: CommandDeclaration = {
 	iconName: 'fas fa-bars',
 };
 
-export const runtime = (control: WindowControl): CommandRuntime => {
+export const runtime = (): CommandRuntime => {
 	return {
 		execute: async (context: CommandContext) => {
 			const layout = (context.state as AppState).mainLayout;
 
-			const visible = !layoutItemProp(layout, 'sideBar', 'visible');
 			const newLayout = setLayoutItemProps(layout, 'sideBar', {
-				visible,
+				visible: !layoutItemProp(layout, 'sideBar', 'visible'),
 			});
-			control.announcePanelVisibility(_('Sidebar'), visible);
 
 			// Toggling the sidebar will affect the size of most other on-screen components.
 			// Dispatching a window resize event is a bit of a hack, but it ensures that any

packages/app-desktop/gui/WindowCommandsAndDialogs/utils/useWindowControl.ts

@@ -2,13 +2,10 @@ import * as React from 'react';
 import { useMemo, useRef } from 'react';
 import { DialogState } from '../types';
 import { PrintCallback } from './usePrintToCallback';
-import { _ } from '@joplin/lib/locale';
-import announceForAccessibility from '../../utils/announceForAccessibility';
 
 export interface WindowControl {
 	setState: (update: Partial<DialogState>)=> void;
 	printTo: PrintCallback;
-	announcePanelVisibility(panelName: string, visible: boolean): void;
 }
 
 export type OnSetDialogState = React.Dispatch<React.SetStateAction<DialogState>>;
@@ -27,11 +24,6 @@ const useWindowControl = (setDialogState: OnSetDialogState, onPrint: PrintCallba
 				}));
 			},
 			printTo: (target, options) => onPrintRef.current(target, options),
-			announcePanelVisibility: (panelName, visible) => {
-				announceForAccessibility(
-					visible ? _('Panel "%s" is visible', panelName) : _('Panel %s is hidden', panelName),
-				);
-			},
 		};
 	}, [setDialogState]);
 };

packages/app-desktop/gui/menuCommandNames.ts

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

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

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

packages/app-desktop/gui/styles/index.scss

@@ -3,7 +3,6 @@
 @use './user-webview-dialog.scss';
 @use './prompt-dialog.scss';
 @use './flat-button.scss';
-@use './link-button.scss';
 @use './help-text.scss';
 @use './toolbar-button.scss';
 @use './toolbar-icon.scss';
@@ -15,5 +14,3 @@
 @use './combobox-wrapper.scss';
 @use './combobox-suggestion-option.scss';
 @use './change-app-layout-dialog.scss';
-@use './popup-notification-list.scss';
-@use './popup-notification-item.scss';

packages/app-desktop/gui/styles/link-button.scss

@@ -1,13 +0,0 @@
-
-.link-button {
-	background: transparent;
-	border: none;
-	font-size: inherit;
-	font-weight: inherit;
-	color: inherit;
-	padding: 0;
-	margin: 0;
-
-	text-decoration: underline;
-	cursor: pointer;
-}

packages/app-desktop/gui/styles/popup-notification-item.scss

@@ -1,126 +0,0 @@
-@keyframes slide-in {
-	from {
-		opacity: 0;
-		transform: translateY(25%);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-@keyframes slide-out {
-	from {
-		opacity: 1;
-		transform: translateY(0);
-	}
-	to {
-		opacity: 0;
-		transform: translateY(25%);
-	}
-}
-
-@keyframes grow {
-	from {
-		transform: scale(0);
-	}
-	to {
-		transform: scale(1);
-	}
-}
-
-.popup-notification-item {
-	margin: 12px;
-	padding: 13px 15px;
-	border-radius: 4px;
-
-	overflow: clip;
-	position: relative;
-	display: flex;
-	align-items: center;
-
-	box-shadow: 0 3px 7px 0px rgba(0, 0, 0, 0.25);
-
-	--text-color: var(--joplin-color5);
-	--ripple-color: var(--joplin-background-color5);
-	background-color: color-mix(in srgb, var(--ripple-color) 20%, transparent 70%);
-	color: var(--text-color);
-
-	animation: slide-in 0.3s ease-in both;
-
-	> .icon {
-		font-size: 14px;
-		text-align: center;
-
-		width: 24px;
-		height: 24px;
-		// Make the line hight slightly larger than the icon size
-		// to vertically center the text
-		line-height: 26px;
-
-		margin-inline-end: 13px;
-		border-radius: 50%;
-
-		color: var(--ripple-color);
-		background-color: var(--text-color);
-	}
-
-	> .content {
-		padding: 10px 0;
-		max-width: min(280px, 70vw);
-		font-size: 1.1em;
-		font-weight: 500;
-	}
-
-	> .ripple {
-		--ripple-size: 500px;
-
-		position: absolute;
-		transform-origin: bottom right;
-		top: calc(var(--ripple-size) / -2);
-		right: -40px;
-		z-index: -1;
-
-		background-color: var(--ripple-color);
-		width: var(--ripple-size);
-		height: var(--ripple-size);
-		border-radius: calc(var(--ripple-size) / 2);
-
-		transform: scale(0);
-		animation: grow 0.4s ease-out forwards;
-	}
-
-	&.-dismissing {
-		// Animate the icon and content first
-		animation: slide-out 0.25s ease-out both;
-		animation-delay: 0.25s;
-
-		& > .content, & > .icon {
-			animation: slide-out 0.3s ease-out both;
-		}
-	}
-
-	&.-success {
-		--ripple-color: var(--joplin-color-correct);
-	}
-
-	&.-error {
-		--ripple-color: var(--joplin-color-error);
-	}
-
-	&.-info {
-		--text-color: var(--joplin-color5);
-		--ripple-color: var(--joplin-background-color5);
-	}
-
-	@media (prefers-reduced-motion) {
-		&, & > .content, & > .icon {
-			transform: none !important;
-		}
-
-		> .ripple {
-			transform: scale(1);
-			animation: none;
-		}
-	}
-}

packages/app-desktop/gui/styles/popup-notification-list.scss

@@ -1,22 +0,0 @@
-
-.popup-notification-list {
-	display: flex;
-	align-items: end;
-	flex-direction: column;
-	list-style-type: none;
-	padding-left: 0;
-	padding-right: 0;
-
-	&.-overlay {
-		// Focus should jump to the bottom item first
-		flex-direction: column-reverse;
-		
-		position: absolute;
-		bottom: 0;
-		inset-inline-end: 0; // right: 0 in ltr, left: 0 in rtl
-		z-index: 10;
-
-		max-height: 100vh;
-		overflow-y: auto;
-	}
-}

packages/app-desktop/index.html

@@ -10,6 +10,7 @@
 		<title>Joplin</title>
 		<!-- Note: Add new dynamic CSS imports to style.scss to allow them to be included in secondary windows. -->
 		<link rel="stylesheet" href="style.min.css">
+		<link rel="stylesheet" href="./node_modules/notyf/notyf.min.css">
 
 		<script src="vendor/lib/smalltalk/dist/smalltalk.min.js"></script>
 		<script src="./node_modules/tesseract.js/dist/tesseract.min.js"></script>
@@ -18,5 +19,6 @@
 		<div id="react-root"></div>
 		<script src="./utils/window/eventHandlerOverrides.js"></script>
 		<script src="main-html.js"></script>
+		<script src="./node_modules/notyf/notyf.min.js"></script>
 	</body>
 </html>

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

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

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

@@ -4,7 +4,7 @@ import { _electron as electron } from '@playwright/test';
 import { writeFile } from 'fs-extra';
 import { join } from 'path';
 import createStartupArgs from './util/createStartupArgs';
-import getMainWindow from './util/getMainWindow';
+import firstNonDevToolsWindow from './util/firstNonDevToolsWindow';
 import setFilePickerResponse from './util/setFilePickerResponse';
 import setMessageBoxResponse from './util/setMessageBoxResponse';
 import getImageSourceSize from './util/getImageSourceSize';
@@ -116,10 +116,7 @@ test.describe('main', () => {
 		await editor.attachFileButton.click();
 
 		const viewerFrame = editor.getNoteViewerFrameLocator();
-		const renderedImage = viewerFrame
-			.getByAltText(filename)
-			// Work around occasional "resolved to 2 elements" errors in CI
-			.last();
+		const renderedImage = viewerFrame.getByAltText(filename);
 
 		const fullSize = await getImageSourceSize(renderedImage);
 
@@ -196,7 +193,7 @@ test.describe('main', () => {
 		// Open the app ourselves:
 		const startupArgs = createStartupArgs(profileDirectory);
 		const electronApp = await electron.launch({ args: startupArgs });
-		const mainWindow = await getMainWindow(electronApp);
+		const mainWindow = await firstNonDevToolsWindow(electronApp);
 
 		const safeModeDisableLink = mainWindow.getByText('Disable safe mode and restart');
 		await safeModeDisableLink.waitFor();

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

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

packages/app-desktop/integration-tests/models/NoteEditorScreen.ts

@@ -80,11 +80,7 @@ export default class NoteEditorPage {
 		// We use frameLocator(':scope') to convert the richTextEditor Locator into
 		// a FrameLocator. (:scope selects the locator itself).
 		// https://playwright.dev/docs/api/class-framelocator
-		return this.richTextEditor.contentFrame();
-	}
-
-	public getRichTextEditorBody() {
-		return this.richTextEditor.contentFrame().locator('body');
+		return this.richTextEditor.frameLocator(':scope');
 	}
 
 	public focusCodeMirrorEditor() {

packages/app-desktop/integration-tests/models/NoteList.ts

@@ -25,7 +25,6 @@ export default class NoteList {
 
 	public async focusContent(electronApp: ElectronApplication) {
 		await activateMainMenuItem(electronApp, 'Note list', 'Focus');
-		await expect(this.container.locator(':focus')).toBeAttached();
 	}
 
 	// The resultant locator may fail to resolve if the item is not visible

packages/app-desktop/integration-tests/models/SettingsScreen.ts

@@ -2,22 +2,20 @@
 import { Page, Locator } from '@playwright/test';
 
 export default class SettingsScreen {
-	private readonly container: Locator;
 	public readonly okayButton: Locator;
 	public readonly appearanceTabButton: Locator;
 
-	public constructor(page: Page) {
-		this.container = page.locator('.config-screen');
-		this.okayButton = this.container.locator('.button-bar button', { hasText: 'OK' });
+	public constructor(private page: Page) {
+		this.okayButton = page.locator('button', { hasText: 'OK' });
 		this.appearanceTabButton = this.getTabLocator('Appearance');
 	}
 
 	public getTabLocator(tabName: string) {
-		return this.container.getByRole('tab', { name: tabName });
+		return this.page.getByRole('tab', { name: tabName });
 	}
 
 	public getLastTab() {
-		return this.container.getByRole('tablist').getByRole('tab').last();
+		return this.page.getByRole('tablist').getByRole('tab').last();
 	}
 
 	public async waitFor() {

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

@@ -75,32 +75,6 @@ test.describe('noteList', () => {
 		await expect(noteList.getNoteItemByTitle('test note 1')).toBeVisible();
 	});
 
-	test('deleting a note to the trash should show a notification', async ({ electronApp, mainWindow }) => {
-		const mainScreen = await new MainScreen(mainWindow).setup();
-		await mainScreen.createNewNote('test note 1');
-
-		const noteList = mainScreen.noteList;
-		await noteList.focusContent(electronApp);
-		const testNoteItem = noteList.getNoteItemByTitle('test note 1');
-		await expect(testNoteItem).toBeVisible();
-
-		// Should be removed after deleting
-		await testNoteItem.press('Delete');
-		await expect(testNoteItem).not.toBeVisible();
-
-		// Should show a deleted notification
-		const notification = mainWindow.locator('[role=alert]', {
-			hasText: /The note was successfully moved to the trash./i,
-		});
-		await expect(notification).toBeVisible();
-
-		// Should be possible to un-delete
-		const undeleteButton = notification.getByRole('button', { name: 'Cancel' });
-		await undeleteButton.click();
-
-		await expect(testNoteItem).toBeVisible();
-	});
-
 	test('arrow keys should navigate the note list', async ({ electronApp, mainWindow }) => {
 		const mainScreen = await new MainScreen(mainWindow).setup();
 		const sidebar = mainScreen.sidebar;

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

@@ -23,27 +23,6 @@ test.describe('pluginApi', () => {
 		await editor.expectToHaveText('PASS');
 	});
 
-	test('should return form data from the dialog API', async ({ startAppWithPlugins }) => {
-		const { app, mainWindow } = await startAppWithPlugins(['resources/test-plugins/dialogs.js']);
-		const mainScreen = await new MainScreen(mainWindow).setup();
-		await mainScreen.createNewNote('First note');
-
-		const editor = mainScreen.noteEditor;
-		await editor.expectToHaveText('');
-
-		await mainScreen.goToAnything.runCommand(app, 'showTestDialog');
-		// Wait for the iframe to load
-		const dialogContent = mainScreen.dialog.locator('iframe').contentFrame();
-		await dialogContent.locator('form').waitFor();
-
-		// Submitting the dialog should include form data in the output
-		await mainScreen.dialog.getByRole('button', { name: 'Okay' }).click();
-		await editor.expectToHaveText(JSON.stringify({
-			id: 'ok',
-			hasFormData: true,
-		}));
-	});
-
 	test('should be possible to create multiple toasts with the same text from a plugin', async ({ startAppWithPlugins }) => {
 		const { app, mainWindow } = await startAppWithPlugins(['resources/test-plugins/showToast.js']);
 		const mainScreen = await new MainScreen(mainWindow).setup();

packages/app-desktop/integration-tests/resources/test-plugins/dialogs.js

@@ -1,51 +0,0 @@
-// Allows referencing the Joplin global:
-/* eslint-disable no-undef */
-
-// Allows the `joplin-manifest` block comment:
-/* eslint-disable multiline-comment-style */
-
-/* joplin-manifest:
-{
-	"id": "org.joplinapp.plugins.example.dialogs",
-	"manifest_version": 1,
-	"app_min_version": "3.1",
-	"name": "JS Bundle test",
-	"description": "JS Bundle Test plugin",
-	"version": "1.0.0",
-	"author": "",
-	"homepage_url": "https://joplinapp.org"
-}
-*/
-
-joplin.plugins.register({
-	onStart: async function() {
-		const dialogs = joplin.views.dialogs;
-		const dialogHandle = await dialogs.create('test-dialog');
-		await dialogs.setHtml(
-			dialogHandle,
-			`
-				<form name="main-form">
-					<label>Test: <input type="checkbox" name="test" checked/></label>
-				</form>
-			`,
-		);
-		await dialogs.setButtons(dialogHandle, [
-			{
-				id: 'ok',
-				title: 'Okay',
-			},
-		]);
-		await joplin.commands.register({
-			name: 'showTestDialog',
-			label: 'showTestDialog',
-			iconName: 'fas fa-drum',
-			execute: async () => {
-				const result = await joplin.views.dialogs.open(dialogHandle);
-				await joplin.commands.execute('editor.setText', JSON.stringify({
-					id: result.id,
-					hasFormData: !!result.formData,
-				}));
-			},
-		});
-	},
-});

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

@@ -62,9 +62,6 @@ test.describe('richTextEditor', () => {
 		await setFilePickerResponse(electronApp, [pathToAttach]);
 		await editor.attachFileButton.click();
 
-		// Wait for it to render
-		await expect(editor.getNoteViewerFrameLocator().getByText('test-file.txt')).toBeVisible();
-
 		// Switch to the RTE
 		await editor.toggleEditorsButton.click();
 		await editor.richTextEditor.waitFor();
@@ -85,44 +82,6 @@ test.describe('richTextEditor', () => {
 		expect(await openPathResult).toContain(basename(pathToAttach));
 	});
 
-	test('should not remove text when pressing [enter] at the end of a line with an image', async ({ mainWindow }) => {
-		const mainScreen = await new MainScreen(mainWindow).setup();
-		await mainScreen.createNewNote('Testing pressing enter!');
-		const editor = mainScreen.noteEditor;
-
-		// Set the initial content
-		await editor.codeMirrorEditor.click();
-		await mainWindow.keyboard.type([
-			'<img',
-			' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAEklEQVQIW2P8z8AARBDAiJMDAIzoBf635fcVAAAAAElFTkSuQmCC"',
-			' width="200"',
-			' height="200"',
-			' alt="test image"',
-			'/>',
-		].join(' '));
-		await mainWindow.keyboard.press('Enter');
-		await mainWindow.keyboard.press('Enter');
-		await mainWindow.keyboard.type('Test secondary paragraph.');
-
-		// Switch to the RTE
-		await editor.toggleEditorsButton.click();
-		await editor.richTextEditor.waitFor();
-
-		const richTextEditorFrame = editor.getRichTextFrameLocator();
-		const testParagraph = richTextEditorFrame.getByText('Test secondary paragraph.');
-		await expect(testParagraph).toBeAttached();
-
-		// Move the cursor just after the image, then press enter.
-		const testImage = richTextEditorFrame.getByRole('img', { name: 'test image' });
-		await testImage.click();
-		await mainWindow.keyboard.press('ArrowRight');
-		await mainWindow.keyboard.press('Enter');
-
-		// Should not have removed the image or the test paragraph.
-		await expect(testImage).toBeAttached();
-		await expect(testParagraph).toBeAttached();
-	});
-
 	test('pressing Tab should indent', async ({ mainWindow }) => {
 		const mainScreen = await new MainScreen(mainWindow).setup();
 		await mainScreen.createNewNote('Testing tabs!');
@@ -253,33 +212,5 @@ test.describe('richTextEditor', () => {
 		await expect(editor.noteTitleInput).not.toBeFocused();
 		await expect(editor.richTextEditor).toBeFocused();
 	});
-
-	test('note should have correct content even if opened quickly after last edit', async ({ mainWindow }) => {
-		const mainScreen = await new MainScreen(mainWindow).setup();
-		await mainScreen.createNewNote('Test 1');
-		await mainScreen.createNewNote('Test 2');
-		const test1Header = mainScreen.noteList.getNoteItemByTitle('Test 1');
-		const test2Header = mainScreen.noteList.getNoteItemByTitle('Test 2');
-
-		const editor = mainScreen.noteEditor;
-		await editor.toggleEditorsButton.click();
-		await editor.richTextEditor.waitFor();
-
-		const editorBody = editor.getRichTextEditorBody();
-		const setEditorText = async (targetText: string) => {
-			await editorBody.pressSequentially(targetText);
-			await expect(editorBody).toHaveText(targetText);
-		};
-
-		await test1Header.click();
-		await expect(editorBody).toHaveText('');
-		await setEditorText('Test 1');
-
-		await test2Header.click();
-		// Previously, after switching to note 2, the "Test 1" text would remain present in the
-		// editor.
-		await expect(editorBody).toHaveText('');
-	});
-
 });
 

packages/app-desktop/integration-tests/run-ci.sh

@@ -7,7 +7,7 @@ export CI=true
 if test "$RUNNER_OS" = "Linux" ; then
 	# The Ubuntu Github CI doesn't have a display server.
 	# Start a virtual one with xvfb-run. 
-	xvfb-run -- yarn test-ui
+	xvfb-run -- yarn playwright test
 else
-	yarn test-ui
+	yarn playwright test
 fi

packages/app-desktop/integration-tests/util/createStartupArgs.ts

@@ -1,13 +1,8 @@
-import { dirname, resolve } from 'path';
 
 const createStartupArgs = (profileDirectory: string) => {
-	// Input paths need to be absolute when running from VSCode
-	const baseDirectory = dirname(dirname(__dirname));
-	const mainPath = resolve(baseDirectory, 'main.js');
-
 	// We need to run with --env dev to disable the single instance check.
 	return [
-		mainPath, '--env', 'dev', '--log-level', 'debug', '--no-welcome', '--running-tests', '--profile', resolve(profileDirectory),
+		'main.js', '--env', 'dev', '--no-welcome', '--profile', profileDirectory,
 	];
 };
 

packages/app-desktop/integration-tests/util/firstNonDevToolsWindow.ts

@@ -0,0 +1,43 @@
+import { ElectronApplication, Page } from '@playwright/test';
+
+const isDevTools = async (page: Page) => {
+	// It seems that the developer tools window can have titles in different
+	// formats (e.g. DevTools, Developer Tools).
+	return (await page.title()).match(/Dev(eloper)?\s*Tools/i);
+};
+
+const firstNonDevToolsWindow = async (electronApp: ElectronApplication) => {
+	// Wait for the window event as soon as possible -- it's possible that
+	// the window we want will be shown while doing other async checks.
+	const nextNonDevToolsPage = electronApp.waitForEvent('window', {
+		predicate: async page => {
+			return !(await isDevTools(page));
+		},
+	});
+
+	// First use firstWindow -- it's possible that the first window
+	// has already been shown.
+	let mainWindow = await electronApp.firstWindow();
+
+	if (await isDevTools(mainWindow)) {
+		for (const window of electronApp.windows()) {
+			if (!(await isDevTools(window))) {
+				mainWindow = window;
+				break;
+			}
+		}
+
+		if (await isDevTools(mainWindow)) {
+			mainWindow = await nextNonDevToolsPage;
+		}
+	}
+
+	// waitForEvent will throw if no additional windows are created.
+	// Ignore.
+	// eslint-disable-next-line promise/prefer-await-to-then
+	nextNonDevToolsPage.catch(_error => {});
+
+	return mainWindow;
+};
+
+export default firstNonDevToolsWindow;