Skip to content

Instantly share code, notes, and snippets.

@akshay-ranganath
Created December 9, 2019 23:00
Show Gist options
  • Save akshay-ranganath/7b0f9a00e2a8641d5b149c35c9b7ec39 to your computer and use it in GitHub Desktop.
Save akshay-ranganath/7b0f9a00e2a8641d5b149c35c9b7ec39 to your computer and use it in GitHub Desktop.
Updated preview.js code for adding the download functionality
import React from 'react'
import { Divider, Card } from 'antd'
import { Link } from 'react-router-dom'
import moment from 'moment'
import { Base64 } from 'js-base64'
import mermaid from 'mermaid'
import { upload } from './uploader'
class Preview extends React.Component {
constructor (props) {
super(props)
this.handleOnDownloadSVG = this.handleOnDownloadSVG.bind(this)
this.handleOnDownloadImage = this.handleOnDownloadImage.bind(this)
}
handleOnDownloadSVG (event) {
event.target.href = `data:image/svg+xml;base64,${Base64.encode(this.container.innerHTML)}`
event.target.download = `mermaid-diagram-${moment().format('YYYYMMDDHHmmss')}.svg`
}
handleOnDownloadImage (event) {
const svgObject = `data:image/svg+xml;base64,${Base64.encode(this.container.innerHTML)}`
// console.log('Uploading SVG image now');
event.target.href = upload(svgObject)
event.target.download = 'couple.jpg'
}
render () {
const { code, match: { url } } = this.props
return <div>
<Card title='Preview'>
<div ref={div => { this.container = div }}>{code}</div>
</Card>
<Card title='Actions'>
<div className='links'>
<Link to={url.replace('/edit/', '/view/')}>Link to View</Link>
<Divider type='vertical' />
<a href='' download='' onClick={this.handleOnDownloadSVG}>Download SVG</a>
<Divider type='vertical' />
<a href='' download='' target='_blank' onClick={this.handleOnDownloadImage}>Download Image</a>
</div>
</Card>
</div>
}
initMermaid () {
const { code, history, match: { url } } = this.props
try {
mermaid.parse(code)
mermaid.init(undefined, this.container)
} catch (e) { // {str, hash}
const base64 = Base64.encodeURI(e.str || e.message)
history.push(`${url}/error/${base64}`)
}
}
componentDidMount () {
this.initMermaid()
}
componentDidUpdate () {
this.container.removeAttribute('data-processed')
this.container.innerHTML = this.props.code.replace('onerror=', 'onerror&equals;')
this.initMermaid()
}
}
export default Preview
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment