[client] Fix copyToClipboard so it no longer copies things with weird formatting

This also switches to a non-deprecated clipboard API

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() {

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();
 };
 </script>
 

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);
 			},
 		},
 	];

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

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

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());
 		},
 	},
 ]);

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}`);
 				},
 			},
 		],

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();
 				},
 			},
 			{

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 {

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() {

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;

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<void> {
+		await copyToClipboard(appearNote.text);
+		await os.success();
 	}
 
-	function copyLink(): void {
-		copyToClipboard(`${url}/notes/${appearNote.id}`);
-		os.success();
+	async function copyLink(): Promise<void> {
+		await copyToClipboard(`${url}/notes/${appearNote.id}`);
+		await os.success();
 	}
 
-	function copyOriginal(): void {
-		copyToClipboard(appearNote.url ?? appearNote.uri);
-		os.success();
+	async function copyOriginal(): Promise<void> {
+		await copyToClipboard(appearNote.url ?? appearNote.uri);
+		await os.success();
 	}
 
 	function togglePin(pin: boolean): void {

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`);
 					},
 				},
 			],