From 009d7782a4758dab2f420f72be834f248800d108 Mon Sep 17 00:00:00 2001 From: fantasticit Date: Fri, 6 May 2022 23:57:55 +0800 Subject: [PATCH] fix: fix copy text --- .../client/src/helpers/copy-to-clipboard.js | 171 +++++------------- packages/client/src/helpers/copy.tsx | 14 +- 2 files changed, 49 insertions(+), 136 deletions(-) diff --git a/packages/client/src/helpers/copy-to-clipboard.js b/packages/client/src/helpers/copy-to-clipboard.js index 84ddee3..be6cae7 100644 --- a/packages/client/src/helpers/copy-to-clipboard.js +++ b/packages/client/src/helpers/copy-to-clipboard.js @@ -3,143 +3,66 @@ var deselectCurrent = require('toggle-selection'); -var clipboardToIE11Formatting = { - 'text/plain': 'Text', - 'text/html': 'Url', - 'default': 'Text', -}; - -var defaultMessage = 'Copy to clipboard: #{key}, Enter'; - -function format(message) { - var copyKey = (/mac os x/i.test(navigator.userAgent) ? '⌘' : 'Ctrl') + '+C'; - return message.replace(/#{\s*key\s*}/g, copyKey); -} - -function copy(text, options) { - var debug, - message, - reselectPrevious, +function copy(text, onCopy) { + var reselectPrevious, range, selection, mark, success = false; - if (!options) { - options = {}; - } - debug = options.debug || false; - try { - reselectPrevious = deselectCurrent(); - range = document.createRange(); - selection = document.getSelection(); + reselectPrevious = deselectCurrent(); + range = document.createRange(); + selection = document.getSelection(); - mark = document.createElement('span'); - mark.textContent = text; - // reset user styles for span element - mark.style.all = 'unset'; - // prevents scrolling to the end of the page - mark.style.position = 'fixed'; - mark.style.top = 0; - mark.style.clip = 'rect(0, 0, 0, 0)'; - // used to preserve spaces and line breaks - mark.style.whiteSpace = 'pre'; - // do not inherit user-select (it may be `none`) - mark.style.webkitUserSelect = 'text'; - mark.style.MozUserSelect = 'text'; - mark.style.msUserSelect = 'text'; - mark.style.userSelect = 'text'; - mark.addEventListener('copy', function (e) { - e.stopPropagation(); - if (options.format) { - e.preventDefault(); - if (typeof e.clipboardData === 'undefined') { - // IE 11 - debug && console.warn('unable to use e.clipboardData'); - debug && console.warn('trying IE specific stuff'); - window.clipboardData.clearData(); - var format = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting['default']; - if (Array.isArray(text)) { - text.forEach(function (item) { - if (typeof item === 'string') { - window.clipboardData.setData(item, item); - } else { - window.clipboardData.setData(item.format || format, item.text || item); - } - }); - } else { - window.clipboardData.setData(format, text); - } - } else { - // all other browsers - e.clipboardData.clearData(); - if (Array.isArray(text)) { - text.forEach(function (item) { - if (typeof item === 'string') { - e.clipboardData.setData(item, item); - } else { - e.clipboardData.setData(item.format || format, item.text || item); - } - }); - } else { - e.clipboardData.setData(format, text); - } - } - } - if (options.onCopy) { - e.preventDefault(); - options.onCopy(e.clipboardData); - } + mark = document.createElement('span'); + mark.textContent = text; + mark.style.all = 'unset'; + mark.style.position = 'fixed'; + mark.style.top = 0; + mark.style.clip = 'rect(0, 0, 0, 0)'; + mark.style.whiteSpace = 'pre'; + mark.style.webkitUserSelect = 'text'; + mark.style.MozUserSelect = 'text'; + mark.style.msUserSelect = 'text'; + mark.style.userSelect = 'text'; + mark.addEventListener('copy', function (e) { + var data = []; + + if (typeof text === 'string') { + data = [{ format: 'text/plain', text: text }]; + } else if (Array.isArray(text)) { + text.forEach(function (item) { + data.push({ + format: item.format || 'text/plain', + text: item.text || item, + }); + }); + } else { + data.push({ + format: 'text/plain', + text: text, + }); + } + + data.forEach(function (item) { + e.clipboardData.setData(item.format, item.text); }); - document.body.appendChild(mark); + e.preventDefault(); - range.selectNodeContents(mark); - selection.addRange(range); + onCopy && onCopy(); + }); - var successful = document.execCommand('copy'); - if (!successful) { - throw new Error('copy command was unsuccessful'); - } - success = true; - } catch (err) { - debug && console.error('unable to copy using execCommand: ', err); - debug && console.warn('trying IE specific stuff'); - try { - if (Array.isArray(text)) { - text.forEach(function (item) { - if (typeof item === 'string') { - window.clipboardData.setData(item, item); - } else { - window.clipboardData.setData(item.format || format, item.text || item); - } - }); - } else { - window.clipboardData.setData(format, text); - } - options.onCopy && options.onCopy(window.clipboardData); - success = true; - } catch (err) { - debug && console.error('unable to copy using clipboardData: ', err); - debug && console.error('falling back to prompt'); - message = format('message' in options ? options.message : defaultMessage); - window.prompt(message, text); - } - } finally { - if (selection) { - if (typeof selection.removeRange == 'function') { - selection.removeRange(range); - } else { - selection.removeAllRanges(); - } - } + document.body.appendChild(mark); + range.selectNodeContents(mark); + selection.addRange(range); + var successful = document.execCommand('copy'); - if (mark) { - document.body.removeChild(mark); - } - reselectPrevious(); + if (!successful) { + throw new Error('copy command was unsuccessful'); } + success = true; return success; } diff --git a/packages/client/src/helpers/copy.tsx b/packages/client/src/helpers/copy.tsx index 9174696..9aa004a 100644 --- a/packages/client/src/helpers/copy.tsx +++ b/packages/client/src/helpers/copy.tsx @@ -1,16 +1,6 @@ import _copy from './copy-to-clipboard'; import { Toast } from '@douyinfe/semi-ui'; -interface Options { - debug?: boolean; - message?: string; - format?: string; // MIME type - onCopy?: (clipboardData: object) => void; -} - -export function copy(text: string | { text: string; format: string }[], options?: Options) { - options = options || {}; - options.onCopy = options.onCopy || (() => Toast.success(options.message || '复制成功')); - options.format = options.format || 'text/plain'; - return _copy(text, options); +export function copy(text: string | { text: string; format: string }[]) { + return _copy(text, () => Toast.success('复制成功')); }