Mobile: Rich Text Editor: Enable syntax highlighting and auto-indent in the code block editor (#12909)

packages/app-mobile/contentScripts/markdownEditorBundle/contentScript.ts

@@ -1,30 +1,57 @@
 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 { EditorProcessApi, EditorProps, EditorWithParentProps, ExportedWebViewGlobals, MainProcessApi } from './types';
 import readFileToBase64 from '../utils/readFileToBase64';
+import { EditorControl } from '@joplin/editor/types';
+import { EditorEventType } from '@joplin/editor/events';
 
 export { default as setUpLogger } from '../utils/setUpLogger';
 
-export const initializeEditor = ({
-	parentElementClassName,
+interface ExtendedWindow extends ExportedWebViewGlobals, Window { }
+declare const window: ExtendedWindow;
+
+let mainEditor: EditorControl|null = null;
+let allEditors: EditorControl[] = [];
+const messenger = new WebViewToRNMessenger<EditorProcessApi, MainProcessApi>('markdownEditor', {
+	get mainEditor() {
+		return mainEditor;
+	},
+	updatePlugins(contentScripts) {
+		for (const editor of allEditors) {
+			void editor.setContentScripts(contentScripts);
+		}
+	},
+	updateSettings(settings) {
+		for (const editor of allEditors) {
+			editor.updateSettings(settings);
+		}
+	},
+});
+
+
+export const createEditorWithParent = ({
+	parentElementOrClassName,
 	initialText,
 	initialNoteId,
 	settings,
-	onLocalize,
-}: EditorProps) => {
-	const messenger = new WebViewToRNMessenger<EditorProcessApi, MainProcessApi>('markdownEditor', null);
-
-	const parentElement = document.getElementsByClassName(parentElementClassName)[0] as HTMLElement;
+	onEvent,
+}: EditorWithParentProps) => {
+	const parentElement = (() => {
+		if (parentElementOrClassName instanceof HTMLElement) {
+			return parentElementOrClassName;
+		}
+		return document.getElementsByClassName(parentElementOrClassName)[0] as HTMLElement;
+	})();
 	if (!parentElement) {
-		throw new Error(`Unable to find parent element for editor (class name: ${JSON.stringify(parentElementClassName)})`);
+		throw new Error(`Unable to find parent element for editor (class name: ${JSON.stringify(parentElementOrClassName)})`);
 	}
 
 	const control = createEditor(parentElement, {
 		initialText,
 		initialNoteId,
 		settings,
-		onLocalize,
+		onLocalize: messenger.remoteApi.onLocalize,
 
 		onPasteFile: async (data) => {
 			const base64 = await readFileToBase64(data);
@@ -34,14 +61,32 @@ export const initializeEditor = ({
 		onLogMessage: message => {
 			void messenger.remoteApi.logMessage(message);
 		},
-		onEvent: (event): void => {
-			void messenger.remoteApi.onEditorEvent(event);
+		onEvent: (event) => {
+			onEvent(event);
+
+			if (event.kind === EditorEventType.Remove) {
+				allEditors = allEditors.filter(other => other !== control);
+			}
 		},
 		resolveImageSrc: (src) => {
 			return messenger.remoteApi.onResolveImageSrc(src);
 		},
 	});
 
+	allEditors.push(control);
+	void messenger.remoteApi.onEditorAdded();
+
+	return control;
+};
+
+export const createMainEditor = (props: EditorProps) => {
+	const control = createEditorWithParent({
+		...props,
+		onEvent: (event) => {
+			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.
@@ -57,6 +102,7 @@ export const initializeEditor = ({
 
 	// Note: Just adding an onclick listener seems sufficient to focus the editor when its background
 	// is tapped.
+	const parentElement = control.editor.dom.parentElement;
 	parentElement.addEventListener('click', (event) => {
 		const activeElement = document.querySelector(':focus');
 		if (!parentElement.contains(activeElement) && event.target === parentElement) {
@@ -64,8 +110,9 @@ export const initializeEditor = ({
 		}
 	});
 
-	messenger.setLocalInterface({
-		editor: control,
-	});
+	mainEditor = control;
 	return control;
 };
+
+window.createEditorWithParent = createEditorWithParent;
+window.createMainEditor = createMainEditor;

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

@@ -1,8 +1,29 @@
 import { EditorEvent } from '@joplin/editor/events';
-import { EditorControl, EditorSettings, OnLocalize } from '@joplin/editor/types';
+import { ContentScriptData, EditorControl, EditorSettings, LocalizationResult } from '@joplin/editor/types';
+
+
+export interface EditorProps {
+	parentElementOrClassName: HTMLElement|string;
+	initialText: string;
+	initialNoteId: string|null;
+	settings: EditorSettings;
+}
+
+export interface EditorWithParentProps extends EditorProps {
+	onEvent: (editorEvent: EditorEvent)=> void;
+}
+
+// The Markdown editor exposes global functions within its <WebView>.
+// These functions can be used externally.
+export interface ExportedWebViewGlobals {
+	createEditorWithParent: (options: EditorWithParentProps)=> EditorControl;
+	createMainEditor: (props: EditorProps)=> EditorControl;
+}
 
 export interface EditorProcessApi {
-	editor: EditorControl;
+	mainEditor: EditorControl;
+	updateSettings: (settings: EditorSettings)=> void;
+	updatePlugins: (contentScripts: ContentScriptData[])=> void;
 }
 
 export interface SelectionRange {
@@ -10,16 +31,10 @@ export interface SelectionRange {
 	end: number;
 }
 
-export interface EditorProps {
-	parentElementClassName: string;
-	initialText: string;
-	initialNoteId: string;
-	onLocalize: OnLocalize;
-	settings: EditorSettings;
-}
-
 export interface MainProcessApi {
+	onLocalize(text: string): LocalizationResult;
 	onEditorEvent(event: EditorEvent): Promise<void>;
+	onEditorAdded(): Promise<void>;
 	logMessage(message: string): Promise<void>;
 	onPasteFile(type: string, dataBase64: string): Promise<void>;
 	onResolveImageSrc(src: string): Promise<string|null>;

packages/app-mobile/contentScripts/markdownEditorBundle/useWebViewSetup.ts

@@ -7,6 +7,9 @@ import { OnMessageEvent, WebViewControl } from '../../components/ExtendedWebView
 import { EditorEvent } from '@joplin/editor/events';
 import Logger from '@joplin/utils/Logger';
 import RNToWebViewMessenger from '../../utils/ipc/RNToWebViewMessenger';
+import { _ } from '@joplin/lib/locale';
+import { PluginStates } from '@joplin/lib/services/plugins/reducer';
+import useCodeMirrorPlugins from './utils/useCodeMirrorPlugins';
 import Resource from '@joplin/lib/models/Resource';
 import { parseResourceUrl } from '@joplin/lib/urlUtils';
 const { isImageMimeType } = require('@joplin/lib/resourceUtils');
@@ -15,9 +18,10 @@ const logger = Logger.create('markdownEditor');
 
 interface Props {
 	editorOptions: EditorOptions;
-	initialSelection: SelectionRange;
+	initialSelection: SelectionRange|null;
 	noteHash: string;
 	globalSearch: string;
+	pluginStates: PluginStates;
 	onEditorEvent: (event: EditorEvent)=> void;
 	onAttachFile: (mime: string, base64: string)=> void;
 
@@ -33,9 +37,11 @@ const defaultSearchState: SearchState = {
 	dialogVisible: false,
 };
 
+type Result = SetUpResult<EditorProcessApi> & { hasPlugins: boolean };
+
 const useWebViewSetup = ({
-	editorOptions, initialSelection, noteHash, globalSearch, webviewRef, onEditorEvent, onAttachFile,
-}: Props): SetUpResult<EditorProcessApi> => {
+	editorOptions, pluginStates, initialSelection, noteHash, globalSearch, webviewRef, onEditorEvent, onAttachFile,
+}: Props): Result => {
 	const setInitialSelectionJs = initialSelection ? `
 		cm.select(${initialSelection.start}, ${initialSelection.end});
 		cm.execCommand('scrollSelectionIntoView');
@@ -51,20 +57,21 @@ const useWebViewSetup = ({
 	` : '';
 
 	const injectedJavaScript = useMemo(() => `
+		if (typeof markdownEditorBundle === 'undefined') {
+			${shim.injectedJs('markdownEditorBundle')};
+			window.markdownEditorBundle = markdownEditorBundle;
+			markdownEditorBundle.setUpLogger();
+		}
+
 		if (!window.cm) {
-			const parentClassName = ${JSON.stringify(editorOptions.parentElementClassName)};
-			const foundParent = document.getElementsByClassName(parentClassName).length > 0;
+			const parentClassName = ${JSON.stringify(editorOptions?.parentElementOrClassName)};
+			const foundParent = !!parentClassName && document.getElementsByClassName(parentClassName).length > 0;
 
 			// On Android, injectedJavaScript can be run multiple times, including once before the
 			// document has loaded. To avoid logging an error each time the editor starts, don't throw
 			// if the parent element can't be found:
 			if (foundParent) {
-				${shim.injectedJs('markdownEditorBundle')};
-				markdownEditorBundle.setUpLogger();
-
-				window.cm = markdownEditorBundle.initializeEditor(
-					${JSON.stringify(editorOptions)}
-				);
+				window.cm = markdownEditorBundle.createMainEditor(${JSON.stringify(editorOptions)});
 
 				${jumpToHashJs}
 				// Set the initial selection after jumping to the header -- the initial selection,
@@ -75,7 +82,7 @@ const useWebViewSetup = ({
 				window.onresize = () => {
 					cm.execCommand('scrollSelectionIntoView');
 				};
-			} else {
+			} else if (parentClassName) {
 				console.log('No parent element found with class name ', parentClassName);
 			}
 		}
@@ -101,6 +108,10 @@ const useWebViewSetup = ({
 	const onAttachRef = useRef(onAttachFile);
 	onAttachRef.current = onAttachFile;
 
+	const codeMirrorPlugins = useCodeMirrorPlugins(pluginStates);
+	const codeMirrorPluginsRef = useRef(codeMirrorPlugins);
+	codeMirrorPluginsRef.current = codeMirrorPlugins;
+
 	const editorMessenger = useMemo(() => {
 		const localApi: MainProcessApi = {
 			async onEditorEvent(event) {
@@ -112,6 +123,13 @@ const useWebViewSetup = ({
 			async onPasteFile(type, data) {
 				onAttachRef.current(type, data);
 			},
+			async onLocalize(text) {
+				const localizationFunction = _;
+				return localizationFunction(text);
+			},
+			async onEditorAdded() {
+				messenger.remoteApi.updatePlugins(codeMirrorPluginsRef.current);
+			},
 			async onResolveImageSrc(src) {
 				const url = parseResourceUrl(src);
 				if (!url.itemId) return null;
@@ -153,17 +171,22 @@ const useWebViewSetup = ({
 
 	const editorSettings = editorOptions.settings;
 	useEffect(() => {
-		api.editor.updateSettings(editorSettings);
+		api.updateSettings(editorSettings);
 	}, [api, editorSettings]);
 
+	useEffect(() => {
+		api.updatePlugins(codeMirrorPlugins);
+	}, [codeMirrorPlugins, api]);
+
 	return useMemo(() => ({
 		pageSetup: {
 			js: injectedJavaScript,
 			css: '',
 		},
+		hasPlugins: codeMirrorPlugins.length > 0,
 		api,
 		webViewEventHandlers,
-	}), [injectedJavaScript, api, webViewEventHandlers]);
+	}), [injectedJavaScript, api, webViewEventHandlers, codeMirrorPlugins]);
 };
 
 export default useWebViewSetup;

packages/app-mobile/contentScripts/markdownEditorBundle/utils/useCodeMirrorPlugins.ts

@@ -0,0 +1,58 @@
+import { ContentScriptData } from '@joplin/editor/types';
+import PluginService from '@joplin/lib/services/plugins/PluginService';
+import { ContentScriptType } from '@joplin/lib/services/plugins/api/types';
+import { PluginStates } from '@joplin/lib/services/plugins/reducer';
+import shim from '@joplin/lib/shim';
+import Logger from '@joplin/utils/Logger';
+import { dirname } from '@joplin/utils/path';
+import { useMemo } from 'react';
+
+const logger = Logger.create('useCodeMirrorPlugins');
+
+const useCodeMirrorPlugins = (pluginStates: PluginStates) => {
+	return useMemo(() => {
+		const pluginService = PluginService.instance();
+
+		const plugins: ContentScriptData[] = [];
+
+		for (const pluginState of Object.values(pluginStates)) {
+			const pluginId = pluginState.id;
+			const contentScripts = pluginState.contentScripts[ContentScriptType.CodeMirrorPlugin] ?? [];
+
+			if (!pluginService.plugins[pluginId]) {
+				// This can happen just after uninstalling a plugin -- the pluginState still exists but the plugin
+				// isn't registered with the PluginService.
+				logger.warn(`Plugin ${pluginId} not loaded but is present in contentScripts.`);
+				continue;
+			}
+
+			const plugin = pluginService.pluginById(pluginId);
+
+			for (const contentScript of contentScripts) {
+				const contentScriptId = contentScript.id;
+				plugins.push({
+					pluginId,
+					contentScriptId,
+					contentScriptJs: async () => {
+						return await shim.fsDriver().readFile(contentScript.path);
+					},
+					loadCssAsset: (name: string) => {
+						// TODO: This logic is currently shared with app-desktop. Refactor
+						const assetPath = dirname(contentScript.path);
+						const path = shim.fsDriver().resolveRelativePathWithinDir(assetPath, name);
+						return shim.fsDriver().readFile(path, 'utf8');
+					},
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
+					postMessageHandler: async (message: any): Promise<any> => {
+						logger.debug(`Got message from plugin ${pluginId} content script ${contentScriptId}. Message:`, message);
+						return plugin.emitContentScriptMessage(contentScriptId, message);
+					},
+				});
+			}
+		}
+
+		return plugins;
+	}, [pluginStates]);
+};
+
+export default useCodeMirrorPlugins;

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

@@ -7,6 +7,8 @@ import '@joplin/editor/ProseMirror/styles';
 import readFileToBase64 from '../../utils/readFileToBase64';
 import { EditorLanguageType } from '@joplin/editor/types';
 import convertHtmlToMarkdown from './convertHtmlToMarkdown';
+import { ExportedWebViewGlobals as MarkdownEditorWebViewGlobals } from '../../markdownEditorBundle/types';
+import { EditorEventType } from '@joplin/editor/events';
 
 const postprocessHtml = (html: HTMLElement) => {
 	// Fix resource URLs
@@ -35,13 +37,16 @@ const htmlToMarkdown = (html: HTMLElement): string => {
 	return convertHtmlToMarkdown(html);
 };
 
-export const initialize = async ({
-	settings,
-	initialText,
-	initialNoteId,
-	parentElementClassName,
-	initialSearch,
-}: EditorProps) => {
+export const initialize = async (
+	{
+		settings,
+		initialText,
+		initialNoteId,
+		parentElementClassName,
+		initialSearch,
+	}: EditorProps,
+	markdownEditorApi: MarkdownEditorWebViewGlobals,
+) => {
 	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');
@@ -109,6 +114,18 @@ export const initialize = async ({
 				return postprocessHtml(html).outerHTML;
 			}
 		},
+	}, (parent, language, onChange) => {
+		return markdownEditorApi.createEditorWithParent({
+			initialText: '',
+			initialNoteId: '',
+			parentElementOrClassName: parent,
+			settings: { ...editor.getSettings(), language },
+			onEvent: (event) => {
+				if (event.kind === EditorEventType.Change) {
+					onChange(event.value);
+				}
+			},
+		});
 	});
 	editor.setSearchState(initialSearch);
 

packages/app-mobile/contentScripts/richTextEditorBundle/useWebViewSetup.ts

@@ -4,6 +4,7 @@ import { SetUpResult } from '../types';
 import { EditorControl, EditorSettings } from '@joplin/editor/types';
 import RNToWebViewMessenger from '../../utils/ipc/RNToWebViewMessenger';
 import { EditorProcessApi, EditorProps, MainProcessApi } from './types';
+import useMarkdownEditorSetup from '../markdownEditorBundle/useWebViewSetup';
 import useRendererSetup from '../rendererBundle/useWebViewSetup';
 import { EditorEvent } from '@joplin/editor/events';
 import Logger from '@joplin/utils/Logger';
@@ -92,7 +93,10 @@ const useMessenger = (props: UseMessengerProps) => {
 	}, [props.webviewRef]);
 };
 
-type UseSourceProps = Props & { renderer: SetUpResult<RendererControl> };
+type UseSourceProps = Props & {
+	renderer: SetUpResult<RendererControl>;
+	markdownEditor: SetUpResult<unknown>;
+};
 
 const useSource = (props: UseSourceProps) => {
 	const propsRef = useRef(props);
@@ -100,6 +104,8 @@ const useSource = (props: UseSourceProps) => {
 
 	const rendererJs = props.renderer.pageSetup.js;
 	const rendererCss = props.renderer.pageSetup.css;
+	const markdownEditorJs = props.markdownEditor.pageSetup.js;
+	const markdownEditorCss = props.markdownEditor.pageSetup.css;
 
 	return useMemo(() => {
 		const editorOptions: EditorProps = {
@@ -117,6 +123,7 @@ const useSource = (props: UseSourceProps) => {
 			css: `
 				${shim.injectedCss('richTextEditorBundle')}
 				${rendererCss}
+				${markdownEditorCss}
 
 				/* Increase the size of the editor to make it easier to focus the editor. */
 				.prosemirror-editor {
@@ -125,19 +132,23 @@ const useSource = (props: UseSourceProps) => {
 			`,
 			js: `
 				${rendererJs}
+				${markdownEditorJs}
 
 				if (!window.richTextEditorCreated) {
 					window.richTextEditorCreated = true;
 					${shim.injectedJs('richTextEditorBundle')}
 					richTextEditorBundle.setUpLogger();
-					richTextEditorBundle.initialize(${JSON.stringify(editorOptions)}).then(function(editor) {
+					richTextEditorBundle.initialize(
+						${JSON.stringify(editorOptions)},
+						window,
+					).then(function(editor) {
 						/* For testing */
 						window.joplinRichTextEditor_ = editor;
 					});
 				}
 			`,
 		};
-	}, [rendererJs, rendererCss]);
+	}, [rendererJs, rendererCss, markdownEditorCss, markdownEditorJs]);
 };
 
 const useWebViewSetup = (props: Props): SetUpResult<EditorControl> => {
@@ -148,8 +159,23 @@ const useWebViewSetup = (props: Props): SetUpResult<EditorControl> => {
 		pluginStates: props.pluginStates,
 		themeId: props.themeId,
 	});
+	const markdownEditor = useMarkdownEditorSetup({
+		webviewRef: props.webviewRef,
+		onAttachFile: props.onAttachFile,
+		initialSelection: null,
+		noteHash: '',
+		globalSearch: props.globalSearch,
+		editorOptions: {
+			settings: props.settings,
+			initialNoteId: null,
+			parentElementOrClassName: '',
+			initialText: '',
+		},
+		onEditorEvent: (_event)=>{},
+		pluginStates: props.pluginStates,
+	});
 	const messenger = useMessenger({ ...props, renderer });
-	const pageSetup = useSource({ ...props, renderer });
+	const pageSetup = useSource({ ...props, renderer, markdownEditor });
 
 	useEffect(() => {
 		void messenger.remoteApi.editor.updateSettings(props.settings);
@@ -163,14 +189,16 @@ const useWebViewSetup = (props: Props): SetUpResult<EditorControl> => {
 				onLoadEnd: () => {
 					messenger.onWebViewLoaded();
 					renderer.webViewEventHandlers.onLoadEnd();
+					markdownEditor.webViewEventHandlers.onLoadEnd();
 				},
 				onMessage: (event) => {
 					messenger.onWebViewMessage(event);
 					renderer.webViewEventHandlers.onMessage(event);
+					markdownEditor.webViewEventHandlers.onMessage(event);
 				},
 			},
 		};
-	}, [messenger, pageSetup, renderer.webViewEventHandlers]);
+	}, [messenger, pageSetup, renderer.webViewEventHandlers, markdownEditor.webViewEventHandlers]);
 };
 
 export default useWebViewSetup;