Fix Copy Failed clipboard error in MarkdownButton (#445)

[ruchiralakshan123]

Purpose

Resolves #445

Goals

Resolve the "Copy failed!" clipboard write error when selecting the "Copy page as Markdown for LLMs" option.

Approach

The copy operation was failing on modern browsers because of the asynchronous network delay introduced by await fetch(markdownUrl). Browsers restrict clipboard writing unless it is done synchronously inside a user gesture context, which was being lost after the fetch resolved.

To fix this, we updated handleCopyPage in en/src/theme/DocBreadcrumbs/MarkdownButton.tsx to use the modern ClipboardItem API with a Promise. By passing the fetch promise directly to ClipboardItem, the browser preserves the user gesture context, allowing the copy operation to succeed. A fallback to writeText is kept for older browsers.

User stories

N/A

Release note

Fix "Copy failed!" error on copy page as Markdown action.

Documentation

N/A

Training

N/A

Certification

N/A

Marketing

N/A

Automation tests

• Unit tests
  N/A
• Integration tests
  N/A

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes
• Ran FindSecurityBugs plugin and verified report? N/A
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes

Samples

N/A

Related PRs

N/A

Migrations (if applicable)

N/A

Test environment

Verified locally in the development workspace.

Learning

N/A

Summary by CodeRabbit

• Bug Fixes
  • Improved copying page content in modern browsers by using the Clipboard API more efficiently.
  • Retained compatibility with older browsers through a fallback copy method.
  • Preserved copy confirmation and menu behavior after successful copying.

[coderabbitai]

Warning

Review limit reached

@ruchiralakshan123, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 46 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b47327ee-79db-40ba-bef2-a7b82cf3a259

📥 Commits

Reviewing files that changed from the base of the PR and between 31e7df6 and c518aa4.

📒 Files selected for processing (1)

• en/src/theme/DocBreadcrumbs/MarkdownButton.tsx

📝 Walkthrough

Walkthrough

The copy-page handler now uses deferred ClipboardItem clipboard writes when available and retains a fetch-then-writeText fallback for older browsers. Existing error handling and post-copy UI state updates remain unchanged.

Changes

Clipboard Markdown Copy

Layer / File(s)	Summary
Clipboard write path en/src/theme/DocBreadcrumbs/MarkdownButton.tsx	handleCopyPage conditionally uses ClipboardItem with a deferred Markdown fetch, while older browsers use navigator.clipboard.writeText after fetching the content. Existing copy-state updates remain in place.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: rosensilva, anupama-pathirage, kavinduzoysa, nipunaranasinghe

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main fix for the MarkdownButton clipboard error.
Description check	✅ Passed	The description follows the template well and covers purpose, goals, approach, release note, and required metadata.
Linked Issues check	✅ Passed	The change addresses issue #445 by fixing Markdown clipboard copying and preserving the fallback path.
Out of Scope Changes check	✅ Passed	The PR is limited to the clipboard fix in MarkdownButton and shows no unrelated changes.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@en/src/theme/DocBreadcrumbs/MarkdownButton.tsx`:
- Around line 29-49: Update the modern ClipboardItem branch in the copy handler
to catch failures from ClipboardItem construction or navigator.clipboard.write,
then fetch the markdown and retry via navigator.clipboard.writeText. Preserve
the existing direct writeText fallback for browsers without ClipboardItem
support and keep errors propagating only if the fallback also fails.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3526ba1c-8e9c-49fd-910b-74d5313584eb

📥 Commits

Reviewing files that changed from the base of the PR and between 7e6d503 and 31e7df6.

📒 Files selected for processing (1)

• en/src/theme/DocBreadcrumbs/MarkdownButton.tsx