From 436fb826ac9c464a1a8523c051dcf7dc3d8f2d5d Mon Sep 17 00:00:00 2001 From: Laura Hausmann Date: Mon, 27 Nov 2023 22:15:18 +0100 Subject: [PATCH] [client] Fix copyToClipboard so it no longer copies things with weird formatting This also switches to a non-deprecated clipboard API --- .../client/src/components/MkDrive.file.vue | 6 ++-- packages/client/src/components/MkKeyValue.vue | 6 ++-- .../src/components/MkModalPageWindow.vue | 4 +-- packages/client/src/components/MkNote.vue | 4 +-- packages/client/src/components/MkNoteSub.vue | 4 +-- .../client/src/components/MkPageWindow.vue | 4 +-- packages/client/src/components/global/MkA.vue | 4 +-- packages/client/src/pages/emojis.emoji.vue | 6 ++-- packages/client/src/pages/page.vue | 6 ++-- .../src/pages/settings/theme.manage.vue | 6 ++-- .../client/src/scripts/copy-to-clipboard.ts | 36 +++---------------- packages/client/src/scripts/get-note-menu.ts | 18 +++++----- packages/client/src/scripts/get-user-menu.ts | 16 ++++----- 13 files changed, 46 insertions(+), 74 deletions(-) diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue index 8ed9be3eb..9e8f615ae 100644 --- a/packages/client/src/components/MkDrive.file.vue +++ b/packages/client/src/components/MkDrive.file.vue @@ -197,9 +197,9 @@ function toggleSensitive() { }); } -function copyUrl() { - copyToClipboard(props.file.url); - os.success(); +async function copyUrl() { + await copyToClipboard(props.file.url); + await os.success(); } /* function addApp() { diff --git a/packages/client/src/components/MkKeyValue.vue b/packages/client/src/components/MkKeyValue.vue index 4cc4d6777..9ce106442 100644 --- a/packages/client/src/components/MkKeyValue.vue +++ b/packages/client/src/components/MkKeyValue.vue @@ -35,9 +35,9 @@ const props = withDefaults( }, ); -const copy_ = () => { - copyToClipboard(props.copy); - os.success(); +const copy_ = async () => { + await copyToClipboard(props.copy ?? ''); + await os.success(); }; diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue index a29571b4e..34e664124 100644 --- a/packages/client/src/components/MkModalPageWindow.vue +++ b/packages/client/src/components/MkModalPageWindow.vue @@ -124,8 +124,8 @@ const contextmenu = $computed(() => { { icon: "ph-link-simple ph-bold ph-lg", text: i18n.ts.copyLink, - action: () => { - copyToClipboard(pageUrl); + action: async () => { + await copyToClipboard(pageUrl); }, }, ]; diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index d4d1a4a8b..02c0f5647 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -463,8 +463,8 @@ function onContextmenu(ev: MouseEvent): void { { icon: "ph-link-simple ph-bold ph-lg", text: i18n.ts.copyLink, - action: () => { - copyToClipboard(`${url}${notePage(appearNote)}`); + action: async () => { + await copyToClipboard(`${url}${notePage(appearNote)}`); }, }, appearNote.user.host != null diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue index 5bc7f3e5f..589dd9f7d 100644 --- a/packages/client/src/components/MkNoteSub.vue +++ b/packages/client/src/components/MkNoteSub.vue @@ -378,8 +378,8 @@ function onContextmenu(ev: MouseEvent): void { { icon: "ph-link-simple ph-bold ph-lg", text: i18n.ts.copyLink, - action: () => { - copyToClipboard(`${url}${notePage(appearNote)}`); + action: async () => { + await copyToClipboard(`${url}${notePage(appearNote)}`); }, }, note.user.host != null diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue index 88da05ffa..67fc5fedf 100644 --- a/packages/client/src/components/MkPageWindow.vue +++ b/packages/client/src/components/MkPageWindow.vue @@ -128,8 +128,8 @@ const contextmenu = $computed(() => [ { icon: "ph-link-simple ph-bold ph-lg", text: i18n.ts.copyLink, - action: () => { - copyToClipboard(url + router.getCurrentPath()); + action: async () => { + await copyToClipboard(url + router.getCurrentPath()); }, }, ]); diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue index 93a02d443..d3541e130 100644 --- a/packages/client/src/components/global/MkA.vue +++ b/packages/client/src/components/global/MkA.vue @@ -76,8 +76,8 @@ function onContextmenu(ev) { { icon: "ph-link-simple ph-bold ph-lg", text: i18n.ts.copyLink, - action: () => { - copyToClipboard(`${url}${props.to}`); + action: async () => { + await copyToClipboard(`${url}${props.to}`); }, }, ], diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue index add558f72..dbb82c35d 100644 --- a/packages/client/src/pages/emojis.emoji.vue +++ b/packages/client/src/pages/emojis.emoji.vue @@ -28,9 +28,9 @@ function menu(ev) { { text: i18n.ts.copy, icon: "ph-clipboard-text ph-bold ph-lg", - action: () => { - copyToClipboard(`:${props.emoji.name}:`); - os.success(); + action: async () => { + await copyToClipboard(`:${props.emoji.name}:`); + await os.success(); }, }, { diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue index 069d5da29..6caaac791 100644 --- a/packages/client/src/pages/page.vue +++ b/packages/client/src/pages/page.vue @@ -245,9 +245,9 @@ function fetchPage() { }); } -function copyUrl() { - copyToClipboard(window.location.href); - os.success(); +async function copyUrl() { + await copyToClipboard(window.location.href); + await os.success(); } function getBgImg(): string { diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue index 79689b4e2..1d2d8bb35 100644 --- a/packages/client/src/pages/settings/theme.manage.vue +++ b/packages/client/src/pages/settings/theme.manage.vue @@ -87,9 +87,9 @@ const selectedThemeCode = computed(() => { return JSON5.stringify(selectedTheme.value, null, "\t"); }); -function copyThemeCode() { - copyToClipboard(selectedThemeCode.value); - os.success(); +async function copyThemeCode() { + await copyToClipboard(selectedThemeCode.value ?? ''); + await os.success(); } function uninstall() { diff --git a/packages/client/src/scripts/copy-to-clipboard.ts b/packages/client/src/scripts/copy-to-clipboard.ts index a4835d8e7..ee4359f79 100644 --- a/packages/client/src/scripts/copy-to-clipboard.ts +++ b/packages/client/src/scripts/copy-to-clipboard.ts @@ -1,33 +1,5 @@ -/** - * Clipboardに値をコピー(TODO: 文字列以外も対応) - */ -export default (val) => { - // 空div 生成 - const tmp = document.createElement("div"); - // 選択用のタグ生成 - const pre = document.createElement("pre"); +export async function copyToClipboard(val: string) { + await navigator.clipboard.writeText(val); +} - // 親要素のCSSで user-select: none だとコピーできないので書き換える - pre.style.webkitUserSelect = "auto"; - pre.style.userSelect = "auto"; - - tmp.appendChild(pre).textContent = val; - - // 要素を画面外へ - const s = tmp.style; - s.position = "fixed"; - s.right = "200%"; - - // body に追加 - document.body.appendChild(tmp); - // 要素を選択 - document.getSelection().selectAllChildren(tmp); - - // クリップボードにコピー - const result = document.execCommand("copy"); - - // 要素削除 - document.body.removeChild(tmp); - - return result; -}; +export default copyToClipboard; diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts index 3c05bc619..55e3cbf68 100644 --- a/packages/client/src/scripts/get-note-menu.ts +++ b/packages/client/src/scripts/get-note-menu.ts @@ -99,19 +99,19 @@ export function getNoteMenu(props: { ); } - function copyContent(): void { - copyToClipboard(appearNote.text); - os.success(); + async function copyContent(): Promise { + await copyToClipboard(appearNote.text); + await os.success(); } - function copyLink(): void { - copyToClipboard(`${url}/notes/${appearNote.id}`); - os.success(); + async function copyLink(): Promise { + await copyToClipboard(`${url}/notes/${appearNote.id}`); + await os.success(); } - function copyOriginal(): void { - copyToClipboard(appearNote.url ?? appearNote.uri); - os.success(); + async function copyOriginal(): Promise { + await copyToClipboard(appearNote.url ?? appearNote.uri); + await os.success(); } function togglePin(pin: boolean): void { diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts index e23ef97a0..d161384b6 100644 --- a/packages/client/src/scripts/get-user-menu.ts +++ b/packages/client/src/scripts/get-user-menu.ts @@ -234,8 +234,8 @@ export function getUserMenu(user, router: Router = mainRouter) { { icon: "ph-at ph-bold ph-lg", text: i18n.ts.copyUsername, - action: () => { - copyToClipboard(`@${user.username}@${user.host || host}`); + action: async () => { + await copyToClipboard(`@${user.username}@${user.host || host}`); }, }, { @@ -253,22 +253,22 @@ export function getUserMenu(user, router: Router = mainRouter) { { icon: "ph-rss ph-bold ph-lg", text: i18n.ts._feeds.rss, - action: () => { - copyToClipboard(`https://${host}/@${user.username}.rss`); + action: async () => { + await copyToClipboard(`https://${host}/@${user.username}.rss`); }, }, { icon: "ph-atom ph-bold ph-lg", text: i18n.ts._feeds.atom, - action: () => { - copyToClipboard(`https://${host}/@${user.username}.atom`); + action: async () => { + await copyToClipboard(`https://${host}/@${user.username}.atom`); }, }, { icon: "ph-brackets-curly ph-bold ph-lg", text: i18n.ts._feeds.jsonFeed, - action: () => { - copyToClipboard(`https://${host}/@${user.username}.json`); + action: async () => { + await copyToClipboard(`https://${host}/@${user.username}.json`); }, }, ],