mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-14 15:14:56 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Restructure highlight code to enable line wrapping (#265)

Browse source 
* Restructure highlight code to enable line wrapping

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
mrdrogdrog 2020-06-23 22:09:56 +02:00 • committed by GitHub
parent 6bf214542e
commit eb56da7871
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 63 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/components/common/highlighted-code/highlighted-code.tsx
View file

@ -1,13 +1,13 @@
import hljs from 'highlight.js'
import React, { useMemo } from 'react'
import React, { Fragment, useMemo } from 'react'
import ReactHtmlParser from 'react-html-parser'
import { ShowIf } from '../show-if/show-if'
import './highlighted-code.scss'
export interface HighlightedCodeProps {
code: string,
language?: string,
showGutter: boolean
wrapLines: boolean
}
export const escapeHtml = (unsafe: string): string => {
@ -19,11 +19,11 @@ export const escapeHtml = (unsafe: string): string => {
.replace(/'/g, '&#039;')
}
const checkIfLanguageIsSupported = (language: string):boolean => {
const checkIfLanguageIsSupported = (language: string): boolean => {
return hljs.listLanguages().indexOf(language) > -1
}
const correctLanguage = (language: string|undefined): string|undefined => {
const correctLanguage = (language: string | undefined): string | undefined => {
switch (language) {
case 'html':
return 'xml'
@ -32,7 +32,7 @@ const correctLanguage = (language: string|undefined): string|undefined => {
}
}
export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language, showGutter }) => {
export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language, showGutter, wrapLines }) => {
const highlightedCode = useMemo(() => {
const replacedLanguage = correctLanguage(language)
return ((!!replacedLanguage && checkIfLanguageIsSupported(replacedLanguage)) ? hljs.highlight(replacedLanguage, code).value : escapeHtml(code))
@ -42,25 +42,18 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
}, [code, language])
return (
<code className={'hljs'}>
<ShowIf condition={showGutter}>
<span className={'linenumbers'}>
{
highlightedCode
.map((line, index) => {
return <span key={index} data-line-number={index + 1}/>
})
}
</span>
</ShowIf>
<span className={'code'}>
{
highlightedCode
.map((line, index) =>
<div key={index} className={'line'}>
<code className={`hljs ${showGutter ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
{
highlightedCode
.map((line, index) => {
return <Fragment key={index}>
<span className={'linenumber'} data-line-number={index + 1}/>
<div className={'line'}>
{line}
</div>)
}
</span>
</div>
</Fragment>
})
}
</code>)
}