clipboard permission denied

[akiman33]

I’m using your software and I’m very impressed, but I have a problem with Mozilla Firefox.
I don’t want to use Chrome, but I can’t use the service on this website:
https://copyelement.com/components
It would be nice if you could add a way to bypass the “clipboard permission denied” issue.

I've also tried:

about:config
dom.events.asyncClipboard.clipboardItem
dom.events.asyncClipboard.read
dom.events.asyncClipboard.write

and

dom.events.asyncClipboard.readText
dom.events.asyncClipboard.writeText
dom.event.clipboardevents.enabled
then restart and it still doesn't work.

[Izheil]

From the function tree it seems like this is the code the page uses:

(e, r, t) => {
        t.d(r, {
            $: () => l
        });
        var o = t(19414)
          , n = t(86562);
        let a = (0,
        n.createServerReference)("7031e8642123ca5927d4ec2882df8239a158112f57", n.callServer, void 0, n.findSourceMapURL, "copyCodeServerAction")
          , i = async () => {
            try {
                var e;
                if (!(null == (e = navigator) ? void 0 : e.permissions))
                    return !0;
                let r = await navigator.permissions.query({
                    name: "clipboard-write"
                });
                if ("granted" === r.state)
                    return !0;
                if ("prompt" === r.state)
                    return await navigator.clipboard.writeText(""),
                    !0;
                return !1
            } catch (e) {
                return !1
            }
        }
          , l = async function(e, r) {
            let t = arguments.length > 2 && void 0 !== arguments[2] && arguments[2]
              , n = o.oR.loading("Copying ".concat(t ? "template" : "component", "..."));
            try {
                if (!await i())
                    return void o.oR.error("Clipboard permission denied.", {
                        id: n,
                        duration: 5e3,
                        description: "Please enable clipboard access in your browser settings."
                    });
                let l = await a(e, r, t);
                if (!l.success) {
                    if (l.needsUpgrade)
                        return void o.oR.info("Upgrade to a pro plan to copy this", {
                            id: n
                        });
                    o.oR.error(l.error || "Failed to copy", {
                        id: n
                    });
                    return
                }
                if (!l.code)
                    return void o.oR.error("No code found", {
                        id: n
                    });
                try {
                    await navigator.clipboard.writeText(l.code)
                } catch (r) {
                    let e = document.createElement("textarea");
                    e.value = l.code,
                    e.style.position = "fixed",
                    e.style.opacity = "0",
                    document.body.appendChild(e),
                    e.select();
                    try {
                        document.execCommand("copy"),
                        document.body.removeChild(e)
                    } catch (r) {
                        throw document.body.removeChild(e),
                        Error("Failed to copy code")
                    }
                }
                o.oR.success("".concat(t ? "Template" : "Component", " copied!"), {
                    id: n
                })
            } catch (e) {
                o.oR.error(e instanceof Error ? e.message : "An unexpected error occurred", {
                    id: n
                })
            }
        }
    }

It queries for the permission of "clipboard-write" which Firefox doesn't support, and thus fails to try even if the method navigator.clipboard.writeText does actually work on firefox as far as it's triggered from a click event.

I can't do anything about that, since the page explicitly requests the api permission and doesn't bother to do cross-browser checks. Since it requires some specific id for the component and the token to be retrieved dynamically (which I assume must be held on the react state of the page) I don't see any way to bypass that check (then again, I'm no front-end developer, so maybe I just don't see it).

In any case, this repository is currently in maintenance mode and no feature requests are being accepted, so even if there was some way, it still would be out of scope unless it was some issue with any of the functions already existing in here.

[akiman33]

Certainly, thank you for your response.