@ -15,6 +15,8 @@ const toIFrame = url =>
< / i f r a m e >
`
const toURL = url => encodeURI ( ` https://carbon.now.sh/embed ${ url } ` )
const MAX _PAYLOAD _SIZE = 5e6 // bytes
function verifyPayloadSize ( str ) {
if ( typeof str !== 'string' ) return true
@ -22,20 +24,23 @@ function verifyPayloadSize(str) {
return new Blob ( [ str ] ) . size < MAX _PAYLOAD _SIZE
}
const CopyEmbed = withRouter (
React . memo (
( { router : { asPath } } ) => {
const { onClick , copied } = useCopyTextHandler ( toIFrame ( asPath ) )
return (
< Button onClick = { onClick } center color = { COLORS . PURPLE } padding = "12px 16px" flex = "1 0 68px" >
{ copied ? 'Copied!' : 'Copy Embed' }
< / B u t t o n >
)
} ,
( prevProps , nextProps ) => prevProps . router . asPath === nextProps . router . asPath
const CopyEmbed = withRouter ( ( { router : { asPath } , mapper , title , margin } ) => {
const text = React . useMemo ( ( ) => mapper ( asPath ) , [ mapper , asPath ] )
const { onClick , copied } = useCopyTextHandler ( text )
return (
< Button
onClick = { onClick }
center
hoverColor = { COLORS . PURPLE }
color = { COLORS . DARK _PURPLE }
margin = { margin }
style = { { minWidth : 48 } }
>
{ copied ? 'Copied!' : title }
< / B u t t o n >
)
)
} )
const popoutStyle = { width : '280px' , right : 0 }
@ -102,7 +107,13 @@ class ExportMenu extends React.PureComponent {
< Button center color = { COLORS . PURPLE } onClick = { this . handleExport ( 'open' ) } >
Open
< / B u t t o n >
< CopyEmbed / >
< div className = "save-container" >
< span > Copy embed < / s p a n >
< div >
< CopyEmbed title = "URL" mapper = { toURL } margin = "0 4px 0 0" / >
< CopyEmbed title = "IFrame" mapper = { toIFrame } margin = "0 0 0 4px" / >
< / d i v >
< / d i v >
< div className = "save-container" >
< span > Save as < / s p a n >
< div >
@ -175,6 +186,11 @@ class ExportMenu extends React.PureComponent {
display : flex ;
flex : 1 ;
}
. save - container : first - of - type {
padding : 12 px 12 px ;
border - right : 1 px solid $ { COLORS . PURPLE } ;
}
` }
< / s t y l e >
< / d i v >