import { EOL } from 'os' import * as hljs from 'highlight.js' import React from 'react' import Spinner from 'react-spinner' import toHash from 'tohash' import debounce from 'lodash.debounce' import ms from 'ms' import WindowControls from '../components/WindowControls' import CodeMirror from '../lib/react-codemirror' import { COLORS, DEFAULT_LANGUAGE, LANGUAGES, LANGUAGE_MODE_HASH, LANGUAGE_NAME_HASH } from '../lib/constants' const DEFAULT_SETTINGS = { paddingVertical: '50px', paddingHorizontal: '50px', marginVertical: '45px', marginHorizontal: '45px', background: 'rgba(171, 184, 195, 1)', dropShadowOffsetY: '20px', dropShadowBlurRadius: '68px', theme: 'seti', windowTheme: 'none', language: DEFAULT_LANGUAGE, fontFamily: 'Hack', fontSize: '14px' } class Carbon extends React.Component { constructor(props) { super(props) this.state = { loading: true, language: props.config.language } this.handleLanguageChange = this.handleLanguageChange.bind(this) this.codeUpdated = this.codeUpdated.bind(this) } componentDidMount() { this.setState({ loading: false }) this.handleLanguageChange(this.props.children) } componentWillReceiveProps(newProps) { this.handleLanguageChange(newProps.children, { customProps: newProps }) } codeUpdated(newCode) { this.handleLanguageChange(newCode) this.props.updateCode(newCode) } handleLanguageChange = debounce( (newCode, config) => { const props = (config && config.customProps) || this.props if (props.config.language === 'auto') { // try to set the language const detectedLanguage = hljs.highlightAuto(newCode).language const languageMode = LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage] if (languageMode) { this.setState({ language: languageMode.mime || languageMode.mode }) } } else { this.setState({ language: props.config.language }) } }, ms('300ms'), { trailing: true } ) render() { const config = { ...DEFAULT_SETTINGS, ...this.props.config } const options = { lineNumbers: config.lineNumbers, mode: this.state.language || 'plaintext', theme: config.theme, scrollBarStyle: null, viewportMargin: Infinity, lineWrapping: true } // set content to spinner if loading, else editor let content = (
) if (this.state.loading === false) { content = (
{config.windowControls ? : null} this.codeUpdated(code)} value={this.props.children} options={options} />
) } return (
{content}
) } } export default Carbon