Desktop: Fixes #9709: Shared notebook can get corrupted if contributor changes its title

Co-authored-by: Laurent Cozic <laurent22@users.noreply.github.com>

.eslintignore

@@ -87,13 +87,35 @@ packages/lib/countable/Countable.js
 # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
 packages/app-cli/app/LinkSelector.js
 packages/app-cli/app/base-command.js
+packages/app-cli/app/command-apidoc.js
+packages/app-cli/app/command-attach.js
+packages/app-cli/app/command-cat.js
+packages/app-cli/app/command-config.js
+packages/app-cli/app/command-cp.js
 packages/app-cli/app/command-done.test.js
+packages/app-cli/app/command-done.js
+packages/app-cli/app/command-dump.js
 packages/app-cli/app/command-e2ee.js
+packages/app-cli/app/command-edit.js
+packages/app-cli/app/command-exit.js
+packages/app-cli/app/command-export-sync-status.js
+packages/app-cli/app/command-export.js
+packages/app-cli/app/command-geoloc.js
+packages/app-cli/app/command-help.js
+packages/app-cli/app/command-import.js
+packages/app-cli/app/command-ls.js
 packages/app-cli/app/command-mkbook.test.js
 packages/app-cli/app/command-mkbook.js
+packages/app-cli/app/command-mv.js
+packages/app-cli/app/command-ren.js
+packages/app-cli/app/command-rmbook.js
+packages/app-cli/app/command-rmnote.js
+packages/app-cli/app/command-set.js
 packages/app-cli/app/command-settingschema.js
 packages/app-cli/app/command-sync.js
 packages/app-cli/app/command-testing.js
+packages/app-cli/app/command-use.js
+packages/app-cli/app/command-version.js
 packages/app-cli/app/gui/StatusBarWidget.js
 packages/app-cli/app/services/plugins/PluginRunner.js
 packages/app-cli/app/setupCommand.js
@@ -556,6 +578,7 @@ packages/editor/CodeMirror/editorCommands/swapLine.js
 packages/editor/CodeMirror/getScrollFraction.js
 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/markdownCommands.bulletedVsChecklist.test.js
 packages/editor/CodeMirror/markdown/markdownCommands.test.js
@@ -639,6 +662,7 @@ packages/lib/components/shared/config/shouldShowMissingPasswordWarning.test.js
 packages/lib/components/shared/config/shouldShowMissingPasswordWarning.js
 packages/lib/components/shared/note-screen-shared.js
 packages/lib/components/shared/reduxSharedMiddleware.js
+packages/lib/components/shared/side-menu-shared.js
 packages/lib/database-driver-better-sqlite.js
 packages/lib/database.js
 packages/lib/debug/DebugService.js
@@ -649,7 +673,9 @@ packages/lib/eventManager.js
 packages/lib/file-api-driver-joplinServer.js
 packages/lib/file-api-driver-memory.js
 packages/lib/file-api-driver.test.js
+packages/lib/file-api.test.js
 packages/lib/file-api.js
+packages/lib/folders-screen-utils.js
 packages/lib/fs-driver-base.js
 packages/lib/fs-driver-node.js
 packages/lib/fsDriver.test.js
@@ -697,6 +723,7 @@ packages/lib/models/Search.js
 packages/lib/models/Setting.test.js
 packages/lib/models/Setting.js
 packages/lib/models/SmartFilter.js
+packages/lib/models/Tag.test.js
 packages/lib/models/Tag.js
 packages/lib/models/dateTimeFormats.test.js
 packages/lib/models/settings/FileHandler.js
@@ -752,10 +779,12 @@ packages/lib/services/commands/propsHaveChanged.js
 packages/lib/services/commands/stateToWhenClauseContext.js
 packages/lib/services/contextkey/contextkey.js
 packages/lib/services/database/addMigrationFile.js
+packages/lib/services/database/isSqliteSyntaxError.js
 packages/lib/services/database/migrations/42.js
 packages/lib/services/database/migrations/43.js
 packages/lib/services/database/migrations/44.js
 packages/lib/services/database/migrations/45.js
+packages/lib/services/database/migrations/index.js
 packages/lib/services/database/sqlStringToLines.js
 packages/lib/services/database/types.js
 packages/lib/services/debug/populateDatabase.js
@@ -887,16 +916,17 @@ packages/lib/services/rest/utils/paginatedResults.js
 packages/lib/services/rest/utils/readonlyProperties.js
 packages/lib/services/rest/utils/requestFields.js
 packages/lib/services/rest/utils/requestPaginationOptions.js
-packages/lib/services/searchengine/SearchEngine.resources.test.js
-packages/lib/services/searchengine/SearchEngine.js
-packages/lib/services/searchengine/SearchEngineUtils.test.js
-packages/lib/services/searchengine/SearchEngineUtils.js
-packages/lib/services/searchengine/SearchFilter.test.js
-packages/lib/services/searchengine/filterParser.test.js
-packages/lib/services/searchengine/filterParser.js
-packages/lib/services/searchengine/gotoAnythingStyleQuery.test.js
-packages/lib/services/searchengine/gotoAnythingStyleQuery.js
-packages/lib/services/searchengine/queryBuilder.js
+packages/lib/services/search/SearchEngine.resources.test.js
+packages/lib/services/search/SearchEngine.test.js
+packages/lib/services/search/SearchEngine.js
+packages/lib/services/search/SearchEngineUtils.test.js
+packages/lib/services/search/SearchEngineUtils.js
+packages/lib/services/search/SearchFilter.test.js
+packages/lib/services/search/filterParser.test.js
+packages/lib/services/search/filterParser.js
+packages/lib/services/search/gotoAnythingStyleQuery.test.js
+packages/lib/services/search/gotoAnythingStyleQuery.js
+packages/lib/services/search/queryBuilder.js
 packages/lib/services/share/ShareService.test.js
 packages/lib/services/share/ShareService.js
 packages/lib/services/share/reducer.js

.github/workflows/build-android.yml

@@ -26,7 +26,7 @@ jobs:
           sudo apt-get update || true
           sudo apt-get install -y libsecret-1-dev
           
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - uses: actions/setup-node@v2
         with:

.github/workflows/build-macos-m1.yml

@@ -19,7 +19,7 @@ jobs:
     runs-on: macos-latest
     steps:
 
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: olegtarasov/get-tag@v2.1
       - uses: actions/setup-node@v2
         with:

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

@@ -81,7 +81,7 @@ jobs:
           sudo apt-get update || true
           sudo apt-get install -y docker-ce docker-ce-cli containerd.io
 
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: olegtarasov/get-tag@v2.1
       - uses: actions/setup-node@v2
         with:
@@ -180,7 +180,7 @@ jobs:
           sudo apt-get update || true
           sudo apt-get install -y docker-ce docker-ce-cli containerd.io
 
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - uses: actions/setup-node@v2
         with:

.gitignore

@@ -67,13 +67,35 @@ docs/**/*.mustache
 # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
 packages/app-cli/app/LinkSelector.js
 packages/app-cli/app/base-command.js
+packages/app-cli/app/command-apidoc.js
+packages/app-cli/app/command-attach.js
+packages/app-cli/app/command-cat.js
+packages/app-cli/app/command-config.js
+packages/app-cli/app/command-cp.js
 packages/app-cli/app/command-done.test.js
+packages/app-cli/app/command-done.js
+packages/app-cli/app/command-dump.js
 packages/app-cli/app/command-e2ee.js
+packages/app-cli/app/command-edit.js
+packages/app-cli/app/command-exit.js
+packages/app-cli/app/command-export-sync-status.js
+packages/app-cli/app/command-export.js
+packages/app-cli/app/command-geoloc.js
+packages/app-cli/app/command-help.js
+packages/app-cli/app/command-import.js
+packages/app-cli/app/command-ls.js
 packages/app-cli/app/command-mkbook.test.js
 packages/app-cli/app/command-mkbook.js
+packages/app-cli/app/command-mv.js
+packages/app-cli/app/command-ren.js
+packages/app-cli/app/command-rmbook.js
+packages/app-cli/app/command-rmnote.js
+packages/app-cli/app/command-set.js
 packages/app-cli/app/command-settingschema.js
 packages/app-cli/app/command-sync.js
 packages/app-cli/app/command-testing.js
+packages/app-cli/app/command-use.js
+packages/app-cli/app/command-version.js
 packages/app-cli/app/gui/StatusBarWidget.js
 packages/app-cli/app/services/plugins/PluginRunner.js
 packages/app-cli/app/setupCommand.js
@@ -536,6 +558,7 @@ packages/editor/CodeMirror/editorCommands/swapLine.js
 packages/editor/CodeMirror/getScrollFraction.js
 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/markdownCommands.bulletedVsChecklist.test.js
 packages/editor/CodeMirror/markdown/markdownCommands.test.js
@@ -619,6 +642,7 @@ packages/lib/components/shared/config/shouldShowMissingPasswordWarning.test.js
 packages/lib/components/shared/config/shouldShowMissingPasswordWarning.js
 packages/lib/components/shared/note-screen-shared.js
 packages/lib/components/shared/reduxSharedMiddleware.js
+packages/lib/components/shared/side-menu-shared.js
 packages/lib/database-driver-better-sqlite.js
 packages/lib/database.js
 packages/lib/debug/DebugService.js
@@ -629,7 +653,9 @@ packages/lib/eventManager.js
 packages/lib/file-api-driver-joplinServer.js
 packages/lib/file-api-driver-memory.js
 packages/lib/file-api-driver.test.js
+packages/lib/file-api.test.js
 packages/lib/file-api.js
+packages/lib/folders-screen-utils.js
 packages/lib/fs-driver-base.js
 packages/lib/fs-driver-node.js
 packages/lib/fsDriver.test.js
@@ -677,6 +703,7 @@ packages/lib/models/Search.js
 packages/lib/models/Setting.test.js
 packages/lib/models/Setting.js
 packages/lib/models/SmartFilter.js
+packages/lib/models/Tag.test.js
 packages/lib/models/Tag.js
 packages/lib/models/dateTimeFormats.test.js
 packages/lib/models/settings/FileHandler.js
@@ -732,10 +759,12 @@ packages/lib/services/commands/propsHaveChanged.js
 packages/lib/services/commands/stateToWhenClauseContext.js
 packages/lib/services/contextkey/contextkey.js
 packages/lib/services/database/addMigrationFile.js
+packages/lib/services/database/isSqliteSyntaxError.js
 packages/lib/services/database/migrations/42.js
 packages/lib/services/database/migrations/43.js
 packages/lib/services/database/migrations/44.js
 packages/lib/services/database/migrations/45.js
+packages/lib/services/database/migrations/index.js
 packages/lib/services/database/sqlStringToLines.js
 packages/lib/services/database/types.js
 packages/lib/services/debug/populateDatabase.js
@@ -867,16 +896,17 @@ packages/lib/services/rest/utils/paginatedResults.js
 packages/lib/services/rest/utils/readonlyProperties.js
 packages/lib/services/rest/utils/requestFields.js
 packages/lib/services/rest/utils/requestPaginationOptions.js
-packages/lib/services/searchengine/SearchEngine.resources.test.js
-packages/lib/services/searchengine/SearchEngine.js
-packages/lib/services/searchengine/SearchEngineUtils.test.js
-packages/lib/services/searchengine/SearchEngineUtils.js
-packages/lib/services/searchengine/SearchFilter.test.js
-packages/lib/services/searchengine/filterParser.test.js
-packages/lib/services/searchengine/filterParser.js
-packages/lib/services/searchengine/gotoAnythingStyleQuery.test.js
-packages/lib/services/searchengine/gotoAnythingStyleQuery.js
-packages/lib/services/searchengine/queryBuilder.js
+packages/lib/services/search/SearchEngine.resources.test.js
+packages/lib/services/search/SearchEngine.test.js
+packages/lib/services/search/SearchEngine.js
+packages/lib/services/search/SearchEngineUtils.test.js
+packages/lib/services/search/SearchEngineUtils.js
+packages/lib/services/search/SearchFilter.test.js
+packages/lib/services/search/filterParser.test.js
+packages/lib/services/search/filterParser.js
+packages/lib/services/search/gotoAnythingStyleQuery.test.js
+packages/lib/services/search/gotoAnythingStyleQuery.js
+packages/lib/services/search/queryBuilder.js
 packages/lib/services/share/ShareService.test.js
 packages/lib/services/share/ShareService.js
 packages/lib/services/share/reducer.js

Assets/WebsiteAssets/rss.xml

@@ -1,4 +1,17 @@
-<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Joplin]]></title><description><![CDATA[Joplin, the open source note-taking application]]></description><link>https://joplinapp.org</link><generator>RSS for Node</generator><lastBuildDate>Mon, 04 Dec 2023 00:00:00 GMT</lastBuildDate><atom:link href="https://joplinapp.org/rss.xml" rel="self" type="application/rss+xml"/><pubDate>Mon, 04 Dec 2023 00:00:00 GMT</pubDate><item><title><![CDATA[What's new in Joplin 2.13]]></title><description><![CDATA[<h2>Desktop<a name="desktop" href="#desktop" class="heading-anchor">🔗</a></h2>
+<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Joplin]]></title><description><![CDATA[Joplin, the open source note-taking application]]></description><link>https://joplinapp.org</link><generator>RSS for Node</generator><lastBuildDate>Sat, 23 Dec 2023 00:00:00 GMT</lastBuildDate><atom:link href="https://joplinapp.org/rss.xml" rel="self" type="application/rss+xml"/><pubDate>Sat, 23 Dec 2023 00:00:00 GMT</pubDate><item><title><![CDATA[Faster synchronisation in upcoming Joplin version!]]></title><description><![CDATA[<p>The next version of Joplin Cloud (and Joplin Server) will include a change that will make synchronisation, in particular when synchronising a new device for the first time, significantly faster. This is achieved by bundling more data with the calls that retrieve notes and other data, thus reducing the number of unnecessary requests.</p>
+<p>This change will be applied soon to Joplin Cloud (and Server), and the Joplin mobile, desktop and CLI applications will be able to use it from version 2.14.</p>
+<p>In my tests with about 26,000 items, synchronisation was more than twice as fast on Joplin Cloud (22.5 minutes vs 9.5 minutes):</p>
+<h2>Before<a name="before" href="#before" class="heading-anchor">🔗</a></h2>
+<p>Created local items: 21814. Fetched items: 26591/26591. Completed: 23/12/2023 10:38 (<strong>1346s</strong>)</p>
+<p><strong>real 22m35.810s</strong><br/><br>
+user 3m19.182s<br/><br>
+sys 1m24.207s</p>
+<h2>Optimised<a name="optimised" href="#optimised" class="heading-anchor">🔗</a></h2>
+<p>Created local items: 21822. Fetched items: 26600/26600. Completed: 23/12/2023 11:48 (<strong>571s</strong>)</p>
+<p><strong>real 9m38.932s</strong><br/><br>
+user 1m10.119s<br/><br>
+sys 0m38.013s</p>
+]]></description><link>https://joplinapp.org/news/20231223-faster-sync</link><guid isPermaLink="false">20231223-faster-sync</guid><pubDate>Sat, 23 Dec 2023 00:00:00 GMT</pubDate><twitter-text>Faster synchronisation in upcoming Joplin version!</twitter-text></item><item><title><![CDATA[What's new in Joplin 2.13]]></title><description><![CDATA[<h2>Desktop<a name="desktop" href="#desktop" class="heading-anchor">🔗</a></h2>
 <h3>Rich Text Editor improvements<a name="rich-text-editor-improvements" href="#rich-text-editor-improvements" class="heading-anchor">🔗</a></h3>
 <p>In this update, significant enhancements have been implemented in the Rich Text Editor to enhance user experience. One notable improvement is the ability to seamlessly embed various content within tables, including lists and other tables, which was a frequently requested feature:</p>
 <p><img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/news/20231203-rte-table.png" alt=""></p>
@@ -71,7 +84,7 @@
 <p>In this release, we've undertaken numerous enhancements and addressed various bugs in the Rich Text editor. Notably, we've introduced support for plugin toolbar icons. Additionally, we've refined the editor's ability to manage text that's copied from applications like Word, Office, and LibreOffice, thereby enhancing cross-application compatibility. Among the minor yet impactful improvements, we've fine-tuned the handling of newlines and paragraphs—a highly requested feature. Another notable update is the improved automatic switching between light and dark modes.</p>
 <p>Altogether, this release encompasses around 12 significant changes for the Rich Text editor, and rest assured, there's more to come in the future!</p>
 <h3>Share permissions<a name="share-permissions" href="#share-permissions" class="heading-anchor">🔗</a></h3>
-<p>Using Joplin Cloud Pro and Teams, you now have the ability to customize the read and write permissions for the notebooks you share. You have the option to grant other users permission to edit the notes or share them as read-only. This ensures that you can confidently share a notebook without worrying about unintentional modifications by your friends or colleagues.</p>
+<p>Using Joplin Cloud Teams, you now have the ability to customize the read and write permissions for the notebooks you share. You have the option to grant other users permission to edit the notes or share them as read-only. This ensures that you can confidently share a notebook without worrying about unintentional modifications by your friends or colleagues.</p>
 <p><img src="https://raw.githubusercontent.com/laurent22/joplin/dev/Assets/WebsiteAssets/images/news/20230825-share-permissions.png" alt=""></p>
 <h3>Email to Note<a name="email-to-note" href="#email-to-note" class="heading-anchor">🔗</a></h3>
 <p>Joplin Cloud Pro and Teams also now include the Email to Note feature, allowing you to conveniently store your emails within Joplin Cloud. By simply forwarding your emails to your Joplin Cloud address, you can transform them into notes. The email's subject will serve as the note title, while the body of the email will be the note's content. These notes will be organized within a notebook named &quot;Inbox.&quot;</p>
@@ -351,7 +364,4 @@
 <h2>Plugin API improvements<a name="plugin-api-improvements" href="#plugin-api-improvements" class="heading-anchor">🔗</a></h2>
 <p>This version also includes a number of improvements to the plugin API, in particular it is now easier to customise the editor context menu from a plugin and dynamically add items to it depending on the context. For example, with the Rich Markdown plugin it will be possible to right-click on an image and open it, or copy it to the clipboard.</p>
 <p>A few additional functions have also been added to make plugin development simpler - in particular a command to open any item, whether it's a notebook, note, tag or attachement; and functions to work with attachements, in particular to reveal an attachement in the system file explorer, and to track changes to an attachement.</p>
-]]></description><link>https://joplinapp.org/news/20220224-release-2-7</link><guid isPermaLink="false">20220224-release-2-7</guid><pubDate>Thu, 24 Feb 2022 00:00:00 GMT</pubDate><twitter-text></twitter-text></item><item><title><![CDATA[Automatic deletion of disabled accounts on Joplin Cloud]]></title><description><![CDATA[<p>As of 15 Feb 2022, disabled accounts on Joplin Cloud will be automatically deleted after 90 days. A disabled account is one where the Stripe subscription has been cancelled either by the user or automatically (eg for unpaid invoices).</p>
-<p>Although it is an automated system, I will manually verify each account that's queued for deletion over the next few days for additional safety (for now everything's working as expected).</p>
-<p>When an account is queued for deletion, all notes, notebooks, tags, etc are removed from the system within 2 days, and permanently deleted within 7 days. User information, in particular email and full name will be removed from the system within 2 days, but archived for an additional 90 days for legal reasons, after which they will be deleted too.</p>
-]]></description><link>https://joplinapp.org/news/20220215-142000</link><guid isPermaLink="false">20220215-142000</guid><pubDate>Tue, 15 Feb 2022 00:00:00 GMT</pubDate><twitter-text></twitter-text></item></channel></rss>
+]]></description><link>https://joplinapp.org/news/20220224-release-2-7</link><guid isPermaLink="false">20220224-release-2-7</guid><pubDate>Thu, 24 Feb 2022 00:00:00 GMT</pubDate><twitter-text></twitter-text></item></channel></rss>

package.json

