import htmlUtils from './htmlUtils'; import linkReplacement from './MdToHtml/linkReplacement'; import utils from './utils'; // TODO: fix // import Setting from '@joplin/lib/models/Setting'; // const { themeStyle } = require('@joplin/lib/theme'); import InMemoryCache from './InMemoryCache'; const md5 = require('md5'); // Renderered notes can potentially be quite large (for example // when they come from the clipper) so keep the cache size // relatively small. const inMemoryCache = new InMemoryCache(10); interface FsDriver { writeFile: Function; exists: Function; cacheCssToFile: Function; } interface Options { ResourceModel: any; resourceBaseUrl?: string; fsDriver?: FsDriver; } interface RenderOptions { splitted: boolean; bodyOnly: boolean; externalAssetsOnly: boolean; resources: any; postMessageSyntax: string; enableLongPress: boolean; } interface RenderResult { html: string; pluginAssets: any[]; } export default class HtmlToHtml { private resourceBaseUrl_; private ResourceModel_; private cache_; private fsDriver_: any; constructor(options: Options = null) { options = { ResourceModel: null, ...options, }; this.resourceBaseUrl_ = 'resourceBaseUrl' in options ? options.resourceBaseUrl : null; this.ResourceModel_ = options.ResourceModel; this.cache_ = inMemoryCache; this.fsDriver_ = { writeFile: (/* path, content, encoding = 'base64'*/) => { throw new Error('writeFile not set'); }, exists: (/* path*/) => { throw new Error('exists not set'); }, cacheCssToFile: (/* cssStrings*/) => { throw new Error('cacheCssToFile not set'); }, }; if (options.fsDriver) { if (options.fsDriver.writeFile) this.fsDriver_.writeFile = options.fsDriver.writeFile; if (options.fsDriver.exists) this.fsDriver_.exists = options.fsDriver.exists; if (options.fsDriver.cacheCssToFile) this.fsDriver_.cacheCssToFile = options.fsDriver.cacheCssToFile; } } fsDriver() { return this.fsDriver_; } splitHtml(html: string) { const trimmedHtml = html.trimStart(); if (trimmedHtml.indexOf(''); if (closingIndex < 0) return { html: html, css: '' }; return { html: trimmedHtml.substr(closingIndex + 8), css: trimmedHtml.substr(7, closingIndex), }; } async allAssets(/* theme*/): Promise { return []; // TODO } // Note: the "theme" variable is ignored and instead the light theme is // always used for HTML notes. // See: https://github.com/laurent22/joplin/issues/3698 async render(markup: string, _theme: any, options: RenderOptions): Promise { options = { splitted: false, postMessageSyntax: 'postMessage', enableLongPress: false, ...options, }; const cacheKey = md5(escape(markup)); let html = this.cache_.value(cacheKey); if (!html) { html = htmlUtils.sanitizeHtml(markup); html = htmlUtils.processImageTags(html, (data: any) => { if (!data.src) return null; const r = utils.imageReplacement(this.ResourceModel_, data.src, options.resources, this.resourceBaseUrl_); if (!r) return null; if (typeof r === 'string') { return { type: 'replaceElement', html: r, }; } else { return { type: 'setAttributes', attrs: r, }; } }); html = htmlUtils.processAnchorTags(html, (data: any) => { if (!data.href) return null; const r = linkReplacement(data.href, { resources: options.resources, ResourceModel: this.ResourceModel_, postMessageSyntax: options.postMessageSyntax, enableLongPress: options.enableLongPress, }); if (!r.html) return null; return { type: 'replaceElement', html: r.html, }; }); } this.cache_.setValue(cacheKey, html, 1000 * 60 * 10); if (options.bodyOnly) { return { html: html, pluginAssets: [], }; } // const lightTheme = themeStyle(Setting.THEME_LIGHT); // let cssStrings = noteStyle(lightTheme); let cssStrings: string[] = []; if (options.splitted) { const splitted = this.splitHtml(html); cssStrings = [splitted.css].concat(cssStrings); const output: RenderResult = { html: splitted.html, pluginAssets: [], }; if (options.externalAssetsOnly) { output.pluginAssets.push(await this.fsDriver().cacheCssToFile(cssStrings)); } return output; } const styleHtml = ``; return { html: styleHtml + html, pluginAssets: [], }; } }