1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-18 09:35:20 +02:00
joplin/ReactNativeClient/lib/joplin-renderer/HtmlToHtml.js
Laurent Cozic 84c3ef144d
Desktop: Resolves #176: Added experimental WYSIWYG editor (#2556)
* Trying to get TuiEditor to work

* Tests with TinyMCE

* Fixed build

* Improved asset loading

* Added support for Joplin source blocks

* Added support for Joplin source blocks

* Better integration

* Make sure noteDidUpdate event is always dispatched at the right time

* Minor tweaks

* Fixed tests

* Add support for checkboxes

* Minor refactoring

* Added support for file attachments

* Add support for fenced code blocks

* Fix new line issue on code block

* Added support for Fountain scripts

* Refactoring

* Better handling of saving and loading notes

* Fix saving and loading ntoes

* Handle multi-note selection and fixed new note creation issue

* Fixed newline issue in test

* Fixed newline issue in test

* Improve saving and loading

* Improve saving and loading note

* Removed undeeded prop

* Fixed issue when new note being saved is incorrectly reloaded

* Refactoring and improve saving of note when unmounting component

* Fixed TypeScript error

* Small changes

* Improved further handling of saving and loading notes

* Handle provisional notes and fixed various saving and loading bugs

* Adding back support for HTML notes

* Added support for HTML notes

* Better handling of editable nodes

* Preserve image HTML tag when the size is set

* Handle switching between editor when the note has note finished saving

* Handle templates

* Handle templates

* Handle loading note that is being saved

* Handle note being reloaded via sync

* Clean up

* Clean up and improved logging

* Fixed TS error

* Fixed a few issues

* Fixed test

* Logging

* Various improvements

* Add blockquote support

* Moved CWD operation to shim

* Removed deleted files

* Added support for Joplin commands
2020-03-09 23:24:57 +00:00

109 lines
2.8 KiB
JavaScript

const htmlUtils = require('./htmlUtils');
const utils = require('./utils');
const noteStyle = require('./noteStyle');
const memoryCache = require('memory-cache');
const md5 = require('md5');
class HtmlToHtml {
constructor(options) {
if (!options) options = {};
this.resourceBaseUrl_ = 'resourceBaseUrl' in options ? options.resourceBaseUrl : null;
this.ResourceModel_ = options.ResourceModel;
this.cache_ = new memoryCache.Cache();
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) {
const trimmedHtml = html.trimStart();
if (trimmedHtml.indexOf('<style>') !== 0) return { html: html, cssStrings: [], originalCssHtml: '' };
const closingIndex = trimmedHtml.indexOf('</style>');
if (closingIndex < 0) return { html: html, cssStrings: [], originalCssHtml: '' };
return {
html: trimmedHtml.substr(closingIndex + 8),
css: trimmedHtml.substr(7, closingIndex),
};
}
async render(markup, theme, options) {
options = Object.assign({}, {
splitted: false,
}, options);
const cacheKey = md5(escape(markup));
let html = this.cache_.get(cacheKey);
if (!html) {
html = htmlUtils.sanitizeHtml(markup);
html = htmlUtils.processImageTags(html, data => {
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,
};
}
});
}
this.cache_.put(cacheKey, html, 1000 * 60 * 10);
if (options.bodyOnly) return {
html: html,
pluginAssets: [],
};
let cssStrings = noteStyle(theme, options);
if (options.splitted) {
const splitted = this.splitHtml(html);
cssStrings = [splitted.css].concat(cssStrings);
const output = {
html: splitted.html,
pluginAssets: [],
};
if (options.externalAssetsOnly) {
output.pluginAssets.push(await this.fsDriver().cacheCssToFile(cssStrings));
}
return output;
}
const styleHtml = `<style>${cssStrings.join('\n')}</style>`;
return {
html: styleHtml + html,
pluginAssets: [],
};
}
}
module.exports = HtmlToHtml;