PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Adds button to copy state to clipboard

Browse source
This commit is contained in:
Steve Ruiz 2021-07-04 19:54:10 +01:00
parent 8180146eb3
commit a315f8e9a6
2 changed files with 46 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
components/debug-panel/debug-panel.tsx
View file

@ -7,8 +7,10 @@ import { breakpoints, IconButton, RowButton, IconWrapper } from '../shared'
import {
Cross2Icon,
PlayIcon,
DotIcon,
CrumpledPaperIcon,
StopIcon,
ClipboardIcon,
ClipboardCopyIcon,
} from '@radix-ui/react-icons'
import logger from 'state/logger'
@ -16,6 +18,7 @@ import { useStateDesigner } from '@state-designer/react'
const stopPropagation = (e: React.KeyboardEvent) => e.stopPropagation()
const toggleDebugPanel = () => state.send('TOGGLED_DEBUG_PANEL')
const handleStateCopy = () => state.send('COPIED_STATE_TO_CLIPBOARD')
export default function CodePanel(): JSX.Element {
const rContainer = useRef<HTMLDivElement>(null)
@ -104,12 +107,19 @@ export default function CodePanel(): JSX.Element {
<div />
</Panel.Header>
<Panel.Content>
<hr />
<RowButton bp={breakpoints} onClick={handleStateCopy}>
<span>Copy State</span>
<IconWrapper size="small">
<ClipboardCopyIcon />
</IconWrapper>
</RowButton>
<hr />
{local.isIn('stopped') ? (
<RowButton bp={breakpoints} onClick={handleLoggingStart}>
<span>Start Logger</span>
<IconWrapper size="small">
<PlayIcon />
<DotIcon />
</IconWrapper>
</RowButton>
) : (
@ -120,19 +130,15 @@ export default function CodePanel(): JSX.Element {
</IconWrapper>
</RowButton>
)}
{
<RowButton
<JSONTextAreaWrapper>
<IconButton
bp={breakpoints}
onClick={handleLoggingCopy}
disabled={!local.can('COPIED_LOG')}
style={{ position: 'absolute', top: 2, right: 2 }}
>
<span>Copy Log</span>
<IconWrapper size="small">
<ClipboardCopyIcon />
</IconWrapper>
</RowButton>
}
<JSONTextAreaWrapper>
<ClipboardIcon />
</IconButton>
<JSONTextArea
ref={rTextArea}
value={local.data.log}
@ -147,6 +153,9 @@ export default function CodePanel(): JSX.Element {
disabled={!local.can('PLAYED_BACK_LOG')}
>
<span>Play Back Log</span>
<IconWrapper size="small">
<PlayIcon />
</IconWrapper>
</RowButton>
</Panel.Content>
</Panel.Layout>
@ -185,7 +194,8 @@ const StylePanelRoot = styled(Panel.Root, {
})
const JSONTextAreaWrapper = styled('div', {
padding: '4px',
position: 'relative',
margin: '4px 0',
})
const JSONTextArea = styled('textarea', {

46
state/clipboard.ts
View file

@ -119,30 +119,34 @@ class Clipboard {
}
copyStringToClipboard = (string: string) => {
const textarea = document.createElement('textarea')
textarea.setAttribute('position', 'fixed')
textarea.setAttribute('top', '0')
textarea.setAttribute('readonly', 'true')
textarea.setAttribute('contenteditable', 'true')
textarea.style.position = 'fixed'
textarea.value = string
document.body.appendChild(textarea)
textarea.focus()
textarea.select()
try {
const range = document.createRange()
range.selectNodeContents(textarea)
navigator.clipboard.writeText(string)
} catch (e) {
const textarea = document.createElement('textarea')
textarea.setAttribute('position', 'fixed')
textarea.setAttribute('top', '0')
textarea.setAttribute('readonly', 'true')
textarea.setAttribute('contenteditable', 'true')
textarea.style.position = 'fixed'
textarea.value = string
document.body.appendChild(textarea)
textarea.focus()
textarea.select()
const sel = window.getSelection()
sel.removeAllRanges()
sel.addRange(range)
try {
const range = document.createRange()
range.selectNodeContents(textarea)
textarea.setSelectionRange(0, textarea.value.length)
} catch (err) {
null // Could not copy to clipboard
} finally {
document.body.removeChild(textarea)
const sel = window.getSelection()
sel.removeAllRanges()
sel.addRange(range)
textarea.setSelectionRange(0, textarea.value.length)
} catch (err) {
null // Could not copy to clipboard
} finally {
document.body.removeChild(textarea)
}
}
return this