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

This also switches to a non-deprecated clipboard API
This commit is contained in:
Laura Hausmann 2023-11-27 22:15:18 +01:00
parent 8a7c7cb0c9
commit 436fb826ac
Signed by: zotan
GPG key ID: D044E84C5BE01605
13 changed files with 46 additions and 74 deletions

View file

@ -197,9 +197,9 @@ function toggleSensitive() {
}); });
} }
function copyUrl() { async function copyUrl() {
copyToClipboard(props.file.url); await copyToClipboard(props.file.url);
os.success(); await os.success();
} }
/* /*
function addApp() { function addApp() {

View file

@ -35,9 +35,9 @@ const props = withDefaults(
}, },
); );
const copy_ = () => { const copy_ = async () => {
copyToClipboard(props.copy); await copyToClipboard(props.copy ?? '');
os.success(); await os.success();
}; };
</script> </script>

View file

@ -124,8 +124,8 @@ const contextmenu = $computed(() => {
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: "ph-link-simple ph-bold ph-lg",
text: i18n.ts.copyLink, text: i18n.ts.copyLink,
action: () => { action: async () => {
copyToClipboard(pageUrl); await copyToClipboard(pageUrl);
}, },
}, },
]; ];

View file

@ -463,8 +463,8 @@ function onContextmenu(ev: MouseEvent): void {
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: "ph-link-simple ph-bold ph-lg",
text: i18n.ts.copyLink, text: i18n.ts.copyLink,
action: () => { action: async () => {
copyToClipboard(`${url}${notePage(appearNote)}`); await copyToClipboard(`${url}${notePage(appearNote)}`);
}, },
}, },
appearNote.user.host != null appearNote.user.host != null

View file

@ -378,8 +378,8 @@ function onContextmenu(ev: MouseEvent): void {
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: "ph-link-simple ph-bold ph-lg",
text: i18n.ts.copyLink, text: i18n.ts.copyLink,
action: () => { action: async () => {
copyToClipboard(`${url}${notePage(appearNote)}`); await copyToClipboard(`${url}${notePage(appearNote)}`);
}, },
}, },
note.user.host != null note.user.host != null

View file

@ -128,8 +128,8 @@ const contextmenu = $computed(() => [
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: "ph-link-simple ph-bold ph-lg",
text: i18n.ts.copyLink, text: i18n.ts.copyLink,
action: () => { action: async () => {
copyToClipboard(url + router.getCurrentPath()); await copyToClipboard(url + router.getCurrentPath());
}, },
}, },
]); ]);

View file

@ -76,8 +76,8 @@ function onContextmenu(ev) {
{ {
icon: "ph-link-simple ph-bold ph-lg", icon: "ph-link-simple ph-bold ph-lg",
text: i18n.ts.copyLink, text: i18n.ts.copyLink,
action: () => { action: async () => {
copyToClipboard(`${url}${props.to}`); await copyToClipboard(`${url}${props.to}`);
}, },
}, },
], ],

View file

@ -28,9 +28,9 @@ function menu(ev) {
{ {
text: i18n.ts.copy, text: i18n.ts.copy,
icon: "ph-clipboard-text ph-bold ph-lg", icon: "ph-clipboard-text ph-bold ph-lg",
action: () => { action: async () => {
copyToClipboard(`:${props.emoji.name}:`); await copyToClipboard(`:${props.emoji.name}:`);
os.success(); await os.success();
}, },
}, },
{ {

View file

@ -245,9 +245,9 @@ function fetchPage() {
}); });
} }
function copyUrl() { async function copyUrl() {
copyToClipboard(window.location.href); await copyToClipboard(window.location.href);
os.success(); await os.success();
} }
function getBgImg(): string { function getBgImg(): string {

View file

@ -87,9 +87,9 @@ const selectedThemeCode = computed(() => {
return JSON5.stringify(selectedTheme.value, null, "\t"); return JSON5.stringify(selectedTheme.value, null, "\t");
}); });
function copyThemeCode() { async function copyThemeCode() {
copyToClipboard(selectedThemeCode.value); await copyToClipboard(selectedThemeCode.value ?? '');
os.success(); await os.success();
} }
function uninstall() { function uninstall() {

View file

@ -1,33 +1,5 @@
/** export async function copyToClipboard(val: string) {
* Clipboardに値をコピー(TODO: 文字列以外も対応) await navigator.clipboard.writeText(val);
*/ }
export default (val) => {
// 空div 生成
const tmp = document.createElement("div");
// 選択用のタグ生成
const pre = document.createElement("pre");
// 親要素のCSSで user-select: none だとコピーできないので書き換える export default copyToClipboard;
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;
};

View file

@ -99,19 +99,19 @@ export function getNoteMenu(props: {
); );
} }
function copyContent(): void { async function copyContent(): Promise<void> {
copyToClipboard(appearNote.text); await copyToClipboard(appearNote.text);
os.success(); await os.success();
} }
function copyLink(): void { async function copyLink(): Promise<void> {
copyToClipboard(`${url}/notes/${appearNote.id}`); await copyToClipboard(`${url}/notes/${appearNote.id}`);
os.success(); await os.success();
} }
function copyOriginal(): void { async function copyOriginal(): Promise<void> {
copyToClipboard(appearNote.url ?? appearNote.uri); await copyToClipboard(appearNote.url ?? appearNote.uri);
os.success(); await os.success();
} }
function togglePin(pin: boolean): void { function togglePin(pin: boolean): void {

View file

@ -234,8 +234,8 @@ export function getUserMenu(user, router: Router = mainRouter) {
{ {
icon: "ph-at ph-bold ph-lg", icon: "ph-at ph-bold ph-lg",
text: i18n.ts.copyUsername, text: i18n.ts.copyUsername,
action: () => { action: async () => {
copyToClipboard(`@${user.username}@${user.host || host}`); 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", icon: "ph-rss ph-bold ph-lg",
text: i18n.ts._feeds.rss, text: i18n.ts._feeds.rss,
action: () => { action: async () => {
copyToClipboard(`https://${host}/@${user.username}.rss`); await copyToClipboard(`https://${host}/@${user.username}.rss`);
}, },
}, },
{ {
icon: "ph-atom ph-bold ph-lg", icon: "ph-atom ph-bold ph-lg",
text: i18n.ts._feeds.atom, text: i18n.ts._feeds.atom,
action: () => { action: async () => {
copyToClipboard(`https://${host}/@${user.username}.atom`); await copyToClipboard(`https://${host}/@${user.username}.atom`);
}, },
}, },
{ {
icon: "ph-brackets-curly ph-bold ph-lg", icon: "ph-brackets-curly ph-bold ph-lg",
text: i18n.ts._feeds.jsonFeed, text: i18n.ts._feeds.jsonFeed,
action: () => { action: async () => {
copyToClipboard(`https://${host}/@${user.username}.json`); await copyToClipboard(`https://${host}/@${user.username}.json`);
}, },
}, },
], ],