feat: add fallback for useCopyToClipboard #2343

Merged
konrad merged 1 commits from dpschen/frontend:feature/feat-copy-fallback into main 2022-09-13 12:56:30 +00:00
1 changed files with 33 additions and 2 deletions

View File

@ -3,11 +3,42 @@ import {useI18n} from 'vue-i18n'
export function useCopyToClipboard() {
const {t} = useI18n({useScope: 'global'})
function fallbackCopyTextToClipboard(text: string) {
const textArea = document.createElement('textarea')
textArea.value = text
// Avoid scrolling to bottom
textArea.style.top = '0'
textArea.style.left = '0'
textArea.style.position = 'fixed'
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
try {
// NOTE: the execCommand is deprecated but as of 2022_09
// widely supported and works without https
const successful = document.execCommand('copy')
if (!successful) {
throw new Error()
}
} catch (err) {
error(t('misc.copyError'))
}
document.body.removeChild(textArea)
}
return async (text: string) => {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text)
return
}
try {
await navigator.clipboard.writeText(text)
} catch {
} catch(e) {
error(t('misc.copyError'))
}
}