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

Add copy-to-clipboard-button to all code blocks (#566)

Browse source 
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

Co-authored-by: mrdrogdrog <mr.drogdrog@gmail.com>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Philip Molares 2020-09-19 22:24:49 +02:00 • committed by GitHub
parent 005c80ff55
commit 8e8190b800
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 156 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code.tsx
View file

@ -1,6 +1,8 @@
import hljs from 'highlight.js'
import React, { Fragment, useMemo } from 'react'
import ReactHtmlParser from 'react-html-parser'
import { CopyToClipboardButton } from '../../../../common/copyable/copy-to-clipboard-button/copy-to-clipboard-button'
import '../../../utils/button-inside.scss'
import './highlighted-code.scss'
export interface HighlightedCodeProps {
@ -42,18 +44,22 @@ export const HighlightedCode: React.FC<HighlightedCodeProps> = ({ code, language
}, [code, language])
return (
<code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
{
highlightedCode
.map((line, index) => {
return <Fragment key={index}>
<span className={'linenumber'} data-line-number={(startLineNumber || 1) + index}/>
<div className={'codeline'}>
{line}
</div>
</Fragment>
})
}
</code>)
<Fragment>
<code className={`hljs ${startLineNumber !== undefined ? 'showGutter' : ''} ${wrapLines ? 'wrapLines' : ''}`}>
{
highlightedCode
.map((line, index) => (
<Fragment key={index}>
<span className={'linenumber'} data-line-number={(startLineNumber || 1) + index}/>
<div className={'codeline'}>
{line}
</div>
</Fragment>
))
}
</code>
<div className={'text-right button-inside'}>
<CopyToClipboardButton content={code}/>
</div>
</Fragment>)
}

3
src/components/markdown-renderer/utils/button-inside.scss Normal file
View file

@ -0,0 +1,3 @@
.button-inside {
margin-top: -31px;
}