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.
carbon/components/CodeImage.js

60 lines
1.5 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}`,
paddingTop: `calc(${config.paddingVertical} - 19px)` // TODO fix hack: accomodates for space taken up by window controls
}
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