Skip to content

[Portal] Feature: Add Copy Page button to documentation pages #8421

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Portal] Feature: Add Copy Page button to documentation pages #8421

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
10 changes: 7 additions & 3 deletions apps/portal/src/components/Layouts/DocLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
type SidebarLink,
} from "../others/Sidebar";
import { TableOfContentsSideBar } from "../others/TableOfContents";
import { CopyPageButton } from "../others/CopyPageButton";

export type SideBar = {
name: string;
Expand Down Expand Up @@ -58,9 +59,12 @@ export function DocLayout(props: DocLayoutProps) {
data-noindex={props.noIndex}
>
<div className="grow xl:mt-6">
<h5 className="mb-2 text-sm text-muted-foreground">
{props.sideBar.name}
</h5>
<div className="flex items-center justify-between mb-2">
<h5 className="text-sm text-muted-foreground">
{props.sideBar.name}
</h5>
<CopyPageButton />
</div>
{props.children}
</div>
<div className="mt-16 xl:mt-20">
Expand Down
53 changes: 53 additions & 0 deletions apps/portal/src/components/others/CopyPageButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
"use client";

import { CheckIcon, CopyIcon } from "lucide-react";
import { useState } from "react";
import { Button } from "../ui/button";

export function CopyPageButton() {
const [copied, setCopied] = useState(false);

const handleCopy = async () => {
try {
// Get the main content element
const mainElement = document.querySelector("main");
if (!mainElement) {
return;
}
Comment on lines +13 to +16
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Minor: Provide user feedback when main element is not found.

If the main element is not found, the function returns silently. Users won't know why the copy operation didn't work, which creates a poor user experience.

Consider showing a toast notification or brief error state:

     const mainElement = document.querySelector("main");
     if (!mainElement) {
+      console.error("Main content element not found");
+      // Consider showing user feedback here (e.g., toast notification)
       return;
     }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const mainElement = document.querySelector("main");
if (!mainElement) {
return;
}
const mainElement = document.querySelector("main");
if (!mainElement) {
console.error("Main content element not found");
// Consider showing user feedback here (e.g., toast notification)
return;
}
🤖 Prompt for AI Agents 
In apps/portal/src/components/others/CopyPageButton.tsx around lines 13 to 16,
the code silently returns when document.querySelector("main") is null; update
this to notify the user before returning — call the application's
toast/notification utility (or fallback to alert if no toast exists) with a
brief message like "Unable to copy: page content not found", then return; keep
the early exit behavior but ensure the UI feedback is shown and accessible (use
aria-live or the app's toast API) so users know why the copy failed.


// Get text content, preserving some structure
const textContent = mainElement.innerText || mainElement.textContent || "";

await navigator.clipboard.writeText(textContent);
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Major: Check clipboard API availability before using.

The navigator.clipboard API may not be available in non-HTTPS contexts or older browsers. This could cause runtime errors when users click the button.

Apply this diff to add a feature check:

+    // Check if clipboard API is available
+    if (!navigator.clipboard) {
+      console.error("Clipboard API not available");
+      return;
+    }
+
     await navigator.clipboard.writeText(textContent);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
await navigator.clipboard.writeText(textContent);
// Check if clipboard API is available
if (!navigator.clipboard) {
console.error("Clipboard API not available");
return;
}
await navigator.clipboard.writeText(textContent);
🤖 Prompt for AI Agents 
In apps/portal/src/components/others/CopyPageButton.tsx around line 21, the code
calls navigator.clipboard.writeText(textContent) without checking for clipboard
API availability which can throw in non-HTTPS or older browsers; update the
handler to first check if navigator.clipboard and navigator.clipboard.writeText
exist and only call it when available, otherwise fall back to a safe alternative
(e.g., create a temporary textarea, select its content and use
document.execCommand('copy'), or gracefully notify the user that copy is not
supported). Ensure the function handles and logs promise rejections from
writeText and cleans up any temporary DOM elements used by the fallback.

setCopied(true);

// Reset after 2 seconds
setTimeout(() => {
setCopied(false);
}, 2000);
} catch (error) {
console.error("Failed to copy page content:", error);
}
};
Comment on lines +10 to +31
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: Clean up setTimeout to prevent memory leaks.

The setTimeout on lines 25-27 is not cleaned up if the component unmounts before the 2-second delay completes. This will cause React warnings about state updates on unmounted components and potential memory leaks.

Apply this diff to fix the cleanup issue:

 export function CopyPageButton() {
   const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout>();

   const handleCopy = async () => {
     try {
+      // Clear any existing timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
       // Get the main content element
       const mainElement = document.querySelector("main");
       if (!mainElement) {
         return;
       }

       // Get text content, preserving some structure
       const textContent = mainElement.innerText || mainElement.textContent || "";

       await navigator.clipboard.writeText(textContent);
       setCopied(true);

       // Reset after 2 seconds
-      setTimeout(() => {
+      timeoutRef.current = setTimeout(() => {
         setCopied(false);
       }, 2000);
     } catch (error) {
       console.error("Failed to copy page content:", error);
     }
   };

+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);

Don't forget to import useRef and useEffect:

-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In apps/portal/src/components/others/CopyPageButton.tsx around lines 10 to 31,
the setTimeout used to reset copied state isn't cleared on unmount which can
trigger React warnings and memory leaks; fix by creating a ref (timerRef) to
hold the timeout id, assign the id when calling setTimeout, clear any existing
timeout before setting a new one, and add a useEffect cleanup that calls
clearTimeout(timerRef.current) on unmount; also add imports for useRef and
useEffect at the top of the file.


return (
<Button
variant="outline"
size="sm"
onClick={handleCopy}
className="gap-2"
>
{copied ? (
<>
<CheckIcon className="size-4" />
Copied!
</>
) : (
<>
<CopyIcon className="size-4" />
Copy Page
</>
)}
</Button>
);
}
Loading