', ['http://test.com/img.png']],
+ ['
', ['http://test.com/img.png', 'http://test.com/img2.png']],
+ ];
+
+ for (let i = 0; i < testCases.length; i++) {
+ const md = testCases[i][0];
+ const expected = testCases[i][1];
+
+ expect(htmlUtils.extractImageUrls(md).join(' ')).toBe(expected.join(' '));
+ }
+
+ done();
+ });
+
+});
\ No newline at end of file
diff --git a/Clipper/joplin-webclipper/content_scripts/index.js b/Clipper/joplin-webclipper/content_scripts/index.js
index 5b5324802..943530de8 100644
--- a/Clipper/joplin-webclipper/content_scripts/index.js
+++ b/Clipper/joplin-webclipper/content_scripts/index.js
@@ -61,7 +61,7 @@
const output = {};
for (let i = 0; i < images.length; i++) {
const img = images[i];
- const src = forceAbsoluteUrls ? absoluteUrl(img.src) : img.src;
+ const src = forceAbsoluteUrls ? absoluteUrl(img.currentSrc) : img.currentSrc;
output[src] = {
width: img.width,
height: img.height,
@@ -112,7 +112,7 @@
}
if (nodeName === 'img') {
- node.src = absoluteUrl(node.src);
+ node.src = absoluteUrl(node.currentSrc);
const imageSize = imageSizes[node.src];
if (imageSize) {
node.width = imageSize.width;
@@ -135,6 +135,8 @@
for (let i = 0; i < childNodes.length; i++) {
const node = childNodes[i];
const nodeName = node.nodeName.toLowerCase();
+ const nodeParent = node.parentNode;
+ const nodeParentName = nodeParent ? nodeParent.nodeName.toLowerCase() : '';
let isVisible = node.nodeType === 1 ? window.getComputedStyle(node).display !== 'none' : true;
if (isVisible && ['script', 'noscript', 'style', 'select', 'option', 'button'].indexOf(nodeName) >= 0) isVisible = false;
@@ -153,6 +155,10 @@
if (a && a.toLowerCase().indexOf('math/tex') >= 0) isVisible = true;
}
+ if (nodeName === 'source' && nodeParentName === 'picture') {
+ isVisible = false
+ }
+
if (!isVisible) {
node.classList.add('joplin-clipper-hidden');
} else {
@@ -179,19 +185,25 @@
// Given a document, return a ';
+ return output;
}
function documentForReadability() {
@@ -223,7 +235,7 @@
async function prepareCommandResponse(command) {
console.info('Got command: ' + command.name);
- const clippedContentResponse = (title, html, imageSizes, anchorNames) => {
+ const clippedContentResponse = (title, html, imageSizes, anchorNames, stylesheets) => {
return {
name: 'clippedContent',
title: title,
@@ -234,6 +246,9 @@
tags: command.tags || '',
image_sizes: imageSizes,
anchor_names: anchorNames,
+ source_command: Object.assign({}, command),
+ convert_to: command.preProcessFor ? command.preProcessFor : 'markdown',
+ stylesheets: stylesheets,
};
}
@@ -255,7 +270,6 @@
} else if (command.name === "isProbablyReaderable") {
const ok = isProbablyReaderable(documentForReadability());
- console.info('isProbablyReaderable', ok);
return { name: 'isProbablyReaderable', value: ok };
} else if (command.name === "completePageHtml") {
@@ -267,7 +281,9 @@
const cleanDocument = document.body.cloneNode(true);
const imageSizes = getImageSizes(document, true);
cleanUpElement(cleanDocument, imageSizes);
- return clippedContentResponse(pageTitle(), cleanDocument.innerHTML, imageSizes, getAnchorNames(document));
+
+ const stylesheets = command.preProcessFor === 'html' ? getStyleSheets(document) : null;
+ return clippedContentResponse(pageTitle(), cleanDocument.innerHTML, imageSizes, getAnchorNames(document), stylesheets);
} else if (command.name === "selectedHtml") {
diff --git a/Clipper/joplin-webclipper/popup/src/App.js b/Clipper/joplin-webclipper/popup/src/App.js
index 109bf8ace..fb2ef624b 100644
--- a/Clipper/joplin-webclipper/popup/src/App.js
+++ b/Clipper/joplin-webclipper/popup/src/App.js
@@ -7,6 +7,20 @@ import led_orange from './led_orange.png';
const { connect } = require('react-redux');
const { bridge } = require('./bridge');
+function commandUserString(command) {
+ const s = [];
+
+ if (command.name === 'simplifiedPageHtml') s.push('Simplified page');
+ if (command.name === 'completePageHtml') s.push('Complete page');
+ if (command.name === 'selectedHtml') s.push('Selection');
+ if (command.name === 'pageUrl') s.push('URL only');
+
+ const p = command.preProcessFor ? command.preProcessFor : 'markdown';
+ s.push('(' + p + ')');
+
+ return s.join(' ');
+}
+
class PreviewComponent extends React.PureComponent {
constructor() {
@@ -17,7 +31,7 @@ class PreviewComponent extends React.PureComponent {
componentDidMount() {
if (!this.bodyRef.current) return;
-
+
// Because the text size is made twice smaller with CSS, we need
// to also reduce the size of the images
const imgs = this.bodyRef.current.getElementsByTagName('img');
@@ -32,6 +46,7 @@ class PreviewComponent extends React.PureComponent {
' + requestNote.body_html + '
', {
- baseUrl: requestNote.base_url ? requestNote.base_url : '',
- anchorNames: requestNote.anchor_names ? requestNote.anchor_names : [],
- });
+ if (requestNote.convert_to === 'html') {
+ const style = await this.buildNoteStyleSheet_(requestNote.stylesheets);
+ const styleTag = style.length ? '' + '\n' : '';
- // Note: to save the note as HTML, use the code below:
- // const minify = require('html-minifier').minify;
- // output.body = minify(requestNote.body_html, { collapseWhitespace: true });
+ const minify = require('html-minifier').minify;
+ output.body = minify(styleTag + requestNote.body_html, {
+ // Remove all spaces and, especially, newlines from tag attributes, as that would
+ // break the rendering.
+ customAttrCollapse: /.*/,
+ // Need to remove all whitespaces because whitespace at a beginning of a line
+ // means a code block in Markdown.
+ collapseWhitespace: true,
+ });
+ output.markup_language = Note.MARKUP_LANGUAGE_HTML;
+ } else { // Convert to Markdown
+ // Parsing will not work if the HTML is not wrapped in a top level tag, which is not guaranteed
+ // when getting the content from elsewhere. So here wrap it - it won't change anything to the final
+ // rendering but it makes sure everything will be parsed.
+ output.body = await this.htmlToMdParser().parse('' + requestNote.body_html + '
', {
+ baseUrl: requestNote.base_url ? requestNote.base_url : '',
+ anchorNames: requestNote.anchor_names ? requestNote.anchor_names : [],
+ });
+ output.markup_language = Note.MARKUP_LANGUAGE_MARKDOWN;
+ }
}
if (requestNote.parent_id) {
@@ -486,6 +501,32 @@ class Api {
return newImagePath;
}
+ async buildNoteStyleSheet_(stylesheets) {
+ if (!stylesheets) return [];
+
+ const output = [];
+
+ for (const stylesheet of stylesheets) {
+ if (stylesheet.type === 'text') {
+ output.push(stylesheet.value);
+ } else if (stylesheet.type === 'url') {
+ try {
+ const tempPath = Setting.value('tempDir') + '/' + md5(Math.random() + '_' + Date.now()) + '.css';
+ await shim.fetchBlob(stylesheet.value, { path: tempPath, maxRetry: 1 });
+ const text = await shim.fsDriver().readFile(tempPath);
+ output.push(text);
+ await shim.fsDriver().remove(tempPath);
+ } catch (error) {
+ this.logger().warn('Cannot download stylesheet at ' + stylesheet.value, error);
+ }
+ } else {
+ throw new Error('Invalid stylesheet type: ' + stylesheet.type);
+ }
+ }
+
+ return output;
+ }
+
async downloadImage_(url, allowFileProtocolImages) {
const tempDir = Setting.value('tempDir');
@@ -571,21 +612,29 @@ class Api {
}
}
- replaceImageUrlsByResources_(md, urls, imageSizes) {
- let output = md.replace(/(!\[.*?\]\()([^\s\)]+)(.*?\))/g, (match, before, imageUrl, after) => {
- const urlInfo = urls[imageUrl];
- if (!urlInfo || !urlInfo.resource) return before + imageUrl + after;
- const imageSize = imageSizes[urlInfo.originalUrl];
- const resourceUrl = Resource.internalUrl(urlInfo.resource);
+ replaceImageUrlsByResources_(markupLanguage, md, urls, imageSizes) {
+ if (markupLanguage === Note.MARKUP_LANGUAGE_HTML) {
+ return htmlUtils.replaceImageUrls(md, imageUrl => {
+ const urlInfo = urls[imageUrl];
+ if (!urlInfo || !urlInfo.resource) return imageUrl;
+ return Resource.internalUrl(urlInfo.resource);
+ });
+ } else {
+ let output = md.replace(/(!\[.*?\]\()([^\s\)]+)(.*?\))/g, (match, before, imageUrl, after) => {
+ const urlInfo = urls[imageUrl];
+ if (!urlInfo || !urlInfo.resource) return before + imageUrl + after;
+ const imageSize = imageSizes[urlInfo.originalUrl];
+ const resourceUrl = Resource.internalUrl(urlInfo.resource);
- if (imageSize && (imageSize.naturalWidth !== imageSize.width || imageSize.naturalHeight !== imageSize.height)) {
- return '