Code Block copy button not working

[hannesrudolph]

Am I alone on this?

[hannesrudolph]

rewrote use-copy-clipboard.tsx to this and now it works

Original

import { useState } from "react"

export interface useCopyToClipboardProps {
  timeout?: number
}

export function useCopyToClipboard({
  timeout = 2000
}: useCopyToClipboardProps) {
  const [isCopied, setIsCopied] = useState<Boolean>(false)

  const copyToClipboard = (value: string) => {
    if (typeof window === "undefined" || !navigator.clipboard?.writeText) {
      return
    }

    if (!value) {
      return
    }

    navigator.clipboard.writeText(value).then(() => {
      setIsCopied(true)

      setTimeout(() => {
        setIsCopied(false)
      }, timeout)
    })
  }

  return { isCopied, copyToClipboard }
}

New

import { useState } from "react"

export interface useCopyToClipboardProps {
  timeout?: number
}

export function useCopyToClipboard({
  timeout = 2000
}: useCopyToClipboardProps) {
  const [isCopied, setIsCopied] = useState<Boolean>(false)

  const copyToClipboard = (value: string) => {
    if (!value) {
      console.warn("No value to copy")
      return
    }

    if (typeof window === "undefined") {
      console.warn("Window object not available")
      return
    }

    if (navigator.clipboard?.writeText) {
      navigator.clipboard
        .writeText(value)
        .then(() => {
          setIsCopied(true)
          setTimeout(() => setIsCopied(false), timeout)
        })
        .catch((err) => console.error("Failed to copy to clipboard:", err))
    } else {
      // Fallback to document.execCommand('copy')
      const textarea = document.createElement("textarea")
      textarea.value = value
      document.body.appendChild(textarea)
      textarea.select()
      document.execCommand("copy")
      document.body.removeChild(textarea)
      setIsCopied(true)
      setTimeout(() => setIsCopied(false), timeout)
    }
  }

  return { isCopied, copyToClipboard }
}

[thehackergpt]

@hannesrudolph The Original code works for me.

[hannesrudolph]

@hannesrudolph The Original code works for me.

What browser are you using? Also, the code I implemented is the same mechanism to copy as used for the copy button on the post/entry. Not sure why they were different. The only difference is I kept both mechanism on the one I implemented onto the code box.

[thehackergpt]

@hannesrudolph The Original code works for me.

What browser are you using? Also, the code I implemented is the same mechanism to copy as used for the copy button on the post/entry. Not sure why they were different. The only difference is I kept both mechanism on the one I implemented onto the code box.

I tried on Firefox and Safari. Could it be a problem with browser extensions?

[hannesrudolph]

extensions?

I use chrome. Let me check if it's an extension. That should have been my first thought. Duhhhh. Yesterday after installing big-agi I also experienced the same problem so that would make sense. I'll report back.

[hannesrudolph]

@hannesrudolph The Original code works for me.

What browser are you using? Also, the code I implemented is the same mechanism to copy as used for the copy button on the post/entry. Not sure why they were different. The only difference is I kept both mechanism on the one I implemented onto the code box.

I tried on Firefox and Safari. Could it be a problem with browser extensions?

Disabled all my extensions and still same problem. :(

[hannesrudolph]

@hannesrudolph The Original code works for me.

What browser are you using? Also, the code I implemented is the same mechanism to copy as used for the copy button on the post/entry. Not sure why they were different. The only difference is I kept both mechanism on the one I implemented onto the code box.

I tried on Firefox and Safari. Could it be a problem with browser extensions?

It appears that Chrome is blocking the clipboard API because the website is not using HTTPS. TBH I have no clue how to get the local site to run https. I think thats my best bet.

[HowieG]

Bump

[whatcheers]

You can enable cut / copy with http if you add the flag

edge://flags/#
-- unsafely-treat-insecure-origin-as-secure=http://hostname:3000

I wasn't able to find documentation for https either.

[hannesrudolph]

My site browser would not allow clipboard access on http because of a company profile I am using in google chrome. I just rewrote that snippet. I'm not running edge.

[whatcheers]

My site browser would not allow clipboard access on http because of a company profile I am using in google chrome. I just rewrote that snippet. I'm not running edge.

Chrome and Edge are the same thing

[hannesrudolph]

My site browser would not allow clipboard access on http because of a company profile I am using in google chrome. I just rewrote that snippet. I'm not running edge.

Chrome and Edge are the same thing

? I'm not computer illiterate but I'm clearly behind on things.