self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-10-31 00:07:48 +02:00
Code Issues Releases Activity

Clipper: Fixes #1682: Do not clip elements that should be hidden

Browse Source
This commit is contained in:
Laurent Cozic
2019-06-24 00:00:11 +01:00
parent a6c407b62b
commit d79089aea3
2 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
Clipper/joplin-webclipper/content_scripts/index.js
View File

@@ -87,16 +87,17 @@
} }
// Cleans up element by removing all its invisible children (which we don't want to render as Markdown) // Cleans up element by removing all its invisible children (which we don't want to render as Markdown)
// And hard-code the image dimensions so that the information can be used by the clipper server to
// display them at the right sizes in the notes.
function cleanUpElement(element, imageSizes) { function cleanUpElement(element, imageSizes) {
const childNodes = element.childNodes; const childNodes = element.childNodes;
for (let i = 0; i < childNodes.length; i++) { for (let i = childNodes.length - 1; i >= 0; i--) {
const node = childNodes[i]; const node = childNodes[i];
let isVisible = node.nodeType === 1 ? window.getComputedStyle(node).display !== 'none' : true; const isHidden = node && node.classList && node.classList.contains('joplin-clipper-hidden');
if (isVisible && ['input', 'textarea', 'script', 'noscript', 'style', 'select', 'option', 'button'].indexOf(node.nodeName.toLowerCase()) >= 0) isVisible = false;
if (!isVisible) { if (isHidden) {
element.removeChild(node); element.removeChild(node);
} else { } else {
@@ -114,6 +115,27 @@
} }
} }
// When we clone the document before cleaning it, we lose some of the information that might have been set via CSS or
// JavaScript, in particular whether an element was hidden or not. This function pre-process the document by
// adding a "joplin-clipper-hidden" class to all currently hidden elements in the current document.
// This class is then used in cleanUpElement() on the cloned document to find an element should be visible or not.
function hardcodeDisplayStyles(element) {
const childNodes = element.childNodes;
for (let i = 0; i < childNodes.length; i++) {
const node = childNodes[i];
let isVisible = node.nodeType === 1 ? window.getComputedStyle(node).display !== 'none' : true;
if (isVisible && ['input', 'textarea', 'script', 'noscript', 'style', 'select', 'option', 'button'].indexOf(node.nodeName.toLowerCase()) >= 0) isVisible = false;
if (!isVisible) {
node.classList.add('joplin-clipper-hidden');
} else {
hardcodeDisplayStyles(node);
}
}
}
// This sets the PRE elements computed style to the style attribute, so that // This sets the PRE elements computed style to the style attribute, so that
// the info can be exported and later processed by the htmlToMd converter // the info can be exported and later processed by the htmlToMd converter
// to detect code blocks. // to detect code blocks.
@@ -196,6 +218,9 @@
} else if (command.name === "completePageHtml") { } else if (command.name === "completePageHtml") {
hardcodePreStyles(document); hardcodePreStyles(document);
hardcodeDisplayStyles(document);
// Because cleanUpElement is going to modify the DOM and remove elements we don't want to work
// directly on the document, so we make a copy of it first.
const cleanDocument = document.body.cloneNode(true); const cleanDocument = document.body.cloneNode(true);
const imageSizes = getImageSizes(document, true); const imageSizes = getImageSizes(document, true);
cleanUpElement(cleanDocument, imageSizes); cleanUpElement(cleanDocument, imageSizes);

2
ReactNativeClient/lib/services/rest/Api.js
View File

@@ -506,7 +506,7 @@ class Api {
// If we could not find the file extension from the URL, try to get it // If we could not find the file extension from the URL, try to get it
// now based on the Content-Type header. // now based on the Content-Type header.
if (!fileExt) imagePath = this.tryToGuessImageExtFromMimeType_(response, imagePath); if (!fileExt) imagePath = await this.tryToGuessImageExtFromMimeType_(response, imagePath);
} }
return imagePath; return imagePath;
} catch (error) { } catch (error) {