import MdToHtml, { LinkRenderingType, Options as MdToHtmlConstructorOptions } from '@joplin/renderer/MdToHtml'; import { filename } from '@joplin/lib/path-utils'; import { setupDatabaseAndSynchronizer, switchClient } from '@joplin/lib/testing/test-utils'; import shim from '@joplin/lib/shim'; import { RenderOptions } from '@joplin/renderer/types'; import { isResourceUrl, resourceUrlToId } from '@joplin/lib/models/utils/resourceUtils'; import { themeStyle } from '@joplin/lib/theme'; function newTestMdToHtml(options: Partial = null) { const merged: MdToHtmlConstructorOptions = { ResourceModel: { isResourceUrl: isResourceUrl, urlToId: resourceUrlToId, fullPath: () => '/some/path/here', } as unknown as MdToHtmlConstructorOptions['ResourceModel'], fsDriver: shim.fsDriver(), ...options, }; return new MdToHtml(merged); } describe('MdToHtml', () => { beforeEach(async () => { await setupDatabaseAndSynchronizer(1); await switchClient(1); }); it('should convert from Markdown to Html', (async () => { const basePath = `${__dirname}/md_to_html`; const files = await shim.fsDriver().readDirStats(basePath); const mdToHtml = newTestMdToHtml(); for (let i = 0; i < files.length; i++) { const mdFilename = files[i].path; if (mdFilename.indexOf('.md') < 0) continue; const mdFilePath = `${basePath}/${mdFilename}`; const htmlPath = `${basePath}/${filename(mdFilePath)}.html`; // if (mdFilename !== 'sanitize_9.md') continue; const mdToHtmlOptions: RenderOptions = { bodyOnly: true, }; if (mdFilename === 'checkbox_alternative.md') { mdToHtmlOptions.plugins = { checkbox: { checkboxRenderingType: 2, }, }; } else if (mdFilename.startsWith('sourcemap_')) { mdToHtmlOptions.mapsToLine = true; } else if (mdFilename.startsWith('resource_')) { mdToHtmlOptions.resources = {}; } else if (mdFilename.startsWith('pdf_')) { mdToHtmlOptions.resources = { '00000000000000000000000000000001': { item: { mime: 'application/pdf' }, localState: { }, }, }; mdToHtmlOptions.pdfViewerEnabled = true; } else if (mdFilename.startsWith('video_')) { mdToHtmlOptions.resources = { '00000000000000000000000000000001': { item: { mime: 'video/mp4' }, localState: { }, }, }; } const markdown = await shim.fsDriver().readFile(mdFilePath); let expectedHtml = await shim.fsDriver().readFile(htmlPath); const result = await mdToHtml.render(markdown, null, mdToHtmlOptions); let actualHtml = result.html; expectedHtml = expectedHtml.replace(/\r?\n/g, '\n'); actualHtml = actualHtml.replace(/\r?\n/g, '\n'); if (actualHtml !== expectedHtml) { const msg: string[] = [ '', `Error converting file: ${mdFilename}`, '--------------------------------- Got:', actualHtml, '--------------------------------- Raw:', actualHtml.split('\n'), '--------------------------------- Expected (Lines)', expectedHtml.split('\n'), '--------------------------------- Expected (Text)', expectedHtml, '--------------------------------------------', '', ]; // Use this to generate the needed file: // await writeFile('/path/to/actual.html', actualHtml, 'utf-8'); // eslint-disable-next-line no-console console.info(msg.join('\n')); expect(actualHtml).toBe(expectedHtml); // return; } else { expect(true).toBe(true); } } })); it('should return enabled plugin assets', (async () => { const pluginOptions: Record = {}; const pluginNames = MdToHtml.pluginNames(); for (const n of pluginNames) pluginOptions[n] = { enabled: false }; { const mdToHtml = newTestMdToHtml({ pluginOptions: pluginOptions }); const assets = await mdToHtml.allAssets(themeStyle(1)); expect(assets.length).toBe(1); // Base note style should always be returned } { pluginOptions['checkbox'].enabled = true; const mdToHtml = newTestMdToHtml({ pluginOptions: pluginOptions }); const assets = await mdToHtml.allAssets(themeStyle(1)); expect(assets.length).toBe(2); expect(assets[1].mime).toBe('text/css'); const content = await shim.fsDriver().readFile(assets[1].path); expect(content.indexOf('joplin-checklist') >= 0).toBe(true); } })); it('should wrapped the rendered Markdown', (async () => { const mdToHtml = newTestMdToHtml(); // In this case, the HTML contains both the style and // the rendered markdown wrapped in a DIV. const result = await mdToHtml.render('just **testing**'); expect(result.cssStrings.length).toBeGreaterThan(0); expect(result.html.indexOf('rendered-md') >= 0).toBe(true); })); it('should return the rendered body only', (async () => { const mdToHtml = newTestMdToHtml(); // In this case, the HTML contains only the rendered markdown, with // no wrapper and no style. The style is instead in the cssStrings // property. { const result = await mdToHtml.render('just **testing**', null, { bodyOnly: true }); expect(result.cssStrings.length).toBeGreaterThan(0); expect(result.html.trim()).toBe('just testing'); } // But it should not remove the wrapping

tags if there's more // than one line { const result = await mdToHtml.render('one\n\ntwo', null, { bodyOnly: true }); expect(result.html.trim()).toBe('

one

\n

two

'); } })); it('should render an empty string', (async () => { const mdToHtml = newTestMdToHtml(); const result = await mdToHtml.render('', null, { splitted: true }); // The TinyMCE component checks for this exact string to apply a hack, // so make sure it doesn't change from version to version. expect(result.html).toBe('
'); })); it('should split HTML and CSS', (async () => { const mdToHtml = newTestMdToHtml(); // It is similar to the bodyOnly option, excepts that the rendered // Markdown is wrapped in a DIV const result = await mdToHtml.render('just **testing**', null, { splitted: true }); expect(result.cssStrings.length).toBeGreaterThan(0); expect(result.html.trim()).toBe('

just testing

\n
'); })); it('should render links correctly', (async () => { const testCases = [ // 0: input // 1: output with linkify = off // 2: output with linkify = on [ 'https://example.com', 'https://example.com', 'https://example.com', ], [ 'file://C:\\AUTOEXEC.BAT', 'file://C:\\AUTOEXEC.BAT', 'file://C:\\AUTOEXEC.BAT', ], [ 'example.com', 'example.com', 'example.com', ], [ 'oo.ps', 'oo.ps', 'oo.ps', ], [ 'test@example.com', 'test@example.com', 'test@example.com', ], [ '', 'https://example.com', 'https://example.com', ], [ '[ok](https://example.com)', 'ok', 'ok', ], [ '[bla.pdf](file:///Users/tessus/Downloads/bla.pdf)', 'bla.pdf', 'bla.pdf', ], ]; const mdToHtmlLinkifyOn = newTestMdToHtml({ pluginOptions: { linkify: { enabled: true }, link_open: { linkRenderingType: LinkRenderingType.HrefHandler, }, }, }); const mdToHtmlLinkifyOff = newTestMdToHtml({ pluginOptions: { linkify: { enabled: false }, }, }); const renderOptions = { bodyOnly: true, plainResourceRendering: true, linkRenderingType: LinkRenderingType.HrefHandler, }; for (const testCase of testCases) { const [input, expectedLinkifyOff, expectedLinkifyOn] = testCase; { const actual = await mdToHtmlLinkifyOn.render(input, null, renderOptions); expect(actual.html).toBe(expectedLinkifyOn); } { const actual = await mdToHtmlLinkifyOff.render(input, null, renderOptions); expect(actual.html).toBe(expectedLinkifyOff); } } })); it.each([ '[test](http://example.com/)', '[test](mailto:test@example.com)', ])('should add onclick handlers to links when linkRenderingType is JavaScriptHandler (%j)', async (markdown) => { const mdToHtml = newTestMdToHtml(); const renderWithoutOnClickOptions = { bodyOnly: true, linkRenderingType: LinkRenderingType.HrefHandler, }; expect( (await mdToHtml.render(markdown, undefined, renderWithoutOnClickOptions)).html, ).not.toContain('onclick'); const renderWithOnClickOptions = { bodyOnly: true, linkRenderingType: LinkRenderingType.JavaScriptHandler, }; expect( (await mdToHtml.render(markdown, undefined, renderWithOnClickOptions)).html, ).toMatch(//); }); it('should render media players with HrefHandler links when requested', async () => { const audioResourceId = '00000000000000000000000000000001'; const videoResourceId = '00000000000000000000000000000002'; const mdToHtml = newTestMdToHtml(); const result = await mdToHtml.render( `[Recording](:/${audioResourceId})\n\n[Demo](:/${videoResourceId})`, null, { bodyOnly: true, renderMedia: true, autoplayVideo: true, plugins: { link_open: { linkRenderingType: LinkRenderingType.HrefHandler, }, }, resources: { [audioResourceId]: { item: { id: audioResourceId, title: 'Recording', mime: 'audio/mpeg' }, localState: {}, }, [videoResourceId]: { item: { id: videoResourceId, title: 'Demo', mime: 'video/mp4' }, localState: {}, }, }, }, ); expect(result.html).toContain(`href='joplin://${audioResourceId}'`); expect(result.html).toContain(`href='joplin://${videoResourceId}'`); expect(result.html).not.toContain('onclick='); expect(result.html).toContain('