mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-16 08:04:45 -04:00
Add prettier for codestyle and re-format everything (#1294)
This commit is contained in:
parent
8b78154075
commit
0aae1f70d2
319 changed files with 4809 additions and 3936 deletions
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue