Skip to content

fixed copy button functionality: issue #698 #703

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

fixed copy button functionality: issue #698 #703

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 91 additions & 27 deletions src/components/CopyCodeButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,106 @@
import React, { useState } from 'react';
import CircleButton from "../CircleButton";

interface CopyCodeButtonProps {
textToCopy: string;
}

export const CopyCodeButton = ({ textToCopy }: CopyCodeButtonProps) => {
const copyTextToClipboard = () => {
navigator.clipboard.writeText(textToCopy).catch((err) => {
console.error("Failed to copy text: ", err);
});
const [isCopied, setIsCopied] = useState(false);

const copyTextToClipboard = async () => {
console.log('Copy button clicked');
console.log('Text to copy:', textToCopy);

if (!navigator.clipboard) {
console.log('Clipboard API not available, using fallback');
// Fallback for older browsers
const textArea = document.createElement("textarea");
textArea.value = textToCopy;
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();

try {
const result = document.execCommand('copy');
console.log('Fallback copy result:', result);
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
console.log('Copy state reset');
}, 2000);
} catch (err) {
console.error('Fallback copy failed:', err);
}

document.body.removeChild(textArea);
return;
}

try {
console.log('Using Clipboard API');
await navigator.clipboard.writeText(textToCopy);
console.log('Text copied successfully');
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
console.log('Copy state reset');
}, 2000);
} catch (err) {
console.error('Clipboard API copy failed:', err);
}
};

console.log('Component rendered, isCopied:', isCopied);

return (
<CircleButton
onClick={copyTextToClipboard}
onClick={() => {
console.log('CircleButton clicked');
copyTextToClipboard();
}}
ariaLabel="Copy code to clipboard"
className="bg-white text-black"
className={`bg-white ${isCopied ? 'text-green-600' : 'text-black'} transition-colors duration-200`}
>
<svg
width="18"
height="22"
viewBox="4 7 18 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M 4.054 12.141 C 4.054 11.865 4.877 11.877 5.153 11.877 L 9.073 11.953 C 9.2 11.953 8.791 22.207 9.006 23.531 C 11.73 24.182 17.631 24.022 17.631 24.171 L 17.638 28.083 C 17.638 28.359 17.414 28.583 17.138 28.583 L 4.554 28.583 C 4.278 28.583 4.054 28.359 4.054 28.083 L 4.054 12.141 Z M 5.054 12.641 L 5.054 27.583 L 16.638 27.583 L 16.735 24.024 L 8.623 24.051 L 8.195 12.679 L 5.054 12.641 Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M 8.14 8.083 C 8.14 7.807 8.364 7.583 8.64 7.583 L 21.224 7.583 C 21.5 7.583 21.724 7.807 21.724 8.083 L 21.724 24.025 C 21.724 24.301 21.5 24.525 21.224 24.525 L 8.64 24.525 C 8.364 24.525 8.14 24.301 8.14 24.025 L 8.14 8.083 Z M 9.14 8.583 L 9.14 23.525 L 20.724 23.525 L 20.724 8.583 L 9.14 8.583 Z"
fill="currentColor"
/>
</svg>
{isCopied ? (
<svg
width="18"
height="22"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 6L9 17L4 12"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
) : (
<svg
width="18"
height="22"
viewBox="4 7 18 23"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M 4.054 12.141 C 4.054 11.865 4.877 11.877 5.153 11.877 L 9.073 11.953 C 9.2 11.953 8.791 22.207 9.006 23.531 C 11.73 24.182 17.631 24.022 17.631 24.171 L 17.638 28.083 C 17.638 28.359 17.414 28.583 17.138 28.583 L 4.554 28.583 C 4.278 28.583 4.054 28.359 4.054 28.083 L 4.054 12.141 Z M 5.054 12.641 L 5.054 27.583 L 16.638 27.583 L 16.735 24.024 L 8.623 24.051 L 8.195 12.679 L 5.054 12.641 Z"
fill="currentColor"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M 8.14 8.083 C 8.14 7.807 8.364 7.583 8.64 7.583 L 21.224 7.583 C 21.5 7.583 21.724 7.807 21.724 8.083 L 21.724 24.025 C 21.724 24.301 21.5 24.525 21.224 24.525 L 8.64 24.525 C 8.364 24.525 8.14 24.301 8.14 24.025 L 8.14 8.083 Z M 9.14 8.583 L 9.14 23.525 L 20.724 23.525 L 20.724 8.583 L 9.14 8.583 Z"
fill="currentColor"
/>
</svg>
)}
</CircleButton>
);
};
};
24 changes: 10 additions & 14 deletions src/components/MethodSignature/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,27 @@ import {
} from "@/types/parsers.interface.ts";
import CodeContainer from "@components/CodeContainer/index.astro";
import { CopyCodeButton } from "../CopyCodeButton";

const { params, name, overloads } = Astro.props;

const formatParam = (param: ReferenceParam) =>
param.optional ? `[${param.name}]` : `${param.name}`;

let formattedParams = [];

if (params) {
formattedParams.push(params.map(formatParam).join(", "));
} else if (overloads) {
for (const overload of overloads) {
formattedParams.push(overload.params.map(formatParam).join(", "));
}
}

const signature = `${name}(${formattedParams})`;
const signatures = params
? [`${name}(${params.map(formatParam).join(", ")})`]
: overloads
? overloads.map(overload =>
`${name}(${overload.params.map(formatParam).join(", ")})`)
: [];
---

{
formattedParams.map((params) => (
signatures.map((signature) => (
<CodeContainer>
<span class="text-black">{`${name}(${params})`}</span>
<span class="text-black">{signature}</span>
<div class="absolute top-xs right-xs">
<CopyCodeButton client:load textToCopy={signature} />
</div>
</CodeContainer>
))
}
}
Loading