fix(filters): add fallback for clipboard api on http (#804)

add a fallback for clipboard api

The Clipboard API requires HTTPS, so we need to add a fallback for HTTP. Using the old execCommand('copy') method.
This commit is contained in:
soup 2023-04-01 13:33:00 +02:00 committed by GitHub
parent 64c2da591e
commit de6638065a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -405,14 +405,41 @@ const FilterItemDropdown = ({ filter, onToggle }: FilterItemDropdownProps) => {
); );
const finalJson = discordFormat ? "```JSON\n" + json + "\n```" : json; const finalJson = discordFormat ? "```JSON\n" + json + "\n```" : json;
const copyTextToClipboard = (text: string) => {
const textarea = document.createElement("textarea");
textarea.style.position = "fixed";
textarea.style.opacity = "0";
textarea.value = text;
document.body.appendChild(textarea);
textarea.focus();
textarea.select();
try {
const successful = document.execCommand("copy");
if (successful) {
toast.custom((t) => <Toast type="success" body="Filter copied to clipboard." t={t} />);
} else {
toast.custom((t) => <Toast type="error" body="Failed to copy JSON to clipboard." t={t} />);
}
} catch (err) {
console.error("Unable to copy text", err);
toast.custom((t) => <Toast type="error" body="Failed to copy JSON to clipboard." t={t} />);
}
document.body.removeChild(textarea);
};
if (navigator.clipboard) {
navigator.clipboard.writeText(finalJson).then(() => {
toast.custom((t) => <Toast type="success" body="Filter copied to clipboard." t={t} />);
}, () => {
toast.custom((t) => <Toast type="error" body="Failed to copy JSON to clipboard." t={t} />);
});
} else {
copyTextToClipboard(finalJson);
}
navigator.clipboard.writeText(finalJson).then(() => {
toast.custom((t) => <Toast type="success" body="Filter copied to clipboard." t={t} />);
}, () => {
toast.custom((t) => <Toast type="error" body="Failed to copy JSON to clipboard." t={t} />);
});
} catch (error) { } catch (error) {
console.error(error); console.error(error);
toast.custom((t) => <Toast type="error" body="Failed to get filter data." t={t} />); toast.custom((t) => <Toast type="error" body="Failed to get filter data." t={t} />);