Mobile: Resolves #12841: Allow editing code blocks from the Rich Text Editor (#12906)

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

@@ -16,22 +16,6 @@ const postprocessHtml = (html: HTMLElement) => {
 		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;
 };
 
@@ -73,6 +57,7 @@ export const initialize = async ({
 		settings,
 		initialText,
 		initialNoteId,
+		onLocalize: messenger.remoteApi.onLocalize,
 
 		onPasteFile: async (data) => {
 			const base64 = await readFileToBase64(data);
@@ -85,14 +70,20 @@ export const initialize = async ({
 			void messenger.remoteApi.onEditorEvent(event);
 		},
 	}, {
-		renderMarkupToHtml: async (markup) => {
+		renderMarkupToHtml: async (markup, options) => {
+			let language = MarkupLanguage.Markdown;
+			if (settings.language === EditorLanguageType.Html && !options.forceMarkdown) {
+				language = MarkupLanguage.Html;
+			}
+
 			return await messenger.remoteApi.onRender({
 				markup,
-				language: settings.language === EditorLanguageType.Html ? MarkupLanguage.Html : MarkupLanguage.Markdown,
+				language,
 			}, {
 				pluginAssetContainerSelector: `#${assetContainer.id}`,
 				splitted: true,
 				mapsToLine: true,
+				removeUnusedPluginAssets: options.isFullPageRender,
 			});
 		},
 		renderHtmlToMarkup: (node) => {

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

@@ -1,5 +1,5 @@
 import { EditorEvent } from '@joplin/editor/events';
-import { EditorControl, EditorSettings, SearchState } from '@joplin/editor/types';
+import { EditorControl, EditorSettings, OnLocalize, SearchState } from '@joplin/editor/types';
 import { MarkupRecord, RendererControl } from '../rendererBundle/types';
 import { RenderResult } from '@joplin/renderer/types';
 
@@ -19,6 +19,7 @@ type RenderOptionsSlice = {
 	pluginAssetContainerSelector: string;
 	splitted: boolean;
 	mapsToLine: true;
+	removeUnusedPluginAssets: boolean;
 };
 
 export interface MainProcessApi {
@@ -26,6 +27,7 @@ export interface MainProcessApi {
 	logMessage(message: string): Promise<void>;
 	onRender(markup: MarkupRecord, options: RenderOptionsSlice): Promise<RenderResult>;
 	onPasteFile(type: string, base64: string): Promise<void>;
+	onLocalize: OnLocalize;
 }
 
 export interface RichTextEditorControl {

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

@@ -11,6 +11,7 @@ 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';
+import { _ } from '@joplin/lib/locale';
 import { defaultSearchState } from '../../components/NoteEditor/SearchPanel';
 
 const logger = Logger.create('useWebViewSetup');
@@ -50,6 +51,7 @@ const useMessenger = (props: UseMessengerProps) => {
 		noteHash: '',
 		initialScroll: 0,
 		pluginAssetContainerSelector: null,
+		removeUnusedPluginAssets: true,
 	};
 
 	return useMemo(() => {
@@ -70,6 +72,7 @@ const useMessenger = (props: UseMessengerProps) => {
 						splitted: options.splitted,
 						pluginAssetContainerSelector: options.pluginAssetContainerSelector,
 						mapsToLine: options.mapsToLine,
+						removeUnusedPluginAssets: options.removeUnusedPluginAssets,
 					},
 				);
 				return renderResult;
@@ -77,6 +80,7 @@ const useMessenger = (props: UseMessengerProps) => {
 			onPasteFile: async (type: string, base64: string) => {
 				onAttachRef.current(type, base64);
 			},
+			onLocalize: _,
 		};
 
 		const messenger = new RNToWebViewMessenger<MainProcessApi, EditorProcessApi>(