hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

PR for Enable copy image to clipboard export #921 (#940)

Browse Source 
* 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 <mrfix84@gmail.com>
main
Technoknol 5 years ago committed by Michael Fix
parent f43eda1214
commit ea8aa77223
15 changed files with 73 additions and 7 deletions
Show Stats Download Patch File Download Diff File

9
.all-contributorsrc
Unescape Escape View File

@ -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",

1
README.md
Unescape Escape View File

@ -316,6 +316,7 @@ Thanks goes out to all these wonderful people ([emoji key](https://github.com/ke
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
</tr>
</table>

21
components/Editor.js
Unescape Escape View File

@ -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 {
<ExportMenu
onChange={this.updateSetting}
exportImage={this.exportImage}
copyImage={this.copyImage}
exportSize={exportSize}
backgroundImage={backgroundImage}
/>

38
components/ExportMenu.js
Unescape Escape View File

@ -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({
</div>
</div>
<div className="export-row">
{/* IDEA: Remove open button if clipboardSupported? */}
<Button center color={COLORS.PURPLE} onClick={handleExport('open')}>
Open
</Button>
<div className="save-container">
<span>Copy embed</span>
<span>Copy to clipboard</span>
<div>
<CopyEmbed title="URL" mapper={toURL} margin="0 4px 0 0" />
<CopyEmbed title="IFrame" mapper={toIFrame} margin="0 0 0 4px" />
<CopyEmbed title="URL" mapper={toURL} margin="0 8px 0 0" />
<CopyEmbed title="IFrame" mapper={toIFrame} margin="0 12px 0 0px" />
{clipboardSupported && (
<Button
center
hoverColor={COLORS.PURPLE}
color={COLORS.DARK_PURPLE}
onClick={copyImage}
id="export-clipboard"
disabled={loading}
>
Image
</Button>
)}
</div>
</div>
<div className="save-container">

1
docs/README.br.pt.md
Unescape Escape View File

@ -207,6 +207,7 @@ Agradecemos imensamente a todas essas pessoas maravilhosas pela grande ajuda ([e
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
</tr>
</table>

1
docs/README.cn.zh.md
Unescape Escape View File

@ -313,6 +313,7 @@ Carbon 项目由 TA 们发起：
<tr>
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
</tr>
</table>

1
docs/README.de.md
Unescape Escape View File

@ -173,6 +173,7 @@ Ein Danke geht an all diese wunderbaren Menschen ([emoji key](https://github.com
<tr>
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
</tr>
</table>

1
docs/README.es.md
Unescape Escape View File

@ -253,6 +253,7 @@ Gracias a todas estas personas maravillosas ([emoji key](https://github.com/kent
<tr>
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
</tr>
</table>

1
docs/README.fr.md
Unescape Escape View File

@ -211,6 +211,7 @@ Merci à toutes ces personnes merveilleuses ([emoji key](https://github.com/kent
<tr>
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
</tr>
</table>

1
docs/README.hi.md
Unescape Escape View File

@ -173,6 +173,7 @@ PRs का स्वागत है! अधिक जानकारी के
<tr>
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
</tr>
</table>

1
docs/README.ja.md
Unescape Escape View File

@ -200,6 +200,7 @@ Carbon は次の人々によるプロジェクトです:
<tr>
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
</tr>
</table>

1
docs/README.kr.md
Unescape Escape View File

@ -175,6 +175,7 @@ Carbon is a project by
<tr>
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
</tr>
</table>

1
docs/README.ml.md
Unescape Escape View File

@ -173,6 +173,7 @@ PR കൾ സ്വാഗതം ചെയ്യുന്നു! കൂടുത
<tr>
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
</tr>
</table>

1
docs/README.ta.md
Unescape Escape View File

@ -179,6 +179,7 @@ PR வரவேற்கிறோம்! மேலும் தகவலுக
<tr>
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
</tr>
</table>

1
docs/README.tr.md
Unescape Escape View File

@ -173,6 +173,7 @@ Bu muhteşem insanlara teşekkürler ([emoji key](https://github.com/kentcdodds/
<tr>
<td align="center"><a href="https://github.com/baktiaditya"><img src="https://avatars0.githubusercontent.com/u/2070906?v=4" width="100px;" alt=""/><br /><sub><b>Bakti Aditya</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=baktiaditya" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/aquaductape"><img src="https://avatars1.githubusercontent.com/u/29286430?v=4" width="100px;" alt=""/><br /><sub><b>Caleb Taylor</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=aquaductape" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/technoknol"><img src="https://avatars0.githubusercontent.com/u/6429418?v=4" width="100px;" alt=""/><br /><sub><b>Technoknol</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=technoknol" title="Code">💻</a></td>
<td align="center"><a href="http://about.rmunhoz.me"><img src="https://avatars3.githubusercontent.com/u/3948961?v=4" width="100px;" alt=""/><br /><sub><b>Rogério Munhoz</b></sub></a><br /><a href="https://github.com/carbon-app/carbon/commits?author=rjmunhoz" title="Code">💻</a></td>
</tr>
</table>

Write Preview
Loading…
Cancel
Save