-
-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: enchance copy link action (#8797)
What's Changed * enhance copy link action * detect compatibility * fall back to `document.execCommand`
- Loading branch information
Showing
5 changed files
with
130 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| const createFakeElement = (text: string) => { | ||
| const isRTL = document.documentElement.getAttribute('dir') === 'rtl'; | ||
| const fakeElement = document.createElement('textarea'); | ||
| // Prevent zooming on iOS | ||
| fakeElement.style.fontSize = '12pt'; | ||
| // Reset box model | ||
| fakeElement.style.border = '0'; | ||
| fakeElement.style.padding = '0'; | ||
| fakeElement.style.margin = '0'; | ||
| // Move element out of screen horizontally | ||
| fakeElement.style.position = 'absolute'; | ||
| fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px'; | ||
| // Move element to the same position vertically | ||
| const yPosition = window.pageYOffset || document.documentElement.scrollTop; | ||
| fakeElement.style.top = `${yPosition}px`; | ||
|
|
||
| fakeElement.setAttribute('readonly', ''); | ||
| fakeElement.value = text; | ||
|
|
||
| return fakeElement; | ||
| }; | ||
|
|
||
| function command(type: string) { | ||
| try { | ||
| return document.execCommand(type); | ||
| } catch (err) { | ||
| console.error(err); | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| export const fakeCopyAction = (text: string, container = document.body) => { | ||
| let success = false; | ||
|
|
||
| const fakeElement = createFakeElement(text); | ||
| container.append(fakeElement); | ||
|
|
||
| try { | ||
| fakeElement.select(); | ||
| fakeElement.setSelectionRange(0, fakeElement.value.length); | ||
| success = command('copy'); | ||
| } catch (err) { | ||
| console.error(err); | ||
| } | ||
|
|
||
| fakeElement.remove(); | ||
|
|
||
| return success; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { type Clipboard as BlockStdScopeClipboard } from '@blocksuite/affine/block-std'; | ||
|
|
||
| import { fakeCopyAction } from './fake'; | ||
|
|
||
| const clipboardWriteIsSupported = | ||
| 'clipboard' in navigator && 'write' in navigator.clipboard; | ||
|
|
||
| const clipboardWriteTextIsSupported = | ||
| 'clipboard' in navigator && 'writeText' in navigator.clipboard; | ||
|
|
||
| export const copyTextToClipboard = async (text: string) => { | ||
| // 1. try using Async API first, works on HTTPS domain | ||
| if (clipboardWriteTextIsSupported) { | ||
| try { | ||
| await navigator.clipboard.writeText(text); | ||
| return true; | ||
| } catch (err) { | ||
| console.error(err); | ||
| } | ||
| } | ||
|
|
||
| // 2. try using `document.execCommand` | ||
| // https://github.com/zenorocha/clipboard.js/blob/master/src/actions/copy.js | ||
| return fakeCopyAction(text); | ||
| }; | ||
|
|
||
| export const copyLinkToBlockStdScopeClipboard = async ( | ||
| text: string, | ||
| clipboard?: BlockStdScopeClipboard | ||
| ) => { | ||
| let success = false; | ||
|
|
||
| if (!clipboard) return success; | ||
|
|
||
| if (clipboardWriteIsSupported) { | ||
| try { | ||
| await clipboard.writeToClipboard(items => { | ||
| items['text/plain'] = text; | ||
| // wrap a link | ||
| items['text/html'] = `<a href="${text}">${text}</a>`; | ||
| return items; | ||
| }); | ||
| success = true; | ||
| } catch (error) { | ||
| console.error(error); | ||
| } | ||
| } | ||
|
|
||
| if (!success) { | ||
| success = await copyTextToClipboard(text); | ||
| } | ||
|
|
||
| return success; | ||
| }; |