diff --git a/.eslintignore b/.eslintignore
index 0a9d67706c..277e1f46a3 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -55,6 +55,7 @@ packages/app-desktop/vendor/lib/
 packages/app-mobile/packageInfo.js
 packages/app-mobile/android
 packages/app-mobile/**/*.bundle.js
+packages/app-mobile/**/*.bundle.css
 packages/app-mobile/web/public/pluginAssets/**/*
 packages/app-mobile/ios
 packages/app-mobile/lib/rnInjectedJs/
@@ -74,6 +75,7 @@ packages/lib/services/database/types.ts
 packages/lib/vendor/
 packages/lib/vendor/fountain.min.js
 packages/lib/welcomeAssets.js
+packages/editor/*/vendor/
 packages/plugins/**/api
 packages/plugins/**/dist
 packages/server/dist/
@@ -663,6 +665,7 @@ packages/app-mobile/components/ExtendedWebView/index.jest.js
 packages/app-mobile/components/ExtendedWebView/index.js
 packages/app-mobile/components/ExtendedWebView/index.web.js
 packages/app-mobile/components/ExtendedWebView/types.js
+packages/app-mobile/components/ExtendedWebView/utils/useCss.js
 packages/app-mobile/components/FolderPicker.js
 packages/app-mobile/components/Icon.js
 packages/app-mobile/components/IconButton.js
@@ -671,42 +674,28 @@ packages/app-mobile/components/ModalDialog.js
 packages/app-mobile/components/NestableFlatList.js
 packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.test.js
 packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/Renderer.test.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/Renderer.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/noteBodyViewerBundle.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/types.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/utils/addPluginAssets.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/utils/makeResourceModel.js
-packages/app-mobile/components/NoteBodyViewer/hooks/useContentScripts.js
-packages/app-mobile/components/NoteBodyViewer/hooks/useEditPopup.test.js
-packages/app-mobile/components/NoteBodyViewer/hooks/useEditPopup.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useOnMessage.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useOnResourceLongPress.js
-packages/app-mobile/components/NoteBodyViewer/hooks/useRenderer.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useRerenderHandler.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useSource.js
 packages/app-mobile/components/NoteBodyViewer/types.js
-packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.js
 packages/app-mobile/components/NoteEditor/EditLinkDialog.js
 packages/app-mobile/components/NoteEditor/ImageEditor/ImageEditor.js
 packages/app-mobile/components/NoteEditor/ImageEditor/autosave.js
 packages/app-mobile/components/NoteEditor/ImageEditor/isEditableResource.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/applyTemplateToEditor.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.test.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/polyfills.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/startAutosaveLoop.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/types.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/watchEditorForTemplateChanges.js
 packages/app-mobile/components/NoteEditor/ImageEditor/promptRestoreAutosave.js
-packages/app-mobile/components/NoteEditor/ImageEditor/utils/useEditorMessenger.js
+packages/app-mobile/components/NoteEditor/MarkdownEditor.js
 packages/app-mobile/components/NoteEditor/NoteEditor.test.js
 packages/app-mobile/components/NoteEditor/NoteEditor.js
+packages/app-mobile/components/NoteEditor/RichTextEditor.test.js
+packages/app-mobile/components/NoteEditor/RichTextEditor.js
 packages/app-mobile/components/NoteEditor/SearchPanel.js
+packages/app-mobile/components/NoteEditor/WarningBanner.js
 packages/app-mobile/components/NoteEditor/commandDeclarations.js
 packages/app-mobile/components/NoteEditor/hooks/useCodeMirrorPlugins.js
 packages/app-mobile/components/NoteEditor/hooks/useEditorCommandHandler.test.js
 packages/app-mobile/components/NoteEditor/hooks/useEditorCommandHandler.js
+packages/app-mobile/components/NoteEditor/testing/createTestEditorProps.js
 packages/app-mobile/components/NoteEditor/types.js
 packages/app-mobile/components/NoteItem.js
 packages/app-mobile/components/NoteList.js
@@ -861,6 +850,36 @@ packages/app-mobile/components/voiceTyping/AudioRecordingBanner.js
 packages/app-mobile/components/voiceTyping/RecordingControls.js
 packages/app-mobile/components/voiceTyping/SpeechToTextBanner.js
 packages/app-mobile/components/voiceTyping/types.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/applyTemplateToEditor.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/index.test.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/index.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/startAutosaveLoop.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/types.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/watchEditorForTemplateChanges.js
+packages/app-mobile/contentScripts/imageEditorBundle/useWebViewSetup.js
+packages/app-mobile/contentScripts/imageEditorBundle/utils/useEditorMessenger.js
+packages/app-mobile/contentScripts/markdownEditorBundle/contentScript.js
+packages/app-mobile/contentScripts/markdownEditorBundle/types.js
+packages/app-mobile/contentScripts/markdownEditorBundle/useWebViewSetup.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/Renderer.test.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/Renderer.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/index.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/types.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/addPluginAssets.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/afterFullPageRender.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/makeResourceModel.js
+packages/app-mobile/contentScripts/rendererBundle/types.js
+packages/app-mobile/contentScripts/rendererBundle/useWebViewSetup.js
+packages/app-mobile/contentScripts/rendererBundle/utils/useContentScripts.js
+packages/app-mobile/contentScripts/rendererBundle/utils/useEditPopup.test.js
+packages/app-mobile/contentScripts/rendererBundle/utils/useEditPopup.js
+packages/app-mobile/contentScripts/richTextEditorBundle/contentScript.js
+packages/app-mobile/contentScripts/richTextEditorBundle/types.js
+packages/app-mobile/contentScripts/richTextEditorBundle/useWebViewSetup.js
+packages/app-mobile/contentScripts/types.js
+packages/app-mobile/contentScripts/utils/polyfills.js
+packages/app-mobile/contentScripts/utils/readFileToBase64.js
+packages/app-mobile/contentScripts/utils/setUpLogger.js
 packages/app-mobile/gulpfile.js
 packages/app-mobile/index.web.js
 packages/app-mobile/root.js
@@ -883,7 +902,7 @@ packages/app-mobile/services/voiceTyping/whisper.js
 packages/app-mobile/setupQuickActions.js
 packages/app-mobile/tools/buildInjectedJs/BundledFile.js
 packages/app-mobile/tools/buildInjectedJs/constants.js
-packages/app-mobile/tools/buildInjectedJs/copyJs.js
+packages/app-mobile/tools/buildInjectedJs/copyAssets.js
 packages/app-mobile/tools/buildInjectedJs/gulpTasks.js
 packages/app-mobile/tools/copyAssets.js
 packages/app-mobile/utils/ShareExtension.js
@@ -920,7 +939,6 @@ packages/app-mobile/utils/image/fileToImage.web.js
 packages/app-mobile/utils/image/getImageDimensions.js
 packages/app-mobile/utils/image/resizeImage.js
 packages/app-mobile/utils/initializeCommandService.js
-packages/app-mobile/utils/injectedJs.js
 packages/app-mobile/utils/ipc/RNToWebViewMessenger.js
 packages/app-mobile/utils/ipc/WebViewToRNMessenger.js
 packages/app-mobile/utils/lockToSingleInstance.js
@@ -990,12 +1008,12 @@ packages/editor/CodeMirror/extensions/overwriteModeExtension.js
 packages/editor/CodeMirror/extensions/searchExtension.js
 packages/editor/CodeMirror/extensions/selectedNoteIdExtension.js
 packages/editor/CodeMirror/getScrollFraction.js
+packages/editor/CodeMirror/index.js
 packages/editor/CodeMirror/pluginApi/PluginLoader.js
 packages/editor/CodeMirror/pluginApi/codeMirrorRequire.js
 packages/editor/CodeMirror/pluginApi/customEditorCompletion.test.js
 packages/editor/CodeMirror/pluginApi/customEditorCompletion.js
 packages/editor/CodeMirror/testing/createEditorControl.js
-packages/editor/CodeMirror/testing/createEditorSettings.js
 packages/editor/CodeMirror/testing/createTestEditor.js
 packages/editor/CodeMirror/testing/findNodesWithName.js
 packages/editor/CodeMirror/testing/forceFullParse.js
@@ -1031,9 +1049,43 @@ packages/editor/CodeMirror/utils/markdown/renumberSelectedLists.test.js
 packages/editor/CodeMirror/utils/markdown/renumberSelectedLists.js
 packages/editor/CodeMirror/utils/markdown/stripBlockquote.js
 packages/editor/CodeMirror/utils/setupVim.js
+packages/editor/ProseMirror/commands.test.js
+packages/editor/ProseMirror/commands.js
+packages/editor/ProseMirror/createEditor.js
+packages/editor/ProseMirror/index.js
+packages/editor/ProseMirror/plugins/inputRulesPlugin.js
+packages/editor/ProseMirror/plugins/joplinEditablePlugin.js
+packages/editor/ProseMirror/plugins/joplinEditorApiPlugin.js
+packages/editor/ProseMirror/plugins/keymapPlugin.js
+packages/editor/ProseMirror/plugins/linkTooltipPlugin.test.js
+packages/editor/ProseMirror/plugins/linkTooltipPlugin.js
+packages/editor/ProseMirror/plugins/listPlugin.js
+packages/editor/ProseMirror/plugins/originalMarkupPlugin.js
+packages/editor/ProseMirror/plugins/resourcePlaceholderPlugin.js
+packages/editor/ProseMirror/plugins/searchPlugin.js
+packages/editor/ProseMirror/schema.js
+packages/editor/ProseMirror/styles.js
+packages/editor/ProseMirror/testing/createTestEditor.js
+packages/editor/ProseMirror/types.js
+packages/editor/ProseMirror/utils/UndoStackSynchronizer.js
+packages/editor/ProseMirror/utils/canReplaceSelectionWith.js
+packages/editor/ProseMirror/utils/computeSelectionFormatting.js
+packages/editor/ProseMirror/utils/extractSelectedLinesTo.test.js
+packages/editor/ProseMirror/utils/extractSelectedLinesTo.js
+packages/editor/ProseMirror/utils/jumpToHash.js
+packages/editor/ProseMirror/utils/preprocessEditorInput.test.js
+packages/editor/ProseMirror/utils/preprocessEditorInput.js
+packages/editor/ProseMirror/utils/sanitizeHtml.js
+packages/editor/ProseMirror/utils/trimEmptyParagraphs.js
+packages/editor/ProseMirror/vendor/changedDescendants.js
+packages/editor/ProseMirror/vendor/splitBlockAs.js
 packages/editor/SelectionFormatting.js
 packages/editor/events.js
+packages/editor/polyfills.js
+packages/editor/testing/createEditorSettings.js
+packages/editor/testing/setUpLogger.js
 packages/editor/types.js
+packages/editor/utils/getFileFromPasteEvent.js
 packages/fork-htmlparser2/src/CollectingHandler.js
 packages/fork-htmlparser2/src/FeedHandler.spec.js
 packages/fork-htmlparser2/src/FeedHandler.js
@@ -1113,6 +1165,8 @@ packages/lib/commands/toggleAllFolders.js
 packages/lib/commands/toggleEditorPlugin.js
 packages/lib/components/EncryptionConfigScreen/utils.test.js
 packages/lib/components/EncryptionConfigScreen/utils.js
+packages/lib/components/shared/NoteEditor/WarningBanner/onRichTextDismissLinkClick.js
+packages/lib/components/shared/NoteEditor/WarningBanner/onRichTextReadMoreLinkClick.js
 packages/lib/components/shared/NoteList/getEmptyFolderMessage.js
 packages/lib/components/shared/NoteRevisionViewer/getHelpMessage.js
 packages/lib/components/shared/NoteRevisionViewer/useDeleteHistoryClick.js
diff --git a/.eslintrc.js b/.eslintrc.js
index 6ea2562675..5c5722e63e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,6 +23,7 @@ module.exports = {
 		'FileSystemCreateWritableOptions': 'readonly',
 		'FileSystemHandle': 'readonly',
 		'IDBTransactionMode': 'readonly',
+		'FlatArray': 'readonly',
 		'BigInt': 'readonly',
 		'globalThis': 'readonly',
 
diff --git a/.gitignore b/.gitignore
index 8f8653d68b..2fdad3445b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -638,6 +638,7 @@ packages/app-mobile/components/ExtendedWebView/index.jest.js
 packages/app-mobile/components/ExtendedWebView/index.js
 packages/app-mobile/components/ExtendedWebView/index.web.js
 packages/app-mobile/components/ExtendedWebView/types.js
+packages/app-mobile/components/ExtendedWebView/utils/useCss.js
 packages/app-mobile/components/FolderPicker.js
 packages/app-mobile/components/Icon.js
 packages/app-mobile/components/IconButton.js
@@ -646,42 +647,28 @@ packages/app-mobile/components/ModalDialog.js
 packages/app-mobile/components/NestableFlatList.js
 packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.test.js
 packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/Renderer.test.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/Renderer.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/noteBodyViewerBundle.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/types.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/utils/addPluginAssets.js
-packages/app-mobile/components/NoteBodyViewer/bundledJs/utils/makeResourceModel.js
-packages/app-mobile/components/NoteBodyViewer/hooks/useContentScripts.js
-packages/app-mobile/components/NoteBodyViewer/hooks/useEditPopup.test.js
-packages/app-mobile/components/NoteBodyViewer/hooks/useEditPopup.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useOnMessage.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useOnResourceLongPress.js
-packages/app-mobile/components/NoteBodyViewer/hooks/useRenderer.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useRerenderHandler.js
 packages/app-mobile/components/NoteBodyViewer/hooks/useSource.js
 packages/app-mobile/components/NoteBodyViewer/types.js
-packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.js
 packages/app-mobile/components/NoteEditor/EditLinkDialog.js
 packages/app-mobile/components/NoteEditor/ImageEditor/ImageEditor.js
 packages/app-mobile/components/NoteEditor/ImageEditor/autosave.js
 packages/app-mobile/components/NoteEditor/ImageEditor/isEditableResource.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/applyTemplateToEditor.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.test.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/polyfills.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/startAutosaveLoop.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/types.js
-packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/watchEditorForTemplateChanges.js
 packages/app-mobile/components/NoteEditor/ImageEditor/promptRestoreAutosave.js
-packages/app-mobile/components/NoteEditor/ImageEditor/utils/useEditorMessenger.js
+packages/app-mobile/components/NoteEditor/MarkdownEditor.js
 packages/app-mobile/components/NoteEditor/NoteEditor.test.js
 packages/app-mobile/components/NoteEditor/NoteEditor.js
+packages/app-mobile/components/NoteEditor/RichTextEditor.test.js
+packages/app-mobile/components/NoteEditor/RichTextEditor.js
 packages/app-mobile/components/NoteEditor/SearchPanel.js
+packages/app-mobile/components/NoteEditor/WarningBanner.js
 packages/app-mobile/components/NoteEditor/commandDeclarations.js
 packages/app-mobile/components/NoteEditor/hooks/useCodeMirrorPlugins.js
 packages/app-mobile/components/NoteEditor/hooks/useEditorCommandHandler.test.js
 packages/app-mobile/components/NoteEditor/hooks/useEditorCommandHandler.js
+packages/app-mobile/components/NoteEditor/testing/createTestEditorProps.js
 packages/app-mobile/components/NoteEditor/types.js
 packages/app-mobile/components/NoteItem.js
 packages/app-mobile/components/NoteList.js
@@ -836,6 +823,36 @@ packages/app-mobile/components/voiceTyping/AudioRecordingBanner.js
 packages/app-mobile/components/voiceTyping/RecordingControls.js
 packages/app-mobile/components/voiceTyping/SpeechToTextBanner.js
 packages/app-mobile/components/voiceTyping/types.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/applyTemplateToEditor.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/index.test.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/index.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/startAutosaveLoop.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/types.js
+packages/app-mobile/contentScripts/imageEditorBundle/contentScript/watchEditorForTemplateChanges.js
+packages/app-mobile/contentScripts/imageEditorBundle/useWebViewSetup.js
+packages/app-mobile/contentScripts/imageEditorBundle/utils/useEditorMessenger.js
+packages/app-mobile/contentScripts/markdownEditorBundle/contentScript.js
+packages/app-mobile/contentScripts/markdownEditorBundle/types.js
+packages/app-mobile/contentScripts/markdownEditorBundle/useWebViewSetup.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/Renderer.test.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/Renderer.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/index.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/types.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/addPluginAssets.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/afterFullPageRender.js
+packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/makeResourceModel.js
+packages/app-mobile/contentScripts/rendererBundle/types.js
+packages/app-mobile/contentScripts/rendererBundle/useWebViewSetup.js
+packages/app-mobile/contentScripts/rendererBundle/utils/useContentScripts.js
+packages/app-mobile/contentScripts/rendererBundle/utils/useEditPopup.test.js
+packages/app-mobile/contentScripts/rendererBundle/utils/useEditPopup.js
+packages/app-mobile/contentScripts/richTextEditorBundle/contentScript.js
+packages/app-mobile/contentScripts/richTextEditorBundle/types.js
+packages/app-mobile/contentScripts/richTextEditorBundle/useWebViewSetup.js
+packages/app-mobile/contentScripts/types.js
+packages/app-mobile/contentScripts/utils/polyfills.js
+packages/app-mobile/contentScripts/utils/readFileToBase64.js
+packages/app-mobile/contentScripts/utils/setUpLogger.js
 packages/app-mobile/gulpfile.js
 packages/app-mobile/index.web.js
 packages/app-mobile/root.js
@@ -858,7 +875,7 @@ packages/app-mobile/services/voiceTyping/whisper.js
 packages/app-mobile/setupQuickActions.js
 packages/app-mobile/tools/buildInjectedJs/BundledFile.js
 packages/app-mobile/tools/buildInjectedJs/constants.js
-packages/app-mobile/tools/buildInjectedJs/copyJs.js
+packages/app-mobile/tools/buildInjectedJs/copyAssets.js
 packages/app-mobile/tools/buildInjectedJs/gulpTasks.js
 packages/app-mobile/tools/copyAssets.js
 packages/app-mobile/utils/ShareExtension.js
@@ -895,7 +912,6 @@ packages/app-mobile/utils/image/fileToImage.web.js
 packages/app-mobile/utils/image/getImageDimensions.js
 packages/app-mobile/utils/image/resizeImage.js
 packages/app-mobile/utils/initializeCommandService.js
-packages/app-mobile/utils/injectedJs.js
 packages/app-mobile/utils/ipc/RNToWebViewMessenger.js
 packages/app-mobile/utils/ipc/WebViewToRNMessenger.js
 packages/app-mobile/utils/lockToSingleInstance.js
@@ -965,12 +981,12 @@ packages/editor/CodeMirror/extensions/overwriteModeExtension.js
 packages/editor/CodeMirror/extensions/searchExtension.js
 packages/editor/CodeMirror/extensions/selectedNoteIdExtension.js
 packages/editor/CodeMirror/getScrollFraction.js
+packages/editor/CodeMirror/index.js
 packages/editor/CodeMirror/pluginApi/PluginLoader.js
 packages/editor/CodeMirror/pluginApi/codeMirrorRequire.js
 packages/editor/CodeMirror/pluginApi/customEditorCompletion.test.js
 packages/editor/CodeMirror/pluginApi/customEditorCompletion.js
 packages/editor/CodeMirror/testing/createEditorControl.js
-packages/editor/CodeMirror/testing/createEditorSettings.js
 packages/editor/CodeMirror/testing/createTestEditor.js
 packages/editor/CodeMirror/testing/findNodesWithName.js
 packages/editor/CodeMirror/testing/forceFullParse.js
@@ -1006,9 +1022,43 @@ packages/editor/CodeMirror/utils/markdown/renumberSelectedLists.test.js
 packages/editor/CodeMirror/utils/markdown/renumberSelectedLists.js
 packages/editor/CodeMirror/utils/markdown/stripBlockquote.js
 packages/editor/CodeMirror/utils/setupVim.js
+packages/editor/ProseMirror/commands.test.js
+packages/editor/ProseMirror/commands.js
+packages/editor/ProseMirror/createEditor.js
+packages/editor/ProseMirror/index.js
+packages/editor/ProseMirror/plugins/inputRulesPlugin.js
+packages/editor/ProseMirror/plugins/joplinEditablePlugin.js
+packages/editor/ProseMirror/plugins/joplinEditorApiPlugin.js
+packages/editor/ProseMirror/plugins/keymapPlugin.js
+packages/editor/ProseMirror/plugins/linkTooltipPlugin.test.js
+packages/editor/ProseMirror/plugins/linkTooltipPlugin.js
+packages/editor/ProseMirror/plugins/listPlugin.js
+packages/editor/ProseMirror/plugins/originalMarkupPlugin.js
+packages/editor/ProseMirror/plugins/resourcePlaceholderPlugin.js
+packages/editor/ProseMirror/plugins/searchPlugin.js
+packages/editor/ProseMirror/schema.js
+packages/editor/ProseMirror/styles.js
+packages/editor/ProseMirror/testing/createTestEditor.js
+packages/editor/ProseMirror/types.js
+packages/editor/ProseMirror/utils/UndoStackSynchronizer.js
+packages/editor/ProseMirror/utils/canReplaceSelectionWith.js
+packages/editor/ProseMirror/utils/computeSelectionFormatting.js
+packages/editor/ProseMirror/utils/extractSelectedLinesTo.test.js
+packages/editor/ProseMirror/utils/extractSelectedLinesTo.js
+packages/editor/ProseMirror/utils/jumpToHash.js
+packages/editor/ProseMirror/utils/preprocessEditorInput.test.js
+packages/editor/ProseMirror/utils/preprocessEditorInput.js
+packages/editor/ProseMirror/utils/sanitizeHtml.js
+packages/editor/ProseMirror/utils/trimEmptyParagraphs.js
+packages/editor/ProseMirror/vendor/changedDescendants.js
+packages/editor/ProseMirror/vendor/splitBlockAs.js
 packages/editor/SelectionFormatting.js
 packages/editor/events.js
+packages/editor/polyfills.js
+packages/editor/testing/createEditorSettings.js
+packages/editor/testing/setUpLogger.js
 packages/editor/types.js
+packages/editor/utils/getFileFromPasteEvent.js
 packages/fork-htmlparser2/src/CollectingHandler.js
 packages/fork-htmlparser2/src/FeedHandler.spec.js
 packages/fork-htmlparser2/src/FeedHandler.js
@@ -1088,6 +1138,8 @@ packages/lib/commands/toggleAllFolders.js
 packages/lib/commands/toggleEditorPlugin.js
 packages/lib/components/EncryptionConfigScreen/utils.test.js
 packages/lib/components/EncryptionConfigScreen/utils.js
+packages/lib/components/shared/NoteEditor/WarningBanner/onRichTextDismissLinkClick.js
+packages/lib/components/shared/NoteEditor/WarningBanner/onRichTextReadMoreLinkClick.js
 packages/lib/components/shared/NoteList/getEmptyFolderMessage.js
 packages/lib/components/shared/NoteRevisionViewer/getHelpMessage.js
 packages/lib/components/shared/NoteRevisionViewer/useDeleteHistoryClick.js
diff --git a/packages/app-cli/tests/html_to_md/task_list_block_content.html b/packages/app-cli/tests/html_to_md/task_list_block_content.html
new file mode 100644
index 0000000000..34ed57e6bb
--- /dev/null
+++ b/packages/app-cli/tests/html_to_md/task_list_block_content.html
@@ -0,0 +1,13 @@
+<p>A task list created by the TipTap editor:</p>
+<ul data-type="taskList">
+	<li><label contenteditable="false"><input type="checkbox"><span></span></label>
+		<div>
+			<p>Testing...</p>
+		</div>
+	</li>
+	<li><label contenteditable="false"><input type="checkbox"><span></span></label>
+		<div>
+			<p>testing</p>
+		</div>
+	</li>
+</ul>
\ No newline at end of file
diff --git a/packages/app-cli/tests/html_to_md/task_list_block_content.md b/packages/app-cli/tests/html_to_md/task_list_block_content.md
new file mode 100644
index 0000000000..bbc2c892ca
--- /dev/null
+++ b/packages/app-cli/tests/html_to_md/task_list_block_content.md
@@ -0,0 +1,5 @@
+A task list created by the TipTap editor:
+
+- [ ] Testing...
+    
+- [ ] testing
\ No newline at end of file
diff --git a/packages/app-cli/tests/html_to_md/task_lists.html b/packages/app-cli/tests/html_to_md/task_lists.html
new file mode 100644
index 0000000000..5e69ddbd32
--- /dev/null
+++ b/packages/app-cli/tests/html_to_md/task_lists.html
@@ -0,0 +1,26 @@
+<p>List 1:</p>
+<ul>
+	<li><label><input type="checkbox"/>This</label></li>
+	<li><label><input type="checkbox" checked/>is a test.</label></li>
+</ul>
+<p>List 2:</p>
+<ul>
+	<li>
+		<input type="checkbox" id="checkbox-1"/><label for="checkbox-1">This</label>
+	</li>
+	<li>
+		<input type="checkbox" checked id="checkbox-2"/><label for="checkbox-2">is another test.</label>
+	</li>
+</ul>
+<p>List 3:</p>
+<ul>
+	<li>
+		<input type="checkbox" id="checkbox-a1"/><label for="checkbox-a1">This</label>
+	</li>
+	<li>
+		<input type="checkbox" checked id="checkbox-a2"/><label for="checkbox-a2">is another test.</label>
+	</li>
+	<li>
+		<input type="checkbox" checked id="checkbox-a3"/><label for="checkbox-a3"></label>
+	</li>
+</ul>
\ No newline at end of file
diff --git a/packages/app-cli/tests/html_to_md/task_lists.md b/packages/app-cli/tests/html_to_md/task_lists.md
new file mode 100644
index 0000000000..929283d62b
--- /dev/null
+++ b/packages/app-cli/tests/html_to_md/task_lists.md
@@ -0,0 +1,15 @@
+List 1:
+
+- [ ] This
+- [x] is a test.
+
+List 2:
+
+- [ ] This
+- [x] is another test.
+
+List 3:
+
+- [ ] This
+- [x] is another test.
+- [x] &nbsp;
\ No newline at end of file
diff --git a/packages/app-cli/tests/md_to_html/checkbox_alternative.html b/packages/app-cli/tests/md_to_html/checkbox_alternative.html
index 40da561bd5..8bfc1e1d5c 100644
--- a/packages/app-cli/tests/md_to_html/checkbox_alternative.html
+++ b/packages/app-cli/tests/md_to_html/checkbox_alternative.html
@@ -1,7 +1,7 @@
-<ul class="joplin-checklist">
+<ul class="joplin-checklist" data-is-checklist="1">
 <li>Not checked</li>
 <li class="checked">Checked!!
-<ul class="joplin-checklist">
+<ul class="joplin-checklist" data-is-checklist="1">
 <li class="checked">Indented, with <strong>bold</strong></li>
 <li>Indented, not checked</li>
 </ul>
diff --git a/packages/app-cli/tests/md_to_html/resource_nonexistent_image.html b/packages/app-cli/tests/md_to_html/resource_nonexistent_image.html
index 19789acfa6..b5e6b23938 100644
--- a/packages/app-cli/tests/md_to_html/resource_nonexistent_image.html
+++ b/packages/app-cli/tests/md_to_html/resource_nonexistent_image.html
@@ -1,15 +1,15 @@
-<div class="not-loaded-resource not-loaded-image-resource resource-status-notDownloaded" data-resource-id="a1test2a1test2a1test2a1test22345" data-original-alt data-original-title="test" contenteditable="false"><img src="data:image/svg+xml;utf8,
+<span class="not-loaded-resource not-loaded-image-resource resource-status-notDownloaded" data-resource-id="a1test2a1test2a1test2a1test22345" data-original-alt data-original-title="test" contenteditable="false"><img src="data:image/svg+xml;utf8,
 &Tab;&Tab;&lt;svg width=&quot;1700&quot; height=&quot;1536&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
 &Tab;&Tab;    &lt;path d=&quot;M1280 1344c0-35-29-64-64-64s-64 29-64 64 29 64 64 64 64-29 64-64zm256 0c0-35-29-64-64-64s-64 29-64 64 29 64 64 64 64-29 64-64zm128-224v320c0 53-43 96-96 96H96c-53 0-96-43-96-96v-320c0-53 43-96 96-96h465l135 136c37 36 85 56 136 56s99-20 136-56l136-136h464c53 0 96 43 96 96zm-325-569c10 24 5 52-14 70l-448 448c-12 13-29 19-45 19s-33-6-45-19L339 621c-19-18-24-46-14-70 10-23 33-39 59-39h256V64c0-35 29-64 64-64h256c35 0 64 29 64 64v448h256c26 0 49 16 59 39z&quot;/&gt;
 &Tab;&Tab;&lt;/svg&gt;
-&Tab;"/></div>
-<div class="not-loaded-resource not-loaded-image-resource resource-status-notDownloaded" data-resource-id="a1test2a1test2a1test2a1test22346" data-original-alt="test" data-original-title contenteditable="false"><img src="data:image/svg+xml;utf8,
+&Tab;"/></span>
+<span class="not-loaded-resource not-loaded-image-resource resource-status-notDownloaded" data-resource-id="a1test2a1test2a1test2a1test22346" data-original-alt="test" data-original-title contenteditable="false"><img src="data:image/svg+xml;utf8,
 &Tab;&Tab;&lt;svg width=&quot;1700&quot; height=&quot;1536&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
 &Tab;&Tab;    &lt;path d=&quot;M1280 1344c0-35-29-64-64-64s-64 29-64 64 29 64 64 64 64-29 64-64zm256 0c0-35-29-64-64-64s-64 29-64 64 29 64 64 64 64-29 64-64zm128-224v320c0 53-43 96-96 96H96c-53 0-96-43-96-96v-320c0-53 43-96 96-96h465l135 136c37 36 85 56 136 56s99-20 136-56l136-136h464c53 0 96 43 96 96zm-325-569c10 24 5 52-14 70l-448 448c-12 13-29 19-45 19s-33-6-45-19L339 621c-19-18-24-46-14-70 10-23 33-39 59-39h256V64c0-35 29-64 64-64h256c35 0 64 29 64 64v448h256c26 0 49 16 59 39z&quot;/&gt;
 &Tab;&Tab;&lt;/svg&gt;
-&Tab;"/></div>
-<div class="not-loaded-resource not-loaded-image-resource resource-status-notDownloaded" data-resource-id="a1test2a1test2a1test2a1test22347" data-original-before=" " data-original-after=" class=&quot;jop-noMdConv&quot;/" contenteditable="false"><img src="data:image/svg+xml;utf8,
+&Tab;"/></span>
+<span class="not-loaded-resource not-loaded-image-resource resource-status-notDownloaded" data-resource-id="a1test2a1test2a1test2a1test22347" data-original-before=" " data-original-after=" class=&quot;jop-noMdConv&quot;/" contenteditable="false"><img src="data:image/svg+xml;utf8,
 &Tab;&Tab;&lt;svg width=&quot;1700&quot; height=&quot;1536&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
 &Tab;&Tab;    &lt;path d=&quot;M1280 1344c0-35-29-64-64-64s-64 29-64 64 29 64 64 64 64-29 64-64zm256 0c0-35-29-64-64-64s-64 29-64 64 29 64 64 64 64-29 64-64zm128-224v320c0 53-43 96-96 96H96c-53 0-96-43-96-96v-320c0-53 43-96 96-96h465l135 136c37 36 85 56 136 56s99-20 136-56l136-136h464c53 0 96 43 96 96zm-325-569c10 24 5 52-14 70l-448 448c-12 13-29 19-45 19s-33-6-45-19L339 621c-19-18-24-46-14-70 10-23 33-39 59-39h256V64c0-35 29-64 64-64h256c35 0 64 29 64 64v448h256c26 0 49 16 59 39z&quot;/&gt;
 &Tab;&Tab;&lt;/svg&gt;
-&Tab;"/></div>
\ No newline at end of file
+&Tab;"/></span>
\ No newline at end of file
diff --git a/packages/app-desktop/gui/NoteEditor/WarningBanner/WarningBanner.tsx b/packages/app-desktop/gui/NoteEditor/WarningBanner/WarningBanner.tsx
index 2d96d5ee1d..537ced95ca 100644
--- a/packages/app-desktop/gui/NoteEditor/WarningBanner/WarningBanner.tsx
+++ b/packages/app-desktop/gui/NoteEditor/WarningBanner/WarningBanner.tsx
@@ -4,7 +4,8 @@ import { AppState } from '../../../app.reducer';
 import Setting from '@joplin/lib/models/Setting';
 import BannerContent from './BannerContent';
 import { _ } from '@joplin/lib/locale';
-import bridge from '../../../services/bridge';
+import onRichTextReadMoreLinkClick from '@joplin/lib/components/shared/NoteEditor/WarningBanner/onRichTextReadMoreLinkClick';
+import onRichTextDismissLinkClick from '@joplin/lib/components/shared/NoteEditor/WarningBanner/onRichTextDismissLinkClick';
 import { useMemo } from 'react';
 import { PluginStates } from '@joplin/lib/services/plugins/reducer';
 import PluginService from '@joplin/lib/services/plugins/PluginService';
@@ -16,14 +17,6 @@ interface Props {
 	plugins: PluginStates;
 }
 
-const onRichTextDismissLinkClick = () => {
-	Setting.setValue('richTextBannerDismissed', true);
-};
-
-const onRichTextReadMoreLinkClick = () => {
-	void bridge().openExternal('https://joplinapp.org/help/apps/rich_text_editor');
-};
-
 const onSwitchToLegacyEditor = () => {
 	Setting.setValue('editor.legacyMarkdown', true);
 };
diff --git a/packages/app-mobile/.gitignore b/packages/app-mobile/.gitignore
index 634beaadbc..dc9270e0a6 100644
--- a/packages/app-mobile/.gitignore
+++ b/packages/app-mobile/.gitignore
@@ -67,7 +67,8 @@ yarn-error.log
 lib/csstojs/
 lib/rnInjectedJs/
 dist/
-components/**/*.bundle.js
+/**/*.bundle.js
+/**/*.bundle.css
 components/**/*.bundle.js.LICENSE.txt
 components/**/*.bundle.js.md5
 components/**/*.bundle.min.js
diff --git a/packages/app-mobile/components/ExtendedWebView/index.jest.tsx b/packages/app-mobile/components/ExtendedWebView/index.jest.tsx
index 359138361b..98838c4b96 100644
--- a/packages/app-mobile/components/ExtendedWebView/index.jest.tsx
+++ b/packages/app-mobile/components/ExtendedWebView/index.jest.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 
 import {
-	forwardRef, Ref, useEffect, useImperativeHandle, useMemo, useRef,
+	forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef,
 } from 'react';
 
 import { View } from 'react-native';
 import Logger from '@joplin/utils/Logger';
 import { Props, WebViewControl } from './types';
 import { JSDOM } from 'jsdom';
+import useCss from './utils/useCss';
 
 const logger = Logger.create('ExtendedWebView');
 
@@ -18,11 +19,13 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 		return new JSDOM(props.html, { runScripts: 'dangerously', pretendToBeVisual: true });
 	}, [props.html]);
 
+	const injectJs = useCallback((js: string) => {
+		return dom.window.eval(js);
+	}, [dom]);
+
 	useImperativeHandle(ref, (): WebViewControl => {
 		const result = {
-			injectJS(js: string) {
-				return dom.window.eval(js);
-			},
+			injectJS: injectJs,
 			postMessage(message: unknown) {
 				const messageEventContent = {
 					data: message,
@@ -36,33 +39,24 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 			},
 		};
 		return result;
-	}, [dom]);
+	}, [dom, injectJs]);
 
 	const onMessageRef = useRef(props.onMessage);
 	onMessageRef.current = props.onMessage;
 
+	const { injectedJs: cssInjectedJavaScript } = useCss(
+		injectJs,
+		props.css,
+	);
+
 	// Don't re-load when injected JS changes. This should match the behavior of the native webview.
 	const injectedJavaScriptRef = useRef(props.injectedJavaScript);
-	injectedJavaScriptRef.current = props.injectedJavaScript;
+	injectedJavaScriptRef.current = props.injectedJavaScript + cssInjectedJavaScript;
 
 	useEffect(() => {
 		// JSDOM polyfills
 		dom.window.eval(`
-			// Prevents the CodeMirror error "getClientRects is undefined".
-			// See https://github.com/jsdom/jsdom/issues/3002#issue-652790925
-			document.createRange = () => {
-				const range = new Range();
-				range.getBoundingClientRect = () => {};
-				range.getClientRects = () => {
-					return {
-						length: 0,
-						item: () => null,
-						[Symbol.iterator]: () => {},
-					};
-				};
-
-				return range;
-			};
+			window.scrollBy = (_amount) => { };
 		`);
 
 		dom.window.eval(`
@@ -80,7 +74,6 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 		dom.window.eval(injectedJavaScriptRef.current);
 	}, [dom]);
 
-
 	const onLoadEndRef = useRef(props.onLoadEnd);
 	onLoadEndRef.current = props.onLoadEnd;
 	const onLoadStartRef = useRef(props.onLoadStart);
diff --git a/packages/app-mobile/components/ExtendedWebView/index.tsx b/packages/app-mobile/components/ExtendedWebView/index.tsx
index e5ff0e2709..052518293e 100644
--- a/packages/app-mobile/components/ExtendedWebView/index.tsx
+++ b/packages/app-mobile/components/ExtendedWebView/index.tsx
@@ -12,6 +12,7 @@ import Setting from '@joplin/lib/models/Setting';
 import shim from '@joplin/lib/shim';
 import Logger from '@joplin/utils/Logger';
 import { Props, WebViewControl } from './types';
+import useCss from './utils/useCss';
 
 const logger = Logger.create('ExtendedWebView');
 
@@ -98,6 +99,9 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 		}, 250);
 	}, []);
 
+	const { injectedJs: cssInjectedJs } = useCss(webviewRef.current?.injectJavaScript, props.css);
+	const injectedJavaScript = props.injectedJavaScript + cssInjectedJs;
+
 	// - `setSupportMultipleWindows` must be `true` for security reasons:
 	//   https://github.com/react-native-webview/react-native-webview/releases/tag/v11.0.0
 
@@ -131,7 +135,7 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 			allowFileAccess={true}
 			allowFileAccessFromFileURLs={props.allowFileAccessFromJs}
 			webviewDebuggingEnabled={allowWebviewDebugging}
-			injectedJavaScript={props.injectedJavaScript}
+			injectedJavaScript={injectedJavaScript}
 			onMessage={props.onMessage}
 			onError={props.onError ?? onError}
 			onLoadEnd={props.onLoadEnd}
diff --git a/packages/app-mobile/components/ExtendedWebView/index.web.tsx b/packages/app-mobile/components/ExtendedWebView/index.web.tsx
index 8383a2828e..d99ea57455 100644
--- a/packages/app-mobile/components/ExtendedWebView/index.web.tsx
+++ b/packages/app-mobile/components/ExtendedWebView/index.web.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 
 import {
-	forwardRef, Ref, useEffect, useImperativeHandle, useRef, useState,
+	forwardRef, Ref, useCallback, useEffect, useImperativeHandle, useRef, useState,
 } from 'react';
 import { Props, WebViewControl } from './types';
 
 import { View, ViewStyle } from 'react-native';
 import makeSandboxedIframe from '@joplin/lib/utils/dom/makeSandboxedIframe';
 import Logger from '@joplin/utils/Logger';
+import useCss from './utils/useCss';
 
 const logger = Logger.create('ExtendedWebView');
 
@@ -20,24 +21,26 @@ const wrapperStyle: ViewStyle = { height: '100%', width: '100%', flex: 1 };
 const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 	const iframeRef = useRef<HTMLIFrameElement|null>(null);
 
+	const injectJs = useCallback((js: string) => {
+		if (!iframeRef.current) {
+			logger.warn(`WebView(${props.webviewInstanceId}): Tried to inject JavaScript after the iframe has unloaded.`);
+			return;
+		}
+
+		// react-native-webview doesn't seem to show a warning in the case where JavaScript
+		// is injected before the first page loads.
+		if (!iframeRef.current.contentWindow) {
+			return;
+		}
+
+		iframeRef.current.contentWindow.postMessage({
+			injectJs: js,
+		}, '*');
+	}, [props.webviewInstanceId]);
+
 	useImperativeHandle(ref, (): WebViewControl => {
 		return {
-			injectJS(js: string) {
-				if (!iframeRef.current) {
-					logger.warn(`WebView(${props.webviewInstanceId}): Tried to inject JavaScript after the iframe has unloaded.`);
-					return;
-				}
-
-				// react-native-webview doesn't seem to show a warning in the case where JavaScript
-				// is injected before the first page loads.
-				if (!iframeRef.current.contentWindow) {
-					return;
-				}
-
-				iframeRef.current.contentWindow.postMessage({
-					injectJs: js,
-				}, '*');
-			},
+			injectJS: injectJs,
 			postMessage(message: unknown) {
 				if (!iframeRef.current || !iframeRef.current.contentWindow) {
 					logger.warn(`WebView(${props.webviewInstanceId}): Tried to post a message to an unloaded iframe.`);
@@ -49,7 +52,7 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 				}, '*');
 			},
 		};
-	}, [props.webviewInstanceId]);
+	}, [props.webviewInstanceId, injectJs]);
 
 	const [containerElement, setContainerElement] = useState<HTMLDivElement>();
 	const containerRef = useRef(containerElement);
@@ -62,9 +65,15 @@ const ExtendedWebView = (props: Props, ref: Ref<WebViewControl>) => {
 	const onLoadStartRef = useRef(props.onLoadStart);
 	onLoadStartRef.current = props.onLoadStart;
 
+	const { injectedJs: cssInjectedJs } = useCss(
+		iframeRef.current ? injectJs : null,
+		props.css,
+	);
+	const injectedJavaScript = props.injectedJavaScript + cssInjectedJs;
+
 	// Don't re-load when injected JS changes. This should match the behavior of the native webview.
-	const injectedJavaScriptRef = useRef(props.injectedJavaScript);
-	injectedJavaScriptRef.current = props.injectedJavaScript;
+	const injectedJavaScriptRef = useRef(injectedJavaScript);
+	injectedJavaScriptRef.current = injectedJavaScript;
 
 	useEffect(() => {
 		const headHtml = `
diff --git a/packages/app-mobile/components/ExtendedWebView/types.ts b/packages/app-mobile/components/ExtendedWebView/types.ts
index e8ac090f6e..5531c0723d 100644
--- a/packages/app-mobile/components/ExtendedWebView/types.ts
+++ b/packages/app-mobile/components/ExtendedWebView/types.ts
@@ -31,6 +31,7 @@ export interface Props {
 
 	// If HTML is still being loaded, [html] should be an empty string.
 	html: string;
+	css?: string;
 
 	// Initial javascript. Must evaluate to true.
 	injectedJavaScript: string;
diff --git a/packages/app-mobile/components/ExtendedWebView/utils/useCss.ts b/packages/app-mobile/components/ExtendedWebView/utils/useCss.ts
new file mode 100644
index 0000000000..de31583b0b
--- /dev/null
+++ b/packages/app-mobile/components/ExtendedWebView/utils/useCss.ts
@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+
+type OnInjectJs = (js: string)=> void;
+
+const webViewCssClassName = 'extended-webview-css';
+
+const applyCssJs = (css: string) => `
+(function() {
+	const styleId = ${JSON.stringify(webViewCssClassName)};
+
+	const oldStyle = document.getElementById(styleId);
+	if (oldStyle) {
+		oldStyle.remove();
+	}
+
+	const style = document.createElement('style');
+	style.setAttribute('id', styleId);
+
+	style.appendChild(document.createTextNode(${JSON.stringify(css)}));
+	document.head.appendChild(style);
+})();
+
+true;
+`;
+
+const useCss = (injectJs: OnInjectJs|null, css: string) => {
+	useEffect(() => {
+		if (injectJs && css) {
+			injectJs(applyCssJs(css));
+		}
+	}, [injectJs, css]);
+
+	return {
+		injectedJs: css ? applyCssJs(css) : '',
+	};
+};
+
+export default useCss;
diff --git a/packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.tsx b/packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.tsx
index 08c7487dd0..cbd576b41f 100644
--- a/packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.tsx
+++ b/packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.tsx
@@ -1,24 +1,20 @@
 import * as React from 'react';
 
 import useOnMessage, { HandleMessageCallback, OnMarkForDownloadCallback } from './hooks/useOnMessage';
-import { useRef, useCallback, useState, useMemo } from 'react';
+import { useRef, useCallback } from 'react';
 import { View, ViewStyle } from 'react-native';
 import ExtendedWebView from '../ExtendedWebView';
 import { WebViewControl } from '../ExtendedWebView/types';
 import useOnResourceLongPress from './hooks/useOnResourceLongPress';
-import useRenderer from './hooks/useRenderer';
-import { OnWebViewMessageHandler } from './types';
 import useRerenderHandler, { ResourceInfo } from './hooks/useRerenderHandler';
 import useSource from './hooks/useSource';
-import Setting from '@joplin/lib/models/Setting';
-import uuid from '@joplin/lib/uuid';
 import { PluginStates } from '@joplin/lib/services/plugins/reducer';
-import useContentScripts from './hooks/useContentScripts';
 import { MarkupLanguage } from '@joplin/renderer';
 import shim from '@joplin/lib/shim';
 import CommandService from '@joplin/lib/services/CommandService';
 import { AppState } from '../../utils/types';
 import { connect } from 'react-redux';
+import useWebViewSetup from '../../contentScripts/rendererBundle/useWebViewSetup';
 
 interface Props {
 	themeId: number;
@@ -69,27 +65,14 @@ function NoteBodyViewer(props: Props) {
 		onResourceLongPress,
 	});
 
-	const [webViewLoaded, setWebViewLoaded] = useState(false);
-	const [onWebViewMessage, setOnWebViewMessage] = useState<OnWebViewMessageHandler>(()=>()=>{});
-
-
-	// The renderer can write to whichever temporary directory we choose. As such,
-	// we use a subdirectory of the main temporary directory for security reasons.
-	const tempDir = useMemo(() => {
-		return `${Setting.value('tempDir')}/${uuid.createNano()}`;
-	}, []);
-
-	const renderer = useRenderer({
-		webViewLoaded,
-		onScroll,
+	const { api: renderer, pageSetup, webViewEventHandlers } = useWebViewSetup({
 		webviewRef,
+		onBodyScroll: onScroll,
 		onPostMessage,
-		setOnWebViewMessage,
-		tempDir,
+		pluginStates: props.pluginStates,
+		themeId: props.themeId,
 	});
 
-	const contentScripts = useContentScripts(props.pluginStates);
-
 	useRerenderHandler({
 		renderer,
 		fontSize: props.fontSize,
@@ -102,16 +85,14 @@ function NoteBodyViewer(props: Props) {
 		initialScroll: props.initialScroll,
 
 		paddingBottom: props.paddingBottom,
-
-		contentScripts,
 	});
 
 	const onLoadEnd = useCallback(() => {
-		setWebViewLoaded(true);
+		webViewEventHandlers.onLoadEnd();
 		if (props.onLoadEnd) props.onLoadEnd();
-	}, [props.onLoadEnd]);
+	}, [props.onLoadEnd, webViewEventHandlers]);
 
-	const { html, injectedJs } = useSource(tempDir, props.themeId);
+	const { html, js } = useSource(pageSetup, props.themeId);
 
 	return (
 		<View style={props.style}>
@@ -121,10 +102,10 @@ function NoteBodyViewer(props: Props) {
 				testID='NoteBodyViewer'
 				html={html}
 				allowFileAccessFromJs={true}
-				injectedJavaScript={injectedJs}
+				injectedJavaScript={js}
 				mixedContentMode="always"
 				onLoadEnd={onLoadEnd}
-				onMessage={onWebViewMessage}
+				onMessage={webViewEventHandlers.onMessage}
 			/>
 		</View>
 	);
diff --git a/packages/app-mobile/components/NoteBodyViewer/bundledJs/Renderer.ts b/packages/app-mobile/components/NoteBodyViewer/bundledJs/Renderer.ts
deleted file mode 100644
index 3114390f27..0000000000
--- a/packages/app-mobile/components/NoteBodyViewer/bundledJs/Renderer.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import { MarkupLanguage, MarkupToHtml } from '@joplin/renderer';
-import type { MarkupToHtmlConverter, RenderOptions, RenderResultPluginAsset, FsDriver as RendererFsDriver } from '@joplin/renderer/types';
-import makeResourceModel from './utils/makeResourceModel';
-import addPluginAssets from './utils/addPluginAssets';
-import { ExtraContentScriptSource } from './types';
-import { ExtraContentScript } from '@joplin/lib/services/plugins/utils/loadContentScripts';
-
-export interface RendererSetupOptions {
-	settings: {
-		safeMode: boolean;
-		tempDir: string;
-		resourceDir: string;
-		resourceDownloadMode: string;
-	};
-	// True if asset and resource files should be transferred to the WebView before rendering.
-	// This must be true on web, where asset and resource files are virtual and can't be accessed
-	// without transferring.
-	useTransferredFiles: boolean;
-
-	fsDriver: RendererFsDriver;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	pluginOptions: Record<string, any>;
-}
-
-export interface RendererSettings {
-	theme: string;
-	onResourceLoaded: ()=> void;
-	highlightedKeywords: string[];
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	resources: Record<string, any>;
-	codeTheme: string;
-	noteHash: string;
-	initialScroll: number;
-
-	createEditPopupSyntax: string;
-	destroyEditPopupSyntax: string;
-
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	pluginSettings: Record<string, any>;
-	requestPluginSetting: (pluginId: string, settingKey: string)=> void;
-	readAssetBlob: (assetPath: string)=> Promise<Blob>;
-}
-
-export interface MarkupRecord {
-	language: MarkupLanguage;
-	markup: string;
-}
-
-export default class Renderer {
-	private markupToHtml: MarkupToHtmlConverter;
-	private lastSettings: RendererSettings|null = null;
-	private extraContentScripts: ExtraContentScript[] = [];
-	private lastRenderMarkup: MarkupRecord|null = null;
-	private resourcePathOverrides: Record<string, string> = Object.create(null);
-
-	public constructor(private setupOptions: RendererSetupOptions) {
-		this.recreateMarkupToHtml();
-	}
-
-	private recreateMarkupToHtml() {
-		this.markupToHtml = new MarkupToHtml({
-			extraRendererRules: this.extraContentScripts,
-			fsDriver: this.setupOptions.fsDriver,
-			isSafeMode: this.setupOptions.settings.safeMode,
-			tempDir: this.setupOptions.settings.tempDir,
-			ResourceModel: makeResourceModel(this.setupOptions.settings.resourceDir),
-			pluginOptions: this.setupOptions.pluginOptions,
-		});
-	}
-
-	// Intended for web, where resources can't be linked to normally.
-	public async setResourceFile(id: string, file: Blob) {
-		this.resourcePathOverrides[id] = URL.createObjectURL(file);
-	}
-
-	public getResourcePathOverride(resourceId: string) {
-		if (Object.prototype.hasOwnProperty.call(this.resourcePathOverrides, resourceId)) {
-			return this.resourcePathOverrides[resourceId];
-		}
-		return null;
-	}
-
-	public async setExtraContentScriptsAndRerender(
-		extraContentScripts: ExtraContentScriptSource[],
-	) {
-		this.extraContentScripts = extraContentScripts.map(script => {
-			const scriptModule = (eval(script.js))({
-				pluginId: script.pluginId,
-				contentScriptId: script.id,
-			});
-
-			if (!scriptModule.plugin) {
-				throw new Error(`
-					Expected content script ${script.id} to export a function that returns an object with a "plugin" property.
-					Found: ${scriptModule}, which has keys ${Object.keys(scriptModule)}.
-				`);
-			}
-
-			return {
-				...script,
-				module: scriptModule,
-			};
-		});
-		this.recreateMarkupToHtml();
-
-		// If possible, rerenders with the last rendering settings. The goal
-		// of this is to reduce the number of IPC calls between the viewer and
-		// React Native. We want the first render to be as fast as possible.
-		if (this.lastRenderMarkup) {
-			await this.rerender(this.lastRenderMarkup, this.lastSettings);
-		}
-	}
-
-	public async rerender(markup: MarkupRecord, settings: RendererSettings) {
-		this.lastSettings = settings;
-		this.lastRenderMarkup = markup;
-
-		const options: RenderOptions = {
-			onResourceLoaded: settings.onResourceLoaded,
-			highlightedKeywords: settings.highlightedKeywords,
-			resources: settings.resources,
-			codeTheme: settings.codeTheme,
-			postMessageSyntax: 'window.joplinPostMessage_',
-			enableLongPress: true,
-
-			// Show an 'edit' popup over SVG images
-			editPopupFiletypes: ['image/svg+xml'],
-			createEditPopupSyntax: settings.createEditPopupSyntax,
-			destroyEditPopupSyntax: settings.destroyEditPopupSyntax,
-			itemIdToUrl: this.setupOptions.useTransferredFiles ? (id: string) => this.getResourcePathOverride(id) : undefined,
-
-			settingValue: (pluginId: string, settingName: string) => {
-				const settingKey = `${pluginId}.${settingName}`;
-
-				if (!(settingKey in settings.pluginSettings)) {
-					// This should make the setting available on future renders.
-					settings.requestPluginSetting(pluginId, settingName);
-					return undefined;
-				}
-
-				return settings.pluginSettings[settingKey];
-			},
-			whiteBackgroundNoteRendering: markup.language === MarkupLanguage.Html,
-		};
-
-		this.markupToHtml.clearCache(markup.language);
-
-		const contentContainer = document.getElementById('joplin-container-content');
-
-		let html = '';
-		let pluginAssets: RenderResultPluginAsset[] = [];
-		try {
-			const result = await this.markupToHtml.render(
-				markup.language,
-				markup.markup,
-				JSON.parse(settings.theme),
-				options,
-			);
-			html = result.html;
-			pluginAssets = result.pluginAssets;
-		} catch (error) {
-			if (!contentContainer) {
-				alert(`Renderer error: ${error}`);
-			} else {
-				contentContainer.innerText = `
-					Error: ${error}
-					
-					${error.stack ?? ''}
-				`;
-			}
-			throw error;
-		}
-
-		contentContainer.innerHTML = html;
-
-		// Adding plugin assets can be slow -- run it asynchronously.
-		void (async () => {
-			await addPluginAssets(pluginAssets, {
-				inlineAssets: this.setupOptions.useTransferredFiles,
-				readAssetBlob: settings.readAssetBlob,
-			});
-
-			// Some plugins require this event to be dispatched just after being added.
-			document.dispatchEvent(new Event('joplin-noteDidUpdate'));
-		})();
-
-		this.afterRender(settings);
-	}
-
-	private afterRender(renderSettings: RendererSettings) {
-		const readyStateCheckInterval = setInterval(() => {
-			if (document.readyState === 'complete') {
-				clearInterval(readyStateCheckInterval);
-				if (this.setupOptions.settings.resourceDownloadMode === 'manual') {
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-					(window as any).webviewLib.setupResourceManualDownload();
-				}
-
-				const hash = renderSettings.noteHash;
-				const initialScroll = renderSettings.initialScroll;
-
-				// Don't scroll to a hash if we're given initial scroll (initial scroll
-				// overrides scrolling to a hash).
-				if ((initialScroll ?? null) !== null) {
-					const scrollingElement = document.scrollingElement ?? document.documentElement;
-					scrollingElement.scrollTop = initialScroll;
-				} else if (hash) {
-					// Gives it a bit of time before scrolling to the anchor
-					// so that images are loaded.
-					setTimeout(() => {
-						const e = document.getElementById(hash);
-						if (!e) {
-							console.warn('Cannot find hash', hash);
-							return;
-						}
-						e.scrollIntoView();
-					}, 500);
-				}
-			}
-		}, 10);
-	}
-
-	public clearCache(markupLanguage: MarkupLanguage) {
-		this.markupToHtml.clearCache(markupLanguage);
-	}
-
-	private extraCssElements: Record<string, HTMLStyleElement> = {};
-	public setExtraCss(key: string, css: string) {
-		if (this.extraCssElements.hasOwnProperty(key)) {
-			this.extraCssElements[key].remove();
-		}
-
-		const extraCssElement = document.createElement('style');
-		extraCssElement.appendChild(document.createTextNode(css));
-		document.head.appendChild(extraCssElement);
-
-		this.extraCssElements[key] = extraCssElement;
-	}
-}
diff --git a/packages/app-mobile/components/NoteBodyViewer/bundledJs/noteBodyViewerBundle.ts b/packages/app-mobile/components/NoteBodyViewer/bundledJs/noteBodyViewerBundle.ts
deleted file mode 100644
index 93b5b9d0cb..0000000000
--- a/packages/app-mobile/components/NoteBodyViewer/bundledJs/noteBodyViewerBundle.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-
-import WebViewToRNMessenger from '../../../utils/ipc/WebViewToRNMessenger';
-import { NoteViewerLocalApi, NoteViewerRemoteApi, RendererWebViewOptions, WebViewLib } from './types';
-import Renderer from './Renderer';
-
-declare global {
-	interface Window {
-		rendererWebViewOptions: RendererWebViewOptions;
-		webviewLib: WebViewLib;
-	}
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-declare const webviewLib: WebViewLib;
-
-const messenger = new WebViewToRNMessenger<NoteViewerLocalApi, NoteViewerRemoteApi>(
-	'note-viewer',
-	null,
-);
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-(window as any).joplinPostMessage_ = (message: string, _args: any) => {
-	return messenger.remoteApi.onPostMessage(message);
-};
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-(window as any).webviewApi = {
-	postMessage: messenger.remoteApi.onPostPluginMessage,
-};
-
-webviewLib.initialize({
-	postMessage: (message: string) => {
-		messenger.remoteApi.onPostMessage(message);
-	},
-});
-// Share the webview library globally so that the renderer can access it.
-window.webviewLib = webviewLib;
-
-window.webviewLib = webviewLib;
-
-const renderer = new Renderer({
-	...window.rendererWebViewOptions,
-	fsDriver: messenger.remoteApi.fsDriver,
-});
-
-messenger.setLocalInterface({
-	renderer,
-	jumpToHash: (hash: string) => {
-		location.hash = `#${hash}`;
-	},
-});
-
-const lastScrollTop: number|null = null;
-const onMainContentScroll = () => {
-	const newScrollTop = document.scrollingElement.scrollTop;
-	if (lastScrollTop !== newScrollTop) {
-		messenger.remoteApi.onScroll(newScrollTop);
-	}
-};
-
-// Listen for events on both scrollingElement and window
-// - On Android, scrollingElement.addEventListener('scroll', callback) doesn't call callback on
-// scroll. However, window.addEventListener('scroll', callback) does.
-// - iOS needs a listener to be added to scrollingElement -- events aren't received when
-//   the listener is added to window with window.addEventListener('scroll', ...).
-document.scrollingElement?.addEventListener('scroll', onMainContentScroll);
-window.addEventListener('scroll', onMainContentScroll);
diff --git a/packages/app-mobile/components/NoteBodyViewer/bundledJs/types.ts b/packages/app-mobile/components/NoteBodyViewer/bundledJs/types.ts
deleted file mode 100644
index e7c08709ad..0000000000
--- a/packages/app-mobile/components/NoteBodyViewer/bundledJs/types.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { FsDriver as RendererFsDriver } from '@joplin/renderer/types';
-import Renderer from './Renderer';
-
-export interface RendererWebViewOptions {
-	settings: {
-		safeMode: boolean;
-		tempDir: string;
-		resourceDir: string;
-		resourceDownloadMode: string;
-	};
-	useTransferredFiles: boolean;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	pluginOptions: Record<string, any>;
-}
-
-export interface ExtraContentScriptSource {
-	id: string;
-	js: string;
-	assetPath: string;
-	pluginId: string;
-}
-
-export interface NoteViewerLocalApi {
-	renderer: Renderer;
-	jumpToHash: (hash: string)=> void;
-}
-
-export interface NoteViewerRemoteApi {
-	onScroll(scrollTop: number): void;
-	onPostMessage(message: string): void;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	onPostPluginMessage(contentScriptId: string, message: any): Promise<any>;
-	fsDriver: RendererFsDriver;
-}
-
-export interface WebViewLib {
-	initialize(config: unknown): void;
-}
-
diff --git a/packages/app-mobile/components/NoteBodyViewer/hooks/useRenderer.ts b/packages/app-mobile/components/NoteBodyViewer/hooks/useRenderer.ts
deleted file mode 100644
index aefbb225d3..0000000000
--- a/packages/app-mobile/components/NoteBodyViewer/hooks/useRenderer.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Dispatch, RefObject, SetStateAction, useEffect, useMemo, useRef } from 'react';
-import { WebViewControl } from '../../ExtendedWebView/types';
-import { OnScrollCallback, OnWebViewMessageHandler } from '../types';
-import RNToWebViewMessenger from '../../../utils/ipc/RNToWebViewMessenger';
-import { NoteViewerLocalApi, NoteViewerRemoteApi } from '../bundledJs/types';
-import shim from '@joplin/lib/shim';
-import { WebViewMessageEvent } from 'react-native-webview';
-import PluginService from '@joplin/lib/services/plugins/PluginService';
-import Logger from '@joplin/utils/Logger';
-
-const logger = Logger.create('useRenderer');
-
-interface Props {
-	webviewRef: RefObject<WebViewControl>;
-	onScroll: OnScrollCallback;
-	onPostMessage: (message: string)=> void;
-	setOnWebViewMessage: Dispatch<SetStateAction<OnWebViewMessageHandler>>;
-	webViewLoaded: boolean;
-
-	tempDir: string;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-const onPostPluginMessage = async (contentScriptId: string, message: any) => {
-	logger.debug(`Handling message from content script: ${contentScriptId}:`, message);
-
-	const pluginService = PluginService.instance();
-	const pluginId = pluginService.pluginIdByContentScriptId(contentScriptId);
-	if (!pluginId) {
-		throw new Error(`Plugin not found for content script with ID ${contentScriptId}`);
-	}
-
-	const plugin = pluginService.pluginById(pluginId);
-	return plugin.emitContentScriptMessage(contentScriptId, message);
-};
-
-const useRenderer = (props: Props) => {
-	const onScrollRef = useRef(props.onScroll);
-	onScrollRef.current = props.onScroll;
-
-	const onPostMessageRef = useRef(props.onPostMessage);
-	onPostMessageRef.current = props.onPostMessage;
-
-	const messenger = useMemo(() => {
-		const fsDriver = shim.fsDriver();
-		const localApi = {
-			onScroll: (fraction: number) => onScrollRef.current?.(fraction),
-			onPostMessage: (message: string) => onPostMessageRef.current?.(message),
-			onPostPluginMessage,
-			fsDriver: {
-				writeFile: async (path: string, content: string, encoding?: string) => {
-					if (!await fsDriver.exists(props.tempDir)) {
-						await fsDriver.mkdir(props.tempDir);
-					}
-					// To avoid giving the WebView access to the entire main tempDir,
-					// we use props.tempDir (which should be different).
-					path = fsDriver.resolveRelativePathWithinDir(props.tempDir, path);
-					return await fsDriver.writeFile(path, content, encoding);
-				},
-				exists: fsDriver.exists,
-				cacheCssToFile: fsDriver.cacheCssToFile,
-			},
-		};
-		return new RNToWebViewMessenger<NoteViewerRemoteApi, NoteViewerLocalApi>(
-			'note-viewer', props.webviewRef, localApi,
-		);
-	}, [props.webviewRef, props.tempDir]);
-
-	useEffect(() => {
-		props.setOnWebViewMessage(() => (event: WebViewMessageEvent) => {
-			messenger.onWebViewMessage(event);
-		});
-	}, [messenger, props.setOnWebViewMessage]);
-
-	useEffect(() => {
-		if (props.webViewLoaded) {
-			messenger.onWebViewLoaded();
-		}
-	}, [messenger, props.webViewLoaded]);
-
-	return useMemo(() => {
-		return messenger.remoteApi.renderer;
-	}, [messenger]);
-};
-
-export default useRenderer;
diff --git a/packages/app-mobile/components/NoteBodyViewer/hooks/useRerenderHandler.ts b/packages/app-mobile/components/NoteBodyViewer/hooks/useRerenderHandler.ts
index 354a1807ef..0e7b136910 100644
--- a/packages/app-mobile/components/NoteBodyViewer/hooks/useRerenderHandler.ts
+++ b/packages/app-mobile/components/NoteBodyViewer/hooks/useRerenderHandler.ts
@@ -1,26 +1,20 @@
-import useAsyncEffect from '@joplin/lib/hooks/useAsyncEffect';
 import usePrevious from '@joplin/lib/hooks/usePrevious';
-import { themeStyle } from '@joplin/lib/theme';
 import { MarkupLanguage } from '@joplin/renderer';
-import useEditPopup from './useEditPopup';
-import Renderer from '../bundledJs/Renderer';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Logger from '@joplin/utils/Logger';
-import { ExtraContentScriptSource } from '../bundledJs/types';
-import Setting from '@joplin/lib/models/Setting';
-import shim from '@joplin/lib/shim';
+import { ResourceEntity, ResourceLocalStateEntity } from '@joplin/lib/services/database/types';
+import { RendererControl, RenderOptions } from '../../../contentScripts/rendererBundle/types';
 import Resource from '@joplin/lib/models/Resource';
-import { ResourceEntity } from '@joplin/lib/services/database/types';
-import resolvePathWithinDir from '@joplin/lib/utils/resolvePathWithinDir';
+import useAsyncEffect from '@joplin/lib/hooks/useAsyncEffect';
 
 
 export interface ResourceInfo {
-	localState: unknown;
+	localState: ResourceLocalStateEntity;
 	item: ResourceEntity;
 }
 
 interface Props {
-	renderer: Renderer;
+	renderer: RendererControl;
 
 	noteBody: string;
 	noteMarkupLanguage: MarkupLanguage;
@@ -33,8 +27,6 @@ interface Props {
 	initialScroll: number|undefined;
 
 	paddingBottom: number;
-
-	contentScripts: ExtraContentScriptSource[];
 }
 
 const onlyCheckboxHasChangedHack = (previousBody: string, newBody: string) => {
@@ -56,10 +48,35 @@ const onlyCheckboxHasChangedHack = (previousBody: string, newBody: string) => {
 
 const logger = Logger.create('useRerenderHandler');
 
-const useRerenderHandler = (props: Props) => {
-	const { createEditPopupSyntax, destroyEditPopupSyntax, editPopupCss } = useEditPopup(props.themeId);
+const useResourceLoadCounter = (noteResources: Record<string, ResourceInfo>) => {
 	const [lastResourceLoadCounter, setLastResourceLoadCounter] = useState(0);
-	const [pluginSettingKeys, setPluginSettingKeys] = useState<Record<string, boolean>>({});
+	const lastDownloadCount = useRef(-1);
+	useEffect(() => {
+		let downloadedCount = 0;
+		for (const resource of Object.values(noteResources)) {
+			if (resource.localState.fetch_status === Resource.FETCH_STATUS_DONE) {
+				downloadedCount ++;
+			}
+		}
+
+		if (lastDownloadCount.current !== -1 && lastDownloadCount.current < downloadedCount) {
+			setLastResourceLoadCounter(counter => counter + 1);
+		}
+		lastDownloadCount.current = downloadedCount;
+	}, [noteResources]);
+
+	return lastResourceLoadCounter;
+};
+
+const useRerenderHandler = (props: Props) => {
+	const resourceDownloadRerenderCounter = useResourceLoadCounter(props.noteResources);
+	useEffect(() => {
+		// Whenever a resource state changes, for example when it goes from "not downloaded" to "downloaded", the "noteResources"
+		// props changes, thus triggering a render. The **content** of this noteResources array however is not changed because
+		// it doesn't contain info about the resource download state. Because of that, if we were to use the markupToHtml() cache
+		// it wouldn't re-render at all.
+		props.renderer.clearCache(props.noteMarkupLanguage);
+	}, [resourceDownloadRerenderCounter, props.renderer, props.noteMarkupLanguage]);
 
 	// To address https://github.com/laurent22/joplin/issues/433
 	//
@@ -82,8 +99,8 @@ const useRerenderHandler = (props: Props) => {
 	// below logic rely on this.
 	const effectDependencies = [
 		props.noteBody, props.noteMarkupLanguage, props.renderer, props.highlightedKeywords,
-		props.noteHash, props.noteResources, props.themeId, props.paddingBottom, lastResourceLoadCounter,
-		createEditPopupSyntax, destroyEditPopupSyntax, pluginSettingKeys, props.fontSize,
+		props.noteHash, props.noteResources, props.themeId, props.paddingBottom, resourceDownloadRerenderCounter,
+		props.fontSize,
 	];
 	const previousDeps = usePrevious(effectDependencies, []);
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
@@ -99,125 +116,42 @@ const useRerenderHandler = (props: Props) => {
 	const previousHash = usePrevious(props.noteHash, '');
 	const hashChanged = previousHash !== props.noteHash;
 
-	useEffect(() => {
-		// Whenever a resource state changes, for example when it goes from "not downloaded" to "downloaded", the "noteResources"
-		// props changes, thus triggering a render. The **content** of this noteResources array however is not changed because
-		// it doesn't contain info about the resource download state. Because of that, if we were to use the markupToHtml() cache
-		// it wouldn't re-render at all.
-		props.renderer.clearCache(props.noteMarkupLanguage);
-	}, [lastResourceLoadCounter, props.renderer, props.noteMarkupLanguage]);
-
-	useEffect(() => {
-		void props.renderer.setExtraContentScriptsAndRerender(props.contentScripts);
-	}, [props.contentScripts, props.renderer]);
-
-	useAsyncEffect(async event => {
+	useAsyncEffect(async (event) => {
 		if (onlyNoteBodyHasChanged && onlyCheckboxesHaveChanged) {
 			logger.info('Only a checkbox has changed - not updating HTML');
 			return;
 		}
 
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-		const pluginSettings: Record<string, any> = { };
-		for (const key in pluginSettingKeys) {
-			pluginSettings[key] = Setting.value(`plugin-${key}`);
-		}
-		let newPluginSettingKeys = pluginSettingKeys;
-
-		// On web, resources are virtual files and thus need to be transferred to the WebView.
-		if (shim.mobilePlatform() === 'web') {
-			for (const [resourceId, resource] of Object.entries(props.noteResources)) {
-				try {
-					await props.renderer.setResourceFile(
-						resourceId,
-						await shim.fsDriver().fileAtPath(Resource.fullPath(resource.item)),
-					);
-				} catch (error) {
-					if (error.code !== 'ENOENT') {
-						throw error;
-					}
-
-					// This can happen if a resource hasn't been downloaded yet
-					logger.warn('Error: Resource file not found (ENOENT)', Resource.fullPath(resource.item), 'for ID', resource.item.id);
-				}
-			}
-		}
-
-		const theme = themeStyle(props.themeId);
-		const config = {
-			// We .stringify the theme to avoid a JSON serialization error involving
-			// the color package.
-			theme: JSON.stringify({
+		const config: RenderOptions = {
+			themeId: props.themeId,
+			themeOverrides: {
 				bodyPaddingTop: '0.8em',
 				bodyPaddingBottom: props.paddingBottom,
-				...theme,
-
 				noteViewerFontSize: props.fontSize,
-			}),
-			codeTheme: theme.codeThemeCss,
-
-			onResourceLoaded: () => {
-				// Force a rerender when a resource loads
-				setLastResourceLoadCounter(lastResourceLoadCounter + 1);
 			},
 			highlightedKeywords: props.highlightedKeywords,
 			resources: props.noteResources,
+			pluginAssetContainerSelector: '#joplin-container-pluginAssetsContainer',
 
 			// If the hash changed, we don't set initial scroll -- we want to scroll to the hash
 			// instead.
 			initialScroll: (previousHash && hashChanged) ? undefined : props.initialScroll,
 			noteHash: props.noteHash,
-
-			pluginSettings,
-			requestPluginSetting: (pluginId: string, settingKey: string) => {
-				// Don't trigger additional renders
-				if (event.cancelled) return;
-
-				const key = `${pluginId}.${settingKey}`;
-				logger.debug(`Request plugin setting: plugin-${key}`);
-
-				if (!(key in newPluginSettingKeys)) {
-					newPluginSettingKeys = { ...newPluginSettingKeys, [`${pluginId}.${settingKey}`]: true };
-					setPluginSettingKeys(newPluginSettingKeys);
-				}
-			},
-			readAssetBlob: (assetPath: string) => {
-				// Built-in assets are in resourceDir, external plugin assets are in cacheDir.
-				const assetsDirs = [Setting.value('resourceDir'), Setting.value('cacheDir')];
-
-				let resolvedPath = null;
-				for (const assetDir of assetsDirs) {
-					resolvedPath ??= resolvePathWithinDir(assetDir, assetPath);
-					if (resolvedPath) break;
-				}
-
-				if (!resolvedPath) {
-					throw new Error(`Failed to load asset at ${assetPath} -- not in any of the allowed asset directories: ${assetsDirs.join(',')}.`);
-				}
-				return shim.fsDriver().fileAtPath(resolvedPath);
-			},
-
-			createEditPopupSyntax,
-			destroyEditPopupSyntax,
 		};
 
 		try {
 			logger.debug('Starting render...');
 
-			await props.renderer.rerender({
+			await props.renderer.rerenderToBody({
 				language: props.noteMarkupLanguage,
 				markup: props.noteBody,
-			}, config);
+			}, config, event);
 
 			logger.debug('Render complete.');
 		} catch (error) {
 			logger.error('Render failed:', error);
 		}
 	}, effectDependencies);
-
-	useEffect(() => {
-		props.renderer.setExtraCss('edit-popup', editPopupCss);
-	}, [editPopupCss, props.renderer]);
 };
 
 export default useRerenderHandler;
diff --git a/packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts b/packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts
index f595137ed2..90c8595344 100644
--- a/packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts
+++ b/packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts
@@ -1,49 +1,15 @@
 import { useMemo } from 'react';
 import shim from '@joplin/lib/shim';
-import Setting from '@joplin/lib/models/Setting';
-import { RendererWebViewOptions } from '../bundledJs/types';
 import { themeStyle } from '../../global-style';
-import { Platform } from 'react-native';
-
-const useSource = (tempDirPath: string, themeId: number) => {
-	const injectedJs = useMemo(() => {
-		const subValues = Setting.subValues('markdown.plugin', Setting.toPlainObject());
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-		const pluginOptions: any = {};
-		for (const n in subValues) {
-			pluginOptions[n] = { enabled: subValues[n] };
-		}
-
-		const rendererWebViewOptions: RendererWebViewOptions = {
-			settings: {
-				safeMode: Setting.value('isSafeMode'),
-				tempDir: tempDirPath,
-				resourceDir: Setting.value('resourceDir'),
-				resourceDownloadMode: Setting.value('sync.resourceDownloadMode'),
-			},
-			// Web needs files to be transferred manually, since image SRCs can't reference
-			// the Origin Private File System.
-			useTransferredFiles: Platform.OS === 'web',
-			pluginOptions,
-		};
-
-		return `
-			window.rendererWebViewOptions = ${JSON.stringify(rendererWebViewOptions)};
-
-			if (!window.injectedJsLoaded) {
-				window.injectedJsLoaded = true;
-
-				${shim.injectedJs('webviewLib')}
-				${shim.injectedJs('noteBodyViewerBundle')}
-			}
-		`;
-	}, [tempDirPath]);
+import { PageSetupSources } from '../../../contentScripts/types';
 
+const useSource = (rendererSource: PageSetupSources, themeId: number) => {
 	const [paddingLeft, paddingRight] = useMemo(() => {
 		const theme = themeStyle(themeId);
 		return [theme.marginLeft, theme.marginRight];
 	}, [themeId]);
 
+	const rendererBaseCss = rendererSource.css;
 	const html = useMemo(() => {
 		// iOS doesn't automatically adjust the WebView's font size to match users'
 		// accessibility settings. To do this, we need to tell it to match the system font.
@@ -75,6 +41,7 @@ const useSource = (tempDirPath: string, themeId: number) => {
 					<meta name="viewport" content="width=device-width, initial-scale=1">
 					<style>
 						${defaultCss}
+						${rendererBaseCss}
 						${shim.mobilePlatform() === 'ios' ? iOSSpecificCss : ''}
 					</style>
 				</head>
@@ -84,9 +51,9 @@ const useSource = (tempDirPath: string, themeId: number) => {
 				</body>
 			</html>
 		`;
-	}, [paddingLeft, paddingRight]);
+	}, [paddingLeft, paddingRight, rendererBaseCss]);
 
-	return { html, injectedJs };
+	return { html, js: rendererSource.js };
 };
 
 export default useSource;
diff --git a/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts b/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts
deleted file mode 100644
index 3df08b7d71..0000000000
--- a/packages/app-mobile/components/NoteEditor/CodeMirror/CodeMirror.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-
-// This contains the CodeMirror instance, which needs to be built into a bundle
-// using `yarn buildInjectedJs`. This bundle is then loaded from
-// NoteEditor.tsx into the webview.
-//
-// In general, since this file is harder to debug due to the intermediate built
-// step, it's better to keep it as light as possible - it should just be a light
-// wrapper to access CodeMirror functionalities. Anything else should be done
-// from NoteEditor.tsx.
-
-import { EditorSettings } from '@joplin/editor/types';
-import createEditor from '@joplin/editor/CodeMirror/createEditor';
-import CodeMirrorControl from '@joplin/editor/CodeMirror/CodeMirrorControl';
-import WebViewToRNMessenger from '../../../utils/ipc/WebViewToRNMessenger';
-import { WebViewToEditorApi } from '../types';
-import { focus } from '@joplin/lib/utils/focusHandler';
-import Logger, { TargetType } from '@joplin/utils/Logger';
-
-let loggerCreated = false;
-export const setUpLogger = () => {
-	if (!loggerCreated) {
-		const logger = new Logger();
-		logger.addTarget(TargetType.Console);
-		logger.setLevel(Logger.LEVEL_WARN);
-		Logger.initializeGlobalLogger(logger);
-		loggerCreated = true;
-	}
-};
-
-export const initCodeMirror = (
-	parentElement: HTMLElement,
-	initialText: string,
-	initialNoteId: string,
-	settings: EditorSettings,
-): CodeMirrorControl => {
-	const messenger = new WebViewToRNMessenger<CodeMirrorControl, WebViewToEditorApi>('editor', null);
-
-	const control = createEditor(parentElement, {
-		initialText,
-		initialNoteId,
-		settings,
-
-		onPasteFile: async (data) => {
-			const reader = new FileReader();
-			return new Promise<void>((resolve, reject) => {
-				reader.onload = async () => {
-					const dataUrl = reader.result as string;
-					const base64 = dataUrl.replace(/^data:.*;base64,/, '');
-					await messenger.remoteApi.onPasteFile(data.type, base64);
-					resolve();
-				};
-				reader.onerror = () => reject(new Error('Failed to load file.'));
-
-				reader.readAsDataURL(data);
-			});
-		},
-
-		onLogMessage: message => {
-			void messenger.remoteApi.logMessage(message);
-		},
-		onEvent: (event): void => {
-			void messenger.remoteApi.onEditorEvent(event);
-		},
-	});
-
-	// Works around https://github.com/laurent22/joplin/issues/10047 by handling
-	// the text/uri-list MIME type when pasting, rather than sending the paste event
-	// to CodeMirror.
-	//
-	// TODO: Remove this workaround when the issue has been fixed upstream.
-	control.on('paste', (_editor, event: ClipboardEvent) => {
-		const clipboardData = event.clipboardData;
-		if (clipboardData.types.length === 1 && clipboardData.types[0] === 'text/uri-list') {
-			event.preventDefault();
-			control.insertText(clipboardData.getData('text/uri-list'));
-		}
-	});
-
-	// Note: Just adding an onclick listener seems sufficient to focus the editor when its background
-	// is tapped.
-	parentElement.addEventListener('click', (event) => {
-		const activeElement = document.querySelector(':focus');
-		if (!parentElement.contains(activeElement) && event.target === parentElement) {
-			focus('initial editor focus', control);
-		}
-	});
-
-	messenger.setLocalInterface(control);
-	return control;
-};
diff --git a/packages/app-mobile/components/NoteEditor/CodeMirror/demo.html b/packages/app-mobile/components/NoteEditor/CodeMirror/demo.html
deleted file mode 100644
index f1a4dd6c6a..0000000000
--- a/packages/app-mobile/components/NoteEditor/CodeMirror/demo.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
-	Open this file in a web browser to more easily debug the CodeMirror editor.
-	Messages will show up in the console when posted.
--->
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
-		<meta charset="utf-8"/>
-		<title>CodeMirror test</title>
-	</head>
-	<body>
-		<div class="CodeMirror"></div>
-		<script>
-			// Override the default postMessage — codeMirrorBundle expects
-			// this to be present.
-			window.ReactNativeWebView = {
-				postMessage: message => {
-					console.log('postMessage:', message);
-				},
-			};
-		</script>
-		<script src="./CodeMirror.bundle.js"></script>
-		<script>
-			const parent = document.querySelector('.CodeMirror');
-			const initialText = 'Testing...';
-
-			const settings = {
-				themeData: {
-					fontSize: 12, // px
-					fontFamily: 'serif',
-					backgroundColor: 'black',
-					color: 'white',
-					backgroundColor2: '#330',
-					color2: '#ff0',
-					backgroundColor3: '#404',
-					color3: '#f0f',
-					backgroundColor4: '#555',
-					color4: '#0ff',
-					appearance: 'dark',
-				},
-				themeId: 0,
-				spellcheckEnabled: true,
-				language: 'markdown',
-				katexEnabled: true,
-				useExternalSearch: false,
-				readOnly: false,
-
-				keymap: 'default',
-
-				automatchBraces: false,
-				ignoreModifiers: false,
-
-				indentWithTabs: false,
-			};
-
-			window.cm = codeMirrorBundle.initCodeMirror(parent, initialText, settings);
-		</script>
-	</body>
-</html>
\ No newline at end of file
diff --git a/packages/app-mobile/components/NoteEditor/ImageEditor/ImageEditor.tsx b/packages/app-mobile/components/NoteEditor/ImageEditor/ImageEditor.tsx
index fa097c9762..7ea060a5d3 100644
--- a/packages/app-mobile/components/NoteEditor/ImageEditor/ImageEditor.tsx
+++ b/packages/app-mobile/components/NoteEditor/ImageEditor/ImageEditor.tsx
@@ -1,20 +1,13 @@
 import * as React from 'react';
 import { _ } from '@joplin/lib/locale';
 import Logger from '@joplin/utils/Logger';
-import Setting from '@joplin/lib/models/Setting';
-import shim from '@joplin/lib/shim';
-import { themeStyle } from '@joplin/lib/theme';
-import { Theme } from '@joplin/lib/themes/type';
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Platform } from 'react-native';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import ExtendedWebView from '../../ExtendedWebView';
 import { OnMessageEvent, WebViewControl } from '../../ExtendedWebView/types';
-import { clearAutosave } from './autosave';
-import { LocalizedStrings } from './js-draw/types';
+import { clearAutosave, writeAutosave } from './autosave';
 import { DialogContext } from '../../DialogManager';
-import useEditorMessenger from './utils/useEditorMessenger';
 import BackButtonService from '../../../services/BackButtonService';
-
+import useWebViewSetup, { ImageEditorControl } from '../../../contentScripts/imageEditorBundle/useWebViewSetup';
 
 const logger = Logger.create('ImageEditor');
 
@@ -28,69 +21,15 @@ interface Props {
 	onExit: OnCancelCallback;
 }
 
-const useCss = (editorTheme: Theme) => {
-	return useMemo(() => {
-		// Ensure we have contrast between the background and selection. Some themes
-		// have the same backgroundColor and selectionColor2. (E.g. Aritim Dark)
-		let selectionBackgroundColor = editorTheme.selectedColor2;
-		if (selectionBackgroundColor === editorTheme.backgroundColor) {
-			selectionBackgroundColor = editorTheme.selectedColor;
-		}
-
-		return `
-			:root .imageEditorContainer {
-				--background-color-1: ${editorTheme.backgroundColor};
-				--foreground-color-1: ${editorTheme.color};
-				--background-color-2: ${editorTheme.backgroundColor3};
-				--foreground-color-2: ${editorTheme.color3};
-				--background-color-3: ${editorTheme.raisedBackgroundColor};
-				--foreground-color-3: ${editorTheme.raisedColor};
-			
-				--selection-background-color: ${editorTheme.backgroundColorHover3};
-				--selection-foreground-color: ${editorTheme.color3};
-				--primary-action-foreground-color: ${editorTheme.color4};
-
-				--primary-shadow-color: ${editorTheme.colorFaded};
-
-				width: 100vw;
-				height: 100vh;
-				box-sizing: border-box;
-			}
-
-			body, html {
-				padding: 0;
-				margin: 0;
-				overflow: hidden;
-			}
-
-			/* Hide the scrollbar. See scrollbar accessibility concerns
-			   (https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width#accessibility_concerns)
-			   for why this isn't done in js-draw itself. */
-			.toolbar-tool-row::-webkit-scrollbar {
-				display: none;
-				height: 0;
-			}
-
-			/* Hide the save/close icons on small screens. This isn't done in the upstream
-			   js-draw repository partially because it isn't as well localized as Joplin
-			   (icons can be used to suggest the meaning of a button when a translation is
-			   unavailable). */
-			.toolbar-edge-toolbar:not(.one-row) .toolwidget-tag--save .toolbar-icon,
-			.toolbar-edge-toolbar:not(.one-row) .toolwidget-tag--exit .toolbar-icon {
-				display: none;
-			}
-		`;
-	}, [editorTheme]);
-};
 
 const ImageEditor = (props: Props) => {
-	const editorTheme: Theme = themeStyle(props.themeId);
-	const webviewRef = useRef<WebViewControl|null>(null);
+	const webViewRef = useRef<WebViewControl|null>(null);
 	const [imageChanged, setImageChanged] = useState(false);
 
+	const editorControlRef = useRef<ImageEditorControl|null>(null);
 	const dialogs = useContext(DialogContext);
 
-	const onRequestCloseEditor = useCallback((promptIfUnsaved: boolean) => {
+	const onRequestCloseEditor = useCallback((promptIfUnsaved = true) => {
 		const discardChangesAndClose = async () => {
 			await clearAutosave();
 			props.onExit();
@@ -98,7 +37,7 @@ const ImageEditor = (props: Props) => {
 
 		if (!imageChanged || !promptIfUnsaved) {
 			void discardChangesAndClose();
-			return true;
+			return;
 		}
 
 		dialogs.prompt(
@@ -113,13 +52,12 @@ const ImageEditor = (props: Props) => {
 					onPress: () => {
 						// saveDrawing calls props.onSave(...) which may close the
 						// editor.
-						webviewRef.current.injectJS('window.editorControl.saveThenExit()');
+						void editorControlRef.current.saveThenExit();
 					},
 				},
 			],
 		);
-		return true;
-	}, [webviewRef, dialogs, props.onExit, imageChanged]);
+	}, [dialogs, props.onExit, imageChanged]);
 
 	useEffect(() => {
 		const hardwareBackPressListener = () => {
@@ -133,9 +71,18 @@ const ImageEditor = (props: Props) => {
 		};
 	}, [onRequestCloseEditor]);
 
-	const css = useCss(editorTheme);
-	const [html, setHtml] = useState('');
+	const { pageSetup, api: editorControl, webViewEventHandlers } = useWebViewSetup({
+		webViewRef,
+		themeId: props.themeId,
+		onSetImageChanged: setImageChanged,
+		onAutoSave: writeAutosave,
+		onSave: props.onSave,
+		onRequestCloseEditor,
+		resourceFilename: props.resourceFilename,
+	});
+	editorControlRef.current = editorControl;
 
+	const [html, setHtml] = useState('');
 	useEffect(() => {
 		setHtml(`
 			<!DOCTYPE html>
@@ -144,8 +91,8 @@ const ImageEditor = (props: Props) => {
 					<meta charset="utf-8"/>
 					<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
 
-					<style id='main-style'>
-						${css}
+					<style>
+						${pageSetup.css}
 					</style>
 				</head>
 				<body></body>
@@ -160,112 +107,12 @@ const ImageEditor = (props: Props) => {
 		// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps
 	}, []);
 
-	// A set of localization overrides (Joplin is better localized than js-draw).
-	// All localizable strings (some unused?) can be found at
-	// https://github.com/personalizedrefrigerator/js-draw/blob/main/.github/ISSUE_TEMPLATE/translation-js-draw-new.yml
-	const localizedStrings: LocalizedStrings = useMemo(() => ({
-		save: _('Save'),
-		close: _('Close'),
-		undo: _('Undo'),
-		redo: _('Redo'),
-	}), []);
-
-	const appInfo = useMemo(() => {
-		return {
-			name: 'Joplin',
-			description: `v${shim.appVersion()}`,
-		};
-	}, []);
-
-	const injectedJavaScript = useMemo(() => `
-		window.onerror = (message, source, lineno) => {
-			window.ReactNativeWebView.postMessage(
-				"error: " + message + " in file://" + source + ", line " + lineno,
-			);
-		};
-
-		window.onunhandledrejection = (error) => {
-			window.ReactNativeWebView.postMessage(
-				"error: " + error.reason,
-			);
-		};
-
-		try {
-			if (window.editorControl === undefined) {
-				${shim.injectedJs('svgEditorBundle')}
-
-				window.editorControl = svgEditorBundle.createJsDrawEditor(
-					svgEditorBundle.createMessenger().remoteApi,
-					${JSON.stringify(Setting.value('imageeditor.jsdrawToolbar'))},
-					${JSON.stringify(Setting.value('locale'))},
-					${JSON.stringify(localizedStrings)},
-					${JSON.stringify({
-		appInfo,
-		...(shim.mobilePlatform() === 'web' ? {
-			// Use the browser-default clipboard API on web.
-			clipboardApi: null,
-		} : {}),
-	})},
-				);
-			}
-		} catch(e) {
-			window.ReactNativeWebView.postMessage(
-				'error: ' + e.message + ': ' + JSON.stringify(e)
-			);
-		}
-		true;
-	`, [localizedStrings, appInfo]);
-
-	useEffect(() => {
-		webviewRef.current?.injectJS(`
-			document.querySelector('#main-style').textContent = ${JSON.stringify(css)};
-
-			if (window.editorControl) {
-				window.editorControl.onThemeUpdate();
-			}
-		`);
-	}, [css]);
-
-	const onReadyToLoadData = useCallback(async () => {
-		const getInitialInjectedData = async () => {
-			// On mobile, it's faster to load the image within the WebView with an XMLHttpRequest.
-			// In this case, the image is loaded elsewhere.
-			if (Platform.OS !== 'web') {
-				return undefined;
-			}
-
-			// On web, however, this doesn't work, so the image needs to be loaded here.
-			if (!props.resourceFilename) {
-				return '';
-			}
-			return await shim.fsDriver().readFile(props.resourceFilename, 'utf-8');
-		};
-		// It can take some time for initialSVGData to be transferred to the WebView.
-		// Thus, do so after the main content has been loaded.
-		webviewRef.current.injectJS(`(async () => {
-			if (window.editorControl) {
-				const initialSVGPath = ${JSON.stringify(props.resourceFilename)};
-				const initialTemplateData = ${JSON.stringify(Setting.value('imageeditor.imageTemplate'))};
-				const initialData = ${JSON.stringify(await getInitialInjectedData())};
-
-				editorControl.loadImageOrTemplate(initialSVGPath, initialTemplateData, initialData);
-			}
-		})();`);
-	}, [webviewRef, props.resourceFilename]);
-
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 	const onError = useCallback((event: any) => {
 		logger.error('ImageEditor: WebView error: ', event);
 	}, []);
 
-	const messenger = useEditorMessenger({
-		webviewRef,
-		setImageChanged,
-		onReadyToLoadData,
-		onSave: props.onSave,
-		onRequestCloseEditor,
-	});
-
+	const onWebViewMessage = webViewEventHandlers.onMessage;
 	const onMessage = useCallback((event: OnMessageEvent) => {
 		const data = event.nativeEvent.data;
 		if (typeof data === 'string' && data.startsWith('error:')) {
@@ -273,18 +120,18 @@ const ImageEditor = (props: Props) => {
 			return;
 		}
 
-		messenger.onWebViewMessage(event);
-	}, [messenger]);
+		onWebViewMessage(event);
+	}, [onWebViewMessage]);
 
 	return (
 		<ExtendedWebView
 			html={html}
-			injectedJavaScript={injectedJavaScript}
+			injectedJavaScript={pageSetup.js}
 			allowFileAccessFromJs={true}
 			onMessage={onMessage}
-			onLoadEnd={messenger.onWebViewLoaded}
+			onLoadEnd={webViewEventHandlers.onLoadEnd}
 			onError={onError}
-			ref={webviewRef}
+			ref={webViewRef}
 			webviewInstanceId={'image-editor-js-draw'}
 		/>
 	);
diff --git a/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/polyfills.ts b/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/polyfills.ts
deleted file mode 100644
index ee4d188bcd..0000000000
--- a/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/polyfills.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// .replaceChildren is not supported in Chromium 83, which is the default for Android 11
-// (unless auto-updated from the Google Play store).
-HTMLElement.prototype.replaceChildren ??= function(this: HTMLElement, ...nodes: Node[]) {
-	while (this.children.length) {
-		this.children[0].remove();
-	}
-
-	for (const node of nodes) {
-		this.appendChild(node);
-	}
-};
diff --git a/packages/app-mobile/components/NoteEditor/MarkdownEditor.tsx b/packages/app-mobile/components/NoteEditor/MarkdownEditor.tsx
new file mode 100644
index 0000000000..ab8690415c
--- /dev/null
+++ b/packages/app-mobile/components/NoteEditor/MarkdownEditor.tsx
@@ -0,0 +1,193 @@
+import { themeStyle } from '@joplin/lib/theme';
+import themeToCss from '@joplin/lib/services/style/themeToCss';
+import ExtendedWebView from '../ExtendedWebView';
+
+import * as React from 'react';
+import { useEffect } from 'react';
+import { useMemo, useCallback } from 'react';
+import { NativeSyntheticEvent } from 'react-native';
+
+import { EditorProps } from './types';
+import { _ } from '@joplin/lib/locale';
+import useCodeMirrorPlugins from './hooks/useCodeMirrorPlugins';
+import { WebViewErrorEvent } from 'react-native-webview/lib/RNCWebViewNativeComponent';
+import Logger from '@joplin/utils/Logger';
+import { OnMessageEvent } from '../ExtendedWebView/types';
+import useWebViewSetup from '../../contentScripts/markdownEditorBundle/useWebViewSetup';
+
+const logger = Logger.create('MarkdownEditor');
+
+function useCss(themeId: number): string {
+	return useMemo(() => {
+		const theme = themeStyle(themeId);
+		const themeVariableCss = themeToCss(theme);
+		return `
+			${themeVariableCss}
+
+			:root {
+				background-color: ${theme.backgroundColor};
+			}
+
+			body {
+				margin: 0;
+				height: 100vh;
+				/* Prefer 100% -- 100vw shows an unnecessary horizontal scrollbar in Google Chrome (desktop). */
+				width: 100%;
+				box-sizing: border-box;
+
+				padding-left: 1px;
+				padding-right: 1px;
+				padding-bottom: 1px;
+				padding-top: 10px;
+
+				font-size: 13pt;
+			}
+
+			* {
+				scrollbar-width: thin;
+				scrollbar-color: rgba(100, 100, 100, 0.7) rgba(0, 0, 0, 0.1);
+			}
+
+			@supports selector(::-webkit-scrollbar) {
+				*::-webkit-scrollbar {
+					width: 7px;
+					height: 7px;
+				}
+
+				*::-webkit-scrollbar-corner {
+					background: none;
+				}
+
+				*::-webkit-scrollbar-track {
+					border: none;
+				}
+
+				*::-webkit-scrollbar-thumb {
+					background: rgba(100, 100, 100, 0.3);
+					border-radius: 5px;
+				}
+
+				*::-webkit-scrollbar-track:hover {
+					background: rgba(0, 0, 0, 0.1);
+				}
+
+				*::-webkit-scrollbar-thumb:hover {
+					background: rgba(100, 100, 100, 0.7);
+				}
+
+				* {
+					scrollbar-width: unset;
+					scrollbar-color: unset;
+				}
+			}
+		`;
+	}, [themeId]);
+}
+
+function useHtml(): string {
+	return useMemo(() => `
+		<!DOCTYPE html>
+		<html>
+			<head>
+				<meta charset="UTF-8">
+				<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+				<title>${_('Note editor')}</title>
+				<style>
+					/* For better scrolling on iOS (working scrollbar) we use external, rather than internal,
+						scrolling. */
+					.cm-scroller {
+						overflow: none;
+					}
+				</style>
+			</head>
+			<body>
+				<div class="CodeMirror" style="height:100%;" autocapitalize="on"></div>
+			</body>
+		</html>
+	`, []);
+}
+
+const MarkdownEditor: React.FC<EditorProps> = props => {
+	const webviewRef = props.webviewRef;
+
+	const editorWebViewSetup = useWebViewSetup({
+		initialSelection: props.initialSelection,
+		noteHash: props.noteHash,
+		globalSearch: props.globalSearch,
+		onEditorEvent: props.onEditorEvent,
+		onAttachFile: props.onAttach,
+		editorOptions: {
+			parentElementClassName: 'CodeMirror',
+			initialText: props.initialText,
+			initialNoteId: props.noteId,
+			settings: props.editorSettings,
+		},
+		webviewRef,
+	});
+
+	props.editorRef.current = editorWebViewSetup.api.editor;
+
+	const injectedJavaScript = `
+		window.onerror = (message, source, lineno) => {
+			console.error(message);
+			window.ReactNativeWebView.postMessage(
+				"error: " + message + " in file://" + source + ", line " + lineno
+			);
+		};
+		window.onunhandledrejection = (event) => {
+			window.ReactNativeWebView.postMessage(
+				"error: Unhandled promise rejection: " + event
+			);
+		};
+		
+		try {
+			${editorWebViewSetup.pageSetup.js}
+		} catch (e) {
+			console.error('Setup error: ', e);
+			window.ReactNativeWebView.postMessage("error:" + e.message + ": " + JSON.stringify(e))
+		}
+
+		true;
+	`;
+
+	const css = useCss(props.themeId);
+	const html = useHtml();
+
+	const codeMirrorPlugins = useCodeMirrorPlugins(props.plugins);
+	useEffect(() => {
+		void editorWebViewSetup.api.editor.setContentScripts(codeMirrorPlugins);
+	}, [codeMirrorPlugins, editorWebViewSetup]);
+
+	const onMessage = useCallback((event: OnMessageEvent) => {
+		const data = event.nativeEvent.data;
+
+		if (typeof data === 'string' && data.indexOf('error:') === 0) {
+			logger.error('CodeMirror error', data);
+			return;
+		}
+
+		editorWebViewSetup.webViewEventHandlers.onMessage(event);
+	}, [editorWebViewSetup]);
+
+	const onError = useCallback((event: NativeSyntheticEvent<WebViewErrorEvent>) => {
+		logger.error(`Load error: Code ${event.nativeEvent.code}: ${event.nativeEvent.description}`);
+	}, []);
+
+	return (
+		<ExtendedWebView
+			ref={webviewRef}
+			webviewInstanceId='MarkdownEditor'
+			testID='MarkdownEditor'
+			scrollEnabled={true}
+			html={html}
+			injectedJavaScript={injectedJavaScript}
+			css={css}
+			hasPluginScripts={codeMirrorPlugins.length > 0}
+			onMessage={onMessage}
+			onLoadEnd={editorWebViewSetup.webViewEventHandlers.onLoadEnd}
+			onError={onError}
+		/>
+	);
+};
+
+export default MarkdownEditor;
diff --git a/packages/app-mobile/components/NoteEditor/NoteEditor.test.tsx b/packages/app-mobile/components/NoteEditor/NoteEditor.test.tsx
index ac97cc5fd4..23420c9bd9 100644
--- a/packages/app-mobile/components/NoteEditor/NoteEditor.test.tsx
+++ b/packages/app-mobile/components/NoteEditor/NoteEditor.test.tsx
@@ -15,10 +15,31 @@ import mockCommandRuntimes from '../EditorToolbar/testing/mockCommandRuntimes';
 import setupGlobalStore from '../../utils/testing/setupGlobalStore';
 import { Store } from 'redux';
 import { AppState } from '../../utils/types';
+import { MarkupLanguage } from '@joplin/renderer';
+import { EditorType } from './types';
 
 let store: Store<AppState>;
 let registeredRuntime: RegisteredRuntime;
 
+const defaultEditorProps = {
+	themeId: Setting.THEME_ARITIM_DARK,
+	markupLanguage: MarkupLanguage.Markdown,
+	initialText: 'Testing...',
+	globalSearch: '',
+	noteId: '',
+	noteHash: '',
+	style: {},
+	toolbarEnabled: true,
+	readOnly: false,
+	onChange: ()=>{},
+	onSelectionChange: ()=>{},
+	onUndoRedoDepthChange: ()=>{},
+	onAttach: async ()=>{},
+	noteResources: {},
+	plugins: {},
+	mode: EditorType.Markdown,
+};
+
 describe('NoteEditor', () => {
 	beforeAll(() => {
 		// This allows the NoteEditor test to register editor commands without errors.
@@ -45,19 +66,8 @@ describe('NoteEditor', () => {
 		const wrappedNoteEditor = render(
 			<TestProviderStack store={store}>
 				<NoteEditor
-					themeId={Setting.THEME_ARITIM_DARK}
-					initialText='Testing...'
-					globalSearch=''
-					noteId=''
-					noteHash=''
-					style={{}}
-					toolbarEnabled={true}
-					readOnly={false}
-					onChange={()=>{}}
-					onSelectionChange={()=>{}}
-					onUndoRedoDepthChange={()=>{}}
-					onAttach={async ()=>{}}
-					plugins={{}}
+					ref={undefined}
+					{...defaultEditorProps}
 				/>
 			</TestProviderStack>,
 		);
@@ -99,4 +109,27 @@ describe('NoteEditor', () => {
 
 		wrappedNoteEditor.unmount();
 	});
+
+	it('should show a warning banner the first time the Rich Text Editor is used', () => {
+		const wrappedNoteEditor = render(
+			<TestProviderStack store={store}>
+				<NoteEditor
+					ref={undefined}
+					{...defaultEditorProps}
+					mode={EditorType.RichText}
+				/>
+			</TestProviderStack>,
+		);
+
+		const warningBannerQuery = /This Rich Text editor has a number of limitations.*/;
+		const warning = screen.getByText(warningBannerQuery);
+		expect(warning).toBeVisible();
+
+		// Pressing dismiss should dismiss the warning
+		const dismissButton = screen.getByHintText('Hides warning');
+		fireEvent.press(dismissButton);
+		expect(screen.queryByText(warningBannerQuery)).toBeNull();
+
+		wrappedNoteEditor.unmount();
+	});
 });
diff --git a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
index 600116613d..e96f605f28 100644
--- a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
+++ b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
@@ -1,46 +1,49 @@
 import Setting from '@joplin/lib/models/Setting';
-import shim from '@joplin/lib/shim';
 import { themeStyle } from '@joplin/lib/theme';
-import themeToCss from '@joplin/lib/services/style/themeToCss';
 import EditLinkDialog from './EditLinkDialog';
 import { defaultSearchState, SearchPanel } from './SearchPanel';
-import ExtendedWebView from '../ExtendedWebView';
 import { WebViewControl } from '../ExtendedWebView/types';
 
 import * as React from 'react';
-import { forwardRef, RefObject, useEffect, useImperativeHandle } from 'react';
+import { Ref, RefObject, useEffect, useImperativeHandle } from 'react';
 import { useMemo, useState, useCallback, useRef } from 'react';
-import { LayoutChangeEvent, NativeSyntheticEvent, View, ViewStyle } from 'react-native';
+import { LayoutChangeEvent, View, ViewStyle } from 'react-native';
 import { editorFont } from '../global-style';
 
 import { EditorControl as EditorBodyControl, ContentScriptData } from '@joplin/editor/types';
-import { EditorControl, EditorSettings, SelectionRange, WebViewToEditorApi } from './types';
+import { EditorControl, EditorSettings, EditorType } from './types';
 import { _ } from '@joplin/lib/locale';
 import { ChangeEvent, EditorEvent, EditorEventType, SelectionRangeChangeEvent, UndoRedoDepthChangeEvent } from '@joplin/editor/events';
 import { EditorCommandType, EditorKeymap, EditorLanguageType, SearchState } from '@joplin/editor/types';
 import SelectionFormatting, { defaultSelectionFormatting } from '@joplin/editor/SelectionFormatting';
-import useCodeMirrorPlugins from './hooks/useCodeMirrorPlugins';
-import RNToWebViewMessenger from '../../utils/ipc/RNToWebViewMessenger';
-import { WebViewErrorEvent } from 'react-native-webview/lib/RNCWebViewNativeComponent';
-import Logger from '@joplin/utils/Logger';
 import { PluginStates } from '@joplin/lib/services/plugins/reducer';
 import useEditorCommandHandler from './hooks/useEditorCommandHandler';
-import { OnMessageEvent } from '../ExtendedWebView/types';
-import { join, dirname } from 'path';
-import * as mimeUtils from '@joplin/lib/mime-utils';
-import uuid from '@joplin/lib/uuid';
 import EditorToolbar from '../EditorToolbar/EditorToolbar';
+import { SelectionRange } from '../../contentScripts/markdownEditorBundle/types';
+import MarkdownEditor from './MarkdownEditor';
+import RichTextEditor from './RichTextEditor';
+import { ResourceInfos } from '@joplin/renderer/types';
+import CommandService from '@joplin/lib/services/CommandService';
+import Resource from '@joplin/lib/models/Resource';
+import { join } from 'path';
+import uuid from '@joplin/lib/uuid';
+import shim from '@joplin/lib/shim';
+import { dirname } from '@joplin/utils/path';
+import { toFileExtension } from '@joplin/lib/mime-utils';
+import { MarkupLanguage } from '@joplin/renderer';
+import WarningBanner from './WarningBanner';
 
 type ChangeEventHandler = (event: ChangeEvent)=> void;
 type UndoRedoDepthChangeHandler = (event: UndoRedoDepthChangeEvent)=> void;
 type SelectionChangeEventHandler = (event: SelectionRangeChangeEvent)=> void;
 type OnAttachCallback = (filePath?: string)=> Promise<void>;
 
-const logger = Logger.create('NoteEditor');
-
 interface Props {
+	ref: Ref<EditorControl>;
 	themeId: number;
 	initialText: string;
+	mode: EditorType;
+	markupLanguage: MarkupLanguage;
 	noteId: string;
 	noteHash: string;
 	globalSearch: string;
@@ -49,6 +52,7 @@ interface Props {
 	toolbarEnabled: boolean;
 	readOnly: boolean;
 	plugins: PluginStates;
+	noteResources: ResourceInfos;
 
 	onChange: ChangeEventHandler;
 	onSelectionChange: SelectionChangeEventHandler;
@@ -61,103 +65,6 @@ function fontFamilyFromSettings() {
 	return font ? `${font}, sans-serif` : 'sans-serif';
 }
 
-function useCss(themeId: number): string {
-	return useMemo(() => {
-		const theme = themeStyle(themeId);
-		const themeVariableCss = themeToCss(theme);
-		return `
-			${themeVariableCss}
-
-			:root {
-				background-color: ${theme.backgroundColor};
-			}
-
-			body {
-				margin: 0;
-				height: 100vh;
-				/* Prefer 100% -- 100vw shows an unnecessary horizontal scrollbar in Google Chrome (desktop). */
-				width: 100%;
-				box-sizing: border-box;
-
-				padding-left: 1px;
-				padding-right: 1px;
-				padding-bottom: 1px;
-				padding-top: 10px;
-
-				font-size: 13pt;
-			}
-
-			* {
-				scrollbar-width: thin;
-				scrollbar-color: rgba(100, 100, 100, 0.7) rgba(0, 0, 0, 0.1);
-			}
-
-			@supports selector(::-webkit-scrollbar) {
-				*::-webkit-scrollbar {
-					width: 7px;
-					height: 7px;
-				}
-
-				*::-webkit-scrollbar-corner {
-					background: none;
-				}
-
-				*::-webkit-scrollbar-track {
-					border: none;
-				}
-
-				*::-webkit-scrollbar-thumb {
-					background: rgba(100, 100, 100, 0.3);
-					border-radius: 5px;
-				}
-
-				*::-webkit-scrollbar-track:hover {
-					background: rgba(0, 0, 0, 0.1);
-				}
-
-				*::-webkit-scrollbar-thumb:hover {
-					background: rgba(100, 100, 100, 0.7);
-				}
-
-				* {
-					scrollbar-width: unset;
-					scrollbar-color: unset;
-				}
-			}
-		`;
-	}, [themeId]);
-}
-
-const themeStyleSheetClassName = 'note-editor-styles';
-function useHtml(initialCss: string): string {
-	const cssRef = useRef(initialCss);
-	cssRef.current = initialCss;
-
-	return useMemo(() => `
-		<!DOCTYPE html>
-		<html>
-			<head>
-				<meta charset="UTF-8">
-				<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-				<title>${_('Note editor')}</title>
-				<style>
-					/* For better scrolling on iOS (working scrollbar) we use external, rather than internal,
-						scrolling. */
-					.cm-scroller {
-						overflow: none;
-					}
-				</style>
-				<style class=${JSON.stringify(themeStyleSheetClassName)}>
-					${cssRef.current}
-				</style>
-			</head>
-			<body>
-				<div class="CodeMirror" style="height:100%;" autocapitalize="on"></div>
-			</body>
-		</html>
-	`, []);
-}
-
 function editorTheme(themeId: number) {
 	const fontSizeInPx = Setting.value('style.editor.fontSize');
 
@@ -167,6 +74,7 @@ function editorTheme(themeId: number) {
 	const estimatedFontSizeInEm = fontSizeInPx / 16;
 
 	return {
+		themeId,
 		...themeStyle(themeId),
 
 		// To allow accessibility font scaling, we also need to set the
@@ -181,54 +89,54 @@ function editorTheme(themeId: number) {
 type OnSetVisibleCallback = (visible: boolean)=> void;
 type OnSearchStateChangeCallback = (state: SearchState)=> void;
 const useEditorControl = (
-	bodyControl: EditorBodyControl,
+	editorRef: RefObject<EditorBodyControl>,
 	webviewRef: RefObject<WebViewControl>,
 	setLinkDialogVisible: OnSetVisibleCallback,
 	setSearchState: OnSearchStateChangeCallback,
 ): EditorControl => {
 	return useMemo(() => {
 		const execEditorCommand = (command: EditorCommandType) => {
-			void bodyControl.execCommand(command);
+			void editorRef.current.execCommand(command);
 		};
 
 		const setSearchStateCallback = (state: SearchState) => {
-			bodyControl.setSearchState(state);
+			editorRef.current.setSearchState(state);
 			setSearchState(state);
 		};
 
 		const control: EditorControl = {
 			supportsCommand(command: EditorCommandType) {
-				return bodyControl.supportsCommand(command);
+				return editorRef.current.supportsCommand(command);
 			},
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 			execCommand(command, ...args: any[]) {
-				return bodyControl.execCommand(command, ...args);
+				return editorRef.current.execCommand(command, ...args);
 			},
 
 			focus() {
-				void bodyControl.execCommand(EditorCommandType.Focus);
+				void editorRef.current.execCommand(EditorCommandType.Focus);
 			},
 
 			undo() {
-				bodyControl.undo();
+				editorRef.current.undo();
 			},
 			redo() {
-				bodyControl.redo();
+				editorRef.current.redo();
 			},
 			select(anchor: number, head: number) {
-				bodyControl.select(anchor, head);
+				editorRef.current.select(anchor, head);
 			},
 			setScrollPercent(fraction: number) {
-				bodyControl.setScrollPercent(fraction);
+				editorRef.current.setScrollPercent(fraction);
 			},
 			insertText(text: string) {
-				bodyControl.insertText(text);
+				editorRef.current.insertText(text);
 			},
 			updateBody(newBody: string) {
-				bodyControl.updateBody(newBody);
+				editorRef.current.updateBody(newBody);
 			},
 			updateSettings(newSettings: EditorSettings) {
-				bodyControl.updateSettings(newSettings);
+				editorRef.current.updateSettings(newSettings);
 			},
 
 			toggleBolded() {
@@ -276,7 +184,7 @@ const useEditorControl = (
 				execEditorCommand(EditorCommandType.IndentLess);
 			},
 			updateLink(label: string, url: string) {
-				bodyControl.updateLink(label, url);
+				editorRef.current.updateLink(label, url);
 			},
 			scrollSelectionIntoView() {
 				execEditorCommand(EditorCommandType.ScrollSelectionIntoView);
@@ -292,7 +200,7 @@ const useEditorControl = (
 			},
 
 			setContentScripts: async (plugins: ContentScriptData[]) => {
-				return bodyControl.setContentScripts(plugins);
+				return editorRef.current.setContentScripts(plugins);
 			},
 
 			setSearchState: setSearchStateCallback,
@@ -320,37 +228,25 @@ const useEditorControl = (
 
 				setSearchState: setSearchStateCallback,
 			},
+
+			onResourceDownloaded: (id: string) => {
+				editorRef.current.onResourceDownloaded(id);
+			},
 		};
 
 		return control;
-	}, [webviewRef, bodyControl, setLinkDialogVisible, setSearchState]);
+	}, [webviewRef, editorRef, setLinkDialogVisible, setSearchState]);
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-function NoteEditor(props: Props, ref: any) {
+function NoteEditor(props: Props) {
 	const webviewRef = useRef<WebViewControl>(null);
 
-	const setInitialSelectionJs = props.initialSelection ? `
-		cm.select(${props.initialSelection.start}, ${props.initialSelection.end});
-		cm.execCommand('scrollSelectionIntoView');
-	` : '';
-	const jumpToHashJs = props.noteHash ? `
-		cm.jumpToHash(${JSON.stringify(props.noteHash)});
-	` : '';
-	const setInitialSearchJs = props.globalSearch ? `
-		cm.setSearchState(${JSON.stringify({
-		...defaultSearchState,
-		searchText: props.globalSearch,
-	})})
-	` : '';
-
 	const editorSettings: EditorSettings = useMemo(() => ({
-		themeId: props.themeId,
 		themeData: editorTheme(props.themeId),
 		markdownMarkEnabled: Setting.value('markdown.plugin.mark'),
 		katexEnabled: Setting.value('markdown.plugin.katex'),
 		spellcheckEnabled: Setting.value('editor.mobile.spellcheckEnabled'),
-		language: EditorLanguageType.Markdown,
+		language: props.markupLanguage === MarkupLanguage.Html ? EditorLanguageType.Html : EditorLanguageType.Markdown,
 		useExternalSearch: true,
 		readOnly: props.readOnly,
 
@@ -365,208 +261,83 @@ function NoteEditor(props: Props, ref: any) {
 		indentWithTabs: true,
 
 		editorLabel: _('Markdown editor'),
-	}), [props.themeId, props.readOnly]);
+	}), [props.themeId, props.readOnly, props.markupLanguage]);
 
-	const injectedJavaScript = `
-		window.onerror = (message, source, lineno) => {
-			window.ReactNativeWebView.postMessage(
-				"error: " + message + " in file://" + source + ", line " + lineno
-			);
-		};
-		window.onunhandledrejection = (event) => {
-			window.ReactNativeWebView.postMessage(
-				"error: Unhandled promise rejection: " + event
-			);
-		};
-
-		if (!window.cm) {
-			// This variable is not used within this script
-			// but is called using "injectJavaScript" from
-			// the wrapper component.
-			window.cm = null;
-
-			try {
-				${shim.injectedJs('codeMirrorBundle')};
-				codeMirrorBundle.setUpLogger();
-
-				const parentElement = document.getElementsByClassName('CodeMirror')[0];
-				// On Android, injectJavaScript is run twice -- once before the parent element exists.
-				// To avoid logging unnecessary errors to the console, skip setup in this case:
-				if (parentElement) {
-					const initialText = ${JSON.stringify(props.initialText)};
-					const settings = ${JSON.stringify(editorSettings)};
-
-					window.cm = codeMirrorBundle.initCodeMirror(
-						parentElement,
-						initialText,
-						${JSON.stringify(props.noteId)},
-						settings
-					);
-
-					${jumpToHashJs}
-					// Set the initial selection after jumping to the header -- the initial selection,
-					// if specified, should take precedence.
-					${setInitialSelectionJs}
-					${setInitialSearchJs}
-
-					window.onresize = () => {
-						cm.execCommand('scrollSelectionIntoView');
-					};
-				} else {
-					console.warn('No parent element for the editor found. This may mean that the editor HTML is still loading.');
-				}
-			} catch (e) {
-				window.ReactNativeWebView.postMessage("error:" + e.message + ": " + JSON.stringify(e))
-			}
-		}
-		true;
-	`;
-
-	const css = useCss(props.themeId);
-
-	useEffect(() => {
-		if (webviewRef.current) {
-			webviewRef.current.injectJS(`
-				const styleClass = ${JSON.stringify(themeStyleSheetClassName)};
-				for (const oldStyle of [...document.getElementsByClassName(styleClass)]) {
-					oldStyle.remove();
-				}
-
-				const style = document.createElement('style');
-				style.classList.add(styleClass);
-
-				style.appendChild(document.createTextNode(${JSON.stringify(css)}));
-				document.head.appendChild(style);
-			`);
-		}
-	}, [css]);
-
-	// Scroll to the new hash, if it changes.
-	const isFirstScrollRef = useRef(true);
-	useEffect(() => {
-		// The first "jump to header" is handled during editor setup and shouldn't
-		// be handled a second time:
-		if (isFirstScrollRef.current) {
-			isFirstScrollRef.current = false;
-			return;
-		}
-		if (jumpToHashJs && webviewRef.current) {
-			webviewRef.current.injectJS(jumpToHashJs);
-		}
-	}, [jumpToHashJs]);
-
-	const html = useHtml(css);
 	const [selectionState, setSelectionState] = useState<SelectionFormatting>(defaultSelectionFormatting);
 	const [linkDialogVisible, setLinkDialogVisible] = useState(false);
 	const [searchState, setSearchState] = useState(defaultSearchState);
 
-	const onEditorEvent = useRef((_event: EditorEvent) => {});
+	const editorControlRef = useRef<EditorControl|null>(null);
+	const onEditorEvent = (event: EditorEvent) => {
+		let exhaustivenessCheck: never;
+		switch (event.kind) {
+		case EditorEventType.Change:
+			props.onChange(event);
+			break;
+		case EditorEventType.UndoRedoDepthChange:
+			props.onUndoRedoDepthChange(event);
+			break;
+		case EditorEventType.SelectionRangeChange:
+			props.onSelectionChange(event);
+			break;
+		case EditorEventType.SelectionFormattingChange:
+			setSelectionState(event.formatting);
+			break;
+		case EditorEventType.EditLink:
+			editorControl.showLinkDialog();
+			break;
+		case EditorEventType.FollowLink:
+			void CommandService.instance().execute('openItem', event.link);
+			break;
+		case EditorEventType.UpdateSearchDialog:
+			setSearchState(event.searchState);
 
-	const onAttachRef = useRef(props.onAttach);
-	onAttachRef.current = props.onAttach;
-
-	const editorMessenger = useMemo(() => {
-		const localApi: WebViewToEditorApi = {
-			async onEditorEvent(event) {
-				onEditorEvent.current(event);
-			},
-			async logMessage(message) {
-				logger.debug('CodeMirror:', message);
-			},
-			async onPasteFile(type, data) {
-				const tempFilePath = join(Setting.value('tempDir'), `paste.${uuid.createNano()}.${mimeUtils.toFileExtension(type)}`);
-				await shim.fsDriver().mkdir(dirname(tempFilePath));
-				try {
-					await shim.fsDriver().writeFile(tempFilePath, data, 'base64');
-					await onAttachRef.current(tempFilePath);
-				} finally {
-					await shim.fsDriver().remove(tempFilePath);
-				}
-			},
-		};
-		const messenger = new RNToWebViewMessenger<WebViewToEditorApi, EditorBodyControl>(
-			'editor', webviewRef, localApi,
-		);
-		return messenger;
-	}, []);
+			if (event.searchState.dialogVisible) {
+				editorControl.searchControl.showSearch();
+			} else {
+				editorControl.searchControl.hideSearch();
+			}
+			break;
+		case EditorEventType.Scroll:
+			// Not handled
+			break;
+		default:
+			exhaustivenessCheck = event;
+			return exhaustivenessCheck;
+		}
+		return;
+	};
 
+	const editorRef = useRef<EditorBodyControl|null>(null);
 	const editorControl = useEditorControl(
-		editorMessenger.remoteApi, webviewRef, setLinkDialogVisible, setSearchState,
+		editorRef, webviewRef, setLinkDialogVisible, setSearchState,
 	);
+	editorControlRef.current = editorControl;
+
 
 	useEffect(() => {
 		editorControl.updateSettings(editorSettings);
 	}, [editorSettings, editorControl]);
 
+	const lastNoteResources = useRef<ResourceInfos>(props.noteResources);
+	useEffect(() => {
+		const isDownloaded = (resourceInfos: ResourceInfos, resourceId: string) => {
+			return resourceInfos[resourceId]?.localState?.fetch_status === Resource.FETCH_STATUS_DONE;
+		};
+		for (const key in props.noteResources) {
+			const wasDownloaded = isDownloaded(lastNoteResources.current, key);
+			if (!wasDownloaded && isDownloaded(props.noteResources, key)) {
+				editorControl.onResourceDownloaded(key);
+			}
+		}
+	}, [props.noteResources, editorControl]);
+
 	useEditorCommandHandler(editorControl);
 
-	useImperativeHandle(ref, () => {
+	useImperativeHandle(props.ref, () => {
 		return editorControl;
 	});
 
-	useEffect(() => {
-		onEditorEvent.current = (event: EditorEvent) => {
-			let exhaustivenessCheck: never;
-			switch (event.kind) {
-			case EditorEventType.Change:
-				props.onChange(event);
-				break;
-			case EditorEventType.UndoRedoDepthChange:
-				props.onUndoRedoDepthChange(event);
-				break;
-			case EditorEventType.SelectionRangeChange:
-				props.onSelectionChange(event);
-				break;
-			case EditorEventType.SelectionFormattingChange:
-				setSelectionState(event.formatting);
-				break;
-			case EditorEventType.EditLink:
-				editorControl.showLinkDialog();
-				break;
-			case EditorEventType.UpdateSearchDialog:
-				setSearchState(event.searchState);
-
-				if (event.searchState.dialogVisible) {
-					editorControl.searchControl.showSearch();
-				} else {
-					editorControl.searchControl.hideSearch();
-				}
-				break;
-			case EditorEventType.Scroll:
-				// Not handled
-				break;
-			default:
-				exhaustivenessCheck = event;
-				return exhaustivenessCheck;
-			}
-			return;
-		};
-	}, [props.onChange, props.onUndoRedoDepthChange, props.onSelectionChange, editorControl]);
-
-	const codeMirrorPlugins = useCodeMirrorPlugins(props.plugins);
-	useEffect(() => {
-		void editorControl.setContentScripts(codeMirrorPlugins);
-	}, [codeMirrorPlugins, editorControl]);
-
-	const onLoadEnd = useCallback(() => {
-		editorMessenger.onWebViewLoaded();
-	}, [editorMessenger]);
-
-	const onMessage = useCallback((event: OnMessageEvent) => {
-		const data = event.nativeEvent.data;
-
-		if (typeof data === 'string' && data.indexOf('error:') === 0) {
-			logger.error('CodeMirror error', data);
-			return;
-		}
-
-		editorMessenger.onWebViewMessage(event);
-	}, [editorMessenger]);
-
-	const onError = useCallback((event: NativeSyntheticEvent<WebViewErrorEvent>) => {
-		logger.error(`Load error: Code ${event.nativeEvent.code}: ${event.nativeEvent.description}`);
-	}, []);
-
 	const [hasSpaceForToolbar, setHasSpaceForToolbar] = useState(true);
 	const toolbarEnabled = props.toolbarEnabled && hasSpaceForToolbar;
 
@@ -580,12 +351,24 @@ function NoteEditor(props: Props, ref: any) {
 		}
 	}, []);
 
+	const onAttach = useCallback(async (type: string, base64: string) => {
+		const tempFilePath = join(Setting.value('tempDir'), `paste.${uuid.createNano()}.${toFileExtension(type)}`);
+		await shim.fsDriver().mkdir(dirname(tempFilePath));
+		try {
+			await shim.fsDriver().writeFile(tempFilePath, base64, 'base64');
+			await props.onAttach(tempFilePath);
+		} finally {
+			await shim.fsDriver().remove(tempFilePath);
+		}
+	}, [props.onAttach]);
+
 	const toolbarEditorState = useMemo(() => ({
 		selectionState,
 		searchVisible: searchState.dialogVisible,
 	}), [selectionState, searchState.dialogVisible]);
 
 	const toolbar = <EditorToolbar editorState={toolbarEditorState} />;
+	const EditorComponent = props.mode === EditorType.Markdown ? MarkdownEditor : RichTextEditor;
 
 	return (
 		<View
@@ -607,20 +390,25 @@ function NoteEditor(props: Props, ref: any) {
 				flexShrink: 0,
 				minHeight: '30%',
 			}}>
-				<ExtendedWebView
-					webviewInstanceId='NoteEditor'
-					testID='NoteEditor'
-					scrollEnabled={true}
-					ref={webviewRef}
-					html={html}
-					injectedJavaScript={injectedJavaScript}
-					hasPluginScripts={codeMirrorPlugins.length > 0}
-					onMessage={onMessage}
-					onLoadEnd={onLoadEnd}
-					onError={onError}
+				<EditorComponent
+					editorRef={editorRef}
+					webviewRef={webviewRef}
+					themeId={props.themeId}
+					noteId={props.noteId}
+					noteHash={props.noteHash}
+					initialText={props.initialText}
+					initialSelection={props.initialSelection}
+					editorSettings={editorSettings}
+					globalSearch={props.globalSearch}
+					onEditorEvent={onEditorEvent}
+					noteResources={props.noteResources}
+					plugins={props.plugins}
+					onAttach={onAttach}
 				/>
 			</View>
 
+			<WarningBanner editorType={props.mode}/>
+
 			<SearchPanel
 				editorSettings={editorSettings}
 				searchControl={editorControl.searchControl}
@@ -632,4 +420,4 @@ function NoteEditor(props: Props, ref: any) {
 	);
 }
 
-export default forwardRef(NoteEditor);
+export default NoteEditor;
diff --git a/packages/app-mobile/components/NoteEditor/RichTextEditor.test.tsx b/packages/app-mobile/components/NoteEditor/RichTextEditor.test.tsx
new file mode 100644
index 0000000000..818b41458e
--- /dev/null
+++ b/packages/app-mobile/components/NoteEditor/RichTextEditor.test.tsx
@@ -0,0 +1,357 @@
+import * as React from 'react';
+
+import { describe, it, beforeEach } from '@jest/globals';
+import { render, waitFor } from '../../utils/testing/testingLibrary';
+
+
+import Setting from '@joplin/lib/models/Setting';
+import { createNoteAndResource, resourceFetcher, setupDatabaseAndSynchronizer, supportDir, switchClient, synchronizerStart } from '@joplin/lib/testing/test-utils';
+import getWebViewWindowById from '../../utils/testing/getWebViewWindowById';
+import TestProviderStack from '../testing/TestProviderStack';
+import createMockReduxStore from '../../utils/testing/createMockReduxStore';
+import RichTextEditor from './RichTextEditor';
+import createTestEditorProps from './testing/createTestEditorProps';
+import { EditorEvent, EditorEventType } from '@joplin/editor/events';
+import { RefObject, useCallback, useMemo } from 'react';
+import Note from '@joplin/lib/models/Note';
+import shim from '@joplin/lib/shim';
+import Resource from '@joplin/lib/models/Resource';
+import { ResourceInfos } from '@joplin/renderer/types';
+import { EditorControl, EditorLanguageType } from '@joplin/editor/types';
+import attachedResources from '@joplin/lib/utils/attachedResources';
+import { MarkupLanguage } from '@joplin/renderer';
+import { NoteEntity } from '@joplin/lib/services/database/types';
+import { EditorSettings } from './types';
+import { pregQuote } from '@joplin/lib/string-utils';
+
+
+interface WrapperProps {
+	ref?: RefObject<EditorControl>;
+	noteResources?: ResourceInfos;
+	onBodyChange: (newBody: string)=> void;
+	onLinkClick?: (link: string)=> void;
+	note?: NoteEntity;
+	noteBody: string;
+}
+
+const defaultEditorProps = createTestEditorProps();
+const testStore = createMockReduxStore();
+const WrappedEditor: React.FC<WrapperProps> = (
+	{
+		noteBody,
+		note,
+		onBodyChange,
+		onLinkClick,
+		noteResources,
+		ref,
+	}: WrapperProps,
+) => {
+	const onEvent = useCallback((event: EditorEvent) => {
+		if (event.kind === EditorEventType.Change) {
+			onBodyChange(event.value);
+		} else if (event.kind === EditorEventType.FollowLink) {
+			if (!onLinkClick) {
+				throw new Error('No mock function for onLinkClick registered.');
+			}
+
+			onLinkClick(event.link);
+		}
+	}, [onBodyChange, onLinkClick]);
+
+	const editorSettings = useMemo((): EditorSettings => {
+		const isHtml = note?.markup_language === MarkupLanguage.Html;
+		return {
+			...defaultEditorProps.editorSettings,
+			language: isHtml ? EditorLanguageType.Html : EditorLanguageType.Markdown,
+		};
+	}, [note]);
+
+	return <TestProviderStack store={testStore}>
+		<RichTextEditor
+			{...defaultEditorProps}
+			editorSettings={editorSettings}
+			onEditorEvent={onEvent}
+			initialText={noteBody}
+			noteId={note?.id ?? defaultEditorProps.noteId}
+			noteResources={noteResources ?? defaultEditorProps.noteResources}
+			editorRef={ref ?? defaultEditorProps.editorRef}
+		/>
+	</TestProviderStack>;
+};
+
+const getEditorWindow = async () => {
+	return await getWebViewWindowById('RichTextEditor');
+};
+
+type EditorWindow = Window&typeof globalThis;
+const getEditorControl = (window: EditorWindow) => {
+	if ('joplinRichTextEditor_' in window) {
+		return window.joplinRichTextEditor_ as EditorControl;
+	}
+	throw new Error('No editor control found. Is the editor loaded?');
+};
+
+const mockTyping = (window: EditorWindow, text: string) => {
+	const document = window.document;
+	const editor = document.querySelector('div[contenteditable]');
+
+	for (const character of text.split('')) {
+		editor.dispatchEvent(new window.KeyboardEvent('keydown', { key: character }));
+		const paragraphs = editor.querySelectorAll('p');
+		(paragraphs[paragraphs.length - 1] ?? editor).appendChild(document.createTextNode(character));
+		editor.dispatchEvent(new window.KeyboardEvent('keyup', { key: character }));
+	}
+};
+
+const mockSelectionMovement = (window: EditorWindow, position: number) => {
+	getEditorControl(window).select(position, position);
+};
+
+const findElement = async function<ElementType extends Element = Element>(selector: string) {
+	const window = await getEditorWindow();
+	return await waitFor(() => {
+		const element = window.document.querySelector<ElementType>(selector);
+		expect(element).toBeTruthy();
+		return element;
+	}, {
+		onTimeout: (error) => {
+			return new Error(`Failed to find element from selector ${selector}. DOM: ${window?.document?.body?.innerHTML}. \n\nFull error: ${error}`);
+		},
+	});
+};
+
+const createRemoteResourceAndNote = async (remoteClientId: number) => {
+	await setupDatabaseAndSynchronizer(remoteClientId);
+	await switchClient(remoteClientId);
+
+	let note = await Note.save({ title: 'Note 1', parent_id: '' });
+	note = await shim.attachFileToNote(note, `${supportDir}/photo.jpg`);
+
+	const allResources = await Resource.all();
+	expect(allResources.length).toBe(1);
+	const resourceId = allResources[0].id;
+
+	await synchronizerStart();
+	await switchClient(0);
+	await synchronizerStart();
+
+
+	return { noteId: note.id, resourceId };
+};
+
+describe('RichTextEditor', () => {
+	beforeEach(async () => {
+		await setupDatabaseAndSynchronizer(0);
+		await switchClient(0);
+		Setting.setValue('editor.codeView', false);
+	});
+
+	it('should render basic markdown', async () => {
+		render(<WrappedEditor
+			noteBody={'### Test\n\nParagraph `test`'}
+			onBodyChange={jest.fn()}
+		/>);
+
+		const dom = (await getEditorWindow()).document;
+		expect((await findElement('h3')).textContent).toBe('Test');
+		expect(dom.querySelector('p').textContent).toBe('Paragraph test');
+		expect(dom.querySelector('p code').textContent).toBe('test');
+	});
+
+	it('should dispatch events when the editor content changes', async () => {
+		let body = '**bold** normal';
+		render(<WrappedEditor
+			noteBody={body}
+			onBodyChange={newBody => { body = newBody; }}
+		/>);
+
+		const window = await getEditorWindow();
+		mockTyping(window, ' test');
+
+		await waitFor(async () => {
+			expect(body.trim()).toBe('**bold** normal test');
+		});
+	});
+
+	it('should render clickable checkboxes', async () => {
+		let body = '- [ ] Test\n- [x] Another test';
+		render(<WrappedEditor
+			noteBody={body}
+			onBodyChange={newBody => { body = newBody; }}
+		/>);
+
+		const firstCheckbox = await findElement<HTMLInputElement>('input[type=checkbox]');
+		const dom = (await getEditorWindow()).document;
+		const getCheckboxLabel = (checkbox: HTMLElement) => {
+			const labelledByAttr = checkbox.getAttribute('aria-labelledby');
+			const label = dom.getElementById(labelledByAttr);
+			return label;
+		};
+
+		// Should have the correct labels
+		expect(firstCheckbox.getAttribute('aria-labelledby')).toBeTruthy();
+		expect(getCheckboxLabel(firstCheckbox).textContent).toBe('Test');
+
+		// Should be correctly checked/unchecked
+		expect(firstCheckbox.checked).toBe(false);
+
+		// Clicking a checkbox should toggle it
+		firstCheckbox.click();
+
+		await waitFor(async () => {
+			// At present, lists are saved as non-tight lists:
+			expect(body.trim()).toBe('- [x] Test\n    \n- [x] Another test');
+		});
+	});
+
+	it('should reload resource placeholders when the corresponding item downloads', async () => {
+		Setting.setValue('sync.resourceDownloadMode', 'manual');
+		const { noteId, resourceId } = await createRemoteResourceAndNote(1);
+
+		const note = await Note.load(noteId);
+		const localResource = await Resource.load(resourceId);
+		let localState = await Resource.localState(localResource);
+		expect(localState.fetch_status).toBe(Resource.FETCH_STATUS_IDLE);
+
+		const editorRef = React.createRef<EditorControl>();
+		const component = render(
+			<WrappedEditor
+				noteBody={note.body}
+				noteResources={{ [localResource.id]: { localState, item: localResource } }}
+				onBodyChange={jest.fn()}
+				ref={editorRef}
+			/>,
+		);
+
+		// The resource placeholder should have rendered
+		const placeholder = await findElement(`span[data-resource-id=${JSON.stringify(localResource.id)}]`);
+		expect([...placeholder.classList]).toContain('not-loaded-resource');
+
+		await resourceFetcher().markForDownload([localResource.id]);
+
+		await waitFor(async () => {
+			localState = await Resource.localState(localResource.id);
+			expect(localState).toMatchObject({ fetch_status: Resource.FETCH_STATUS_DONE });
+		});
+
+		component.rerender(
+			<WrappedEditor
+				noteBody={note.body}
+				noteResources={{ [localResource.id]: { localState, item: localResource } }}
+				onBodyChange={jest.fn()}
+				ref={editorRef}
+			/>,
+		);
+		editorRef.current.onResourceDownloaded(localResource.id);
+
+		expect(
+			await findElement(`img[data-resource-id=${JSON.stringify(localResource.id)}]`),
+		).toBeTruthy();
+	});
+
+	it('should render clickable internal note links', async () => {
+		const linkTarget = await Note.save({ title: 'test' });
+		const body = `[link](:/${linkTarget.id})`;
+		const onLinkClick = jest.fn();
+		render(<WrappedEditor
+			noteBody={body}
+			onBodyChange={jest.fn()}
+			onLinkClick={onLinkClick}
+		/>);
+
+		const window = await getEditorWindow();
+
+		const link = await findElement<HTMLAnchorElement>('a[href]');
+		expect(link.href).toBe(`:/${linkTarget.id}`);
+		mockSelectionMovement(window, 2);
+
+		const tooltipButton = await findElement<HTMLButtonElement>('.link-tooltip:not(.-hidden) > button');
+		tooltipButton.click();
+
+		await waitFor(() => {
+			expect(onLinkClick).toHaveBeenCalledWith(`:/${linkTarget.id}`);
+		});
+	});
+
+	it.each([
+		MarkupLanguage.Markdown, MarkupLanguage.Html,
+	])('should preserve image attachments on edit (case %#)', async (markupLanguage) => {
+		const { note, resource } = await createNoteAndResource({ markupLanguage });
+		let body = note.body;
+
+		const resources = await attachedResources(body);
+		render(<WrappedEditor
+			noteBody={note.body}
+			note={note}
+			onBodyChange={newBody => { body = newBody; }}
+			noteResources={resources}
+		/>);
+
+		const renderedImage = await findElement<HTMLImageElement>(`img[data-resource-id=${JSON.stringify(resource.id)}]`);
+		expect(renderedImage).toBeTruthy();
+
+		const window = await getEditorWindow();
+		mockTyping(window, ' test');
+
+		// The rendered image should still have the correct ALT and source
+		await waitFor(async () => {
+			const editorContent = body.trim();
+			if (markupLanguage === MarkupLanguage.Html) {
+				expect(editorContent).toMatch(
+					new RegExp(`^<p><img src=":/${pregQuote(resource.id)}" alt="${pregQuote(renderedImage.alt)}"[^>]*> test</p>$`),
+				);
+			} else {
+				expect(editorContent).toBe(`![${renderedImage.alt}](:/${resource.id}) test`);
+			}
+		});
+	});
+
+	it.each([
+		{ useValidSyntax: false },
+		{ useValidSyntax: true },
+	])('should preserve inline math on edit (%j)', async ({ useValidSyntax }) => {
+		const macros = '\\def\\<{\\langle} \\def\\>{\\rangle}';
+		let inlineMath = '| \\< u, v \\> |^2 \\leq \\< u, u \\>\\< v, v \\>';
+		// The \\< escapes are invalid without the above custom macro definitions.
+		// It should be possible for the editor to preserve invalid math syntax.
+		if (useValidSyntax) {
+			inlineMath = macros + inlineMath;
+		}
+
+		let body = `Inline math: $${inlineMath}$...`;
+
+		render(<WrappedEditor
+			noteBody={body}
+			onBodyChange={newBody => { body = newBody; }}
+		/>);
+
+		const renderedInlineMath = await findElement<HTMLElement>('span.joplin-editable');
+		expect(renderedInlineMath).toBeTruthy();
+
+		const window = await getEditorWindow();
+		mockTyping(window, ' testing');
+
+		await waitFor(async () => {
+			expect(body.trim()).toBe(`Inline math: $${inlineMath}$... testing`);
+		});
+	});
+
+	it('should preserve block math on edit', async () => {
+		let body = 'Test:\n\n$$3^2 + 4^2 = \\sqrt{625}$$\n\nTest.';
+
+		render(<WrappedEditor
+			noteBody={body}
+			onBodyChange={newBody => { body = newBody; }}
+		/>);
+
+		const renderedInlineMath = await findElement<HTMLElement>('div.joplin-editable');
+		expect(renderedInlineMath).toBeTruthy();
+
+		const window = await getEditorWindow();
+		mockTyping(window, ' testing');
+
+		await waitFor(async () => {
+			expect(body.trim()).toBe('Test:\n\n$$\n3^2 + 4^2 = \\sqrt{625}\n$$\n\nTest. testing');
+		});
+	});
+});
diff --git a/packages/app-mobile/components/NoteEditor/RichTextEditor.tsx b/packages/app-mobile/components/NoteEditor/RichTextEditor.tsx
new file mode 100644
index 0000000000..d019d50d6b
--- /dev/null
+++ b/packages/app-mobile/components/NoteEditor/RichTextEditor.tsx
@@ -0,0 +1,155 @@
+import { themeStyle } from '@joplin/lib/theme';
+import themeToCss from '@joplin/lib/services/style/themeToCss';
+import ExtendedWebView from '../ExtendedWebView';
+
+import * as React from 'react';
+import { useMemo, useCallback, useRef } from 'react';
+import { NativeSyntheticEvent } from 'react-native';
+
+import { EditorProps } from './types';
+import { _ } from '@joplin/lib/locale';
+import { WebViewErrorEvent } from 'react-native-webview/lib/RNCWebViewNativeComponent';
+import Logger from '@joplin/utils/Logger';
+import { OnMessageEvent } from '../ExtendedWebView/types';
+import useWebViewSetup from '../../contentScripts/richTextEditorBundle/useWebViewSetup';
+import CommandService from '@joplin/lib/services/CommandService';
+import shim from '@joplin/lib/shim';
+
+const logger = Logger.create('RichTextEditor');
+
+function useCss(themeId: number, editorCss: string): string {
+	return useMemo(() => {
+		const theme = themeStyle(themeId);
+		const themeVariableCss = themeToCss(theme);
+		return `
+			${themeVariableCss}
+			${editorCss}
+
+			:root {
+				background-color: ${theme.backgroundColor};
+			}
+
+			body {
+				margin: 0;
+				height: 100vh;
+				/* Prefer 100% -- 100vw shows an unnecessary horizontal scrollbar in Google Chrome (desktop). */
+				width: 100%;
+				box-sizing: border-box;
+
+				padding-left: 4px;
+				padding-right: 4px;
+				padding-bottom: 1px;
+				padding-top: 10px;
+
+				font-size: 13pt;
+				font-family: ${JSON.stringify(theme.fontFamily)}, sans-serif;
+			}
+		`;
+	}, [themeId, editorCss]);
+}
+
+function useHtml(initialCss: string): string {
+	const cssRef = useRef(initialCss);
+	cssRef.current = initialCss;
+
+	return useMemo(() => `
+		<!DOCTYPE html>
+		<html>
+			<head>
+				<meta charset="UTF-8">
+				<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+				<title>${_('Note editor')}</title>
+			</head>
+			<body>
+				<div class="RichTextEditor" style="height:100%;" autocapitalize="on"></div>
+			</body>
+		</html>
+	`, []);
+}
+
+const onPostMessage = async (message: string) => {
+	try {
+		await CommandService.instance().execute('openItem', message);
+	} catch (error) {
+		void shim.showErrorDialog(`postMessage failed: ${message}`);
+	}
+};
+
+const RichTextEditor: React.FC<EditorProps> = props => {
+	const webviewRef = props.webviewRef;
+
+	const editorWebViewSetup = useWebViewSetup({
+		parentElementClassName: 'RichTextEditor',
+		onEditorEvent: props.onEditorEvent,
+		initialText: props.initialText,
+		noteId: props.noteId,
+		settings: props.editorSettings,
+		webviewRef,
+		themeId: props.themeId,
+		pluginStates: props.plugins,
+		noteResources: props.noteResources,
+		onPostMessage: onPostMessage,
+		onAttachFile: props.onAttach,
+	});
+
+	props.editorRef.current = editorWebViewSetup.api;
+
+	const injectedJavaScript = `
+		window.onerror = (message, source, lineno) => {
+			console.error(message);
+			window.ReactNativeWebView.postMessage(
+				"error: " + message + " in file://" + source + ", line " + lineno
+			);
+		};
+		window.onunhandledrejection = (event) => {
+			window.ReactNativeWebView.postMessage(
+				"error: Unhandled promise rejection: " + event
+			);
+		};
+		
+		try {
+			${editorWebViewSetup.pageSetup.js}
+		} catch (e) {
+			console.error('Setup error: ', e);
+			window.ReactNativeWebView.postMessage("error:" + e.message + ": " + JSON.stringify(e))
+		}
+
+		true;
+	`;
+
+	const css = useCss(props.themeId, editorWebViewSetup.pageSetup.css);
+	const html = useHtml(css);
+
+	const onMessage = useCallback((event: OnMessageEvent) => {
+		const data = event.nativeEvent.data;
+
+		if (typeof data === 'string' && data.indexOf('error:') === 0) {
+			logger.error('Rich Text Editor error', data);
+			return;
+		}
+
+		editorWebViewSetup.webViewEventHandlers.onMessage(event);
+	}, [editorWebViewSetup]);
+
+	const onError = useCallback((event: NativeSyntheticEvent<WebViewErrorEvent>) => {
+		logger.error(`Load error: Code ${event.nativeEvent.code}: ${event.nativeEvent.description}`);
+	}, []);
+
+	return (
+		<ExtendedWebView
+			ref={webviewRef}
+			webviewInstanceId='RichTextEditor'
+			testID='RichTextEditor'
+			scrollEnabled={true}
+			html={html}
+			injectedJavaScript={injectedJavaScript}
+			css={css}
+			hasPluginScripts={false}
+			onMessage={onMessage}
+			onLoadEnd={editorWebViewSetup.webViewEventHandlers.onLoadEnd}
+			onError={onError}
+		/>
+	);
+};
+
+export default RichTextEditor;
diff --git a/packages/app-mobile/components/NoteEditor/SearchPanel.tsx b/packages/app-mobile/components/NoteEditor/SearchPanel.tsx
index bae59572be..9bc6726044 100644
--- a/packages/app-mobile/components/NoteEditor/SearchPanel.tsx
+++ b/packages/app-mobile/components/NoteEditor/SearchPanel.tsx
@@ -192,7 +192,7 @@ export const SearchPanel = (props: SearchPanelProps) => {
 	}, [state.dialogVisible, control]);
 
 
-	const themeId = props.editorSettings.themeId;
+	const themeId = props.editorSettings.themeData.themeId;
 	const closeButton = (
 		<ActionButton
 			themeId={themeId}
diff --git a/packages/app-mobile/components/NoteEditor/WarningBanner.tsx b/packages/app-mobile/components/NoteEditor/WarningBanner.tsx
new file mode 100644
index 0000000000..3c217f19fc
--- /dev/null
+++ b/packages/app-mobile/components/NoteEditor/WarningBanner.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { _ } from '@joplin/lib/locale';
+import onRichTextReadMoreLinkClick from '@joplin/lib/components/shared/NoteEditor/WarningBanner/onRichTextReadMoreLinkClick';
+import onRichTextDismissLinkClick from '@joplin/lib/components/shared/NoteEditor/WarningBanner/onRichTextDismissLinkClick';
+import { AppState } from '../../utils/types';
+import { EditorType } from './types';
+import { Banner } from 'react-native-paper';
+import { useMemo } from 'react';
+
+interface Props {
+	editorType: EditorType;
+	richTextBannerDismissed: boolean;
+}
+
+const WarningBanner: React.FC<Props> = props => {
+	const actions = useMemo(() => [
+		{
+			label: _('Read more'),
+			onPress: onRichTextReadMoreLinkClick,
+		},
+		{
+			label: _('Dismiss'),
+			accessibilityHint: _('Hides warning'),
+			onPress: onRichTextDismissLinkClick,
+		},
+	], []);
+
+	if (props.editorType !== EditorType.RichText || props.richTextBannerDismissed) return null;
+	return (
+		<Banner
+			icon='alert-outline'
+			actions={actions}
+			// Avoid hiding with react-native-paper's "visible" prop to avoid potential accessibility issues
+			// related to how react-native-paper hides the banner.
+			visible={true}
+		>
+			{_('This Rich Text editor has a number of limitations and it is recommended to be aware of them before using it.')}
+		</Banner>
+	);
+};
+
+export default connect((state: AppState) => {
+	return {
+		richTextBannerDismissed: state.settings.richTextBannerDismissed,
+	};
+})(WarningBanner);
diff --git a/packages/app-mobile/components/NoteEditor/commandDeclarations.ts b/packages/app-mobile/components/NoteEditor/commandDeclarations.ts
index c165422f01..f1d57e54d5 100644
--- a/packages/app-mobile/components/NoteEditor/commandDeclarations.ts
+++ b/packages/app-mobile/components/NoteEditor/commandDeclarations.ts
@@ -2,11 +2,22 @@ import { EditorCommandType } from '@joplin/editor/types';
 import { _ } from '@joplin/lib/locale';
 import { CommandDeclaration } from '@joplin/lib/services/CommandService';
 
-export const enabledCondition = (_commandName: string) => {
+const markdownEditorOnlyCommands = [
+	EditorCommandType.DuplicateLine,
+	EditorCommandType.SortSelectedLines,
+	EditorCommandType.SwapLineUp,
+	EditorCommandType.SwapLineDown,
+].map(command => `editor.${command}`);
+
+export const enabledCondition = (commandName: string) => {
 	const output = [
 		'!noteIsReadOnly',
 	];
 
+	if (markdownEditorOnlyCommands.includes(commandName)) {
+		output.push('!richTextEditorVisible');
+	}
+
 	return output.filter(c => !!c).join(' && ');
 };
 
diff --git a/packages/app-mobile/components/NoteEditor/testing/createTestEditorProps.ts b/packages/app-mobile/components/NoteEditor/testing/createTestEditorProps.ts
new file mode 100644
index 0000000000..0337113de4
--- /dev/null
+++ b/packages/app-mobile/components/NoteEditor/testing/createTestEditorProps.ts
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import createEditorSettings from '@joplin/editor/testing/createEditorSettings';
+import { EditorProps } from '../types';
+import Setting from '@joplin/lib/models/Setting';
+
+const defaultEditorSettings = { ...createEditorSettings(Setting.THEME_LIGHT), themeId: Setting.THEME_LIGHT };
+const defaultWrapperProps: EditorProps = {
+	noteResources: {},
+	webviewRef: React.createRef(),
+	editorRef: React.createRef(),
+	themeId: Setting.THEME_LIGHT,
+	noteHash: '',
+	noteId: '',
+	initialText: '',
+	editorSettings: defaultEditorSettings,
+	initialSelection: { start: 0, end: 0 },
+	globalSearch: '',
+	plugins: {},
+	onAttach: () => Promise.resolve(),
+	onEditorEvent: () => {},
+};
+
+const createTestEditorProps = () => ({ ...defaultWrapperProps });
+export default createTestEditorProps;
diff --git a/packages/app-mobile/components/NoteEditor/types.ts b/packages/app-mobile/components/NoteEditor/types.ts
index 5dd8757c7c..5be0bf4656 100644
--- a/packages/app-mobile/components/NoteEditor/types.ts
+++ b/packages/app-mobile/components/NoteEditor/types.ts
@@ -1,7 +1,12 @@
 // Types related to the NoteEditor
 
-import { EditorEvent } from '@joplin/editor/events';
 import { EditorControl as EditorBodyControl, EditorSettings as EditorBodySettings, SearchState } from '@joplin/editor/types';
+import { RefObject } from 'react';
+import { WebViewControl } from '../ExtendedWebView/types';
+import { SelectionRange } from '../../contentScripts/markdownEditorBundle/types';
+import { PluginStates } from '@joplin/lib/services/plugins/reducer';
+import { EditorEvent } from '@joplin/editor/events';
+import { ResourceInfos } from '@joplin/renderer/types';
 
 export interface SearchControl {
 	findNext(): void;
@@ -45,17 +50,27 @@ export interface EditorControl extends EditorBodyControl {
 	searchControl: SearchControl;
 }
 
-export interface EditorSettings extends EditorBodySettings {
+export type EditorSettings = EditorBodySettings;
+
+type OnAttachCallback = (mime: string, base64: string)=> Promise<void>;
+export interface EditorProps {
+	noteResources: ResourceInfos;
+	editorRef: RefObject<EditorBodyControl>;
+	webviewRef: RefObject<WebViewControl>;
 	themeId: number;
+	noteId: string;
+	noteHash: string;
+	initialText: string;
+	initialSelection: SelectionRange;
+	editorSettings: EditorSettings;
+	globalSearch: string;
+	plugins: PluginStates;
+
+	onAttach: OnAttachCallback;
+	onEditorEvent: (event: EditorEvent)=> void;
 }
 
-export interface SelectionRange {
-	start: number;
-	end: number;
-}
-
-export interface WebViewToEditorApi {
-	onEditorEvent(event: EditorEvent): Promise<void>;
-	logMessage(message: string): Promise<void>;
-	onPasteFile(type: string, dataBase64: string): Promise<void>;
+export enum EditorType {
+	Markdown = 'markdown',
+	RichText = 'rich-text',
 }
diff --git a/packages/app-mobile/components/screens/Note/Note.test.tsx b/packages/app-mobile/components/screens/Note/Note.test.tsx
index 3ae4e4ba2e..07bfef9e15 100644
--- a/packages/app-mobile/components/screens/Note/Note.test.tsx
+++ b/packages/app-mobile/components/screens/Note/Note.test.tsx
@@ -46,8 +46,8 @@ const getNoteViewerDom = async () => {
 	return await getWebViewDomById('NoteBodyViewer');
 };
 
-const getNoteEditorControl = async () => {
-	const noteEditor = await getWebViewWindowById('NoteEditor');
+const getMarkdownEditorControl = async () => {
+	const noteEditor = await getWebViewWindowById('MarkdownEditor');
 	const getEditorControl = () => {
 		if ('cm' in noteEditor.window && noteEditor.window.cm) {
 			return noteEditor.window.cm as CodeMirrorControl;
@@ -213,7 +213,7 @@ describe('screens/Note', () => {
 
 		const noteScreen = render(<WrappedNoteScreen />);
 		await openEditor();
-		const editor = await getNoteEditorControl();
+		const editor = await getMarkdownEditorControl();
 		await act(async () => {
 			editor.select(defaultBody.length, defaultBody.length);
 			editor.insertText(' Testing!!!');
diff --git a/packages/app-mobile/components/screens/Note/Note.tsx b/packages/app-mobile/components/screens/Note/Note.tsx
index cbdf62e717..c7c1ae5446 100644
--- a/packages/app-mobile/components/screens/Note/Note.tsx
+++ b/packages/app-mobile/components/screens/Note/Note.tsx
@@ -43,7 +43,6 @@ import { ChangeEvent as EditorChangeEvent, SelectionRangeChangeEvent, UndoRedoDe
 import { join } from 'path';
 import { Dispatch } from 'redux';
 import { RefObject, useContext } from 'react';
-import { SelectionRange } from '../../NoteEditor/types';
 import { getNoteCallbackUrl } from '@joplin/lib/callbackUrlUtils';
 import { AppState } from '../../../utils/types';
 import restoreItems from '@joplin/lib/services/trash/restoreItems';
@@ -57,7 +56,7 @@ import getImageDimensions from '../../../utils/image/getImageDimensions';
 import resizeImage from '../../../utils/image/resizeImage';
 import { CameraResult } from '../../CameraView/types';
 import { DialogContext, DialogControl } from '../../DialogManager';
-import { CommandRuntimeProps, EditorMode, PickerResponse } from './types';
+import { CommandRuntimeProps, NoteViewerMode, PickerResponse } from './types';
 import commands from './commands';
 import { AttachFileAction, AttachFileOptions } from './commands/attachFile';
 import PluginService from '@joplin/lib/services/plugins/PluginService';
@@ -72,6 +71,8 @@ import ShareNoteDialog from '../ShareNoteDialog';
 import stateToWhenClauseContext from '../../../services/commands/stateToWhenClauseContext';
 import { defaultWindowId } from '@joplin/lib/reducer';
 import useVisiblePluginEditorViewIds from '@joplin/lib/hooks/plugins/useVisiblePluginEditorViewIds';
+import { SelectionRange } from '../../../contentScripts/markdownEditorBundle/types';
+import { EditorType } from '../../NoteEditor/types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 const emptyArray: any[] = [];
@@ -95,6 +96,7 @@ interface Props extends BaseProps {
 	navigation: NoteNavigation;
 	dispatch: Dispatch;
 	noteId: string;
+	editorType: EditorType;
 	useEditorBeta: boolean;
 	plugins: PluginStates;
 	themeId: number;
@@ -119,7 +121,7 @@ interface ComponentProps extends Props {
 
 interface State {
 	note: NoteEntity;
-	mode: EditorMode;
+	mode: NoteViewerMode;
 	readOnly: boolean;
 	folder: FolderEntity|null;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
@@ -637,6 +639,13 @@ class NoteScreenComponent extends BaseScreenComponent<ComponentProps, State> imp
 			});
 		}
 
+		if (prevState.mode !== this.state.mode) {
+			this.props.dispatch({
+				type: 'NOTE_EDITOR_VISIBLE_CHANGE',
+				visible: this.state.mode === 'edit' && !this.state.showCamera && !this.state.showImageEditor,
+			});
+		}
+
 		if (prevProps.noteId && this.props.noteId && prevProps.noteId !== this.props.noteId) {
 			// Easier to just go back, then go to the note since
 			// the Note screen doesn't handle reloading a different note
@@ -684,6 +693,11 @@ class NoteScreenComponent extends BaseScreenComponent<ComponentProps, State> imp
 
 		this.commandRegistration_?.deregister();
 		this.commandRegistration_ = null;
+
+		this.props.dispatch({
+			type: 'SET_NOTE_EDITOR_VISIBLE',
+			visible: false,
+		});
 	}
 
 	private title_changeText(text: string) {
@@ -1227,10 +1241,11 @@ class NoteScreenComponent extends BaseScreenComponent<ComponentProps, State> imp
 		const isSaved = note && note.id;
 		const readOnly = this.state.readOnly;
 		const isDeleted = !!this.state.note.deleted_time;
+		const isCodeView = this.props.editorType === EditorType.Markdown;
 
 		const pluginCommands = pluginUtils.commandNamesFromViews(this.props.plugins, 'noteToolbar');
 
-		const cacheKey = md5([isTodo, isSaved, pluginCommands.join(','), readOnly].join('_'));
+		const cacheKey = md5([isTodo, isSaved, pluginCommands.join(','), readOnly, this.state.mode, isCodeView].join('_'));
 		if (!this.menuOptionsCache_) this.menuOptionsCache_ = {};
 
 		if (this.menuOptionsCache_[cacheKey]) return this.menuOptionsCache_[cacheKey];
@@ -1347,6 +1362,16 @@ class NoteScreenComponent extends BaseScreenComponent<ComponentProps, State> imp
 			},
 		});
 
+		if (this.state.mode === 'edit') {
+			const newCodeView = !isCodeView;
+			output.push({
+				title: newCodeView ? _('Edit as Markdown') : _('Edit as Rich Text'),
+				onPress: () => {
+					Setting.setValue('editor.codeView', newCodeView);
+				},
+			});
+		}
+
 		if (isDeleted) {
 			output.push({
 				title: _('Restore'),
@@ -1635,11 +1660,13 @@ class NoteScreenComponent extends BaseScreenComponent<ComponentProps, State> imp
 						noteHash={this.props.noteHash}
 						initialText={note.body}
 						initialSelection={this.selection}
+						markupLanguage={this.state.note.markup_language}
 						globalSearch={this.props.searchQuery}
 						onChange={this.onMarkdownEditorTextChange}
 						onSelectionChange={this.onMarkdownEditorSelectionChange}
 						onUndoRedoDepthChange={this.onUndoRedoDepthChange}
 						onAttach={this.onAttach}
+						noteResources={this.state.noteResources}
 						readOnly={this.state.readOnly}
 						plugins={this.props.plugins}
 						style={{
@@ -1649,6 +1676,7 @@ class NoteScreenComponent extends BaseScreenComponent<ComponentProps, State> imp
 							paddingLeft: 0,
 							paddingRight: 0,
 						}}
+						mode={this.props.editorType}
 					/>;
 				}
 			}
@@ -1798,6 +1826,8 @@ const NoteScreen = connect((state: AppState) => {
 		pluginHtmlContents: state.pluginService.pluginHtmlContents,
 		editorNoteReloadTimeRequest: state.editorNoteReloadTimeRequest,
 
+		editorType: state.settings['editor.codeView'] ? EditorType.Markdown : EditorType.RichText,
+
 		// What we call "beta editor" in this component is actually the (now
 		// default) CodeMirror editor. That should be refactored to make it less
 		// confusing.
diff --git a/packages/app-mobile/components/screens/Note/types.ts b/packages/app-mobile/components/screens/Note/types.ts
index 2ff8d02c13..91664c970e 100644
--- a/packages/app-mobile/components/screens/Note/types.ts
+++ b/packages/app-mobile/components/screens/Note/types.ts
@@ -7,15 +7,15 @@ export interface PickerResponse {
 	fileName?: string;
 }
 
-export type EditorMode = 'view'|'edit';
+export type NoteViewerMode = 'view'|'edit';
 
 export interface CommandRuntimeProps {
 	attachFile(pickerResponse: PickerResponse, fileType: string): Promise<ResourceEntity|null>;
 	hideKeyboard(): void;
 	insertText(text: string): void;
 
-	getMode(): EditorMode;
-	setMode(mode: EditorMode): void;
+	getMode(): NoteViewerMode;
+	setMode(mode: NoteViewerMode): void;
 	setCameraVisible(visible: boolean): void;
 	setTagDialogVisible(visible: boolean): void;
 	setAudioRecorderVisible(visible: boolean): void;
diff --git a/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/applyTemplateToEditor.ts b/packages/app-mobile/contentScripts/imageEditorBundle/contentScript/applyTemplateToEditor.ts
similarity index 100%
rename from packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/applyTemplateToEditor.ts
rename to packages/app-mobile/contentScripts/imageEditorBundle/contentScript/applyTemplateToEditor.ts
diff --git a/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.test.ts b/packages/app-mobile/contentScripts/imageEditorBundle/contentScript/index.test.ts
similarity index 92%
rename from packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.test.ts
rename to packages/app-mobile/contentScripts/imageEditorBundle/contentScript/index.test.ts
index 1155c4f7c3..8accc87840 100644
--- a/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.test.ts
+++ b/packages/app-mobile/contentScripts/imageEditorBundle/contentScript/index.test.ts
@@ -9,18 +9,18 @@ window.ResizeObserver = class { public observe() { } } as any;
 import { describe, it, expect, jest } from '@jest/globals';
 import { Color4, EditorImage, EditorSettings, Path, pathToRenderable, StrokeComponent } from 'js-draw';
 import { RenderingMode } from 'js-draw';
-import createJsDrawEditor from './createJsDrawEditor';
+import { createJsDrawEditor } from './index';
 import { BackgroundComponent } from 'js-draw';
 import { BackgroundComponentBackgroundType } from 'js-draw';
-import { ImageEditorCallbacks } from './types';
+import { MainProcessApi } from './types';
 import applyTemplateToEditor from './applyTemplateToEditor';
 
 
-const createEditorWithCallbacks = (callbacks: Partial<ImageEditorCallbacks>) => {
+const createEditorWithCallbacks = (callbacks: Partial<MainProcessApi>) => {
 	const toolbarState = '';
 	const locale = 'en';
 
-	const allCallbacks: ImageEditorCallbacks = {
+	const allCallbacks: MainProcessApi = {
 		save: () => {},
 		saveThenClose: ()=> {},
 		closeEditor: ()=> {},
@@ -49,7 +49,7 @@ const createEditorWithCallbacks = (callbacks: Partial<ImageEditorCallbacks>) =>
 	return createJsDrawEditor(allCallbacks, toolbarState, locale, localizations, editorOptions);
 };
 
-describe('createJsDrawEditor', () => {
+describe('imageEditor/contentScript/index', () => {
 	it('should trigger autosave callback every few minutes', async () => {
 		let calledAutosaveCount = 0;
 
diff --git a/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.ts b/packages/app-mobile/contentScripts/imageEditorBundle/contentScript/index.ts
similarity index 87%
rename from packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.ts
rename to packages/app-mobile/contentScripts/imageEditorBundle/contentScript/index.ts
index a5acab20a9..100d26c29c 100644
--- a/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.ts
+++ b/packages/app-mobile/contentScripts/imageEditorBundle/contentScript/index.ts
@@ -1,13 +1,12 @@
-
+import '../../utils/polyfills';
 import { Editor, AbstractToolbar, EditorEventType, EditorSettings, getLocalizationTable, adjustEditorThemeForContrast, BaseWidget } from 'js-draw';
 import { MaterialIconProvider } from '@js-draw/material-icons';
 import 'js-draw/bundledStyles';
 import applyTemplateToEditor from './applyTemplateToEditor';
 import watchEditorForTemplateChanges from './watchEditorForTemplateChanges';
-import { ImageEditorCallbacks, ImageEditorControl, LocalizedStrings } from './types';
+import { MainProcessApi, LocalizedStrings, EditorProcessApi } from './types';
 import startAutosaveLoop from './startAutosaveLoop';
-import WebViewToRNMessenger from '../../../../utils/ipc/WebViewToRNMessenger';
-import './polyfills';
+import WebViewToRNMessenger from '../../../utils/ipc/WebViewToRNMessenger';
 
 
 const restoreToolbarState = (toolbar: AbstractToolbar, state: string) => {
@@ -21,15 +20,8 @@ const restoreToolbarState = (toolbar: AbstractToolbar, state: string) => {
 	}
 };
 
-export const createMessenger = () => {
-	const messenger = new WebViewToRNMessenger<ImageEditorControl, ImageEditorCallbacks>(
-		'image-editor', {},
-	);
-	return messenger;
-};
-
 export const createJsDrawEditor = (
-	callbacks: ImageEditorCallbacks,
+	callbacks: MainProcessApi,
 	initialToolbarState: string,
 	locale: string,
 	defaultLocalizations: LocalizedStrings,
@@ -177,6 +169,9 @@ export const createJsDrawEditor = (
 		});
 	};
 
+	const themeStyles = document.createElement('style');
+	parentElement.appendChild(themeStyles);
+
 	const editorControl = {
 		editor,
 		loadImageOrTemplate: async (resourceUrl: string, templateData: string, svgData: string|undefined) => {
@@ -200,7 +195,11 @@ export const createJsDrawEditor = (
 			void startAutosaveLoop(editor, callbacks.save);
 			watchEditorForTemplateChanges(editor, templateData, callbacks.updateEditorTemplate);
 		},
-		onThemeUpdate: () => {
+		onThemeUpdate: (css: string|null) => {
+			if (css) {
+				themeStyles.textContent = css;
+			}
+
 			// Slightly adjusts the given editor's theme colors. This ensures that the colors chosen for
 			// the editor have proper contrast.
 			adjustEditorThemeForContrast(editor);
@@ -211,12 +210,24 @@ export const createJsDrawEditor = (
 		},
 	};
 
-	editorControl.onThemeUpdate();
+	editorControl.onThemeUpdate(null);
 
 	callbacks.onLoadedEditor();
 
 	return editorControl;
 };
 
+type EditorControl = ReturnType<typeof createJsDrawEditor>;
+export const createMessenger = (getEditor: ()=> EditorControl) => {
+	const messenger = new WebViewToRNMessenger<EditorProcessApi, MainProcessApi>(
+		'image-editor', {
+			onThemeUpdate: async (css: string) => {
+				getEditor().onThemeUpdate(css);
+			},
+			saveThenExit: () => getEditor().saveThenExit(),
+		},
+	);
+	return messenger;
+};
 
 export default createJsDrawEditor;
diff --git a/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/startAutosaveLoop.ts b/packages/app-mobile/contentScripts/imageEditorBundle/contentScript/startAutosaveLoop.ts
similarity index 100%
rename from packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/startAutosaveLoop.ts
rename to packages/app-mobile/contentScripts/imageEditorBundle/contentScript/startAutosaveLoop.ts
diff --git a/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/types.ts b/packages/app-mobile/contentScripts/imageEditorBundle/contentScript/types.ts
similarity index 84%
rename from packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/types.ts
rename to packages/app-mobile/contentScripts/imageEditorBundle/contentScript/types.ts
index f21d7ea2a4..f1054eee23 100644
--- a/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/types.ts
+++ b/packages/app-mobile/contentScripts/imageEditorBundle/contentScript/types.ts
@@ -3,7 +3,7 @@ export type SaveDrawingCallback = (svgData: string, isAutosave: boolean)=> void;
 export type UpdateEditorTemplateCallback = (newTemplate: string)=> void;
 export type UpdateToolbarCallback = (toolbarData: string)=> void;
 
-export interface ImageEditorCallbacks {
+export interface MainProcessApi {
 	onLoadedEditor: ()=> void;
 
 	save: SaveDrawingCallback;
@@ -18,7 +18,10 @@ export interface ImageEditorCallbacks {
 	readClipboardText: ()=> Promise<string>;
 }
 
-export interface ImageEditorControl {}
+export interface EditorProcessApi {
+	saveThenExit(): Promise<void>;
+	onThemeUpdate(newCss: string): Promise<void>;
+}
 
 // Overrides translations in js-draw -- as of the time of this writing,
 // Joplin has many common strings localized better than js-draw.
diff --git a/packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/watchEditorForTemplateChanges.ts b/packages/app-mobile/contentScripts/imageEditorBundle/contentScript/watchEditorForTemplateChanges.ts
similarity index 100%
rename from packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/watchEditorForTemplateChanges.ts
rename to packages/app-mobile/contentScripts/imageEditorBundle/contentScript/watchEditorForTemplateChanges.ts
diff --git a/packages/app-mobile/contentScripts/imageEditorBundle/useWebViewSetup.tsx b/packages/app-mobile/contentScripts/imageEditorBundle/useWebViewSetup.tsx
new file mode 100644
index 0000000000..ba25906405
--- /dev/null
+++ b/packages/app-mobile/contentScripts/imageEditorBundle/useWebViewSetup.tsx
@@ -0,0 +1,200 @@
+import * as React from 'react';
+import { _ } from '@joplin/lib/locale';
+import Setting from '@joplin/lib/models/Setting';
+import shim from '@joplin/lib/shim';
+import { themeStyle } from '@joplin/lib/theme';
+import { Theme } from '@joplin/lib/themes/type';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Platform } from 'react-native';
+import useEditorMessenger from './utils/useEditorMessenger';
+import { WebViewControl } from '../../components/ExtendedWebView/types';
+import { LocalizedStrings } from './contentScript/types';
+import { SetUpResult } from '../types';
+
+
+type OnSaveCallback = (svgData: string)=> Promise<void>;
+type OnCancelCallback = ()=> void;
+
+interface Props {
+	themeId: number;
+	resourceFilename: string|null;
+	onSave: OnSaveCallback;
+	onAutoSave: OnSaveCallback;
+	onRequestCloseEditor: OnCancelCallback;
+	onSetImageChanged: (changed: boolean)=> void;
+	webViewRef: React.RefObject<WebViewControl>;
+}
+
+export interface ImageEditorControl {
+	saveThenExit(): Promise<void>;
+}
+
+const useCss = (editorTheme: Theme) => {
+	return useMemo(() => {
+		// Ensure we have contrast between the background and selection. Some themes
+		// have the same backgroundColor and selectionColor2. (E.g. Aritim Dark)
+		let selectionBackgroundColor = editorTheme.selectedColor2;
+		if (selectionBackgroundColor === editorTheme.backgroundColor) {
+			selectionBackgroundColor = editorTheme.selectedColor;
+		}
+
+		return `
+			:root .imageEditorContainer {
+				--background-color-1: ${editorTheme.backgroundColor};
+				--foreground-color-1: ${editorTheme.color};
+				--background-color-2: ${editorTheme.backgroundColor3};
+				--foreground-color-2: ${editorTheme.color3};
+				--background-color-3: ${editorTheme.raisedBackgroundColor};
+				--foreground-color-3: ${editorTheme.raisedColor};
+			
+				--selection-background-color: ${editorTheme.backgroundColorHover3};
+				--selection-foreground-color: ${editorTheme.color3};
+				--primary-action-foreground-color: ${editorTheme.color4};
+
+				--primary-shadow-color: ${editorTheme.colorFaded};
+
+				width: 100vw;
+				height: 100vh;
+				box-sizing: border-box;
+			}
+
+			body, html {
+				padding: 0;
+				margin: 0;
+				overflow: hidden;
+			}
+
+			/* Hide the scrollbar. See scrollbar accessibility concerns
+			   (https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width#accessibility_concerns)
+			   for why this isn't done in js-draw itself. */
+			.toolbar-tool-row::-webkit-scrollbar {
+				display: none;
+				height: 0;
+			}
+
+			/* Hide the save/close icons on small screens. This isn't done in the upstream
+			   js-draw repository partially because it isn't as well localized as Joplin
+			   (icons can be used to suggest the meaning of a button when a translation is
+			   unavailable). */
+			.toolbar-edge-toolbar:not(.one-row) .toolwidget-tag--save .toolbar-icon,
+			.toolbar-edge-toolbar:not(.one-row) .toolwidget-tag--exit .toolbar-icon {
+				display: none;
+			}
+		`;
+	}, [editorTheme]);
+};
+
+const useWebViewSetup = ({
+	webViewRef,
+	themeId,
+	resourceFilename,
+	onSetImageChanged,
+	onSave,
+	onAutoSave,
+	onRequestCloseEditor,
+}: Props): SetUpResult<ImageEditorControl> => {
+	const editorTheme: Theme = themeStyle(themeId);
+
+	// A set of localization overrides (Joplin is better localized than js-draw).
+	// All localizable strings (some unused?) can be found at
+	// https://github.com/personalizedrefrigerator/js-draw/blob/main/.github/ISSUE_TEMPLATE/translation-js-draw-new.yml
+	const localizedStrings: LocalizedStrings = useMemo(() => ({
+		save: _('Save'),
+		close: _('Close'),
+		undo: _('Undo'),
+		redo: _('Redo'),
+	}), []);
+
+	const appInfo = useMemo(() => {
+		return {
+			name: 'Joplin',
+			description: `v${shim.appVersion()}`,
+		};
+	}, []);
+
+	const injectedJavaScript = useMemo(() => `
+		if (window.imageEditorControl === undefined) {
+			${shim.injectedJs('imageEditorBundle')}
+
+			const messenger = imageEditorBundle.createMessenger(() => window.imageEditorControl);
+			window.imageEditorControl = imageEditorBundle.createJsDrawEditor(
+				messenger.remoteApi,
+				${JSON.stringify(Setting.value('imageeditor.jsdrawToolbar'))},
+				${JSON.stringify(Setting.value('locale'))},
+				${JSON.stringify(localizedStrings)},
+				${JSON.stringify({
+		appInfo,
+		...(shim.mobilePlatform() === 'web' ? {
+			// Use the browser-default clipboard API on web.
+			clipboardApi: null,
+		} : {}),
+	})},
+			);
+		}
+	`, [localizedStrings, appInfo]);
+
+	const onReadyToLoadData = useCallback(async () => {
+		const getInitialInjectedData = async () => {
+			// On mobile, it's faster to load the image within the WebView with an XMLHttpRequest.
+			// In this case, the image is loaded elsewhere.
+			if (Platform.OS !== 'web') {
+				return undefined;
+			}
+
+			// On web, however, this doesn't work, so the image needs to be loaded here.
+			if (!resourceFilename) {
+				return '';
+			}
+			return await shim.fsDriver().readFile(resourceFilename, 'utf-8');
+		};
+		// It can take some time for initialSVGData to be transferred to the WebView.
+		// Thus, do so after the main content has been loaded.
+		webViewRef.current.injectJS(`(async () => {
+			if (window.imageEditorControl) {
+				const initialSVGPath = ${JSON.stringify(resourceFilename)};
+				const initialTemplateData = ${JSON.stringify(Setting.value('imageeditor.imageTemplate'))};
+				const initialData = ${JSON.stringify(await getInitialInjectedData())};
+
+				imageEditorControl.loadImageOrTemplate(initialSVGPath, initialTemplateData, initialData);
+			}
+		})();`);
+	}, [webViewRef, resourceFilename]);
+
+	const messenger = useEditorMessenger({
+		webViewRef,
+		setImageChanged: onSetImageChanged,
+		onReadyToLoadData,
+		onSave,
+		onAutoSave,
+		onRequestCloseEditor,
+	});
+	const messengerRef = useRef(messenger);
+	messengerRef.current = messenger;
+
+	const css = useCss(editorTheme);
+	useEffect(() => {
+		void messengerRef.current.remoteApi.onThemeUpdate(css);
+	}, [css]);
+
+	const editorControl = useMemo((): ImageEditorControl => {
+		return {
+			saveThenExit: () => messenger.remoteApi.saveThenExit(),
+		};
+	}, [messenger]);
+
+	return useMemo(() => {
+		return {
+			pageSetup: {
+				js: injectedJavaScript,
+				css,
+			},
+			api: editorControl,
+			webViewEventHandlers: {
+				onLoadEnd: messenger.onWebViewLoaded,
+				onMessage: messenger.onWebViewMessage,
+			},
+		};
+	}, [editorControl, messenger, injectedJavaScript, css]);
+};
+
+export default useWebViewSetup;
diff --git a/packages/app-mobile/components/NoteEditor/ImageEditor/utils/useEditorMessenger.ts b/packages/app-mobile/contentScripts/imageEditorBundle/utils/useEditorMessenger.ts
similarity index 50%
rename from packages/app-mobile/components/NoteEditor/ImageEditor/utils/useEditorMessenger.ts
rename to packages/app-mobile/contentScripts/imageEditorBundle/utils/useEditorMessenger.ts
index f380b204d5..599f8277ec 100644
--- a/packages/app-mobile/components/NoteEditor/ImageEditor/utils/useEditorMessenger.ts
+++ b/packages/app-mobile/contentScripts/imageEditorBundle/utils/useEditorMessenger.ts
@@ -1,25 +1,30 @@
-import { RefObject, useMemo } from 'react';
-import { WebViewControl } from '../../../ExtendedWebView/types';
-import { ImageEditorCallbacks, ImageEditorControl } from '../js-draw/types';
+import { RefObject, useMemo, useRef } from 'react';
 import Setting from '@joplin/lib/models/Setting';
-import RNToWebViewMessenger from '../../../../utils/ipc/RNToWebViewMessenger';
-import { writeAutosave } from '../autosave';
 import Clipboard from '@react-native-clipboard/clipboard';
+import { MainProcessApi, EditorProcessApi } from '../contentScript/types';
+import { WebViewControl } from '../../../components/ExtendedWebView/types';
+import RNToWebViewMessenger from '../../../utils/ipc/RNToWebViewMessenger';
 
 interface Props {
-	webviewRef: RefObject<WebViewControl>;
+	webViewRef: RefObject<WebViewControl>;
 	setImageChanged(changed: boolean): void;
 
 	onReadyToLoadData(): void;
 	onSave(data: string): void;
+	onAutoSave(data: string): void;
 	onRequestCloseEditor(promptIfUnsaved: boolean): void;
 }
 
 const useEditorMessenger = ({
-	webviewRef, setImageChanged, onReadyToLoadData, onRequestCloseEditor, onSave,
+	webViewRef: webviewRef, setImageChanged, onReadyToLoadData, onRequestCloseEditor, onSave, onAutoSave,
 }: Props) => {
+	const events = { onRequestCloseEditor, onSave, onAutoSave, onReadyToLoadData };
+	// Use a ref to avoid unnecessary rerenders
+	const eventsRef = useRef(events);
+	eventsRef.current = events;
+
 	return useMemo(() => {
-		const localApi: ImageEditorCallbacks = {
+		const localApi: MainProcessApi = {
 			updateEditorTemplate: newTemplate => {
 				Setting.setValue('imageeditor.imageTemplate', newTemplate);
 			},
@@ -30,21 +35,21 @@ const useEditorMessenger = ({
 				setImageChanged(hasChanges);
 			},
 			onLoadedEditor: () => {
-				onReadyToLoadData();
+				eventsRef.current.onReadyToLoadData();
 			},
 			saveThenClose: svgData => {
-				onSave(svgData);
-				onRequestCloseEditor(false);
+				eventsRef.current.onSave(svgData);
+				eventsRef.current.onRequestCloseEditor(false);
 			},
 			save: (svgData, isAutosave) => {
 				if (isAutosave) {
-					return writeAutosave(svgData);
+					return eventsRef.current.onAutoSave(svgData);
 				} else {
-					return onSave(svgData);
+					return eventsRef.current.onSave(svgData);
 				}
 			},
 			closeEditor: promptIfUnsaved => {
-				onRequestCloseEditor(promptIfUnsaved);
+				eventsRef.current.onRequestCloseEditor(promptIfUnsaved);
 			},
 			writeClipboardText: async text => {
 				Clipboard.setString(text);
@@ -53,11 +58,11 @@ const useEditorMessenger = ({
 				return Clipboard.getString();
 			},
 		};
-		const messenger = new RNToWebViewMessenger<ImageEditorCallbacks, ImageEditorControl>(
+		const messenger = new RNToWebViewMessenger<MainProcessApi, EditorProcessApi>(
 			'image-editor', webviewRef, localApi,
 		);
 		return messenger;
-	}, [webviewRef, setImageChanged, onReadyToLoadData, onRequestCloseEditor, onSave]);
+	}, [webviewRef, setImageChanged]);
 };
 
 export default useEditorMessenger;
diff --git a/packages/app-mobile/contentScripts/markdownEditorBundle/contentScript.ts b/packages/app-mobile/contentScripts/markdownEditorBundle/contentScript.ts
new file mode 100644
index 0000000000..9ebeeca416
--- /dev/null
+++ b/packages/app-mobile/contentScripts/markdownEditorBundle/contentScript.ts
@@ -0,0 +1,66 @@
+import { createEditor } from '@joplin/editor/CodeMirror';
+import { focus } from '@joplin/lib/utils/focusHandler';
+import WebViewToRNMessenger from '../../utils/ipc/WebViewToRNMessenger';
+import { EditorProcessApi, EditorProps, MainProcessApi } from './types';
+import readFileToBase64 from '../utils/readFileToBase64';
+
+export { default as setUpLogger } from '../utils/setUpLogger';
+
+export const initializeEditor = ({
+	parentElementClassName,
+	initialText,
+	initialNoteId,
+	settings,
+}: EditorProps) => {
+	const messenger = new WebViewToRNMessenger<EditorProcessApi, MainProcessApi>('markdownEditor', null);
+
+	const parentElement = document.getElementsByClassName(parentElementClassName)[0] as HTMLElement;
+	if (!parentElement) {
+		throw new Error(`Unable to find parent element for editor (class name: ${JSON.stringify(parentElementClassName)})`);
+	}
+
+	const control = createEditor(parentElement, {
+		initialText,
+		initialNoteId,
+		settings,
+
+		onPasteFile: async (data) => {
+			const base64 = await readFileToBase64(data);
+			await messenger.remoteApi.onPasteFile(data.type, base64);
+		},
+
+		onLogMessage: message => {
+			void messenger.remoteApi.logMessage(message);
+		},
+		onEvent: (event): void => {
+			void messenger.remoteApi.onEditorEvent(event);
+		},
+	});
+
+	// Works around https://github.com/laurent22/joplin/issues/10047 by handling
+	// the text/uri-list MIME type when pasting, rather than sending the paste event
+	// to CodeMirror.
+	//
+	// TODO: Remove this workaround when the issue has been fixed upstream.
+	control.on('paste', (_editor, event: ClipboardEvent) => {
+		const clipboardData = event.clipboardData;
+		if (clipboardData.types.length === 1 && clipboardData.types[0] === 'text/uri-list') {
+			event.preventDefault();
+			control.insertText(clipboardData.getData('text/uri-list'));
+		}
+	});
+
+	// Note: Just adding an onclick listener seems sufficient to focus the editor when its background
+	// is tapped.
+	parentElement.addEventListener('click', (event) => {
+		const activeElement = document.querySelector(':focus');
+		if (!parentElement.contains(activeElement) && event.target === parentElement) {
+			focus('initial editor focus', control);
+		}
+	});
+
+	messenger.setLocalInterface({
+		editor: control,
+	});
+	return control;
+};
diff --git a/packages/app-mobile/contentScripts/markdownEditorBundle/types.ts b/packages/app-mobile/contentScripts/markdownEditorBundle/types.ts
new file mode 100644
index 0000000000..7af148c31f
--- /dev/null
+++ b/packages/app-mobile/contentScripts/markdownEditorBundle/types.ts
@@ -0,0 +1,24 @@
+import { EditorEvent } from '@joplin/editor/events';
+import { EditorControl, EditorSettings } from '@joplin/editor/types';
+
+export interface EditorProcessApi {
+	editor: EditorControl;
+}
+
+export interface SelectionRange {
+	start: number;
+	end: number;
+}
+
+export interface EditorProps {
+	parentElementClassName: string;
+	initialText: string;
+	initialNoteId: string;
+	settings: EditorSettings;
+}
+
+export interface MainProcessApi {
+	onEditorEvent(event: EditorEvent): Promise<void>;
+	logMessage(message: string): Promise<void>;
+	onPasteFile(type: string, dataBase64: string): Promise<void>;
+}
diff --git a/packages/app-mobile/contentScripts/markdownEditorBundle/useWebViewSetup.ts b/packages/app-mobile/contentScripts/markdownEditorBundle/useWebViewSetup.ts
new file mode 100644
index 0000000000..24b0566e01
--- /dev/null
+++ b/packages/app-mobile/contentScripts/markdownEditorBundle/useWebViewSetup.ts
@@ -0,0 +1,139 @@
+import shim from '@joplin/lib/shim';
+import { EditorProcessApi, EditorProps as EditorOptions, SelectionRange, MainProcessApi } from './types';
+import { SetUpResult } from '../types';
+import { SearchState } from '@joplin/editor/types';
+import { RefObject, useEffect, useMemo, useRef } from 'react';
+import { OnMessageEvent, WebViewControl } from '../../components/ExtendedWebView/types';
+import { EditorEvent } from '@joplin/editor/events';
+import Logger from '@joplin/utils/Logger';
+import RNToWebViewMessenger from '../../utils/ipc/RNToWebViewMessenger';
+
+const logger = Logger.create('markdownEditor');
+
+interface Props {
+	editorOptions: EditorOptions;
+	initialSelection: SelectionRange;
+	noteHash: string;
+	globalSearch: string;
+	onEditorEvent: (event: EditorEvent)=> void;
+	onAttachFile: (mime: string, base64: string)=> void;
+
+	webviewRef: RefObject<WebViewControl>;
+}
+
+const defaultSearchState: SearchState = {
+	useRegex: false,
+	caseSensitive: false,
+
+	searchText: '',
+	replaceText: '',
+	dialogVisible: false,
+};
+
+const useWebViewSetup = ({
+	editorOptions, initialSelection, noteHash, globalSearch, webviewRef, onEditorEvent, onAttachFile,
+}: Props): SetUpResult<EditorProcessApi> => {
+	const setInitialSelectionJs = initialSelection ? `
+		cm.select(${initialSelection.start}, ${initialSelection.end});
+		cm.execCommand('scrollSelectionIntoView');
+	` : '';
+	const jumpToHashJs = noteHash ? `
+		cm.jumpToHash(${JSON.stringify(noteHash)});
+	` : '';
+	const setInitialSearchJs = globalSearch ? `
+		cm.setSearchState(${JSON.stringify({
+		...defaultSearchState,
+		searchText: globalSearch,
+	})})
+	` : '';
+
+	const injectedJavaScript = useMemo(() => `
+		if (!window.cm) {
+			${shim.injectedJs('markdownEditorBundle')};
+			markdownEditorBundle.setUpLogger();
+
+			window.cm = markdownEditorBundle.initializeEditor(
+				${JSON.stringify(editorOptions)}
+			);
+
+			${jumpToHashJs}
+			// Set the initial selection after jumping to the header -- the initial selection,
+			// if specified, should take precedence.
+			${setInitialSelectionJs}
+			${setInitialSearchJs}
+
+			window.onresize = () => {
+				cm.execCommand('scrollSelectionIntoView');
+			};
+		}
+	`, [jumpToHashJs, setInitialSearchJs, setInitialSelectionJs, editorOptions]);
+
+	// Scroll to the new hash, if it changes.
+	const isFirstScrollRef = useRef(true);
+	useEffect(() => {
+		// The first "jump to header" is handled during editor setup and shouldn't
+		// be handled a second time:
+		if (isFirstScrollRef.current) {
+			isFirstScrollRef.current = false;
+			return;
+		}
+		if (jumpToHashJs && webviewRef.current) {
+			webviewRef.current.injectJS(jumpToHashJs);
+		}
+	}, [jumpToHashJs, webviewRef]);
+
+	const onEditorEventRef = useRef(onEditorEvent);
+	onEditorEventRef.current = onEditorEvent;
+
+	const onAttachRef = useRef(onAttachFile);
+	onAttachRef.current = onAttachFile;
+
+	const editorMessenger = useMemo(() => {
+		const localApi: MainProcessApi = {
+			async onEditorEvent(event) {
+				onEditorEventRef.current(event);
+			},
+			async logMessage(message) {
+				logger.debug('CodeMirror:', message);
+			},
+			async onPasteFile(type, data) {
+				onAttachRef.current(type, data);
+			},
+		};
+		const messenger = new RNToWebViewMessenger<MainProcessApi, EditorProcessApi>(
+			'markdownEditor', webviewRef, localApi,
+		);
+		return messenger;
+	}, [webviewRef]);
+
+	const webViewEventHandlers = useMemo(() => {
+		return {
+			onLoadEnd: () => {
+				editorMessenger.onWebViewLoaded();
+			},
+			onMessage: (event: OnMessageEvent) => {
+				editorMessenger.onWebViewMessage(event);
+			},
+		};
+	}, [editorMessenger]);
+
+	const api = useMemo(() => {
+		return editorMessenger.remoteApi;
+	}, [editorMessenger]);
+
+	const editorSettings = editorOptions.settings;
+	useEffect(() => {
+		api.editor.updateSettings(editorSettings);
+	}, [api, editorSettings]);
+
+	return useMemo(() => ({
+		pageSetup: {
+			js: injectedJavaScript,
+			css: '',
+		},
+		api,
+		webViewEventHandlers,
+	}), [injectedJavaScript, api, webViewEventHandlers]);
+};
+
+export default useWebViewSetup;
diff --git a/packages/app-mobile/components/NoteBodyViewer/bundledJs/Renderer.test.ts b/packages/app-mobile/contentScripts/rendererBundle/contentScript/Renderer.test.ts
similarity index 85%
rename from packages/app-mobile/components/NoteBodyViewer/bundledJs/Renderer.test.ts
rename to packages/app-mobile/contentScripts/rendererBundle/contentScript/Renderer.test.ts
index 75253cfa60..f3be5e1424 100644
--- a/packages/app-mobile/components/NoteBodyViewer/bundledJs/Renderer.test.ts
+++ b/packages/app-mobile/contentScripts/rendererBundle/contentScript/Renderer.test.ts
@@ -1,24 +1,25 @@
 /** @jest-environment jsdom */
 import Setting from '@joplin/lib/models/Setting';
-import Renderer, { RendererSettings, RendererSetupOptions } from './Renderer';
+import Renderer, { RenderSettings, RendererSetupOptions } from './Renderer';
 import shim from '@joplin/lib/shim';
 import { MarkupLanguage } from '@joplin/renderer';
 
-const defaultRendererSettings: RendererSettings = {
+const defaultRendererSettings: RenderSettings = {
 	theme: JSON.stringify({ cacheKey: 'test' }),
-	onResourceLoaded: ()=>{},
 	highlightedKeywords: [],
 	resources: {},
 	codeTheme: 'atom-one-light.css',
 	noteHash: '',
 	initialScroll: 0,
-	readAssetBlob: async (_path: string)=>new Blob(),
+	readAssetBlob: async (_path: string) => new Blob(),
 
 	createEditPopupSyntax: '',
 	destroyEditPopupSyntax: '',
+	pluginAssetContainerSelector: '#asset-container',
+	splitted: false,
 
 	pluginSettings: {},
-	requestPluginSetting: ()=>{},
+	requestPluginSetting: () => { },
 };
 
 const makeRenderer = (options: Partial<RendererSetupOptions>) => {
@@ -47,25 +48,25 @@ describe('Renderer', () => {
 		document.body.appendChild(contentContainer);
 
 		const pluginAssetsContainer = document.createElement('div');
-		pluginAssetsContainer.id = 'joplin-container-pluginAssetsContainer';
+		pluginAssetsContainer.id = 'asset-container';
 		document.body.appendChild(pluginAssetsContainer);
 	});
 
 	afterEach(() => {
 		document.querySelector('#joplin-container-content')?.remove();
-		document.querySelector('#joplin-container-pluginAssetsContainer')?.remove();
+		document.querySelector('#asset-container')?.remove();
 	});
 
 	test('should support rendering markdown', async () => {
 		const renderer = makeRenderer({});
-		await renderer.rerender(
+		await renderer.rerenderToBody(
 			{ language: MarkupLanguage.Markdown, markup: '**test**' },
 			defaultRendererSettings,
 		);
 
 		expect(getRenderedContent().innerHTML.trim()).toBe('<p><strong>test</strong></p>');
 
-		await renderer.rerender(
+		await renderer.rerenderToBody(
 			{ language: MarkupLanguage.Markdown, markup: '*test*' },
 			defaultRendererSettings,
 		);
@@ -92,7 +93,7 @@ describe('Renderer', () => {
 				pluginId: 'com.example.test-plugin',
 			},
 		]);
-		await renderer.rerender(
+		await renderer.rerenderToBody(
 			{ language: MarkupLanguage.Markdown, markup: '```\ntest\n```' },
 			defaultRendererSettings,
 		);
@@ -100,7 +101,7 @@ describe('Renderer', () => {
 
 		// Should support removing plugin scripts
 		await renderer.setExtraContentScriptsAndRerender([]);
-		await renderer.rerender(
+		await renderer.rerenderToBody(
 			{ language: MarkupLanguage.Markdown, markup: '```\ntest\n```' },
 			defaultRendererSettings,
 		);
@@ -113,14 +114,14 @@ describe('Renderer', () => {
 
 		const requestPluginSetting = jest.fn();
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-		const rerender = (pluginSettings: Record<string, any>) => {
-			return renderer.rerender(
+		const rerenderToBody = (pluginSettings: Record<string, any>) => {
+			return renderer.rerenderToBody(
 				{ language: MarkupLanguage.Markdown, markup: '```\ntest\n```' },
 				{ ...defaultRendererSettings, pluginSettings, requestPluginSetting },
 			);
 		};
 
-		await rerender({});
+		await rerenderToBody({});
 		expect(requestPluginSetting).toHaveBeenCalledTimes(0);
 
 		const pluginId = 'com.example.test-plugin';
@@ -146,7 +147,7 @@ describe('Renderer', () => {
 
 		// Should call .requestPluginSetting for missing settings
 		expect(requestPluginSetting).toHaveBeenCalledTimes(1);
-		await rerender({});
+		await rerenderToBody({ someOtherSetting: 1 });
 		expect(requestPluginSetting).toHaveBeenCalledTimes(2);
 		expect(requestPluginSetting).toHaveBeenLastCalledWith('com.example.test-plugin', 'setting');
 
@@ -154,11 +155,11 @@ describe('Renderer', () => {
 		expect(getRenderedContent().querySelector('#setting-value').innerHTML).toBe('Setting value: undefined');
 
 		// Should expect only namespaced plugin settings
-		await rerender({ 'setting': 'test' });
+		await rerenderToBody({ 'setting': 'test' });
 		expect(requestPluginSetting).toHaveBeenCalledTimes(3);
 
 		// Should not request plugin settings when all settings are present.
-		await rerender({ [`${pluginId}.setting`]: 'test' });
+		await rerenderToBody({ [`${pluginId}.setting`]: 'test' });
 		expect(requestPluginSetting).toHaveBeenCalledTimes(3);
 		expect(getRenderedContent().querySelector('#setting-value').innerHTML).toBe('Setting value: test');
 	});
diff --git a/packages/app-mobile/contentScripts/rendererBundle/contentScript/Renderer.ts b/packages/app-mobile/contentScripts/rendererBundle/contentScript/Renderer.ts
new file mode 100644
index 0000000000..e8affbc6bf
--- /dev/null
+++ b/packages/app-mobile/contentScripts/rendererBundle/contentScript/Renderer.ts
@@ -0,0 +1,202 @@
+import { MarkupLanguage, MarkupToHtml } from '@joplin/renderer';
+import type { MarkupToHtmlConverter, RenderOptions, FsDriver as RendererFsDriver, ResourceInfos } from '@joplin/renderer/types';
+import makeResourceModel from './utils/makeResourceModel';
+import addPluginAssets from './utils/addPluginAssets';
+import { ExtraContentScriptSource, ForwardedJoplinSettings, MarkupRecord } from '../types';
+import { ExtraContentScript } from '@joplin/lib/services/plugins/utils/loadContentScripts';
+import { PluginOptions } from '@joplin/renderer/MarkupToHtml';
+import afterFullPageRender from './utils/afterFullPageRender';
+
+export interface RendererSetupOptions {
+	settings: ForwardedJoplinSettings;
+	useTransferredFiles: boolean;
+	pluginOptions: PluginOptions;
+	fsDriver: RendererFsDriver;
+}
+
+export interface RenderSettings {
+	theme: string;
+	highlightedKeywords: string[];
+	resources: ResourceInfos;
+	codeTheme: string;
+	noteHash: string;
+	initialScroll: number;
+	// If [null], plugin assets are not added to the document
+	pluginAssetContainerSelector: string|null;
+
+	splitted?: boolean; // Move CSS into a separate output
+	mapsToLine?: boolean; // Sourcemaps
+
+	createEditPopupSyntax: string;
+	destroyEditPopupSyntax: string;
+
+	pluginSettings: Record<string, unknown>;
+	requestPluginSetting: (pluginId: string, settingKey: string)=> void;
+	readAssetBlob: (assetPath: string)=> Promise<Blob>;
+}
+
+export interface RendererOutput {
+	getOutputElement: ()=> HTMLElement;
+	afterRender: (setupOptions: RendererSetupOptions, renderSettings: RenderSettings)=> void;
+}
+
+export default class Renderer {
+	private markupToHtml_: MarkupToHtmlConverter;
+	private lastBodyRenderSettings_: RenderSettings|null = null;
+	private extraContentScripts_: ExtraContentScript[] = [];
+	private lastBodyMarkup_: MarkupRecord|null = null;
+	private lastPluginSettingsCacheKey_: string|null = null;
+	private resourcePathOverrides_: Record<string, string> = Object.create(null);
+
+	public constructor(private setupOptions_: RendererSetupOptions) {
+		this.recreateMarkupToHtml_();
+	}
+
+	private recreateMarkupToHtml_() {
+		this.markupToHtml_ = new MarkupToHtml({
+			extraRendererRules: this.extraContentScripts_,
+			fsDriver: this.setupOptions_.fsDriver,
+			isSafeMode: this.setupOptions_.settings.safeMode,
+			tempDir: this.setupOptions_.settings.tempDir,
+			ResourceModel: makeResourceModel(this.setupOptions_.settings.resourceDir),
+			pluginOptions: this.setupOptions_.pluginOptions,
+		});
+	}
+
+	// Intended for web, where resources can't be linked to normally.
+	public async setResourceFile(id: string, file: Blob) {
+		this.resourcePathOverrides_[id] = URL.createObjectURL(file);
+	}
+
+	public getResourcePathOverride(resourceId: string) {
+		if (Object.prototype.hasOwnProperty.call(this.resourcePathOverrides_, resourceId)) {
+			return this.resourcePathOverrides_[resourceId];
+		}
+		return null;
+	}
+
+	public async setExtraContentScriptsAndRerender(
+		extraContentScripts: ExtraContentScriptSource[],
+	) {
+		this.extraContentScripts_ = extraContentScripts.map(script => {
+			const scriptModule = ((0, eval)(script.js))({
+				pluginId: script.pluginId,
+				contentScriptId: script.id,
+			});
+
+			if (!scriptModule.plugin) {
+				throw new Error(`
+					Expected content script ${script.id} to export a function that returns an object with a "plugin" property.
+					Found: ${scriptModule}, which has keys ${Object.keys(scriptModule)}.
+				`);
+			}
+
+			return {
+				...script,
+				module: scriptModule,
+			};
+		});
+		this.recreateMarkupToHtml_();
+
+		// If possible, rerenders with the last rendering settings. The goal
+		// of this is to reduce the number of IPC calls between the viewer and
+		// React Native. We want the first render to be as fast as possible.
+		if (this.lastBodyMarkup_) {
+			await this.rerenderToBody(this.lastBodyMarkup_, this.lastBodyRenderSettings_);
+		}
+	}
+
+	public async render(markup: MarkupRecord, settings: RenderSettings) {
+		const options: RenderOptions = {
+			highlightedKeywords: settings.highlightedKeywords,
+			resources: settings.resources,
+			codeTheme: settings.codeTheme,
+			postMessageSyntax: 'window.joplinPostMessage_',
+			enableLongPress: true,
+
+			// Show an 'edit' popup over SVG images
+			editPopupFiletypes: ['image/svg+xml'],
+			createEditPopupSyntax: settings.createEditPopupSyntax,
+			destroyEditPopupSyntax: settings.destroyEditPopupSyntax,
+			itemIdToUrl: this.setupOptions_.useTransferredFiles ? (id: string) => this.getResourcePathOverride(id) : undefined,
+
+			settingValue: (pluginId: string, settingName: string) => {
+				const settingKey = `${pluginId}.${settingName}`;
+
+				if (!(settingKey in settings.pluginSettings)) {
+					// This should make the setting available on future renders.
+					settings.requestPluginSetting(pluginId, settingName);
+					return undefined;
+				}
+
+				return settings.pluginSettings[settingKey];
+			},
+			splitted: settings.splitted,
+			mapsToLine: settings.mapsToLine,
+			whiteBackgroundNoteRendering: markup.language === MarkupLanguage.Html,
+		};
+
+		const pluginSettingsCacheKey = JSON.stringify(settings.pluginSettings);
+		if (pluginSettingsCacheKey !== this.lastPluginSettingsCacheKey_) {
+			this.lastPluginSettingsCacheKey_ = pluginSettingsCacheKey;
+			this.markupToHtml_.clearCache(markup.language);
+		}
+
+		const result = await this.markupToHtml_.render(
+			markup.language,
+			markup.markup,
+			JSON.parse(settings.theme),
+			options,
+		);
+
+		// Adding plugin assets can be slow -- run it asynchronously.
+		if (settings.pluginAssetContainerSelector) {
+			void (async () => {
+				await addPluginAssets(result.pluginAssets, {
+					inlineAssets: this.setupOptions_.useTransferredFiles,
+					readAssetBlob: settings.readAssetBlob,
+					container: document.querySelector(settings.pluginAssetContainerSelector),
+				});
+
+				// Some plugins require this event to be dispatched just after being added.
+				document.dispatchEvent(new Event('joplin-noteDidUpdate'));
+			})();
+		}
+
+		return result;
+	}
+
+	public async rerenderToBody(markup: MarkupRecord, settings: RenderSettings) {
+		this.lastBodyMarkup_ = markup;
+		this.lastBodyRenderSettings_ = settings;
+
+		const contentContainer = document.getElementById('joplin-container-content') ?? document.body;
+
+		let html = '';
+		try {
+			const result = await this.render(markup, settings);
+			html = result.html;
+		} catch (error) {
+			if (!contentContainer) {
+				alert(`Renderer error: ${error}`);
+			} else {
+				contentContainer.textContent = `
+					Error: ${error}
+					
+					${error.stack ?? ''}
+				`;
+			}
+			throw error;
+		}
+
+		if (contentContainer) {
+			contentContainer.innerHTML = html;
+		}
+
+		afterFullPageRender(this.setupOptions_, settings);
+	}
+
+	public clearCache(markupLanguage: MarkupLanguage) {
+		this.markupToHtml_.clearCache(markupLanguage);
+	}
+}
diff --git a/packages/app-mobile/contentScripts/rendererBundle/contentScript/index.ts b/packages/app-mobile/contentScripts/rendererBundle/contentScript/index.ts
new file mode 100644
index 0000000000..3787aa2b56
--- /dev/null
+++ b/packages/app-mobile/contentScripts/rendererBundle/contentScript/index.ts
@@ -0,0 +1,79 @@
+import Renderer from './Renderer';
+import WebViewToRNMessenger from '../../../utils/ipc/WebViewToRNMessenger';
+import { RendererProcessApi, MainProcessApi, RendererWebViewOptions } from '../types';
+
+interface WebViewLib {
+	initialize(config: unknown): void;
+}
+
+interface WebViewApi {
+	postMessage: (contentScriptId: string, args: unknown)=> void;
+}
+
+interface ExtendedWindow extends Window {
+	webviewLib: WebViewLib;
+	webviewApi: WebViewApi;
+	joplinPostMessage_: (message: string, args: unknown)=> void;
+}
+
+declare const window: ExtendedWindow;
+declare const webviewLib: WebViewLib;
+
+const initializeMessenger = (options: RendererWebViewOptions) => {
+	const messenger = new WebViewToRNMessenger<RendererProcessApi, MainProcessApi>(
+		'renderer',
+		null,
+	);
+
+	window.joplinPostMessage_ = (message: string, _args: unknown) => {
+		return messenger.remoteApi.onPostMessage(message);
+	};
+
+	window.webviewApi = {
+		postMessage: messenger.remoteApi.onPostPluginMessage,
+	};
+
+	webviewLib.initialize({
+		postMessage: (message: string) => {
+			messenger.remoteApi.onPostMessage(message);
+		},
+	});
+	// Share the webview library globally so that the renderer can access it.
+	window.webviewLib = webviewLib;
+
+	const renderer = new Renderer({
+		...options,
+		fsDriver: messenger.remoteApi.fsDriver,
+	});
+
+	messenger.setLocalInterface({
+		renderer,
+		jumpToHash: (hash: string) => {
+			location.hash = `#${hash}`;
+		},
+	});
+
+	return { messenger };
+};
+
+// eslint-disable-next-line import/prefer-default-export -- This is a bundle entrypoint
+export const initialize = (options: RendererWebViewOptions) => {
+	const { messenger } = initializeMessenger(options);
+
+	const lastScrollTop: number|null = null;
+	const onMainContentScroll = () => {
+		const newScrollTop = document.scrollingElement.scrollTop;
+		if (lastScrollTop !== newScrollTop) {
+			messenger.remoteApi.onScroll(newScrollTop);
+		}
+	};
+
+	// Listen for events on both scrollingElement and window
+	// - On Android, scrollingElement.addEventListener('scroll', callback) doesn't call callback on
+	// scroll. However, window.addEventListener('scroll', callback) does.
+	// - iOS needs a listener to be added to scrollingElement -- events aren't received when
+	//   the listener is added to window with window.addEventListener('scroll', ...).
+	document.scrollingElement?.addEventListener('scroll', onMainContentScroll);
+	window.addEventListener('scroll', onMainContentScroll);
+};
+
diff --git a/packages/app-mobile/contentScripts/rendererBundle/contentScript/types.ts b/packages/app-mobile/contentScripts/rendererBundle/contentScript/types.ts
new file mode 100644
index 0000000000..942085135d
--- /dev/null
+++ b/packages/app-mobile/contentScripts/rendererBundle/contentScript/types.ts
@@ -0,0 +1,5 @@
+export interface WebViewLib {
+	initialize(config: unknown): void;
+	setupResourceManualDownload(): void;
+}
+
diff --git a/packages/app-mobile/components/NoteBodyViewer/bundledJs/utils/addPluginAssets.ts b/packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/addPluginAssets.ts
similarity index 97%
rename from packages/app-mobile/components/NoteBodyViewer/bundledJs/utils/addPluginAssets.ts
rename to packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/addPluginAssets.ts
index 970b3fceb4..9485b0f1dd 100644
--- a/packages/app-mobile/components/NoteBodyViewer/bundledJs/utils/addPluginAssets.ts
+++ b/packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/addPluginAssets.ts
@@ -39,6 +39,7 @@ const rewriteInternalAssetLinks = async (asset: RenderResultPluginAsset, content
 
 interface Options {
 	inlineAssets: boolean;
+	container: HTMLElement;
 	readAssetBlob?(path: string): Promise<Blob>;
 }
 
@@ -47,7 +48,7 @@ interface Options {
 const addPluginAssets = async (assets: RenderResultPluginAsset[], options: Options) => {
 	if (!assets) return;
 
-	const pluginAssetsContainer = document.getElementById('joplin-container-pluginAssetsContainer');
+	const pluginAssetsContainer = options.container;
 
 	const prepareAssetBlobUrls = () => {
 		for (const asset of assets) {
diff --git a/packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/afterFullPageRender.ts b/packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/afterFullPageRender.ts
new file mode 100644
index 0000000000..9a2062d2c6
--- /dev/null
+++ b/packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/afterFullPageRender.ts
@@ -0,0 +1,45 @@
+import { RenderSettings, RendererSetupOptions } from '../Renderer';
+import { WebViewLib } from '../types';
+
+interface ExtendedWindow extends Window {
+	webviewLib: WebViewLib;
+}
+
+declare const window: ExtendedWindow;
+
+const afterFullPageRender = (
+	setupOptions: RendererSetupOptions,
+	renderSettings: RenderSettings,
+) => {
+	const readyStateCheckInterval = setInterval(() => {
+		if (document.readyState === 'complete') {
+			clearInterval(readyStateCheckInterval);
+			if (setupOptions.settings.resourceDownloadMode === 'manual') {
+				window.webviewLib.setupResourceManualDownload();
+			}
+
+			const hash = renderSettings.noteHash;
+			const initialScroll = renderSettings.initialScroll;
+
+			// Don't scroll to a hash if we're given initial scroll (initial scroll
+			// overrides scrolling to a hash).
+			if ((initialScroll ?? null) !== null) {
+				const scrollingElement = document.scrollingElement ?? document.documentElement;
+				scrollingElement.scrollTop = initialScroll;
+			} else if (hash) {
+				// Gives it a bit of time before scrolling to the anchor
+				// so that images are loaded.
+				setTimeout(() => {
+					const e = document.getElementById(hash);
+					if (!e) {
+						console.warn('Cannot find hash', hash);
+						return;
+					}
+					e.scrollIntoView();
+				}, 500);
+			}
+		}
+	}, 10);
+};
+
+export default afterFullPageRender;
diff --git a/packages/app-mobile/components/NoteBodyViewer/bundledJs/utils/makeResourceModel.ts b/packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/makeResourceModel.ts
similarity index 100%
rename from packages/app-mobile/components/NoteBodyViewer/bundledJs/utils/makeResourceModel.ts
rename to packages/app-mobile/contentScripts/rendererBundle/contentScript/utils/makeResourceModel.ts
diff --git a/packages/app-mobile/contentScripts/rendererBundle/types.ts b/packages/app-mobile/contentScripts/rendererBundle/types.ts
new file mode 100644
index 0000000000..ebaa2bb854
--- /dev/null
+++ b/packages/app-mobile/contentScripts/rendererBundle/types.ts
@@ -0,0 +1,73 @@
+import type { FsDriver as RendererFsDriver, RenderResult, ResourceInfos } from '@joplin/renderer/types';
+import type Renderer from './contentScript/Renderer';
+import { MarkupLanguage, PluginOptions } from '@joplin/renderer/MarkupToHtml';
+
+// Joplin settings (as from Setting.value(...)) that should
+// remain constant during editing.
+export interface ForwardedJoplinSettings {
+	safeMode: boolean;
+	tempDir: string;
+	resourceDir: string;
+	resourceDownloadMode: string;
+}
+
+export interface RendererWebViewOptions {
+	settings: ForwardedJoplinSettings;
+
+	// True if asset and resource files should be transferred to the WebView before rendering.
+	// This must be true on web, where asset and resource files are virtual and can't be accessed
+	// without transferring.
+	useTransferredFiles: boolean;
+
+	// Enabled/disabled Markdown plugins
+	pluginOptions: PluginOptions;
+}
+
+export interface ExtraContentScriptSource {
+	id: string;
+	js: string;
+	assetPath: string;
+	pluginId: string;
+}
+
+export interface RendererProcessApi {
+	renderer: Renderer;
+	jumpToHash: (hash: string)=> void;
+}
+
+export interface MainProcessApi {
+	onScroll(scrollTop: number): void;
+	onPostMessage(message: string): void;
+	onPostPluginMessage(contentScriptId: string, message: unknown): Promise<unknown>;
+	fsDriver: RendererFsDriver;
+}
+
+export type OnScrollCallback = (scrollTop: number)=> void;
+
+export interface MarkupRecord {
+	language: MarkupLanguage;
+	markup: string;
+}
+
+export interface RenderOptions {
+	themeId: number;
+	highlightedKeywords: string[];
+	resources: ResourceInfos;
+	themeOverrides: Record<string, string|number>;
+	// If null, plugin assets will not be added to the document.
+	pluginAssetContainerSelector: string|null;
+	noteHash: string;
+	initialScroll: number;
+
+	// Forwarded renderer settings
+	splitted?: boolean;
+	mapsToLine?: boolean;
+}
+
+type CancelEvent = { cancelled: boolean };
+
+export interface RendererControl {
+	rerenderToBody(markup: MarkupRecord, options: RenderOptions, cancelEvent?: CancelEvent): Promise<string|void>;
+	render(markup: MarkupRecord, options: RenderOptions): Promise<RenderResult>;
+	clearCache(markupLanguage: MarkupLanguage): void;
+}
diff --git a/packages/app-mobile/contentScripts/rendererBundle/useWebViewSetup.ts b/packages/app-mobile/contentScripts/rendererBundle/useWebViewSetup.ts
new file mode 100644
index 0000000000..3f378f1163
--- /dev/null
+++ b/packages/app-mobile/contentScripts/rendererBundle/useWebViewSetup.ts
@@ -0,0 +1,277 @@
+import { RefObject, useEffect, useMemo, useRef } from 'react';
+import shim from '@joplin/lib/shim';
+import Setting from '@joplin/lib/models/Setting';
+import { Platform } from 'react-native';
+import { SetUpResult } from '../types';
+import { themeStyle } from '../../components/global-style';
+import Logger from '@joplin/utils/Logger';
+import { WebViewControl } from '../../components/ExtendedWebView/types';
+import { MainProcessApi, OnScrollCallback, RendererControl, RendererProcessApi, RendererWebViewOptions, RenderOptions } from './types';
+import PluginService from '@joplin/lib/services/plugins/PluginService';
+import RNToWebViewMessenger from '../../utils/ipc/RNToWebViewMessenger';
+import useEditPopup from './utils/useEditPopup';
+import { PluginStates } from '@joplin/lib/services/plugins/reducer';
+import { RenderSettings } from './contentScript/Renderer';
+import resolvePathWithinDir from '@joplin/lib/utils/resolvePathWithinDir';
+import Resource from '@joplin/lib/models/Resource';
+import { ResourceInfos } from '@joplin/renderer/types';
+import useContentScripts from './utils/useContentScripts';
+import uuid from '@joplin/lib/uuid';
+
+const logger = Logger.create('renderer/useWebViewSetup');
+
+interface Props {
+	webviewRef: RefObject<WebViewControl>;
+	onBodyScroll: OnScrollCallback|null;
+	onPostMessage: (message: string)=> void;
+	pluginStates: PluginStates;
+
+	themeId: number;
+}
+
+const useSource = (tempDirPath: string) => {
+	const injectedJs = useMemo(() => {
+		const subValues = Setting.subValues('markdown.plugin', Setting.toPlainObject());
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+		const pluginOptions: any = {};
+		for (const n in subValues) {
+			pluginOptions[n] = { enabled: subValues[n] };
+		}
+
+		const rendererWebViewStaticOptions: RendererWebViewOptions = {
+			settings: {
+				safeMode: Setting.value('isSafeMode'),
+				tempDir: tempDirPath,
+				resourceDir: Setting.value('resourceDir'),
+				resourceDownloadMode: Setting.value('sync.resourceDownloadMode'),
+			},
+			// Web needs files to be transferred manually, since image SRCs can't reference
+			// the Origin Private File System.
+			useTransferredFiles: Platform.OS === 'web',
+			pluginOptions,
+		};
+
+		return `
+			if (!window.rendererJsLoaded) {
+				window.rendererJsLoaded = true;
+
+				${shim.injectedJs('webviewLib')}
+				${shim.injectedJs('rendererBundle')}
+
+				rendererBundle.initialize(${JSON.stringify(rendererWebViewStaticOptions)});
+			}
+		`;
+	}, [tempDirPath]);
+
+	return { css: '', injectedJs };
+};
+
+const onPostPluginMessage = async (contentScriptId: string, message: unknown) => {
+	logger.debug(`Handling message from content script: ${contentScriptId}:`, message);
+
+	const pluginService = PluginService.instance();
+	const pluginId = pluginService.pluginIdByContentScriptId(contentScriptId);
+	if (!pluginId) {
+		throw new Error(`Plugin not found for content script with ID ${contentScriptId}`);
+	}
+
+	const plugin = pluginService.pluginById(pluginId);
+	return plugin.emitContentScriptMessage(contentScriptId, message);
+};
+
+type UseMessengerProps = Props & { tempDirPath: string };
+
+const useMessenger = (props: UseMessengerProps) => {
+	const onScrollRef = useRef(props.onBodyScroll);
+	onScrollRef.current = props.onBodyScroll;
+
+	const onPostMessageRef = useRef(props.onPostMessage);
+	onPostMessageRef.current = props.onPostMessage;
+
+	const messenger = useMemo(() => {
+		const fsDriver = shim.fsDriver();
+		const localApi = {
+			onScroll: (fraction: number) => onScrollRef.current?.(fraction),
+			onPostMessage: (message: string) => onPostMessageRef.current?.(message),
+			onPostPluginMessage,
+			fsDriver: {
+				writeFile: async (path: string, content: string, encoding?: string) => {
+					if (!await fsDriver.exists(props.tempDirPath)) {
+						await fsDriver.mkdir(props.tempDirPath);
+					}
+					// To avoid giving the WebView access to the entire main tempDir,
+					// we use props.tempDir (which should be different).
+					path = fsDriver.resolveRelativePathWithinDir(props.tempDirPath, path);
+					return await fsDriver.writeFile(path, content, encoding);
+				},
+				exists: fsDriver.exists,
+				cacheCssToFile: fsDriver.cacheCssToFile,
+			},
+		};
+		return new RNToWebViewMessenger<MainProcessApi, RendererProcessApi>(
+			'renderer', props.webviewRef, localApi,
+		);
+	}, [props.webviewRef, props.tempDirPath]);
+
+	return messenger;
+};
+
+const useTempDirPath = () => {
+	// The renderer can write to whichever temporary directory is chosen here. As such,
+	// use a subdirectory of the main temporary directory for security reasons.
+	const tempDirPath = useMemo(() => {
+		return `${Setting.value('tempDir')}/${uuid.createNano()}`;
+	}, []);
+
+	useEffect(() => {
+		return () => {
+			void (async () => {
+				if (await shim.fsDriver().exists(tempDirPath)) {
+					await shim.fsDriver().remove(tempDirPath);
+				}
+			})();
+		};
+	}, [tempDirPath]);
+
+	return tempDirPath;
+};
+
+const useWebViewSetup = (props: Props): SetUpResult<RendererControl> => {
+	const tempDirPath = useTempDirPath();
+	const { css, injectedJs } = useSource(tempDirPath);
+	const { editPopupCss, createEditPopupSyntax, destroyEditPopupSyntax } = useEditPopup(props.themeId);
+
+	const messenger = useMessenger({ ...props, tempDirPath });
+	const pluginSettingKeysRef = useRef(new Set<string>());
+
+	const contentScripts = useContentScripts(props.pluginStates);
+	useEffect(() => {
+		void messenger.remoteApi.renderer.setExtraContentScriptsAndRerender(contentScripts);
+	}, [messenger, contentScripts]);
+
+	const rendererControl = useMemo((): RendererControl => {
+		const renderer = messenger.remoteApi.renderer;
+
+		const transferResources = async (resources: ResourceInfos) => {
+			// On web, resources are virtual files and thus need to be transferred to the WebView.
+			if (shim.mobilePlatform() === 'web') {
+				for (const [resourceId, resource] of Object.entries(resources)) {
+					try {
+						await renderer.setResourceFile(
+							resourceId,
+							await shim.fsDriver().fileAtPath(Resource.fullPath(resource.item)),
+						);
+					} catch (error) {
+						if (error.code !== 'ENOENT') {
+							throw error;
+						}
+
+						// This can happen if a resource hasn't been downloaded yet
+						logger.warn('Error: Resource file not found (ENOENT)', Resource.fullPath(resource.item), 'for ID', resource.item.id);
+					}
+				}
+			}
+		};
+
+		const prepareRenderer = async (options: RenderOptions) => {
+			const theme = themeStyle(options.themeId);
+
+			const loadPluginSettings = () => {
+				const output: Record<string, unknown> = Object.create(null);
+				for (const key of pluginSettingKeysRef.current) {
+					output[key] = Setting.value(`plugin-${key}`);
+				}
+				return output;
+			};
+
+			let settingsChanged = false;
+			const settings: RenderSettings = {
+				...options,
+				codeTheme: theme.codeThemeCss,
+				// We .stringify the theme to avoid a JSON serialization error involving
+				// the color package.
+				theme: JSON.stringify({
+					...theme,
+					...options.themeOverrides,
+				}),
+				createEditPopupSyntax,
+				destroyEditPopupSyntax,
+				pluginSettings: loadPluginSettings(),
+				requestPluginSetting: (pluginId: string, settingKey: string) => {
+					const key = `${pluginId}.${settingKey}`;
+					if (!pluginSettingKeysRef.current.has(key)) {
+						pluginSettingKeysRef.current.add(key);
+						settingsChanged = true;
+					}
+				},
+				readAssetBlob: (assetPath: string): Promise<Blob> => {
+					// Built-in assets are in resourceDir, external plugin assets are in cacheDir.
+					const assetsDirs = [Setting.value('resourceDir'), Setting.value('cacheDir')];
+
+					let resolvedPath = null;
+					for (const assetDir of assetsDirs) {
+						resolvedPath ??= resolvePathWithinDir(assetDir, assetPath);
+						if (resolvedPath) break;
+					}
+
+					if (!resolvedPath) {
+						throw new Error(`Failed to load asset at ${assetPath} -- not in any of the allowed asset directories: ${assetsDirs.join(',')}.`);
+					}
+					return shim.fsDriver().fileAtPath(resolvedPath);
+				},
+			};
+
+			await transferResources(options.resources);
+
+			return {
+				settings,
+				getSettingsChanged() {
+					return settingsChanged;
+				},
+			};
+		};
+
+		return {
+			rerenderToBody: async (markup, options, cancelEvent) => {
+				const { settings, getSettingsChanged } = await prepareRenderer(options);
+				if (cancelEvent?.cancelled) return null;
+
+				const output = await renderer.rerenderToBody(markup, settings);
+				if (cancelEvent?.cancelled) return null;
+
+				if (getSettingsChanged()) {
+					return await renderer.rerenderToBody(markup, settings);
+				}
+				return output;
+			},
+			render: async (markup, options) => {
+				const { settings, getSettingsChanged } = await prepareRenderer(options);
+				const output = await renderer.render(markup, settings);
+
+				if (getSettingsChanged()) {
+					return await renderer.render(markup, settings);
+				}
+				return output;
+			},
+			clearCache: async markupLanguage => {
+				await renderer.clearCache(markupLanguage);
+			},
+		};
+	}, [createEditPopupSyntax, destroyEditPopupSyntax, messenger]);
+
+	return useMemo(() => {
+		return {
+			api: rendererControl,
+			pageSetup: {
+				css: `${css} ${editPopupCss}`,
+				js: injectedJs,
+			},
+			webViewEventHandlers: {
+				onLoadEnd: messenger.onWebViewLoaded,
+				onMessage: messenger.onWebViewMessage,
+			},
+		};
+	}, [css, injectedJs, messenger, editPopupCss, rendererControl]);
+};
+
+export default useWebViewSetup;
diff --git a/packages/app-mobile/components/NoteBodyViewer/hooks/useContentScripts.ts b/packages/app-mobile/contentScripts/rendererBundle/utils/useContentScripts.ts
similarity index 98%
rename from packages/app-mobile/components/NoteBodyViewer/hooks/useContentScripts.ts
rename to packages/app-mobile/contentScripts/rendererBundle/utils/useContentScripts.ts
index 86b32011f6..635b4d5553 100644
--- a/packages/app-mobile/components/NoteBodyViewer/hooks/useContentScripts.ts
+++ b/packages/app-mobile/contentScripts/rendererBundle/utils/useContentScripts.ts
@@ -4,8 +4,8 @@ import { ContentScriptType } from '@joplin/lib/services/plugins/api/types';
 import { PluginStates } from '@joplin/lib/services/plugins/reducer';
 import shim from '@joplin/lib/shim';
 import { useRef, useState } from 'react';
-import { ExtraContentScriptSource } from '../bundledJs/types';
 import Logger from '@joplin/utils/Logger';
+import { ExtraContentScriptSource } from '../types';
 
 const logger = Logger.create('NoteBodyViewer/hooks/useContentScripts');
 
diff --git a/packages/app-mobile/components/NoteBodyViewer/hooks/useEditPopup.test.ts b/packages/app-mobile/contentScripts/rendererBundle/utils/useEditPopup.test.ts
similarity index 100%
rename from packages/app-mobile/components/NoteBodyViewer/hooks/useEditPopup.test.ts
rename to packages/app-mobile/contentScripts/rendererBundle/utils/useEditPopup.test.ts
diff --git a/packages/app-mobile/components/NoteBodyViewer/hooks/useEditPopup.ts b/packages/app-mobile/contentScripts/rendererBundle/utils/useEditPopup.ts
similarity index 100%
rename from packages/app-mobile/components/NoteBodyViewer/hooks/useEditPopup.ts
rename to packages/app-mobile/contentScripts/rendererBundle/utils/useEditPopup.ts
diff --git a/packages/app-mobile/contentScripts/richTextEditorBundle/contentScript.ts b/packages/app-mobile/contentScripts/richTextEditorBundle/contentScript.ts
new file mode 100644
index 0000000000..ac5dd9d829
--- /dev/null
+++ b/packages/app-mobile/contentScripts/richTextEditorBundle/contentScript.ts
@@ -0,0 +1,131 @@
+import '../utils/polyfills';
+import { createEditor } from '@joplin/editor/ProseMirror';
+import { EditorProcessApi, EditorProps, MainProcessApi } from './types';
+import WebViewToRNMessenger from '../../utils/ipc/WebViewToRNMessenger';
+import { MarkupLanguage } from '@joplin/renderer';
+import '@joplin/editor/ProseMirror/styles';
+import HtmlToMd from '@joplin/lib/HtmlToMd';
+import readFileToBase64 from '../utils/readFileToBase64';
+import { EditorLanguageType } from '@joplin/editor/types';
+
+const postprocessHtml = (html: HTMLElement) => {
+	// Fix resource URLs
+	const resources = html.querySelectorAll<HTMLImageElement>('img[data-resource-id]');
+	for (const resource of resources) {
+		const resourceId = resource.getAttribute('data-resource-id');
+		resource.src = `:/${resourceId}`;
+	}
+
+	// Re-add newlines to data-joplin-source-* that were removed
+	// by ProseMirror.
+	// TODO: Try to find a better solution
+	const sourceBlocks = html.querySelectorAll<HTMLPreElement>(
+		'pre[data-joplin-source-open][data-joplin-source-close].joplin-source',
+	);
+	for (const sourceBlock of sourceBlocks) {
+		const isBlock = sourceBlock.parentElement.tagName !== 'SPAN';
+		if (isBlock) {
+			const originalOpen = sourceBlock.getAttribute('data-joplin-source-open');
+			const originalClose = sourceBlock.getAttribute('data-joplin-source-close');
+			sourceBlock.setAttribute('data-joplin-source-open', `${originalOpen}\n`);
+			sourceBlock.setAttribute('data-joplin-source-close', `\n${originalClose}`);
+		}
+	}
+
+	return html;
+};
+
+const wrapHtmlForMarkdownConversion = (html: HTMLElement) => {
+	// Add a container element -- when converting to HTML, Turndown
+	// sometimes doesn't process the toplevel element in the same way
+	// as other elements (e.g. in the case of Joplin source blocks).
+	const wrapper = html.ownerDocument.createElement('div');
+	wrapper.appendChild(html.cloneNode(true));
+	return wrapper;
+};
+
+
+const htmlToMd = new HtmlToMd();
+const htmlToMarkdown = (html: HTMLElement): string => {
+	html = postprocessHtml(html);
+
+	return htmlToMd.parse(html, { preserveColorStyles: true });
+};
+
+export const initialize = async ({
+	settings,
+	initialText,
+	initialNoteId,
+	parentElementClassName,
+}: EditorProps) => {
+	const messenger = new WebViewToRNMessenger<EditorProcessApi, MainProcessApi>('rich-text-editor', null);
+	const parentElement = document.getElementsByClassName(parentElementClassName)[0];
+	if (!parentElement) throw new Error('Parent element not found');
+	if (!(parentElement instanceof HTMLElement)) {
+		throw new Error('Parent node is not an element.');
+	}
+
+	const assetContainer = document.createElement('div');
+	assetContainer.id = 'joplin-container-pluginAssetsContainer';
+	document.body.appendChild(assetContainer);
+
+	const editor = await createEditor(parentElement, {
+		settings,
+		initialText,
+		initialNoteId,
+
+		onPasteFile: async (data) => {
+			const base64 = await readFileToBase64(data);
+			await messenger.remoteApi.onPasteFile(data.type, base64);
+		},
+		onLogMessage: (message: string) => {
+			void messenger.remoteApi.logMessage(message);
+		},
+		onEvent: (event) => {
+			void messenger.remoteApi.onEditorEvent(event);
+		},
+	}, {
+		renderMarkupToHtml: async (markup) => {
+			return await messenger.remoteApi.onRender({
+				markup,
+				language: settings.language === EditorLanguageType.Html ? MarkupLanguage.Html : MarkupLanguage.Markdown,
+			}, {
+				pluginAssetContainerSelector: `#${assetContainer.id}`,
+				splitted: true,
+				mapsToLine: true,
+			});
+		},
+		renderHtmlToMarkup: (node) => {
+			// By default, if `src` is specified on an image, the browser will try to load the image, even if it isn't added
+			// to the DOM. (A similar problem is described here: https://stackoverflow.com/q/62019538).
+			// Since :/resourceId isn't a valid image URI, this results in a large number of warnings. As a workaround,
+			// move the element to a temporary document before processing:
+			const dom = document.implementation.createHTMLDocument();
+			node = dom.importNode(node, true);
+
+			let html: HTMLElement;
+			if ((node instanceof HTMLElement)) {
+				html = node;
+			} else {
+				const container = document.createElement('div');
+				container.appendChild(html);
+				html = container;
+			}
+
+			if (settings.language === EditorLanguageType.Markdown) {
+				return htmlToMarkdown(wrapHtmlForMarkdownConversion(html));
+			} else {
+				return postprocessHtml(html).outerHTML;
+			}
+		},
+	});
+
+	messenger.setLocalInterface({
+		editor,
+	});
+
+	return editor;
+};
+
+export { default as setUpLogger } from '../utils/setUpLogger';
+
diff --git a/packages/app-mobile/contentScripts/richTextEditorBundle/types.ts b/packages/app-mobile/contentScripts/richTextEditorBundle/types.ts
new file mode 100644
index 0000000000..4697244212
--- /dev/null
+++ b/packages/app-mobile/contentScripts/richTextEditorBundle/types.ts
@@ -0,0 +1,33 @@
+import { EditorEvent } from '@joplin/editor/events';
+import { EditorControl, EditorSettings } from '@joplin/editor/types';
+import { MarkupRecord, RendererControl } from '../rendererBundle/types';
+import { RenderResult } from '@joplin/renderer/types';
+
+export interface EditorProps {
+	initialText: string;
+	initialNoteId: string;
+	parentElementClassName: string;
+	settings: EditorSettings;
+}
+
+export interface EditorProcessApi {
+	editor: EditorControl;
+}
+
+type RenderOptionsSlice = {
+	pluginAssetContainerSelector: string;
+	splitted: boolean;
+	mapsToLine: true;
+};
+
+export interface MainProcessApi {
+	onEditorEvent(event: EditorEvent): Promise<void>;
+	logMessage(message: string): Promise<void>;
+	onRender(markup: MarkupRecord, options: RenderOptionsSlice): Promise<RenderResult>;
+	onPasteFile(type: string, base64: string): Promise<void>;
+}
+
+export interface RichTextEditorControl {
+	editor: EditorControl;
+	renderer: RendererControl;
+}
diff --git a/packages/app-mobile/contentScripts/richTextEditorBundle/useWebViewSetup.ts b/packages/app-mobile/contentScripts/richTextEditorBundle/useWebViewSetup.ts
new file mode 100644
index 0000000000..d00cf84161
--- /dev/null
+++ b/packages/app-mobile/contentScripts/richTextEditorBundle/useWebViewSetup.ts
@@ -0,0 +1,166 @@
+import { RefObject, useEffect, useMemo, useRef } from 'react';
+import { WebViewControl } from '../../components/ExtendedWebView/types';
+import { SetUpResult } from '../types';
+import { EditorControl, EditorSettings } from '@joplin/editor/types';
+import RNToWebViewMessenger from '../../utils/ipc/RNToWebViewMessenger';
+import { EditorProcessApi, EditorProps, MainProcessApi } from './types';
+import useRendererSetup from '../rendererBundle/useWebViewSetup';
+import { EditorEvent } from '@joplin/editor/events';
+import Logger from '@joplin/utils/Logger';
+import shim from '@joplin/lib/shim';
+import { PluginStates } from '@joplin/lib/services/plugins/reducer';
+import { RendererControl, RenderOptions } from '../rendererBundle/types';
+import { ResourceInfos } from '@joplin/renderer/types';
+
+const logger = Logger.create('useWebViewSetup');
+
+interface Props {
+	initialText: string;
+	noteId: string;
+	settings: EditorSettings;
+	parentElementClassName: string;
+	themeId: number;
+	pluginStates: PluginStates;
+	noteResources: ResourceInfos;
+	onAttachFile: (mime: string, base64: string)=> void;
+
+	onPostMessage: (message: string)=> void;
+	onEditorEvent: (event: EditorEvent)=> void;
+	webviewRef: RefObject<WebViewControl>;
+}
+
+type UseMessengerProps = Props & { renderer: SetUpResult<RendererControl> };
+
+const useMessenger = (props: UseMessengerProps) => {
+	const onEditorEventRef = useRef(props.onEditorEvent);
+	onEditorEventRef.current = props.onEditorEvent;
+	const rendererRef = useRef(props.renderer);
+	rendererRef.current = props.renderer;
+	const onAttachRef = useRef(props.onAttachFile);
+	onAttachRef.current = props.onAttachFile;
+
+	const markupRenderingSettings = useRef<RenderOptions>(null);
+	markupRenderingSettings.current = {
+		themeId: props.themeId,
+		highlightedKeywords: [],
+		resources: props.noteResources,
+		themeOverrides: {},
+		noteHash: '',
+		initialScroll: 0,
+		pluginAssetContainerSelector: null,
+	};
+
+	return useMemo(() => {
+		const api: MainProcessApi = {
+			onEditorEvent: (event: EditorEvent) => {
+				onEditorEventRef.current(event);
+				return Promise.resolve();
+			},
+			logMessage: (message: string) => {
+				logger.info(message);
+				return Promise.resolve();
+			},
+			onRender: async (markup, options) => {
+				const renderResult = await rendererRef.current.api.render(
+					markup,
+					{
+						...markupRenderingSettings.current,
+						splitted: options.splitted,
+						pluginAssetContainerSelector: options.pluginAssetContainerSelector,
+						mapsToLine: options.mapsToLine,
+					},
+				);
+				return renderResult;
+			},
+			onPasteFile: async (type: string, base64: string) => {
+				onAttachRef.current(type, base64);
+			},
+		};
+
+		const messenger = new RNToWebViewMessenger<MainProcessApi, EditorProcessApi>(
+			'rich-text-editor',
+			props.webviewRef,
+			api,
+		);
+		return messenger;
+	}, [props.webviewRef]);
+};
+
+type UseSourceProps = Props & { renderer: SetUpResult<RendererControl> };
+
+const useSource = (props: UseSourceProps) => {
+	const propsRef = useRef(props);
+	propsRef.current = props;
+
+	const rendererJs = props.renderer.pageSetup.js;
+	const rendererCss = props.renderer.pageSetup.css;
+
+	return useMemo(() => {
+		const editorOptions: EditorProps = {
+			parentElementClassName: propsRef.current.parentElementClassName,
+			initialText: propsRef.current.initialText,
+			initialNoteId: propsRef.current.noteId,
+			settings: propsRef.current.settings,
+		};
+
+		return {
+			css: `
+				${shim.injectedCss('richTextEditorBundle')}
+				${rendererCss}
+
+				/* Increase the size of the editor to make it easier to focus the editor. */
+				.prosemirror-editor {
+					min-height: 75vh;
+				}
+			`,
+			js: `
+				${rendererJs}
+
+				if (!window.richTextEditorCreated) {
+					window.richTextEditorCreated = true;
+					${shim.injectedJs('richTextEditorBundle')}
+					richTextEditorBundle.setUpLogger();
+					richTextEditorBundle.initialize(${JSON.stringify(editorOptions)}).then(function(editor) {
+						/* For testing */
+						window.joplinRichTextEditor_ = editor;
+					});
+				}
+			`,
+		};
+	}, [rendererJs, rendererCss]);
+};
+
+const useWebViewSetup = (props: Props): SetUpResult<EditorControl> => {
+	const renderer = useRendererSetup({
+		webviewRef: props.webviewRef,
+		onBodyScroll: null,
+		onPostMessage: props.onPostMessage,
+		pluginStates: props.pluginStates,
+		themeId: props.themeId,
+	});
+	const messenger = useMessenger({ ...props, renderer });
+	const pageSetup = useSource({ ...props, renderer });
+
+	useEffect(() => {
+		void messenger.remoteApi.editor.updateSettings(props.settings);
+	}, [props.settings, messenger]);
+
+	return useMemo(() => {
+		return {
+			api: messenger.remoteApi.editor,
+			pageSetup: pageSetup,
+			webViewEventHandlers: {
+				onLoadEnd: () => {
+					messenger.onWebViewLoaded();
+					renderer.webViewEventHandlers.onLoadEnd();
+				},
+				onMessage: (event) => {
+					messenger.onWebViewMessage(event);
+					renderer.webViewEventHandlers.onMessage(event);
+				},
+			},
+		};
+	}, [messenger, pageSetup, renderer.webViewEventHandlers]);
+};
+
+export default useWebViewSetup;
diff --git a/packages/app-mobile/contentScripts/types.ts b/packages/app-mobile/contentScripts/types.ts
new file mode 100644
index 0000000000..29257adfc2
--- /dev/null
+++ b/packages/app-mobile/contentScripts/types.ts
@@ -0,0 +1,17 @@
+import { OnMessageEvent } from '../components/ExtendedWebView/types';
+
+interface WebViewEventHandlers {
+	onLoadEnd: ()=> void;
+	onMessage: (event: OnMessageEvent)=> void;
+}
+
+export interface PageSetupSources {
+	css: string;
+	js: string;
+}
+
+export interface SetUpResult<Api> {
+	api: Api;
+	pageSetup: PageSetupSources;
+	webViewEventHandlers: WebViewEventHandlers;
+}
diff --git a/packages/app-mobile/contentScripts/utils/polyfills.ts b/packages/app-mobile/contentScripts/utils/polyfills.ts
new file mode 100644
index 0000000000..ac9a8a379c
--- /dev/null
+++ b/packages/app-mobile/contentScripts/utils/polyfills.ts
@@ -0,0 +1,27 @@
+// .replaceChildren is not supported in Chromium 83, which is the default for Android 11
+// (unless auto-updated from the Google Play store).
+HTMLElement.prototype.replaceChildren ??= function(this: HTMLElement, ...nodes: Node[]) {
+	while (this.children.length) {
+		this.children[0].remove();
+	}
+
+	for (const node of nodes) {
+		this.appendChild(node);
+	}
+};
+
+
+Array.prototype.flat ??= function<A, D extends number = 1>(this: A, depthParam?: D): FlatArray<A, D>[] {
+	if (!Array.isArray(this)) throw new Error('Not an array');
+	const depth = depthParam ?? 1;
+
+	const result = [] as FlatArray<A, D>[];
+	for (let i = 0; i < this.length; i++) {
+		if (Array.isArray(this[i]) && depth > 0) {
+			result.push(...this[i].flat(depth - 1));
+		} else {
+			result.push(this[i]);
+		}
+	}
+	return result;
+};
diff --git a/packages/app-mobile/contentScripts/utils/readFileToBase64.ts b/packages/app-mobile/contentScripts/utils/readFileToBase64.ts
new file mode 100644
index 0000000000..c315adef3e
--- /dev/null
+++ b/packages/app-mobile/contentScripts/utils/readFileToBase64.ts
@@ -0,0 +1,15 @@
+const readFileToBase64 = (file: Blob) => {
+	const reader = new FileReader();
+	return new Promise<string>((resolve, reject) => {
+		reader.onload = async () => {
+			const dataUrl = reader.result as string;
+			const base64 = dataUrl.replace(/^data:.*;base64,/, '');
+			resolve(base64);
+		};
+		reader.onerror = () => reject(new Error('Failed to load file.'));
+
+		reader.readAsDataURL(file);
+	});
+};
+
+export default readFileToBase64;
diff --git a/packages/app-mobile/contentScripts/utils/setUpLogger.ts b/packages/app-mobile/contentScripts/utils/setUpLogger.ts
new file mode 100644
index 0000000000..51108b903f
--- /dev/null
+++ b/packages/app-mobile/contentScripts/utils/setUpLogger.ts
@@ -0,0 +1,14 @@
+import Logger, { TargetType } from '@joplin/utils/Logger';
+
+let loggerCreated = false;
+const setUpLogger = () => {
+	if (!loggerCreated) {
+		const logger = new Logger();
+		logger.addTarget(TargetType.Console);
+		logger.setLevel(Logger.LEVEL_WARN);
+		Logger.initializeGlobalLogger(logger);
+		loggerCreated = true;
+	}
+};
+
+export default setUpLogger;
diff --git a/packages/app-mobile/gulpfile.ts b/packages/app-mobile/gulpfile.ts
index eb0ff08cfa..d8edd387fe 100644
--- a/packages/app-mobile/gulpfile.ts
+++ b/packages/app-mobile/gulpfile.ts
@@ -27,22 +27,14 @@ utils.registerGulpTasks(gulp, tasks);
 
 gulp.task('buildInjectedJs', gulp.series(
 	'beforeBundle',
-	'buildCodeMirrorEditor',
-	'buildJsDrawEditor',
-	'buildPluginBackgroundScript',
-	'buildNoteViewerBundle',
+	'buildBundledJs',
 	'copyWebviewLib',
 ));
 
 gulp.task('watchInjectedJs', gulp.series(
 	'beforeBundle',
 	'copyWebviewLib',
-	gulp.parallel(
-		'watchCodeMirrorEditor',
-		'watchJsDrawEditor',
-		'watchPluginBackgroundScript',
-		'watchNoteViewerBundle',
-	),
+	'watchBundledJs',
 ));
 
 gulp.task('build', gulp.series(
diff --git a/packages/app-mobile/jest.setup.js b/packages/app-mobile/jest.setup.js
index d27590909f..784857ad38 100644
--- a/packages/app-mobile/jest.setup.js
+++ b/packages/app-mobile/jest.setup.js
@@ -3,7 +3,7 @@
 const { afterEachCleanUp, afterAllCleanUp } = require('@joplin/lib/testing/test-utils.js');
 const shim = require('@joplin/lib/shim').default;
 const { shimInit } = require('@joplin/lib/shim-init-node.js');
-const injectedJs = require('./utils/injectedJs.js').default;
+const injectedJs = require('./utils/shim-init-react/injectedJs.js').default;
 const { mkdir, rm } = require('fs-extra');
 const path = require('path');
 const sharp = require('sharp');
@@ -30,7 +30,13 @@ shim.injectedJs = (name) => {
 	if (!(name in injectedJs)) {
 		throw new Error(`Cannot find injected JS with ID ${name}`);
 	}
-	return injectedJs[name];
+	return injectedJs[name].js;
+};
+shim.injectedCss = (name) => {
+	if (!(name in injectedJs)) {
+		throw new Error(`Cannot find injected CSS with ID ${name}`);
+	}
+	return injectedJs[name].css;
 };
 shim.fsDriver().getAppDirectoryPath = () => {
 	// On mobile, the rootProfileDirectory and the app directory
diff --git a/packages/app-mobile/package.json b/packages/app-mobile/package.json
index 42ae1da130..39d646637e 100644
--- a/packages/app-mobile/package.json
+++ b/packages/app-mobile/package.json
@@ -92,6 +92,8 @@
     "@babel/preset-env": "7.25.3",
     "@babel/runtime": "7.25.0",
     "@joplin/tools": "~3.4",
+    "@joplin/turndown": "~4.0.80",
+    "@joplin/turndown-plugin-gfm": "~1.0.62",
     "@js-draw/material-icons": "1.30.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@react-native-community/cli": "16.0.3",
@@ -113,6 +115,7 @@
     "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-react-native-web": "0.19.12",
+    "esbuild": "0.25.3",
     "fast-deep-equal": "3.1.3",
     "fs-extra": "11.2.0",
     "gulp": "4.0.2",
diff --git a/packages/app-mobile/root.tsx b/packages/app-mobile/root.tsx
index 6a0d69fd02..09a33a569c 100644
--- a/packages/app-mobile/root.tsx
+++ b/packages/app-mobile/root.tsx
@@ -420,6 +420,10 @@ const appReducer = (state = appDefaultState, action: any) => {
 		case 'KEYBOARD_VISIBLE_CHANGE':
 			newState = { ...state, keyboardVisible: action.visible };
 			break;
+
+		case 'NOTE_EDITOR_VISIBLE_CHANGE':
+			newState = { ...state, noteEditorVisible: action.visible };
+			break;
 		}
 	} catch (error) {
 		error.message = `In reducer: ${error.message} Action: ${JSON.stringify(action)}`;
diff --git a/packages/app-mobile/services/commands/stateToWhenClauseContext.ts b/packages/app-mobile/services/commands/stateToWhenClauseContext.ts
index adee6a287c..83ff9baed0 100644
--- a/packages/app-mobile/services/commands/stateToWhenClauseContext.ts
+++ b/packages/app-mobile/services/commands/stateToWhenClauseContext.ts
@@ -10,6 +10,8 @@ const stateToWhenClauseContext = (state: AppState, options: WhenClauseContextOpt
 	return {
 		...libStateToWhenClauseContext(state, options),
 		keyboardVisible: state.keyboardVisible,
+		markdownEditorVisible: state.noteEditorVisible && state.settings['editor.codeView'],
+		richTextEditorVisible: state.noteEditorVisible && !state.settings['editor.codeView'],
 	};
 };
 
diff --git a/packages/app-mobile/tools/buildInjectedJs/BundledFile.ts b/packages/app-mobile/tools/buildInjectedJs/BundledFile.ts
index b99e38ac4d..9c30146cbd 100644
--- a/packages/app-mobile/tools/buildInjectedJs/BundledFile.ts
+++ b/packages/app-mobile/tools/buildInjectedJs/BundledFile.ts
@@ -5,212 +5,97 @@
 
 import { dirname, extname, basename } from 'path';
 
-// We need this to be transpiled to `const webpack = require('webpack')`.
-// As such, do a namespace import. See https://www.typescriptlang.org/tsconfig#esModuleInterop
-import * as webpack from 'webpack';
-import copyJs from './copyJs';
+import * as esbuild from 'esbuild';
+import copyAssets from './copyAssets';
+import { writeFile } from 'fs-extra';
 
 export default class BundledFile {
-	private readonly bundleOutputPath: string;
-	private readonly bundleBaseName: string;
-	private readonly rootFileDirectory: string;
+	private readonly bundleOutputPathBase_: string;
+	private readonly bundleBaseName_: string;
+	private readonly rootFileDirectory_: string;
 
 	public constructor(
 		public readonly bundleName: string,
-		private readonly sourceFilePath: string,
+		private readonly sourceFilePath_: string,
 	) {
-		this.rootFileDirectory = dirname(sourceFilePath);
-		this.bundleBaseName = basename(sourceFilePath, extname(sourceFilePath));
-		this.bundleOutputPath = `${this.rootFileDirectory}/${this.bundleBaseName}.bundle.js`;
+		this.rootFileDirectory_ = dirname(sourceFilePath_);
+		this.bundleBaseName_ = basename(sourceFilePath_, extname(sourceFilePath_));
+		this.bundleOutputPathBase_ = `${this.rootFileDirectory_}/${this.bundleBaseName_}.bundle`;
 	}
 
-	private getWebpackOptions(mode: 'production' | 'development'): webpack.Configuration {
-		const config: webpack.Configuration = {
-			mode,
-			entry: this.sourceFilePath,
+	private makeBuildContext(mode: 'production' | 'development') {
+		return esbuild.context({
+			entryPoints: [this.sourceFilePath_],
+			outfile: `${this.bundleOutputPathBase_}.js`,
+			minify: mode === 'production',
+			bundle: true,
+			sourcemap: true,
+			format: 'iife',
+			globalName: this.bundleName,
+			metafile: false,
 
 			// es5: Have Webpack's generated code target ES5. This doesn't apply to code not
 			//      generated by Webpack.
-			target: ['web', 'es5'],
+			target: ['chrome58', 'safari14'],
 
-			output: {
-				path: this.rootFileDirectory,
-				filename: `${this.bundleBaseName}.bundle.js`,
-
-				library: {
-					type: 'window',
-					name: this.bundleName,
-				},
-			},
-			// See https://webpack.js.org/guides/typescript/
-			module: {
-				rules: [
-					{
-						// Include .tsx to include react components
-						test: /\.tsx?$/,
-						use: 'ts-loader',
-						exclude: /node_modules/,
-					},
-					{
-						test: (value) => {
-							const isModuleFile = !!(/node_modules/.exec(value));
-
-							// Some libraries don't work with older browsers/WebViews.
-							// Because Babel transpilation can be slow, we only transpile
-							// these libraries.
-							const moduleNeedsTranspilation = !!(
-								// Replit's CodeMirror-vim library uses a?.b syntax which seems to be unsupported in iOS 12 Safari.
-								/.*node_modules.*replit.*\.[mc]?js$/.exec(value) ||
-								// js-draw uses a ??= b syntax, which is unsupported in old Android WebView versions
-								/.*node_modules.*js-draw.*\.[mc]?js$/.exec(value)
-							);
-
-							if (isModuleFile && !moduleNeedsTranspilation) {
-								return false;
+			plugins: [
+				{
+					name: 'joplin--node-polyfills',
+					setup: build => {
+						build.onResolve({ filter: /^(path|events)$/ }, args => {
+							let path = args.path;
+							if (args.path === 'path') {
+								path = require.resolve('path-browserify');
+							} else if (args.path === 'events') {
+								path = require.resolve('events/');
 							}
 
-							const isJsFile = !!(/\.[cm]?js$/.exec(value));
-							return isJsFile;
-						},
-						use: {
-							loader: 'babel-loader',
-							options: {
-								cacheDirectory: false,
-
-								// Disable using babel.config.js to prevent conflicts with React Native's
-								// Babel configuration.
-								babelrc: false,
-								configFile: false,
-
-								presets: [
-									['@babel/preset-env', { targets: { ios: 12, chrome: 80 } }],
-								],
-							},
-						},
+							return { path };
+						});
 					},
-				],
-			},
-			// Increase the minimum size required
-			// to trigger warnings.
-			// See https://stackoverflow.com/a/53517149/17055750
-			performance: {
-				maxAssetSize: 2_000_000, // 2-ish MiB
-				maxEntrypointSize: 2_000_000,
-			},
-			resolve: {
-				extensions: ['.tsx', '.ts', '.js'],
-
-				// Some of these are used by the plugin background script
-				fallback: {
-					path: require.resolve('path-browserify'),
-					events: require.resolve('events/'),
 				},
-			},
-			cache: {
-				type: 'filesystem',
-			},
-		};
-
-		return config;
+				{
+					name: 'joplin--copy-final',
+					setup: build => {
+						build.onEnd(async (result) => {
+							if (result.errors.length === 0) {
+								console.log('copy output');
+								await this.copyToImportableFile_();
+							} else {
+								console.warn('Copying skipped. Build produced errors');
+							}
+						});
+					},
+				},
+			],
+		});
 	}
 
 	// Creates a file that can be imported by React native. This file contains the
 	// bundled JS as a string.
-	private async copyToImportableFile() {
-		await copyJs(`${this.bundleName}.bundle`, this.bundleOutputPath);
-	}
-
-	private handleErrors(error: Error | undefined | null, stats: webpack.Stats | undefined): boolean {
-		let failed = false;
-
-		if (error) {
-			console.error(`Error (${this.bundleName}): ${error.name}`, error.message, error.stack);
-			failed = true;
-		} else if (stats?.hasErrors() || stats?.hasWarnings()) {
-			const data = stats.toJson();
-
-			if (data.warnings && data.warningsCount) {
-				console.warn(`Warnings (${this.bundleName}): `, data.warningsCount);
-				for (const warning of data.warnings) {
-					// Stack contains the message
-					if (warning.stack) {
-						console.warn(warning.stack);
-					} else {
-						console.warn(warning.message);
-					}
-				}
-			}
-			if (data.errors && data.errorsCount) {
-				console.error(`Errors (${this.bundleName}): `, data.errorsCount);
-				for (const error of data.errors) {
-					if (error.stack) {
-						console.error(error.stack);
-					} else {
-						console.error(error.message);
-					}
-					console.error();
-				}
-
-				failed = true;
-			}
-		}
-
-		return failed;
+	private async copyToImportableFile_() {
+		await copyAssets(`${this.bundleName}.bundle`, {
+			js: `${this.bundleOutputPathBase_}.js`,
+			css: `${this.bundleOutputPathBase_}.css`,
+		});
 	}
 
 	// Create a minified JS file in the same directory as `this.sourceFilePath` with
 	// the same name.
-	public build() {
-		const compiler = webpack(this.getWebpackOptions('production'));
-		return new Promise<void>((resolve, reject) => {
-			console.info(`Building bundle: ${this.bundleName}...`);
+	public async build() {
+		console.info(`Building bundle: ${this.bundleName}...`);
+		const compiler = await this.makeBuildContext('production');
+		const result = await compiler.rebuild();
+		await compiler.dispose();
 
-			compiler.run((buildError, stats) => {
-				// Always output stats, even on success
-				console.log(`Bundle ${this.bundleName} built: `, stats?.toString());
-
-				let failed = this.handleErrors(buildError, stats);
-
-				// Clean up.
-				compiler.close(async (closeError) => {
-					if (closeError) {
-						console.error('Error cleaning up:', closeError);
-						failed = true;
-					}
-
-					let copyError;
-					if (!failed) {
-						try {
-							await this.copyToImportableFile();
-						} catch (error) {
-							console.error('Error copying', error);
-							failed = true;
-							copyError = error;
-						}
-					}
-
-					if (!failed) {
-						resolve();
-					} else {
-						reject(closeError ?? buildError ?? copyError);
-					}
-				});
-			});
-		});
+		if (result?.metafile) {
+			await writeFile(`${this.bundleOutputPathBase_}.meta.json`, JSON.stringify(result.metafile, undefined, '\t'));
+		}
 	}
 
-	public startWatching() {
-		const compiler = webpack(this.getWebpackOptions('development'));
-		const watchOptions = {
-			ignored: '**/node_modules',
-		};
-
-		console.info('Watching bundle: ', this.bundleName);
-		compiler.watch(watchOptions, async (error, stats) => {
-			const failed = this.handleErrors(error, stats);
-			if (!failed) {
-				await this.copyToImportableFile();
-			}
-		});
+	public async startWatching() {
+		console.info(`Watching bundle: ${this.bundleName}...`);
+		const compiler = await this.makeBuildContext('development');
+		await compiler.watch();
 	}
 }
diff --git a/packages/app-mobile/tools/buildInjectedJs/copyAssets.ts b/packages/app-mobile/tools/buildInjectedJs/copyAssets.ts
new file mode 100644
index 0000000000..55397940ad
--- /dev/null
+++ b/packages/app-mobile/tools/buildInjectedJs/copyAssets.ts
@@ -0,0 +1,29 @@
+
+
+import { exists, readFile, writeFile } from 'fs-extra';
+import { outputDir } from './constants';
+
+type InputFilePaths = {
+	js: string;
+	css?: string;
+};
+
+// Stores the contents of the file at [filePath] as an importable string.
+// [name] should be the name (excluding the .js extension) of the output file that will contain
+// the JSON-ified file content.
+const copyAssets = async (name: string, input: InputFilePaths) => {
+	const outputPath = `${outputDir}/${name}.js`;
+	console.info(`Creating: ${outputPath}`);
+
+	const hasJs = await exists(input.js);
+	const js = hasJs ? await readFile(input.js, 'utf-8') : null;
+	const hasCss = !!input.css && await exists(input.css);
+	const css = hasCss ? await readFile(input.css, 'utf-8') : null;
+
+	const json = `module.exports = {
+		js: ${JSON.stringify(js)},
+		css: ${JSON.stringify(css)}
+	};`;
+	await writeFile(outputPath, json);
+};
+export default copyAssets;
diff --git a/packages/app-mobile/tools/buildInjectedJs/copyJs.ts b/packages/app-mobile/tools/buildInjectedJs/copyJs.ts
deleted file mode 100644
index 785e6b91ae..0000000000
--- a/packages/app-mobile/tools/buildInjectedJs/copyJs.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-import { readFile, writeFile } from 'fs-extra';
-import { outputDir } from './constants';
-
-// Stores the contents of the file at [filePath] as an importable string.
-// [name] should be the name (excluding the .js extension) of the output file that will contain
-// the JSON-ified file content.
-const copyJs = async (name: string, filePath: string) => {
-	const outputPath = `${outputDir}/${name}.js`;
-	console.info(`Creating: ${outputPath}`);
-	const js = await readFile(filePath, 'utf-8');
-	const json = `module.exports = ${JSON.stringify(js)};`;
-	await writeFile(outputPath, json);
-};
-export default copyJs;
diff --git a/packages/app-mobile/tools/buildInjectedJs/gulpTasks.ts b/packages/app-mobile/tools/buildInjectedJs/gulpTasks.ts
index 11906288ab..c9ca4ea6b5 100644
--- a/packages/app-mobile/tools/buildInjectedJs/gulpTasks.ts
+++ b/packages/app-mobile/tools/buildInjectedJs/gulpTasks.ts
@@ -1,59 +1,58 @@
 import BundledFile from './BundledFile';
 import { mkdirp } from 'fs-extra';
 import { mobileDir, outputDir } from './constants';
-import copyJs from './copyJs';
+import copyAssets from './copyAssets';
+import { readdir, existsSync } from 'fs-extra';
+import { join } from 'path';
 
+const getBundles = async () => {
+	// All folders in the contentScripts/ directories are bundles
+	const contentScriptDir = `${mobileDir}/contentScripts/`;
+	const bundles = [];
 
-const codeMirrorBundle = new BundledFile(
-	'codeMirrorBundle',
-	`${mobileDir}/components/NoteEditor/CodeMirror/CodeMirror.ts`,
-);
+	for (const folderOrFileName of await readdir(contentScriptDir)) {
+		// Only check subfolders
+		if (folderOrFileName.includes('.')) continue;
+		// Skip utilities shared between bundles
+		if (folderOrFileName === 'utils') continue;
 
-const jsDrawBundle = new BundledFile(
-	'svgEditorBundle',
-	`${mobileDir}/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.ts`,
-);
+		const bundlePath = join(contentScriptDir, folderOrFileName);
+		const indexPath = join(bundlePath, 'contentScript', 'index.ts');
+		const contentScriptPath = existsSync(indexPath) ? indexPath : join(bundlePath, 'contentScript.ts');
+		bundles.push(new BundledFile(folderOrFileName, contentScriptPath));
+	}
 
-const pluginBackgroundPageBundle = new BundledFile(
-	'pluginBackgroundPage',
-	`${mobileDir}/components/plugins/backgroundPage/pluginRunnerBackgroundPage.ts`,
-);
+	// Bundled JS may also exist within the components/ directory:
+	bundles.push(new BundledFile(
+		'pluginBackgroundPage',
+		`${mobileDir}/components/plugins/backgroundPage/pluginRunnerBackgroundPage.ts`,
+	));
 
-const noteViewerBundle = new BundledFile(
-	'noteBodyViewerBundle',
-	`${mobileDir}/components/NoteBodyViewer/bundledJs/noteBodyViewerBundle.ts`,
-);
+	return bundles;
+};
 
 const gulpTasks = {
 	beforeBundle: {
 		fn: () => mkdirp(outputDir),
 	},
-	buildCodeMirrorEditor: {
-		fn: () => codeMirrorBundle.build(),
+	buildBundledJs: {
+		fn: async () => {
+			for (const bundle of await getBundles()) {
+				await bundle.build();
+			}
+		},
 	},
-	buildJsDrawEditor: {
-		fn: () => jsDrawBundle.build(),
-	},
-	buildNoteViewerBundle: {
-		fn: () => noteViewerBundle.build(),
-	},
-	watchCodeMirrorEditor: {
-		fn: () => codeMirrorBundle.startWatching(),
-	},
-	watchJsDrawEditor: {
-		fn: () => jsDrawBundle.startWatching(),
-	},
-	buildPluginBackgroundScript: {
-		fn: () => pluginBackgroundPageBundle.build(),
-	},
-	watchPluginBackgroundScript: {
-		fn: () => pluginBackgroundPageBundle.startWatching(),
-	},
-	watchNoteViewerBundle: {
-		fn: () => noteViewerBundle.startWatching(),
+	watchBundledJs: {
+		fn: async () => {
+			const watchPromises = [];
+			for (const bundle of await getBundles()) {
+				watchPromises.push(bundle.startWatching());
+			}
+			await Promise.all(watchPromises);
+		},
 	},
 	copyWebviewLib: {
-		fn: () => copyJs('webviewLib', `${mobileDir}/../lib/renderers/webviewLib.js`),
+		fn: () => copyAssets('webviewLib', { js: `${mobileDir}/../lib/renderers/webviewLib.js` }),
 	},
 };
 
diff --git a/packages/app-mobile/utils/appDefaultState.ts b/packages/app-mobile/utils/appDefaultState.ts
index 9598bc7574..4ce24fb1c1 100644
--- a/packages/app-mobile/utils/appDefaultState.ts
+++ b/packages/app-mobile/utils/appDefaultState.ts
@@ -16,6 +16,7 @@ const appDefaultState: AppState = {
 	isOnMobileData: false,
 	disableSideMenuGestures: false,
 	showPanelsDialog: false,
+	noteEditorVisible: false,
 	...defaultState,
 
 	// On mobile, it's possible to select notes that aren't in the selected folder/tag/etc.
diff --git a/packages/app-mobile/utils/injectedJs.ts b/packages/app-mobile/utils/injectedJs.ts
deleted file mode 100644
index f0c5b36356..0000000000
--- a/packages/app-mobile/utils/injectedJs.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-
-const injectedJs = {
-	webviewLib: require('@joplin/lib/rnInjectedJs/webviewLib'),
-	codeMirrorBundle: require('../lib/rnInjectedJs/codeMirrorBundle.bundle'),
-	svgEditorBundle: require('../lib/rnInjectedJs/svgEditorBundle.bundle'),
-	pluginBackgroundPage: require('../lib/rnInjectedJs/pluginBackgroundPage.bundle'),
-	noteBodyViewerBundle: require('../lib/rnInjectedJs/noteBodyViewerBundle.bundle'),
-};
-
-export default injectedJs;
diff --git a/packages/app-mobile/utils/shim-init-react/injectedJs.ts b/packages/app-mobile/utils/shim-init-react/injectedJs.ts
index 0292750565..705de0d31c 100644
--- a/packages/app-mobile/utils/shim-init-react/injectedJs.ts
+++ b/packages/app-mobile/utils/shim-init-react/injectedJs.ts
@@ -1,9 +1,10 @@
 
 const injectedJs = {
-	webviewLib: require('@joplin/lib/rnInjectedJs/webviewLib'),
-	codeMirrorBundle: require('../../lib/rnInjectedJs/codeMirrorBundle.bundle'),
-	svgEditorBundle: require('../../lib/rnInjectedJs/svgEditorBundle.bundle'),
+	webviewLib: require('../../lib/rnInjectedJs/webviewLib'),
+	markdownEditorBundle: require('../../lib/rnInjectedJs/markdownEditorBundle.bundle'),
+	richTextEditorBundle: require('../../lib/rnInjectedJs/richTextEditorBundle.bundle'),
+	imageEditorBundle: require('../../lib/rnInjectedJs/imageEditorBundle.bundle'),
 	pluginBackgroundPage: require('../../lib/rnInjectedJs/pluginBackgroundPage.bundle'),
-	noteBodyViewerBundle: require('../../lib/rnInjectedJs/noteBodyViewerBundle.bundle'),
+	rendererBundle: require('../../lib/rnInjectedJs/rendererBundle.bundle'),
 };
 export default injectedJs;
diff --git a/packages/app-mobile/utils/shim-init-react/shimInitShared.ts b/packages/app-mobile/utils/shim-init-react/shimInitShared.ts
index d97f0e0746..58359b4f58 100644
--- a/packages/app-mobile/utils/shim-init-react/shimInitShared.ts
+++ b/packages/app-mobile/utils/shim-init-react/shimInitShared.ts
@@ -85,7 +85,12 @@ const shimInitShared = () => {
 
 	shim.injectedJs = function(name) {
 		if (!(name in injectedJs)) throw new Error(`Cannot find injectedJs file (add it to "injectedJs" object): ${name}`);
-		return injectedJs[name as keyof typeof injectedJs];
+		return injectedJs[name as keyof typeof injectedJs].js;
+	};
+
+	shim.injectedCss = function(name) {
+		if (!(name in injectedJs)) throw new Error(`Cannot find CSS file (add it to "injectedJs" object): ${name}`);
+		return injectedJs[name as keyof typeof injectedJs].css;
 	};
 
 	shim.setTimeout = (fn, interval) => {
diff --git a/packages/app-mobile/utils/testing/getWebViewWindowById.ts b/packages/app-mobile/utils/testing/getWebViewWindowById.ts
index 3922fa8dfe..ff5e095ac2 100644
--- a/packages/app-mobile/utils/testing/getWebViewWindowById.ts
+++ b/packages/app-mobile/utils/testing/getWebViewWindowById.ts
@@ -1,6 +1,6 @@
 import { screen, waitFor } from './testingLibrary';
 
-const getWebViewWindowById = async (id: string): Promise<Window> => {
+const getWebViewWindowById = async (id: string): Promise<Window & typeof globalThis> => {
 	const webviewContent = await screen.findByTestId(id);
 	expect(webviewContent).toBeVisible();
 
diff --git a/packages/app-mobile/utils/types.ts b/packages/app-mobile/utils/types.ts
index f844f1eddf..59641cfe83 100644
--- a/packages/app-mobile/utils/types.ts
+++ b/packages/app-mobile/utils/types.ts
@@ -10,4 +10,5 @@ export interface AppState extends State {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 	noteSideMenuOptions: any;
 	disableSideMenuGestures: boolean;
+	noteEditorVisible: boolean;
 }
diff --git a/packages/editor/CodeMirror/CodeMirrorControl.ts b/packages/editor/CodeMirror/CodeMirrorControl.ts
index ac256b97da..b12791bfb6 100644
--- a/packages/editor/CodeMirror/CodeMirrorControl.ts
+++ b/packages/editor/CodeMirror/CodeMirrorControl.ts
@@ -229,6 +229,10 @@ export default class CodeMirrorControl extends CodeMirror5Emulation implements E
 		};
 	}
 
+	public onResourceDownloaded(_id: string) {
+		// Unused
+	}
+
 	public setContentScripts(plugins: ContentScriptData[]) {
 		return this._pluginControl.setPlugins(plugins);
 	}
diff --git a/packages/editor/CodeMirror/createEditor.test.ts b/packages/editor/CodeMirror/createEditor.test.ts
index b9a2fa9b3c..7e09f22547 100644
--- a/packages/editor/CodeMirror/createEditor.test.ts
+++ b/packages/editor/CodeMirror/createEditor.test.ts
@@ -8,7 +8,7 @@ import { forceParsing } from '@codemirror/language';
 import loadLanguages from './testing/loadLanguages';
 
 import { expect, describe, it } from '@jest/globals';
-import createEditorSettings from './testing/createEditorSettings';
+import createEditorSettings from '../testing/createEditorSettings';
 
 
 describe('createEditor', () => {
diff --git a/packages/editor/CodeMirror/index.ts b/packages/editor/CodeMirror/index.ts
new file mode 100644
index 0000000000..b2f1837c79
--- /dev/null
+++ b/packages/editor/CodeMirror/index.ts
@@ -0,0 +1,6 @@
+// This index.ts file helps prevent code duplication issues when bundling
+// as it allows ESBuild to select the TypeScript version of createEditor.
+
+import '../polyfills';
+// eslint-disable-next-line import/prefer-default-export
+export { default as createEditor } from './createEditor';
diff --git a/packages/editor/CodeMirror/testing/createEditorControl.ts b/packages/editor/CodeMirror/testing/createEditorControl.ts
index 230a2a1bf5..d027b75c95 100644
--- a/packages/editor/CodeMirror/testing/createEditorControl.ts
+++ b/packages/editor/CodeMirror/testing/createEditorControl.ts
@@ -1,6 +1,6 @@
 import Setting from '@joplin/lib/models/Setting';
 import createEditor from '../createEditor';
-import createEditorSettings from './createEditorSettings';
+import createEditorSettings from '../../testing/createEditorSettings';
 
 const createEditorControl = (initialText: string) => {
 	const editorSettings = createEditorSettings(Setting.THEME_LIGHT);
diff --git a/packages/editor/CodeMirror/utils/handlePasteEvent.ts b/packages/editor/CodeMirror/utils/handlePasteEvent.ts
index 28782fc67b..9854d48043 100644
--- a/packages/editor/CodeMirror/utils/handlePasteEvent.ts
+++ b/packages/editor/CodeMirror/utils/handlePasteEvent.ts
@@ -1,24 +1,9 @@
 import { EditorView } from '@codemirror/view';
 import { PasteFileCallback } from '../../types';
+import getFileFromPasteEvent from '../../utils/getFileFromPasteEvent';
 
 const handlePasteEvent = (event: ClipboardEvent|DragEvent, _view: EditorView, onPaste: PasteFileCallback) => {
-	const dataTransfer = 'clipboardData' in event ? event.clipboardData : event.dataTransfer;
-	const files = dataTransfer.files;
-
-	let fileToPaste: File|null = null;
-
-	// Prefer image files, if available.
-	for (const file of files) {
-		if (['image/png', 'image/jpeg', 'image/svg+xml'].includes(file.type)) {
-			fileToPaste = file;
-			break;
-		}
-	}
-
-	// Fall back to other files
-	if (files.length && !fileToPaste) {
-		fileToPaste = files[0];
-	}
+	const fileToPaste = getFileFromPasteEvent(event);
 
 	if (fileToPaste) {
 		event.preventDefault();
diff --git a/packages/editor/ProseMirror/commands.test.ts b/packages/editor/ProseMirror/commands.test.ts
new file mode 100644
index 0000000000..0f88090334
--- /dev/null
+++ b/packages/editor/ProseMirror/commands.test.ts
@@ -0,0 +1,80 @@
+import { EditorView } from 'prosemirror-view';
+import { EditorCommandType } from '../types';
+import commands from './commands';
+import createTestEditor from './testing/createTestEditor';
+
+const selectAll = (editor: EditorView) => {
+	commands[EditorCommandType.SelectAll](editor.state, editor.dispatch, editor);
+};
+
+describe('ProseMirror/commands', () => {
+	test('textBold should toggle bold formatting', () => {
+		const editor = createTestEditor({ html: '<p>Test</p>' });
+
+		selectAll(editor);
+		commands[EditorCommandType.ToggleBolded](editor.state, editor.dispatch, editor);
+
+		expect(editor.state.doc.toJSON()).toMatchObject({
+			content: [{
+				type: 'paragraph',
+				content: [{
+					marks: [
+						{ type: 'strong' },
+					],
+					text: 'Test',
+				}],
+			}],
+		});
+	});
+
+	test('toggleHeading should add and remove header formatting', () => {
+		const editor = createTestEditor({ html: '<p>Test</p><p>Test 2</p>' });
+
+		selectAll(editor);
+		commands[EditorCommandType.ToggleHeading](editor.state, editor.dispatch, editor);
+
+		expect(editor.state.doc.toJSON()).toMatchObject({
+			content: [{
+				type: 'heading',
+				content: [{
+					text: 'Test',
+				}],
+			}, {
+				type: 'heading',
+				content: [{
+					text: 'Test 2',
+				}],
+			}],
+		});
+
+		commands[EditorCommandType.ToggleHeading](editor.state, editor.dispatch, editor);
+
+		expect(editor.state.doc.toJSON()).toMatchObject({
+			content: [{
+				type: 'paragraph',
+				content: [{
+					text: 'Test',
+				}],
+			}, {
+				type: 'paragraph',
+				content: [{
+					text: 'Test 2',
+				}],
+			}],
+		});
+	});
+
+	test('jumpToHash should scroll to a heading with a matching hash', () => {
+		const editor = createTestEditor({ html: '<h1>Test heading 1</h1><p>Test 2</p><h2>Test heading 2</h2><p>Test 3</p>' });
+
+		const jumpToHash = (hash: string) => {
+			return commands[EditorCommandType.JumpToHash](editor.state, editor.dispatch, editor, [hash]);
+		};
+
+		expect(jumpToHash('test-heading-1')).toBe(true);
+		expect(editor.state.selection.$anchor.parent.textContent).toBe('Test heading 1');
+
+		expect(jumpToHash('test-heading-2')).toBe(true);
+		expect(editor.state.selection.$anchor.parent.textContent).toBe('Test heading 2');
+	});
+});
diff --git a/packages/editor/ProseMirror/commands.ts b/packages/editor/ProseMirror/commands.ts
new file mode 100644
index 0000000000..a781e1ae1d
--- /dev/null
+++ b/packages/editor/ProseMirror/commands.ts
@@ -0,0 +1,206 @@
+import { Command, EditorState, Transaction } from 'prosemirror-state';
+import { EditorCommandType } from '../types';
+import { redo, undo } from 'prosemirror-history';
+import { autoJoin, selectAll, setBlockType, toggleMark } from 'prosemirror-commands';
+import { focus } from '@joplin/lib/utils/focusHandler';
+import schema from './schema';
+import { liftListItem, sinkListItem, wrapRangeInList } from 'prosemirror-schema-list';
+import { NodeType } from 'prosemirror-model';
+import { getSearchVisible, setSearchVisible } from './plugins/searchPlugin';
+import { findNext, findPrev, replaceAll, replaceNext } from 'prosemirror-search';
+import { getEditorApi } from './plugins/joplinEditorApiPlugin';
+import { EditorEventType } from '../events';
+import extractSelectedLinesTo from './utils/extractSelectedLinesTo';
+import { EditorView } from 'prosemirror-view';
+import jumpToHash from './utils/jumpToHash';
+import canReplaceSelectionWith from './utils/canReplaceSelectionWith';
+
+type Dispatch = (tr: Transaction)=> void;
+type ExtendedCommand = (state: EditorState, dispatch: Dispatch, view?: EditorView, options?: string[])=> boolean;
+
+const toggleHeading = (level: number): Command => {
+	const enableCommand: Command = (state, dispatch) => {
+		const result = extractSelectedLinesTo({
+			type: schema.nodes.heading,
+			attrs: { level },
+		}, state.tr, state.selection);
+		if (!result) return false;
+
+		if (dispatch) {
+			dispatch(result.transaction);
+		}
+		return true;
+	};
+	const resetCommand = setBlockType(schema.nodes.paragraph);
+
+	return (state, dispatch, view) => {
+		if (enableCommand(state, dispatch, view)) {
+			return true;
+		}
+		return resetCommand(state, dispatch, view);
+	};
+};
+
+const toggleList = (type: NodeType): Command => {
+	const enableCommand: Command = autoJoin((state, dispatch) => {
+		const extractionResult = extractSelectedLinesTo({
+			type: schema.nodes.paragraph,
+			attrs: {},
+		}, state.tr, state.selection);
+
+		let transaction = extractionResult?.transaction;
+		if (!transaction) {
+			transaction = state.tr;
+		}
+
+		const selection = extractionResult?.finalSelection ?? state.selection;
+		const range = selection.$from.blockRange(selection.$to);
+		const result = wrapRangeInList(transaction, range, type);
+
+		if (dispatch && result) {
+			dispatch(transaction);
+		}
+
+		return result;
+	}, [type.name]);
+	const liftCommand = liftListItem(schema.nodes.list_item);
+
+	return (state, dispatch, view) => {
+		return enableCommand(state, dispatch, view) || liftCommand(state, dispatch, view);
+	};
+};
+
+const toggleCode: Command = (state, dispatch, view) => {
+	return toggleMark(schema.marks.code)(state, dispatch, view) || setBlockType(schema.nodes.paragraph)(state, dispatch, view);
+};
+
+
+const listItemTypes = [schema.nodes.list_item, schema.nodes.task_list_item];
+
+const commands: Record<EditorCommandType, ExtendedCommand|null> = {
+	[EditorCommandType.Undo]: undo,
+	[EditorCommandType.Redo]: redo,
+	[EditorCommandType.SelectAll]: selectAll,
+	[EditorCommandType.Focus]: (_state, _dispatch?, view?) => {
+		if (view) {
+			focus('commands::focus', view);
+		}
+		return true;
+	},
+	[EditorCommandType.ToggleBolded]: toggleMark(schema.marks.strong),
+	[EditorCommandType.ToggleItalicized]: toggleMark(schema.marks.emphasis),
+	[EditorCommandType.ToggleCode]: toggleCode,
+	[EditorCommandType.ToggleMath]: (state, _dispatch, view) => {
+		const renderer = getEditorApi(state).renderer;
+		const selectedText = state.doc.textBetween(state.selection.from, state.selection.to);
+
+		const block = selectedText.includes('\n');
+		const nodeType = block ? schema.nodes.joplinEditableBlock : schema.nodes.joplinEditableInline;
+		if (canReplaceSelectionWith(state.selection, nodeType)) {
+			void (async () => {
+				const separator = block ? '$$' : '$';
+				const rendered = await renderer.renderMarkupToHtml(`${separator}${selectedText}${separator}`);
+
+				if (view) {
+					view.pasteHTML(rendered.html);
+				}
+			})();
+
+			return true;
+		}
+		return false;
+	},
+	[EditorCommandType.ToggleComment]: null,
+	[EditorCommandType.DuplicateLine]: null,
+	[EditorCommandType.SortSelectedLines]: null,
+	[EditorCommandType.ToggleNumberedList]: toggleList(schema.nodes.ordered_list),
+	[EditorCommandType.ToggleBulletedList]: toggleList(schema.nodes.bullet_list),
+	[EditorCommandType.ToggleCheckList]: toggleList(schema.nodes.task_list),
+	[EditorCommandType.ToggleHeading]: toggleHeading(2),
+	[EditorCommandType.ToggleHeading1]: toggleHeading(1),
+	[EditorCommandType.ToggleHeading2]: toggleHeading(2),
+	[EditorCommandType.ToggleHeading3]: toggleHeading(3),
+	[EditorCommandType.ToggleHeading4]: toggleHeading(4),
+	[EditorCommandType.ToggleHeading5]: toggleHeading(5),
+	[EditorCommandType.InsertHorizontalRule]: null,
+	[EditorCommandType.ToggleSearch]: (state, dispatch, view) => {
+		const command = setSearchVisible(!getSearchVisible(state));
+		return command(state, dispatch, view);
+	},
+	[EditorCommandType.ShowSearch]: setSearchVisible(true),
+	[EditorCommandType.HideSearch]: setSearchVisible(false),
+	[EditorCommandType.FindNext]: findNext,
+	[EditorCommandType.FindPrevious]: findPrev,
+	[EditorCommandType.ReplaceNext]: replaceNext,
+	[EditorCommandType.ReplaceAll]: replaceAll,
+	[EditorCommandType.EditLink]: (state: EditorState, dispatch) => {
+		if (dispatch) {
+			const onEvent = getEditorApi(state).onEvent;
+			onEvent({
+				kind: EditorEventType.EditLink,
+			});
+		}
+
+		return true;
+	},
+	[EditorCommandType.ScrollSelectionIntoView]: (state, dispatch) => {
+		if (dispatch) {
+			dispatch(state.tr.scrollIntoView());
+		}
+		return true;
+	},
+	[EditorCommandType.DeleteLine]: (state, dispatch) => {
+		const anchor = state.selection.$anchor;
+		const transaction = state.tr;
+		for (let i = anchor.depth; i > 0; i--) {
+			if (anchor.node(i).isBlock) {
+				const deleteFrom = anchor.before(i);
+				const deleteTo = anchor.after(i);
+				if (dispatch) {
+					dispatch(transaction.deleteRange(deleteFrom, deleteTo));
+				}
+				return true;
+			}
+		}
+
+		return false;
+	},
+	[EditorCommandType.DeleteToLineEnd]: null,
+	[EditorCommandType.DeleteToLineStart]: null,
+	[EditorCommandType.IndentMore]: (state, dispatch, view) => {
+		return listItemTypes.some(type => sinkListItem(type)(state, dispatch, view));
+	},
+	[EditorCommandType.IndentLess]: (state, dispatch, view) => {
+		return listItemTypes.some(type => liftListItem(type)(state, dispatch, view));
+	},
+	[EditorCommandType.IndentAuto]: null,
+	[EditorCommandType.InsertNewlineAndIndent]: null,
+	[EditorCommandType.SwapLineUp]: null,
+	[EditorCommandType.SwapLineDown]: null,
+	[EditorCommandType.GoDocEnd]: null,
+	[EditorCommandType.GoDocStart]: null,
+	[EditorCommandType.GoLineStart]: null,
+	[EditorCommandType.GoLineEnd]: null,
+	[EditorCommandType.GoLineUp]: null,
+	[EditorCommandType.GoLineDown]: null,
+	[EditorCommandType.GoPageUp]: null,
+	[EditorCommandType.GoPageDown]: null,
+	[EditorCommandType.GoCharLeft]: null,
+	[EditorCommandType.GoCharRight]: null,
+	[EditorCommandType.UndoSelection]: null,
+	[EditorCommandType.RedoSelection]: null,
+	[EditorCommandType.SelectedText]: null,
+	[EditorCommandType.InsertText]: (state, dispatch, _view, [text]) => {
+		if (dispatch) {
+			dispatch(state.tr.insertText(text));
+		}
+		return true;
+	},
+	[EditorCommandType.ReplaceSelection]: null,
+	[EditorCommandType.SetText]: null,
+	[EditorCommandType.JumpToHash]: (state, dispatch, view, [targetHash]) => {
+		return jumpToHash(targetHash, schema.nodes.heading)(state, dispatch, view);
+	},
+};
+
+export default commands;
diff --git a/packages/editor/ProseMirror/createEditor.ts b/packages/editor/ProseMirror/createEditor.ts
new file mode 100644
index 0000000000..99f9d55123
--- /dev/null
+++ b/packages/editor/ProseMirror/createEditor.ts
@@ -0,0 +1,265 @@
+import { ContentScriptData, EditorCommandType, EditorControl, EditorProps, EditorSettings, SearchState, UpdateBodyOptions, UserEventSource } from '../types';
+import { EditorState, TextSelection, Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { DOMParser as ProseMirrorDomParser } from 'prosemirror-model';
+import { history } from 'prosemirror-history';
+import commands from './commands';
+import schema from './schema';
+import { gapCursor } from 'prosemirror-gapcursor';
+import { dropCursor } from 'prosemirror-dropcursor';
+import { EditorEventType } from '../events';
+import UndoStackSynchronizer from './utils/UndoStackSynchronizer';
+import computeSelectionFormatting from './utils/computeSelectionFormatting';
+import { defaultSelectionFormatting, selectionFormattingEqual } from '../SelectionFormatting';
+import joplinEditablePlugin from './plugins/joplinEditablePlugin';
+import keymapExtension from './plugins/keymapPlugin';
+import inputRulesExtension from './plugins/inputRulesPlugin';
+import originalMarkupPlugin from './plugins/originalMarkupPlugin';
+import { tableEditing } from 'prosemirror-tables';
+import preprocessEditorInput from './utils/preprocessEditorInput';
+import listPlugin from './plugins/listPlugin';
+import searchExtension from './plugins/searchPlugin';
+import joplinEditorApiPlugin, { setEditorApi } from './plugins/joplinEditorApiPlugin';
+import linkTooltipPlugin from './plugins/linkTooltipPlugin';
+import { RendererControl } from './types';
+import resourcePlaceholderPlugin, { onResourceDownloaded } from './plugins/resourcePlaceholderPlugin';
+import getFileFromPasteEvent from '../utils/getFileFromPasteEvent';
+import { RenderResult } from '../../renderer/types';
+
+const createEditor = async (
+	parentElement: HTMLElement,
+	props: EditorProps,
+	renderer: RendererControl,
+): Promise<EditorControl> => {
+	const renderNodeToMarkup = (node: Node|DocumentFragment) => {
+		return renderer.renderHtmlToMarkup(node);
+	};
+
+	const proseMirrorParser = ProseMirrorDomParser.fromSchema(schema);
+
+	const cssContainer = document.createElement('style');
+	parentElement.appendChild(cssContainer);
+
+	const { plugin: markupTracker, stateToMarkup } = originalMarkupPlugin(renderNodeToMarkup);
+	const { plugin: searchPlugin, updateState: updateSearchState } = searchExtension(props.onEvent);
+
+	const renderAndPostprocessHtml = async (markup: string) => {
+		const renderResult = await renderer.renderMarkupToHtml(markup);
+
+		const dom = new DOMParser().parseFromString(renderResult.html, 'text/html');
+		preprocessEditorInput(dom, markup);
+
+		return { renderResult, dom };
+	};
+	const updateGlobalCss = (renderResult: RenderResult) => {
+		cssContainer.replaceChildren(
+			document.createTextNode(renderResult.cssStrings.join('\n')),
+		);
+	};
+
+	let settings = props.settings;
+	const createInitialState = async (markup: string) => {
+		const { renderResult, dom } = await renderAndPostprocessHtml(markup);
+		updateGlobalCss(renderResult);
+
+		let state = EditorState.create({
+			doc: proseMirrorParser.parse(dom),
+			plugins: [
+				inputRulesExtension,
+				keymapExtension,
+				gapCursor(),
+				dropCursor(),
+				history(),
+				searchPlugin,
+				joplinEditablePlugin,
+				markupTracker,
+				listPlugin,
+				linkTooltipPlugin,
+				tableEditing({ allowTableNodeSelection: true }),
+				joplinEditorApiPlugin,
+				resourcePlaceholderPlugin,
+			].flat(),
+		});
+
+		state = state.apply(
+			setEditorApi(state.tr, {
+				onEvent: props.onEvent,
+				renderer,
+			}),
+		);
+
+		return state;
+	};
+
+	const undoStackSynchronizer = new UndoStackSynchronizer(props.onEvent);
+	const onDocumentUpdate = (newState: EditorState) => {
+		props.onEvent({
+			kind: EditorEventType.Change,
+			value: stateToMarkup(newState),
+		});
+	};
+	let lastSelectionFormatting = defaultSelectionFormatting;
+	const onUpdateSelection = (newState: EditorState) => {
+		const selectionFormatting = computeSelectionFormatting(newState, settings);
+		if (!selectionFormattingEqual(lastSelectionFormatting, selectionFormatting)) {
+			lastSelectionFormatting = selectionFormatting;
+			props.onEvent({
+				kind: EditorEventType.SelectionFormattingChange,
+				formatting: selectionFormatting,
+			});
+		}
+	};
+
+	const view = new EditorView(parentElement, {
+		state: await createInitialState(props.initialText),
+		dispatchTransaction: transaction => {
+			const newState = view.state.apply(transaction);
+
+			if (transaction.docChanged) {
+				onDocumentUpdate(newState);
+			}
+
+			if (transaction.selectionSet || transaction.docChanged || transaction.storedMarksSet) {
+				onUpdateSelection(newState);
+			}
+
+			undoStackSynchronizer.schedulePostUndoRedoDepthChange(view);
+
+			view.updateState(newState);
+		},
+		attributes: {
+			'aria-label': settings.editorLabel,
+			class: 'prosemirror-editor',
+		},
+		handleDOMEvents: {
+			paste: (_view, event) => {
+				const fileToPaste = getFileFromPasteEvent(event);
+				if (fileToPaste) {
+					event.preventDefault();
+					void props.onPasteFile(fileToPaste);
+					return true;
+				}
+				return false;
+			},
+		},
+	});
+
+	const editorControl: EditorControl = {
+		supportsCommand: (name: EditorCommandType | string) => {
+			return name in commands && !!commands[name as keyof typeof commands];
+		},
+		execCommand: (name: EditorCommandType | string, ...args) => {
+			if (!editorControl.supportsCommand(name)) {
+				throw new Error(`Unsupported command: ${name}`);
+			}
+
+			commands[name as keyof typeof commands](view.state, view.dispatch, view, args);
+		},
+		undo: () => {
+			void editorControl.execCommand(EditorCommandType.Undo);
+		},
+		redo: () => {
+			void editorControl.execCommand(EditorCommandType.Redo);
+		},
+		select: function(anchor: number, head: number): void {
+			const transaction = view.state.tr;
+			transaction.setSelection(
+				TextSelection.create(transaction.doc, anchor, head),
+			);
+			view.dispatch(transaction);
+		},
+		setScrollPercent: (fraction: number) => {
+			// TODO: Handle this in a better way?
+			document.scrollingElement.scrollTop = fraction * document.scrollingElement.scrollHeight;
+		},
+		insertText: async (text: string, _source?: UserEventSource) => {
+			const { dom } = await renderAndPostprocessHtml(text);
+			view.pasteHTML(new XMLSerializer().serializeToString(dom));
+		},
+		updateBody: async (newBody: string, _updateBodyOptions?: UpdateBodyOptions) => {
+			view.updateState(await createInitialState(newBody));
+		},
+		updateSettings: async (newSettings: EditorSettings) => {
+			const oldSettings = settings;
+			settings = newSettings;
+
+			if (oldSettings.themeData.themeId !== newSettings.themeData.themeId) {
+				// Refresh global CSS when the theme changes -- render the full document
+				// to avoid required CSS being omitted due to missing markup.
+				const { renderResult } = await renderAndPostprocessHtml(stateToMarkup(view.state));
+				updateGlobalCss(renderResult);
+			}
+		},
+		updateLink: (label: string, url: string) => {
+			const doc = view.state.doc;
+			const selection = view.state.selection;
+			let transaction: Transaction = view.state.tr;
+
+			let linkFrom = selection.from;
+			let linkTo = selection.to;
+			doc.nodesBetween(selection.from, selection.to, (node, position) => {
+				const linkMark = node.marks.find(mark => mark.type === schema.marks.link);
+				if (linkMark) {
+					linkFrom = position;
+					linkTo = position + node.nodeSize;
+					transaction = transaction.removeMark(
+						position, position + node.nodeSize, schema.marks.link,
+					);
+				}
+			});
+
+			// Helper functions that return a point at the current stage of
+			// the transaction:
+			const map = (position: number, associativity: number) => transaction.mapping.map(position, associativity);
+
+			// Update the link text -- if an existing link, replace just the text
+			// in that link.
+			if (label !== transaction.doc.textBetween(linkFrom, linkTo)) {
+				transaction = transaction.insertText(
+					label,
+					linkFrom,
+					linkTo,
+				);
+				linkFrom = map(linkFrom, -1); // Ensure that linkFrom is to the left of the text
+				linkTo = map(linkTo, 1); // Ensure that linkTo is to the right of the text
+			}
+
+			// Add the URL
+			if (url) {
+				transaction = transaction.addMark(
+					// Use the entire selection,
+					linkFrom,
+					linkTo,
+					schema.mark(schema.marks.link, { href: url }),
+				);
+			}
+
+			view.dispatch(transaction);
+		},
+		setSearchState: (newState: SearchState) => {
+			view.dispatch(updateSearchState(view.state, newState));
+		},
+		setContentScripts: (_plugins: ContentScriptData[]) => {
+			throw new Error('setContentScripts not implemented.');
+		},
+		onResourceDownloaded: async (resourceId: string) => {
+			const rendered = await renderAndPostprocessHtml(`<img src=":/${resourceId}"/>`);
+			const renderedImage = rendered.dom.querySelector('img');
+
+			// The resource might not be an image. If so, skip.
+			if (!renderedImage) {
+				return;
+			}
+			const stillNotLoaded = renderedImage.classList.contains('not-loaded-resource');
+			if (stillNotLoaded) {
+				return;
+			}
+
+			const resourceSrc = renderedImage?.src;
+			onResourceDownloaded(view, resourceId, resourceSrc);
+		},
+	};
+	return editorControl;
+};
+
+export default createEditor;
diff --git a/packages/editor/ProseMirror/index.ts b/packages/editor/ProseMirror/index.ts
new file mode 100644
index 0000000000..b2f1837c79
--- /dev/null
+++ b/packages/editor/ProseMirror/index.ts
@@ -0,0 +1,6 @@
+// This index.ts file helps prevent code duplication issues when bundling
+// as it allows ESBuild to select the TypeScript version of createEditor.
+
+import '../polyfills';
+// eslint-disable-next-line import/prefer-default-export
+export { default as createEditor } from './createEditor';
diff --git a/packages/editor/ProseMirror/plugins/inputRulesPlugin.ts b/packages/editor/ProseMirror/plugins/inputRulesPlugin.ts
new file mode 100644
index 0000000000..75aab5e86f
--- /dev/null
+++ b/packages/editor/ProseMirror/plugins/inputRulesPlugin.ts
@@ -0,0 +1,181 @@
+import { buildInputRules } from 'prosemirror-example-setup';
+import schema from '../schema';
+import { MarkType, ResolvedPos } from 'prosemirror-model';
+import { EditorState, Plugin, Transaction } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import { closeHistory } from 'prosemirror-history';
+
+
+interface InlineInputRule {
+	match: RegExp;
+	matchEndCharacter: string;
+	handler: (state: EditorState, match: RegExpMatchArray, start: number, end: number, commitCharacter: string)=> Transaction|null;
+}
+
+// A custom input rule extension for inline input replacements.
+//
+// Ref: https://github.com/ProseMirror/prosemirror-inputrules/blob/43ef04ce9c1512ef8f2289578309c40b431ed3c5/src/inputrules.ts#L82
+// See https://discuss.prosemirror.net/t/trigger-inputrule-on-enter/1118 for why this approach is needed.
+const inlineInputRules = (rules: InlineInputRule[], commitCharacterExpression: RegExp) => {
+	const getContentBeforeCursor = (cursorInformation: ResolvedPos) => {
+		const parent = cursorInformation.parent;
+		const offsetInParent = cursorInformation.parentOffset;
+		const maxLength = 256;
+		return parent.textBetween(Math.max(offsetInParent - maxLength, 0), offsetInParent);
+	};
+
+	const getApplicableRule = (state: EditorState, cursor: number, justTypedText: string) => {
+		if (!rules.some(rule => justTypedText.endsWith(rule.matchEndCharacter))) {
+			return false;
+		}
+		const cursorInformation = state.doc.resolve(cursor);
+		const inCode = cursorInformation.parent.type.spec.code;
+		if (inCode) {
+			return false;
+		}
+		const beforeCursor = getContentBeforeCursor(cursorInformation) + justTypedText;
+
+		for (const rule of rules) {
+			const match = beforeCursor.match(rule.match);
+			if (!match) continue;
+
+			return rule;
+		}
+		return null;
+	};
+
+	type PluginState = { pendingRule: InlineInputRule };
+	const run = (view: EditorView, cursor: number, commitData: string) => {
+		const commitCharacter = commitCharacterExpression.exec(commitData) ? commitData : '';
+
+		// Commit on either a commit character or when the user presses "enter".
+		if (!commitCharacter && commitData !== 'Enter') return false;
+
+		const availableRule = plugin.getState(view.state)?.pendingRule;
+		if (!availableRule) return false;
+
+		const beforeCursor = getContentBeforeCursor(view.state.doc.resolve(cursor));
+		const match = beforeCursor.match(availableRule.match);
+		if (match) {
+			const transaction = availableRule.handler(view.state, match, cursor - match[0].length, cursor, commitCharacter);
+			if (transaction) {
+				// closeHistory: Move the markup completion to a separate history event so that it
+				// can be undone separately.
+				view.dispatch(closeHistory(transaction));
+				return true;
+			}
+		}
+
+		return false;
+	};
+
+	const plugin = new Plugin<PluginState|null>({
+		state: {
+			init: () => null,
+			apply: (tr, lastValue) => {
+				const pendingRule = tr.getMeta(plugin);
+				if (pendingRule) return pendingRule;
+				if (tr.docChanged || tr.selectionSet) return null;
+				return lastValue;
+			},
+		},
+		props: {
+			handleTextInput(view, _from, to, text, defaultAction) {
+				const proposedRule = getApplicableRule(view.state, to, text);
+				if (proposedRule) {
+					const transaction = defaultAction().setMeta(plugin, { pendingRule: proposedRule });
+					view.dispatch(transaction);
+					return true;
+				}
+				return false;
+			},
+			handleDOMEvents: {
+				compositionend: (view, event) => {
+					if (view.state.selection.empty) {
+						return run(view, view.state.selection.to, event.data);
+					}
+					return false;
+				},
+			},
+			handleKeyDown: (view, event) => {
+				return run(view, view.state.selection.to, event.key);
+			},
+		},
+		// TODO: Uncomment this? Doing so allows the undoInputRule command to undo this input rule.
+		//       However, it will require storing additional information in the plugin state (e.g. last transaction,
+		//       start, end position) to be compatible with the upstream input rule extension.
+		// isInputRules: true,
+	});
+	return plugin;
+};
+
+const makeMarkInputRule = (
+	regExpString: string, matchEndCharacter: string, replacement: (matches: RegExpMatchArray)=> string, mark: MarkType,
+): InlineInputRule => {
+	const commitCharacterExp = '[.?!,:;¡¿() \\n]';
+	const regex = new RegExp(`(^|${commitCharacterExp})${regExpString}$`);
+	return {
+		match: regex,
+		matchEndCharacter,
+		handler: (state, match, start, end, endCommitCharacter) => {
+			let transaction = state.tr.delete(start, end);
+			const marks = [schema.mark(mark)];
+
+			const startCommitCharacter = match[1];
+
+			// Remove the commit-character-related matches before forwarding the input
+			// to the replacement function.
+			const matchesWithoutCommitCharacters: RegExpMatchArray = [
+				match[0].substring(startCommitCharacter.length, match[0].length),
+				...match.slice(2, match.length),
+			];
+			matchesWithoutCommitCharacters.groups = match.groups;
+
+			const replacementText = replacement(matchesWithoutCommitCharacters);
+
+			transaction = transaction.insert(
+				transaction.mapping.map(start, -1),
+				[
+					!!startCommitCharacter && schema.text(startCommitCharacter),
+					!!replacementText && schema.text(replacementText, marks),
+					!!endCommitCharacter && schema.text(endCommitCharacter),
+				].filter(node => !!node),
+			);
+
+			return transaction;
+		},
+	};
+};
+
+const baseInputRules = buildInputRules(schema);
+const inlineContentExp = '\\S[^\\n]*\\S|\\S';
+const inputRulesExtension = [
+	baseInputRules,
+	inlineInputRules([
+		makeMarkInputRule(
+			`\\*\\*(${inlineContentExp})\\*\\*`,
+			'*',
+			(match) => match[1],
+			schema.marks.strong,
+		),
+		makeMarkInputRule(
+			`\\*(${inlineContentExp})\\*`,
+			'*',
+			(match) => match[1],
+			schema.marks.emphasis,
+		),
+		makeMarkInputRule(
+			`_(${inlineContentExp})_`,
+			'_',
+			(match) => match[1],
+			schema.marks.emphasis,
+		),
+		makeMarkInputRule(
+			`[\`](${inlineContentExp})[\`]`,
+			'`',
+			(match) => match[1],
+			schema.marks.code,
+		),
+	], /[ .,?)!;]/),
+];
+export default inputRulesExtension;
diff --git a/packages/editor/ProseMirror/plugins/joplinEditablePlugin.ts b/packages/editor/ProseMirror/plugins/joplinEditablePlugin.ts
new file mode 100644
index 0000000000..35c7faf23d
--- /dev/null
+++ b/packages/editor/ProseMirror/plugins/joplinEditablePlugin.ts
@@ -0,0 +1,69 @@
+import { Plugin } from 'prosemirror-state';
+import { Node, NodeSpec } from 'prosemirror-model';
+import { NodeView } from 'prosemirror-view';
+import sanitizeHtml from '../utils/sanitizeHtml';
+
+// See the fold example for more information about
+// writing similar ProseMirror plugins:
+// https://prosemirror.net/examples/fold/
+
+
+const makeJoplinEditableSpec = (inline: boolean): NodeSpec => ({
+	group: inline ? 'inline' : 'block',
+	inline: inline,
+	draggable: true,
+	attrs: {
+		contentHtml: { default: '', validate: 'string' },
+	},
+	parseDOM: [
+		{
+			tag: `${inline ? 'span' : 'div'}.joplin-editable`,
+			getAttrs: node => ({
+				contentHtml: node.innerHTML,
+			}),
+		},
+	],
+	toDOM: node => {
+		const content = document.createElement(inline ? 'span' : 'div');
+		content.classList.add('joplin-editable');
+		content.innerHTML = sanitizeHtml(node.attrs.contentHtml);
+		return content;
+	},
+});
+
+export const nodeSpecs = {
+	joplinEditableInline: makeJoplinEditableSpec(true),
+	joplinEditableBlock: makeJoplinEditableSpec(false),
+};
+
+class EditableSourceBlockView implements NodeView {
+	public readonly dom: HTMLElement;
+	public constructor(node: Node, inline: boolean) {
+		if ((node.attrs.contentHtml ?? undefined) === undefined) {
+			throw new Error(`Unable to create a SourceBlockView for a node lacking contentHtml. Node: ${node}.`);
+		}
+
+		this.dom = document.createElement(inline ? 'span' : 'div');
+		this.dom.classList.add('joplin-editable');
+		this.dom.innerHTML = sanitizeHtml(node.attrs.contentHtml);
+	}
+
+	public selectNode() {
+		this.dom.classList.add('-selected');
+	}
+
+	public deselectNode() {
+		this.dom.classList.remove('-selected');
+	}
+}
+
+const joplinEditablePlugin = new Plugin({
+	props: {
+		nodeViews: {
+			joplinEditableInline: node => new EditableSourceBlockView(node, true),
+			joplinEditableBlock: node => new EditableSourceBlockView(node, false),
+		},
+	},
+});
+
+export default joplinEditablePlugin;
diff --git a/packages/editor/ProseMirror/plugins/joplinEditorApiPlugin.ts b/packages/editor/ProseMirror/plugins/joplinEditorApiPlugin.ts
new file mode 100644
index 0000000000..b1c60aee41
--- /dev/null
+++ b/packages/editor/ProseMirror/plugins/joplinEditorApiPlugin.ts
@@ -0,0 +1,43 @@
+import { EditorState, Plugin, Transaction } from 'prosemirror-state';
+import { OnEventCallback } from '../../types';
+import { RendererControl } from '../types';
+
+export interface EditorApi {
+	renderer: RendererControl;
+	onEvent: OnEventCallback;
+}
+
+
+export const getEditorApi = (state: EditorState) => {
+	return joplinEditorApiPlugin.getState(state);
+};
+
+export const setEditorApi = (transaction: Transaction, api: EditorApi) => {
+	return transaction.setMeta(joplinEditorApiPlugin, api);
+};
+
+// Stores the editor event handler callback in the editor state.
+const joplinEditorApiPlugin = new Plugin<EditorApi>({
+	state: {
+		init: () => ({
+			onEvent: ()=>{},
+			renderer: {
+				renderHtmlToMarkup: () => {
+					throw new Error('Not initialized');
+				},
+				renderMarkupToHtml: () => {
+					throw new Error('Not initialized');
+				},
+			},
+		}),
+		apply: (tr, value) => {
+			const proposedValue = tr.getMeta(joplinEditorApiPlugin);
+			if (proposedValue) {
+				return proposedValue;
+			}
+			return value;
+		},
+	},
+});
+
+export default joplinEditorApiPlugin;
diff --git a/packages/editor/ProseMirror/plugins/keymapPlugin.ts b/packages/editor/ProseMirror/plugins/keymapPlugin.ts
new file mode 100644
index 0000000000..35308bf546
--- /dev/null
+++ b/packages/editor/ProseMirror/plugins/keymapPlugin.ts
@@ -0,0 +1,110 @@
+import { buildKeymap as buildBaseKeymap } from 'prosemirror-example-setup';
+import schema from '../schema';
+import { keymap } from 'prosemirror-keymap';
+import { baseKeymap, chainCommands, exitCode, liftEmptyBlock, newlineInCode } from 'prosemirror-commands';
+import { liftListItem, sinkListItem, splitListItem } from 'prosemirror-schema-list';
+import commands from '../commands';
+import { EditorCommandType } from '../../types';
+import { Command, EditorState, TextSelection } from 'prosemirror-state';
+import splitBlockAs from '../vendor/splitBlockAs';
+import canReplaceSelectionWith from '../utils/canReplaceSelectionWith';
+
+const splitBlockAsDefault = splitBlockAs();
+const splitBlockAsParagraph = splitBlockAs(() => ({ type: schema.nodes.paragraph }));
+
+const convertDoubleHardBreakToNewParagraph: Command = (state, dispatch) => {
+	const { from, to } = state.selection;
+	let foundHardBreak = false;
+	let hardBreakFrom = -1;
+	state.doc.nodesBetween(from - 1, to, (node, pos) => {
+		if (node.type === schema.nodes.hard_break) {
+			foundHardBreak = true;
+			hardBreakFrom = pos;
+		}
+		return !foundHardBreak;
+	});
+
+	if (foundHardBreak) {
+		const updatedSelection = TextSelection.create(state.doc, hardBreakFrom, to);
+		const tr = state.tr.setSelection(updatedSelection);
+		const splitBlockTransaction = splitBlockAsParagraph(updatedSelection, tr) || splitBlockAsDefault(updatedSelection, tr);
+
+		if (splitBlockTransaction && dispatch) {
+			dispatch(splitBlockTransaction);
+		}
+
+		return !!splitBlockTransaction;
+	}
+
+	return false;
+};
+
+const listItemTypes = [
+	// Apply the list item keymap to all list item types
+	// Ref: Default keymap in prosemirror-example-setup.
+	schema.nodes.list_item, schema.nodes.task_list_item,
+];
+
+const isInEmptyListItem = (state: EditorState) => {
+	const anchor = state.selection.$anchor;
+	const selectionGrandparent = anchor.node(Math.max(0, anchor.depth - 1));
+	const inList = listItemTypes.includes(selectionGrandparent?.type);
+
+	return inList && anchor.parent.content.size === 0;
+};
+
+const isInEmptyParagraph = (state: EditorState) => {
+	const selectionParent = state.selection.$anchor.parent;
+	return state.selection.empty &&
+		state.selection.$anchor.parent.type === schema.nodes.paragraph &&
+		selectionParent.content.size === 0;
+};
+
+const insertHardBreak: Command = (state, dispatch) => {
+	// Avoid adding hard breaks at the beginning of list items
+	if (isInEmptyListItem(state)) return false;
+	// Avoid adding hard breaks at the beginning of paragraphs -- certain input rules
+	// only work when the cursor is at the beginning of a paragraph. If a paragraph
+	// starts with a hard break, it may incorrectly appear to the user that the cursor is at the
+	// start of a paragraph, leading to unexpected behavior related to input rules.
+	if (isInEmptyParagraph(state)) return false;
+	if (!canReplaceSelectionWith(state.selection, schema.nodes.hard_break)) return false;
+
+	if (dispatch) {
+		const hardBreak = schema.nodes.hard_break.create();
+
+		// Default to inserting a hard break. See https://github.com/ProseMirror/prosemirror-example-setup/blob/8c11be6850604081dceda8f36e08d2426875e19a/src/keymap.ts#L77C26-L77C39
+		dispatch(
+			state.tr.replaceSelectionWith(hardBreak)
+				.scrollIntoView(),
+		);
+	}
+	return true;
+};
+
+const keymapExtension = [
+	listItemTypes.map(itemType => keymap({
+		'Enter': splitListItem(itemType),
+		'Mod-[': liftListItem(itemType),
+		'Mod-]': sinkListItem(itemType),
+	})),
+	keymap({
+		'Enter': chainCommands(
+			newlineInCode,
+			exitCode,
+			liftEmptyBlock,
+			convertDoubleHardBreakToNewParagraph,
+			insertHardBreak,
+		),
+	}),
+	keymap({
+		'Mod-k': commands[EditorCommandType.EditLink],
+		'Mod-i': commands[EditorCommandType.ToggleItalicized],
+		'Mod-`': commands[EditorCommandType.ToggleCode],
+		'Mod-f': commands[EditorCommandType.ToggleSearch],
+	}),
+	keymap(buildBaseKeymap(schema)),
+	keymap(baseKeymap),
+].flat();
+
+export default keymapExtension;
diff --git a/packages/editor/ProseMirror/plugins/linkTooltipPlugin.test.ts b/packages/editor/ProseMirror/plugins/linkTooltipPlugin.test.ts
new file mode 100644
index 0000000000..3b7c8dd65f
--- /dev/null
+++ b/packages/editor/ProseMirror/plugins/linkTooltipPlugin.test.ts
@@ -0,0 +1,51 @@
+import { TextSelection } from 'prosemirror-state';
+import createTestEditor from '../testing/createTestEditor';
+import joplinEditorApiPlugin from './joplinEditorApiPlugin';
+import linkTooltipPlugin from './linkTooltipPlugin';
+import { EditorView } from 'prosemirror-view';
+
+const getTooltip = () => {
+	return document.querySelector('.link-tooltip:not(.-hidden)');
+};
+
+
+let editor: EditorView;
+
+describe('linkTooltipPlugin', () => {
+	beforeEach(() => {
+		editor = createTestEditor({
+			parent: document.body,
+			html: '<p><a href="#test-heading">Jump to "Test"</a></p><h1>Test heading</h1><p>Done</p>',
+			plugins: [
+				linkTooltipPlugin,
+				joplinEditorApiPlugin,
+			],
+		});
+	});
+
+	afterEach(() => {
+		document.body.replaceChildren();
+	});
+
+	test('should show a link tooltip when the cursor is in a link', () => {
+		expect(getTooltip()).toBeFalsy();
+
+		editor.dispatch(
+			editor.state.tr.setSelection(TextSelection.create(editor.state.tr.doc, 3)),
+		);
+
+		expect(getTooltip()).toBeTruthy();
+	});
+
+	test('clicking on a hash link should move the cursor to the corresponding header', () => {
+		editor.dispatch(
+			editor.state.tr.setSelection(
+				TextSelection.create(editor.state.tr.doc, 3),
+			),
+		);
+
+		getTooltip().querySelector('button').click();
+
+		expect(editor.state.selection.$to.parent.textContent).toBe('Test heading');
+	});
+});
diff --git a/packages/editor/ProseMirror/plugins/linkTooltipPlugin.ts b/packages/editor/ProseMirror/plugins/linkTooltipPlugin.ts
new file mode 100644
index 0000000000..5146c86946
--- /dev/null
+++ b/packages/editor/ProseMirror/plugins/linkTooltipPlugin.ts
@@ -0,0 +1,94 @@
+
+import { EditorState, Plugin } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import schema from '../schema';
+import { getEditorApi } from './joplinEditorApiPlugin';
+import { EditorEventType } from '../../events';
+import { OnEventCallback } from '../../types';
+import jumpToHash from '../utils/jumpToHash';
+
+// This plugin is similar to https://prosemirror.net/examples/tooltip/
+
+class LinkTooltip {
+	private tooltip_: HTMLElement;
+	private tooltipContent_: HTMLButtonElement;
+	private onEditorEvent_: OnEventCallback|null = null;
+
+	public constructor(view: EditorView) {
+		this.tooltip_ = document.createElement('div');
+		this.tooltip_.classList.add('link-tooltip', '-hidden');
+		this.tooltipContent_ = document.createElement('button');
+		this.tooltipContent_.classList.add('link');
+		this.tooltipContent_.role = 'link';
+		this.tooltip_.appendChild(this.tooltipContent_);
+
+		view.dom.parentElement.appendChild(this.tooltip_);
+
+		this.update(view, null);
+	}
+
+	public update(view: EditorView, lastState: EditorState) {
+		const state = view.state;
+		this.onEditorEvent_ = getEditorApi(state).onEvent;
+
+		const sameSelection = lastState && state.selection.eq(lastState.selection);
+		const sameDoc = lastState && state.doc.eq(lastState.doc);
+		if (sameSelection && sameDoc) {
+			return;
+		}
+
+		const getMarksNearSelection = () => {
+			let marks = state.selection.$from.marks();
+
+			const parentStart = state.selection.$from.posAtIndex(0);
+			const indexBefore = state.selection.from - 1;
+			if (indexBefore >= parentStart) {
+				const beforeSelection = state.doc.resolve(indexBefore);
+				const marksJustBeforeSelection = beforeSelection.marks();
+				marks = marks.concat(marksJustBeforeSelection);
+			}
+
+			return marks;
+		};
+
+		const linkMark = getMarksNearSelection().find(mark => mark.type === schema.marks.link);
+		const show = state.selection.empty && linkMark;
+
+		if (!show) {
+			this.tooltip_.classList.add('-hidden');
+			this.tooltipContent_.onclick = () => {};
+		} else {
+			this.tooltipContent_.textContent = linkMark.attrs.href;
+			this.tooltipContent_.onclick = () => {
+				const href = linkMark.attrs.href;
+				if (href.startsWith('#')) {
+					const command = jumpToHash(href.substring(1), schema.nodes.heading);
+					command(view.state, view.dispatch, view);
+				} else {
+					this.onEditorEvent_({
+						kind: EditorEventType.FollowLink,
+						link: linkMark.attrs.href,
+					});
+				}
+			};
+
+			this.tooltip_.classList.remove('-hidden');
+			const position = view.coordsAtPos(state.selection.from);
+			// Fall back to document.body to support testing environments:
+			const parentBox = (this.tooltip_.offsetParent ?? document.body).getBoundingClientRect();
+			const tooltipBox = this.tooltip_.getBoundingClientRect();
+			this.tooltip_.style.top = `${position.top - parentBox.top + tooltipBox.height}px`;
+			this.tooltip_.style.left = `${Math.max(position.left - parentBox.left - tooltipBox.width / 2, 0)}px`;
+		}
+	}
+
+	public destroy() {
+		this.tooltip_.remove();
+	}
+}
+
+const linkTooltipPlugin = new Plugin({
+	view: view => new LinkTooltip(view),
+});
+
+export default linkTooltipPlugin;
diff --git a/packages/editor/ProseMirror/plugins/listPlugin.ts b/packages/editor/ProseMirror/plugins/listPlugin.ts
new file mode 100644
index 0000000000..7948218e58
--- /dev/null
+++ b/packages/editor/ProseMirror/plugins/listPlugin.ts
@@ -0,0 +1,148 @@
+import { Plugin } from 'prosemirror-state';
+import { Node, NodeSpec } from 'prosemirror-model';
+import { EditorView, NodeView } from 'prosemirror-view';
+import trimEmptyParagraphs from '../utils/trimEmptyParagraphs';
+
+// See the fold example for more information about
+// writing similar ProseMirror plugins:
+// https://prosemirror.net/examples/fold/
+
+const listGroup = 'block';
+
+// Note: Use snake_case for schema keys for compatibility with certain default ProseMirror code
+// (e.g. default input rules from prosemirror-example-setup).
+export const nodeSpecs = {
+	task_list: {
+		content: 'task_list_item+',
+		group: listGroup,
+		parseDOM: [{ tag: 'ul[data-is-checklist]' }],
+		toDOM: () => ['ul', { class: 'task-list', 'data-is-checklist': '1' }, 0],
+	},
+	ordered_list: {
+		content: 'list_item+',
+		group: listGroup,
+
+		// Match attributes from https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.ts
+		attrs: { order: { default: 1, validate: 'number' } },
+		parseDOM: [
+			{
+				tag: 'ol',
+				getAttrs: node => {
+					const start = node.hasAttribute('start') ? Number(node.getAttribute('start')) : 1;
+					return {
+						order: isFinite(start) ? start : 1,
+					};
+				},
+			},
+		],
+		toDOM: node => (
+			node.attrs.order === 1 ? ['ol', 0] : ['ol', { start: node.attrs.order }, 0]
+		),
+	},
+	bullet_list: {
+		content: 'list_item+',
+		group: listGroup,
+
+		parseDOM: [{ tag: 'ul:not([data-is-checklist])' }],
+		toDOM: () => ['ul', 0],
+	},
+	list_item: {
+		content: 'paragraph block*',
+		defining: true,
+		draggable: true,
+
+		parseDOM: [{ tag: 'li:not(.md-checkbox)' }],
+		toDOM: () => ['li', 0],
+	},
+	task_list_item: {
+		content: 'paragraph block*',
+		attrs: {
+			checked: { default: false, validate: 'boolean' },
+		},
+		defining: true,
+		draggable: true,
+
+		parseDOM: [
+			{
+				tag: 'li.md-checkbox',
+				getAttrs(node) {
+					const checkbox = node.querySelector<HTMLInputElement>('input[type=checkbox]');
+					return { checked: checkbox?.checked ?? false };
+				},
+				contentElement(node) {
+					const result = node.cloneNode(true) as HTMLElement;
+
+					// Empty paragraphs can cause rendering issues.
+					trimEmptyParagraphs(result);
+
+					const firstChild = result.children[0];
+					if (firstChild?.matches('div.checkbox-wrapper')) {
+						firstChild.remove();
+
+						// Trim empty paragraphs without the first child.
+						// Without this, multiple empty paragraphs can accumulate between
+						// the list item and its sub-lists.
+						trimEmptyParagraphs(result);
+
+						result.prepend(...firstChild.childNodes);
+					}
+					return result;
+				},
+			},
+		],
+		toDOM: (node) => {
+			return [
+				'li', { class: 'md-checkbox' },
+				['input', { type: 'checkbox', checked: node.attrs.checked ? true : undefined }],
+				['div', 0],
+			];
+		},
+	},
+} satisfies Record<string, NodeSpec>;
+
+type GetPosition = ()=> number;
+
+let idCounter = 0;
+class TaskListItemView implements NodeView {
+	public readonly dom: HTMLElement;
+	public contentDOM: HTMLElement;
+	private checkbox_: HTMLInputElement;
+
+	public constructor(node: Node, view: EditorView, getPosition: GetPosition) {
+		this.dom = document.createElement('li');
+		this.dom.id = `${(idCounter++)}-checkbox-container`;
+		this.dom.classList.add('checklist-item', 'md-checkbox', '-flex');
+
+		this.checkbox_ = document.createElement('input');
+		this.checkbox_.type = 'checkbox';
+		this.checkbox_.checked = node.attrs.checked;
+		// Don't use a <label> element as a container since clicking on the container
+		// should move focus to the task item, not focus the checkbox.
+		// Instead use aria-labelledby for accessibility:
+		this.checkbox_.setAttribute('aria-labelledby', this.dom.id);
+
+		this.contentDOM = document.createElement('div');
+		this.contentDOM.classList.add('content');
+
+		this.dom.appendChild(this.checkbox_);
+		this.dom.appendChild(this.contentDOM);
+
+		this.checkbox_.onchange = () => {
+			if (node.attrs.checked !== this.checkbox_.checked) {
+				view.dispatch(view.state.tr.setNodeAttribute(
+					getPosition(), 'checked', this.checkbox_.checked,
+				));
+			}
+		};
+	}
+}
+
+const listPlugin = new Plugin({
+	props: {
+		nodeViews: {
+			task_list_item: (node, view, getPos) => new TaskListItemView(node, view, getPos),
+		},
+	},
+});
+
+export default listPlugin;
diff --git a/packages/editor/ProseMirror/plugins/originalMarkupPlugin.ts b/packages/editor/ProseMirror/plugins/originalMarkupPlugin.ts
new file mode 100644
index 0000000000..2f82e0e225
--- /dev/null
+++ b/packages/editor/ProseMirror/plugins/originalMarkupPlugin.ts
@@ -0,0 +1,146 @@
+import { EditorState, Plugin } from 'prosemirror-state';
+import { Node as ProseMirrorNode, DOMSerializer } from 'prosemirror-model';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import schema from '../schema';
+import changedDescendants from '../vendor/changedDescendants';
+
+// Creates a custom serializer that can preserve empty paragraphs.
+// See https://discuss.prosemirror.net/t/how-to-preserve-br-tags-in-empty-paragraphs/2051/8.
+const createSerializer = () => {
+	const baseSerializer = DOMSerializer.fromSchema(schema);
+	return new DOMSerializer({
+		...baseSerializer.nodes,
+
+		// When converting back to markup, restore the <style> blocks.
+		// TODO: This is currently only effective for short, simple CSS blocks.
+		// @joplin/turndown will need to be adjusted to properly support preserving CSS:
+		style_placeholder: (node) => {
+			const result = document.createElement('style');
+			result.appendChild(document.createTextNode(node.attrs.content));
+			result.classList.add('jop-noMdConv');
+			return result;
+		},
+
+		// Prevent empty paragraphs from being removed by padding them with &nbsp;s:
+		paragraph: (node) => {
+			if (node.content.size === 0) {
+				return ['p', '&nbsp;'];
+			} else {
+				return ['p', 0];
+			}
+		},
+
+		// Preserve repeated spaces -- ProseMirror visually preserves spaces with "white-space: break-spaces".
+		text: (node) => {
+			if (node.marks.some(mark => mark.type.spec.code)) {
+				// Within code, &nbsp;s render as text, not nonbreaking spaces.
+				// Avoid including them:
+				return node.text;
+			}
+
+			// Replace repeated spaces with a space followed by a nonbreaking space:
+			return node.text.replace(/ {2}/g, ' &nbsp;');
+		},
+
+		// However, &nbsp;s don't render as nonbreaking spaces in code blocks.
+		// Create a custom output specification to avoid using the default text output:
+		pre_block: (node) => {
+			const result = document.createElement('pre');
+			const content = document.createElement('code');
+			content.appendChild(document.createTextNode(node.textContent));
+			result.appendChild(content);
+			return { dom: result };
+		},
+	}, baseSerializer.marks);
+};
+
+const originalMarkupPlugin = (htmlToMarkup: (html: Node)=> string) => {
+	const proseMirrorSerializer = createSerializer();
+
+	const makeDecoration = (position: number, node: ProseMirrorNode, markup: string) => {
+		return Decoration.node(
+			position,
+			position + node.nodeSize,
+			{ 'data-markup': markup }, // For debugging
+			{ markup },
+		);
+	};
+
+	const addMissingMarkup = (doc: ProseMirrorNode, decorations: DecorationSet) => {
+		doc.content.nodesBetween(0, doc.content.size, (node: ProseMirrorNode, position: number) => {
+			// All markup decorations that cover the start of the node and the next character
+			const possibleDecorations = decorations.find(position, position + 1);
+			// Only consider the decorations that match the node's boundaries exactly.
+			const matchingDecorations = possibleDecorations.filter(decoration => {
+				return decoration.from === position && decoration.to === position + node.nodeSize;
+			});
+
+			if (matchingDecorations.length === 0) {
+				const markup = htmlToMarkup(proseMirrorSerializer.serializeNode(node));
+				decorations = decorations.add(doc, [makeDecoration(position, node, markup)]);
+			}
+
+			// Only visit toplevel nodes
+			return false;
+		});
+
+		return decorations;
+	};
+
+	const plugin = new Plugin<DecorationSet>({
+		state: {
+			init: (_config, state) => {
+				let decorations = DecorationSet.empty;
+				state.doc.nodesBetween(0, state.doc.content.size, (node, position) => {
+					const originalMarkup = node.attrs.originalMarkup;
+					if (originalMarkup?.trim()) {
+						decorations = decorations.add(state.doc, [makeDecoration(position, node, node.attrs.originalMarkup)]);
+					}
+
+					return false;
+				});
+				return addMissingMarkup(state.doc, decorations);
+			},
+			apply: (tr, value, oldState, newState) => {
+				value = value.map(tr.mapping, tr.doc);
+
+				// Remove all outdated values
+				changedDescendants(oldState.doc, newState.doc, 0, (node, pos) => {
+					const oldDecorations = value.find(pos, pos + node.nodeSize);
+					value = value.remove(oldDecorations);
+				});
+
+				value = addMissingMarkup(tr.doc, value);
+
+				return value;
+			},
+		},
+		props: {
+			decorations(state) { return this.getState(state); },
+		},
+	});
+
+	return {
+		plugin,
+		stateToMarkup: (state: EditorState) => {
+			const decorations = plugin.getState(state).find();
+			// Sort the decorations in increasing order -- the documentation does not guarantee
+			// that the decorations will be returned by .find() in any particular order.
+			decorations.sort((a, b) => a.from - b.from);
+
+			const result = [];
+			for (const decoration of decorations) {
+				const markup: string = decoration.spec.markup;
+				result.push(markup);
+
+				if (!markup.endsWith('\n\n')) {
+					result.push('\n\n');
+				}
+			}
+
+			return result.join('');
+		},
+	};
+};
+
+export default originalMarkupPlugin;
diff --git a/packages/editor/ProseMirror/plugins/resourcePlaceholderPlugin.ts b/packages/editor/ProseMirror/plugins/resourcePlaceholderPlugin.ts
new file mode 100644
index 0000000000..4986a1cc05
--- /dev/null
+++ b/packages/editor/ProseMirror/plugins/resourcePlaceholderPlugin.ts
@@ -0,0 +1,211 @@
+import { Plugin } from 'prosemirror-state';
+import { AttributeSpec, Node, NodeSpec } from 'prosemirror-model';
+import { Decoration, DecorationSet, EditorView, NodeView } from 'prosemirror-view';
+import changedDescendants from '../vendor/changedDescendants';
+
+// See the fold example for more information about
+// writing similar ProseMirror plugins:
+// https://prosemirror.net/examples/fold/
+
+type NodeAttrs = Readonly<{
+	placeholderSrc: string;
+	placeholderAlt: string;
+	itemId: string;
+	alt: string;
+	title: string;
+	isImage: boolean;
+	notDownloaded: boolean;
+}>;
+
+const attrsSpec = {
+	placeholderSrc: { default: '', validate: 'string' },
+	placeholderAlt: { default: '', validate: 'string' },
+
+	itemId: { validate: 'string' },
+	alt: { default: '', validate: 'string' },
+	title: { default: '', validate: 'string' },
+	isImage: { validate: 'boolean' },
+	notDownloaded: { validate: 'boolean' },
+} satisfies Record<keyof NodeAttrs, AttributeSpec>;
+
+const placeholderSpec: NodeSpec = {
+	group: 'inline',
+	inline: true,
+	attrs: attrsSpec,
+	parseDOM: [
+		{
+			tag: 'span[data-resource-id].not-loaded-resource',
+			getAttrs: (node): NodeAttrs => {
+				return {
+					itemId: node.getAttribute('data-resource-id'),
+					alt: node.getAttribute('data-original-alt'),
+					title: node.getAttribute('data-original-title'),
+					isImage: node.classList.contains('not-loaded-image-resource'),
+					notDownloaded: node.classList.contains('resource-status-notDownloaded'),
+					placeholderSrc: node.querySelector('img')?.src,
+					placeholderAlt: node.querySelector('img')?.alt,
+				};
+			},
+		},
+	],
+	toDOM: (node) => [
+		'span',
+		{
+			'data-resource-id': node.attrs.itemId,
+			'data-original-alt': node.attrs.alt,
+			'data-original-title': node.attrs.title,
+			class: [
+				'not-loaded-resource',
+				node.attrs.isImage ? 'not-loaded-image-resource' : null,
+				node.attrs.notDownloaded ? 'resource-status-notDownloaded' : null,
+			].filter(item => !!item).join(' '),
+		},
+		['img', { src: node.attrs.placeholderSrc, alt: node.attrs.placeholderAlt }],
+	],
+};
+
+export const nodeSpecs = {
+	resourcePlaceholder: placeholderSpec,
+};
+
+class ResourcePlaceholderView implements NodeView {
+	public readonly dom: HTMLElement;
+	private resourceId_: string;
+
+	public constructor(node: Node, decorations: readonly Decoration[]) {
+		this.resourceId_ = node.attrs.itemId;
+		this.dom = this.createDom_(node, decorations);
+	}
+
+	private createDom_(node: Node, decorations: readonly Decoration[]) {
+		const createDom = (imageSrc: string, imageAlt: string, loaded: boolean) => {
+			const image = document.createElement('img');
+			image.src = imageSrc;
+			image.alt = imageAlt;
+
+			let dom;
+			if (!loaded) {
+				dom = document.createElement('span');
+				dom.classList.add('not-loaded-resource');
+				dom.appendChild(image);
+			} else {
+				dom = image;
+				dom.classList.add('late-loaded-resource');
+			}
+			// For testing
+			dom.setAttribute('data-resource-id', this.resourceId_);
+			return dom;
+		};
+
+		const attrs = node.attrs as NodeAttrs;
+		let imageSrc = attrs.placeholderSrc;
+		let imageAlt = attrs.placeholderAlt;
+		let loaded = false;
+
+		for (const decoration of decorations) {
+			if (decoration.spec.resourceId === this.resourceId_) {
+				imageSrc = (decoration.spec as PluginMeta).newSrc;
+				imageAlt = attrs.alt;
+				loaded = true;
+			}
+		}
+
+		return createDom(imageSrc, imageAlt, loaded);
+	}
+
+	public update(node: Node, decorations: readonly Decoration[]) {
+		if (node.type.spec !== placeholderSpec) return false;
+
+		for (const decoration of decorations) {
+			if (decoration.spec.resourceId === this.resourceId_) {
+				this.dom.replaceWith(this.createDom_(node, decorations));
+			}
+		}
+		return true;
+	}
+}
+
+interface PluginMeta {
+	resourceId: string;
+	newSrc: string;
+}
+export const onResourceDownloaded = (view: EditorView, resourceId: string, newSrc: string) => {
+	const meta: PluginMeta = {
+		resourceId,
+		newSrc,
+	};
+	view.dispatch(
+		view.state.tr.setMeta(resourcePlaceholderPlugin, meta),
+	);
+};
+
+interface PluginState {
+	decorations: DecorationSet;
+	idToSrc: Record<string, string>;
+}
+
+const resourcePlaceholderPlugin: Plugin<PluginState> = new Plugin({
+	state: {
+		init: (): PluginState => ({
+			decorations: DecorationSet.empty,
+			idToSrc: Object.create(null),
+		}),
+		apply: (tr, oldValue, oldState, newState) => {
+			let decorations = oldValue.decorations.map(tr.mapping, tr.doc);
+			let idToSrc = oldValue.idToSrc;
+
+			const tryAddDecoration = (node: Node, pos: number) => {
+				if (node.type.spec === placeholderSpec && decorations.find(pos, pos + node.nodeSize).length === 0) {
+					const attrs = node.attrs as NodeAttrs;
+					const itemId = attrs.itemId;
+
+					if (Object.hasOwnProperty.call(idToSrc, itemId)) {
+						const spec: PluginMeta = {
+							newSrc: idToSrc[attrs.itemId],
+							resourceId: attrs.itemId,
+						};
+
+						decorations = decorations.add(tr.doc, [
+							Decoration.node(pos, pos + node.nodeSize, {}, spec),
+						]);
+					}
+				}
+			};
+
+			const meta: PluginMeta|undefined = tr.getMeta(resourcePlaceholderPlugin);
+			if (meta) {
+				const { resourceId, newSrc } = meta;
+				if (!resourceId || !newSrc) {
+					throw new Error('Invalid .setMeta for resourcePlaceholderPlugin');
+				}
+
+				idToSrc = { ...idToSrc, [resourceId]: newSrc };
+
+				tr.doc.descendants((node, pos) => {
+					tryAddDecoration(node, pos);
+				});
+			}
+
+			changedDescendants(oldState.doc, newState.doc, 0, (node, pos) => {
+				tryAddDecoration(node, pos);
+			});
+
+			return {
+				decorations,
+				idToSrc,
+			};
+		},
+	},
+	props: {
+		nodeViews: {
+			resourcePlaceholder: (node, _view, _getPos, decorations) => {
+				return new ResourcePlaceholderView(node, decorations);
+			},
+		},
+		decorations(state) {
+			return this.getState(state).decorations;
+		},
+	},
+});
+
+export default resourcePlaceholderPlugin;
diff --git a/packages/editor/ProseMirror/plugins/searchPlugin.ts b/packages/editor/ProseMirror/plugins/searchPlugin.ts
new file mode 100644
index 0000000000..87137e774d
--- /dev/null
+++ b/packages/editor/ProseMirror/plugins/searchPlugin.ts
@@ -0,0 +1,99 @@
+import { getSearchState, search, SearchQuery, setSearchState } from 'prosemirror-search';
+import { SearchState } from '../../types';
+import { Plugin, EditorState, Command } from 'prosemirror-state';
+import { EditorEvent, EditorEventType } from '../../events';
+
+const visiblePlugin = new Plugin({
+	state: {
+		init: () => false,
+		apply: (tr, value) => {
+			const visibleMeta = tr.getMeta(visiblePlugin);
+			if (visibleMeta) {
+				return visibleMeta.visible;
+			}
+			return value;
+		},
+	},
+});
+
+export const getSearchVisible = (state: EditorState) => {
+	return visiblePlugin.getState(state);
+};
+export const setSearchVisible = (visible: boolean): Command => (state, dispatch) => {
+	if (getSearchVisible(state) === visible) {
+		return false;
+	}
+	if (dispatch) {
+		dispatch(state.tr.setMeta(visiblePlugin, { visible }));
+	}
+	return true;
+};
+
+const searchExtension = (onEditorEvent: (event: EditorEvent)=> void) => {
+
+	let lastState: SearchState|null = null;
+	const checkSearchStateChange = (state: EditorState) => {
+		const currentQuery = getSearchState(state).query;
+		const currentVisible = getSearchVisible(state);
+
+		const currentState: SearchState = {
+			useRegex: currentQuery.regexp,
+			caseSensitive: currentQuery.caseSensitive,
+			searchText: currentQuery.search,
+			replaceText: currentQuery.replace,
+			dialogVisible: currentVisible,
+		};
+
+		let changed = false;
+		for (const entryName of Object.keys(currentState)) {
+			const entryKey = entryName as keyof SearchState;
+			if (!lastState || currentState[entryKey] !== lastState[entryKey]) {
+				changed = true;
+				break;
+			}
+		}
+
+		if (changed) {
+			lastState = currentState;
+			onEditorEvent({
+				kind: EditorEventType.UpdateSearchDialog,
+				searchState: currentState,
+			});
+		}
+	};
+
+	const checkStateChangePlugin = new Plugin<null>({
+		state: {
+			init: ()=>null,
+			apply: (_transaction, oldValue, _oldState, state) => {
+				checkSearchStateChange(state);
+				return oldValue;
+			},
+		},
+	});
+
+	return {
+		plugin: [
+			search({}),
+			visiblePlugin,
+			checkStateChangePlugin,
+		],
+		updateState: (editorState: EditorState, searchState: SearchState) => {
+			let transaction = editorState.tr;
+			setSearchVisible(searchState.dialogVisible)(editorState, (newTransaction) => {
+				transaction = newTransaction;
+			});
+			transaction = setSearchState(transaction, new SearchQuery({
+				search: searchState.searchText,
+				caseSensitive: searchState.caseSensitive,
+				regexp: searchState.useRegex,
+				replace: searchState.replaceText,
+			}));
+			lastState = { ...searchState };
+
+			return transaction;
+		},
+	};
+};
+
+export default searchExtension;
diff --git a/packages/editor/ProseMirror/schema.ts b/packages/editor/ProseMirror/schema.ts
new file mode 100644
index 0000000000..cdbe5b8fa9
--- /dev/null
+++ b/packages/editor/ProseMirror/schema.ts
@@ -0,0 +1,270 @@
+import { AttributeSpec, DOMOutputSpec, MarkSpec, NodeSpec, Schema } from 'prosemirror-model';
+import { nodeSpecs as joplinEditableNodes } from './plugins/joplinEditablePlugin';
+import { tableNodes } from 'prosemirror-tables';
+import { nodeSpecs as listNodes } from './plugins/listPlugin';
+import { nodeSpecs as resourcePlaceholderNodes } from './plugins/resourcePlaceholderPlugin';
+
+// For reference, see:
+// - https://prosemirror.net/docs/guide/#schema
+// - https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.ts
+
+const domOutputSpecs = {
+	paragraph: ['p', 0],
+	strong: ['strong', 0],
+	code: ['code', { class: 'inline-code', spellcheck: false }, 0],
+	emphasis: ['em', 0],
+	pre: ['pre', { class: 'code-block' }, ['code', 0]],
+	br: ['br'],
+	orderedList: ['ol', 0],
+	unorderedList: ['ul', 0],
+	listItem: ['li', 0],
+	blockQuote: ['blockquote', 0],
+	hr: ['hr'],
+} satisfies Record<string, DOMOutputSpec>;
+
+type AttributeSpecs = Record<string, AttributeSpec>;
+
+// Default attributes that should be valid for all toplevel blocks:
+const defaultToplevelAttrs: AttributeSpecs = {
+	// Stores the original markdown used to generate a node.
+	originalMarkup: { default: '', validate: 'string' },
+};
+const getDefaultToplevelAttrs = (node: Element) => ({
+	originalMarkup: node.getAttribute('data-original-markup'),
+});
+
+const addDefaultToplevelAttributes = <Nodes extends Record<string, NodeSpec>> (nodes: Nodes) => {
+	const result: Partial<Nodes> = {};
+	for (const key in nodes) {
+		if (nodes[key].group === 'block') {
+			result[key] = {
+				...nodes[key],
+				attrs: {
+					...defaultToplevelAttrs,
+					...nodes[key].attrs,
+				},
+				parseDOM: nodes[key].parseDOM?.map(rule => {
+					if (!rule.tag) return rule;
+
+					return {
+						...rule,
+						getAttrs: (node) => {
+							const attrs = rule.getAttrs?.(node);
+							if (attrs === false) return attrs;
+
+							return {
+								...getDefaultToplevelAttrs(node),
+								...(attrs ?? rule.attrs ?? {}),
+							};
+						},
+					};
+				}),
+			};
+		} else {
+			result[key] = nodes[key];
+		}
+	}
+	return result as Nodes;
+};
+
+const nodes = addDefaultToplevelAttributes({
+	doc: { content: 'block+' },
+	paragraph: {
+		group: 'block',
+		content: '(inline|hard_break)*',
+		parseDOM: [{ tag: 'p' }],
+		toDOM: () => domOutputSpecs.paragraph,
+	},
+	heading: { // See prosemirror-schema-basic's `heading`
+		attrs: {
+			level: { default: 2, validate: 'number' },
+		},
+		group: 'block',
+		content: 'inline*',
+		parseDOM: [1, 2, 3, 4, 5, 6].map(level => ({
+			tag: `h${level}`, getAttrs: node => ({ ...getDefaultToplevelAttrs(node), level }),
+		})),
+		toDOM: (node) => [`h${node.attrs.level}`, 0],
+	},
+	pre_block: {
+		content: 'text*',
+		group: 'block',
+		marks: '',
+		code: true,
+		defining: true, // Preserve the node during replacement operations
+		parseDOM: [{ tag: 'pre' }],
+		toDOM: () => domOutputSpecs.pre,
+	},
+	blockquote: {
+		content: 'block+',
+		group: 'block',
+		parseDOM: [{ tag: 'blockquote' }],
+		toDOM: () => domOutputSpecs.blockQuote,
+	},
+	horizontal_rule: {
+		group: 'block',
+		parseDOM: [{ tag: 'hr' }],
+		toDOM: () => domOutputSpecs.hr,
+	},
+	style_placeholder: {
+		group: 'block',
+		parseDOM: [
+			{
+				tag: 'style',
+				getAttrs: node => ({ content: node.textContent }),
+			},
+			{
+				tag: 'div.joplin-style-placeholder',
+				getAttrs: node => ({ content: node.getAttribute('data-style-content') }),
+			},
+		],
+		attrs: {
+			content: { validate: 'string' },
+		},
+		toDOM: (node) => {
+			const result = document.createElement('div');
+			result.classList.add('joplin-style-placeholder');
+			result.setAttribute('data-style-content', node.attrs.content);
+			result.textContent = 'CSS';
+			return result;
+		},
+	},
+	...resourcePlaceholderNodes,
+	...listNodes,
+	...joplinEditableNodes,
+	...tableNodes({
+		tableGroup: 'block',
+		cellContent: 'inline*',
+		cellAttributes: {},
+	}),
+	// Override the default `table` node to include the default toplevel attributes
+	table: {
+		content: 'table_row+',
+		tableRole: 'table',
+		isolating: true,
+		group: 'block',
+		parseDOM: [{ tag: 'table' }],
+		toDOM: () => ['table', ['tbody', 0]],
+	},
+
+	text: {
+		group: 'inline',
+	},
+	image: {
+		group: 'inline',
+		inline: true,
+		draggable: true,
+		attrs: {
+			src: { default: '', validate: 'string' },
+			alt: { default: '', validate: 'string' },
+			title: { default: '', validate: 'string' },
+			fromMd: { default: false, validate: 'boolean' },
+			resourceId: { default: null as string|null, validate: 'string|null' },
+		},
+		parseDOM: [
+			{
+				tag: 'img[src]',
+				getAttrs: node => ({
+					src: node.getAttribute('src'),
+					alt: node.getAttribute('alt'),
+					title: node.getAttribute('title'),
+					fromMd: node.hasAttribute('data-from-md'),
+					resourceId: node.getAttribute('data-resource-id') || null,
+				}),
+			},
+		],
+		toDOM: node => {
+			const { src, alt, title, fromMd, resourceId } = node.attrs;
+			const outputAttrs: Record<string, unknown> = { src, alt, title };
+
+			if (fromMd) {
+				outputAttrs['data-from-md'] = true;
+			}
+			if (resourceId) {
+				outputAttrs['data-resource-id'] = resourceId;
+			}
+
+			return [
+				'img',
+				outputAttrs,
+			];
+		},
+	},
+	hard_break: {
+		inline: true,
+		group: 'inlineBreak',
+		selectable: false,
+		parseDOM: [{ tag: 'br' }],
+		toDOM: () => domOutputSpecs.br,
+	},
+});
+
+const marks = {
+	strong: {
+		parseDOM: [{ tag: 'strong' }, { tag: 'b' }],
+		toDOM: () => domOutputSpecs.strong,
+	},
+	emphasis: {
+		parseDOM: [{ tag: 'em' }],
+		toDOM: () => domOutputSpecs.emphasis,
+	},
+	code: {
+		parseDOM: [{ tag: 'code' }],
+		code: true,
+		toDOM: () => domOutputSpecs.code,
+		excludes: '_',
+	},
+	color: {
+		inclusive: false,
+		parseDOM: [{
+			style: 'color',
+			getAttrs: (styleValue: string) => {
+				return { color: styleValue };
+			},
+		}],
+		attrs: {
+			color: { validate: 'string' },
+		},
+		toDOM: node => {
+			const result = document.createElement('span');
+			result.style.color = node.attrs.color;
+			return result;
+		},
+	},
+	link: {
+		attrs: {
+			href: { validate: 'string' },
+			title: { default: '', validate: 'string' },
+			dataResourceId: { default: undefined as string|undefined, validate: 'string|undefined' },
+		},
+		inclusive: false,
+		parseDOM: [{
+			tag: 'a[href]',
+			getAttrs: node => {
+				const resourceId = node.getAttribute('data-resource-id');
+				const href = node.getAttribute('href');
+				const isResourceLink = resourceId && href === '#';
+
+				return {
+					href: isResourceLink ? `:/${resourceId}` : href,
+					title: node.getAttribute('title'),
+					dataResourceId: node.getAttribute('data-resource-id'),
+				};
+			},
+		}],
+		toDOM: node => [
+			'a',
+			{ href: node.attrs.href, title: node.attrs.title, 'data-resource-id': node.attrs.dataResourceId },
+		],
+	},
+} satisfies Record<string, MarkSpec>;
+
+type NodeKeys = keyof typeof nodes;
+type MarkKeys = keyof typeof marks;
+
+const schema = new Schema<NodeKeys, MarkKeys>({
+	marks,
+	nodes,
+});
+
+export default schema;
diff --git a/packages/editor/ProseMirror/styles.ts b/packages/editor/ProseMirror/styles.ts
new file mode 100644
index 0000000000..16729c62ad
--- /dev/null
+++ b/packages/editor/ProseMirror/styles.ts
@@ -0,0 +1,8 @@
+
+import 'prosemirror-view/style/prosemirror.css';
+import 'prosemirror-search/style/search.css';
+import './styles/joplin-editable.css';
+import './styles/prosemirror-editor.css';
+import './styles/table.css';
+import './styles/checklist-item.css';
+import './styles/link-tooltip.css';
diff --git a/packages/editor/ProseMirror/styles/checklist-item.css b/packages/editor/ProseMirror/styles/checklist-item.css
new file mode 100644
index 0000000000..69ab3c657a
--- /dev/null
+++ b/packages/editor/ProseMirror/styles/checklist-item.css
@@ -0,0 +1,10 @@
+
+.checklist-item.-flex {
+	display: flex;
+	flex-direction: row;
+	align-items: baseline;
+}
+
+.checklist-item > .content {
+	flex-grow: 1;
+}
diff --git a/packages/editor/ProseMirror/styles/joplin-editable.css b/packages/editor/ProseMirror/styles/joplin-editable.css
new file mode 100644
index 0000000000..98505f4333
--- /dev/null
+++ b/packages/editor/ProseMirror/styles/joplin-editable.css
@@ -0,0 +1,4 @@
+
+.joplin-editable.-selected {
+	outline: 4px solid var(--joplin-text-selection-color);
+}
\ No newline at end of file
diff --git a/packages/editor/ProseMirror/styles/link-tooltip.css b/packages/editor/ProseMirror/styles/link-tooltip.css
new file mode 100644
index 0000000000..b8b90d8eb5
--- /dev/null
+++ b/packages/editor/ProseMirror/styles/link-tooltip.css
@@ -0,0 +1,20 @@
+
+.link-tooltip.-hidden {
+	display: none;
+}
+
+.link-tooltip {
+	position: absolute;
+	border-radius: 4px;
+	padding: 3px;
+	background-color: var(--joplin-background-color3);
+	color: var(--joplin-color3);
+}
+
+.link-tooltip > .link {
+	text-decoration: underline;
+	cursor: pointer;
+	color: var(--joplin-url-color);
+	background-color: transparent;
+	border: none;
+}
diff --git a/packages/editor/ProseMirror/styles/prosemirror-editor.css b/packages/editor/ProseMirror/styles/prosemirror-editor.css
new file mode 100644
index 0000000000..8fd9bdb216
--- /dev/null
+++ b/packages/editor/ProseMirror/styles/prosemirror-editor.css
@@ -0,0 +1,6 @@
+
+.prosemirror-editor {
+	outline: none;
+	padding-left: 15px;
+	padding-right: 15px;
+}
diff --git a/packages/editor/ProseMirror/styles/table.css b/packages/editor/ProseMirror/styles/table.css
new file mode 100644
index 0000000000..232aedbf7b
--- /dev/null
+++ b/packages/editor/ProseMirror/styles/table.css
@@ -0,0 +1,4 @@
+
+table .selectedCell {
+	outline: 2px solid var(--joplin-text-selection-color);
+}
diff --git a/packages/editor/ProseMirror/testing/createTestEditor.ts b/packages/editor/ProseMirror/testing/createTestEditor.ts
new file mode 100644
index 0000000000..a841fef325
--- /dev/null
+++ b/packages/editor/ProseMirror/testing/createTestEditor.ts
@@ -0,0 +1,26 @@
+import { DOMParser as ProseMirrorDomParser } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import schema from '../schema';
+import { EditorState, Plugin } from 'prosemirror-state';
+
+type PluginList = Plugin[]|(Plugin|Plugin[])[];
+
+interface Options {
+	parent?: HTMLElement;
+	html: string;
+	plugins?: PluginList;
+}
+
+const createTestEditor = ({ html, parent = null, plugins = [] }: Options) => {
+	const htmlDocument = new DOMParser().parseFromString(html, 'text/html');
+	const proseMirrorDocument = ProseMirrorDomParser.fromSchema(schema).parse(htmlDocument);
+	return new EditorView(parent, {
+		state: EditorState.create({
+			doc: proseMirrorDocument,
+			plugins: plugins.flat(),
+			schema,
+		}),
+	});
+};
+
+export default createTestEditor;
diff --git a/packages/editor/ProseMirror/types.ts b/packages/editor/ProseMirror/types.ts
new file mode 100644
index 0000000000..c9c0730aba
--- /dev/null
+++ b/packages/editor/ProseMirror/types.ts
@@ -0,0 +1,9 @@
+import { RenderResult } from '../../renderer/types';
+
+export type MarkupToHtml = (markup: string)=> Promise<RenderResult>;
+export type HtmlToMarkup = (html: Node|DocumentFragment)=> string;
+
+export interface RendererControl {
+	renderMarkupToHtml: MarkupToHtml;
+	renderHtmlToMarkup: HtmlToMarkup;
+}
diff --git a/packages/editor/ProseMirror/utils/UndoStackSynchronizer.ts b/packages/editor/ProseMirror/utils/UndoStackSynchronizer.ts
new file mode 100644
index 0000000000..c686386fe9
--- /dev/null
+++ b/packages/editor/ProseMirror/utils/UndoStackSynchronizer.ts
@@ -0,0 +1,38 @@
+import { EditorView } from 'prosemirror-view';
+import { EditorEvent, EditorEventType } from '../../events';
+import { redoDepth, undoDepth } from 'prosemirror-history';
+
+// Syncs the undo stack depth with the main Joplin application
+export default class UndoStackSynchronizer {
+	private lastUndoDepth_ = 0;
+	private lastRedoDepth_ = 0;
+	private schedulePostUndoRedoDepthChangeId_: ReturnType<typeof setTimeout>|null = null;
+
+	public constructor(private dispatchEditorEvent_: (event: EditorEvent)=> void) {}
+
+	public schedulePostUndoRedoDepthChange(editor: EditorView, doItNow = false) {
+		if (this.schedulePostUndoRedoDepthChangeId_ !== null) {
+			if (doItNow) {
+				clearTimeout(this.schedulePostUndoRedoDepthChangeId_);
+			} else {
+				return;
+			}
+		}
+
+		this.schedulePostUndoRedoDepthChangeId_ = setTimeout(() => {
+			this.schedulePostUndoRedoDepthChangeId_ = null;
+			const newUndoDepth = undoDepth(editor.state);
+			const newRedoDepth = redoDepth(editor.state);
+
+			if (newUndoDepth !== this.lastUndoDepth_ || newRedoDepth !== this.lastRedoDepth_) {
+				this.dispatchEditorEvent_({
+					kind: EditorEventType.UndoRedoDepthChange,
+					undoDepth: newUndoDepth,
+					redoDepth: newRedoDepth,
+				});
+				this.lastUndoDepth_ = newUndoDepth;
+				this.lastRedoDepth_ = newRedoDepth;
+			}
+		}, doItNow ? 0 : 1000);
+	}
+}
diff --git a/packages/editor/ProseMirror/utils/canReplaceSelectionWith.ts b/packages/editor/ProseMirror/utils/canReplaceSelectionWith.ts
new file mode 100644
index 0000000000..fe5b0d701f
--- /dev/null
+++ b/packages/editor/ProseMirror/utils/canReplaceSelectionWith.ts
@@ -0,0 +1,18 @@
+import { Mark, NodeType } from 'prosemirror-model';
+import { Selection } from 'prosemirror-state';
+
+const canReplaceSelectionWith = (selection: Selection, replaceType: NodeType, marks?: Mark[]) => {
+	const selectionFrom = selection.$from;
+	const selectionTo = selection.$to;
+	const sharedParentDepth = selectionFrom.sharedDepth(selectionTo.pos);
+	const sharedParent = selectionFrom.node(sharedParentDepth);
+
+	return sharedParent.canReplaceWith(
+		selectionFrom.index(sharedParentDepth),
+		selectionTo.index(sharedParentDepth),
+		replaceType,
+		marks,
+	);
+};
+
+export default canReplaceSelectionWith;
diff --git a/packages/editor/ProseMirror/utils/computeSelectionFormatting.ts b/packages/editor/ProseMirror/utils/computeSelectionFormatting.ts
new file mode 100644
index 0000000000..23431ddb1c
--- /dev/null
+++ b/packages/editor/ProseMirror/utils/computeSelectionFormatting.ts
@@ -0,0 +1,76 @@
+import { MarkType } from 'prosemirror-model';
+import { EditorState } from 'prosemirror-state';
+import SelectionFormatting, { MutableSelectionFormatting, defaultSelectionFormatting } from '../../SelectionFormatting';
+import schema from '../schema';
+import { EditorSettings } from '../../types';
+
+const computeSelectionFormatting = (state: EditorState, settings: EditorSettings): SelectionFormatting => {
+	const doc = state.doc;
+	const selection = state.selection;
+	const formatting: MutableSelectionFormatting = {
+		...defaultSelectionFormatting,
+		selectedText: doc.textBetween(selection.from, selection.to),
+		spellChecking: settings.spellcheckEnabled,
+	};
+
+	doc.nodesBetween(selection.from, selection.to, (node) => {
+		if (node.type === schema.nodes.heading) {
+			formatting.headerLevel = node.attrs.level;
+		}
+		if (node.type === schema.nodes.ordered_list) {
+			formatting.inOrderedList = true;
+			formatting.listLevel ++;
+		}
+		if (node.type === schema.nodes.bullet_list) {
+			formatting.inUnorderedList = true;
+			formatting.listLevel ++;
+		}
+		if (node.type === schema.nodes.task_list) {
+			formatting.inChecklist = true;
+			formatting.listLevel ++;
+		}
+		if (node.type === schema.nodes.pre_block) {
+			formatting.inCode = true;
+		}
+		const linkMark = node.marks.find(mark => mark.type === schema.marks.link);
+		if (linkMark) {
+			formatting.linkData = {
+				linkText: node.textContent,
+				linkURL: linkMark.attrs.href,
+			};
+			formatting.inLink = true;
+		}
+	});
+
+	const hasMark = (type: MarkType) => {
+		if (!type) {
+			throw new Error(`Type not found in schema: ${type}`);
+		}
+
+		// See the corresponding logic in prosemirror-example-setup:
+		// https://github.com/ProseMirror/prosemirror-example-setup/blob/8c11be6850604081dceda8f36e08d2426875e19a/src/menu.ts#L58
+		//
+		// Using state.storedMarks with an empty selection is important to accurately reflect changes made
+		// **by the user** to the current marks associated with the cursor.
+		if (selection.empty) {
+			return !!type.isInSet(state.storedMarks ?? selection.$head.marks());
+		} else {
+			return doc.rangeHasMark(selection.from, selection.to, type);
+		}
+	};
+
+	formatting.inCode ||= hasMark(schema.marks.code);
+	if (formatting.inCode) {
+		formatting.unspellCheckableRegion = true;
+	}
+	formatting.italicized = hasMark(schema.marks.emphasis);
+	formatting.bolded = hasMark(schema.marks.strong);
+
+	if (formatting.unspellCheckableRegion) {
+		formatting.spellChecking = false;
+	}
+
+	return formatting;
+};
+export default computeSelectionFormatting;
+
diff --git a/packages/editor/ProseMirror/utils/extractSelectedLinesTo.test.ts b/packages/editor/ProseMirror/utils/extractSelectedLinesTo.test.ts
new file mode 100644
index 0000000000..d09d8249a1
--- /dev/null
+++ b/packages/editor/ProseMirror/utils/extractSelectedLinesTo.test.ts
@@ -0,0 +1,94 @@
+import { TextSelection } from 'prosemirror-state';
+import createTestEditor from '../testing/createTestEditor';
+import extractSelectedLinesTo from './extractSelectedLinesTo';
+import schema from '../schema';
+
+describe('extractSelectedLinesTo', () => {
+	test('should extract a single line containing the cursor to a heading', () => {
+		const view = createTestEditor({
+			html: '<p>Line 1<br>Line 2<br>Line 3</p>',
+		});
+		view.dispatch(view.state.tr.setSelection(
+			// Put the cursor in the middle of the second line
+			TextSelection.create(view.state.doc, '<Line 1|Line'.length),
+		));
+
+		const { transaction } = extractSelectedLinesTo(
+			{ type: schema.nodes.heading, attrs: { level: 1 } },
+			view.state.tr,
+			view.state.selection,
+		);
+
+		view.dispatch(transaction);
+
+		// The section of the document containing the cursor should now be a new line
+		expect(view.state.doc.toJSON()).toMatchObject({
+			content: [
+				{
+					type: 'paragraph',
+					content: [{ type: 'text', text: 'Line 1' }],
+				},
+				{
+					type: 'heading',
+					attrs: { level: 1 },
+					content: [{ type: 'text', text: 'Line 2' }],
+				},
+				{
+					type: 'paragraph',
+					content: [{ type: 'text', text: 'Line 3' }],
+				},
+			],
+		});
+
+		// The selection should still be in the heading
+		expect(view.state.selection.$anchor.parent.toJSON()).toMatchObject({
+			type: 'heading',
+			attrs: { level: 1 },
+		});
+	});
+
+	test('should extract multiple lines in the same paragraph to a new paragraph', () => {
+		const view = createTestEditor({
+			html: '<p>Line 1<br>Line 2<br>Line 3<br>Line 4</p>',
+		});
+		view.dispatch(view.state.tr.setSelection(
+			TextSelection.create(
+				view.state.doc,
+				// ...from the middle of the second line...
+				'<Line 1|Line'.length,
+				// ...to the end of the third line
+				'<Line 1|Line 2|Line 3'.length,
+			),
+		));
+
+		const { transaction } = extractSelectedLinesTo(
+			{ type: schema.nodes.paragraph, attrs: { } },
+			view.state.tr,
+			view.state.selection,
+		);
+
+		view.dispatch(transaction);
+
+		// The section of the document containing the cursor should now be a new line
+		expect(view.state.doc.toJSON()).toMatchObject({
+			content: [
+				{
+					type: 'paragraph',
+					content: [{ type: 'text', text: 'Line 1' }],
+				},
+				{
+					type: 'paragraph',
+					content: [
+						{ type: 'text', text: 'Line 2' },
+						{ type: 'hard_break' },
+						{ type: 'text', text: 'Line 3' },
+					],
+				},
+				{
+					type: 'paragraph',
+					content: [{ type: 'text', text: 'Line 4' }],
+				},
+			],
+		});
+	});
+});
diff --git a/packages/editor/ProseMirror/utils/extractSelectedLinesTo.ts b/packages/editor/ProseMirror/utils/extractSelectedLinesTo.ts
new file mode 100644
index 0000000000..313cd6cca3
--- /dev/null
+++ b/packages/editor/ProseMirror/utils/extractSelectedLinesTo.ts
@@ -0,0 +1,118 @@
+import { Attrs, NodeType, Node } from 'prosemirror-model';
+import { TextSelection, Transaction, Selection } from 'prosemirror-state';
+import schema from '../schema';
+import { canSplit } from 'prosemirror-transform';
+
+interface ExtractToOptions {
+	type: NodeType;
+	attrs: Attrs;
+}
+
+// Pulls the lines (separated by hard breaks) that include selected text out of the
+// paragraphs that contain the selection.
+// This is useful, for example, to convert just the line that contains the cursor to a
+// block of some type, rather than the entire paragraph.
+const extractSelectedLinesTo = (extractTo: ExtractToOptions, transaction: Transaction, selection: Selection) => {
+	let firstParagraphPos = -1;
+	let lastParagraphPos = -1;
+	let foundParagraph = false;
+	transaction.doc.nodesBetween(selection.from, selection.to, (node, pos) => {
+		if (node.type === schema.nodes.paragraph) {
+			if (!foundParagraph) {
+				firstParagraphPos = pos;
+				lastParagraphPos = pos;
+			}
+
+			firstParagraphPos = Math.min(pos, firstParagraphPos);
+			lastParagraphPos = Math.max(pos, lastParagraphPos);
+			foundParagraph = true;
+		}
+	});
+
+	if (!foundParagraph) return null;
+
+	const firstParagraphFrom = firstParagraphPos;
+	const lastParagraph = transaction.doc.nodeAt(lastParagraphPos);
+	const lastParagraphTo = lastParagraphPos + lastParagraph.nodeSize;
+
+	// Find the previous and next <br/>s (or the start/end of the paragraph)
+	let fromBreakPosition = firstParagraphFrom;
+	let fromBreak: Node|null = null;
+	let toBreakPosition = lastParagraphTo;
+	let toBreak: Node|null = null;
+
+	transaction.doc.nodesBetween(firstParagraphFrom, lastParagraphTo, (node, pos) => {
+		if (node.type === schema.nodes.hard_break) {
+			if (pos + node.nodeSize <= selection.from && fromBreakPosition <= pos) {
+				fromBreakPosition = Math.max(fromBreakPosition, pos);
+				fromBreak = node;
+			} else if (pos >= selection.to && toBreakPosition >= pos) {
+				toBreakPosition = Math.min(toBreakPosition, pos);
+				toBreak = node;
+			}
+		}
+	});
+
+	// Check whether this would result in a change
+	if (!fromBreak && !toBreak) {
+		const wouldChange = (blockNode: Node) => {
+			if (blockNode.type !== extractTo.type) return true;
+
+			let changesAttributes = false;
+			for (const [key, value] of Object.entries(extractTo.attrs)) {
+				if (blockNode.attrs[key] !== value) {
+					changesAttributes = true;
+				}
+			}
+			return changesAttributes;
+		};
+
+		const candidateNodes = transaction.doc.slice(firstParagraphFrom, lastParagraphTo).content;
+		let changes = false;
+		for (const node of candidateNodes.content) {
+			if (wouldChange(node)) {
+				changes = true;
+				break;
+			}
+		}
+
+		if (!changes) {
+			return null; // the transaction would do nothing -- skip
+		}
+	}
+
+	// Helper function: Determine the final value of `position` after
+	// applying `transaction` to the document.
+	const map = (position: number, associativity?: number) => {
+		return transaction.mapping.map(position, associativity);
+	};
+
+	const replaceBreakWithSplit = (hardBreak: Node, position: number) => {
+		if (hardBreak && canSplit(transaction.doc, map(position))) {
+			transaction = transaction.split(map(position));
+			transaction = transaction.delete(
+				map(position),
+				map(position + hardBreak.nodeSize),
+			);
+		}
+	};
+
+	// Replace the starting <br/> with a split
+	replaceBreakWithSplit(fromBreak, fromBreakPosition);
+	// ...and the ending <br/> (if any)
+	replaceBreakWithSplit(toBreak, toBreakPosition);
+
+	transaction = transaction.setBlockType(map(fromBreakPosition, 1), map(toBreakPosition, -1), extractTo.type, extractTo.attrs);
+
+	// Build a custom final selection -- the default mapping grows the selection, but we want it to shrink,
+	// to avoid moving the cursor to the beginning of the content after the current item:
+	let finalSelection: Selection = TextSelection.create(transaction.doc, map(toBreakPosition, -1));
+	if (!selection.empty) {
+		finalSelection = TextSelection.create(transaction.doc, map(fromBreakPosition, 1), map(toBreakPosition, -1));
+	}
+	transaction = transaction.setSelection(finalSelection);
+
+	return { transaction, finalSelection };
+};
+
+export default extractSelectedLinesTo;
diff --git a/packages/editor/ProseMirror/utils/jumpToHash.ts b/packages/editor/ProseMirror/utils/jumpToHash.ts
new file mode 100644
index 0000000000..12c3fd1345
--- /dev/null
+++ b/packages/editor/ProseMirror/utils/jumpToHash.ts
@@ -0,0 +1,39 @@
+import { Command, TextSelection } from 'prosemirror-state';
+import uslug from '@joplin/fork-uslug/lib/uslug';
+import { NodeType } from 'prosemirror-model';
+import { focus } from '@joplin/lib/utils/focusHandler';
+
+const jumpToHash = (targetHash: string, headingType: NodeType): Command => (state, dispatch, view) => {
+	let targetHeaderPos: number|null = null;
+	state.doc.descendants((node, pos) => {
+		if (node.type === headingType) {
+			const hash = uslug(node.textContent);
+			if (hash === targetHash) {
+				// Subtract one to move the selection to the end of
+				// the node:
+				targetHeaderPos = pos + node.nodeSize - 1;
+			}
+		}
+
+		return targetHeaderPos !== null;
+	});
+
+	if (targetHeaderPos !== null) {
+		const newSelection = TextSelection.create(state.doc, targetHeaderPos);
+		if (dispatch) {
+			dispatch(
+				state.tr.setSelection(newSelection)
+					.scrollIntoView(),
+			);
+			if (view) {
+				focus('jumpToHash', view);
+			}
+		}
+
+		return true;
+	}
+
+	return false;
+};
+
+export default jumpToHash;
diff --git a/packages/editor/ProseMirror/utils/preprocessEditorInput.test.ts b/packages/editor/ProseMirror/utils/preprocessEditorInput.test.ts
new file mode 100644
index 0000000000..3b8e7347b5
--- /dev/null
+++ b/packages/editor/ProseMirror/utils/preprocessEditorInput.test.ts
@@ -0,0 +1,39 @@
+import preprocessEditorInput from './preprocessEditorInput';
+
+describe('preprocessEditorInput', () => {
+	test.each([
+		{
+			label: 'Should add the correct original markup for a multi-line paragraph',
+			originalHtml: `<p
+					class="maps-to-line"
+					source-line="0"
+					source-line-end="2"
+				>Test<br>Testing...</p>`,
+			source: 'Test<br>Testing...\n\nTest!',
+			expected: (dom: Document) => {
+				expect(
+					dom.querySelector('p').getAttribute('data-original-markup'),
+				).toBe('Test<br>Testing...\n');
+			},
+		},
+		{
+			label: 'Should add the correct original markup for a list',
+			// Joplin lists don't have toplevel source-line and source-line-end attributes.
+			// As such, preprocessEditorInput should fetch this information from the list items.
+			originalHtml: `<ul>
+				<li class="maps-to-line" source-line="0" source-line-end="1">Testing...</li>
+				<li class="maps-to-line" source-line="1" source-line-end="2">Test.</li>
+			</ul>`,
+			source: '- Testing...\n- Test',
+			expected: (dom: Document) => {
+				expect(
+					dom.querySelector('ul').getAttribute('data-original-markup'),
+				).toBe('- Testing...\n- Test');
+			},
+		},
+	])('should add a "data-original-markup" attribute to toplevel nodes: $label', ({ originalHtml, source, expected }) => {
+		const dom = new DOMParser().parseFromString(originalHtml, 'text/html');
+		preprocessEditorInput(dom, source);
+		expected(dom);
+	});
+});
diff --git a/packages/editor/ProseMirror/utils/preprocessEditorInput.ts b/packages/editor/ProseMirror/utils/preprocessEditorInput.ts
new file mode 100644
index 0000000000..f163502a1a
--- /dev/null
+++ b/packages/editor/ProseMirror/utils/preprocessEditorInput.ts
@@ -0,0 +1,71 @@
+
+const getRootNode = (dom: Document) => {
+	return dom.querySelector('body > #rendered-md') ?? dom.body ?? dom.getRootNode();
+};
+
+// The renderer attaches source map info to individual list items,
+// rather than the toplevel list block.
+// The markup restoration logic, however, needs this information on
+// the toplevel block.
+const addListSourceMapInfo = (dom: Document) => {
+	const root = getRootNode(dom);
+
+	const lists = [
+		...dom.querySelectorAll('ol, ul'),
+	].filter(node => node.parentElement === root);
+
+	for (const list of lists) {
+		const firstChild = list.children.item(0);
+		const lastChild = list.children.item(list.children.length - 1);
+		if (!firstChild || !lastChild) continue;
+		if (!firstChild.hasAttribute('source-line') || !lastChild.hasAttribute('source-line-end')) continue;
+
+		const firstChildLine = firstChild.getAttribute('source-line');
+		const lastChildLine = lastChild.getAttribute('source-line-end');
+		list.classList.add('maps-to-line');
+		list.setAttribute('source-line', firstChildLine);
+		list.setAttribute('source-line-end', lastChildLine);
+	}
+};
+
+// Uses the renderer's source-line and source-line-end attributes to
+// reconstruct the original Markdown for different parts of the given
+// DOM.
+const addOriginalMarkdownAttributes = (dom: Document, originalMarkup: string) => {
+	const lines = originalMarkup.split('\n');
+
+	const root = getRootNode(dom);
+	const sourceMappedToplevelElements = [
+		...dom.querySelectorAll('.maps-to-line[source-line][source-line-end]'),
+	].filter(node => node.parentElement === root);
+
+	let lastEndLine = -1;
+	let lastElement: Element = null;
+	for (const elem of sourceMappedToplevelElements) {
+		const startLine = Number(elem.getAttribute('source-line'));
+		// For block elements, the end line is sometimes the start line of the next
+		// block (which should be excluded from the current).
+		const endLine = Number(elem.getAttribute('source-line-end')) - 1;
+
+		// If the source map of two adjacent nodes overlaps, we can't know which
+		// part of which source line corresponds to the element.
+		if (startLine <= lastEndLine) {
+			lastElement?.removeAttribute('data-original-markup');
+			lastElement = null;
+			continue;
+		}
+
+		const joinedLines = lines.slice(startLine, endLine + 1).join('\n');
+		elem.setAttribute('data-original-markup', joinedLines);
+
+		lastEndLine = endLine;
+		lastElement = elem;
+	}
+};
+
+const preprocessEditorInput = (dom: Document, originalMarkup: string) => {
+	addListSourceMapInfo(dom);
+	addOriginalMarkdownAttributes(dom, originalMarkup);
+};
+
+export default preprocessEditorInput;
diff --git a/packages/editor/ProseMirror/utils/sanitizeHtml.ts b/packages/editor/ProseMirror/utils/sanitizeHtml.ts
new file mode 100644
index 0000000000..9e010ddc4a
--- /dev/null
+++ b/packages/editor/ProseMirror/utils/sanitizeHtml.ts
@@ -0,0 +1,8 @@
+
+import dompurify = require('dompurify');
+
+const sanitizeHtml = (html: string) => {
+	return dompurify.sanitize(html);
+};
+
+export default sanitizeHtml;
diff --git a/packages/editor/ProseMirror/utils/trimEmptyParagraphs.ts b/packages/editor/ProseMirror/utils/trimEmptyParagraphs.ts
new file mode 100644
index 0000000000..c12aaa14b7
--- /dev/null
+++ b/packages/editor/ProseMirror/utils/trimEmptyParagraphs.ts
@@ -0,0 +1,22 @@
+
+const trimEmptyParagraphs = (container: Element) => {
+	const firstChild = () => {
+		return container.children ? container.children[0] : null;
+	};
+	const lastChild = () => {
+		return container.children ? container.children[container.children.length - 1] : null;
+	};
+	const removeWhile = (next: ()=> Element, filter: (node: Element)=> boolean) => {
+		for (let element = next(); element && filter(element); element = next()) {
+			element.remove();
+		}
+	};
+
+	const isEmptyParagraph = (element: Element)=> {
+		return element.tagName === 'P' && element.textContent === '';
+	};
+	removeWhile(firstChild, isEmptyParagraph);
+	removeWhile(lastChild, isEmptyParagraph);
+};
+
+export default trimEmptyParagraphs;
diff --git a/packages/editor/ProseMirror/vendor/changedDescendants.ts b/packages/editor/ProseMirror/vendor/changedDescendants.ts
new file mode 100644
index 0000000000..4a4734e34c
--- /dev/null
+++ b/packages/editor/ProseMirror/vendor/changedDescendants.ts
@@ -0,0 +1,59 @@
+// From the prosemirror-tables package:
+// https://github.com/ProseMirror/prosemirror-tables/blob/a99f70855f2b3e2433bc77451fedd884305fda5b/src/fixtables.ts#L17C1-L47C2
+//! Copyright (C) 2015-2016 by Marijn Haverbeke <marijnh@gmail.com> and others
+//! 
+//! Permission is hereby granted, free of charge, to any person obtaining a copy
+//! of this software and associated documentation files (the "Software"), to deal
+//! in the Software without restriction, including without limitation the rights
+//! to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//! copies of the Software, and to permit persons to whom the Software is
+//! furnished to do so, subject to the following conditions:
+//! 
+//! The above copyright notice and this permission notice shall be included in
+//! all copies or substantial portions of the Software.
+//! 
+//! THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//! IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//! FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//! AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//! LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//! OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//! THE SOFTWARE.
+
+import { Node } from 'prosemirror-model';
+
+// eslint-disable -- A mirror of code from an external source
+
+/**
+ * Helper for iterating through the nodes in a document that changed
+ * compared to the given previous document. Useful for avoiding
+ * duplicate work on each transaction.
+ *
+ * @public
+ */
+function changedDescendants(
+  old: Node,
+  cur: Node,
+  offset: number,
+  f: (node: Node, pos: number) => void,
+): void {
+  const oldSize = old.childCount,
+    curSize = cur.childCount;
+  outer: for (let i = 0, j = 0; i < curSize; i++) {
+    const child = cur.child(i);
+    for (let scan = j, e = Math.min(oldSize, i + 3); scan < e; scan++) {
+      if (old.child(scan) == child) {
+        j = scan + 1;
+        offset += child.nodeSize;
+        continue outer;
+      }
+    }
+    f(child, offset);
+    if (j < oldSize && old.child(j).sameMarkup(child))
+      changedDescendants(old.child(j), child, offset + 1, f);
+    else child.nodesBetween(0, child.content.size, f, offset + 1);
+    offset += child.nodeSize;
+  }
+}
+
+export default changedDescendants;
\ No newline at end of file
diff --git a/packages/editor/ProseMirror/vendor/splitBlockAs.ts b/packages/editor/ProseMirror/vendor/splitBlockAs.ts
new file mode 100644
index 0000000000..6152e7cfbd
--- /dev/null
+++ b/packages/editor/ProseMirror/vendor/splitBlockAs.ts
@@ -0,0 +1,89 @@
+import { Attrs, ContentMatch, NodeType, ResolvedPos, Node } from "prosemirror-model"
+import { canSplit } from "prosemirror-transform"
+import { Selection, TextSelection, AllSelection, Transaction, NodeSelection } from "prosemirror-state"
+
+// Slightly modified from the prosemirror-commands package:
+// https://github.com/ProseMirror/prosemirror-tables/blob/a99f70855f2b3e2433bc77451fedd884305fda5b/src/fixtables.ts#L17C1-L47C2
+// Modified to adjust the API of the splitBlockAs command to allow using it
+// within another command, as per https://discuss.prosemirror.net/t/refactor-commands-into-transform-helpers/479.
+//
+//! Copyright (C) 2015-2017 by Marijn Haverbeke <marijnh@gmail.com> and others
+//! 
+//! Permission is hereby granted, free of charge, to any person obtaining a copy
+//! of this software and associated documentation files (the "Software"), to deal
+//! in the Software without restriction, including without limitation the rights
+//! to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//! copies of the Software, and to permit persons to whom the Software is
+//! furnished to do so, subject to the following conditions:
+//! 
+//! The above copyright notice and this permission notice shall be included in
+//! all copies or substantial portions of the Software.
+//! 
+//! THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//! IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//! FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//! AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//! LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//! OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//! THE SOFTWARE.
+
+function defaultBlockAt(match: ContentMatch) {
+  for (let i = 0; i < match.edgeCount; i++) {
+    let {type} = match.edge(i)
+    if (type.isTextblock && !type.hasRequiredAttrs()) return type
+  }
+  return null
+}
+
+
+/// Create a variant of [`splitBlock`](#commands.splitBlock) that uses
+/// a custom function to determine the type of the newly split off block.
+function splitBlockAs(
+  splitNode?: (node: Node, atEnd: boolean, $from: ResolvedPos) => {type: NodeType, attrs?: Attrs} | null
+) {
+  // Update: Accept a selection and a transaction rather than a state and dispatch function.
+  return (selection: Selection, tr: Transaction) => {
+    let {$from, $to} = selection
+    if (selection instanceof NodeSelection && selection.node.isBlock) {
+      if (!$from.parentOffset || !canSplit(tr.doc, $from.pos)) return false
+      return tr.split($from.pos).scrollIntoView()
+    }
+
+    if (!$from.depth) return false
+    let types: (null | {type: NodeType, attrs?: Attrs | null})[] = []
+    let splitDepth, deflt, atEnd = false, atStart = false
+    for (let d = $from.depth;; d--) {
+      let node = $from.node(d)
+      if (node.isBlock) {
+        atEnd = $from.end(d) == $from.pos + ($from.depth - d)
+        atStart = $from.start(d) == $from.pos - ($from.depth - d)
+        deflt = defaultBlockAt($from.node(d - 1).contentMatchAt($from.indexAfter(d - 1)))
+        let splitType = splitNode && splitNode($to.parent, atEnd, $from)
+        types.unshift(splitType || (atEnd && deflt ? {type: deflt} : null))
+        splitDepth = d
+        break
+      } else {
+        if (d == 1) return false
+        types.unshift(null)
+      }
+    }
+
+    if (selection instanceof TextSelection || selection instanceof AllSelection) tr.deleteSelection()
+    let splitPos = tr.mapping.map($from.pos)
+    let can = canSplit(tr.doc, splitPos, types.length, types)
+    if (!can) {
+      types[0] = deflt ? {type: deflt} : null
+      can = canSplit(tr.doc, splitPos, types.length, types)
+    }
+    if (!can) return false
+    tr.split(splitPos, types.length, types)
+    if (!atEnd && atStart && $from.node(splitDepth).type != deflt) {
+      let first = tr.mapping.map($from.before(splitDepth)), $first = tr.doc.resolve(first)
+      if (deflt && $from.node(splitDepth - 1).canReplaceWith($first.index(), $first.index() + 1, deflt))
+        tr.setNodeMarkup(tr.mapping.map($from.before(splitDepth)), deflt)
+    }
+    return tr.scrollIntoView()
+  }
+}
+
+export default splitBlockAs;
\ No newline at end of file
diff --git a/packages/editor/events.ts b/packages/editor/events.ts
index 05485f0545..fb87bd8cd7 100644
--- a/packages/editor/events.ts
+++ b/packages/editor/events.ts
@@ -8,6 +8,7 @@ export enum EditorEventType {
 	SelectionFormattingChange,
 	UpdateSearchDialog,
 	EditLink,
+	FollowLink,
 	Scroll,
 }
 
@@ -56,10 +57,14 @@ export interface RequestEditLinkEvent {
 	kind: EditorEventType.EditLink;
 }
 
+export interface FollowLinkEvent {
+	kind: EditorEventType.FollowLink;
+	link: string;
+}
 
 export type EditorEvent =
 		ChangeEvent|UndoRedoDepthChangeEvent|SelectionRangeChangeEvent|
 			EditorScrolledEvent|
 			SelectionFormattingChangeEvent|UpdateSearchDialogEvent|
-			RequestEditLinkEvent;
+			RequestEditLinkEvent|FollowLinkEvent;
 
diff --git a/packages/editor/jest.setup.js b/packages/editor/jest.setup.js
index 57e3670553..ed1c07f793 100644
--- a/packages/editor/jest.setup.js
+++ b/packages/editor/jest.setup.js
@@ -1,2 +1,27 @@
 require('../../jest.base-setup.js')();
+require('./polyfills.js');
 
+const setUpLogger = require('./testing/setUpLogger').default;
+setUpLogger();
+
+// JSDOM overrides (don't include in polyfills.js):
+
+// Override .createRange. By default, document.createRange creates
+// a Range object with an undefined `prototype` and a `getBoundingClientRect`
+// that returns `undefined`. ProseMirror relies on ranges having a working
+// `getBoundingClientRect` method, so we override it:
+const originalCreateRange = document.createRange;
+document.createRange = () => {
+	const result = originalCreateRange();
+	result.getBoundingClientRect = () => ({
+		width: 1,
+		height: 2,
+		left: 3,
+		top: 4,
+		bottom: 5,
+		right: 6,
+		x: 3,
+		y: 4,
+	});
+	return result;
+};
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 35d462cdd7..9a96293cb4 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@joplin/lib": "~3.4",
+    "@joplin/utils": "~3.4",
     "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "29.5.12",
     "@types/react": "18.3.20",
@@ -41,6 +42,22 @@
     "@lezer/common": "1.2.3",
     "@lezer/highlight": "1.2.1",
     "@lezer/markdown": "1.3.2",
-    "@replit/codemirror-vim": "6.2.1"
+    "@replit/codemirror-vim": "6.2.1",
+    "dompurify": "3.2.6",
+    "orderedmap": "2.1.1",
+    "prosemirror-commands": "1.7.1",
+    "prosemirror-dropcursor": "1.8.2",
+    "prosemirror-example-setup": "1.2.3",
+    "prosemirror-gapcursor": "1.3.2",
+    "prosemirror-history": "1.4.1",
+    "prosemirror-inputrules": "1.5.0",
+    "prosemirror-keymap": "1.2.3",
+    "prosemirror-model": "1.25.2",
+    "prosemirror-schema-list": "1.5.1",
+    "prosemirror-search": "1.1.0",
+    "prosemirror-state": "1.4.3",
+    "prosemirror-tables": "1.7.1",
+    "prosemirror-transform": "1.10.4",
+    "prosemirror-view": "1.40.0"
   }
 }
diff --git a/packages/editor/polyfills.ts b/packages/editor/polyfills.ts
new file mode 100644
index 0000000000..7db1db205a
--- /dev/null
+++ b/packages/editor/polyfills.ts
@@ -0,0 +1,45 @@
+
+//
+// JSDOM and browser polyfills:
+//
+// If running in JSDOM, a number of visual browser APIs are missing
+// or incomplete.
+// This file may also be included when running in a browser. As such, the methods
+// should be added only if missing.
+//
+
+const createMockRect = (): DOMRect => {
+	const rect = {
+		width: 1,
+		height: 2,
+		left: 3,
+		top: 4,
+		bottom: 5,
+		right: 6,
+		x: 3,
+		y: 4,
+	};
+
+	return {
+		...rect,
+		toJSON: () => JSON.stringify(rect),
+	};
+};
+HTMLElement.prototype.getBoundingClientRect ??= () => {
+	return createMockRect();
+};
+
+// Prevents the CodeMirror error "getClientRects is undefined".
+// See https://github.com/jsdom/jsdom/issues/3002#issue-652790925
+Range.prototype.getBoundingClientRect ??= () => {
+	return createMockRect();
+};
+
+Range.prototype.getClientRects ??= () => {
+	return {
+		length: 0,
+		item: () => null,
+		[Symbol.iterator]: () => null,
+	};
+};
+
diff --git a/packages/editor/CodeMirror/testing/createEditorSettings.ts b/packages/editor/testing/createEditorSettings.ts
similarity index 90%
rename from packages/editor/CodeMirror/testing/createEditorSettings.ts
rename to packages/editor/testing/createEditorSettings.ts
index b07ef3be33..38417dd1cf 100644
--- a/packages/editor/CodeMirror/testing/createEditorSettings.ts
+++ b/packages/editor/testing/createEditorSettings.ts
@@ -1,8 +1,8 @@
 import { themeStyle } from '@joplin/lib/theme';
-import { EditorKeymap, EditorLanguageType, EditorSettings } from '../../types';
+import { EditorKeymap, EditorLanguageType, EditorSettings } from '../types';
 
 const createEditorSettings = (themeId: number) => {
-	const themeData = themeStyle(themeId);
+	const themeData = { themeId, ...themeStyle(themeId) };
 	const editorSettings: EditorSettings = {
 		markdownMarkEnabled: true,
 		katexEnabled: true,
diff --git a/packages/editor/testing/setUpLogger.ts b/packages/editor/testing/setUpLogger.ts
new file mode 100644
index 0000000000..5590868c7e
--- /dev/null
+++ b/packages/editor/testing/setUpLogger.ts
@@ -0,0 +1,12 @@
+import Logger, { LogLevel, TargetType } from '@joplin/utils/Logger';
+
+const setUpLogger = () => {
+	// To prevent warnings when testing focus-related logic (due to
+	// logging in focusHandler.ts):
+	const logger = new Logger();
+	logger.addTarget(TargetType.Console);
+	logger.setLevel(LogLevel.Warn);
+	Logger.initializeGlobalLogger(logger);
+};
+
+export default setUpLogger;
diff --git a/packages/editor/types.ts b/packages/editor/types.ts
index 6ddcfd006e..6beee91a30 100644
--- a/packages/editor/types.ts
+++ b/packages/editor/types.ts
@@ -125,6 +125,9 @@ export interface EditorControl {
 	setSearchState(state: SearchState): void;
 
 	setContentScripts(plugins: ContentScriptData[]): Promise<void>;
+
+	// Called when a resource associated with the current note finishes downloading.
+	onResourceDownloaded(id: string): void;
 }
 
 export enum EditorLanguageType {
@@ -139,6 +142,7 @@ export enum EditorKeymap {
 }
 
 export interface EditorTheme extends Theme {
+	themeId: number;
 	fontFamily: string;
 	fontSize?: number;
 	fontSizeUnits?: string;
diff --git a/packages/editor/utils/getFileFromPasteEvent.ts b/packages/editor/utils/getFileFromPasteEvent.ts
new file mode 100644
index 0000000000..2c9539bd80
--- /dev/null
+++ b/packages/editor/utils/getFileFromPasteEvent.ts
@@ -0,0 +1,23 @@
+const getFileFromPasteEvent = (event: ClipboardEvent|DragEvent) => {
+	const dataTransfer = 'clipboardData' in event ? event.clipboardData : event.dataTransfer;
+	const files = dataTransfer.files;
+
+	let fileToPaste: File|null = null;
+
+	// Prefer image files, if available.
+	for (const file of files) {
+		if (['image/png', 'image/jpeg', 'image/svg+xml'].includes(file.type)) {
+			fileToPaste = file;
+			break;
+		}
+	}
+
+	// Fall back to other files
+	if (files.length && !fileToPaste) {
+		fileToPaste = files[0];
+	}
+
+	return fileToPaste;
+};
+
+export default getFileFromPasteEvent;
diff --git a/packages/lib/HtmlToMd.ts b/packages/lib/HtmlToMd.ts
index c43795be8b..b497bb705c 100644
--- a/packages/lib/HtmlToMd.ts
+++ b/packages/lib/HtmlToMd.ts
@@ -16,7 +16,7 @@ export interface ParseOptions {
 
 export default class HtmlToMd {
 
-	public parse(html: string, options: ParseOptions = {}) {
+	public parse(html: string|HTMLElement, options: ParseOptions = {}) {
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 		const turndownOpts: any = {
 			headingStyle: 'atx',
diff --git a/packages/lib/components/shared/NoteEditor/WarningBanner/onRichTextDismissLinkClick.ts b/packages/lib/components/shared/NoteEditor/WarningBanner/onRichTextDismissLinkClick.ts
new file mode 100644
index 0000000000..dcceda9c77
--- /dev/null
+++ b/packages/lib/components/shared/NoteEditor/WarningBanner/onRichTextDismissLinkClick.ts
@@ -0,0 +1,7 @@
+import Setting from '../../../../models/Setting';
+
+const onRichTextDismissLinkClick = () => {
+	Setting.setValue('richTextBannerDismissed', true);
+};
+
+export default onRichTextDismissLinkClick;
diff --git a/packages/lib/components/shared/NoteEditor/WarningBanner/onRichTextReadMoreLinkClick.ts b/packages/lib/components/shared/NoteEditor/WarningBanner/onRichTextReadMoreLinkClick.ts
new file mode 100644
index 0000000000..9eae63895d
--- /dev/null
+++ b/packages/lib/components/shared/NoteEditor/WarningBanner/onRichTextReadMoreLinkClick.ts
@@ -0,0 +1,7 @@
+import CommandService from '../../../../services/CommandService';
+
+const onRichTextReadMoreLinkClick = () => {
+	void CommandService.instance().execute('openItem', 'https://joplinapp.org/help/apps/rich_text_editor');
+};
+
+export default onRichTextReadMoreLinkClick;
diff --git a/packages/lib/markdownUtils.ts b/packages/lib/markdownUtils.ts
index ba215ebfa5..2ccf755acb 100644
--- a/packages/lib/markdownUtils.ts
+++ b/packages/lib/markdownUtils.ts
@@ -1,7 +1,8 @@
 import { validateLinks } from '@joplin/renderer';
 const stringPadding = require('string-padding');
 const urlUtils = require('./urlUtils');
-import * as MarkdownIt from 'markdown-it';
+import type * as MarkdownItType from 'markdown-it';
+const MarkdownIt = require('markdown-it');
 
 // Taken from codemirror/addon/edit/continuelist.js
 const listRegex = /^(\s*)([*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]\s))(\s*)/;
@@ -79,7 +80,7 @@ const markdownUtils = {
 
 	// Returns the **encoded** URLs, so to be useful they should be decoded again before use.
 	extractFileUrls(md: string, onlyType: string = null): string[] {
-		const markdownIt = new MarkdownIt();
+		const markdownIt: MarkdownItType = new MarkdownIt();
 		markdownIt.validateLink = validateLinks; // Necessary to support file:/// links
 
 		const env = {};
diff --git a/packages/lib/models/settings/builtInMetadata.ts b/packages/lib/models/settings/builtInMetadata.ts
index 996c556004..de202ae01b 100644
--- a/packages/lib/models/settings/builtInMetadata.ts
+++ b/packages/lib/models/settings/builtInMetadata.ts
@@ -81,7 +81,7 @@ const builtInMetadata = (Setting: typeof SettingType) => {
 			value: true,
 			type: SettingItemType.Bool,
 			public: false,
-			appTypes: [AppType.Desktop],
+			appTypes: [AppType.Desktop, AppType.Mobile],
 			storage: SettingStorage.File,
 			isGlobal: true,
 		},
diff --git a/packages/lib/renderers/webviewLib.js b/packages/lib/renderers/webviewLib.js
index 85a7592583..111e678436 100644
--- a/packages/lib/renderers/webviewLib.js
+++ b/packages/lib/renderers/webviewLib.js
@@ -94,6 +94,13 @@ document.addEventListener('click', (event) => {
 	const anchor = webviewLib.getParentAnchorElement(event.target);
 	if (!anchor) return;
 
+	// If contained within a content-editable region, don't follow the link.
+	// Usually, the user wants to move the cursor into the link on click.
+	if (anchor.closest('div[contenteditable]')) {
+		event.preventDefault();
+		return;
+	}
+
 	// Prevent URLs added via <a> tags from being opened within the application itself
 	// otherwise it would open the whole website within the WebView.
 
diff --git a/packages/lib/rnInjectedJs/webviewLib.js b/packages/lib/rnInjectedJs/webviewLib.js
deleted file mode 100644
index 0042d7552d..0000000000
--- a/packages/lib/rnInjectedJs/webviewLib.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = "const webviewLib = {};\n\nlet manualDownloadResourceElements = [];\n\nwebviewLib.onUnloadedResourceClick = function(event) {\n\tconst resourceId = event.currentTarget.getAttribute('data-resource-id');\n\twebviewLib.options_.postMessage(`markForDownload:${resourceId}`);\n};\n\nwebviewLib.setupResourceManualDownload = function() {\n\tfor (const element of manualDownloadResourceElements) {\n\t\telement.style.cursor = 'default';\n\t\telement.removeEventListener('click', webviewLib.onUnloadedResourceClick);\n\t}\n\n\tmanualDownloadResourceElements = [];\n\n\tconst elements = document.getElementsByClassName('resource-status-notDownloaded');\n\n\tfor (const element of elements) {\n\t\telement.style.cursor = 'pointer';\n\t\telement.addEventListener('click', webviewLib.onUnloadedResourceClick);\n\t\tmanualDownloadResourceElements.push(element);\n\t}\n};\n\nwebviewLib.handleInternalLink = function(event, anchorNode) {\n\tconst href = anchorNode.getAttribute('href');\n\tif (!href) return false;\n\n\tif (href.indexOf('#') === 0) {\n\t\tevent.preventDefault();\n\t\t// let old_hash = location.hash;\n\n\t\tlocation.hash = href;\n\n\t\t// HACK\n\t\t// For some reason anchors at the bottom cause the webview to move itself\n\t\t// so that the content is aligned with the top of the screen\n\t\t// This basically refreshes the scroll view so that is returns to a normal\n\t\t// position, the scroll positions stays correct though\n\t\t// Additionally an anchor could not be clicked twice because the location\n\t\t// would not change, this fixes that also\n\t\t//\n\t\t// Commented out to fix https://github.com/laurent22/joplin/issues/2141\n\t\t// We might need to fix a better fix to the previous bug.\n\t\t//\n\t\t// setTimeout(function() {\n\t\t// \tlocation.hash = old_hash;\n\t\t// }, 10);\n\t\treturn true;\n\t}\n\n\treturn false;\n};\n\nwebviewLib.getParentAnchorElement = function(element) {\n\tlet counter = 0;\n\twhile (true) {\n\t\tif (counter++ >= 10000) {\n\t\t\tconsole.warn('been looping for too long - exiting');\n\t\t\treturn null;\n\t\t}\n\n\t\tif (!element) return null;\n\t\tif (element.nodeName.toUpperCase() === 'A') return element;\n\t\telement = element.parentElement;\n\t}\n};\n\nwebviewLib.cloneError = function(error) {\n\treturn {\n\t\tmessage: error.message,\n\t\tstack: error.stack,\n\t};\n};\n\nwebviewLib.logEnabledEventHandler = function(fn) {\n\treturn function(event) {\n\t\ttry {\n\t\t\treturn fn(event);\n\t\t} catch (error) {\n\t\t\twebviewLib.options_.postMessage(`error:${JSON.stringify(webviewLib.cloneError(error))}`);\n\t\t\tthrow error;\n\t\t}\n\t};\n};\n\nwebviewLib.initialize = function(options) {\n\twebviewLib.options_ = options;\n};\n\ndocument.addEventListener('click', function(event) {\n\tconst anchor = webviewLib.getParentAnchorElement(event.target);\n\tif (!anchor) return;\n\n\t// Prevent URLs added via <a> tags from being opened within the application itself\n\t// otherwise it would open the whole website within the WebView.\n\n\t// Note that we already handle some links in html_inline.js, however not all of them\n\t// go through this plugin, in particular links coming from third-party packages such\n\t// as Katex or Mermaid.\n\tif (!anchor.hasAttribute('data-from-md')) {\n\t\tif (webviewLib.handleInternalLink(event, anchor)) return;\n\t\tevent.preventDefault();\n\t\tif (anchor.getAttribute('href')) webviewLib.options_.postMessage(anchor.getAttribute('href'));\n\t\treturn;\n\t}\n\n\t// If this is an internal link, jump to the anchor directly\n\tif (anchor.hasAttribute('data-from-md')) {\n\t\tif (webviewLib.handleInternalLink(event, anchor)) return;\n\t}\n});\n";
\ No newline at end of file
diff --git a/packages/lib/shim.ts b/packages/lib/shim.ts
index 39dfdb99f0..af17ea63c2 100644
--- a/packages/lib/shim.ts
+++ b/packages/lib/shim.ts
@@ -421,6 +421,7 @@ const shim = {
 	},
 
 	injectedJs: (_name: string) => '',
+	injectedCss: (_name: string) => '',
 
 	isTestingEnv: () => {
 		return isTestingEnv_;
diff --git a/packages/lib/testing/test-utils.ts b/packages/lib/testing/test-utils.ts
index bc542cddd8..24067e4c4b 100644
--- a/packages/lib/testing/test-utils.ts
+++ b/packages/lib/testing/test-utils.ts
@@ -70,6 +70,7 @@ import { reg } from '../registry';
 import { Store } from 'redux';
 import { dirname } from '@joplin/utils/path';
 import SyncTargetJoplinServerSAML from '../SyncTargetJoplinServerSAML';
+import { MarkupLanguage } from '@joplin/renderer';
 
 // Each suite has its own separate data and temp directory so that multiple
 // suites can be run at the same time. suiteName is what is used to
@@ -443,15 +444,17 @@ function pluginDir(id: number = null) {
 
 export interface CreateNoteAndResourceOptions {
 	path?: string;
+	markupLanguage?: MarkupLanguage;
 }
 
 const createNoteAndResource = async (options: CreateNoteAndResourceOptions = null) => {
 	options = {
 		path: `${supportDir}/photo.jpg`,
+		markupLanguage: MarkupLanguage.Markdown,
 		...options,
 	};
 
-	let note = await Note.save({});
+	let note = await Note.save({ markup_language: options.markupLanguage });
 	note = await shim.attachFileToNote(note, options.path);
 	const resourceIds = await Note.linkedItemIds(note.body);
 	const resource: ResourceEntity = await Resource.load(resourceIds[0]);
diff --git a/packages/renderer/MarkupToHtml.ts b/packages/renderer/MarkupToHtml.ts
index a493ff3639..8996ddddc1 100644
--- a/packages/renderer/MarkupToHtml.ts
+++ b/packages/renderer/MarkupToHtml.ts
@@ -13,6 +13,10 @@ export enum MarkupLanguage {
 	Any = 3,
 }
 
+export interface PluginOptions {
+	[id: string]: { enabled: boolean };
+}
+
 export interface Options {
 	isSafeMode?: boolean;
 	ResourceModel?: OptionsResourceModel;
@@ -20,8 +24,7 @@ export interface Options {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
 	extraRendererRules?: any[];
 	resourceBaseUrl?: string;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	pluginOptions?: any; // Not sure if needed
+	pluginOptions?: PluginOptions; // Not sure if needed
 	tempDir?: string; // Not sure if needed
 	fsDriver?: FsDriver; // Not sure if needed
 }
diff --git a/packages/renderer/MdToHtml.ts b/packages/renderer/MdToHtml.ts
index 931973d4f3..a4752b312a 100644
--- a/packages/renderer/MdToHtml.ts
+++ b/packages/renderer/MdToHtml.ts
@@ -6,7 +6,8 @@ import validateLinks from './MdToHtml/validateLinks';
 import { Options as NoteStyleOptions } from './noteStyle';
 import { FsDriver, ItemIdToUrlHandler, MarkupRenderer, OptionsResourceModel, RenderOptions, RenderResult, RenderResultPluginAsset, ResourceInfos } from './types';
 import hljs from './highlight';
-import * as MarkdownIt from 'markdown-it';
+// Use a require() to support bundling on mobile:
+import MarkdownIt = require('markdown-it');
 
 const Entities = require('html-entities').AllHtmlEntities;
 const htmlentities = new Entities().encode;
@@ -520,7 +521,7 @@ export default class MdToHtml implements MarkupRenderer {
 			},
 		};
 
-		const markdownIt: MarkdownIt = new MarkdownIt({
+		const markdownIt = new MarkdownIt({
 			breaks: !this.pluginEnabled('softbreaks'),
 			typographer: this.pluginEnabled('typographer'),
 			linkify: this.pluginEnabled('linkify'),
diff --git a/packages/renderer/MdToHtml/rules/checkbox.ts b/packages/renderer/MdToHtml/rules/checkbox.ts
index f0a633cca4..16ff77ffd8 100644
--- a/packages/renderer/MdToHtml/rules/checkbox.ts
+++ b/packages/renderer/MdToHtml/rules/checkbox.ts
@@ -204,6 +204,8 @@ function checkboxPlugin(markdownIt: any, options: RuleOptions) {
 						currentListItem.attrSet('class', (`${currentListItem.attrGet('class') || ''} checked`).trim());
 					}
 				}
+
+				currentList.attrSet('data-is-checklist', '1');
 			}
 		}
 	});
diff --git a/packages/renderer/MdToHtml/rules/katex.ts b/packages/renderer/MdToHtml/rules/katex.ts
index 98dc6bb14f..0635eed5a4 100644
--- a/packages/renderer/MdToHtml/rules/katex.ts
+++ b/packages/renderer/MdToHtml/rules/katex.ts
@@ -323,8 +323,10 @@ export default {
 		katexOptions.macros = options.context.userData.__katex.macros;
 		katexOptions.trust = true;
 
-		const renderKatexError = (error: Error): string => {
-			return `<div class="inline-code">${markdownIt.utils.escapeHtml(error.message)}</div>`;
+		// When targeting inline math, the `containerTag` should be a `span` to prevent issues
+		// with converting back to Markdown from the Rich Text Editor:
+		const renderKatexError = (error: Error, containerTag: 'div'|'span'): string => {
+			return `<${containerTag} class="inline-code">${markdownIt.utils.escapeHtml(error.message)}</${containerTag}>`;
 		};
 
 		// set KaTeX as the renderer for markdown-it-simplemath
@@ -334,7 +336,7 @@ export default {
 			try {
 				outputHtml = renderToStringWithCache(latex, katexOptions);
 			} catch (error) {
-				outputHtml = renderKatexError(error);
+				outputHtml = renderKatexError(error, 'span');
 			}
 			return `<span class="joplin-editable"><span class="joplin-source" data-joplin-language="katex" data-joplin-source-open="$" data-joplin-source-close="$">${markdownIt.utils.escapeHtml(latex)}</span>${outputHtml}</span>`;
 		};
@@ -351,7 +353,7 @@ export default {
 			try {
 				outputHtml = renderToStringWithCache(latex, katexOptions);
 			} catch (error) {
-				outputHtml = renderKatexError(error);
+				outputHtml = renderKatexError(error, 'div');
 			}
 
 			return `<div class="joplin-editable"><pre class="joplin-source" data-joplin-language="katex" data-joplin-source-open="$$&#10;" data-joplin-source-close="&#10;$$&#10;">${markdownIt.utils.escapeHtml(latex)}</pre>${outputHtml}</div>`;
diff --git a/packages/renderer/MdToHtml/rules/mermaid.ts b/packages/renderer/MdToHtml/rules/mermaid.ts
index 09714b6188..60de2005da 100644
--- a/packages/renderer/MdToHtml/rules/mermaid.ts
+++ b/packages/renderer/MdToHtml/rules/mermaid.ts
@@ -71,7 +71,7 @@ export default {
 
 			ruleOptions.context.pluginWasUsed.mermaid = true;
 
-			const contentHtml = markdownIt.utils.escapeHtml(token.content);
+			const contentHtml = markdownIt.utils.escapeHtml((token.content as string).trimEnd());
 
 			const cssClasses = ['mermaid'];
 			if (ruleOptions.theme.appearance === 'dark') {
diff --git a/packages/renderer/types.ts b/packages/renderer/types.ts
index 42480a7865..0990ff856c 100644
--- a/packages/renderer/types.ts
+++ b/packages/renderer/types.ts
@@ -67,7 +67,6 @@ export interface RenderOptions {
 
 	resources?: ResourceInfos;
 
-	onResourceLoaded?: ()=> void;
 	editPopupFiletypes?: string[];
 	createEditPopupSyntax?: string;
 	destroyEditPopupSyntax?: string;
diff --git a/packages/renderer/utils.ts b/packages/renderer/utils.ts
index 5669fc274a..40052cd9a1 100644
--- a/packages/renderer/utils.ts
+++ b/packages/renderer/utils.ts
@@ -158,11 +158,13 @@ export const imageReplacement = function(ResourceModel: OptionsResourceModel, ma
 		}
 
 		// contenteditable="false": Improves support for the Rich Text Editor -- without this,
-		// users can add content within the <div>, which breaks the html-to-md conversion.
+		// users can add content within the <span>, which breaks the html-to-md conversion.
+		//
+		// Use a <span> and not a <div> to allow the placeholder to appear in <p> elements.
 		return (
-			`<div ${attributesHtml(attrs)} contenteditable="false">`
+			`<span ${attributesHtml(attrs)} contenteditable="false">`
 				+ `<img src="data:image/svg+xml;utf8,${htmlentities(icon)}"/>`
-			+ '</div>'
+			+ '</span>'
 		);
 	}
 	const mime = resource.mime ? resource.mime.toLowerCase() : '';
diff --git a/packages/tools/cspell/dictionary4.txt b/packages/tools/cspell/dictionary4.txt
index 3d996e7dee..e6e0557aef 100644
--- a/packages/tools/cspell/dictionary4.txt
+++ b/packages/tools/cspell/dictionary4.txt
@@ -187,3 +187,11 @@ fuzzer
 Freespinny
 BestEtf
 Etf
+prosemirror
+gapcursor
+dropcursor
+dompurify
+orderedmap
+labelledby
+isTextblock
+deflt
diff --git a/packages/turndown-plugin-gfm/src/task-list-items.js b/packages/turndown-plugin-gfm/src/task-list-items.js
index 55d4b853b9..972648bd47 100644
--- a/packages/turndown-plugin-gfm/src/task-list-items.js
+++ b/packages/turndown-plugin-gfm/src/task-list-items.js
@@ -1,7 +1,14 @@
 export default function taskListItems (turndownService) {
   turndownService.addRule('taskListItems', {
     filter: function (node) {
-      return node.type === 'checkbox' && node.parentNode.nodeName === 'LI'
+      const parent = node.parentNode;
+      const grandparent = parent.parentNode;
+      return node.type === 'checkbox' && (
+        parent.nodeName === 'LI'
+        // Handles the case where the label contains the checkbox. For example,
+        // <label><input ...> ...label text...</label>
+        || (parent.nodeName === 'LABEL' && grandparent && grandparent.nodeName === 'LI')
+      )
     },
     replacement: function (content, node) {
       return (node.checked ? '[x]' : '[ ]') + ' '
diff --git a/packages/turndown/src/commonmark-rules.js b/packages/turndown/src/commonmark-rules.js
index 7b94a38ad9..a6a0aac7c7 100644
--- a/packages/turndown/src/commonmark-rules.js
+++ b/packages/turndown/src/commonmark-rules.js
@@ -218,6 +218,25 @@ function isOrderedList(e) {
   return e.style && e.style.listStyleType === 'decimal';
 }
 
+// `content` should be the part of the item after the list marker (e.g. "[ ] test" in "- [ ] test").
+const removeListItemLeadingNewlines = (content) => {
+  const itemStartRegex = /(^\[[Xx ]\]|^)([ \n]+)/;
+  const startingSpaceMatch = content.match(itemStartRegex);
+  if (!startingSpaceMatch) return content;
+
+  const checkbox = startingSpaceMatch[1];
+  const space = startingSpaceMatch[2];
+  if (space.includes('\n')) {
+    content = content.replace(itemStartRegex, `${checkbox} `);
+  }
+
+  return content;
+};
+
+const isEmptyTaskListItem = (content) => {
+  return content.match(/^\[[xX \][ \n\t]*$/);
+};
+
 rules.listItem = {
   filter: 'li',
 
@@ -266,7 +285,16 @@ rules.listItem = {
           prefix = indexStr + '.' + ' '.repeat(3 - indexStr.length)
         }
       }
-    } 
+    }
+
+    // Prevent the item from starting with a blank line (which breaks rendering)
+    content = removeListItemLeadingNewlines(content);
+
+    // Prevent the item from being empty (which also prevents the item from rendering as a list
+    // item).
+    if (isEmptyTaskListItem(content)) {
+      content += '&nbsp;';
+    }
 
     return (
       prefix + content + (node.nextSibling && !/\n$/.test(content) ? '\n' : '')
@@ -599,7 +627,7 @@ function imageMarkdownFromNode(node, options = null) {
 
   return imageMarkdownFromAttributes({
     alt: node.alt,
-    src: node.getAttribute('src'),
+    src: node.getAttribute('src') || node.getAttribute('data-src'),
     title: node.title,
   });
 }
diff --git a/packages/turndown/src/turndown.js b/packages/turndown/src/turndown.js
index b9d1aa71aa..abaf2ab545 100644
--- a/packages/turndown/src/turndown.js
+++ b/packages/turndown/src/turndown.js
@@ -3,6 +3,18 @@ import Rules from './rules'
 import { extend, isCodeBlock, trimLeadingNewlines, trimTrailingNewlines } from './utilities'
 import RootNode from './root-node'
 import Node from './node'
+
+// Allows falling back to a more-compatible [fallbackRegex] on platforms that fail to compile
+// the primary [regexString].
+const regexWithFallback = (regexString, regexFlags, fallbackRegex) => {
+  try {
+    return new RegExp(regexString, regexFlags);
+  } catch (error) {
+    console.error('Failed to compile regular expression. Falling back to a compatibility regex. Error: ', error);
+    return fallbackRegex;
+  }
+};
+
 var reduce = Array.prototype.reduce
 var escapes = [
   [/\\/g, '\\\\'],
@@ -17,7 +29,7 @@ var escapes = [
   [/\]/g, '\\]'],
   [/^>/g, '\\>'],
   // A list of valid \p values can be found here: https://unicode.org/reports/tr44/#GC_Values_Table
-  [/(^|\p{Punctuation}|\p{Separator}|\p{Symbol})_(\P{Separator})/ug, '$1\\_$2'],
+  [regexWithFallback('(^|\\p{Punctuation}|\\p{Separator}|\\p{Symbol})_(\\P{Separator})', 'ug', /(^|\s)_(\S)/), '$1\\_$2'],
   [/^(\d+)\. /g, '$1\\. '],
   [/\$/g, '\\$$'], // Math
 ]
diff --git a/yarn.lock b/yarn.lock
index 0e73f1add4..02357368d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9033,6 +9033,8 @@ __metadata:
     "@joplin/react-native-saf-x": "npm:~3.4"
     "@joplin/renderer": "npm:~3.4"
     "@joplin/tools": "npm:~3.4"
+    "@joplin/turndown": "npm:~4.0.80"
+    "@joplin/turndown-plugin-gfm": "npm:~1.0.62"
     "@joplin/utils": "npm:~3.4"
     "@js-draw/material-icons": "npm:1.30.0"
     "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.15"
@@ -9067,6 +9069,7 @@ __metadata:
     constants-browserify: "npm:1.0.0"
     crypto-browserify: "npm:3.12.1"
     deprecated-react-native-prop-types: "npm:5.0.0"
+    esbuild: "npm:0.25.3"
     events: "npm:3.3.0"
     expo: "npm:53.0.19"
     expo-av: "npm:15.1.7"
@@ -9192,6 +9195,7 @@ __metadata:
     "@codemirror/view": "npm:6.35.0"
     "@joplin/fork-uslug": "npm:^2.0.0"
     "@joplin/lib": "npm:~3.4"
+    "@joplin/utils": "npm:~3.4"
     "@lezer/common": "npm:1.2.3"
     "@lezer/highlight": "npm:1.2.1"
     "@lezer/markdown": "npm:1.3.2"
@@ -9201,8 +9205,24 @@ __metadata:
     "@types/react": "npm:18.3.20"
     "@types/react-redux": "npm:7.1.33"
     "@types/styled-components": "npm:5.1.32"
+    dompurify: "npm:3.2.6"
     jest: "npm:29.7.0"
     jest-environment-jsdom: "npm:29.7.0"
+    orderedmap: "npm:2.1.1"
+    prosemirror-commands: "npm:1.7.1"
+    prosemirror-dropcursor: "npm:1.8.2"
+    prosemirror-example-setup: "npm:1.2.3"
+    prosemirror-gapcursor: "npm:1.3.2"
+    prosemirror-history: "npm:1.4.1"
+    prosemirror-inputrules: "npm:1.5.0"
+    prosemirror-keymap: "npm:1.2.3"
+    prosemirror-model: "npm:1.25.2"
+    prosemirror-schema-list: "npm:1.5.1"
+    prosemirror-search: "npm:1.1.0"
+    prosemirror-state: "npm:1.4.3"
+    prosemirror-tables: "npm:1.7.1"
+    prosemirror-transform: "npm:1.10.4"
+    prosemirror-view: "npm:1.40.0"
     ts-jest: "npm:29.1.5"
     typescript: "npm:5.4.5"
   languageName: unknown
@@ -9636,7 +9656,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@joplin/turndown-plugin-gfm@npm:^1.0.62, @joplin/turndown-plugin-gfm@workspace:packages/turndown-plugin-gfm":
+"@joplin/turndown-plugin-gfm@npm:^1.0.62, @joplin/turndown-plugin-gfm@npm:~1.0.62, @joplin/turndown-plugin-gfm@workspace:packages/turndown-plugin-gfm":
   version: 0.0.0-use.local
   resolution: "@joplin/turndown-plugin-gfm@workspace:packages/turndown-plugin-gfm"
   dependencies:
@@ -9648,7 +9668,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@joplin/turndown@npm:^4.0.80, @joplin/turndown@workspace:packages/turndown":
+"@joplin/turndown@npm:^4.0.80, @joplin/turndown@npm:~4.0.80, @joplin/turndown@workspace:packages/turndown":
   version: 0.0.0-use.local
   resolution: "@joplin/turndown@workspace:packages/turndown"
   dependencies:
@@ -21431,6 +21451,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crelt@npm:^1.0.0":
+  version: 1.0.6
+  resolution: "crelt@npm:1.0.6"
+  checksum: 10/5ed326ca6bd243b1dba6b943f665b21c2c04be03271824bc48f20dba324b0f8233e221f8c67312526d24af2b1243c023dc05a41bd8bd05d1a479fd2c72fb39c3
+  languageName: node
+  linkType: hard
+
 "crelt@npm:^1.0.5":
   version: 1.0.5
   resolution: "crelt@npm:1.0.5"
@@ -23772,7 +23799,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dompurify@npm:^3.2.4":
+"dompurify@npm:3.2.6, dompurify@npm:^3.2.4":
   version: 3.2.6
   resolution: "dompurify@npm:3.2.6"
   dependencies:
@@ -24942,7 +24969,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.25.3":
+"esbuild@npm:0.25.3, esbuild@npm:^0.25.3":
   version: 0.25.3
   resolution: "esbuild@npm:0.25.3"
   dependencies:
@@ -38510,6 +38537,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"orderedmap@npm:2.1.1, orderedmap@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "orderedmap@npm:2.1.1"
+  checksum: 10/082cf970b0b66d1c5a904b07880534092ce8a2f2eea7a52cf111f6c956210fa88226c13866aef4d22a3abe56924f21ead12f7ee8c1dfaf2f63d897a4e7c23328
+  languageName: node
+  linkType: hard
+
 "os-browserify@npm:~0.3.0":
   version: 0.3.0
   resolution: "os-browserify@npm:0.3.0"
@@ -41065,6 +41099,176 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prosemirror-commands@npm:1.7.1, prosemirror-commands@npm:^1.0.0":
+  version: 1.7.1
+  resolution: "prosemirror-commands@npm:1.7.1"
+  dependencies:
+    prosemirror-model: "npm:^1.0.0"
+    prosemirror-state: "npm:^1.0.0"
+    prosemirror-transform: "npm:^1.10.2"
+  checksum: 10/60efe77a9a6b9f06d66442980946f49a4804c24a7aca06ee4d55333a6c55d0f1e3189613bc27f31d16496133969a454f29f071caa8ef2d38126aefbc36f81c4a
+  languageName: node
+  linkType: hard
+
+"prosemirror-dropcursor@npm:1.8.2, prosemirror-dropcursor@npm:^1.0.0":
+  version: 1.8.2
+  resolution: "prosemirror-dropcursor@npm:1.8.2"
+  dependencies:
+    prosemirror-state: "npm:^1.0.0"
+    prosemirror-transform: "npm:^1.1.0"
+    prosemirror-view: "npm:^1.1.0"
+  checksum: 10/02349c56152d0261c61d462b07684bb8179ab0ea488ab333dadcc9181b9ec8d5aa625feb2c54088090bd8f4e540321219938a0642d8ed043fea8a11f371ef058
+  languageName: node
+  linkType: hard
+
+"prosemirror-example-setup@npm:1.2.3":
+  version: 1.2.3
+  resolution: "prosemirror-example-setup@npm:1.2.3"
+  dependencies:
+    prosemirror-commands: "npm:^1.0.0"
+    prosemirror-dropcursor: "npm:^1.0.0"
+    prosemirror-gapcursor: "npm:^1.0.0"
+    prosemirror-history: "npm:^1.0.0"
+    prosemirror-inputrules: "npm:^1.0.0"
+    prosemirror-keymap: "npm:^1.0.0"
+    prosemirror-menu: "npm:^1.0.0"
+    prosemirror-schema-list: "npm:^1.0.0"
+    prosemirror-state: "npm:^1.0.0"
+  checksum: 10/0baeee554aa1d4bcd40a73da83a692ea842709bc4c0f0bf81be2d4429d0d1440c363396f11c6129dbe8df41893a68d1aa30b96dbc9aa71e9b0531bc21a612159
+  languageName: node
+  linkType: hard
+
+"prosemirror-gapcursor@npm:1.3.2, prosemirror-gapcursor@npm:^1.0.0":
+  version: 1.3.2
+  resolution: "prosemirror-gapcursor@npm:1.3.2"
+  dependencies:
+    prosemirror-keymap: "npm:^1.0.0"
+    prosemirror-model: "npm:^1.0.0"
+    prosemirror-state: "npm:^1.0.0"
+    prosemirror-view: "npm:^1.0.0"
+  checksum: 10/8de9e9c0f7f69ae74a3189a86b3e8a2bd8dd5bd693c18efc5271ad4a4c6777092906c8ac7722ab5d1428de04b13404c676fddef54966ed3606b3040602eb1325
+  languageName: node
+  linkType: hard
+
+"prosemirror-history@npm:1.4.1, prosemirror-history@npm:^1.0.0":
+  version: 1.4.1
+  resolution: "prosemirror-history@npm:1.4.1"
+  dependencies:
+    prosemirror-state: "npm:^1.2.2"
+    prosemirror-transform: "npm:^1.0.0"
+    prosemirror-view: "npm:^1.31.0"
+    rope-sequence: "npm:^1.3.0"
+  checksum: 10/7ac68fc8233dcd159bb15c2aaf542fd9aa0524b50523b24de6c8209b1f5eae9545f7fa82d584c93e68b1e910bcae5e07bee1085094aca4c565c607cf737c39b8
+  languageName: node
+  linkType: hard
+
+"prosemirror-inputrules@npm:1.5.0, prosemirror-inputrules@npm:^1.0.0":
+  version: 1.5.0
+  resolution: "prosemirror-inputrules@npm:1.5.0"
+  dependencies:
+    prosemirror-state: "npm:^1.0.0"
+    prosemirror-transform: "npm:^1.0.0"
+  checksum: 10/b5125bf95078b9f4ea02eca9a114fe4fdedc2ea6dac1df21dc0bf6eb7595d39471698cb6362a34c4e9642003ffc5792180624175ebd45b181e2687b3c9a74f40
+  languageName: node
+  linkType: hard
+
+"prosemirror-keymap@npm:1.2.3, prosemirror-keymap@npm:^1.0.0, prosemirror-keymap@npm:^1.2.2":
+  version: 1.2.3
+  resolution: "prosemirror-keymap@npm:1.2.3"
+  dependencies:
+    prosemirror-state: "npm:^1.0.0"
+    w3c-keyname: "npm:^2.2.0"
+  checksum: 10/acb251b03f57920282342bf404755de6ff68e150aaf252aca9bbeb63bbba8f53e03091095d399def979c95db0649620a22a47a332418c3a2408a0f43737b18d9
+  languageName: node
+  linkType: hard
+
+"prosemirror-menu@npm:^1.0.0":
+  version: 1.2.5
+  resolution: "prosemirror-menu@npm:1.2.5"
+  dependencies:
+    crelt: "npm:^1.0.0"
+    prosemirror-commands: "npm:^1.0.0"
+    prosemirror-history: "npm:^1.0.0"
+    prosemirror-state: "npm:^1.0.0"
+  checksum: 10/68ccff3793906a70ef9e64d953027cf231c045119e62ef37a4631f012066c546bee96454ca98103382bf8699e9040e2e6551c518259543ffb149d4d6609114b5
+  languageName: node
+  linkType: hard
+
+"prosemirror-model@npm:1.25.2, prosemirror-model@npm:^1.0.0, prosemirror-model@npm:^1.20.0, prosemirror-model@npm:^1.21.0, prosemirror-model@npm:^1.25.0":
+  version: 1.25.2
+  resolution: "prosemirror-model@npm:1.25.2"
+  dependencies:
+    orderedmap: "npm:^2.0.0"
+  checksum: 10/de708e22b52b97081ae8012c37136e3a39552a13b64b9fadeddca1c4bb3d7b865f390123cbe1fee7e98c6b7d85776a292be9fdc5140b6ebbe9f60987de980345
+  languageName: node
+  linkType: hard
+
+"prosemirror-schema-list@npm:1.5.1, prosemirror-schema-list@npm:^1.0.0":
+  version: 1.5.1
+  resolution: "prosemirror-schema-list@npm:1.5.1"
+  dependencies:
+    prosemirror-model: "npm:^1.0.0"
+    prosemirror-state: "npm:^1.0.0"
+    prosemirror-transform: "npm:^1.7.3"
+  checksum: 10/eaf308093ecbce7fc7d0e3c3653faa120afb3679bdb20c99f79c75c90b4f57d61c6580ea162dd0af274013e98c5d4529ecbe6b9bd7e66e7d6d6b5be6aae0f052
+  languageName: node
+  linkType: hard
+
+"prosemirror-search@npm:1.1.0":
+  version: 1.1.0
+  resolution: "prosemirror-search@npm:1.1.0"
+  dependencies:
+    prosemirror-model: "npm:^1.21.0"
+    prosemirror-state: "npm:^1.4.3"
+    prosemirror-view: "npm:^1.33.6"
+  checksum: 10/2988194d37a7966176d29618f2c57d91e01d2f7bb4e7d3d71f73d23799606fea4edc1bab7e058fc0c34174e91b4786b440ed695d36a9d6a3b5edfb4ae35b77e9
+  languageName: node
+  linkType: hard
+
+"prosemirror-state@npm:1.4.3, prosemirror-state@npm:^1.0.0, prosemirror-state@npm:^1.2.2, prosemirror-state@npm:^1.4.3":
+  version: 1.4.3
+  resolution: "prosemirror-state@npm:1.4.3"
+  dependencies:
+    prosemirror-model: "npm:^1.0.0"
+    prosemirror-transform: "npm:^1.0.0"
+    prosemirror-view: "npm:^1.27.0"
+  checksum: 10/57eb0cc7d7412b9d87430b5a9e489d60aed3a3eb9deffff4314b76ad6a5ae019618be658303796285877c9c535392b97b5a4d4d173485b0dd0403671ada9f2a1
+  languageName: node
+  linkType: hard
+
+"prosemirror-tables@npm:1.7.1":
+  version: 1.7.1
+  resolution: "prosemirror-tables@npm:1.7.1"
+  dependencies:
+    prosemirror-keymap: "npm:^1.2.2"
+    prosemirror-model: "npm:^1.25.0"
+    prosemirror-state: "npm:^1.4.3"
+    prosemirror-transform: "npm:^1.10.3"
+    prosemirror-view: "npm:^1.39.1"
+  checksum: 10/69259298146924ec4497a21a326c3b88b3d90ef6103f4f60c40d5ddca800bc2bffe389dac0b7ce954ef285ea886b081a22a480e72980ce7fcd0e82f74766f8ad
+  languageName: node
+  linkType: hard
+
+"prosemirror-transform@npm:1.10.4, prosemirror-transform@npm:^1.0.0, prosemirror-transform@npm:^1.1.0, prosemirror-transform@npm:^1.10.2, prosemirror-transform@npm:^1.10.3, prosemirror-transform@npm:^1.7.3":
+  version: 1.10.4
+  resolution: "prosemirror-transform@npm:1.10.4"
+  dependencies:
+    prosemirror-model: "npm:^1.21.0"
+  checksum: 10/a5835bdd7e66e455f52115d63b48a1b9c6a0741fdefa277894c7ed4f5baf3570b226a135b11036abaa7fe7c5e98de466692779d356e65302b8e929a13a1c4391
+  languageName: node
+  linkType: hard
+
+"prosemirror-view@npm:1.40.0, prosemirror-view@npm:^1.0.0, prosemirror-view@npm:^1.1.0, prosemirror-view@npm:^1.27.0, prosemirror-view@npm:^1.31.0, prosemirror-view@npm:^1.33.6, prosemirror-view@npm:^1.39.1":
+  version: 1.40.0
+  resolution: "prosemirror-view@npm:1.40.0"
+  dependencies:
+    prosemirror-model: "npm:^1.20.0"
+    prosemirror-state: "npm:^1.0.0"
+    prosemirror-transform: "npm:^1.1.0"
+  checksum: 10/44200bfcadd011e2eaeeacf8dd54e7ec68e24b203c3b1b55624c4ef06281667b02e965a02178624b150d5f2b07eab77e3d5abd382f3d9fdadad30183805070f4
+  languageName: node
+  linkType: hard
+
 "proto-list@npm:~1.2.1":
   version: 1.2.4
   resolution: "proto-list@npm:1.2.4"
@@ -44066,6 +44270,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"rope-sequence@npm:^1.3.0":
+  version: 1.3.4
+  resolution: "rope-sequence@npm:1.3.4"
+  checksum: 10/57b5dd8c28ece05bb5f33eea6ea56facb00d4893269bb83aa8656f69065c1bc0707ec9bb816bce0e5f4d489d88942c7f0f0a1c3655773753ef158c9dd0e9456d
+  languageName: node
+  linkType: hard
+
 "roughjs@npm:^4.6.6":
   version: 4.6.6
   resolution: "roughjs@npm:4.6.6"
@@ -50560,6 +50771,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"w3c-keyname@npm:^2.2.0":
+  version: 2.2.8
+  resolution: "w3c-keyname@npm:2.2.8"
+  checksum: 10/95bafa4c04fa2f685a86ca1000069c1ec43ace1f8776c10f226a73296caeddd83f893db885c2c220ebeb6c52d424e3b54d7c0c1e963bbf204038ff1a944fbb07
+  languageName: node
+  linkType: hard
+
 "w3c-keyname@npm:^2.2.4":
   version: 2.2.4
   resolution: "w3c-keyname@npm:2.2.4"