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

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

28
src/components/common/copyable/copyable-field/copyable-field.tsx Normal file
View file

@ -0,0 +1,28 @@
import React, { Fragment, useRef } from 'react'
import { Button, FormControl, InputGroup } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { ForkAwesomeIcon } from '../../fork-awesome/fork-awesome-icon'
import { CopyOverlay } from '../copy-overlay'
export interface CopyableFieldProps {
content: string
}
export const CopyableField: React.FC<CopyableFieldProps> = ({ content }) => {
useTranslation()
const button = useRef<HTMLButtonElement>(null)
return (
<Fragment>
<InputGroup className="my-3">
<FormControl readOnly={true} className={'text-center'} value={content} />
<InputGroup.Append>
<Button variant="outline-secondary" ref={button} title={'Copy'}>
<ForkAwesomeIcon icon='files-o'/>
</Button>
</InputGroup.Append>
</InputGroup>
<CopyOverlay content={content} clickComponent={button}/>
</Fragment>
)
}