Add prettier for codestyle and re-format everything (#1294)

This commit is contained in:
Erik Michelson 2021-06-06 23:14:00 +02:00 committed by GitHub
parent 8b78154075
commit 0aae1f70d2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
319 changed files with 4809 additions and 3936 deletions

View file

@ -11,8 +11,8 @@ import '../../../utils/button-inside.scss'
import './highlighted-code.scss'
export interface HighlightedCodeProps {
code: string,
language?: string,
code: string
language?: string
startLineNumber?: number
wrapLines: boolean
}
@ -30,47 +30,46 @@ const escapeHtml = (unsafe: string): string => {
}
const replaceCode = (code: string): ReactElement[][] => {
return code.split('\n')
.filter(line => !!line)
.map(line => ReactHtmlParser(line))
return code
.split('\n')
.filter((line) => !!line)
.map((line) => ReactHtmlParser(line))
}
export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language, startLineNumber, wrapLines }) => {
const [dom, setDom] = useState<ReactElement[]>()
useEffect(() => {
import(/* webpackChunkName: "highlight.js" */ '../../../../common/hljs/hljs').then((hljs) => {
const languageSupported = (lang: string) => hljs.default.listLanguages()
.includes(lang)
const unreplacedCode = !!language && languageSupported(language) ? hljs.default.highlight(code, { language }).value : escapeHtml(code)
const replacedDom = replaceCode(unreplacedCode)
.map((line, index) => (
<Fragment key={ index }>
<span className={ 'linenumber' }>
{ (startLineNumber || 1) + index }
</span>
<div className={ 'codeline' }>
{ line }
</div>
import(/* webpackChunkName: "highlight.js" */ '../../../../common/hljs/hljs')
.then((hljs) => {
const languageSupported = (lang: string) => hljs.default.listLanguages().includes(lang)
const unreplacedCode =
!!language && languageSupported(language)
? hljs.default.highlight(code, { language }).value
: escapeHtml(code)
const replacedDom = replaceCode(unreplacedCode).map((line, index) => (
<Fragment key={index}>
<span className={'linenumber'}>{(startLineNumber || 1) + index}</span>
<div className={'codeline'}>{line}</div>
</Fragment>
))
setDom(replacedDom)
})
.catch(() => {
console.error('error while loading highlight.js')
})
setDom(replacedDom)
})
.catch(() => {
console.error('error while loading highlight.js')
})
}, [code, language, startLineNumber])
return (
<Fragment>
<code
className={ `hljs ${ startLineNumber !== undefined ? 'showGutter' : '' } ${ wrapLines ? 'wrapLines' : '' }` }>
{ dom }
<code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
{dom}
</code>
<div className={ 'text-right button-inside' }>
<CopyToClipboardButton content={ code } data-cy="copy-code-button"/>
<div className={'text-right button-inside'}>
<CopyToClipboardButton content={code} data-cy='copy-code-button' />
</div>
</Fragment>)
</Fragment>
)
}
export default HighlightedCode

View file

@ -13,7 +13,13 @@ export class HighlightedCodeReplacer extends ComponentReplacer {
private lastLineNumber = 0
public getReplacement(codeNode: DomElement): React.ReactElement | undefined {
if (codeNode.name !== 'code' || !codeNode.attribs || !codeNode.attribs['data-highlight-language'] || !codeNode.children || !codeNode.children[0]) {
if (
codeNode.name !== 'code' ||
!codeNode.attribs ||
!codeNode.attribs['data-highlight-language'] ||
!codeNode.children ||
!codeNode.children[0]
) {
return
}
@ -31,18 +37,21 @@ export class HighlightedCodeReplacer extends ComponentReplacer {
wrapLines = extraInfos[3] === '!'
}
const startLineNumber = startLineNumberAttribute === '+' ? this.lastLineNumber : (parseInt(startLineNumberAttribute) || 1)
const startLineNumber =
startLineNumberAttribute === '+' ? this.lastLineNumber : parseInt(startLineNumberAttribute) || 1
const code = codeNode.children[0].data as string
if (showLineNumbers) {
this.lastLineNumber = startLineNumber + code.split('\n')
.filter(line => !!line).length
this.lastLineNumber = startLineNumber + code.split('\n').filter((line) => !!line).length
}
return <HighlightedCode
language={ language }
startLineNumber={ showLineNumbers ? startLineNumber : undefined }
wrapLines={ wrapLines }
code={ code }/>
return (
<HighlightedCode
language={language}
startLineNumber={showLineNumbers ? startLineNumber : undefined}
wrapLines={wrapLines}
code={code}
/>
)
}
}