Mobile: Performance: Improve Rich Text Editor startup performance (#12819)

.eslintignore

@@ -873,7 +873,8 @@ 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/contentScript/convertHtmlToMarkdown.js
+packages/app-mobile/contentScripts/richTextEditorBundle/contentScript/index.js
 packages/app-mobile/contentScripts/richTextEditorBundle/types.js
 packages/app-mobile/contentScripts/richTextEditorBundle/useWebViewSetup.js
 packages/app-mobile/contentScripts/types.js

.gitignore

@@ -846,7 +846,8 @@ 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/contentScript/convertHtmlToMarkdown.js
+packages/app-mobile/contentScripts/richTextEditorBundle/contentScript/index.js
 packages/app-mobile/contentScripts/richTextEditorBundle/types.js
 packages/app-mobile/contentScripts/richTextEditorBundle/useWebViewSetup.js
 packages/app-mobile/contentScripts/types.js

packages/app-cli/tests/MarkupToHtml.ts

@@ -1,6 +1,6 @@
 
-import MarkupToHtml, { MarkupLanguage } from '@joplin/renderer/MarkupToHtml';
-import { RenderResult } from '@joplin/renderer/types';
+import MarkupToHtml from '@joplin/renderer/MarkupToHtml';
+import { RenderResult, MarkupLanguage } from '@joplin/renderer/types';
 
 describe('MarkupToHtml', () => {
 

packages/app-mobile/contentScripts/rendererBundle/types.ts

@@ -1,6 +1,6 @@
-import type { FsDriver as RendererFsDriver, RenderResult, ResourceInfos } from '@joplin/renderer/types';
+import type { MarkupLanguage, FsDriver as RendererFsDriver, RenderResult, ResourceInfos } from '@joplin/renderer/types';
 import type Renderer from './contentScript/Renderer';
-import { MarkupLanguage, PluginOptions } from '@joplin/renderer/MarkupToHtml';
+import { PluginOptions } from '@joplin/renderer/MarkupToHtml';
 
 // Joplin settings (as from Setting.value(...)) that should
 // remain constant during editing.

packages/app-mobile/contentScripts/richTextEditorBundle/contentScript/convertHtmlToMarkdown.ts

@@ -0,0 +1,32 @@
+const TurndownService = require('@joplin/turndown');
+const turndownPluginGfm = require('@joplin/turndown-plugin-gfm').gfm;
+
+// Avoid using @joplin/lib/HtmlToMd here. HtmlToMd may cause several megabytes
+// of additional JavaScript and supporting data to be included.
+
+const convertHtmlToMarkdown = (html: string|HTMLElement) => {
+	const turndownOpts = {
+		headingStyle: 'atx',
+		codeBlockStyle: 'fenced',
+		preserveImageTagsWithSize: true,
+		preserveNestedTables: true,
+		preserveColorStyles: true,
+		bulletListMarker: '-',
+		emDelimiter: '*',
+		strongDelimiter: '**',
+		allowResourcePlaceholders: true,
+
+		// If soft-breaks are enabled, lines need to end with two or more spaces for
+		// trailing <br/>s to render. See
+		// https://github.com/laurent22/joplin/issues/8430
+		br: '  ',
+	};
+	const turndown = new TurndownService(turndownOpts);
+	turndown.use(turndownPluginGfm);
+	turndown.remove('script');
+	turndown.remove('style');
+	const md = turndown.turndown(html);
+	return md;
+};
+
+export default convertHtmlToMarkdown;

packages/app-mobile/contentScripts/richTextEditorBundle/contentScript/index.ts

@@ -1,12 +1,12 @@
-import '../utils/polyfills';
+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 { EditorProcessApi, EditorProps, MainProcessApi } from '../types';
+import WebViewToRNMessenger from '../../../utils/ipc/WebViewToRNMessenger';
+import { MarkupLanguage } from '@joplin/renderer/types';
 import '@joplin/editor/ProseMirror/styles';
-import HtmlToMd from '@joplin/lib/HtmlToMd';
-import readFileToBase64 from '../utils/readFileToBase64';
+import readFileToBase64 from '../../utils/readFileToBase64';
 import { EditorLanguageType } from '@joplin/editor/types';
+import convertHtmlToMarkdown from './convertHtmlToMarkdown';
 
 const postprocessHtml = (html: HTMLElement) => {
 	// Fix resource URLs
@@ -45,11 +45,10 @@ const wrapHtmlForMarkdownConversion = (html: HTMLElement) => {
 };
 
 
-const htmlToMd = new HtmlToMd();
 const htmlToMarkdown = (html: HTMLElement): string => {
 	html = postprocessHtml(html);
 
-	return htmlToMd.parse(html, { preserveColorStyles: true });
+	return convertHtmlToMarkdown(html);
 };
 
 export const initialize = async ({
@@ -127,5 +126,5 @@ export const initialize = async ({
 	return editor;
 };
 
-export { default as setUpLogger } from '../utils/setUpLogger';
+export { default as setUpLogger } from '../../utils/setUpLogger';
 

packages/lib/markupLanguageUtils.ts

@@ -1,11 +1,12 @@
 import markdownUtils from './markdownUtils';
 import Setting from './models/Setting';
 import shim from './shim';
-import MarkupToHtml, { MarkupLanguage, Options } from '@joplin/renderer/MarkupToHtml';
+import MarkupToHtml, { Options } from '@joplin/renderer/MarkupToHtml';
 
 import htmlUtils from './htmlUtils';
 import Resource from './models/Resource';
 import { PluginStates } from './services/plugins/reducer';
+import { MarkupLanguage } from '@joplin/renderer';
 
 export class MarkupLanguageUtils {
 

packages/renderer/MarkupToHtml.ts

@@ -3,16 +3,10 @@ import HtmlToHtml from './HtmlToHtml';
 import htmlUtils from './htmlUtils';
 import { Options as NoteStyleOptions } from './noteStyle';
 import { AllHtmlEntities } from 'html-entities';
-import { FsDriver, MarkupRenderer, MarkupToHtmlConverter, OptionsResourceModel, RenderOptions, RenderResult } from './types';
+import { FsDriver, MarkupLanguage, MarkupRenderer, MarkupToHtmlConverter, OptionsResourceModel, RenderOptions, RenderResult } from './types';
 import defaultResourceModel from './defaultResourceModel';
 const MarkdownIt = require('markdown-it');
 
-export enum MarkupLanguage {
-	Markdown = 1,
-	Html = 2,
-	Any = 3,
-}
-
 export interface PluginOptions {
 	[id: string]: { enabled: boolean };
 }

packages/renderer/index.ts

@@ -1,4 +1,4 @@
-import MarkupToHtml, { MarkupLanguage } from './MarkupToHtml';
+import MarkupToHtml from './MarkupToHtml';
 import MdToHtml from './MdToHtml';
 import HtmlToHtml from './HtmlToHtml';
 import * as utils from './utils';
@@ -6,6 +6,7 @@ import setupLinkify from './MdToHtml/setupLinkify';
 import validateLinks from './MdToHtml/validateLinks';
 import headerAnchor from './headerAnchor';
 import assetsToHeaders from './assetsToHeaders';
+import { MarkupLanguage } from './types';
 
 export {
 	MarkupToHtml,

packages/renderer/types.ts

@@ -1,6 +1,11 @@
-import { MarkupLanguage } from './MarkupToHtml';
 import { Options as NoteStyleOptions } from './noteStyle';
 
+export enum MarkupLanguage {
+	Markdown = 1,
+	Html = 2,
+	Any = 3,
+}
+
 export type ItemIdToUrlHandler = (resourceId: string, urlParameters?: string)=> string;
 
 interface ResourceEntity {