From ea8aa77223e532c0faa5562b74f544662cb4672e Mon Sep 17 00:00:00 2001 From: Technoknol Date: Mon, 27 Jan 2020 04:42:23 +0530 Subject: [PATCH] PR for Enable copy image to clipboard export #921 (#940) * Enable copy image to clipboard export (#921) * Add Contributor for Enable copy image to clipboard export (#921) * (#921) Check if ClipboardItem is function. * update clipboard menu * clean up getCarbonImage logic * tweak Co-authored-by: Michael Fix --- .all-contributorsrc | 9 +++++++++ README.md | 1 + components/Editor.js | 21 +++++++++++++++++++-- components/ExportMenu.js | 38 +++++++++++++++++++++++++++++++++----- docs/README.br.pt.md | 1 + docs/README.cn.zh.md | 1 + docs/README.de.md | 1 + docs/README.es.md | 1 + docs/README.fr.md | 1 + docs/README.hi.md | 1 + docs/README.ja.md | 1 + docs/README.kr.md | 1 + docs/README.ml.md | 1 + docs/README.ta.md | 1 + docs/README.tr.md | 1 + 15 files changed, 73 insertions(+), 7 deletions(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 2581537..bdf2175 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -636,6 +636,15 @@ "contributions": [ "code" ] + }, + { + "login": "technoknol", + "name": "Technoknol", + "avatar_url": "https://avatars0.githubusercontent.com/u/6429418?v=4", + "profile": "https://github.com/technoknol", + "contributions": [ + "code" + ] } ], "repoType": "github", diff --git a/README.md b/README.md index 87ff750..3964a6f 100644 --- a/README.md +++ b/README.md @@ -316,6 +316,7 @@ Thanks goes out to all these wonderful people ([emoji key](https://github.com/ke
Bakti Aditya
💻
Caleb Taylor
💻
Rogério Munhoz
💻 +
Technoknol
💻 diff --git a/components/Editor.js b/components/Editor.js index aff1259..5842019 100644 --- a/components/Editor.js +++ b/components/Editor.js @@ -55,6 +55,7 @@ class Editor extends React.Component { } this.exportImage = this.exportImage.bind(this) + this.copyImage = this.copyImage.bind(this) this.upload = this.upload.bind(this) this.updateSetting = this.updateSetting.bind(this) this.updateLanguage = this.updateLanguage.bind(this) @@ -181,7 +182,8 @@ class Editor extends React.Component { // current font-family used const fontFamily = this.state.fontFamily try { - if (type === 'blob') { + // TODO consolidate type/format to only use one param + if (type === 'objectURL') { if (format === 'svg') { return ( domtoimage @@ -209,6 +211,10 @@ class Editor extends React.Component { return await domtoimage.toBlob(node, config).then(blob => window.URL.createObjectURL(blob)) } + if (type === 'blob') { + return await domtoimage.toBlob(node, config) + } + // Twitter needs regular dataurls return await domtoimage.toPng(node, config) } finally { @@ -228,7 +234,7 @@ class Editor extends React.Component { const prefix = options.filename || 'carbon' - return this.getCarbonImage({ format, type: 'blob' }).then(url => { + return this.getCarbonImage({ format, type: 'objectURL' }).then(url => { if (format !== 'open') { link.download = `${prefix}.${format}` } @@ -242,6 +248,16 @@ class Editor extends React.Component { }) } + copyImage() { + return this.getCarbonImage({ format: 'png', type: 'blob' }).then(blob => + navigator.clipboard.write([ + new window.ClipboardItem({ + 'image/png': blob + }) + ]) + ) + } + resetDefaultSettings() { this.updateState(DEFAULT_SETTINGS) this.props.onReset() @@ -398,6 +414,7 @@ class Editor extends React.Component { diff --git a/components/ExportMenu.js b/components/ExportMenu.js index d095eef..3f3bcbc 100644 --- a/components/ExportMenu.js +++ b/components/ExportMenu.js @@ -46,7 +46,7 @@ const CopyEmbed = withRouter(({ router: { asPath }, mapper, title, margin }) => ) }) -const popoutStyle = { width: '280px', right: 0 } +const popoutStyle = { width: '350px', right: 0 } function useSafari() { const [isSafari, setSafari] = React.useState(false) @@ -61,13 +61,26 @@ function useSafari() { return isSafari } +function useClipboardSupport() { + const [isClipboardSupports, setClipboardSupport] = React.useState(false) + + React.useEffect(() => { + setClipboardSupport( + window.navigator && window.navigator.clipboard && typeof ClipboardItem === 'function' + ) + }, []) + + return isClipboardSupports +} + function ExportMenu({ backgroundImage, onChange, exportSize, isVisible, toggleVisibility, - exportImage: exp + exportImage: exp, + copyImage }) { const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage]) const online = useOnline() @@ -78,6 +91,8 @@ function ExportMenu({ const disablePNG = isSafari && (tooLarge || !online) + const clipboardSupported = useClipboardSupport() + const input = React.useRef() const handleExportSizeChange = selectedSize => () => onChange('exportSize', selectedSize) @@ -132,14 +147,27 @@ function ExportMenu({
+ {/* IDEA: Remove open button if clipboardSupported? */}
- Copy embed + Copy to clipboard
- - + + + {clipboardSupported && ( + + )}
diff --git a/docs/README.br.pt.md b/docs/README.br.pt.md index 90b3aba..1f8c52b 100644 --- a/docs/README.br.pt.md +++ b/docs/README.br.pt.md @@ -207,6 +207,7 @@ Agradecemos imensamente a todas essas pessoas maravilhosas pela grande ajuda ([e
Bakti Aditya
💻
Caleb Taylor
💻
Rogério Munhoz
💻 +
Technoknol
💻 diff --git a/docs/README.cn.zh.md b/docs/README.cn.zh.md index 7949a30..e505cb1 100644 --- a/docs/README.cn.zh.md +++ b/docs/README.cn.zh.md @@ -313,6 +313,7 @@ Carbon 项目由 TA 们发起：
Bakti Aditya
💻
Caleb Taylor
💻 +
Technoknol
💻
Rogério Munhoz
💻 diff --git a/docs/README.de.md b/docs/README.de.md index fb2af01..92b93a2 100644 --- a/docs/README.de.md +++ b/docs/README.de.md @@ -173,6 +173,7 @@ Ein Danke geht an all diese wunderbaren Menschen ([emoji key](https://github.com
Bakti Aditya
💻
Caleb Taylor
💻 +
Technoknol
💻
Rogério Munhoz
💻 diff --git a/docs/README.es.md b/docs/README.es.md index 308e2a8..6186786 100644 --- a/docs/README.es.md +++ b/docs/README.es.md @@ -253,6 +253,7 @@ Gracias a todas estas personas maravillosas ([emoji key](https://github.com/kent
Bakti Aditya
💻
Caleb Taylor
💻 +
Technoknol
💻
Rogério Munhoz
💻 diff --git a/docs/README.fr.md b/docs/README.fr.md index 065a221..992876e 100644 --- a/docs/README.fr.md +++ b/docs/README.fr.md @@ -211,6 +211,7 @@ Merci à toutes ces personnes merveilleuses ([emoji key](https://github.com/kent
Bakti Aditya
💻
Caleb Taylor
💻 +
Technoknol
💻
Rogério Munhoz
💻 diff --git a/docs/README.hi.md b/docs/README.hi.md index 76b8ff9..64025ed 100644 --- a/docs/README.hi.md +++ b/docs/README.hi.md @@ -173,6 +173,7 @@ PRs का स्वागत है! अधिक जानकारी के
Bakti Aditya
💻
Caleb Taylor
💻 +
Technoknol
💻
Rogério Munhoz
💻 diff --git a/docs/README.ja.md b/docs/README.ja.md index 82acdfe..5908135 100644 --- a/docs/README.ja.md +++ b/docs/README.ja.md @@ -200,6 +200,7 @@ Carbon は次の人々によるプロジェクトです:
Bakti Aditya
💻
Caleb Taylor
💻 +
Technoknol
💻
Rogério Munhoz
💻 diff --git a/docs/README.kr.md b/docs/README.kr.md index f4b1a67..19a6b4a 100644 --- a/docs/README.kr.md +++ b/docs/README.kr.md @@ -175,6 +175,7 @@ Carbon is a project by
Bakti Aditya
💻
Caleb Taylor
💻 +
Technoknol
💻
Rogério Munhoz
💻 diff --git a/docs/README.ml.md b/docs/README.ml.md index 24b367d..f302174 100644 --- a/docs/README.ml.md +++ b/docs/README.ml.md @@ -173,6 +173,7 @@ PR കൾ സ്വാഗതം ചെയ്യുന്നു! കൂടുത
Bakti Aditya
💻
Caleb Taylor
💻 +
Technoknol
💻
Rogério Munhoz
💻 diff --git a/docs/README.ta.md b/docs/README.ta.md index b733e5b..59887e6 100644 --- a/docs/README.ta.md +++ b/docs/README.ta.md @@ -179,6 +179,7 @@ PR வரவேற்கிறோம்! மேலும் தகவலுக
Bakti Aditya
💻
Caleb Taylor
💻 +
Technoknol
💻
Rogério Munhoz
💻 diff --git a/docs/README.tr.md b/docs/README.tr.md index 9229ad9..7b8694a 100644 --- a/docs/README.tr.md +++ b/docs/README.tr.md @@ -173,6 +173,7 @@ Bu muhteşem insanlara teşekkürler ([emoji key](https://github.com/kentcdodds/
Bakti Aditya
💻
Caleb Taylor
💻 +
Technoknol
💻
Rogério Munhoz
💻