| 65 | } |
| 66 | |
| 67 | const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => { |
| 68 | const [copyCode] = useStorage("config-copyCode", true) |
| 69 | const [isCopy, setIsCopy] = useState(false) |
| 70 | |
| 71 | const element = anchor.element |
| 72 | const style = window.getComputedStyle(element) |
| 73 | let width = style.getPropertyValue("width") |
| 74 | |
| 75 | if (location.host.includes("greasyfork")) { |
| 76 | const codeContainer = element.closest(".code-container") |
| 77 | width = window.getComputedStyle(codeContainer).getPropertyValue("width") |
| 78 | } |
| 79 | |
| 80 | const onCopy = async () => { |
| 81 | try { |
| 82 | const target = anchor.element as HTMLElement |
| 83 | const preBlock = target.closest("pre") |
| 84 | const codeBlock = target.querySelector("code") |
| 85 | let textContent = "" |
| 86 | |
| 87 | if (codeBlock) { |
| 88 | textContent = codeBlock.innerText |
| 89 | } else { |
| 90 | textContent = preBlock && preBlock.innerText |
| 91 | } |
| 92 | |
| 93 | navigator.clipboard.writeText(textContent) |
| 94 | |
| 95 | setIsCopy(true) |
| 96 | setTimeout(() => { |
| 97 | setIsCopy(false) |
| 98 | }, 1000) |
| 99 | } catch (error) { |
| 100 | console.log(error) |
| 101 | } |
| 102 | } |
| 103 | |
| 104 | return ( |
| 105 | <> |
| 106 | {copyCode ? ( |
| 107 | <div className="codebox-copyCodeHeader" style={{ width: width }}> |
| 108 | <span className="codebox-copyCodeLogo"></span> |
| 109 | <Button |
| 110 | color="primary" |
| 111 | variant="filled" |
| 112 | onClick={onCopy} |
| 113 | className="codebox-copyCodeBtn"> |
| 114 | {isCopy ? i18n("copied") : i18n("copy")} |
| 115 | </Button> |
| 116 | </div> |
| 117 | ) : ( |
| 118 | <></> |
| 119 | )} |
| 120 | </> |
| 121 | ) |
| 122 | } |
| 123 | |
| 124 | export default PlasmoOverlay |