Mobile: Plugin API: Add support for the renderMarkup command (#11494)

packages/lib/commands/index.ts

@@ -4,6 +4,7 @@ import * as historyBackward from './historyBackward';
 import * as historyForward from './historyForward';
 import * as openMasterPasswordDialog from './openMasterPasswordDialog';
 import * as permanentlyDeleteNote from './permanentlyDeleteNote';
+import * as renderMarkup from './renderMarkup';
 import * as synchronize from './synchronize';
 
 const index: any[] = [
@@ -12,6 +13,7 @@ const index: any[] = [
 	historyForward,
 	openMasterPasswordDialog,
 	permanentlyDeleteNote,
+	renderMarkup,
 	synchronize,
 ];
 

packages/lib/commands/renderMarkup.test.ts

@@ -0,0 +1,47 @@
+import shim from '../shim';
+import Resource from '../models/Resource';
+import Note from '../models/Note';
+import { setupDatabaseAndSynchronizer, supportDir, switchClient } from '../testing/test-utils';
+import { runtime } from './renderMarkup';
+import { MarkupLanguage } from '@joplin/renderer';
+const testImagePath = `${supportDir}/photo.jpg`;
+
+const command = runtime();
+
+describe('renderMarkup', () => {
+
+	beforeEach(async () => {
+		await setupDatabaseAndSynchronizer(1);
+		await switchClient(1);
+	});
+
+	test('should return the rendered note as HTML', async () => {
+		{
+			const renderedNote = await command.execute(null, MarkupLanguage.Markdown, 'hello **strong**');
+			expect(renderedNote.html).toBe('<div id="rendered-md"><p>hello <strong>strong</strong></p>\n</div>');
+			expect(!!renderedNote.pluginAssets).toBe(true);
+			expect(!!renderedNote.cssStrings).toBe(true);
+		}
+
+		{
+			const renderedNote = await await command.execute(null, MarkupLanguage.Markdown, '- [ ] Beer\n- [x] Milk\n- [ ] Eggs');
+			expect(renderedNote.html).toContain('checkbox-label-unchecked">Beer');
+			expect(renderedNote.html).toContain('checkbox-label-checked">Milk');
+			expect(renderedNote.html).toContain('checkbox-label-unchecked">Eggs');
+			expect(!!renderedNote.pluginAssets).toBe(true);
+			expect(!!renderedNote.cssStrings).toBe(true);
+		}
+
+		{
+			const note = await Note.save({ });
+			await shim.attachFileToNote(note, testImagePath, { resizeLargeImages: 'never' });
+			const resource = (await Resource.all())[0];
+			const noteBody = (await Note.load(note.id)).body;
+			const renderedNote = await await command.execute(null, MarkupLanguage.Markdown, noteBody);
+			expect(renderedNote.html).toContain(`<div id="rendered-md"><p><img data-from-md data-resource-id="${resource.id}" src="`);
+			expect(renderedNote.html).toContain(`/resources-1/${resource.id}.jpg?t=`);
+			expect(renderedNote.html).toContain('" title alt="photo.jpg" /></p>');
+		}
+	});
+
+});

packages/lib/commands/renderMarkup.ts

@@ -0,0 +1,33 @@
+import markupLanguageUtils from '../markupLanguageUtils';
+import Setting from '../models/Setting';
+import { CommandRuntime, CommandDeclaration, CommandContext } from '../services/CommandService';
+import { themeStyle } from '../theme';
+import attachedResources from '../utils/attachedResources';
+import { MarkupLanguage } from '@joplin/renderer';
+import { Options } from '@joplin/renderer/MdToHtml';
+import { RenderOptions } from '@joplin/renderer/types';
+
+export const declaration: CommandDeclaration = {
+	name: 'renderMarkup',
+};
+
+const getMarkupToHtml = () => {
+	return markupLanguageUtils.newMarkupToHtml({}, {
+		resourceBaseUrl: `file://${Setting.value('resourceDir')}/`,
+		customCss: '',
+	});
+};
+
+export const runtime = (): CommandRuntime => {
+	return {
+		execute: async (_context: CommandContext, markupLanguage: MarkupLanguage, markup: string, _rendererOptions: Options = null, renderOptions: RenderOptions = null) => {
+			const markupToHtml = getMarkupToHtml();
+			const html = await markupToHtml.render(markupLanguage, markup, themeStyle(Setting.value('theme')), {
+				...renderOptions,
+				resources: await attachedResources(markup),
+				splitted: true,
+			});
+			return html;
+		},
+	};
+};