Joplin
/
joplin
mirror of https://github.com/laurent22/joplin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Desktop: Fixes #4602: Allow copying images from Joplin to external editors (#4724)

pull/4762/head
Nishant Mittal 2021-03-29 14:10:50 +05:30 committed by GitHub
parent 66ad2259a9
commit 9cf5974c7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintignore
View File

@ -403,6 +403,12 @@ packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js.map
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.d.ts
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.js.map
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.d.ts
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.js.map
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.test.d.ts
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.test.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.test.js.map
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/setupToolbarButtons.d.ts
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/setupToolbarButtons.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/setupToolbarButtons.js.map

6
.gitignore vendored
View File

@ -390,6 +390,12 @@ packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.js.map
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.d.ts
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/styles/index.js.map
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.d.ts
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.js.map
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.test.d.ts
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.test.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.test.js.map
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/setupToolbarButtons.d.ts
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/setupToolbarButtons.js
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/setupToolbarButtons.js.map

10
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
View File

@ -12,6 +12,7 @@ import usePluginServiceRegistration from '../../utils/usePluginServiceRegistrati
import { utils as pluginUtils } from '@joplin/lib/services/plugins/reducer';
import { _, closestSupportedLocale } from '@joplin/lib/locale';
import useContextMenu from './utils/useContextMenu';
import getCopyableContent from './utils/getCopyableContent';
import shim from '@joplin/lib/shim';
const { MarkupToHtml } = require('@joplin/renderer');
@ -1037,6 +1038,13 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
}
}
async function onCopy(event: any) {
const copiedContent = editor.selection.getContent();
const copyableContent = getCopyableContent(copiedContent);
clipboard.writeHTML(copyableContent);
event.preventDefault();
}
function onKeyDown(event: any) {
// It seems "paste as text" is handled automatically by
// on Windows so the code below so we need to run the below
@ -1059,6 +1067,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
editor.on('keydown', onKeyDown);
editor.on('keypress', onKeypress);
editor.on('paste', onPaste);
editor.on('copy', onCopy);
// `compositionend` means that a user has finished entering a Chinese
// (or other languages that require IME) character.
editor.on('compositionend', onChangeHandler);
@ -1074,6 +1083,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
editor.off('keydown', onKeyDown);
editor.off('keypress', onKeypress);
editor.off('paste', onPaste);
editor.off('copy', onCopy);
editor.off('compositionend', onChangeHandler);
editor.off('cut', onChangeHandler);
editor.off('joplinChange', onChangeHandler);

50
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.test.ts Normal file
View File

@ -0,0 +1,50 @@
import getCopyableContent from './getCopyableContent';
describe('getCopyableContent', () => {
test('should remove parameters from local images', () => {
const localImage = 'file:///home/some/path/test.jpg';
const content = `<div><img src="${localImage}?a=1&b=2"></div>`;
const copyableContent = getCopyableContent(content);
expect(copyableContent).toEqual(`<div><img src="${localImage}"></div>`);
});
test('should be able to process mutiple images', () => {
const localImage1 = 'file:///home/some/path/test1.jpg';
const localImage2 = 'file:///home/some/path/test2.jpg';
const localImage3 = 'file:///home/some/path/test3.jpg';
const content = `
<div>
<img src="${localImage1}?a=1&b=2">
<img src="${localImage2}">
<img src="${localImage3}?t=1">
</div>`;
const copyableContent = getCopyableContent(content);
const expectedContent = `
<div>
<img src="${localImage1}">
<img src="${localImage2}">
<img src="${localImage3}">
</div>`;
expect(copyableContent).toEqual(expectedContent);
});
test('should not change parameters for images on the internet', () => {
const image1 = 'http://www.somelink.com/image1.jpg';
const image2 = 'https://www.somelink.com/image2.jpg';
const content = `
<div>
<img src="${image1}">
<img src="${image2}?h=12&w=15">
</div>`;
const copyableContent = getCopyableContent(content);
expect(copyableContent).toEqual(content);
});
});

20
packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/getCopyableContent.ts Normal file
View File

@ -0,0 +1,20 @@
import HtmlUtils from '@joplin/lib/htmlUtils';
export default function(htmlContent: string) {
// We need to remove extra url params from the image URLs while copying
// because some offline edtors do not show the image if there is
// an extra parameter in it's path.
// Related to - https://github.com/laurent22/joplin/issues/4602
const removeParametersFromUrl = (url: string) => {
const imageSrc = new URL(url);
// Remove parameters if it's a local image.
if (imageSrc.protocol === 'file:') {
imageSrc.search = '';
}
return imageSrc.toString();
};
return HtmlUtils.replaceImageUrls(htmlContent, removeParametersFromUrl);
}