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

Clipper: Improved clipping of images in HTML mode

Browse Source
This commit is contained in:
Laurent Cozic
2019-07-16 22:23:04 +01:00
parent 2361c5a5e7
commit 7239a2013c
4 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -103,7 +103,7 @@
// 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.
function cleanUpElement(element, imageSizes, imageIndexes) { function cleanUpElement(convertToMarkup, element, imageSizes, imageIndexes) {
const childNodes = element.childNodes; const childNodes = element.childNodes;
const hiddenNodes = []; const hiddenNodes = [];
@ -132,19 +132,19 @@
if (!(src in imageIndexes)) imageIndexes[src] = 0; if (!(src in imageIndexes)) imageIndexes[src] = 0;
const imageSize = imageSizes[src][imageIndexes[src]]; const imageSize = imageSizes[src][imageIndexes[src]];
imageIndexes[src]++; imageIndexes[src]++;
if (imageSize) { if (imageSize && convertToMarkup === 'markdown') {
node.width = imageSize.width; node.width = imageSize.width;
node.height = imageSize.height; node.height = imageSize.height;
} }
} }
cleanUpElement(node, imageSizes, imageIndexes); cleanUpElement(convertToMarkup, node, imageSizes, imageIndexes);
} }
} }
for (const hiddenNode of hiddenNodes) { for (const hiddenNode of hiddenNodes) {
if (!hiddenNode.parentNode) continue; if (!hiddenNode.parentNode) continue;
hiddenNode.parentNode.remove(hiddenNode); hiddenNode.parentNode.removeChild(hiddenNode);
} }
} }
@ -260,6 +260,8 @@
async function prepareCommandResponse(command) { async function prepareCommandResponse(command) {
console.info('Got command: ' + command.name); console.info('Got command: ' + command.name);
const convertToMarkup = command.preProcessFor ? command.preProcessFor : 'markdown';
const clippedContentResponse = (title, html, imageSizes, anchorNames, stylesheets) => { const clippedContentResponse = (title, html, imageSizes, anchorNames, stylesheets) => {
return { return {
name: 'clippedContent', name: 'clippedContent',
@ -272,7 +274,7 @@
image_sizes: imageSizes, image_sizes: imageSizes,
anchor_names: anchorNames, anchor_names: anchorNames,
source_command: Object.assign({}, command), source_command: Object.assign({}, command),
convert_to: command.preProcessFor ? command.preProcessFor : 'markdown', convert_to: convertToMarkup,
stylesheets: stylesheets, stylesheets: stylesheets,
}; };
} }
@ -306,9 +308,9 @@
const cleanDocument = document.body.cloneNode(true); const cleanDocument = document.body.cloneNode(true);
const imageSizes = getImageSizes(document, true); const imageSizes = getImageSizes(document, true);
const imageIndexes = {}; const imageIndexes = {};
cleanUpElement(cleanDocument, imageSizes, imageIndexes); cleanUpElement(convertToMarkup, cleanDocument, imageSizes, imageIndexes);
const stylesheets = command.preProcessFor === 'html' ? getStyleSheets(document) : null; const stylesheets = convertToMarkup === 'html' ? getStyleSheets(document) : null;
return clippedContentResponse(pageTitle(), cleanDocument.innerHTML, imageSizes, getAnchorNames(document), stylesheets); return clippedContentResponse(pageTitle(), cleanDocument.innerHTML, imageSizes, getAnchorNames(document), stylesheets);
} else if (command.name === "selectedHtml") { } else if (command.name === "selectedHtml") {
@ -320,7 +322,7 @@
container.appendChild(range.cloneContents()); container.appendChild(range.cloneContents());
const imageSizes = getImageSizes(document, true); const imageSizes = getImageSizes(document, true);
const imageIndexes = {}; const imageIndexes = {};
cleanUpElement(container, imageSizes, imageIndexes); cleanUpElement(convertToMarkup, container, imageSizes, imageIndexes);
return clippedContentResponse(pageTitle(), container.innerHTML, getImageSizes(document), getAnchorNames(document)); return clippedContentResponse(pageTitle(), container.innerHTML, getImageSizes(document), getAnchorNames(document));
} else if (command.name === 'screenshot') { } else if (command.name === 'screenshot') {

3
ElectronClient/app/gui/NoteText.jsx
View File

@ -1643,6 +1643,7 @@ class NoteTextComponent extends React.Component {
const style = this.props.style; const style = this.props.style;
const note = this.state.note; const note = this.state.note;
const body = note && note.body ? note.body : ''; const body = note && note.body ? note.body : '';
const markupLanguage = note ? note.markup_language : Note.MARKUP_LANGUAGE_MARKDOWN;
const theme = themeStyle(this.props.theme); const theme = themeStyle(this.props.theme);
const visiblePanes = this.props.visiblePanes || ['editor', 'viewer']; const visiblePanes = this.props.visiblePanes || ['editor', 'viewer'];
const isTodo = note && !!note.is_todo; const isTodo = note && !!note.is_todo;
@ -1813,7 +1814,7 @@ class NoteTextComponent extends React.Component {
const toolbarItems = this.createToolbarItems(note); const toolbarItems = this.createToolbarItems(note);
const toolbar = <Toolbar const toolbar = markupLanguage !== Note.MARKUP_LANGUAGE_MARKDOWN ? null : <Toolbar
style={toolbarStyle} style={toolbarStyle}
items={toolbarItems} items={toolbarItems}
/> />

2
ReactNativeClient/lib/renderers/utils.js
View File

@ -92,6 +92,8 @@ utils.resourceStatus = function(resourceInfo) {
} }
utils.imageReplacement = function(src, resources, resourceBaseUrl) { utils.imageReplacement = function(src, resources, resourceBaseUrl) {
if (!Resource.isResourceUrl(src)) return null;
const resourceId = Resource.urlToId(src); const resourceId = Resource.urlToId(src);
const result = resources[resourceId]; const result = resources[resourceId];
const resource = result ? result.item : null; const resource = result ? result.item : null;

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

@ -585,7 +585,7 @@ class Api {
}); });
} }
const concurrency = 3 const concurrency = 10;
const pool = new PromisePool(promiseProducer, concurrency) const pool = new PromisePool(promiseProducer, concurrency)
await pool.start() await pool.start()