mirror of https://github.com/sgoudham/carbon.git
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
import { EOL } from 'os'
|
|
import React from 'react'
|
|
import domtoimage from 'dom-to-image'
|
|
import CodeMirror from 'react-codemirror'
|
|
import WindowControls from '../components/svg/controls'
|
|
|
|
// hack to only call modes on browser
|
|
if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
|
|
require('../lib/constants')
|
|
}
|
|
|
|
const DEFAULT_SETTINGS = {
|
|
paddingVertical: '50px',
|
|
paddingHorizontal: '50px',
|
|
marginVertical: '45px',
|
|
marginHorizontal: '45px',
|
|
background: '#fed0ec',
|
|
theme: 'dracula',
|
|
language: 'javascript'
|
|
}
|
|
|
|
const CodeImage = (props) => {
|
|
const config = Object.assign(DEFAULT_SETTINGS, props.config)
|
|
|
|
const options = {
|
|
lineNumbers: false,
|
|
mode: config.language,
|
|
theme: config.theme,
|
|
scrollBarStyle: null,
|
|
viewportMargin: Infinity,
|
|
lineWrapping: true
|
|
}
|
|
|
|
// create styles
|
|
const containerStyle = {
|
|
background: config.background,
|
|
padding: `${config.paddingVertical} ${config.paddingHorizontal}`
|
|
}
|
|
|
|
return (
|
|
<div id="section">
|
|
<div id="container" style={containerStyle}>
|
|
{ true ? <WindowControls /> : null }
|
|
<CodeMirror className="CodeMirrorContainer" value={props.children} options={options} />
|
|
</div>
|
|
<style jsx>{`
|
|
#section {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CodeImage
|