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

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

View file

@ -0,0 +1,26 @@
import React, { Fragment, useRef } from 'react'
import { Button } from 'react-bootstrap'
import { Variant } from 'react-bootstrap/types'
import { useTranslation } from 'react-i18next'
import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
import { CopyOverlay } from '../copy-overlay'
export interface CopyToClipboardButtonProps {
content: string
size?: 'sm' | 'lg'
variant?: Variant
}
export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({ content, size = 'sm', variant = 'dark' }) => {
const { t } = useTranslation()
const button = useRef<HTMLButtonElement>(null)
return (
<Fragment>
<Button ref={button} size={size} variant={variant} title={t('renderer.highlightCode.copyCode')}>
<ForkAwesomeIcon icon='files-o'/>
</Button>
<CopyOverlay content={content} clickComponent={button}/>
</Fragment>
)
}