@@ -13,7 +13,7 @@
   },
   "scripts": {
     "buildApiDoc": "yarn workspace joplin start apidoc ../../readme/api/references/rest_api.md",
-    "buildCommandIndex": "node packages/tools/gulp/tasks/buildCommandIndexRun.js",
+    "buildScriptIndexes": "node packages/tools/gulp/tasks/buildScriptIndexesRun.js",
     "buildParallel": "yarn workspaces foreach --verbose --interlaced --parallel --jobs 2 --topological run build && yarn run tsc",
     "buildPluginDoc": "cd packages/generate-plugin-doc && yarn run buildPluginDoc_",
     "buildSequential": "yarn workspaces foreach --verbose --interlaced --topological run build && yarn run tsc",
@@ -82,7 +82,7 @@
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.33.2",
     "execa": "5.1.1",
-    "fs-extra": "11.1.1",
+    "fs-extra": "11.2.0",
     "glob": "10.3.10",
     "gulp": "4.0.2",
     "husky": "3.1.0",
@@ -97,7 +97,7 @@
     "eslint-plugin-github": "4.10.1",
     "http-server": "14.1.1",
     "node-gyp": "9.4.1",
-    "nodemon": "3.0.1"
+    "nodemon": "3.0.2"
   },
   "packageManager": "yarn@3.6.4",
   "resolutions": {

packages/app-cli/app/app.js

@@ -1,5 +1,5 @@
 const BaseApplication = require('@joplin/lib/BaseApplication').default;
-const { FoldersScreenUtils } = require('@joplin/lib/folders-screen-utils.js');
+const { refreshFolders } = require('@joplin/lib/folders-screen-utils.js');
 const ResourceService = require('@joplin/lib/services/ResourceService').default;
 const BaseModel = require('@joplin/lib/BaseModel').default;
 const Folder = require('@joplin/lib/models/Folder').default;
@@ -435,7 +435,7 @@ class Application extends BaseApplication {
 			// initialised. So we manually call dispatchUpdateAll() to force an update.
 			Setting.dispatchUpdateAll();
 
-			await FoldersScreenUtils.refreshFolders();
+			await refreshFolders((action) => { this.store().dispatch(action); });
 
 			const tags = await Tag.allWithNotes();
 

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

@@ -1,33 +1,34 @@
-const BaseCommand = require('./base-command').default;
-const BaseItem = require('@joplin/lib/models/BaseItem').default;
-const BaseModel = require('@joplin/lib/BaseModel').default;
+import BaseCommand from './base-command';
+import BaseItem from '@joplin/lib/models/BaseItem';
+import BaseModel from '@joplin/lib/BaseModel';
 const { toTitleCase } = require('@joplin/lib/string-utils.js');
-const { reg } = require('@joplin/lib/registry.js');
-const markdownUtils = require('@joplin/lib/markdownUtils').default;
-const Database = require('@joplin/lib/database').default;
-const shim = require('@joplin/lib/shim').default;
+import { reg } from '@joplin/lib/registry.js';
+import markdownUtils, { MarkdownTableRow } from '@joplin/lib/markdownUtils';
+import Database from '@joplin/lib/database';
+import shim from '@joplin/lib/shim';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'apidoc <file>';
 	}
 
-	description() {
+	public override description() {
 		return 'Build the API doc';
 	}
 
-	enabled() {
+	public override enabled() {
 		return false;
 	}
 
-	createPropertiesTable(tableFields) {
+	private createPropertiesTable(tableFields: MarkdownTableRow[]) {
 		const headers = [
 			{ name: 'name', label: 'Name' },
 			{
 				name: 'type',
 				label: 'Type',
-				filter: value => {
-					return Database.enumName('fieldType', value);
+				filter: (value: string|number) => {
+					const valueAsNumber = typeof value === 'number' ? value : parseInt(value, 10);
+					return Database.enumName('fieldType', valueAsNumber);
 				},
 			},
 			{ name: 'description', label: 'Description' },
@@ -36,7 +37,7 @@ class Command extends BaseCommand {
 		return markdownUtils.createMarkdownTable(headers, tableFields);
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const models = [
 			{
 				type: BaseModel.TYPE_NOTE,

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

@@ -1,19 +1,19 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const BaseModel = require('@joplin/lib/BaseModel').default;
-const shim = require('@joplin/lib/shim').default;
+import { _ } from '@joplin/lib/locale';
+import BaseModel from '@joplin/lib/BaseModel';
+import shim from '@joplin/lib/shim';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'attach <note> <file>';
 	}
 
-	description() {
+	public override description() {
 		return _('Attaches the given file to the note.');
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const title = args['note'];
 
 		const note = await app().loadItem(BaseModel.TYPE_NOTE, title, { parent: app().currentFolder() });

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

@@ -1,24 +1,24 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const BaseModel = require('@joplin/lib/BaseModel').default;
-const BaseItem = require('@joplin/lib/models/BaseItem').default;
-const Note = require('@joplin/lib/models/Note').default;
+import { _ } from '@joplin/lib/locale';
+import BaseModel from '@joplin/lib/BaseModel';
+import BaseItem from '@joplin/lib/models/BaseItem';
+import Note from '@joplin/lib/models/Note';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'cat <note>';
 	}
 
-	description() {
+	public override description() {
 		return _('Displays the given note.');
 	}
 
-	options() {
+	public override options() {
 		return [['-v, --verbose', _('Displays the complete information about note.')]];
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const title = args['note'];
 
 		const item = await app().loadItem(BaseModel.TYPE_NOTE, title, { parent: app().currentFolder() });

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

@@ -1,19 +1,20 @@
-const BaseCommand = require('./base-command').default;
-const { _, setLocale } = require('@joplin/lib/locale');
+import BaseCommand from './base-command';
+import { _, setLocale } from '@joplin/lib/locale';
 const { app } = require('./app.js');
-const fs = require('fs-extra');
-const Setting = require('@joplin/lib/models/Setting').default;
+import * as fs from 'fs-extra';
+import Setting, { AppType } from '@joplin/lib/models/Setting';
+import { ReadStream } from 'tty';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'config [name] [value]';
 	}
 
-	description() {
+	public override description() {
 		return _('Gets or sets a config value. If [value] is not provided, it will show the value of [name]. If neither [name] nor [value] is provided, it will list the current configuration.');
 	}
 
-	options() {
+	public override options() {
 		return [
 			['-v, --verbose', _('Also displays unset and hidden config variables.')],
 			['--export', 'Writes all settings to STDOUT as JSON including secure variables.'],
@@ -21,11 +22,12 @@ class Command extends BaseCommand {
 			['--import-file <file>', 'Reads in settings from <file>. <file> must contain valid JSON.'],
 		];
 	}
-	async __importSettings(inputStream) {
-		return new Promise((resolve, reject) => {
+
+	private async __importSettings(inputStream: ReadStream|fs.ReadStream) {
+		return new Promise<void>((resolve, reject) => {
 			// being defensive and not attempting to settle twice
 			let isSettled = false;
-			const chunks = [];
+			const chunks: any = [];
 
 			inputStream.on('readable', () => {
 				let chunk;
@@ -64,13 +66,14 @@ class Command extends BaseCommand {
 			});
 		});
 	}
-	async action(args) {
+
+	public override async action(args: any) {
 		const verbose = args.options.verbose;
 		const isExport = args.options.export;
 		const isImport = args.options.import || args.options.importFile;
 		const importFile = args.options.importFile;
 
-		const renderKeyValue = name => {
+		const renderKeyValue = (name: string) => {
 			const md = Setting.settingMetadata(name);
 			let value = Setting.value(name);
 			if (typeof value === 'object' || Array.isArray(value)) value = JSON.stringify(value);
@@ -84,11 +87,11 @@ class Command extends BaseCommand {
 		};
 
 		if (isExport || (!isImport && !args.value)) {
-			const keys = Setting.keys(!verbose, 'cli');
+			const keys = Setting.keys(!verbose, AppType.Cli);
 			keys.sort();
 
 			if (isExport) {
-				const resultObj = keys.reduce((acc, key) => {
+				const resultObj = keys.reduce<Record<string, any>>((acc, key) => {
 					const value = Setting.value(key);
 					if (!verbose && !value) return acc;
 					acc[key] = value;
@@ -113,7 +116,7 @@ class Command extends BaseCommand {
 		}
 
 		if (isImport) {
-			let fileStream = process.stdin;
+			let fileStream: ReadStream|fs.ReadStream = process.stdin;
 			if (importFile) {
 				fileStream = fs.createReadStream(importFile, { autoClose: true });
 			}

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

@@ -1,19 +1,19 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const BaseModel = require('@joplin/lib/BaseModel').default;
-const Note = require('@joplin/lib/models/Note').default;
+import { _ } from '@joplin/lib/locale';
+import BaseModel from '@joplin/lib/BaseModel';
+import Note from '@joplin/lib/models/Note';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'cp <note> [notebook]';
 	}
 
-	description() {
+	public override description() {
 		return _('Duplicates the notes matching <note> to [notebook]. If no notebook is specified the note is duplicated in the current notebook.');
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		let folder = null;
 		if (args['notebook']) {
 			folder = await app().loadItem(BaseModel.TYPE_FOLDER, args['notebook']);
@@ -28,7 +28,7 @@ class Command extends BaseCommand {
 
 		for (let i = 0; i < notes.length; i++) {
 			const newNote = await Note.copyToFolder(notes[i].id, folder.id);
-			Note.updateGeolocation(newNote.id);
+			void Note.updateGeolocation(newNote.id);
 		}
 	}
 }

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

@@ -1,20 +1,20 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const BaseModel = require('@joplin/lib/BaseModel').default;
-const Note = require('@joplin/lib/models/Note').default;
-const time = require('@joplin/lib/time').default;
+import { _ } from '@joplin/lib/locale';
+import BaseModel from '@joplin/lib/BaseModel';
+import Note from '@joplin/lib/models/Note';
+import time from '@joplin/lib/time';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'done <note>';
 	}
 
-	description() {
+	public override description() {
 		return _('Marks a to-do as done.');
 	}
 
-	static async handleAction(commandInstance, args, isCompleted) {
+	public static async handleAction(commandInstance: BaseCommand, args: any, isCompleted: boolean) {
 		const note = await app().loadItem(BaseModel.TYPE_NOTE, args.note);
 		commandInstance.encryptionCheck(note);
 		if (!note) throw new Error(_('Cannot find "%s".', args.note));
@@ -30,7 +30,7 @@ class Command extends BaseCommand {
 		});
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		await Command.handleAction(this, args, true);
 	}
 }

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

@@ -1,22 +1,22 @@
-const BaseCommand = require('./base-command').default;
-const Folder = require('@joplin/lib/models/Folder').default;
-const Note = require('@joplin/lib/models/Note').default;
-const Tag = require('@joplin/lib/models/Tag').default;
+import BaseCommand from './base-command';
+import Folder from '@joplin/lib/models/Folder';
+import Note from '@joplin/lib/models/Note';
+import Tag from '@joplin/lib/models/Tag';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'dump';
 	}
 
-	description() {
+	public override description() {
 		return 'Dumps the complete database as JSON.';
 	}
 
-	hidden() {
+	public override hidden() {
 		return true;
 	}
 
-	async action() {
+	public override async action() {
 		let items = [];
 		const folders = await Folder.all();
 		for (let i = 0; i < folders.length; i++) {

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

@@ -1,24 +1,24 @@
-const fs = require('fs-extra');
-const BaseCommand = require('./base-command').default;
-const { splitCommandString } = require('@joplin/utils');
-const uuid = require('@joplin/lib/uuid').default;
+import * as fs from 'fs-extra';
+import BaseCommand from './base-command';
+import { splitCommandString } from '@joplin/utils';
+import uuid from '@joplin/lib/uuid';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const Note = require('@joplin/lib/models/Note').default;
-const Setting = require('@joplin/lib/models/Setting').default;
-const BaseModel = require('@joplin/lib/BaseModel').default;
+import { _ } from '@joplin/lib/locale';
+import Note from '@joplin/lib/models/Note';
+import Setting from '@joplin/lib/models/Setting';
+import BaseModel from '@joplin/lib/BaseModel';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'edit <note>';
 	}
 
-	description() {
+	public override description() {
 		return _('Edit note.');
 	}
 
-	async action(args) {
-		let tempFilePath = null;
+	public override async action(args: any) {
+		let tempFilePath: string|null = null;
 
 		const onFinishedEditing = async () => {
 			if (tempFilePath) fs.removeSync(tempFilePath);

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

@@ -1,21 +1,21 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
+import { _ } from '@joplin/lib/locale';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'exit';
 	}
 
-	description() {
+	public override description() {
 		return _('Exits the application.');
 	}
 
-	compatibleUis() {
+	public override compatibleUis() {
 		return ['gui'];
 	}
 
-	async action() {
+	public override async action() {
 		await app().exit();
 	}
 }

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

@@ -1,25 +1,25 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const Setting = require('@joplin/lib/models/Setting').default;
-const ReportService = require('@joplin/lib/services/ReportService').default;
-const fs = require('fs-extra');
+import Setting from '@joplin/lib/models/Setting';
+import ReportService from '@joplin/lib/services/ReportService';
+import * as fs from 'fs-extra';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'export-sync-status';
 	}
 
-	description() {
+	public override description() {
 		return 'Export sync status';
 	}
 
-	hidden() {
+	public override hidden() {
 		return true;
 	}
 
-	async action() {
+	public override async action() {
 		const service = new ReportService();
-		const csv = await service.basicItemList({ format: 'csv' });
+		const csv = await service.basicItemList({ format: 'csv' }) as string;
 		const filePath = `${Setting.value('profileDir')}/syncReport-${new Date().getTime()}.csv`;
 		await fs.writeFileSync(filePath, csv);
 		this.stdout(`Sync status exported to ${filePath}`);

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

@@ -1,19 +1,20 @@
-const BaseCommand = require('./base-command').default;
-const InteropService = require('@joplin/lib/services/interop/InteropService').default;
-const BaseModel = require('@joplin/lib/BaseModel').default;
+import BaseCommand from './base-command';
+import InteropService from '@joplin/lib/services/interop/InteropService';
+import BaseModel from '@joplin/lib/BaseModel';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
+import { _ } from '@joplin/lib/locale';
+import { ExportOptions } from '@joplin/lib/services/interop/types';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'export <path>';
 	}
 
-	description() {
+	public override description() {
 		return _('Exports Joplin data to the given path. By default, it will export the complete database including notebooks, notes, tags and resources.');
 	}
 
-	options() {
+	public override options() {
 		const service = InteropService.instance();
 		const formats = service
 			.modules()
@@ -23,8 +24,8 @@ class Command extends BaseCommand {
 		return [['--format <format>', _('Destination format: %s', formats.join(', '))], ['--note <note>', _('Exports only the given note.')], ['--notebook <notebook>', _('Exports only the given notebook.')]];
 	}
 
-	async action(args) {
-		const exportOptions = {};
+	public override async action(args: any) {
+		const exportOptions: ExportOptions = {};
 		exportOptions.path = args.path;
 
 		exportOptions.format = args.options.format ? args.options.format : 'jex';
@@ -34,11 +35,11 @@ class Command extends BaseCommand {
 		if (args.options.note) {
 			const notes = await app().loadItems(BaseModel.TYPE_NOTE, args.options.note, { parent: app().currentFolder() });
 			if (!notes.length) throw new Error(_('Cannot find "%s".', args.options.note));
-			exportOptions.sourceNoteIds = notes.map(n => n.id);
+			exportOptions.sourceNoteIds = notes.map((n: any) => n.id);
 		} else if (args.options.notebook) {
 			const folders = await app().loadItems(BaseModel.TYPE_FOLDER, args.options.notebook);
 			if (!folders.length) throw new Error(_('Cannot find "%s".', args.options.notebook));
-			exportOptions.sourceFolderIds = folders.map(n => n.id);
+			exportOptions.sourceFolderIds = folders.map((n: any) => n.id);
 		}
 
 		const service = InteropService.instance();

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

@@ -1,19 +1,19 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const BaseModel = require('@joplin/lib/BaseModel').default;
-const Note = require('@joplin/lib/models/Note').default;
+import { _ } from '@joplin/lib/locale';
+import BaseModel from '@joplin/lib/BaseModel';
+import Note from '@joplin/lib/models/Note';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'geoloc <note>';
 	}
 
-	description() {
+	public override description() {
 		return _('Displays a geolocation URL for the note.');
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const title = args['note'];
 
 		const item = await app().loadItem(BaseModel.TYPE_NOTE, title, { parent: app().currentFolder() });

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

@@ -1,19 +1,19 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
 const { renderCommandHelp } = require('./help-utils.js');
-const { _ } = require('@joplin/lib/locale');
+import { _ } from '@joplin/lib/locale';
 const { cliUtils } = require('./cli-utils.js');
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'help [command]';
 	}
 
-	description() {
+	public override description() {
 		return _('Displays usage information.');
 	}
 
-	allCommands() {
+	private allCommands() {
 		const commands = app().commands(app().uiType());
 		const output = [];
 		for (const n in commands) {
@@ -29,7 +29,7 @@ class Command extends BaseCommand {
 		return output;
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const stdoutWidth = app().commandStdoutMaxWidth();
 
 		if (args.command === 'shortcuts' || args.command === 'keymap') {
@@ -52,7 +52,7 @@ class Command extends BaseCommand {
 
 			for (let i = 0; i < keymap.length; i++) {
 				const item = keymap[i];
-				const keys = item.keys.map(k => (k === ' ' ? '(SPACE)' : k));
+				const keys = item.keys.map((k: string) => (k === ' ' ? '(SPACE)' : k));
 				rows.push([keys.join(', '), item.command]);
 			}
 

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

@@ -1,20 +1,22 @@
-const BaseCommand = require('./base-command').default;
-const InteropService = require('@joplin/lib/services/interop/InteropService').default;
-const BaseModel = require('@joplin/lib/BaseModel').default;
+import BaseCommand from './base-command';
+import InteropService from '@joplin/lib/services/interop/InteropService';
+import BaseModel from '@joplin/lib/BaseModel';
 const { cliUtils } = require('./cli-utils.js');
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
+import { _ } from '@joplin/lib/locale';
+import { ImportOptions } from '@joplin/lib/services/interop/types';
+import { unique } from '@joplin/lib/array';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'import <path> [notebook]';
 	}
 
-	description() {
+	public override description() {
 		return _('Imports data into Joplin.');
 	}
 
-	options() {
+	public override options() {
 		const service = InteropService.instance();
 		const formats = service
 			.modules()
@@ -22,18 +24,18 @@ class Command extends BaseCommand {
 			.map(m => m.format);
 
 		return [
-			['--format <format>', _('Source format: %s', ['auto'].concat(formats).join(', '))],
+			['--format <format>', _('Source format: %s', ['auto'].concat(unique(formats)).join(', '))],
 			['-f, --force', _('Do not ask for confirmation.')],
 			['--output-format <output-format>', _('Output format: %s', 'md, html')],
 		];
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const folder = await app().loadItem(BaseModel.TYPE_FOLDER, args.notebook);
 
 		if (args.notebook && !folder) throw new Error(_('Cannot find "%s".', args.notebook));
 
-		const importOptions = {};
+		const importOptions: ImportOptions = {};
 		importOptions.path = args.path;
 		importOptions.format = args.options.format ? args.options.format : 'auto';
 		importOptions.destinationFolderId = folder ? folder.id : null;

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

@@ -1,28 +1,28 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const BaseModel = require('@joplin/lib/BaseModel').default;
-const Folder = require('@joplin/lib/models/Folder').default;
-const Setting = require('@joplin/lib/models/Setting').default;
-const Note = require('@joplin/lib/models/Note').default;
+import { _ } from '@joplin/lib/locale';
+import BaseModel from '@joplin/lib/BaseModel';
+import Folder from '@joplin/lib/models/Folder';
+import Setting from '@joplin/lib/models/Setting';
+import Note from '@joplin/lib/models/Note';
 const { sprintf } = require('sprintf-js');
-const time = require('@joplin/lib/time').default;
+import time from '@joplin/lib/time';
 const { cliUtils } = require('./cli-utils.js');
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'ls [note-pattern]';
 	}
 
-	description() {
+	public override description() {
 		return _('Displays the notes in the current notebook. Use `ls /` to display the list of notebooks.');
 	}
 
-	enabled() {
+	public override enabled() {
 		return true;
 	}
 
-	options() {
+	public override options() {
 		return [
 			['-n, --limit <num>', _('Displays only the first top <num> notes.')],
 			['-s, --sort <field>', _('Sorts the item by <field> (eg. title, updated_time, created_time).')],
@@ -33,12 +33,12 @@ class Command extends BaseCommand {
 		];
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const pattern = args['note-pattern'];
 		let items = [];
 		const options = args.options;
 
-		const queryOptions = {};
+		const queryOptions: any = {};
 		if (options.limit) queryOptions.limit = options.limit;
 		if (options.sort) {
 			queryOptions.orderBy = options.sort;

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

@@ -1,20 +1,20 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const BaseModel = require('@joplin/lib/BaseModel').default;
-const Folder = require('@joplin/lib/models/Folder').default;
-const Note = require('@joplin/lib/models/Note').default;
+import { _ } from '@joplin/lib/locale';
+import BaseModel from '@joplin/lib/BaseModel';
+import Folder from '@joplin/lib/models/Folder';
+import Note from '@joplin/lib/models/Note';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'mv <item> [notebook]';
 	}
 
-	description() {
+	public override description() {
 		return _('Moves the given <item> to [notebook]');
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const pattern = args['item'];
 		const destination = args['notebook'];
 		let folder = null;

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

@@ -1,20 +1,20 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const BaseModel = require('@joplin/lib/BaseModel').default;
-const Folder = require('@joplin/lib/models/Folder').default;
-const Note = require('@joplin/lib/models/Note').default;
+import { _ } from '@joplin/lib/locale';
+import BaseModel from '@joplin/lib/BaseModel';
+import Folder from '@joplin/lib/models/Folder';
+import Note from '@joplin/lib/models/Note';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'ren <item> <name>';
 	}
 
-	description() {
+	public override description() {
 		return _('Renames the given <item> (note or notebook) to <name>.');
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const pattern = args['item'];
 		const name = args['name'];
 

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

@@ -1,23 +1,23 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const Folder = require('@joplin/lib/models/Folder').default;
-const BaseModel = require('@joplin/lib/BaseModel').default;
+import { _ } from '@joplin/lib/locale';
+import Folder from '@joplin/lib/models/Folder';
+import BaseModel from '@joplin/lib/BaseModel';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'rmbook <notebook>';
 	}
 
-	description() {
+	public override description() {
 		return _('Deletes the given notebook.');
 	}
 
-	options() {
+	public override options() {
 		return [['-f, --force', _('Deletes the notebook without asking for confirmation.')]];
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const pattern = args['notebook'];
 		const force = args.options && args.options.force === true;
 

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

@@ -1,23 +1,23 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const Note = require('@joplin/lib/models/Note').default;
-const BaseModel = require('@joplin/lib/BaseModel').default;
+import { _ } from '@joplin/lib/locale';
+import Note from '@joplin/lib/models/Note';
+import BaseModel from '@joplin/lib/BaseModel';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'rmnote <note-pattern>';
 	}
 
-	description() {
+	public override description() {
 		return _('Deletes the notes matching <note-pattern>.');
 	}
 
-	options() {
+	public override options() {
 		return [['-f, --force', _('Deletes the notes without asking for confirmation.')]];
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const pattern = args['note-pattern'];
 		const force = args.options && args.options.force === true;
 
@@ -26,7 +26,7 @@ class Command extends BaseCommand {
 
 		const ok = force ? true : await this.prompt(notes.length > 1 ? _('%d notes match this pattern. Delete them?', notes.length) : _('Delete note?'), { booleanAnswerDefault: 'n' });
 		if (!ok) return;
-		const ids = notes.map(n => n.id);
+		const ids = notes.map((n: any) => n.id);
 		await Note.batchDelete(ids);
 	}
 }

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

@@ -1,16 +1,16 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const BaseModel = require('@joplin/lib/BaseModel').default;
-const Database = require('@joplin/lib/database').default;
-const Note = require('@joplin/lib/models/Note').default;
+import { _ } from '@joplin/lib/locale';
+import BaseModel from '@joplin/lib/BaseModel';
+import Database from '@joplin/lib/database';
+import Note from '@joplin/lib/models/Note';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'set <note> <name> [value]';
 	}
 
-	description() {
+	public override description() {
 		const fields = Note.fields();
 		const s = [];
 		for (let i = 0; i < fields.length; i++) {
@@ -22,7 +22,7 @@ class Command extends BaseCommand {
 		return _('Sets the property <name> of the given <note> to the given [value]. Possible properties are:\n\n%s', s.join(', '));
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const title = args['note'];
 		const propName = args['name'];
 		let propValue = args['value'];
@@ -36,7 +36,7 @@ class Command extends BaseCommand {
 
 			const timestamp = Date.now();
 
-			const newNote = {
+			const newNote: any = {
 				id: notes[i].id,
 				type_: notes[i].type_,
 				updated_time: timestamp,

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

@@ -1,22 +1,22 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { app } = require('./app.js');
-const { _ } = require('@joplin/lib/locale');
-const BaseModel = require('@joplin/lib/BaseModel').default;
+import { _ } from '@joplin/lib/locale';
+import BaseModel from '@joplin/lib/BaseModel';
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'use <notebook>';
 	}
 
-	description() {
+	public override description() {
 		return _('Switches to [notebook] - all further operations will happen within this notebook.');
 	}
 
-	compatibleUis() {
+	public override compatibleUis() {
 		return ['cli'];
 	}
 
-	async action(args) {
+	public override async action(args: any) {
 		const folder = await app().loadItem(BaseModel.TYPE_FOLDER, args['notebook']);
 		if (!folder) throw new Error(_('Cannot find "%s".', args['notebook']));
 		app().switchCurrentFolder(folder);

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

@@ -1,17 +1,17 @@
-const BaseCommand = require('./base-command').default;
+import BaseCommand from './base-command';
 const { _ } = require('@joplin/lib/locale');
 const versionInfo = require('@joplin/lib/versionInfo').default;
 
 class Command extends BaseCommand {
-	usage() {
+	public override usage() {
 		return 'version';
 	}
 
-	description() {
+	public override description() {
 		return _('Displays version information');
 	}
 
-	async action() {
+	public override async action() {
 		this.stdout(versionInfo(require('./package.json'), {}).message);
 	}
 }

packages/app-cli/package.json

@@ -47,7 +47,7 @@
     "aws-sdk": "2.1340.0",
     "chalk": "4.1.2",
     "compare-version": "0.1.2",
-    "fs-extra": "11.1.1",
+    "fs-extra": "11.2.0",
     "html-entities": "1.4.0",
     "image-type": "3.1.0",
     "keytar": "7.9.0",
@@ -57,7 +57,7 @@
     "proper-lockfile": "4.1.2",
     "read-chunk": "2.1.0",
     "server-destroy": "1.0.1",
-    "sharp": "0.33.0",
+    "sharp": "0.33.1",
     "sprintf-js": "1.1.3",
     "sqlite3": "5.1.6",
     "string-padding": "1.0.2",
@@ -73,7 +73,7 @@
     "@joplin/tools": "~2.14",
     "@types/fs-extra": "11.0.4",
     "@types/jest": "29.5.8",
-    "@types/node": "18.18.13",
+    "@types/node": "18.18.14",
     "@types/proper-lockfile": "^4.1.2",
     "gulp": "4.0.2",
     "jest": "29.7.0",

packages/app-cli/tests/HtmlToMd.ts

@@ -40,6 +40,10 @@ describe('HtmlToMd', () => {
 				htmlToMdOptions.preserveNestedTables = true;
 			}
 
+			if (htmlFilename.indexOf('text_color') === 0) {
+				htmlToMdOptions.preserveColorStyles = true;
+			}
+
 			const html = await readFile(htmlPath, 'utf8');
 			let expectedMd = await readFile(mdPath, 'utf8');
 

packages/app-cli/tests/enex_to_md/linked_notes.enex

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE en-export SYSTEM "http://xml.evernote.com/pub/evernote-export4.dtd">
+<en-export export-date="20231224T151504Z" application="Evernote" version="10.68.2">
+  <note>
+    <title>Note 1</title>
+    <created>20160730T164129Z</created>
+    <updated>20231224T151443Z</updated>
+    <content>
+      <![CDATA[<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd"><en-note><div><a href="evernote:///view/5223870/s49/9cd5e810-fa03-429a-8194-ab847f2f1ab2/c99d9e01-ca35-4c75-ba63-f0c0ef97787d/" rel="noopener noreferrer" rev="en_rl_none">Note 2</a><a href="evernote:///view/5223870/s49/9cd5e810-fa03-429a-8194-ab847f2f1ab2/c99d9e01-ca35-4c75-ba63-f0c0ef97787d/" rel="noopener noreferrer" rev="en_rl_none">Note 3</a></div></en-note>      ]]>
+    </content>
+  </note>
+  <note>
+    <title>Note 2</title>
+    <created>20160730T111759Z</created>
+    <updated>20160730T111807Z</updated>
+    <content>
+      <![CDATA[<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd"><en-note><div>Testing</div></en-note>      ]]>
+    </content>
+  </note>
+  <note>
+    <title>Note 3</title>
+    <created>20160730T111759Z</created>
+    <updated>20160730T111807Z</updated>
+    <content>
+      <![CDATA[<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd"><en-note><div><a href="evernote:///view/5223870/s49/9cd5e810-fa03-429a-8194-ab847f2f1ab2/c99d9e01-ca35-4c75-ba63-f0c0ef97787d/" rel="noopener noreferrer" rev="en_rl_none">Ambiguous note</a></div></en-note>      ]]>
+    </content>
+  </note>
+  <note>
+    <title>Ambiguous note</title>
+    <created>20160730T111759Z</created>
+    <updated>20160730T111807Z</updated>
+    <content>
+      <![CDATA[<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd"><en-note><div>Testing</div></en-note>      ]]>
+    </content>
+  </note>
+  <note>
+    <title>Ambiguous note</title>
+    <created>20160730T111759Z</created>
+    <updated>20160730T111807Z</updated>
+    <content>
+      <![CDATA[<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE en-note SYSTEM "http://xml.evernote.com/pub/enml2.dtd"><en-note><div>Testing</div></en-note>      ]]>
+    </content>
+  </note>
+</en-export>

packages/app-cli/tests/enex_to_md/table_with_invalid_content.html

@@ -1,4 +1,5 @@
 <table>
+	<div></div> <!-- INVALID! -->
 	<tr>
 		<td>one</td>
 		<td>two</td>

packages/app-cli/tests/html_to_md/preserve_nested_tables.html

@@ -1,10 +1,10 @@
 <body>
-<table border="5px" bordercolor="#8707B0">
+<table>
 <tr>
 <td>Left side of the main table</td>
 <td>
-<table border="5px" bordercolor="#F35557">
-<h4 align="center">Nested Table</h4>
+<table>
+<b>Nested Table</b>
 <tr>
 <td>nested table C1</td>
 <td>nested table C2</td>

packages/app-cli/tests/html_to_md/preserve_nested_tables.md

@@ -1 +1 @@
-<table border="5px" bordercolor="#8707B0"><tbody><tr><td>Left side of the main table</td><td><h4 align="center">Nested Table</h4><table border="5px" bordercolor="#F35557"><tbody><tr><td>nested table C1</td><td>nested table C2</td></tr><tr><td>nested table</td><td>nested table</td></tr></tbody></table></td></tr></tbody></table>
+<table><tbody><tr><td>Left side of the main table</td><td><b>Nested Table</b><table><tbody><tr><td>nested table C1</td><td>nested table C2</td></tr><tr><td>nested table</td><td>nested table</td></tr></tbody></table></td></tr></tbody></table>

packages/app-cli/tests/html_to_md/table_with_code_3.html

@@ -0,0 +1,31 @@
+<div id="rendered-md">
+    <table class="jop-noMdConv">
+        <thead class="jop-noMdConv">
+            <tr class="jop-noMdConv">
+                <th class="jop-noMdConv">Code</th>
+                <th class="jop-noMdConv">Description</th>
+            </tr>
+            <tr class="jop-noMdConv">
+                <td class="jop-noMdConv">
+                    <pre class="jop-noMdConv"><code class="jop-noMdConv">const test = "hello";
+
+// Another line
+console.log('Test...');
+
+// Blank lines
+
+
+
+// Should not break things.</code></pre>
+                </td>
+                <td class="jop-noMdConv">abcda</td>
+            </tr>
+            <tr class="jop-noMdConv">
+                <td class="jop-noMdConv">
+                    <pre class="jop-noMdConv"><code class="jop-noMdConv">const test = "hello";</code></pre>
+                </td>
+                <td class="jop-noMdConv">abcd</td>
+            </tr>
+        </thead>
+    </table>
+</div>

packages/app-cli/tests/html_to_md/table_with_code_3.md

@@ -0,0 +1,10 @@
+<table class="jop-noMdConv"><thead class="jop-noMdConv"><tr class="jop-noMdConv"><th class="jop-noMdConv">Code</th><th class="jop-noMdConv">Description</th></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"><pre class="jop-noMdConv"><code class="">const test = "hello";
+<!-- -->
+// Another line
+console.log('Test...');
+<!-- -->
+// Blank lines
+<!-- -->
+<!-- -->
+<!-- -->
+// Should not break things.</code></pre></td><td class="jop-noMdConv">abcda</td></tr><tr class="jop-noMdConv"><td class="jop-noMdConv"><pre class="jop-noMdConv"><code class="">const test = "hello";</code></pre></td><td class="jop-noMdConv">abcd</td></tr></thead></table>

packages/app-cli/tests/html_to_md/text_color.html

@@ -0,0 +1 @@
+<p>Text <span style="color: #fff000;">Text</span></p>

packages/app-cli/tests/html_to_md/text_color.md

@@ -0,0 +1 @@
+Text <span style="color: #fff000;">Text</span>

packages/app-cli/tests/md_to_html/toc_duplicate_items.html

@@ -0,0 +1,3 @@
+<nav class="table-of-contents"><ul><li><a href="#test">test</a></li><li><a href="#test-2">test</a></li><li><a href="#test2">test2</a></li></ul></nav><h1 id="test">test</h1>
+<h1 id="test-2">test</h1>
+<h1 id="test2">test2</h1>

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

@@ -0,0 +1,5 @@
+[toc]
+
+# test
+# test
+# test2

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

@@ -1,11 +1,9 @@
-import { installDefaultPlugins, getDefaultPluginsInstallState, setSettingsForDefaultPlugins, checkPreInstalledDefaultPlugins } from '@joplin/lib/services/plugins/defaultPlugins/defaultPluginsUtils';
+import { afterDefaultPluginsLoaded, getDefaultPluginPathsAndSettings } from '@joplin/lib/services/plugins/defaultPlugins/defaultPluginsUtils';
 import PluginRunner from '../../../app/services/plugins/PluginRunner';
-import { pathExists } from 'fs-extra';
 import { checkThrow, setupDatabaseAndSynchronizer, supportDir, switchClient } from '@joplin/lib/testing/test-utils';
-import PluginService, { defaultPluginSetting, DefaultPluginsInfo, PluginSettings } from '@joplin/lib/services/plugins/PluginService';
+import PluginService, { defaultPluginSetting, DefaultPluginsInfo } from '@joplin/lib/services/plugins/PluginService';
 import Setting from '@joplin/lib/models/Setting';
 
-const testPluginDir = `${supportDir}/plugins`;
 
 function newPluginService(appVersion = '1.4') {
 	const runner = new PluginRunner();
@@ -27,13 +25,17 @@ function newPluginService(appVersion = '1.4') {
 describe('defaultPluginsUtils', () => {
 
 	const pluginsId = ['joplin.plugin.ambrt.backlinksToNote', 'org.joplinapp.plugins.ToggleSidebars'];
+	const defaultPluginsInfo = {
+		'joplin.plugin.ambrt.backlinksToNote': {},
+		'org.joplinapp.plugins.ToggleSidebars': {},
+	};
 
 	beforeEach(async () => {
 		await setupDatabaseAndSynchronizer(1);
 		await switchClient(1);
 	});
 
-	it('should install default plugins with no previous default plugins installed', (async () => {
+	it('should load default plugins when nor previously installed', (async () => {
 		const testPluginDir = `${supportDir}/pluginRepo/plugins`;
 		Setting.setValue('installedDefaultPlugins', []);
 
@@ -41,151 +43,69 @@ describe('defaultPluginsUtils', () => {
 
 		const pluginSettings = service.unserializePluginSettings(Setting.value('plugins.states'));
 
-		const newPluginsSettings = await installDefaultPlugins(service, testPluginDir, pluginsId, pluginSettings);
+		for (const pluginId of pluginsId) {
+			expect(pluginSettings[pluginId]).toBeFalsy();
+		}
 
-		const installedPluginPath1 = `${Setting.value('pluginDir')}/${pluginsId[0]}.jpl`;
-		const installedPluginPath2 = `${Setting.value('pluginDir')}/${pluginsId[1]}.jpl`;
-
-		expect(await pathExists(installedPluginPath1)).toBe(true);
-		expect(await pathExists(installedPluginPath2)).toBe(true);
-
-		expect(newPluginsSettings[pluginsId[0]]).toMatchObject(defaultPluginSetting());
-		expect(newPluginsSettings[pluginsId[1]]).toMatchObject(defaultPluginSetting());
+		const pluginPathsAndNewSettings = await getDefaultPluginPathsAndSettings(testPluginDir, defaultPluginsInfo, pluginSettings);
 
+		for (const pluginId of pluginsId) {
+			expect(
+				pluginPathsAndNewSettings.pluginSettings[pluginId],
+			).toMatchObject(defaultPluginSetting());
+		}
 	}));
 
-	it('should install default plugins with previous default plugins installed', (async () => {
-
+	it('should keep already created default plugins disabled with previous default plugins installed', (async () => {
 		const testPluginDir = `${supportDir}/pluginRepo/plugins`;
 		Setting.setValue('installedDefaultPlugins', ['org.joplinapp.plugins.ToggleSidebars']);
+		Setting.setValue('plugins.states', {
+			'org.joplinapp.plugins.ToggleSidebars': { ...defaultPluginSetting(), enabled: false },
+		});
 
 		const service = newPluginService('2.1');
 
 		const pluginSettings = service.unserializePluginSettings(Setting.value('plugins.states'));
+		const pluginPathsAndNewSettings = await getDefaultPluginPathsAndSettings(testPluginDir, defaultPluginsInfo, pluginSettings);
 
-		const newPluginsSettings = await installDefaultPlugins(service, testPluginDir, pluginsId, pluginSettings);
-
-		const installedPluginPath1 = `${Setting.value('pluginDir')}/${pluginsId[0]}.jpl`;
-		const installedPluginPath2 = `${Setting.value('pluginDir')}/${pluginsId[1]}.jpl`;
-
-		expect(await pathExists(installedPluginPath1)).toBe(true);
-		expect(await pathExists(installedPluginPath2)).toBe(false);
-
-		expect(newPluginsSettings[pluginsId[0]]).toMatchObject(defaultPluginSetting());
-		expect(newPluginsSettings[pluginsId[1]]).toBeUndefined();
+		// Should still be disabled
+		expect(
+			pluginPathsAndNewSettings.pluginSettings['org.joplinapp.plugins.ToggleSidebars'].enabled,
+		).toBe(false);
 	}));
 
-	it('should get default plugins install state', (async () => {
-		const testCases = [
-			{
-				'installedDefaultPlugins': [''],
-				'loadingPlugins': [`${testPluginDir}/simple`, `${testPluginDir}/jpl_test/org.joplinapp.FirstJplPlugin.jpl`],
-				'plugin1DefaultState': defaultPluginSetting(),
-				'plugin2DefaultState': defaultPluginSetting(),
-				'installedDefaultPlugins1': true,
-				'installedDefaultPlugins2': true,
-			},
-			{
-				'installedDefaultPlugins': [''],
-				'loadingPlugins': [`${testPluginDir}/simple`],
-				'plugin1DefaultState': defaultPluginSetting(),
-				'plugin2DefaultState': undefined,
-				'installedDefaultPlugins1': true,
-				'installedDefaultPlugins2': false,
-			},
-			{
-				'installedDefaultPlugins': ['org.joplinapp.plugins.Simple'],
-				'loadingPlugins': [`${testPluginDir}/simple`, `${testPluginDir}/jpl_test/org.joplinapp.FirstJplPlugin.jpl`],
-				'plugin1DefaultState': undefined,
-				'plugin2DefaultState': defaultPluginSetting(),
-				'installedDefaultPlugins1': true,
-				'installedDefaultPlugins2': true,
-			},
-			{
-				'installedDefaultPlugins': ['org.joplinapp.plugins.Simple'],
-				'loadingPlugins': [`${testPluginDir}/simple`],
-				'plugin1DefaultState': undefined,
-				'plugin2DefaultState': undefined,
-				'installedDefaultPlugins1': true,
-				'installedDefaultPlugins2': false,
-			},
-		];
-
-		for (const testCase of testCases) {
-			const service = newPluginService();
-			const pluginsId = ['org.joplinapp.plugins.Simple', 'org.joplinapp.FirstJplPlugin'];
-
-			Setting.setValue('installedDefaultPlugins', testCase.installedDefaultPlugins);
-			await service.loadAndRunPlugins(testCase.loadingPlugins, {});
-
-			// setting installedDefaultPlugins state
-			const defaultInstallStates: PluginSettings = getDefaultPluginsInstallState(service, pluginsId);
-
-			expect(defaultInstallStates[pluginsId[0]]).toStrictEqual(testCase.plugin1DefaultState);
-			expect(defaultInstallStates[pluginsId[1]]).toStrictEqual(testCase.plugin2DefaultState);
-
-
-			const installedDefaultPlugins = Setting.value('installedDefaultPlugins');
-			expect(installedDefaultPlugins.includes(pluginsId[0])).toBe(testCase.installedDefaultPlugins1);
-			expect(installedDefaultPlugins.includes(pluginsId[1])).toBe(testCase.installedDefaultPlugins2);
-
-		}
-
-	}));
-
-	it('should check pre-installed default plugins', (async () => {
-		// with previous pre-installed default plugins
-		Setting.setValue('installedDefaultPlugins', ['']);
-		let pluginSettings, installedDefaultPlugins;
-
-		pluginSettings = { [pluginsId[0]]: defaultPluginSetting() };
-		checkPreInstalledDefaultPlugins(pluginsId, pluginSettings);
-
-		installedDefaultPlugins = Setting.value('installedDefaultPlugins');
-		expect(installedDefaultPlugins.includes(pluginsId[0])).toBe(true);
-		expect(installedDefaultPlugins.includes(pluginsId[1])).toBe(false);
-
-
-		// with no previous pre-installed default plugins
-		Setting.setValue('installedDefaultPlugins', ['not-a-default-plugin']);
-		pluginSettings = {};
-		checkPreInstalledDefaultPlugins(pluginsId, pluginSettings);
-
-		installedDefaultPlugins = Setting.value('installedDefaultPlugins');
-		expect(installedDefaultPlugins.includes(pluginsId[0])).toBe(false);
-		expect(installedDefaultPlugins.includes(pluginsId[1])).toBe(false);
-
-	}));
+	const sampleJsBundlePlugin = `
+	/* joplin-manifest:
+	{
+		"id": "io.github.jackgruber.backup",
+		"manifest_version": 1,
+		"app_min_version": "1.4",
+		"name": "JS Bundle test",
+		"version": "1.0.0"
+	}
+	*/
+	joplin.plugins.register({
+		onStart: async function() {
+			await joplin.settings.registerSettings({
+				path: {
+					value: "initial-path",
+					type: 2,
+					section: "backupSection",
+					public: true,
+					label: "Backup path",
+				  },
+			})
+		},
+	});`;
 
 	it('should set initial settings for default plugins', async () => {
 		const service = newPluginService();
 
-		const pluginScript = `
-		/* joplin-manifest:
-		{
-			"id": "io.github.jackgruber.backup",
-			"manifest_version": 1,
-			"app_min_version": "1.4",
-			"name": "JS Bundle test",
-			"version": "1.0.0"
-		}
-		*/
-		joplin.plugins.register({
-			onStart: async function() {
-				await joplin.settings.registerSettings({
-					path: {
-						value: "initial-path",
-						type: 2,
-						section: "backupSection",
-						public: true,
-						label: "Backup path",
-					  },
-				})
-			},
-		});`;
 
-		const plugin = await service.loadPluginFromJsBundle('', pluginScript);
+		const plugin = await service.loadPluginFromJsBundle('', sampleJsBundlePlugin);
+		plugin.builtIn = true;
 		await service.runPlugin(plugin);
+		const runningPlugins = { 'io.github.jackgruber.backup': plugin };
 
 		const defaultPluginsInfo: DefaultPluginsInfo = {
 			'io.github.jackgruber.backup': {
@@ -199,46 +119,64 @@ describe('defaultPluginsUtils', () => {
 
 		// with pre-installed default plugin
 		Setting.setValue('installedDefaultPlugins', ['io.github.jackgruber.backup']);
-		setSettingsForDefaultPlugins(defaultPluginsInfo);
+		const pluginSettings = { 'io.github.jackgruber.backup': defaultPluginSetting() };
+
+		await afterDefaultPluginsLoaded(
+			runningPlugins,
+			defaultPluginsInfo,
+			pluginSettings,
+		);
 		expect(Setting.value('plugin-io.github.jackgruber.backup.path')).toBe('initial-path');
-		await service.destroy();
 
 		// with no pre-installed default plugin
 		Setting.setValue('installedDefaultPlugins', ['']);
-		setSettingsForDefaultPlugins(defaultPluginsInfo);
+		await afterDefaultPluginsLoaded(
+			runningPlugins,
+			defaultPluginsInfo,
+			pluginSettings,
+		);
 		expect(Setting.value('plugin-io.github.jackgruber.backup.path')).toBe(`${Setting.value('profileDir')}`);
 		await service.destroy();
 	});
 
+	it('should not overwrite existing settings for a user-installed version of a built-in plugin', async () => {
+		const service = newPluginService();
+
+		const plugin = await service.loadPluginFromJsBundle('', sampleJsBundlePlugin);
+		plugin.builtIn = false;
+		await service.runPlugin(plugin);
+
+		const defaultPluginsInfo: DefaultPluginsInfo = {
+			'io.github.jackgruber.backup': {
+				settings: {
+					'path': 'overwrite?',
+				},
+			},
+		};
+
+		// No pre-installed default plugins
+		Setting.setValue('installedDefaultPlugins', []);
+
+		// The plugin is running and enabled
+		const runningPlugins = { 'io.github.jackgruber.backup': plugin };
+		const pluginSettings = { 'io.github.jackgruber.backup': defaultPluginSetting() };
+
+		await afterDefaultPluginsLoaded(
+			runningPlugins,
+			defaultPluginsInfo,
+			pluginSettings,
+		);
+
+		// Should not overwrite
+		expect(Setting.value('plugin-io.github.jackgruber.backup.path')).toBe('initial-path');
+	});
+
 	it('should not throw error on missing setting key', async () => {
 
 		const service = newPluginService();
 
-		const pluginScript = `
-		/* joplin-manifest:
-		{
-			"id": "io.github.jackgruber.backup",
-			"manifest_version": 1,
-			"app_min_version": "1.4",
-			"name": "JS Bundle test",
-			"version": "1.0.0"
-		}
-		*/
-		joplin.plugins.register({
-			onStart: async function() {
-				await joplin.settings.registerSettings({
-					path: {
-						value: "initial-path",
-						type: 2,
-						section: "backupSection",
-						public: true,
-						label: "Backup path",
-					  },
-				})
-			},
-		});`;
-
-		const plugin = await service.loadPluginFromJsBundle('', pluginScript);
+		const plugin = await service.loadPluginFromJsBundle('', sampleJsBundlePlugin);
+		plugin.builtIn = true;
 		await service.runPlugin(plugin);
 
 		const defaultPluginsInfo: DefaultPluginsInfo = {
@@ -256,7 +194,10 @@ describe('defaultPluginsUtils', () => {
 		};
 
 		Setting.setValue('installedDefaultPlugins', ['']);
-		expect(checkThrow(() => setSettingsForDefaultPlugins(defaultPluginsInfo))).toBe(false);
+		const pluginSettings = { 'io.github.jackgruber.backup': defaultPluginSetting() };
+		const runningPlugins = { 'io.github.jackgruber.backup': plugin };
+
+		expect(checkThrow(() => afterDefaultPluginsLoaded(runningPlugins, defaultPluginsInfo, pluginSettings))).toBe(false);
 		expect(Setting.value('plugin-io.github.jackgruber.backup.path')).toBe(`${Setting.value('profileDir')}`);
 		await service.destroy();
 	});

packages/app-cli/tests/support/plugins/updatePlugins.sh

@@ -1,23 +1,40 @@
 #!/bin/bash
 SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
 
-cd "$SCRIPT_DIR/jpl_test/" && yo joplin --update --skip-install --silent
+update_plugin() {
+	echo "Updating $1..."
+	cd "$SCRIPT_DIR/$1" && yo joplin --update --skip-install --silent
+	echo "Done."
+}
+
+update_plugin jpl_test
 sed -i /*.jpl/d .gitignore
 
-cd "$SCRIPT_DIR/codemirror_content_script/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/content_script/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/dialog/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/editor_context_menu/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/events/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/json_export/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/menu/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/multi_selection/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/register_command/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/selected_text/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/settings/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/toc/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/withExternalModules/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/post_messages/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/nativeModule/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/external_assets/" && yo joplin --update --skip-install --silent
-cd "$SCRIPT_DIR/user_data/" && yo joplin --update --skip-install --silent
+PLUGINS_TO_UPDATE=(
+	"clipboard"
+	"codemirror6"
+	"codemirror_content_script"
+	"content_script"
+	"dialog"
+	"editor_context_menu"
+	"events"
+	"external_assets"
+	"imaging"
+	"json_export"
+	"load_css"
+	"menu"
+	"multi_selection"
+	"nativeModule"
+	"note_list_renderer"
+	"post_messages"
+	"register_command"
+	"selected_text"
+	"settings"
+	"toc"
+	"user_data"
+	"withExternalModules"
+)
+
+for PLUGIN in ${PLUGINS_TO_UPDATE[@]}; do
+	update_plugin "$PLUGIN"
+done

packages/app-cli/tests/support/test_notes/yaml/notesnook_updated_created.md

@@ -0,0 +1,9 @@
+---
+title: "Frontmatter test"
+created_at: 01-01-2024 01:23 AM
+updated_at: 02-01-2024 04:56 AM
+---
+
+# Frontmatter test
+
+A test note with frontmatter.

packages/app-clipper/content_scripts/.gitignore

@@ -1 +1,4 @@
-*.bundle.js
+*.bundle.js
+
+# Copied from the lib package
+clipperUtils.js

packages/app-clipper/content_scripts/clipperUtils.js

@@ -1,114 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-exports.getStyleSheets = exports.getImageSizes = void 0;
-function absoluteUrl(url) {
-	if (!url) { return url; }
-	const protocol = url.toLowerCase().split(':')[0];
-	if (['http', 'https', 'file', 'data'].indexOf(protocol) >= 0) { return url; }
-	if (url.indexOf('//') === 0) {
-		return location.protocol + url;
-	} else if (url[0] === '/') {
-		return `${location.protocol}//${location.host}${url}`;
-	} else {
-		return `${baseUrl()}/${url}`;
-	}
-}
-function pageLocationOrigin() {
-	// location.origin normally returns the protocol + domain + port (eg. https://example.com:8080)
-	// but for file:// protocol this is browser dependant and in particular Firefox returns "null"
-	// in this case.
-	if (location.protocol === 'file:') {
-		return 'file://';
-	} else {
-		return location.origin;
-	}
-}
-function baseUrl() {
-	let output = pageLocationOrigin() + location.pathname;
-	if (output[output.length - 1] !== '/') {
-		const output2 = output.split('/');
-		output2.pop();
-		output = output2.join('/');
-	}
-	return output;
-}
-function getJoplinClipperSvgClassName(svg) {
-	for (const className of svg.classList) {
-		if (className.indexOf('joplin-clipper-svg-') === 0) { return className; }
-	}
-	return '';
-}
-function getImageSizes(element, forceAbsoluteUrls = false) {
-	const output = {};
-	const images = element.getElementsByTagName('img');
-	for (let i = 0; i < images.length; i++) {
-		const img = images[i];
-		if (img.classList && img.classList.contains('joplin-clipper-hidden')) { continue; }
-		let src = imageSrc(img);
-		src = forceAbsoluteUrls ? absoluteUrl(src) : src;
-		if (!output[src]) { output[src] = []; }
-		output[src].push({
-			width: img.width,
-			height: img.height,
-			naturalWidth: img.naturalWidth,
-			naturalHeight: img.naturalHeight,
-		});
-	}
-	const svgs = element.getElementsByTagName('svg');
-	for (let i = 0; i < svgs.length; i++) {
-		const svg = svgs[i];
-		if (svg.classList && svg.classList.contains('joplin-clipper-hidden')) { continue; }
-		const className = getJoplinClipperSvgClassName(svg); // 'joplin-clipper-svg-' + i;
-		if (!className) {
-			console.warn('SVG without a Joplin class:', svg);
-			continue;
-		}
-		if (!svg.classList.contains(className)) {
-			svg.classList.add(className);
-		}
-		const rect = svg.getBoundingClientRect();
-		if (!output[className]) { output[className] = []; }
-		output[className].push({
-			width: rect.width,
-			height: rect.height,
-		});
-	}
-	return output;
-}
-exports.getImageSizes = getImageSizes;
-// In general we should use currentSrc because that's the image that's currently displayed,
-// especially within <picture> tags or with srcset. In these cases there can be multiple
-// sources and the best one is probably the one being displayed, thus currentSrc.
-function imageSrc(image) {
-	if (image.currentSrc) { return image.currentSrc; }
-	return image.src;
-}
-// Given a document, return a <style> tag that contains all the styles
-// required to render the page. Not currently used but could be as an
-// option to clip pages as HTML.
-// eslint-disable-next-line
-function getStyleSheets(doc) {
-	const output = [];
-	for (let i = 0; i < doc.styleSheets.length; i++) {
-		const sheet = doc.styleSheets[i];
-		try {
-			for (const cssRule of sheet.cssRules) {
-				output.push({ type: 'text', value: cssRule.cssText });
-			}
-		} catch (error) {
-			// Calling sheet.cssRules will throw a CORS error on Chrome if the stylesheet is on a different domain.
-			// In that case, we skip it and add it to the list of stylesheet URLs. These URls will be downloaded
-			// by the desktop application, since it doesn't have CORS restrictions.
-			// eslint-disable-next-line
-            console.info('Could not retrieve stylesheet now:', sheet.href);
-			// eslint-disable-next-line
-            console.info('It will downloaded by the main application.');
-			// eslint-disable-next-line
-            console.info(error);
-			output.push({ type: 'url', value: sheet.href });
-		}
-	}
-	return output;
-}
-exports.getStyleSheets = getStyleSheets;
-// # sourceMappingURL=clipperUtils.js.map

packages/app-clipper/content_scripts/setUpEnvironment.js

@@ -0,0 +1,6 @@
+// Our TypeScript config generates files that use CommonJS `export`s, which
+// aren't defined in a browser.
+//
+// While this is (somehow) fine in Chrome, it breaks the extension in Firefox.
+// We thus define window.exports:
+window.exports ??= {};

packages/app-clipper/popup/config/env.js

@@ -1,94 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-
-// Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
-
-const NODE_ENV = process.env.NODE_ENV;
-if (!NODE_ENV) {
-	throw new Error(
-		'The NODE_ENV environment variable is required but was not specified.',
-	);
-}
-
-// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-const dotenvFiles = [
-	`${paths.dotenv}.${NODE_ENV}.local`,
-	`${paths.dotenv}.${NODE_ENV}`,
-	// Don't include `.env.local` for `test` environment
-	// since normally you expect tests to produce the same
-	// results for everyone
-	NODE_ENV !== 'test' && `${paths.dotenv}.local`,
-	paths.dotenv,
-].filter(Boolean);
-
-// Load environment variables from .env* files. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.  Variable expansion is supported in .env files.
-// https://github.com/motdotla/dotenv
-// https://github.com/motdotla/dotenv-expand
-// eslint-disable-next-line github/array-foreach -- Old code before rule was applied
-dotenvFiles.forEach(dotenvFile => {
-	if (fs.existsSync(dotenvFile)) {
-		require('dotenv-expand')(
-			require('dotenv').config({
-				path: dotenvFile,
-			}),
-		);
-	}
-});
-
-// We support resolving modules according to `NODE_PATH`.
-// This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebook/create-react-app/issues/253.
-// It works similar to `NODE_PATH` in Node itself:
-// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
-// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
-// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
-// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
-// We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
-	.split(path.delimiter)
-	.filter(folder => folder && !path.isAbsolute(folder))
-	.map(folder => path.resolve(appDirectory, folder))
-	.join(path.delimiter);
-
-// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
-// injected into the application via DefinePlugin in Webpack configuration.
-const REACT_APP = /^REACT_APP_/i;
-
-function getClientEnvironment(publicUrl) {
-	const raw = Object.keys(process.env)
-		.filter(key => REACT_APP.test(key))
-		.reduce(
-			(env, key) => {
-				env[key] = process.env[key];
-				return env;
-			},
-			{
-				// Useful for determining whether we’re running in production mode.
-				// Most importantly, it switches React into the correct mode.
-				NODE_ENV: process.env.NODE_ENV || 'development',
-				// Useful for resolving the correct path to static assets in `public`.
-				// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-				// This should only be used as an escape hatch. Normally you would put
-				// images into the `src` and `import` them in code to get their paths.
-				PUBLIC_URL: publicUrl,
-			},
-		);
-	// Stringify all values so we can feed into Webpack DefinePlugin
-	const stringified = {
-		'process.env': Object.keys(raw).reduce((env, key) => {
-			env[key] = JSON.stringify(raw[key]);
-			return env;
-		}, {}),
-	};
-
-	return { raw, stringified };
-}
-
-module.exports = getClientEnvironment;

packages/app-clipper/popup/config/jest/cssTransform.js

@@ -1,14 +0,0 @@
-'use strict';
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-	process() {
-		return 'module.exports = {};';
-	},
-	getCacheKey() {
-		// The output is always the same.
-		return 'cssTransform';
-	},
-};

packages/app-clipper/popup/config/jest/fileTransform.js

@@ -1,40 +0,0 @@
-'use strict';
-
-const path = require('path');
-const camelcase = require('camelcase');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
-
-module.exports = {
-	process(src, filename) {
-		const assetFilename = JSON.stringify(path.basename(filename));
-
-		if (filename.match(/\.svg$/)) {
-			// Based on how SVGR generates a component name:
-			// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
-			const pascalCaseFilename = camelcase(path.parse(filename).name, {
-				pascalCase: true,
-			});
-			const componentName = `Svg${pascalCaseFilename}`;
-			return `const React = require('react');
-      module.exports = {
-        __esModule: true,
-        default: ${assetFilename},
-        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
-          return {
-            $$typeof: Symbol.for('react.element'),
-            type: 'svg',
-            ref: ref,
-            key: null,
-            props: Object.assign({}, props, {
-              children: ${assetFilename}
-            })
-          };
-        }),
-      };`;
-		}
-
-		return `module.exports = ${assetFilename};`;
-	},
-};

packages/app-clipper/popup/config/modules.js

@@ -1,145 +0,0 @@
-/* eslint-disable multiline-comment-style */
-
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-const chalk = require('react-dev-utils/chalk');
-const resolve = require('resolve');
-
-/**
- * Get additional module paths based on the baseUrl of a compilerOptions object.
- *
- * @param {Object} options
- */
-function getAdditionalModulePaths(options = {}) {
-	const baseUrl = options.baseUrl;
-
-	// We need to explicitly check for null and undefined (and not a falsy value) because
-	// TypeScript treats an empty string as `.`.
-	//
-	// eslint-disable-next-line eqeqeq
-	if (baseUrl == null) {
-		// If there's no baseUrl set we respect NODE_PATH
-		// Note that NODE_PATH is deprecated and will be removed
-		// in the next major release of create-react-app.
-
-		const nodePath = process.env.NODE_PATH || '';
-		return nodePath.split(path.delimiter).filter(Boolean);
-	}
-
-	const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
-
-	// We don't need to do anything if `baseUrl` is set to `node_modules`. This is
-	// the default behavior.
-	if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
-		return null;
-	}
-
-	// Allow the user set the `baseUrl` to `appSrc`.
-	if (path.relative(paths.appSrc, baseUrlResolved) === '') {
-		return [paths.appSrc];
-	}
-
-	// If the path is equal to the root directory we ignore it here.
-	// We don't want to allow importing from the root directly as source files are
-	// not transpiled outside of `src`. We do allow importing them with the
-	// absolute path (e.g. `src/Components/Button.js`) but we set that up with
-	// an alias.
-	if (path.relative(paths.appPath, baseUrlResolved) === '') {
-		return null;
-	}
-
-	// Otherwise, throw an error.
-	throw new Error(
-		chalk.red.bold(
-			'Your project\'s `baseUrl` can only be set to `src` or `node_modules`.' +
-        ' Create React App does not support other values at this time.',
-		),
-	);
-}
-
-/**
- * Get webpack aliases based on the baseUrl of a compilerOptions object.
- *
- * @param {*} options
- */
-function getWebpackAliases(options = {}) {
-	const baseUrl = options.baseUrl;
-
-	if (!baseUrl) {
-		return {};
-	}
-
-	const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
-
-	if (path.relative(paths.appPath, baseUrlResolved) === '') {
-		return {
-			src: paths.appSrc,
-		};
-	}
-}
-
-/**
- * Get jest aliases based on the baseUrl of a compilerOptions object.
- *
- * @param {*} options
- */
-function getJestAliases(options = {}) {
-	const baseUrl = options.baseUrl;
-
-	if (!baseUrl) {
-		return {};
-	}
-
-	const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
-
-	if (path.relative(paths.appPath, baseUrlResolved) === '') {
-		return {
-			'^src/(.*)$': '<rootDir>/src/$1',
-		};
-	}
-}
-
-function getModules() {
-	// Check if TypeScript is setup
-	const hasTsConfig = fs.existsSync(paths.appTsConfig);
-	const hasJsConfig = fs.existsSync(paths.appJsConfig);
-
-	if (hasTsConfig && hasJsConfig) {
-		throw new Error(
-			'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.',
-		);
-	}
-
-	let config;
-
-	// If there's a tsconfig.json we assume it's a
-	// TypeScript project and set up the config
-	// based on tsconfig.json
-	if (hasTsConfig) {
-		const ts = require(resolve.sync('typescript', {
-			basedir: paths.appNodeModules,
-		}));
-		config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
-		// Otherwise we'll check if there is jsconfig.json
-		// for non TS projects.
-	} else if (hasJsConfig) {
-		config = require(paths.appJsConfig);
-	}
-
-	config = config || {};
-	const options = config.compilerOptions || {};
-
-	const additionalModulePaths = getAdditionalModulePaths(options);
-
-	return {
-		additionalModulePaths: additionalModulePaths,
-		webpackAliases: getWebpackAliases(options),
-		jestAliases: getJestAliases(options),
-		hasTsConfig,
-	};
-}
-
-module.exports = getModules();

packages/app-clipper/popup/config/paths.js

@@ -1,90 +0,0 @@
-'use strict';
-
-const path = require('path');
-const fs = require('fs');
-const url = require('url');
-
-// Make sure any symlinks in the project folder are resolved:
-// https://github.com/facebook/create-react-app/issues/637
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-
-const envPublicUrl = process.env.PUBLIC_URL;
-
-function ensureSlash(inputPath, needsSlash) {
-	const hasSlash = inputPath.endsWith('/');
-	if (hasSlash && !needsSlash) {
-		return inputPath.substr(0, inputPath.length - 1);
-	} else if (!hasSlash && needsSlash) {
-		return `${inputPath}/`;
-	} else {
-		return inputPath;
-	}
-}
-
-const getPublicUrl = appPackageJson =>
-	envPublicUrl || require(appPackageJson).homepage;
-
-// We use `PUBLIC_URL` environment variable or "homepage" field to infer
-// "public path" at which the app is served.
-// Webpack needs to know it to put the right <script> hrefs into HTML even in
-// single-page apps that may serve index.html for nested URLs like /todos/42.
-// We can't use a relative path in HTML because we don't want to load something
-// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-function getServedPath(appPackageJson) {
-	const publicUrl = getPublicUrl(appPackageJson);
-	const servedUrl =
-    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
-	return ensureSlash(servedUrl, true);
-}
-
-const moduleFileExtensions = [
-	'web.mjs',
-	'mjs',
-	'web.js',
-	'js',
-	'web.ts',
-	'ts',
-	'web.tsx',
-	'tsx',
-	'json',
-	'web.jsx',
-	'jsx',
-];
-
-// Resolve file paths in the same order as webpack
-const resolveModule = (resolveFn, filePath) => {
-	const extension = moduleFileExtensions.find(extension =>
-		fs.existsSync(resolveFn(`${filePath}.${extension}`)),
-	);
-
-	if (extension) {
-		return resolveFn(`${filePath}.${extension}`);
-	}
-
-	return resolveFn(`${filePath}.js`);
-};
-
-// config after eject: we're in ./config/
-module.exports = {
-	dotenv: resolveApp('.env'),
-	appPath: resolveApp('.'),
-	appBuild: resolveApp('build'),
-	appPublic: resolveApp('public'),
-	appHtml: resolveApp('public/index.html'),
-	appIndexJs: resolveModule(resolveApp, 'src/index'),
-	appPackageJson: resolveApp('package.json'),
-	appSrc: resolveApp('src'),
-	appTsConfig: resolveApp('tsconfig.json'),
-	appJsConfig: resolveApp('jsconfig.json'),
-	yarnLockFile: resolveApp('yarn.lock'),
-	testsSetup: resolveModule(resolveApp, 'src/setupTests'),
-	proxySetup: resolveApp('src/setupProxy.js'),
-	appNodeModules: resolveApp('node_modules'),
-	publicUrl: getPublicUrl(resolveApp('package.json')),
-	servedPath: getServedPath(resolveApp('package.json')),
-};
-
-
-
-module.exports.moduleFileExtensions = moduleFileExtensions;

packages/app-clipper/popup/config/pnpTs.js

@@ -1,35 +0,0 @@
-'use strict';
-
-const { resolveModuleName } = require('ts-pnp');
-
-exports.resolveModuleName = (
-	typescript,
-	moduleName,
-	containingFile,
-	compilerOptions,
-	resolutionHost,
-) => {
-	return resolveModuleName(
-		moduleName,
-		containingFile,
-		compilerOptions,
-		resolutionHost,
-		typescript.resolveModuleName,
-	);
-};
-
-exports.resolveTypeReferenceDirective = (
-	typescript,
-	moduleName,
-	containingFile,
-	compilerOptions,
-	resolutionHost,
-) => {
-	return resolveModuleName(
-		moduleName,
-		containingFile,
-		compilerOptions,
-		resolutionHost,
-		typescript.resolveTypeReferenceDirective,
-	);
-};

packages/app-clipper/popup/config/webpack.config.js

@@ -1,693 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
-const resolve = require('resolve');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const paths = require('./paths');
-const modules = require('./modules');
-const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-const md5 = require('md5');
-
-class HashGen {
-
-  update(data) {
-    this.data_ = data;
-  }
-
-  digest() {
-    return md5(escape(this.data_));
-  }
-
-}
-
-const postcssNormalize = require('postcss-normalize');
-
-const appPackageJson = require(paths.appPackageJson);
-
-// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-// Some apps do not need the benefits of saving a web request, so not inlining the chunk
-// makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
-
-const imageInlineSizeLimit = parseInt(
-  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
-);
-
-// Check if TypeScript is setup
-const useTypeScript = fs.existsSync(paths.appTsConfig);
-
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-// This is the production and development configuration.
-// It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function(webpackEnv) {
-  const isEnvDevelopment = webpackEnv === 'development';
-  const isEnvProduction = webpackEnv === 'production';
-
-  // Variable used for enabling profiling in Production
-  // passed into alias object. Uses a flag if passed into the build command
-  const isEnvProductionProfile =
-    isEnvProduction && process.argv.includes('--profile');
-
-  // Webpack uses `publicPath` to determine where the app is being served from.
-  // It requires a trailing slash, or the file assets will get an incorrect path.
-  // In development, we always serve from the root. This makes config easier.
-  const publicPath = isEnvProduction
-    ? paths.servedPath
-    : isEnvDevelopment && '/';
-  // Some apps do not use client-side routing with pushState.
-  // For these, "homepage" can be set to "." to enable relative asset paths.
-  const shouldUseRelativeAssetPaths = publicPath === './';
-
-  // `publicUrl` is just like `publicPath`, but we will provide it to our app
-  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-  const publicUrl = isEnvProduction
-    ? publicPath.slice(0, -1)
-    : isEnvDevelopment && '';
-  // Get environment variables to inject into our app.
-  const env = getClientEnvironment(publicUrl);
-
-  // common function to get style loaders
-  const getStyleLoaders = (cssOptions, preProcessor) => {
-    const loaders = [
-      isEnvDevelopment && require.resolve('style-loader'),
-      isEnvProduction && {
-        loader: MiniCssExtractPlugin.loader,
-        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
-      },
-      {
-        loader: require.resolve('css-loader'),
-        options: cssOptions,
-      },
-      {
-        // Options for PostCSS as we reference these options twice
-        // Adds vendor prefixing based on your specified browser support in
-        // package.json
-        loader: require.resolve('postcss-loader'),
-        options: {
-          // Necessary for external CSS imports to work
-          // https://github.com/facebook/create-react-app/issues/2677
-          ident: 'postcss',
-          plugins: () => [
-            require('postcss-flexbugs-fixes'),
-            require('postcss-preset-env')({
-              autoprefixer: {
-                flexbox: 'no-2009',
-              },
-              stage: 3,
-            }),
-            // Adds PostCSS Normalize as the reset css with default options,
-            // so that it honors browserslist config in package.json
-            // which in turn let's users customize the target behavior as per their needs.
-            postcssNormalize(),
-          ],
-          sourceMap: isEnvProduction && shouldUseSourceMap,
-        },
-      },
-    ].filter(Boolean);
-    if (preProcessor) {
-      loaders.push(
-        {
-          loader: require.resolve('resolve-url-loader'),
-          options: {
-            sourceMap: isEnvProduction && shouldUseSourceMap,
-          },
-        },
-        {
-          loader: require.resolve(preProcessor),
-          options: {
-            sourceMap: true,
-          },
-        }
-      );
-    }
-    return loaders;
-  };
-
-  return {
-    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
-    // Stop compilation early in production
-    bail: isEnvProduction,
-    devtool: isEnvProduction
-      ? shouldUseSourceMap
-        ? 'source-map'
-        : false
-      : isEnvDevelopment && 'cheap-module-source-map',
-    // These are the "entry points" to our application.
-    // This means they will be the "root" imports that are included in JS bundle.
-    entry: [
-      // Include an alternative client for WebpackDevServer. A client's job is to
-      // connect to WebpackDevServer by a socket and get notified about changes.
-      // When you save a file, the client will either apply hot updates (in case
-      // of CSS changes), or refresh the page (in case of JS changes). When you
-      // make a syntax error, this client will display a syntax error overlay.
-      // Note: instead of the default WebpackDevServer client, we use a custom one
-      // to bring better experience for Create React App users. You can replace
-      // the line below with these two lines if you prefer the stock client:
-      // require.resolve('webpack-dev-server/client') + '?/',
-      // require.resolve('webpack/hot/dev-server'),
-      isEnvDevelopment &&
-        require.resolve('react-dev-utils/webpackHotDevClient'),
-      // Finally, this is your app's code:
-      paths.appIndexJs,
-      // We include the app code last so that if there is a runtime error during
-      // initialization, it doesn't blow up the WebpackDevServer client, and
-      // changing JS code would still trigger a refresh.
-    ].filter(Boolean),
-    output: {
-      // Needed to fix this: https://www.reddit.com/r/webdev/comments/qd14bm/node_17_currently_breaks_most_webpack/
-      hashFunction: HashGen,
-      // The build folder.
-      path: isEnvProduction ? paths.appBuild : undefined,
-      // Add /* filename */ comments to generated require()s in the output.
-      pathinfo: isEnvDevelopment,
-      // There will be one main bundle, and one file per asynchronous chunk.
-      // In development, it does not produce real files.
-      filename: isEnvProduction
-        ? 'static/js/[name].js'
-        : isEnvDevelopment && 'static/js/bundle.js',
-      // TODO: remove this when upgrading to webpack 5
-      futureEmitAssets: true,
-      // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: isEnvProduction
-        ? 'static/js/[name].chunk.js'
-        : isEnvDevelopment && 'static/js/[name].chunk.js',
-      // We inferred the "public path" (such as / or /my-project) from homepage.
-      // We use "/" in development.
-      publicPath: publicPath,
-      // Point sourcemap entries to original disk location (format as URL on Windows)
-      devtoolModuleFilenameTemplate: isEnvProduction
-        ? info =>
-            path
-              .relative(paths.appSrc, info.absoluteResourcePath)
-              .replace(/\\/g, '/')
-        : isEnvDevelopment &&
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-      // Prevents conflicts when multiple Webpack runtimes (from different apps)
-      // are used on the same page.
-      jsonpFunction: `webpackJsonp${appPackageJson.name}`,
-      // this defaults to 'window', but by setting it to 'this' then
-      // module chunks which are built will work in web workers as well.
-      globalObject: 'this',
-    },
-    optimization: {
-      minimize: isEnvProduction,
-      minimizer: [
-        // This is only used in production mode
-        new TerserPlugin({
-          terserOptions: {
-            parse: {
-              // We want terser to parse ecma 8 code. However, we don't want it
-              // to apply any minification steps that turns valid ecma 5 code
-              // into invalid ecma 5 code. This is why the 'compress' and 'output'
-              // sections only apply transformations that are ecma 5 safe
-              // https://github.com/facebook/create-react-app/pull/4234
-              ecma: 8,
-            },
-            compress: {
-              ecma: 5,
-              warnings: false,
-              // Disabled because of an issue with Uglify breaking seemingly valid code:
-              // https://github.com/facebook/create-react-app/issues/2376
-              // Pending further investigation:
-              // https://github.com/mishoo/UglifyJS2/issues/2011
-              comparisons: false,
-              // Disabled because of an issue with Terser breaking valid code:
-              // https://github.com/facebook/create-react-app/issues/5250
-              // Pending further investigation:
-              // https://github.com/terser-js/terser/issues/120
-              inline: 2,
-            },
-            mangle: {
-              safari10: true,
-            },
-            // Added for profiling in devtools
-            keep_classnames: isEnvProductionProfile,
-            keep_fnames: isEnvProductionProfile,
-            output: {
-              ecma: 5,
-              comments: false,
-              // Turned on because emoji and regex is not minified properly using default
-              // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
-            },
-          },
-          sourceMap: shouldUseSourceMap,
-        }),
-        // This is only used in production mode
-        new OptimizeCSSAssetsPlugin({
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: shouldUseSourceMap
-              ? {
-                  // `inline: false` forces the sourcemap to be output into a
-                  // separate file
-                  inline: false,
-                  // `annotation: true` appends the sourceMappingURL to the end of
-                  // the css file, helping the browser find the sourcemap
-                  annotation: true,
-                }
-              : false,
-          },
-          cssProcessorPluginOptions: {
-              preset: ['default', { minifyFontValues: { removeQuotes: false } }]
-          }
-        }),
-      ],
-      // Automatically split vendor and commons
-      // https://twitter.com/wSokra/status/969633336732905474
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      splitChunks: {
-        chunks: 'all',
-        name: false,
-      },
-      // Keep the runtime chunk separated to enable long term caching
-      // https://twitter.com/wSokra/status/969679223278505985
-      // https://github.com/facebook/create-react-app/issues/5358
-      runtimeChunk: {
-        name: entrypoint => `runtime-${entrypoint.name}`,
-      },
-    },
-    resolve: {
-      // This allows you to set a fallback for where Webpack should look for modules.
-      // We placed these paths second because we want `node_modules` to "win"
-      // if there are any conflicts. This matches Node resolution mechanism.
-      // https://github.com/facebook/create-react-app/issues/253
-      modules: ['node_modules', paths.appNodeModules].concat(
-        modules.additionalModulePaths || []
-      ),
-      // These are the reasonable defaults supported by the Node ecosystem.
-      // We also include JSX as a common component filename extension to support
-      // some tools, although we do not recommend using it, see:
-      // https://github.com/facebook/create-react-app/issues/290
-      // `web` extension prefixes have been added for better support
-      // for React Native Web.
-      extensions: paths.moduleFileExtensions
-        .map(ext => `.${ext}`)
-        .filter(ext => useTypeScript || !ext.includes('ts')),
-      alias: {
-        // Support React Native Web
-        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-        'react-native': 'react-native-web',
-        // Allows for better profiling with ReactDevTools
-        ...(isEnvProductionProfile && {
-          'react-dom$': 'react-dom/profiling',
-          'scheduler/tracing': 'scheduler/tracing-profiling',
-        }),
-        ...(modules.webpackAliases || {}),
-      },
-      plugins: [
-        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-        // guards against forgotten dependencies and such.
-        PnpWebpackPlugin,
-        // Prevents users from importing files from outside of src/ (or node_modules/).
-        // This often causes confusion because we only process files within src/ with babel.
-        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-        // please link the files into your node_modules/ and let module-resolution kick in.
-        // Make sure your source files are compiled, as they will not be processed in any way.
-        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-      ],
-    },
-    resolveLoader: {
-      plugins: [
-        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
-        // from the current package.
-        PnpWebpackPlugin.moduleLoader(module),
-      ],
-    },
-    module: {
-      strictExportPresence: true,
-      rules: [
-        // Disable require.ensure as it's not a standard language feature.
-        { parser: { requireEnsure: false } },
-        // First, run the linter.
-        // It's important to do this before Babel processes the JS.
-        // 
-        // JOPLINMOD: cra-build-watch expects the webpack config files to have
-        // keys in a certain order so we can't remove any. However we don't
-        // want their eslint config, so to disable it we make it watch extensions
-        // that don't exist.
-        {
-          test: /\.(DISABLEDDISABLED)$/,
-          enforce: 'pre',
-          use: [
-            {
-              options: {
-                cache: true,
-                formatter: require.resolve('react-dev-utils/eslintFormatter'),
-                eslintPath: require.resolve('eslint'),
-                resolvePluginsRelativeTo: __dirname,
-                
-              },
-              loader: require.resolve('eslint-loader'),
-            },
-          ],
-          include: paths.appSrc,
-        },
-        {
-          // "oneOf" will traverse all following loaders until one will
-          // match the requirements. When no loader matches it will fall
-          // back to the "file" loader at the end of the loader list.
-          oneOf: [
-            // "url" loader works like "file" loader except that it embeds assets
-            // smaller than specified limit in bytes as data URLs to avoid requests.
-            // A missing `test` is equivalent to a match.
-            {
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: imageInlineSizeLimit,
-                name: 'static/media/[name].[hash:8].[ext]',
-              },
-            },
-            // Process application JS with Babel.
-            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
-            {
-              test: /\.(js|mjs|jsx|ts|tsx)$/,
-              include: paths.appSrc,
-              loader: require.resolve('babel-loader'),
-              options: {
-                customize: require.resolve(
-                  'babel-preset-react-app/webpack-overrides'
-                ),                
-                plugins: [
-                  [
-                    require.resolve('babel-plugin-named-asset-import'),
-                    {
-                      loaderMap: {
-                        svg: {
-                          ReactComponent:
-                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
-                        },
-                      },
-                    },
-                  ],
-                ],
-                // This is a feature of `babel-loader` for webpack (not Babel itself).
-                // It enables caching results in ./node_modules/.cache/babel-loader/
-                // directory for faster rebuilds.
-                cacheDirectory: true,
-                // See #6846 for context on why cacheCompression is disabled
-                cacheCompression: false,
-                compact: isEnvProduction,
-              },
-            },
-            // Process any JS outside of the app with Babel.
-            // Unlike the application JS, we only compile the standard ES features.
-            {
-              test: /\.(js|mjs)$/,
-              exclude: /@babel(?:\/|\\{1,2})runtime/,
-              loader: require.resolve('babel-loader'),
-              options: {
-                babelrc: false,
-                configFile: false,
-                compact: false,
-                presets: [
-                  [
-                    require.resolve('babel-preset-react-app/dependencies'),
-                    { helpers: true },
-                  ],
-                ],
-                cacheDirectory: true,
-                // See #6846 for context on why cacheCompression is disabled
-                cacheCompression: false,
-                // Babel sourcemaps are needed for debugging into node_modules
-                // code.  Without the options below, debuggers like VSCode
-                // show incorrect code and set breakpoints on the wrong lines.
-                sourceMaps: shouldUseSourceMap,
-                inputSourceMap: shouldUseSourceMap,
-              },
-            },
-            // "postcss" loader applies autoprefixer to our CSS.
-            // "css" loader resolves paths in CSS and adds assets as dependencies.
-            // "style" loader turns CSS into JS modules that inject <style> tags.
-            // In production, we use MiniCSSExtractPlugin to extract that CSS
-            // to a file, but in development "style" loader enables hot editing
-            // of CSS.
-            // By default we support CSS Modules with the extension .module.css
-            {
-              test: cssRegex,
-              exclude: cssModuleRegex,
-              use: getStyleLoaders({
-                importLoaders: 1,
-                sourceMap: isEnvProduction && shouldUseSourceMap,
-              }),
-              // Don't consider CSS imports dead code even if the
-              // containing package claims to have no side effects.
-              // Remove this when webpack adds a warning or an error for this.
-              // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
-            },
-            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-            // using the extension .module.css
-            {
-              test: cssModuleRegex,
-              use: getStyleLoaders({
-                importLoaders: 1,
-                sourceMap: isEnvProduction && shouldUseSourceMap,
-                modules: {
-                  getLocalIdent: getCSSModuleLocalIdent,
-                },
-              }),
-            },
-            // Opt-in support for SASS (using .scss or .sass extensions).
-            // By default we support SASS Modules with the
-            // extensions .module.scss or .module.sass
-            {
-              test: sassRegex,
-              exclude: sassModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 3,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
-                },
-                'sass-loader'
-              ),
-              // Don't consider CSS imports dead code even if the
-              // containing package claims to have no side effects.
-              // Remove this when webpack adds a warning or an error for this.
-              // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
-            },
-            // Adds support for CSS Modules, but using SASS
-            // using the extension .module.scss or .module.sass
-            {
-              test: sassModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 3,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
-                  modules: {
-                    getLocalIdent: getCSSModuleLocalIdent,
-                  },
-                },
-                'sass-loader'
-              ),
-            },
-            // "file" loader makes sure those assets get served by WebpackDevServer.
-            // When you `import` an asset, you get its (virtual) filename.
-            // In production, they would get copied to the `build` folder.
-            // This loader doesn't use a "test" so it will catch all modules
-            // that fall through the other loaders.
-            {
-              loader: require.resolve('file-loader'),
-              // Exclude `js` files to keep "css" loader working as it injects
-              // its runtime that would otherwise be processed through "file" loader.
-              // Also exclude `html` and `json` extensions so they get processed
-              // by webpacks internal loaders.
-              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-              options: {
-                name: 'static/media/[name].[hash:8].[ext]',
-              },
-            },
-            // ** STOP ** Are you adding a new loader?
-            // Make sure to add the new loader(s) before the "file" loader.
-          ],
-        },
-      ],
-    },
-    plugins: [
-      // Generates an `index.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            template: paths.appHtml,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
-      // Inlines the webpack runtime script. This script is too small to warrant
-      // a network request.
-      // https://github.com/facebook/create-react-app/issues/5358
-      isEnvProduction &&
-        shouldInlineRuntimeChunk &&
-        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
-      // Makes some environment variables available in index.html.
-      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-      // In production, it will be an empty string unless you specify "homepage"
-      // in `package.json`, in which case it will be the pathname of that URL.
-      // In development, this will be an empty string.
-      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
-      // This gives some necessary context to module not found errors, such as
-      // the requesting resource.
-      new ModuleNotFoundPlugin(paths.appPath),
-      // Makes some environment variables available to the JS code, for example:
-      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-      // It is absolutely essential that NODE_ENV is set to production
-      // during a production build.
-      // Otherwise React will be compiled in the very slow development mode.
-      new webpack.DefinePlugin(env.stringified),
-      // This is necessary to emit hot updates (currently CSS only):
-      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
-      // Watcher doesn't work well if you mistype casing in a path so we use
-      // a plugin that prints an error when you attempt to do this.
-      // See https://github.com/facebook/create-react-app/issues/240
-      isEnvDevelopment && new CaseSensitivePathsPlugin(),
-      // If you require a missing module and then `npm install` it, you still have
-      // to restart the development server for Webpack to discover it. This plugin
-      // makes the discovery automatic so you don't have to restart.
-      // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment &&
-        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-      isEnvProduction &&
-        new MiniCssExtractPlugin({
-          // Options similar to the same options in webpackOptions.output
-          // both options are optional
-          filename: 'static/css/[name].css',
-          chunkFilename: 'static/css/[name].chunk.css',
-        }),
-      // Generate an asset manifest file with the following content:
-      // - "files" key: Mapping of all asset filenames to their corresponding
-      //   output file so that tools can pick it up without having to parse
-      //   `index.html`
-      // - "entrypoints" key: Array of files which are included in `index.html`,
-      //   can be used to reconstruct the HTML if necessary
-      new ManifestPlugin({
-        fileName: 'asset-manifest.json',
-        publicPath: publicPath,
-        generate: (seed, files, entrypoints) => {
-          const manifestFiles = files.reduce((manifest, file) => {
-            manifest[file.name] = file.path;
-            return manifest;
-          }, seed);
-          const entrypointFiles = entrypoints.main.filter(
-            fileName => !fileName.endsWith('.map')
-          );
-
-          return {
-            files: manifestFiles,
-            entrypoints: entrypointFiles,
-          };
-        },
-      }),
-      // Moment.js is an extremely popular library that bundles large locale files
-      // by default due to how Webpack interprets its code. This is a practical
-      // solution that requires the user to opt into importing specific locales.
-      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-      // You can remove this if you don't use Moment.js:
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-      // Generate a service worker script that will precache, and keep up to date,
-      // the HTML & assets that are part of the Webpack build.
-      // isEnvProduction &&
-   //      new WorkboxWebpackPlugin.GenerateSW({
-   //       clientsClaim: true,
-   //       exclude: [/\.map$/, /asset-manifest\.json$/],
-   //       importWorkboxFrom: 'cdn',
-   //       navigateFallback: `${publicUrl}/index.html`,
-   //       navigateFallbackBlacklist: [
-   //         // Exclude URLs starting with /_, as they're likely an API call
-   //         new RegExp('^/_'),
-   //         // Exclude any URLs whose last part seems to be a file extension
-   //         // as they're likely a resource and not a SPA route.
-   //         // URLs containing a "?" character won't be blacklisted as they're likely
-   //         // a route with query params (e.g. auth callbacks).
-   //         new RegExp('/[^/?]+\\.[^/]+$'),
-   //       ],
-   //      }),
-      // TypeScript type checking
-      useTypeScript &&
-        new ForkTsCheckerWebpackPlugin({
-          typescript: resolve.sync('typescript', {
-            basedir: paths.appNodeModules,
-          }),
-          async: isEnvDevelopment,
-          useTypescriptIncrementalApi: true,
-          checkSyntacticErrors: true,
-          resolveModuleNameModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
-          resolveTypeReferenceDirectiveModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
-          tsconfig: paths.appTsConfig,
-          reportFiles: [
-            '**',
-            '!**/__tests__/**',
-            '!**/?(*.)(spec|test).*',
-            '!**/src/setupProxy.*',
-            '!**/src/setupTests.*',
-          ],
-          silent: true,
-          // The formatter is invoked directly in WebpackDevServerUtils during development
-          formatter: isEnvProduction ? typescriptFormatter : undefined,
-        }),
-    ].filter(Boolean),
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
-    node: {
-      module: 'empty',
-      dgram: 'empty',
-      dns: 'mock',
-      fs: 'empty',
-      http2: 'empty',
-      net: 'empty',
-      tls: 'empty',
-      child_process: 'empty',
-    },
-    // Turn off performance processing because we utilize
-    // our own hints via the FileSizeReporter
-    performance: false,
-  };
-};

packages/app-clipper/popup/config/webpackDevServer.config.js

@@ -1,110 +0,0 @@
-'use strict';
-
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
-const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const ignoredFiles = require('react-dev-utils/ignoredFiles');
-const paths = require('./paths');
-const fs = require('fs');
-
-const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-const host = process.env.HOST || '0.0.0.0';
-
-module.exports = function(proxy, allowedHost) {
-	return {
-		// WebpackDevServer 2.4.3 introduced a security fix that prevents remote
-		// websites from potentially accessing local content through DNS rebinding:
-		// https://github.com/webpack/webpack-dev-server/issues/887
-		// https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
-		// However, it made several existing use cases such as development in cloud
-		// environment or subdomains in development significantly more complicated:
-		// https://github.com/facebook/create-react-app/issues/2271
-		// https://github.com/facebook/create-react-app/issues/2233
-		// While we're investigating better solutions, for now we will take a
-		// compromise. Since our WDS configuration only serves files in the `public`
-		// folder we won't consider accessing them a vulnerability. However, if you
-		// use the `proxy` feature, it gets more dangerous because it can expose
-		// remote code execution vulnerabilities in backends like Django and Rails.
-		// So we will disable the host check normally, but enable it if you have
-		// specified the `proxy` setting. Finally, we let you override it if you
-		// really know what you're doing with a special environment variable.
-		disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
-		// Enable gzip compression of generated files.
-		compress: true,
-		// Silence WebpackDevServer's own logs since they're generally not useful.
-		// It will still show compile warnings and errors with this setting.
-		clientLogLevel: 'none',
-		// By default WebpackDevServer serves physical files from current directory
-		// in addition to all the virtual build products that it serves from memory.
-		// This is confusing because those files won’t automatically be available in
-		// production build folder unless we copy them. However, copying the whole
-		// project directory is dangerous because we may expose sensitive files.
-		// Instead, we establish a convention that only files in `public` directory
-		// get served. Our build script will copy `public` into the `build` folder.
-		// In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-		// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-		// In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-		// Note that we only recommend to use `public` folder as an escape hatch
-		// for files like `favicon.ico`, `manifest.json`, and libraries that are
-		// for some reason broken when imported through Webpack. If you just want to
-		// use an image, put it in `src` and `import` it from JavaScript instead.
-		contentBase: paths.appPublic,
-		// By default files from `contentBase` will not trigger a page reload.
-		watchContentBase: true,
-		// Enable hot reloading server. It will provide /sockjs-node/ endpoint
-		// for the WebpackDevServer client so it can learn when the files were
-		// updated. The WebpackDevServer client is included as an entry point
-		// in the Webpack development configuration. Note that only changes
-		// to CSS are currently hot reloaded. JS changes will refresh the browser.
-		hot: true,
-		// Use 'ws' instead of 'sockjs-node' on server since we're using native
-		// websockets in `webpackHotDevClient`.
-		transportMode: 'ws',
-		// Prevent a WS client from getting injected as we're already including
-		// `webpackHotDevClient`.
-		injectClient: false,
-		// It is important to tell WebpackDevServer to use the same "root" path
-		// as we specified in the config. In development, we always serve from /.
-		publicPath: '/',
-		// WebpackDevServer is noisy by default so we emit custom message instead
-		// by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-		quiet: true,
-		// Reportedly, this avoids CPU overload on some systems.
-		// https://github.com/facebook/create-react-app/issues/293
-		// src/node_modules is not ignored to support absolute imports
-		// https://github.com/facebook/create-react-app/issues/1065
-		watchOptions: {
-			ignored: ignoredFiles(paths.appSrc),
-		},
-		// Enable HTTPS if the HTTPS environment variable is set to 'true'
-		https: protocol === 'https',
-		host,
-		overlay: false,
-		historyApiFallback: {
-			// Paths with dots should still use the history fallback.
-			// See https://github.com/facebook/create-react-app/issues/387.
-			disableDotRule: true,
-		},
-		public: allowedHost,
-		proxy,
-		before(app, server) {
-			if (fs.existsSync(paths.proxySetup)) {
-				// This registers user provided middleware for proxy reasons
-				require(paths.proxySetup)(app);
-			}
-
-			// This lets us fetch source contents from webpack for the error overlay
-			app.use(evalSourceMapMiddleware(server));
-			// This lets us open files from the runtime error overlay.
-			app.use(errorOverlayMiddleware());
-
-			// This service worker file is effectively a 'no-op' that will reset any
-			// previous service worker registered for the same host:port combination.
-			// We do this in development to avoid hitting the production cache if
-			// it used the same host and port.
-			// https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-			app.use(noopServiceWorkerMiddleware());
-		},
-	};
-};

packages/app-clipper/popup/config/webpack_config_at_eject_time.js

@@ -1,676 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const webpack = require('webpack');
-const resolve = require('resolve');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
-const paths = require('./paths');
-const modules = require('./modules');
-const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-
-const postcssNormalize = require('postcss-normalize');
-
-const appPackageJson = require(paths.appPackageJson);
-
-// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-// Some apps do not need the benefits of saving a web request, so not inlining the chunk
-// makes for a smoother build process.
-const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
-
-const imageInlineSizeLimit = parseInt(
-  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
-);
-
-// Check if TypeScript is setup
-const useTypeScript = fs.existsSync(paths.appTsConfig);
-
-// style files regexes
-const cssRegex = /\.css$/;
-const cssModuleRegex = /\.module\.css$/;
-const sassRegex = /\.(scss|sass)$/;
-const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-// This is the production and development configuration.
-// It is focused on developer experience, fast rebuilds, and a minimal bundle.
-module.exports = function(webpackEnv) {
-  const isEnvDevelopment = webpackEnv === 'development';
-  const isEnvProduction = webpackEnv === 'production';
-
-  // Variable used for enabling profiling in Production
-  // passed into alias object. Uses a flag if passed into the build command
-  const isEnvProductionProfile =
-    isEnvProduction && process.argv.includes('--profile');
-
-  // Webpack uses `publicPath` to determine where the app is being served from.
-  // It requires a trailing slash, or the file assets will get an incorrect path.
-  // In development, we always serve from the root. This makes config easier.
-  const publicPath = isEnvProduction
-    ? paths.servedPath
-    : isEnvDevelopment && '/';
-  // Some apps do not use client-side routing with pushState.
-  // For these, "homepage" can be set to "." to enable relative asset paths.
-  const shouldUseRelativeAssetPaths = publicPath === './';
-
-  // `publicUrl` is just like `publicPath`, but we will provide it to our app
-  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-  const publicUrl = isEnvProduction
-    ? publicPath.slice(0, -1)
-    : isEnvDevelopment && '';
-  // Get environment variables to inject into our app.
-  const env = getClientEnvironment(publicUrl);
-
-  // common function to get style loaders
-  const getStyleLoaders = (cssOptions, preProcessor) => {
-    const loaders = [
-      isEnvDevelopment && require.resolve('style-loader'),
-      isEnvProduction && {
-        loader: MiniCssExtractPlugin.loader,
-        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
-      },
-      {
-        loader: require.resolve('css-loader'),
-        options: cssOptions,
-      },
-      {
-        // Options for PostCSS as we reference these options twice
-        // Adds vendor prefixing based on your specified browser support in
-        // package.json
-        loader: require.resolve('postcss-loader'),
-        options: {
-          // Necessary for external CSS imports to work
-          // https://github.com/facebook/create-react-app/issues/2677
-          ident: 'postcss',
-          plugins: () => [
-            require('postcss-flexbugs-fixes'),
-            require('postcss-preset-env')({
-              autoprefixer: {
-                flexbox: 'no-2009',
-              },
-              stage: 3,
-            }),
-            // Adds PostCSS Normalize as the reset css with default options,
-            // so that it honors browserslist config in package.json
-            // which in turn let's users customize the target behavior as per their needs.
-            postcssNormalize(),
-          ],
-          sourceMap: isEnvProduction && shouldUseSourceMap,
-        },
-      },
-    ].filter(Boolean);
-    if (preProcessor) {
-      loaders.push(
-        {
-          loader: require.resolve('resolve-url-loader'),
-          options: {
-            sourceMap: isEnvProduction && shouldUseSourceMap,
-          },
-        },
-        {
-          loader: require.resolve(preProcessor),
-          options: {
-            sourceMap: true,
-          },
-        }
-      );
-    }
-    return loaders;
-  };
-
-  return {
-    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
-    // Stop compilation early in production
-    bail: isEnvProduction,
-    devtool: isEnvProduction
-      ? shouldUseSourceMap
-        ? 'source-map'
-        : false
-      : isEnvDevelopment && 'cheap-module-source-map',
-    // These are the "entry points" to our application.
-    // This means they will be the "root" imports that are included in JS bundle.
-    entry: [
-      // Include an alternative client for WebpackDevServer. A client's job is to
-      // connect to WebpackDevServer by a socket and get notified about changes.
-      // When you save a file, the client will either apply hot updates (in case
-      // of CSS changes), or refresh the page (in case of JS changes). When you
-      // make a syntax error, this client will display a syntax error overlay.
-      // Note: instead of the default WebpackDevServer client, we use a custom one
-      // to bring better experience for Create React App users. You can replace
-      // the line below with these two lines if you prefer the stock client:
-      // require.resolve('webpack-dev-server/client') + '?/',
-      // require.resolve('webpack/hot/dev-server'),
-      isEnvDevelopment &&
-        require.resolve('react-dev-utils/webpackHotDevClient'),
-      // Finally, this is your app's code:
-      paths.appIndexJs,
-      // We include the app code last so that if there is a runtime error during
-      // initialization, it doesn't blow up the WebpackDevServer client, and
-      // changing JS code would still trigger a refresh.
-    ].filter(Boolean),
-    output: {
-      // The build folder.
-      path: isEnvProduction ? paths.appBuild : undefined,
-      // Add /* filename */ comments to generated require()s in the output.
-      pathinfo: isEnvDevelopment,
-      // There will be one main bundle, and one file per asynchronous chunk.
-      // In development, it does not produce real files.
-      filename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].js'
-        : isEnvDevelopment && 'static/js/bundle.js',
-      // TODO: remove this when upgrading to webpack 5
-      futureEmitAssets: true,
-      // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].chunk.js'
-        : isEnvDevelopment && 'static/js/[name].chunk.js',
-      // We inferred the "public path" (such as / or /my-project) from homepage.
-      // We use "/" in development.
-      publicPath: publicPath,
-      // Point sourcemap entries to original disk location (format as URL on Windows)
-      devtoolModuleFilenameTemplate: isEnvProduction
-        ? info =>
-            path
-              .relative(paths.appSrc, info.absoluteResourcePath)
-              .replace(/\\/g, '/')
-        : isEnvDevelopment &&
-          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-      // Prevents conflicts when multiple Webpack runtimes (from different apps)
-      // are used on the same page.
-      jsonpFunction: `webpackJsonp${appPackageJson.name}`,
-      // this defaults to 'window', but by setting it to 'this' then
-      // module chunks which are built will work in web workers as well.
-      globalObject: 'this',
-    },
-    optimization: {
-      minimize: isEnvProduction,
-      minimizer: [
-        // This is only used in production mode
-        new TerserPlugin({
-          terserOptions: {
-            parse: {
-              // We want terser to parse ecma 8 code. However, we don't want it
-              // to apply any minification steps that turns valid ecma 5 code
-              // into invalid ecma 5 code. This is why the 'compress' and 'output'
-              // sections only apply transformations that are ecma 5 safe
-              // https://github.com/facebook/create-react-app/pull/4234
-              ecma: 8,
-            },
-            compress: {
-              ecma: 5,
-              warnings: false,
-              // Disabled because of an issue with Uglify breaking seemingly valid code:
-              // https://github.com/facebook/create-react-app/issues/2376
-              // Pending further investigation:
-              // https://github.com/mishoo/UglifyJS2/issues/2011
-              comparisons: false,
-              // Disabled because of an issue with Terser breaking valid code:
-              // https://github.com/facebook/create-react-app/issues/5250
-              // Pending further investigation:
-              // https://github.com/terser-js/terser/issues/120
-              inline: 2,
-            },
-            mangle: {
-              safari10: true,
-            },
-            // Added for profiling in devtools
-            keep_classnames: isEnvProductionProfile,
-            keep_fnames: isEnvProductionProfile,
-            output: {
-              ecma: 5,
-              comments: false,
-              // Turned on because emoji and regex is not minified properly using default
-              // https://github.com/facebook/create-react-app/issues/2488
-              ascii_only: true,
-            },
-          },
-          sourceMap: shouldUseSourceMap,
-        }),
-        // This is only used in production mode
-        new OptimizeCSSAssetsPlugin({
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: shouldUseSourceMap
-              ? {
-                  // `inline: false` forces the sourcemap to be output into a
-                  // separate file
-                  inline: false,
-                  // `annotation: true` appends the sourceMappingURL to the end of
-                  // the css file, helping the browser find the sourcemap
-                  annotation: true,
-                }
-              : false,
-          },
-          cssProcessorPluginOptions: {
-              preset: ['default', { minifyFontValues: { removeQuotes: false } }]
-          }
-        }),
-      ],
-      // Automatically split vendor and commons
-      // https://twitter.com/wSokra/status/969633336732905474
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      splitChunks: {
-        chunks: 'all',
-        name: false,
-      },
-      // Keep the runtime chunk separated to enable long term caching
-      // https://twitter.com/wSokra/status/969679223278505985
-      // https://github.com/facebook/create-react-app/issues/5358
-      runtimeChunk: {
-        name: entrypoint => `runtime-${entrypoint.name}`,
-      },
-    },
-    resolve: {
-      // This allows you to set a fallback for where Webpack should look for modules.
-      // We placed these paths second because we want `node_modules` to "win"
-      // if there are any conflicts. This matches Node resolution mechanism.
-      // https://github.com/facebook/create-react-app/issues/253
-      modules: ['node_modules', paths.appNodeModules].concat(
-        modules.additionalModulePaths || []
-      ),
-      // These are the reasonable defaults supported by the Node ecosystem.
-      // We also include JSX as a common component filename extension to support
-      // some tools, although we do not recommend using it, see:
-      // https://github.com/facebook/create-react-app/issues/290
-      // `web` extension prefixes have been added for better support
-      // for React Native Web.
-      extensions: paths.moduleFileExtensions
-        .map(ext => `.${ext}`)
-        .filter(ext => useTypeScript || !ext.includes('ts')),
-      alias: {
-        // Support React Native Web
-        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-        'react-native': 'react-native-web',
-        // Allows for better profiling with ReactDevTools
-        ...(isEnvProductionProfile && {
-          'react-dom$': 'react-dom/profiling',
-          'scheduler/tracing': 'scheduler/tracing-profiling',
-        }),
-        ...(modules.webpackAliases || {}),
-      },
-      plugins: [
-        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-        // guards against forgotten dependencies and such.
-        PnpWebpackPlugin,
-        // Prevents users from importing files from outside of src/ (or node_modules/).
-        // This often causes confusion because we only process files within src/ with babel.
-        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-        // please link the files into your node_modules/ and let module-resolution kick in.
-        // Make sure your source files are compiled, as they will not be processed in any way.
-        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-      ],
-    },
-    resolveLoader: {
-      plugins: [
-        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
-        // from the current package.
-        PnpWebpackPlugin.moduleLoader(module),
-      ],
-    },
-    module: {
-      strictExportPresence: true,
-      rules: [
-        // Disable require.ensure as it's not a standard language feature.
-        { parser: { requireEnsure: false } },
-
-        // First, run the linter.
-        // It's important to do this before Babel processes the JS.
-        {
-          test: /\.(js|mjs|jsx|ts|tsx)$/,
-          enforce: 'pre',
-          use: [
-            {
-              options: {
-                cache: true,
-                formatter: require.resolve('react-dev-utils/eslintFormatter'),
-                eslintPath: require.resolve('eslint'),
-                resolvePluginsRelativeTo: __dirname,
-                
-              },
-              loader: require.resolve('eslint-loader'),
-            },
-          ],
-          include: paths.appSrc,
-        },
-        {
-          // "oneOf" will traverse all following loaders until one will
-          // match the requirements. When no loader matches it will fall
-          // back to the "file" loader at the end of the loader list.
-          oneOf: [
-            // "url" loader works like "file" loader except that it embeds assets
-            // smaller than specified limit in bytes as data URLs to avoid requests.
-            // A missing `test` is equivalent to a match.
-            {
-              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: imageInlineSizeLimit,
-                name: 'static/media/[name].[hash:8].[ext]',
-              },
-            },
-            // Process application JS with Babel.
-            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
-            {
-              test: /\.(js|mjs|jsx|ts|tsx)$/,
-              include: paths.appSrc,
-              loader: require.resolve('babel-loader'),
-              options: {
-                customize: require.resolve(
-                  'babel-preset-react-app/webpack-overrides'
-                ),
-                
-                plugins: [
-                  [
-                    require.resolve('babel-plugin-named-asset-import'),
-                    {
-                      loaderMap: {
-                        svg: {
-                          ReactComponent:
-                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
-                        },
-                      },
-                    },
-                  ],
-                ],
-                // This is a feature of `babel-loader` for webpack (not Babel itself).
-                // It enables caching results in ./node_modules/.cache/babel-loader/
-                // directory for faster rebuilds.
-                cacheDirectory: true,
-                // See #6846 for context on why cacheCompression is disabled
-                cacheCompression: false,
-                compact: isEnvProduction,
-              },
-            },
-            // Process any JS outside of the app with Babel.
-            // Unlike the application JS, we only compile the standard ES features.
-            {
-              test: /\.(js|mjs)$/,
-              exclude: /@babel(?:\/|\\{1,2})runtime/,
-              loader: require.resolve('babel-loader'),
-              options: {
-                babelrc: false,
-                configFile: false,
-                compact: false,
-                presets: [
-                  [
-                    require.resolve('babel-preset-react-app/dependencies'),
-                    { helpers: true },
-                  ],
-                ],
-                cacheDirectory: true,
-                // See #6846 for context on why cacheCompression is disabled
-                cacheCompression: false,
-                
-                // Babel sourcemaps are needed for debugging into node_modules
-                // code.  Without the options below, debuggers like VSCode
-                // show incorrect code and set breakpoints on the wrong lines.
-                sourceMaps: shouldUseSourceMap,
-                inputSourceMap: shouldUseSourceMap,
-              },
-            },
-            // "postcss" loader applies autoprefixer to our CSS.
-            // "css" loader resolves paths in CSS and adds assets as dependencies.
-            // "style" loader turns CSS into JS modules that inject <style> tags.
-            // In production, we use MiniCSSExtractPlugin to extract that CSS
-            // to a file, but in development "style" loader enables hot editing
-            // of CSS.
-            // By default we support CSS Modules with the extension .module.css
-            {
-              test: cssRegex,
-              exclude: cssModuleRegex,
-              use: getStyleLoaders({
-                importLoaders: 1,
-                sourceMap: isEnvProduction && shouldUseSourceMap,
-              }),
-              // Don't consider CSS imports dead code even if the
-              // containing package claims to have no side effects.
-              // Remove this when webpack adds a warning or an error for this.
-              // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
-            },
-            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
-            // using the extension .module.css
-            {
-              test: cssModuleRegex,
-              use: getStyleLoaders({
-                importLoaders: 1,
-                sourceMap: isEnvProduction && shouldUseSourceMap,
-                modules: {
-                  getLocalIdent: getCSSModuleLocalIdent,
-                },
-              }),
-            },
-            // Opt-in support for SASS (using .scss or .sass extensions).
-            // By default we support SASS Modules with the
-            // extensions .module.scss or .module.sass
-            {
-              test: sassRegex,
-              exclude: sassModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 3,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
-                },
-                'sass-loader'
-              ),
-              // Don't consider CSS imports dead code even if the
-              // containing package claims to have no side effects.
-              // Remove this when webpack adds a warning or an error for this.
-              // See https://github.com/webpack/webpack/issues/6571
-              sideEffects: true,
-            },
-            // Adds support for CSS Modules, but using SASS
-            // using the extension .module.scss or .module.sass
-            {
-              test: sassModuleRegex,
-              use: getStyleLoaders(
-                {
-                  importLoaders: 3,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
-                  modules: {
-                    getLocalIdent: getCSSModuleLocalIdent,
-                  },
-                },
-                'sass-loader'
-              ),
-            },
-            // "file" loader makes sure those assets get served by WebpackDevServer.
-            // When you `import` an asset, you get its (virtual) filename.
-            // In production, they would get copied to the `build` folder.
-            // This loader doesn't use a "test" so it will catch all modules
-            // that fall through the other loaders.
-            {
-              loader: require.resolve('file-loader'),
-              // Exclude `js` files to keep "css" loader working as it injects
-              // its runtime that would otherwise be processed through "file" loader.
-              // Also exclude `html` and `json` extensions so they get processed
-              // by webpacks internal loaders.
-              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-              options: {
-                name: 'static/media/[name].[hash:8].[ext]',
-              },
-            },
-            // ** STOP ** Are you adding a new loader?
-            // Make sure to add the new loader(s) before the "file" loader.
-          ],
-        },
-      ],
-    },
-    plugins: [
-      // Generates an `index.html` file with the <script> injected.
-      new HtmlWebpackPlugin(
-        Object.assign(
-          {},
-          {
-            inject: true,
-            template: paths.appHtml,
-          },
-          isEnvProduction
-            ? {
-                minify: {
-                  removeComments: true,
-                  collapseWhitespace: true,
-                  removeRedundantAttributes: true,
-                  useShortDoctype: true,
-                  removeEmptyAttributes: true,
-                  removeStyleLinkTypeAttributes: true,
-                  keepClosingSlash: true,
-                  minifyJS: true,
-                  minifyCSS: true,
-                  minifyURLs: true,
-                },
-              }
-            : undefined
-        )
-      ),
-      // Inlines the webpack runtime script. This script is too small to warrant
-      // a network request.
-      // https://github.com/facebook/create-react-app/issues/5358
-      isEnvProduction &&
-        shouldInlineRuntimeChunk &&
-        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
-      // Makes some environment variables available in index.html.
-      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-      // In production, it will be an empty string unless you specify "homepage"
-      // in `package.json`, in which case it will be the pathname of that URL.
-      // In development, this will be an empty string.
-      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
-      // This gives some necessary context to module not found errors, such as
-      // the requesting resource.
-      new ModuleNotFoundPlugin(paths.appPath),
-      // Makes some environment variables available to the JS code, for example:
-      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-      // It is absolutely essential that NODE_ENV is set to production
-      // during a production build.
-      // Otherwise React will be compiled in the very slow development mode.
-      new webpack.DefinePlugin(env.stringified),
-      // This is necessary to emit hot updates (currently CSS only):
-      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
-      // Watcher doesn't work well if you mistype casing in a path so we use
-      // a plugin that prints an error when you attempt to do this.
-      // See https://github.com/facebook/create-react-app/issues/240
-      isEnvDevelopment && new CaseSensitivePathsPlugin(),
-      // If you require a missing module and then `npm install` it, you still have
-      // to restart the development server for Webpack to discover it. This plugin
-      // makes the discovery automatic so you don't have to restart.
-      // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment &&
-        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-      isEnvProduction &&
-        new MiniCssExtractPlugin({
-          // Options similar to the same options in webpackOptions.output
-          // both options are optional
-          filename: 'static/css/[name].[contenthash:8].css',
-          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
-        }),
-      // Generate an asset manifest file with the following content:
-      // - "files" key: Mapping of all asset filenames to their corresponding
-      //   output file so that tools can pick it up without having to parse
-      //   `index.html`
-      // - "entrypoints" key: Array of files which are included in `index.html`,
-      //   can be used to reconstruct the HTML if necessary
-      new ManifestPlugin({
-        fileName: 'asset-manifest.json',
-        publicPath: publicPath,
-        generate: (seed, files, entrypoints) => {
-          const manifestFiles = files.reduce((manifest, file) => {
-            manifest[file.name] = file.path;
-            return manifest;
-          }, seed);
-          const entrypointFiles = entrypoints.main.filter(
-            fileName => !fileName.endsWith('.map')
-          );
-
-          return {
-            files: manifestFiles,
-            entrypoints: entrypointFiles,
-          };
-        },
-      }),
-      // Moment.js is an extremely popular library that bundles large locale files
-      // by default due to how Webpack interprets its code. This is a practical
-      // solution that requires the user to opt into importing specific locales.
-      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-      // You can remove this if you don't use Moment.js:
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-      // Generate a service worker script that will precache, and keep up to date,
-      // the HTML & assets that are part of the Webpack build.
-      isEnvProduction &&
-        new WorkboxWebpackPlugin.GenerateSW({
-          clientsClaim: true,
-          exclude: [/\.map$/, /asset-manifest\.json$/],
-          importWorkboxFrom: 'cdn',
-          navigateFallback: publicUrl + '/index.html',
-          navigateFallbackBlacklist: [
-            // Exclude URLs starting with /_, as they're likely an API call
-            new RegExp('^/_'),
-            // Exclude any URLs whose last part seems to be a file extension
-            // as they're likely a resource and not a SPA route.
-            // URLs containing a "?" character won't be blacklisted as they're likely
-            // a route with query params (e.g. auth callbacks).
-            new RegExp('/[^/?]+\\.[^/]+$'),
-          ],
-        }),
-      // TypeScript type checking
-      useTypeScript &&
-        new ForkTsCheckerWebpackPlugin({
-          typescript: resolve.sync('typescript', {
-            basedir: paths.appNodeModules,
-          }),
-          async: isEnvDevelopment,
-          useTypescriptIncrementalApi: true,
-          checkSyntacticErrors: true,
-          resolveModuleNameModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
-          resolveTypeReferenceDirectiveModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
-          tsconfig: paths.appTsConfig,
-          reportFiles: [
-            '**',
-            '!**/__tests__/**',
-            '!**/?(*.)(spec|test).*',
-            '!**/src/setupProxy.*',
-            '!**/src/setupTests.*',
-          ],
-          silent: true,
-          // The formatter is invoked directly in WebpackDevServerUtils during development
-          formatter: isEnvProduction ? typescriptFormatter : undefined,
-        }),
-    ].filter(Boolean),
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
-    node: {
-      module: 'empty',
-      dgram: 'empty',
-      dns: 'mock',
-      fs: 'empty',
-      http2: 'empty',
-      net: 'empty',
-      tls: 'empty',
-      child_process: 'empty',
-    },
-    // Turn off performance processing because we utilize
-    // our own hints via the FileSizeReporter
-    performance: false,
-  };
-};

packages/app-clipper/popup/package.json

@@ -4,126 +4,31 @@
   "private": true,
   "homepage": ".",
   "dependencies": {
-    "@babel/core": "7.8.4",
-    "@svgr/webpack": "4.3.3",
-    "@typescript-eslint/eslint-plugin": "^2.10.0",
-    "@typescript-eslint/parser": "^2.10.0",
-    "babel-eslint": "10.0.3",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "8.0.6",
-    "babel-plugin-named-asset-import": "^0.3.6",
-    "babel-preset-react-app": "^9.1.1",
-    "camelcase": "5.3.1",
-    "case-sensitive-paths-webpack-plugin": "2.3.0",
-    "css-loader": "3.6.0",
-    "dotenv": "8.6.0",
-    "dotenv-expand": "5.1.0",
-    "file-loader": "4.3.0",
-    "fs-extra": "10.1.0",
-    "html-webpack-plugin": "4.0.0-beta.11",
-    "identity-obj-proxy": "3.0.0",
-    "jest": "24.9.0",
-    "jest-environment-jsdom-fourteen": "1.0.1",
-    "jest-resolve": "24.9.0",
-    "jest-watch-typeahead": "0.4.2",
-    "mini-css-extract-plugin": "0.9.0",
-    "optimize-css-assets-webpack-plugin": "5.0.8",
-    "pnp-webpack-plugin": "1.6.0",
-    "postcss-flexbugs-fixes": "4.1.0",
-    "postcss-loader": "3.0.0",
-    "postcss-normalize": "8.0.1",
-    "postcss-preset-env": "6.7.1",
-    "postcss-safe-parser": "4.0.2",
-    "react": "^16.12.0",
-    "react-app-polyfill": "^1.0.6",
-    "react-dev-utils": "^10.1.0",
-    "react-dom": "^16.12.0",
-    "react-redux": "^5.0.7",
-    "redux": "4.1.2",
-    "resolve": "1.22.1",
-    "resolve-url-loader": "^3.1.3",
-    "sass-loader": "8.0.2",
-    "semver": "6.3.0",
-    "style-loader": "1.1.3",
-    "terser-webpack-plugin": "2.3.8",
-    "ts-pnp": "1.1.5",
-    "url-loader": "2.3.0",
-    "webpack": "4.41.5",
-    "webpack-dev-server": "^3.11.2",
-    "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "4.3.1"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "echo 'Clipper build is disabled due to disabled due to ERR_OSSL_EVP_UNSUPPORTED error on CI'",
-    "build_DISABLED": "node scripts/build.js SKIP_PREFLIGHT_CHECK",
-    "test": "node scripts/test.js --env=jsdom",
-    "watch": "cra-build-watch",
+    "build": "webpack --mode=production",
+    "watch": "webpack watch --mode=development",
     "postinstall": "node postinstall.js && npm run build"
   },
   "devDependencies": {
-    "cra-build-watch": "^3.4.0",
-    "fs-extra": "^10.0.0",
-    "md5": "^2.3.0",
-    "react-scripts": "^3.3.1"
+    "@babel/core": "^7.23.7",
+    "@babel/preset-env": "^7.23.7",
+    "@babel/preset-react": "7.23.3",
+    "babel-loader": "9.1.3",
+    "css-loader": "6.8.1",
+    "html-webpack-plugin": "5.6.0",
+    "react-redux": "9.0.4",
+    "redux": "5.0.1",
+    "style-loader": "3.3.3",
+    "webpack": "5.89.0",
+    "webpack-cli": "5.1.4"
   },
   "browserslist": [
     ">0.2%",
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ],
-  "jest": {
-    "roots": [
-      "<rootDir>/src"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/**/*.d.ts"
-    ],
-    "setupFiles": [
-      "react-app-polyfill/jsdom"
-    ],
-    "setupFilesAfterEnv": [],
-    "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
-    ],
-    "testEnvironment": "jest-environment-jsdom-fourteen",
-    "transform": {
-      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
-      "^.+\\.module\\.(css|sass|scss)$"
-    ],
-    "modulePaths": [],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web",
-      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
-    },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "web.ts",
-      "ts",
-      "web.tsx",
-      "tsx",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
-    ],
-    "watchPlugins": [
-      "jest-watch-typeahead/filename",
-      "jest-watch-typeahead/testname"
-    ]
-  },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  }
+  ]
 }

packages/app-clipper/popup/public/index.html

@@ -4,21 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Joplin Web Clipper</title>
   </head>
   <body>

packages/app-clipper/popup/scripts/build.js

@@ -1,211 +0,0 @@
-'use strict';
-
-if (process.argv && process.argv.indexOf('SKIP_PREFLIGHT_CHECK') >= 0) {
-	process.env.SKIP_PREFLIGHT_CHECK = 'true';
-}
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'production';
-process.env.NODE_ENV = 'production';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-// Ensure environment variables are read.
-require('../config/env');
-
-
-const path = require('path');
-const chalk = require('react-dev-utils/chalk');
-const fs = require('fs-extra');
-const webpack = require('webpack');
-const configFactory = require('../config/webpack.config');
-const paths = require('../config/paths');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
-const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
-const printBuildError = require('react-dev-utils/printBuildError');
-
-const measureFileSizesBeforeBuild =
-  FileSizeReporter.measureFileSizesBeforeBuild;
-const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-const useYarn = fs.existsSync(paths.yarnLockFile);
-
-// These sizes are pretty large. We'll warn for bundles exceeding them.
-const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
-
-const isInteractive = process.stdout.isTTY;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-	process.exit(1);
-}
-
-// Generate configuration
-const config = configFactory('production');
-
-// We require that you explicitly set browsers and do not fall back to
-// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
-checkBrowsers(paths.appPath, isInteractive)
-	.then(() => {
-		// First, read the current file sizes in build directory.
-		// This lets us display how much they changed later.
-		return measureFileSizesBeforeBuild(paths.appBuild);
-	})
-	.then(previousFileSizes => {
-		// Remove all content but keep the directory so that
-		// if you're in it, you don't end up in Trash
-		fs.emptyDirSync(paths.appBuild);
-		// Merge with the public folder
-		copyPublicFolder();
-		// Start the webpack build
-		return build(previousFileSizes);
-	})
-	.then(
-		({ stats, previousFileSizes, warnings }) => {
-			if (warnings.length) {
-				console.log(chalk.yellow('Compiled with warnings.\n'));
-				console.log(warnings.join('\n\n'));
-				console.log(
-					`\nSearch for the ${
-						chalk.underline(chalk.yellow('keywords'))
-					} to learn more about each warning.`
-				);
-				console.log(
-					`To ignore, add ${
-						chalk.cyan('// eslint-disable-next-line')
-					} to the line before.\n`
-				);
-			} else {
-				console.log(chalk.green('Compiled successfully.\n'));
-			}
-
-			console.log('File sizes after gzip:\n');
-			printFileSizesAfterBuild(
-				stats,
-				previousFileSizes,
-				paths.appBuild,
-				WARN_AFTER_BUNDLE_GZIP_SIZE,
-				WARN_AFTER_CHUNK_GZIP_SIZE
-			);
-			console.log();
-
-			const appPackage = require(paths.appPackageJson);
-			const publicUrl = paths.publicUrl;
-			const publicPath = config.output.publicPath;
-			const buildFolder = path.relative(process.cwd(), paths.appBuild);
-			printHostingInstructions(
-				appPackage,
-				publicUrl,
-				publicPath,
-				buildFolder,
-				useYarn
-			);
-		},
-		err => {
-			const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
-			if (tscCompileOnError) {
-				console.log(
-					chalk.yellow(
-						'Compiled with the following type errors (you may want to check these before deploying your app):\n'
-					)
-				);
-				printBuildError(err);
-			} else {
-				console.log(chalk.red('Failed to compile.\n'));
-				printBuildError(err);
-				process.exit(1);
-			}
-		}
-	)
-	.catch(err => {
-		if (err && err.message) {
-			console.log(err.message);
-		}
-		process.exit(1);
-	});
-
-// Create the production build and print the deployment instructions.
-function build(previousFileSizes) {
-	// We used to support resolving modules according to `NODE_PATH`.
-	// This now has been deprecated in favor of jsconfig/tsconfig.json
-	// This lets you use absolute paths in imports inside large monorepos:
-	if (process.env.NODE_PATH) {
-		console.log(
-			chalk.yellow(
-				'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
-			)
-		);
-		console.log();
-	}
-
-	console.log('Creating an optimized production build...');
-
-	const compiler = webpack(config);
-	return new Promise((resolve, reject) => {
-		compiler.run((err, stats) => {
-			let messages;
-			if (err) {
-				if (!err.message) {
-					return reject(err);
-				}
-
-				let errMessage = err.message;
-
-				// Add additional information for postcss errors
-				if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
-					errMessage +=
-            `\nCompileError: Begins at CSS selector ${
-            	err['postcssNode'].selector}`;
-				}
-
-				messages = formatWebpackMessages({
-					errors: [errMessage],
-					warnings: [],
-				});
-			} else {
-				messages = formatWebpackMessages(
-					stats.toJson({ all: false, warnings: true, errors: true })
-				);
-			}
-			if (messages.errors.length) {
-				// Only keep the first error. Others are often indicative
-				// of the same problem, but confuse the reader with noise.
-				if (messages.errors.length > 1) {
-					messages.errors.length = 1;
-				}
-				return reject(new Error(messages.errors.join('\n\n')));
-			}
-			if (
-				process.env.CI &&
-        (typeof process.env.CI !== 'string' ||
-          process.env.CI.toLowerCase() !== 'false') &&
-        messages.warnings.length
-			) {
-				console.log(
-					chalk.yellow(
-						'\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n'
-					)
-				);
-				return reject(new Error(messages.warnings.join('\n\n')));
-			}
-
-			return resolve({
-				stats,
-				previousFileSizes,
-				warnings: messages.warnings,
-			});
-		});
-	});
-}
-
-function copyPublicFolder() {
-	fs.copySync(paths.appPublic, paths.appBuild, {
-		dereference: true,
-		filter: file => file !== paths.appHtml,
-	});
-}

packages/app-clipper/popup/scripts/start.js

@@ -1,146 +0,0 @@
-'use strict';
-
-/* eslint-disable no-console */
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-// Ensure environment variables are read.
-require('../config/env');
-
-
-const fs = require('fs');
-const chalk = require('react-dev-utils/chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const {
-	choosePort,
-	createCompiler,
-	prepareProxy,
-	prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const paths = require('../config/paths');
-const configFactory = require('../config/webpack.config');
-const createDevServerConfig = require('../config/webpackDevServer.config');
-
-const useYarn = fs.existsSync(paths.yarnLockFile);
-const isInteractive = process.stdout.isTTY;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-	process.exit(1);
-}
-
-// Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
-
-if (process.env.HOST) {
-	console.log(
-		chalk.cyan(
-			`Attempting to bind to HOST environment variable: ${chalk.yellow(
-				chalk.bold(process.env.HOST),
-			)}`,
-		),
-	);
-	console.log(
-		'If this was unintentional, check that you haven\'t mistakenly set it in your shell.',
-	);
-	console.log(
-		`Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`,
-	);
-	console.log();
-}
-
-// We require that you explicitly set browsers and do not fall back to
-// browserslist defaults.
-const { checkBrowsers } = require('react-dev-utils/browsersHelper');
-checkBrowsers(paths.appPath, isInteractive)
-	.then(() => {
-		// We attempt to use the default port but if it is busy, we offer the user to
-		// run on a different port. `choosePort()` Promise resolves to the next free port.
-		return choosePort(HOST, DEFAULT_PORT);
-	})
-	.then(port => {
-		if (!port) {
-			// We have not found a port.
-			return;
-		}
-		const config = configFactory('development');
-		const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-		const appName = require(paths.appPackageJson).name;
-		const useTypeScript = fs.existsSync(paths.appTsConfig);
-		const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
-		const urls = prepareUrls(protocol, HOST, port);
-		const devSocket = {
-			warnings: warnings =>
-				devServer.sockWrite(devServer.sockets, 'warnings', warnings),
-			errors: errors =>
-				devServer.sockWrite(devServer.sockets, 'errors', errors),
-		};
-		// Create a webpack compiler that is configured with custom messages.
-		const compiler = createCompiler({
-			appName,
-			config,
-			devSocket,
-			urls,
-			useYarn,
-			useTypeScript,
-			tscCompileOnError,
-			webpack,
-		});
-		// Load proxy config
-		const proxySetting = require(paths.appPackageJson).proxy;
-		const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
-		// Serve webpack assets generated by the compiler over a web server.
-		const serverConfig = createDevServerConfig(
-			proxyConfig,
-			urls.lanUrlForConfig,
-		);
-		const devServer = new WebpackDevServer(compiler, serverConfig);
-		// Launch WebpackDevServer.
-		devServer.listen(port, HOST, error => {
-			if (error) {
-				return console.log(error);
-			}
-			if (isInteractive) {
-				clearConsole();
-			}
-
-			// We used to support resolving modules according to `NODE_PATH`.
-			// This now has been deprecated in favor of jsconfig/tsconfig.json
-			// This lets you use absolute paths in imports inside large monorepos:
-			if (process.env.NODE_PATH) {
-				console.log(
-					chalk.yellow(
-						'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.',
-					),
-				);
-				console.log();
-			}
-
-			console.log(chalk.cyan('Starting the development server...\n'));
-			openBrowser(urls.localUrlForBrowser);
-		});
-
-		// eslint-disable-next-line github/array-foreach -- Old code before rule was applied
-		['SIGINT', 'SIGTERM'].forEach((sig) => {
-			process.on(sig, () => {
-				devServer.close();
-				process.exit();
-			});
-		});
-	})
-	.catch(error => {
-		if (error && error.message) {
-			console.log(error.message);
-		}
-		process.exit(1);
-	});

packages/app-clipper/popup/scripts/test.js

@@ -1,49 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'test';
-process.env.NODE_ENV = 'test';
-process.env.PUBLIC_URL = '';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-// Ensure environment variables are read.
-require('../config/env');
-
-
-const jest = require('jest');
-const execSync = require('child_process').execSync;
-const argv = process.argv.slice(2);
-
-function isInGitRepository() {
-	try {
-		execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
-		return true;
-	} catch (e) {
-		return false;
-	}
-}
-
-function isInMercurialRepository() {
-	try {
-		execSync('hg --cwd . root', { stdio: 'ignore' });
-		return true;
-	} catch (e) {
-		return false;
-	}
-}
-
-// Watch unless on CI or explicitly running all tests
-if (
-	!process.env.CI &&
-  argv.indexOf('--watchAll') === -1 &&
-  argv.indexOf('--watchAll=false') === -1
-) {
-	// https://github.com/facebook/create-react-app/issues/5210
-	const hasSourceControl = isInGitRepository() || isInMercurialRepository();
-	argv.push(hasSourceControl ? '--watch' : '--watchAll');
-}
-
-
-jest.run(argv);

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

@@ -179,6 +179,7 @@ class AppComponent extends Component {
 	}
 
 	async loadContentScripts() {
+		await bridge().tabsExecuteScript({ file: '/content_scripts/setUpEnvironment.js' });
 		await bridge().tabsExecuteScript({ file: '/content_scripts/JSDOMParser.js' });
 		await bridge().tabsExecuteScript({ file: '/content_scripts/Readability.js' });
 		await bridge().tabsExecuteScript({ file: '/content_scripts/Readability-readerable.js' });

packages/app-clipper/popup/webpack.config.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = (env, argv) => ({
+	entry: './src/index.js',
+	output: {
+		filename: 'index.js',
+		path: path.resolve(__dirname, 'build'),
+	},
+	plugins: [
+		new HtmlWebpackPlugin({
+			template: './public/index.html',
+		}),
+	],
+	// Avoid the default 'eval-source-map' -- Chrome seems to prevent usage of eval
+	// in popups.
+	devtool: argv.mode === 'development' ? 'cheap-source-map' : undefined,
+	module: {
+		rules: [
+			{
+				test: /\.(?:js|mjs|cjs)$/i,
+				exclude: /node_modules/,
+				use: {
+					loader: 'babel-loader',
+					options: {
+						presets: [
+							['@babel/preset-react'],
+						],
+					},
+				},
+			},
+			{
+				test: /\.css$/i,
+				use: ['style-loader', 'css-loader'],
+			},
+			{
+				test: /.png$/i,
+				type: 'asset/inline',
+			},
+		],
+	},
+});

packages/app-desktop/app.ts

@@ -22,7 +22,6 @@ import stateToWhenClauseContext from './services/commands/stateToWhenClauseConte
 import ResourceService from '@joplin/lib/services/ResourceService';
 import ExternalEditWatcher from '@joplin/lib/services/ExternalEditWatcher';
 import appReducer, { createAppDefaultState } from './app.reducer';
-const { FoldersScreenUtils } = require('@joplin/lib/folders-screen-utils.js');
 import Folder from '@joplin/lib/models/Folder';
 import Tag from '@joplin/lib/models/Tag';
 import { reg } from '@joplin/lib/registry';
@@ -65,13 +64,14 @@ import { AppState } from './app.reducer';
 import syncDebugLog from '@joplin/lib/services/synchronizer/syncDebugLog';
 import eventManager, { EventName } from '@joplin/lib/eventManager';
 import path = require('path');
-import { checkPreInstalledDefaultPlugins, installDefaultPlugins, setSettingsForDefaultPlugins } from '@joplin/lib/services/plugins/defaultPlugins/defaultPluginsUtils';
+import { afterDefaultPluginsLoaded, loadAndRunDefaultPlugins } from '@joplin/lib/services/plugins/defaultPlugins/defaultPluginsUtils';
 import userFetcher, { initializeUserFetcher } from '@joplin/lib/utils/userFetcher';
 import { parseNotesParent } from '@joplin/lib/reducer';
 import OcrService from '@joplin/lib/services/ocr/OcrService';
 import OcrDriverTesseract from '@joplin/lib/services/ocr/drivers/OcrDriverTesseract';
-import SearchEngine from '@joplin/lib/services/searchengine/SearchEngine';
+import SearchEngine from '@joplin/lib/services/search/SearchEngine';
 import { PackageInfo } from '@joplin/lib/versionInfo';
+import { refreshFolders } from '@joplin/lib/folders-screen-utils';
 
 const pluginClasses = [
 	require('./plugins/GotoAnything').default,
@@ -277,7 +277,6 @@ class Application extends BaseApplication {
 		const pluginRunner = new PluginRunner();
 		service.initialize(packageInfo.version, PlatformImplementation.instance(), pluginRunner, this.store());
 		service.isSafeMode = Setting.value('isSafeMode');
-		const defaultPluginsId = Object.keys(getDefaultPluginsInfo());
 
 		let pluginSettings = service.unserializePluginSettings(Setting.value('plugins.states'));
 		{
@@ -285,15 +284,11 @@ class Application extends BaseApplication {
 			// time, however we only effectively uninstall the plugin the next
 			// time the app is started. What plugin should be uninstalled is
 			// stored in the settings.
-			const newSettings = service.clearUpdateState(await service.uninstallPlugins(pluginSettings));
-			Setting.setValue('plugins.states', newSettings);
+			pluginSettings = service.clearUpdateState(await service.uninstallPlugins(pluginSettings));
+			Setting.setValue('plugins.states', pluginSettings);
 		}
 
-		checkPreInstalledDefaultPlugins(defaultPluginsId, pluginSettings);
-
 		try {
-			const defaultPluginsDir = path.join(bridge().buildDir(), 'defaultPlugins');
-			pluginSettings = await installDefaultPlugins(service, defaultPluginsDir, defaultPluginsId, pluginSettings);
 			if (await shim.fsDriver().exists(Setting.value('pluginDir'))) {
 				await service.loadAndRunPlugins(Setting.value('pluginDir'), pluginSettings);
 			}
@@ -302,19 +297,31 @@ class Application extends BaseApplication {
 		}
 
 		try {
+			const devPluginOptions = { devMode: true, builtIn: false };
+
 			if (Setting.value('plugins.devPluginPaths')) {
 				const paths = Setting.value('plugins.devPluginPaths').split(',').map((p: string) => p.trim());
-				await service.loadAndRunPlugins(paths, pluginSettings, true);
+				await service.loadAndRunPlugins(paths, pluginSettings, devPluginOptions);
 			}
 
 			// Also load dev plugins that have passed via command line arguments
 			if (Setting.value('startupDevPlugins')) {
-				await service.loadAndRunPlugins(Setting.value('startupDevPlugins'), pluginSettings, true);
+				await service.loadAndRunPlugins(Setting.value('startupDevPlugins'), pluginSettings, devPluginOptions);
 			}
 		} catch (error) {
 			this.logger().error(`There was an error loading plugins from ${Setting.value('plugins.devPluginPaths')}:`, error);
 		}
 
+		// Load default plugins after loading other plugins -- this allows users
+		// to override built-in plugins with development versions with the same
+		// ID.
+		const defaultPluginsDir = path.join(bridge().buildDir(), 'defaultPlugins');
+		try {
+			pluginSettings = await loadAndRunDefaultPlugins(service, defaultPluginsDir, getDefaultPluginsInfo(), pluginSettings);
+		} catch (error) {
+			this.logger().error(`There was an error loading plugins from ${defaultPluginsDir}:`, error);
+		}
+
 		{
 			// Users can potentially delete files from /plugins or even delete
 			// the complete folder. When that happens, we still have the plugin
@@ -322,7 +329,7 @@ class Application extends BaseApplication {
 			// out we remove from the state any plugin that has *not* been loaded
 			// above (meaning the file was missing).
 			// https://github.com/laurent22/joplin/issues/5253
-			const oldSettings = service.unserializePluginSettings(Setting.value('plugins.states'));
+			const oldSettings = pluginSettings;
 			const newSettings: PluginSettings = {};
 			for (const pluginId of Object.keys(oldSettings)) {
 				if (!service.pluginIds.includes(pluginId)) {
@@ -332,6 +339,7 @@ class Application extends BaseApplication {
 				newSettings[pluginId] = oldSettings[pluginId];
 			}
 			Setting.setValue('plugins.states', newSettings);
+			pluginSettings = newSettings;
 		}
 
 		this.checkAllPluginStartedIID_ = setInterval(() => {
@@ -346,7 +354,7 @@ class Application extends BaseApplication {
 				// tests to wait for plugins to load.
 				ipcRenderer.send('startup-plugins-loaded');
 
-				setSettingsForDefaultPlugins(getDefaultPluginsInfo());
+				void afterDefaultPluginsLoaded(service.plugins, getDefaultPluginsInfo(), pluginSettings);
 			}
 		}, 500);
 	}
@@ -474,7 +482,7 @@ class Application extends BaseApplication {
 		// manually call dispatchUpdateAll() to force an update.
 		Setting.dispatchUpdateAll();
 
-		await FoldersScreenUtils.refreshFolders();
+		await refreshFolders((action: any) => this.dispatch(action));
 
 		const tags = await Tag.allWithNotes();
 

packages/app-desktop/commands/index.ts

@@ -1,4 +1,4 @@
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`
 import * as copyDevCommand from './copyDevCommand';
 import * as editProfileConfig from './editProfileConfig';
 import * as exportFolders from './exportFolders';
@@ -16,7 +16,7 @@ import * as switchProfile3 from './switchProfile3';
 import * as toggleExternalEditing from './toggleExternalEditing';
 import * as toggleSafeMode from './toggleSafeMode';
 
-const index:any[] = [
+const index: any[] = [
 	copyDevCommand,
 	editProfileConfig,
 	exportFolders,
@@ -36,4 +36,4 @@ const index:any[] = [
 ];
 
 export default index;
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`

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

@@ -15,9 +15,6 @@ import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
 import * as shared from '@joplin/lib/components/shared/config/config-shared.js';
 import ClipperConfigScreen from '../ClipperConfigScreen';
 import restart from '../../services/restart';
-import PluginService from '@joplin/lib/services/plugins/PluginService';
-import { getDefaultPluginsInstallState, updateDefaultPluginsInstallState } from '@joplin/lib/services/plugins/defaultPlugins/defaultPluginsUtils';
-import getDefaultPluginsInfo from '@joplin/lib/services/plugins/defaultPlugins/desktopDefaultPluginsInfo';
 import JoplinCloudConfigScreen from '../JoplinCloudConfigScreen';
 import ToggleAdvancedSettingsButton from './controls/ToggleAdvancedSettingsButton';
 import shouldShowMissingPasswordWarning from '@joplin/lib/components/shared/config/shouldShowMissingPasswordWarning';
@@ -74,7 +71,6 @@ class ConfigScreenComponent extends React.Component<any, any> {
 				this.switchSection(this.props.defaultSection);
 			});
 		}
-		updateDefaultPluginsInstallState(getDefaultPluginsInstallState(PluginService.instance(), Object.keys(getDefaultPluginsInfo())), this);
 	}
 
 	private async handleSettingButton(key: string) {

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

@@ -43,6 +43,7 @@ function manifestToItem(manifest: PluginManifest): PluginItem {
 		enabled: true,
 		deleted: false,
 		devMode: false,
+		builtIn: false,
 		hasBeenUpdated: false,
 	};
 }
@@ -52,6 +53,7 @@ export interface PluginItem {
 	enabled: boolean;
 	deleted: boolean;
 	devMode: boolean;
+	builtIn: boolean;
 	hasBeenUpdated: boolean;
 }
 
@@ -184,7 +186,10 @@ export default function(props: Props) {
 	}
 
 	function renderDeleteButton() {
+		// Built-in plugins can only be disabled
+		if (item.builtIn) return null;
 		if (!props.onDelete) return null;
+
 		return <Button level={ButtonLevel.Secondary} onClick={() => props.onDelete({ item })} title={_('Delete')}/>;
 	}
 
@@ -221,8 +226,7 @@ export default function(props: Props) {
 	}
 
 	const renderDefaultPluginLabel = () => {
-		// Built-in plugins can only be disabled
-		if (item.manifest._built_in) {
+		if (item.builtIn) {
 			return (
 				<BoxedLabel>{_('Built in')}</BoxedLabel>
 			);

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

@@ -81,6 +81,7 @@ function usePluginItems(plugins: Plugins, settings: PluginSettings): PluginItem[
 				enabled: setting.enabled,
 				deleted: setting.deleted,
 				devMode: plugin.devMode,
+				builtIn: plugin.builtIn,
 				hasBeenUpdated: setting.hasBeenUpdated,
 			});
 		}
@@ -149,8 +150,8 @@ export default function(props: Props) {
 		async function fetchPluginIds() {
 			// Built-in plugins can't be updated from the main repoApi
 			const nonDefaultPlugins = pluginItems
-				.map(p => p.manifest)
-				.filter(manifest => !manifest._built_in);
+				.filter(plugin => !plugin.builtIn)
+				.map(p => p.manifest);
 
 			const pluginIds = await repoApi().canBeUpdatedPlugins(nonDefaultPlugins, pluginService.appVersion);
 			if (cancelled) return;
@@ -288,8 +289,8 @@ export default function(props: Props) {
 				</UserPluginsRoot>
 			);
 		} else {
-			const nonDefaultPlugins = pluginItems.filter(item => !item.manifest._built_in);
-			const defaultPlugins = pluginItems.filter(item => item.manifest._built_in);
+			const nonDefaultPlugins = pluginItems.filter(item => !item.builtIn);
+			const defaultPlugins = pluginItems.filter(item => item.builtIn);
 			return (
 				<>
 					<UserPluginsRoot>

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

@@ -63,8 +63,6 @@ export default function(props: Props) {
 			const folder: FolderEntity = {
 				title: folderTitle,
 				icon: Folder.serializeIcon(folderIcon),
-				is_shared: 0,
-				share_id: '',
 			};
 
 			if (!isNew) folder.id = props.folderId;

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

@@ -1,4 +1,4 @@
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`
 import * as addProfile from './addProfile';
 import * as commandPalette from './commandPalette';
 import * as deleteFolder from './deleteFolder';
@@ -44,7 +44,7 @@ import * as togglePerFolderSortOrder from './togglePerFolderSortOrder';
 import * as toggleSideBar from './toggleSideBar';
 import * as toggleVisiblePanes from './toggleVisiblePanes';
 
-const index:any[] = [
+const index: any[] = [
 	addProfile,
 	commandPalette,
 	deleteFolder,
@@ -92,4 +92,4 @@ const index:any[] = [
 ];
 
 export default index;
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`

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

@@ -7,7 +7,9 @@ import { useMemo } from 'react';
 
 const useStyles = (props: NoteBodyEditorProps) => {
 	return useMemo(() => {
-		return buildStyle(['CodeMirror', props.fontSize], props.themeId, (theme: Theme) => {
+		return buildStyle([
+			'CodeMirror', props.fontSize, props.contentMaxWidth,
+		], props.themeId, (theme: Theme) => {
 			return {
 				root: {
 					position: 'relative',
@@ -70,6 +72,7 @@ const useStyles = (props: NoteBodyEditorProps) => {
 				// CM6 only
 				globalTheme: {
 					...theme,
+					contentMaxWidth: props.contentMaxWidth ? `${props.contentMaxWidth}px` : undefined,
 					fontFamily: 'inherit',
 					fontSize: props.fontSize,
 					fontSizeUnits: 'px',
@@ -77,6 +80,6 @@ const useStyles = (props: NoteBodyEditorProps) => {
 				},
 			};
 		});
-	}, [props.style, props.themeId, props.fontSize]);
+	}, [props.style, props.themeId, props.fontSize, props.contentMaxWidth]);
 };
 export default useStyles;

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

@@ -621,7 +621,6 @@ function CodeMirror(props: NoteBodyEditorProps, ref: ForwardedRef<NoteBodyEditor
 				resourceInfos: props.resourceInfos,
 				contentMaxWidth: props.contentMaxWidth,
 				mapsToLine: true,
-				// Always using useCustomPdfViewer for now, we can add a new setting for it in future if we need to.
 				useCustomPdfViewer: props.useCustomPdfViewer,
 				noteId: props.noteId,
 				vendorDir: bridge().vendorDir(),

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

@@ -14,7 +14,7 @@ import { _, closestSupportedLocale } from '@joplin/lib/locale';
 import useContextMenu from './utils/useContextMenu';
 import { copyHtmlToClipboard } from '../../utils/clipboardUtils';
 import shim from '@joplin/lib/shim';
-import { MarkupToHtml } from '@joplin/renderer';
+import { MarkupLanguage, MarkupToHtml } from '@joplin/renderer';
 import { reg } from '@joplin/lib/registry';
 import BaseItem from '@joplin/lib/models/BaseItem';
 import setupToolbarButtons from './utils/setupToolbarButtons';
@@ -28,6 +28,9 @@ import { TinyMceEditorEvents } from './utils/types';
 import type { Editor } from 'tinymce';
 import { joplinCommandToTinyMceCommands, TinyMceCommand } from './utils/joplinCommandToTinyMceCommands';
 import shouldPasteResources from './utils/shouldPasteResources';
+import lightTheme from '@joplin/lib/themes/light';
+import { Options as NoteStyleOptions } from '@joplin/renderer/noteStyle';
+const md5 = require('md5');
 const { clipboard } = require('electron');
 const supportedLocales = require('./supportedLocales');
 
@@ -86,8 +89,6 @@ interface LastOnChangeEventInfo {
 	contentKey: string;
 }
 
-let loadedCssFiles_: string[] = [];
-let loadedJsFiles_: string[] = [];
 let dispatchDidUpdateIID_: any = null;
 let changeId_ = 1;
 
@@ -354,6 +355,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 
 	useEffect(() => {
 		const theme = themeStyle(props.themeId);
+		const backgroundColor = props.whiteBackgroundNoteRendering ? lightTheme.backgroundColor : theme.backgroundColor;
 
 		const element = document.createElement('style');
 		element.setAttribute('id', 'tinyMceStyle');
@@ -375,6 +377,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 			.tox .tox-dialog,
 			.tox textarea,
 			.tox input,
+			.tox .tox-menu,
 			.tox .tox-dialog__footer {
 				background-color: ${theme.backgroundColor} !important;
 			}
@@ -383,6 +386,12 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 				color: ${theme.color};
 			}
 
+			.tox .tox-menu {
+				/* Ensures that popover menus (the color swatch menu) has a visible border
+				   even in dark mode. */
+				border: 1px solid rgba(140, 140, 140, 0.3);
+			}
+
 			/*
 			When creating dialogs, TinyMCE doesn't seem to offer a way to style the components or to assign classes to them.
 			We want the code dialog box text area to be monospace, and since we can't target this precisely, we apply the style
@@ -404,6 +413,8 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 
 			.tox .tox-tbtn,
 			.tox .tox-tbtn svg,
+			.tox .tox-menu button > svg,
+			.tox .tox-split-button,
 			.tox .tox-dialog__header,
 			.tox .tox-button--icon .tox-icon svg,
 			.tox .tox-button.tox-button--icon .tox-icon svg,
@@ -425,7 +436,9 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 			}
 
 			.tox .tox-tbtn--enabled,
-			.tox .tox-tbtn--enabled:hover {
+			.tox .tox-tbtn--enabled:hover,
+			.tox .tox-menu button:hover,
+			.tox .tox-split-button {
 				background-color: ${theme.selectedColor};
 			}
 
@@ -433,11 +446,13 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 				background-color: ${theme.backgroundColor} !important;
 			}
 			
-			.tox .tox-tbtn:focus {
+			.tox .tox-tbtn:focus,
+			.tox .tox-split-button:focus {
 				background-color: ${theme.backgroundColor3}
 			}
 			
-			.tox .tox-tbtn:hover {
+			.tox .tox-tbtn:hover,
+			.tox .tox-menu button:hover > svg {
 				color: ${theme.colorHover3} !important;
 				fill: ${theme.colorHover3} !important;
 				background-color: ${theme.backgroundColorHover3}
@@ -468,6 +483,10 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 				background-color: ${theme.backgroundColor3} !important;
 			}
 
+			.tox .tox-split-button:hover {
+				box-shadow: none;
+			}
+
 			.tox-tinymce,
 			.tox .tox-toolbar__group,
 			.tox.tox-tinymce-aux .tox-toolbar__overflow,
@@ -503,7 +522,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 			}
 
 			.joplin-tinymce .tox .tox-edit-area__iframe {
-				background-color: ${theme.backgroundColor} !important;
+				background-color: ${backgroundColor} !important;
 			}
 
 			.joplin-tinymce .tox .tox-toolbar__primary {
@@ -524,7 +543,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 		//
 		// tl;dr: editorReady is used here because the css needs to be re-applied after TinyMCE init
 		// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
-	}, [editorReady, props.themeId]);
+	}, [editorReady, props.themeId, lightTheme, props.whiteBackgroundNoteRendering]);
 
 	// -----------------------------------------------------------------------------------------
 	// Enable or disable the editor
@@ -542,9 +561,6 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 	useEffect(() => {
 		if (!scriptLoaded) return;
 
-		loadedCssFiles_ = [];
-		loadedJsFiles_ = [];
-
 		const loadEditor = async () => {
 			const language = closestSupportedLocale(props.locale, true, supportedLocales);
 
@@ -614,6 +630,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 					joplinSub: { inline: 'sub', remove: 'all' },
 					joplinSup: { inline: 'sup', remove: 'all' },
 					code: { inline: 'code', remove: 'all', attributes: { spellcheck: false } },
+					forecolor: { inline: 'span', styles: { color: '%value' } },
 				},
 				setup: (editor: Editor) => {
 					editor.addCommand('joplinAttach', () => {
@@ -739,13 +756,10 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 	// Set the initial content and load the plugin CSS and JS files
 	// -----------------------------------------------------------------------------------------
 
-	const documentCssElements: Record<string, HTMLLinkElement> = {};
-	const documentScriptElements: Record<string, HTMLScriptElement> = {};
+	const loadDocumentAssets = (themeId: number, editor: any, pluginAssets: any[]) => {
+		const theme = themeStyle(themeId);
 
-	const loadDocumentAssets = (editor: any, pluginAssets: any[]) => {
-		const theme = themeStyle(props.themeId);
-
-		let docHead_: any = null;
+		let docHead_: HTMLHeadElement = null;
 
 		function docHead() {
 			if (docHead_) return docHead_;
@@ -768,58 +782,55 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 				.map((a: any) => a.path),
 		);
 
+		const filePathToElementId = (path: string) => {
+			return `jop-tiny-mce-${md5(escape(path))}`;
+		};
+
+		const existingElements = Array.from(docHead().getElementsByClassName('jop-tinymce-css')).concat(Array.from(docHead().getElementsByClassName('jop-tinymce-js')));
+
+		const existingIds: string[] = [];
+		for (const e of existingElements) existingIds.push(e.getAttribute('id'));
+
+		const processedIds: string[] = [];
+
+		for (const cssFile of allCssFiles) {
+			const elementId = filePathToElementId(cssFile);
+			processedIds.push(elementId);
+			if (existingIds.includes(elementId)) continue;
+
+			const style = editor.dom.create('link', {
+				id: elementId,
+				rel: 'stylesheet',
+				type: 'text/css',
+				href: cssFile,
+				class: 'jop-tinymce-css',
+			});
+
+			docHead().appendChild(style);
+		}
+
+		for (const jsFile of allJsFiles) {
+			const elementId = filePathToElementId(jsFile);
+			processedIds.push(elementId);
+			if (existingIds.includes(elementId)) continue;
+
+			const script = editor.dom.create('script', {
+				id: filePathToElementId(jsFile),
+				type: 'text/javascript',
+				class: 'jop-tinymce-js',
+				src: jsFile,
+			});
+
+			docHead().appendChild(script);
+		}
 
 		// Remove all previously loaded files that aren't in the assets this time.
 		// Note: This is important to ensure that we properly change themes.
 		// See https://github.com/laurent22/joplin/issues/8520
-		for (const cssFile of loadedCssFiles_) {
-			if (!allCssFiles.includes(cssFile)) {
-				documentCssElements[cssFile]?.remove();
-				delete documentCssElements[cssFile];
-			}
-		}
-
-		for (const jsFile of loadedJsFiles_) {
-			if (!allJsFiles.includes(jsFile)) {
-				documentScriptElements[jsFile]?.remove();
-				delete documentScriptElements[jsFile];
-			}
-		}
-
-		const newCssFiles = allCssFiles.filter((path: string) => !loadedCssFiles_.includes(path));
-		const newJsFiles = allJsFiles.filter((path: string) => !loadedJsFiles_.includes(path));
-
-		loadedCssFiles_ = allCssFiles;
-		loadedJsFiles_ = allJsFiles;
-
-		// console.info('loadDocumentAssets: files to load', cssFiles, jsFiles);
-
-		if (newCssFiles.length) {
-			for (const cssFile of newCssFiles) {
-				const style = editor.dom.create('link', {
-					rel: 'stylesheet',
-					type: 'text/css',
-					href: cssFile,
-					class: 'jop-tinymce-css',
-				});
-
-				documentCssElements[cssFile] = style;
-				docHead().appendChild(style);
-			}
-		}
-
-		if (newJsFiles.length) {
-			const editorElementId = editor.dom.uniqueId();
-
-			for (const jsFile of newJsFiles) {
-				const script = editor.dom.create('script', {
-					id: editorElementId,
-					type: 'text/javascript',
-					src: jsFile,
-				});
-
-				documentScriptElements[jsFile] = script;
-				docHead().appendChild(script);
+		for (const existingId of existingIds) {
+			if (!processedIds.includes(existingId)) {
+				const element = existingElements.find(e => e.getAttribute('id') === existingId);
+				if (element) docHead().removeChild(element);
 			}
 		}
 	};
@@ -898,7 +909,14 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 				};
 			}
 
-			await loadDocumentAssets(editor, await props.allAssets(props.contentMarkupLanguage, { contentMaxWidthTarget: '.mce-content-body' }));
+			const allAssetsOptions: NoteStyleOptions = {
+				contentMaxWidthTarget: '.mce-content-body',
+				themeId: props.contentMarkupLanguage === MarkupLanguage.Html ? 1 : null,
+				whiteBackgroundNoteRendering: props.whiteBackgroundNoteRendering,
+			};
+
+			const allAssets = await props.allAssets(props.contentMarkupLanguage, allAssetsOptions);
+			await loadDocumentAssets(props.themeId, editor, allAssets);
 
 			dispatchDidUpdate(editor);
 		};
@@ -909,7 +927,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.markupToHtml, props.allAssets, props.content, props.resourceInfos, props.contentKey]);
+	}, [editor, props.themeId, props.markupToHtml, props.allAssets, props.content, props.resourceInfos, props.contentKey, props.contentMarkupLanguage, props.whiteBackgroundNoteRendering]);
 
 	useEffect(() => {
 		if (!editor) return () => {};
@@ -1036,7 +1054,15 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 			//
 			// Any maybe others, so to catch them all we only check the prefix
 
-			const changeCommands = ['mceBlockQuote', 'ToggleJoplinChecklistItem', 'Bold', 'Italic', 'Underline', 'Paragraph'];
+			const changeCommands = [
+				'mceBlockQuote',
+				'ToggleJoplinChecklistItem',
+				'Bold',
+				'Italic',
+				'Underline',
+				'Paragraph',
+				'mceApplyTextcolor',
+			];
 
 			if (
 				changeCommands.includes(c) ||

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

@@ -60,6 +60,9 @@ export default function(editor: any) {
 
 	const items: string[] = definitions.filter(d => !!d.grouped).map(d => d.name);
 
+	// Additional built-in buttons to show in the formatting sub-menu:
+	items.push('forecolor');
+
 	editor.ui.registry.addGroupToolbarButton('formattingExtras', {
 		icon: 'image-options',
 		items: items.join(' '),

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

@@ -50,6 +50,7 @@ import CodeMirror6 from './NoteBody/CodeMirror/v6/CodeMirror';
 import CodeMirror5 from './NoteBody/CodeMirror/v5/CodeMirror';
 import { openItemById } from './utils/contextMenu';
 import { namespacedKey } from '@joplin/lib/services/plugins/api/JoplinSettings';
+import { MarkupLanguage } from '@joplin/renderer';
 
 const commands = [
 	require('./commands/showRevisions'),
@@ -165,8 +166,11 @@ function NoteEditor(props: NoteEditorProps) {
 		return Setting.value(namespacedKey(pluginId, key));
 	}, []);
 
+	const whiteBackgroundNoteRendering = formNote.markup_language === MarkupLanguage.Html;
+
 	const markupToHtml = useMarkupToHtml({
 		themeId: props.themeId,
+		whiteBackgroundNoteRendering,
 		customCss: props.customCss,
 		plugins: props.plugins,
 		settingValue,
@@ -178,7 +182,7 @@ function NoteEditor(props: NoteEditorProps) {
 			...options,
 		};
 
-		const theme = themeStyle(props.themeId);
+		const theme = themeStyle(options.themeId ? options.themeId : props.themeId);
 
 		const markupToHtml = markupLanguageUtils.newMarkupToHtml({}, {
 			resourceBaseUrl: `file://${Setting.value('resourceDir')}/`,
@@ -188,6 +192,7 @@ function NoteEditor(props: NoteEditorProps) {
 		return markupToHtml.allAssets(markupLanguage, theme, {
 			contentMaxWidth: props.contentMaxWidth,
 			contentMaxWidthTarget: options.contentMaxWidthTarget,
+			whiteBackgroundNoteRendering: options.whiteBackgroundNoteRendering,
 		});
 	}, [props.themeId, props.customCss, props.contentMaxWidth]);
 
@@ -433,6 +438,7 @@ function NoteEditor(props: NoteEditorProps) {
 		ref: editorRef,
 		contentKey: formNote.id,
 		style: styles.tinyMCE,
+		whiteBackgroundNoteRendering,
 		onChange: onBodyChange,
 		onWillChange: onBodyWillChange,
 		onMessage: onMessage,

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

@@ -1,11 +1,11 @@
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`
 import * as focusElementNoteBody from './focusElementNoteBody';
 import * as focusElementNoteTitle from './focusElementNoteTitle';
 import * as pasteAsText from './pasteAsText';
 import * as showLocalSearch from './showLocalSearch';
 import * as showRevisions from './showRevisions';
 
-const index:any[] = [
+const index: any[] = [
 	focusElementNoteBody,
 	focusElementNoteTitle,
 	pasteAsText,
@@ -14,4 +14,4 @@ const index:any[] = [
 ];
 
 export default index;
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`

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

@@ -12,6 +12,7 @@ export async function htmlToMarkdown(markupLanguage: number, html: string, origi
 		newBody = htmlToMd.parse(html, {
 			preserveImageTagsWithSize: true,
 			preserveNestedTables: true,
+			preserveColorStyles: true,
 		});
 		newBody = await Note.replaceResourceExternalToInternalLinks(newBody, { useAbsolutePaths: true });
 	} else {

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

@@ -5,10 +5,12 @@ import { MarkupLanguage } from '@joplin/renderer';
 import { RenderResult, RenderResultPluginAsset } from '@joplin/renderer/MarkupToHtml';
 import { MarkupToHtmlOptions } from './useMarkupToHtml';
 import { Dispatch } from 'redux';
-import { ProcessResultsRow } from '@joplin/lib/services/searchengine/SearchEngine';
+import { ProcessResultsRow } from '@joplin/lib/services/search/SearchEngine';
 
 export interface AllAssetsOptions {
 	contentMaxWidthTarget?: string;
+	themeId?: number;
+	whiteBackgroundNoteRendering?: boolean;
 }
 
 export interface ToolbarButtonInfos {
@@ -63,6 +65,14 @@ export interface NoteBodyEditorProps {
 	style: any;
 	ref: any;
 	themeId: number;
+
+	// When this is true it means the note must always be rendered using a white
+	// background theme. This applies to the Markdown editor note view, and to
+	// the RTE. It does not apply to other elements such as the toolbar, dialogs
+	// or the CodeMirror editor. This is used to correctly render HTML notes and
+	// avoid cases where black text is rendered over a dark background.
+	whiteBackgroundNoteRendering: boolean;
+
 	content: string;
 	contentKey: string;
 	contentMarkupLanguage: number;

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

@@ -13,6 +13,7 @@ interface HookDependencies {
 	customCss: string;
 	plugins: PluginStates;
 	settingValue: (pluginId: string, key: string)=> any;
+	whiteBackgroundNoteRendering: boolean;
 }
 
 export interface MarkupToHtmlOptions {
@@ -27,13 +28,14 @@ export interface MarkupToHtmlOptions {
 	vendorDir?: string;
 	platformName?: string;
 	allowedFilePrefixes?: string[];
+	whiteBackgroundNoteRendering?: boolean;
 }
 
 export default function useMarkupToHtml(deps: HookDependencies) {
-	const { themeId, customCss, plugins } = deps;
+	const { themeId, customCss, plugins, whiteBackgroundNoteRendering } = deps;
 
 	const markupToHtml = useMemo(() => {
-		return markupLanguageUtils.newMarkupToHtml(deps.plugins, {
+		return markupLanguageUtils.newMarkupToHtml(plugins, {
 			resourceBaseUrl: `file://${Setting.value('resourceDir')}/`,
 			customCss: customCss || '',
 		});
@@ -69,10 +71,11 @@ export default function useMarkupToHtml(deps: HookDependencies) {
 			externalAssetsOnly: true,
 			codeHighlightCacheKey: 'useMarkupToHtml',
 			settingValue: deps.settingValue,
+			whiteBackgroundNoteRendering,
 			...options,
 		});
 
 		return result;
 		// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
-	}, [themeId, customCss, markupToHtml]);
+	}, [themeId, customCss, markupToHtml, whiteBackgroundNoteRendering]);
 }

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

@@ -1,9 +1,9 @@
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`
 import * as focusElementNoteList from './focusElementNoteList';
 
-const index:any[] = [
+const index: any[] = [
 	focusElementNoteList,
 ];
 
 export default index;
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`

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

@@ -1,9 +1,9 @@
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`
 import * as focusSearch from './focusSearch';
 
-const index:any[] = [
+const index: any[] = [
 	focusSearch,
 ];
 
 export default index;
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { useEffect, useRef, useCallback, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import shim from '@joplin/lib/shim';
-import { StyledRoot, StyledAddButton, StyledShareIcon, StyledHeader, StyledHeaderIcon, StyledAllNotesIcon, StyledHeaderLabel, StyledListItem, StyledListItemAnchor, StyledExpandLink, StyledNoteCount, StyledSyncReportText, StyledSyncReport, StyledSynchronizeButton } from './styles';
+import { StyledRoot, StyledAddButton, StyledShareIcon, StyledHeader, StyledHeaderIcon, StyledAllNotesIcon, StyledHeaderLabel, StyledListItem, StyledListItemAnchor, StyledExpandLink, StyledNoteCount, StyledSyncReportText, StyledSyncReport, StyledSynchronizeButton, StyledSpanFix } from './styles';
 import { ButtonLevel } from '../Button/Button';
 import CommandService from '@joplin/lib/services/CommandService';
 import InteropService from '@joplin/lib/services/interop/InteropService';
@@ -29,7 +27,7 @@ import FolderIconBox from '../FolderIconBox';
 import { Theme } from '@joplin/lib/themes/type';
 import { RuntimeProps } from './commands/focusElementSideBar';
 const { connect } = require('react-redux');
-const shared = require('@joplin/lib/components/shared/side-menu-shared.js');
+import { renderFolders, renderTags } from '@joplin/lib/components/shared/side-menu-shared';
 const { themeStyle } = require('@joplin/lib/theme');
 const bridge = require('@electron/remote').require('./bridge').default;
 const Menu = bridge().Menu;
@@ -40,15 +38,6 @@ const { clipboard } = require('electron');
 
 const logger = Logger.create('Sidebar');
 
-// Workaround sidebar rendering bug on Linux Intel GPU.
-// https://github.com/laurent22/joplin/issues/7506
-const StyledSpanFix = styled.span`
-	${shim.isLinux() && css`
-		position: relative;
-	`}
-`;
-
-
 interface Props {
 	themeId: number;
 	// eslint-disable-next-line @typescript-eslint/ban-types -- Old code before rule was applied
@@ -715,7 +704,7 @@ const SidebarComponent = (props: Props) => {
 
 	if (props.folders.length) {
 		const allNotesSelected = props.notesParentType === 'SmartFilter' && props.selectedSmartFilterId === ALL_NOTES_FILTER_ID;
-		const result = shared.renderFolders(props, renderFolderItem);
+		const result = renderFolders(props, renderFolderItem);
 		const folderItems = [renderAllNotesItem(theme, allNotesSelected)].concat(result.items);
 		folderItemsOrder_.current = result.order;
 		items.push(
@@ -736,7 +725,7 @@ const SidebarComponent = (props: Props) => {
 	);
 
 	if (props.tags.length) {
-		const result = shared.renderTags(props, renderTag);
+		const result = renderTags(props, renderTag);
 		const tagItems = result.items;
 		tagItemsOrder_.current = result.order;
 

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

@@ -1,9 +1,9 @@
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`
 import * as focusElementSideBar from './focusElementSideBar';
 
-const index:any[] = [
+const index: any[] = [
 	focusElementSideBar,
 ];
 
 export default index;
-// AUTO-GENERATED using `gulp buildCommandIndex`
+// AUTO-GENERATED using `gulp buildScriptIndexes`

packages/app-desktop/gui/Sidebar/styles/index.ts

@@ -1,4 +1,6 @@
+import shim from '@joplin/lib/shim';
 import Button from '../../Button/Button';
+import { css } from 'styled-components';
 const styled = require('styled-components').default;
 
 export const StyledRoot = styled.div`
@@ -132,3 +134,11 @@ export const StyledSyncReportText = styled.div`
 	word-wrap: break-word;
 	width: 100%;
 `;
+
+// Workaround sidebar rendering bug on Linux Intel GPU.
+// https://github.com/laurent22/joplin/issues/7506
+export const StyledSpanFix = styled.span`
+	${shim.isLinux() && css`
+		position: relative;
+	`}
+`;

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

@@ -79,7 +79,7 @@ const SyncTargetBox = styled.div<{ faded: boolean }>`
 	background-color: ${props => props.theme.backgroundColor};
 	border: 1px solid ${props => props.theme.dividerColor};
 	border-radius: 8px;
-	padding: 0.8em 2.2em 2em 2.2em;
+	padding: 2em 2.2em 2em 2.2em;
 	margin-right: 1em;
 	max-width: 400px;
 	opacity: ${props => props.faded ? 0.5 : 1};
@@ -127,6 +127,14 @@ const FormLabel = styled.label`
 	margin: 1em 0 0.6em 0;
 `;
 
+const SlowSyncWarning = styled.div`
+	margin-top: 1em;
+	opacity: 0.8;
+	font-family: ${props => props.theme.fontFamily};
+	color: ${props => props.theme.color};
+	font-size: 14px;
+`;
+
 const syncTargetNames: string[] = [
 	'joplinCloud',
 	'dropbox',
@@ -283,12 +291,18 @@ export default function(props: Props) {
 		const descriptionComp = <SyncTargetDescription height={height} ref={info.name === 'joplinCloud' ? joplinCloudDescriptionRef : null}>{info.description}</SyncTargetDescription>;
 		const featuresComp = showJoplinCloudForm && info.name === 'joplinCloud' ? null : renderFeatures(info.name);
 
+		const renderSlowSyncWarning = () => {
+			if (info.name === 'joplinCloud') return null;
+			return <SlowSyncWarning>{`⚠️ ${_('%s is not optimised for synchronising many small files so your initial synchronisation will be slow.', info.label)}`}</SlowSyncWarning>;
+		};
+
 		return (
 			<SyncTargetBox id={key} key={key} faded={showJoplinCloudForm && info.name !== 'joplinCloud'}>
 				<SyncTargetTitle>{logo}{info.label}</SyncTargetTitle>
 				{descriptionComp}
 				{featuresComp}
 				{renderSelectArea(info)}
+				{renderSlowSyncWarning()}
 			</SyncTargetBox>
 		);
 	}

packages/app-desktop/gulpfile.ts

@@ -39,7 +39,7 @@ const tasks = {
 	},
 	tsc: require('@joplin/tools/gulp/tasks/tsc'),
 	updateIgnoredTypeScriptBuild: require('@joplin/tools/gulp/tasks/updateIgnoredTypeScriptBuild'),
-	buildCommandIndex: require('@joplin/tools/gulp/tasks/buildCommandIndex'),
+	buildScriptIndexes: require('@joplin/tools/gulp/tasks/buildScriptIndexes'),
 	compileSass: {
 		fn: async () => {
 			await compileSass(
@@ -58,7 +58,7 @@ const buildBeforeStartParallel = [
 	'copyPluginAssets',
 	'copyApplicationAssets',
 	'updateIgnoredTypeScriptBuild',
-	'buildCommandIndex',
+	'buildScriptIndexes',
 	'compileSass',
 ];
 

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

@@ -39,6 +39,55 @@ test.describe('main', () => {
 		await expect(viewerFrame.locator('h1')).toHaveText('Test note!');
 	});
 
+	test('mermaid and KaTeX should render', async ({ mainWindow }) => {
+		const mainScreen = new MainScreen(mainWindow);
+		const editor = await mainScreen.createNewNote('🚧 Test 🚧');
+
+		const testCommitId = 'bf59b2';
+		await editor.codeMirrorEditor.click();
+		const noteText = [
+			'```mermaid',
+			'gitGraph',
+			'    commit id: "973193"',
+			`    commit id: "${testCommitId}"`,
+			'    branch dev',
+			'    checkout dev',
+			'    commit id: "ceea77"',
+			'```',
+			'',
+			'',
+			'KaTeX:',
+			'$$ \\int_0^1 \\cos(2x + 3) $$',
+			'',
+			'Sum: $\\sum_{x=0}^{100} \\tan x$',
+		];
+		for (const line of noteText) {
+			if (line) {
+				await mainWindow.keyboard.press('Shift+Tab');
+				await mainWindow.keyboard.type(line);
+			}
+			await mainWindow.keyboard.press('Enter');
+		}
+
+		// Should render mermaid
+		const viewerFrame = editor.getNoteViewerIframe();
+		await expect(
+			viewerFrame.locator('pre.mermaid text', { hasText: testCommitId }),
+		).toBeVisible();
+
+		// Should render KaTeX (block)
+		// toBeAttached: To be added to the DOM.
+		await expect(viewerFrame.locator('.joplin-editable > .katex-display').first()).toBeAttached();
+		await expect(
+			viewerFrame.locator(
+				'.katex-display *', { hasText: 'cos' },
+			).last(),
+		).toBeVisible();
+
+		// Should render KaTeX (inline)
+		await expect(viewerFrame.locator('.joplin-editable > .katex').first()).toBeAttached();
+	});
+
 	test('HTML links should be preserved when editing a note in the WYSIWYG editor', async ({ electronApp, mainWindow }) => {
 		const mainScreen = new MainScreen(mainWindow);
 		await mainScreen.createNewNote('Testing!');

packages/app-desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joplin/app-desktop",
-  "version": "2.14.0",
+  "version": "2.14.9",
   "description": "Joplin for Desktop",
   "main": "main.js",
   "private": true,
@@ -90,6 +90,7 @@
         ]
       },
       "hardenedRuntime": true,
+      "notarize": false,
       "entitlements": "./build-mac/entitlements.mac.inherit.plist",
       "extendInfo": {
         "CFBundleURLTypes": [
@@ -122,12 +123,12 @@
     "@electron/rebuild": "3.3.0",
     "@joplin/default-plugins": "~2.14",
     "@joplin/tools": "~2.14",
-    "@playwright/test": "1.39.0",
+    "@playwright/test": "1.40.1",
     "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "29.5.8",
-    "@types/node": "18.18.13",
-    "@types/react": "18.2.37",
-    "@types/react-redux": "7.1.31",
+    "@types/node": "18.18.14",
+    "@types/react": "18.2.43",
+    "@types/react-redux": "7.1.33",
     "@types/styled-components": "5.1.32",
     "@types/tesseract.js": "2.0.0",
     "electron": "26.5.0",
@@ -139,7 +140,7 @@
     "js-sha512": "0.8.0",
     "nan": "2.18.0",
     "react-test-renderer": "18.2.0",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
     "typescript": "5.2.2"
   },
   "dependencies": {
@@ -160,7 +161,7 @@
     "debounce": "1.2.1",
     "electron-window-state": "5.0.3",
     "formatcoords": "1.1.3",
-    "fs-extra": "11.1.1",
+    "fs-extra": "11.2.0",
     "highlight.js": "11.9.0",
     "immer": "7.0.15",
     "keytar": "7.9.0",
@@ -178,7 +179,7 @@
     "react-datetime": "3.2.0",
     "react-dom": "18.2.0",
     "react-redux": "8.1.3",
-    "react-select": "5.7.7",
+    "react-select": "5.8.0",
     "react-toggle-button": "2.2.0",
     "react-tooltip": "4.5.1",
     "redux": "4.2.1",
@@ -189,7 +190,7 @@
     "styled-components": "5.3.11",
     "styled-system": "5.1.5",
     "taboverride": "4.0.3",
-    "tesseract.js": "4.1.4",
+    "tesseract.js": "5.0.4",
     "tinymce": "5.10.6"
   }
 }

packages/app-desktop/plugins/GotoAnything.tsx

@@ -6,8 +6,8 @@ import shim from '@joplin/lib/shim';
 const { connect } = require('react-redux');
 import { _ } from '@joplin/lib/locale';
 import { themeStyle } from '@joplin/lib/theme';
-import SearchEngine from '@joplin/lib/services/searchengine/SearchEngine';
-import gotoAnythingStyleQuery from '@joplin/lib/services/searchengine/gotoAnythingStyleQuery';
+import SearchEngine from '@joplin/lib/services/search/SearchEngine';
+import gotoAnythingStyleQuery from '@joplin/lib/services/search/gotoAnythingStyleQuery';
 import BaseModel, { ModelType } from '@joplin/lib/BaseModel';
 import Tag from '@joplin/lib/models/Tag';
 import Folder from '@joplin/lib/models/Folder';

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

@@ -110,8 +110,8 @@ android {
         applicationId "net.cozic.joplin"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-		versionCode 2097730
-		versionName "2.14.0"
+		versionCode 2097733
+		versionName "2.14.3"
 		ndk {
 			abiFilters "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
 		}

packages/app-mobile/components/ExtendedWebView.tsx

@@ -129,6 +129,9 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 	// to avoid various crashes and errors:
 	// https://github.com/react-native-webview/react-native-webview/issues/2920
 	// https://github.com/react-native-webview/react-native-webview/issues/2995
+	//
+	// decelerationRate='normal' is necessary on iOS for a native-like inertial scroll
+	// (the default deaccelerates too quickly).
 	return (
 		<WebView
 			style={{
@@ -146,10 +149,12 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 			mixedContentMode={props.mixedContentMode}
 			allowFileAccess={true}
 			allowFileAccessFromFileURLs={props.allowFileAccessFromJs}
+			webviewDebuggingEnabled={Setting.value('env') === 'dev'}
 			injectedJavaScript={props.injectedJavaScript}
 			onMessage={props.onMessage}
 			onError={props.onError}
 			onLoadEnd={props.onLoadEnd}
+			decelerationRate='normal'
 		/>
 	);
 };

packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts

@@ -151,12 +151,6 @@ export default function useSource(
 
 			const resourceDownloadMode = Setting.value('sync.resourceDownloadMode');
 
-			// On iOS, the root container has slow inertial scroll, which feels very different from
-			// the native scroll in other apps. This is not the case, however, when a child (e.g. a div)
-			// scrolls the content instead.
-			// Use a div to scroll on iOS instead of the main container:
-			const scrollRenderedMdContainer = shim.mobilePlatform() === 'ios';
-
 			const js = [];
 			js.push('try {');
 			js.push(shim.injectedJs('webviewLib'));
@@ -165,8 +159,7 @@ export default function useSource(
 			js.push('window.joplinPostMessage_ = (msg, args) => { return window.ReactNativeWebView.postMessage(msg); };');
 			js.push('webviewLib.initialize({ postMessage: msg => { return window.ReactNativeWebView.postMessage(msg); } });');
 			js.push(`
-				const scrollingElement =
-					${scrollRenderedMdContainer ? 'document.querySelector("#rendered-md")' : 'document.scrollingElement'};
+				const scrollingElement = document.scrollingElement;
 				let lastScrollTop;
 				const onMainContentScroll = () => {
 					const newScrollTop = scrollingElement.scrollTop;
@@ -232,19 +225,6 @@ export default function useSource(
 						font: -apple-system-body;
 					}
 				}
-
-				:root > body {
-					padding: 0;
-				}
-			`;
-			const scrollRenderedMdContainerCss = `
-				body > #rendered-md {
-					width: 100vw;
-					overflow: auto;
-					height: calc(100vh - ${paddingBottom}px - ${paddingTop});
-					padding-bottom: ${paddingBottom}px;
-					padding-top: ${paddingTop};
-				}
 			`;
 			const defaultCss = `
 				code {
@@ -263,7 +243,6 @@ export default function useSource(
 						<style>
 							${defaultCss}
 							${shim.mobilePlatform() === 'ios' ? iOSSpecificCss : ''}
-							${scrollRenderedMdContainer ? scrollRenderedMdContainerCss : ''}
 							${editPopupCss}
 						</style>
 						${assetsToHeaders(result.pluginAssets, { asHtml: true })}

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

@@ -83,8 +83,14 @@ function useHtml(css: string): string {
 					<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 					<title>${_('Note editor')}</title>
 					<style>
-						.cm-editor {
-							height: 100%;
+						/* For better scrolling on iOS (working scrollbar) we use external, rather than internal,
+						   scrolling. */
+						.cm-scroller {
+							overflow: none;
+
+							/* Ensure that the editor can be foused by clicking on the lower half of the screen.
+							   Don't use 100vh to prevent a scrollbar being present for empty notes. */
+							min-height: 80vh;
 						}
 
 						${css}
@@ -270,6 +276,7 @@ function NoteEditor(props: Props, ref: any) {
 
 	const setInitialSelectionJS = props.initialSelection ? `
 		cm.select(${props.initialSelection.start}, ${props.initialSelection.end});
+		cm.execCommand('scrollSelectionIntoView');
 	` : '';
 
 	const editorSettings: EditorSettings = {
@@ -331,6 +338,7 @@ function NoteEditor(props: Props, ref: any) {
 				const settings = ${JSON.stringify(editorSettings)};
 
 				cm = codeMirrorBundle.initCodeMirror(parentElement, initialText, settings);
+
 				${setInitialSelectionJS}
 
 				window.onresize = () => {
@@ -456,8 +464,6 @@ function NoteEditor(props: Props, ref: any) {
 		readOnly={props.readOnly}
 	/>;
 
-	// - `scrollEnabled` prevents iOS from scrolling the document (has no effect on Android)
-	//    when an editable region (e.g. a the full-screen NoteEditor) is focused.
 	return (
 		<View
 			testID='note-editor-root'
@@ -482,7 +488,7 @@ function NoteEditor(props: Props, ref: any) {
 				<ExtendedWebView
 					webviewInstanceId='NoteEditor'
 					themeId={props.themeId}
-					scrollEnabled={false}
+					scrollEnabled={true}
 					ref={webviewRef}
 					html={html}
 					injectedJavaScript={injectedJavaScript}

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Platform, Linking, View, Switch, ScrollView, Text, TouchableOpacity, Alert, PermissionsAndroid, Dimensions, AccessibilityInfo } from 'react-native';
 import Setting, { AppType, SettingMetadataSection } from '@joplin/lib/models/Setting';
 import NavService from '@joplin/lib/services/NavService';
-import SearchEngine from '@joplin/lib/services/searchengine/SearchEngine';
+import SearchEngine from '@joplin/lib/services/search/SearchEngine';
 import checkPermissions from '../../../utils/checkPermissions';
 import setIgnoreTlsErrors from '../../../utils/TlsUtils';
 import { reg } from '@joplin/lib/registry';

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

@@ -9,7 +9,7 @@ import NoteEditor from '../NoteEditor/NoteEditor';
 import { Size } from '@joplin/utils/types';
 const FileViewer = require('react-native-file-viewer').default;
 const React = require('react');
-import { Keyboard, View, TextInput, StyleSheet, Linking, Image, Share } from 'react-native';
+import { Keyboard, View, TextInput, StyleSheet, Linking, Image, Share, NativeSyntheticEvent } from 'react-native';
 import { Platform, PermissionsAndroid } from 'react-native';
 const { connect } = require('react-redux');
 // const { MarkdownEditor } = require('@joplin/lib/../MarkdownEditor/index.js');
@@ -52,10 +52,11 @@ import isEditableResource from '../NoteEditor/ImageEditor/isEditableResource';
 import VoiceTypingDialog from '../voiceTyping/VoiceTypingDialog';
 import { voskEnabled } from '../../services/voiceTyping/vosk';
 import { isSupportedLanguage } from '../../services/voiceTyping/vosk.android';
-import { ChangeEvent as EditorChangeEvent, UndoRedoDepthChangeEvent } from '@joplin/editor/events';
+import { ChangeEvent as EditorChangeEvent, SelectionRangeChangeEvent, UndoRedoDepthChangeEvent } from '@joplin/editor/events';
 import { join } from 'path';
 import { Dispatch } from 'redux';
 import { RefObject } from 'react';
+import { SelectionRange } from '../NoteEditor/types';
 const urlUtils = require('@joplin/lib/urlUtils');
 
 const emptyArray: any[] = [];
@@ -177,7 +178,7 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 	private noteTagDialog_closeRequested: any;
 	private onJoplinLinkClick_: any;
 	private refreshResource: (resource: any, noteBody?: string)=> Promise<void>;
-	private selection: any;
+	private selection: SelectionRange;
 	private menuOptionsCache_: Record<string, any>;
 	private focusUpdateIID_: any;
 	private folderPickerOptions_: any;
@@ -371,7 +372,6 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 		this.undoRedoService_stackChange = this.undoRedoService_stackChange.bind(this);
 		this.screenHeader_undoButtonPress = this.screenHeader_undoButtonPress.bind(this);
 		this.screenHeader_redoButtonPress = this.screenHeader_redoButtonPress.bind(this);
-		this.body_selectionChange = this.body_selectionChange.bind(this);
 		this.onBodyViewerLoadEnd = this.onBodyViewerLoadEnd.bind(this);
 		this.onBodyViewerCheckboxChange = this.onBodyViewerCheckboxChange.bind(this);
 		this.onBodyChange = this.onBodyChange.bind(this);
@@ -640,13 +640,13 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 		this.scheduleSave();
 	}
 
-	private body_selectionChange(event: any) {
-		if (this.useEditorBeta()) {
-			this.selection = event.selection;
-		} else {
-			this.selection = event.nativeEvent.selection;
-		}
-	}
+	private onPlainEdtiorSelectionChange = (event: NativeSyntheticEvent<any>) => {
+		this.selection = event.nativeEvent.selection;
+	};
+
+	private onMarkdownEditorSelectionChange = (event: SelectionRangeChangeEvent) => {
+		this.selection = { start: event.from, end: event.to };
+	};
 
 	public makeSaveAction() {
 		return async () => {
@@ -1347,7 +1347,9 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 		let fieldToFocus = this.state.note.is_todo ? 'title' : 'body';
 		if (this.state.mode === 'view') fieldToFocus = '';
 
-		if (fieldToFocus === 'title' && this.titleTextFieldRef.current) {
+		// Avoid writing `this.titleTextFieldRef.current` -- titleTextFieldRef may
+		// be undefined.
+		if (fieldToFocus === 'title' && this.titleTextFieldRef?.current) {
 			this.titleTextFieldRef.current.focus();
 		}
 		// if (fieldToFocus === 'body' && this.markdownEditorRef.current) {
@@ -1508,7 +1510,7 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 						multiline={true}
 						value={note.body}
 						onChangeText={(text: string) => this.body_changeText(text)}
-						onSelectionChange={this.body_selectionChange}
+						onSelectionChange={this.onPlainEdtiorSelectionChange}
 						blurOnSubmit={false}
 						selectionColor={theme.textSelectionColor}
 						keyboardAppearance={theme.keyboardAppearance}
@@ -1530,7 +1532,7 @@ class NoteScreenComponent extends BaseScreenComponent<Props, State> implements B
 					initialText={note.body}
 					initialSelection={this.selection}
 					onChange={this.onBodyChange}
-					onSelectionChange={this.body_selectionChange}
+					onSelectionChange={this.onMarkdownEditorSelectionChange}
 					onUndoRedoDepthChange={this.onUndoRedoDepthChange}
 					onAttach={() => this.showAttachMenu()}
 					readOnly={this.state.readOnly}