Skip to content

add docusaurus-plugin-copy-page-button#5085

Open
portdeveloper wants to merge 2 commits into
facebook:mainfrom
portdeveloper:add-copy-page-button
Open

add docusaurus-plugin-copy-page-button#5085
portdeveloper wants to merge 2 commits into
facebook:mainfrom
portdeveloper:add-copy-page-button

Conversation

@portdeveloper
Copy link
Copy Markdown

adds docusaurus-plugin-copy-page-button to dependencies + plugins array

since the rn docs site is basically the canonical docusaurus showcase, figured this might be worth dogfooding — it puts a "Copy page" button in the sidebar that exports the current page as clean markdown, plus one-click "Open in Claude / ChatGPT / Gemini" actions that prefill the markdown.

typical rn scenario this helps with: someone's on a specific component or API ref page and wants to drop it into an LLM to ask "how do I use this with [X library]" — instead of selecting around the page chrome or digging into the repo for the right .md file.

auto-injects into the TOC sidebar, theme-aware, no extra config.

shipping on Ethereum execution-apis, Sui, Walrus, Seal, SuiNS, Monad, Flare, Kaia, Nillion, Chronicle, Cardano and Arbitrum docs. listed in the Docusaurus community plugins page.

repo: https://github.com/portdeveloper/docusaurus-plugin-copy-page-button
npm: https://www.npmjs.com/package/docusaurus-plugin-copy-page-button (~10k installs/month)
demo: https://portdeveloper.github.io/copy-page-button-showcase/

happy to revert if it's not a fit

@vercel
Copy link
Copy Markdown

vercel Bot commented May 16, 2026

@portdeveloper is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.

@meta-cla meta-cla Bot added the CLA Signed label May 16, 2026
@netlify
Copy link
Copy Markdown

netlify Bot commented May 16, 2026

Deploy Preview for react-native ready!

Name Link
🔨 Latest commit 7b5dfd1
🔍 Latest deploy log https://app.netlify.com/projects/react-native/deploys/6a08813314f1fa00098e15f4
😎 Deploy Preview https://deploy-preview-5085--react-native.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@Simek
Copy link
Copy Markdown
Collaborator

Simek commented May 16, 2026

Hey @portdeveloper, thanks for working on this addition! 👍

Some feedback:

If required, feel free to swizzle some components.

portdeveloper added a commit to portdeveloper/docusaurus-plugin-copy-page-button that referenced this pull request May 16, 2026
- no-ToC fallback now inserts the button inline after the breadcrumbs
  (was: position: fixed in the top-right viewport corner)
- reserve min-height: 56px on the sidebar-mode container so the button
  slot is sized before React mounts (reduces layout shift on first paint)
- inherit --ifm-font-family-base on the button and dropdown items
  (was: browser default button font)
- replace the setTimeout polling loop with a MutationObserver on
  document.body that fires the moment the ToC or article mounts;
  periodic check kept as a safety net
includes fixes for @Simek's feedback (no-ToC fallback, layout shift, font, first-render race)
@portdeveloper
Copy link
Copy Markdown
Author

thanks for the detailed feedback @Simek — really useful. shipped 0.5.2 with fixes for all four:

  1. no-ToC pagesinjectToFallbackLocation used to drop the button as position: fixed in the top-right viewport corner, which was both ugly and brittle. now inserts inline after .theme-doc-breadcrumbs so pages like /docs/environment-setup and /docs/handling-text-input get the button at the top of the article column instead.

  2. layout shift — reserved min-height: 56px on the sidebar-mode container so the slot is sized before React mounts. only partial — for a fully shift-free first paint we'd need an SSR-rendered placeholder via a swizzled TOC component, which is a bigger change. happy to do that next pass if you want it.

  3. font — added font-family: var(--ifm-font-family-base, inherit) to the button and dropdown items. was inheriting browser default before.

  4. first-render race — replaced the chained setTimeout polling with a MutationObserver on document.body that fires the moment the TOC or article mounts. periodic check kept as a safety net for @docusaurus/faster hydration patterns.

just bumped the PR to ^0.5.2. the Netlify preview should pick it up on the rebuild — would appreciate another look when you have a sec to confirm the four issues are gone.

(also FYI the changelog entry credits your feedback by name + links back here — feel free to push back if you'd rather not be cited.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants