self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-08-13 22:12:50 +02:00
Code Issues Releases Activity

Clipper: Fixed issues related to viewing images and to HTML comments that were incorrectly being displayed

Browse Source
This commit is contained in:
Laurent Cozic
2019-07-14 19:52:57 +01:00
parent a0dd0702fb
commit 5460a977b1
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -61,7 +61,8 @@
const output = {}; const output = {};
for (let i = 0; i < images.length; i++) { for (let i = 0; i < images.length; i++) {
const img = images[i]; const img = images[i];
const src = forceAbsoluteUrls ? absoluteUrl(img.currentSrc) : img.currentSrc; let src = imageSrc(img);
src = forceAbsoluteUrls ? absoluteUrl(src) : src;
output[src] = { output[src] = {
width: img.width, width: img.width,
height: img.height, height: img.height,
@@ -86,6 +87,14 @@
return output; return output;
} }
// In general we should use currentSrc because that's the image that's currently displayed,
// especially within <picture> tags or with srcset. In these cases there can be multiple
// sources and the best one is probably the one being displayed, thus currentSrc.
function imageSrc(image) {
if (image.currentSrc) return image.currentSrc;
return image.src;
}
// 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 // 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. // display them at the right sizes in the notes.
@@ -112,8 +121,9 @@
} }
if (nodeName === 'img') { if (nodeName === 'img') {
node.src = absoluteUrl(node.currentSrc); const src = absoluteUrl(imageSrc(node));
const imageSize = imageSizes[node.src]; node.setAttribute('src', src);
const imageSize = imageSizes[src];
if (imageSize) { if (imageSize) {
node.width = imageSize.width; node.width = imageSize.width;
node.height = imageSize.height; node.height = imageSize.height;
@@ -132,7 +142,7 @@
function preProcessDocument(element) { function preProcessDocument(element) {
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];
const nodeName = node.nodeName.toLowerCase(); const nodeName = node.nodeName.toLowerCase();
const nodeParent = node.parentNode; const nodeParent = node.parentNode;
@@ -159,7 +169,9 @@
isVisible = false isVisible = false
} }
if (!isVisible) { if (node.nodeType === 8) { // Comments are just removed since we can't add a class
node.parentNode.removeChild(node);
} else if (!isVisible) {
node.classList.add('joplin-clipper-hidden'); node.classList.add('joplin-clipper-hidden');
} else { } else {
preProcessDocument(node); preProcessDocument(node);