hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

delay loading highlightjs & codemirror theme (#309)

Browse Source
main
Ian Wang 7 years ago committed by Michael Fix
parent 9dd8d3a9c4
commit 6bf64a6ae0
2 changed files with 68 additions and 57 deletions
Show Stats Download Patch File Download Diff File

12
components/Carbon.js
Unescape Escape View File

@ -1,4 +1,3 @@
import * as hljs from 'highlight.js'
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import Spinner from 'react-spinner' import Spinner from 'react-spinner'
import ResizeObserver from 'resize-observer-polyfill' import ResizeObserver from 'resize-observer-polyfill'
@ -51,13 +50,20 @@ class Carbon extends PureComponent {
this.props.updateTitleBar(newTitle) this.props.updateTitleBar(newTitle)
} }
async getHighlightLang(code = '') {
if (!this.hljs) {
this.hljs = await import('highlight.js')
}
return this.hljs.highlightAuto(code).language
}
handleLanguageChange = debounce( handleLanguageChange = debounce(
(newCode, config) => { async (newCode, config) => {
const props = (config && config.customProps) || this.props const props = (config && config.customProps) || this.props
if (props.config.language === 'auto') { if (props.config.language === 'auto') {
// try to set the language // try to set the language
const detectedLanguage = hljs.highlightAuto(newCode).language const detectedLanguage = await this.getHighlightLang(newCode)
const languageMode = const languageMode =
LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage] LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage]

11
components/Meta.js
Unescape Escape View File

@ -7,7 +7,9 @@ import Typography from './style/Typography'
import '../static/react-crop.css' import '../static/react-crop.css'
import '../static/react-spinner.css' import '../static/react-spinner.css'
export default () => ( export default () => {
const onBrowser = typeof window !== 'undefined'
return (
<div className="meta"> <div className="meta">
<Head> <Head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
@ -41,7 +43,8 @@ export default () => (
rel="stylesheet" rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/solarized.min.css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/solarized.min.css"
/> />
{THEMES.filter(t => t.hasStylesheet !== false).map(theme => ( {onBrowser
? THEMES.filter(t => t.hasStylesheet !== false).map(theme => (
<link <link
key={theme.id} key={theme.id}
rel="stylesheet" rel="stylesheet"
@ -50,7 +53,8 @@ export default () => (
`//cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/theme/${theme.id}.min.css` `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/theme/${theme.id}.min.css`
} }
/> />
))} ))
: null}
</Head> </Head>
<Reset /> <Reset />
<Font /> <Font />
@ -64,3 +68,4 @@ export default () => (
</style> </style>
</div> </div>
) )
}

Write Preview
Loading…
Cancel
Save