From 3eb3c691d0167c804456cc1328aca3acbbf3f5a7 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 24 Jan 2026 10:25:52 +0000 Subject: [PATCH 1/5] Initial plan From d1f5d5fd9a892371065e6bab67065811f89641f5 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 24 Jan 2026 10:32:37 +0000 Subject: [PATCH 2/5] Verify code copy functionality is already implemented Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com> --- apps/docs/package-lock.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/package-lock.json b/apps/docs/package-lock.json index c906aec25..5c160882c 100644 --- a/apps/docs/package-lock.json +++ b/apps/docs/package-lock.json @@ -1,12 +1,12 @@ { "name": "@objectstack/docs", - "version": "0.1.0", + "version": "0.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@objectstack/docs", - "version": "0.1.0", + "version": "0.1.1", "dependencies": { "class-variance-authority": "^0.7.1", "client-only": "^0.0.1", From 937bb42e3a8f0484a7ca50c7441695bbb9f7005b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 24 Jan 2026 10:33:17 +0000 Subject: [PATCH 3/5] Add comprehensive documentation for code copy feature Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com> --- COPY_CODE_FEATURE.md | 122 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 COPY_CODE_FEATURE.md diff --git a/COPY_CODE_FEATURE.md b/COPY_CODE_FEATURE.md new file mode 100644 index 000000000..9de2a962f --- /dev/null +++ b/COPY_CODE_FEATURE.md @@ -0,0 +1,122 @@ +# Code Copy Functionality - Implementation Report + +## Issue +**Title:** 文档查看页应支持复制码当markdown +**Translation:** Documentation viewing page should support copying code as markdown + +## Findings + +### ✅ Feature Already Implemented + +The requested functionality is **already fully implemented** in the ObjectStack documentation site. The code copy feature is provided by the Fumadocs UI framework that is already integrated into the project. + +## Technical Implementation + +### Framework +- **Fumadocs UI:** v16.4.7 +- **Fumadocs Core:** v16.4.7 +- **Fumadocs MDX:** v14.2.5 + +### How It Works + +1. **MDX Components Configuration** (`apps/docs/app/[lang]/docs/[[...slug]]/page.tsx`) + ```typescript + import defaultMdxComponents from 'fumadocs-ui/mdx'; + + const components = { + ...defaultMdxComponents, + Step, + Steps, + File, + Folder, + Files, + FileTree: Files, + }; + ``` + +2. **Default Behavior** + - The `defaultMdxComponents` includes a `pre` component that wraps code blocks + - This component automatically adds a copy button to all code blocks + - The `allowCopy` prop defaults to `true` + +3. **CodeBlock Component Features** (from `fumadocs-ui/dist/components/codeblock.d.ts`) + ```typescript + interface CodeBlockProps extends ComponentProps<'figure'> { + /** + * Allow to copy code with copy button + * + * @defaultValue true + */ + allowCopy?: boolean; + // ... other props + } + ``` + +## User Experience + +### Visual Feedback +1. **Default State:** Shows "Copy Text" button with icon +2. **After Click:** Changes to "Copied Text" with checkmark icon +3. **Accessibility:** Button is keyboard accessible and screen reader friendly + +### Supported Code Blocks +- ✅ Bash/Shell commands +- ✅ TypeScript/JavaScript +- ✅ JSON/YAML +- ✅ All other languages supported by Shiki (the syntax highlighter) + +## Testing Results + +### Pages Tested +- `/en/docs/references/client-sdk` - ✅ Working +- All code blocks across documentation - ✅ Working + +### Test Scenarios +1. **Click copy button** - ✅ Copies code to clipboard +2. **Visual feedback** - ✅ Button changes to "Copied Text" +3. **Multiple code blocks** - ✅ Each block has independent copy button + +## Screenshots + +### Before Copy +![Code block with copy button](https://github.com/user-attachments/assets/3e6e1e7f-729d-41d3-84bf-3065aee66a0c) + +The copy button is visible in the top-right corner of each code block. + +### After Copy +![Code copied confirmation](https://github.com/user-attachments/assets/133a61cb-1dc6-4f5a-8793-e2787d47ce5d) + +The button changes to show "Copied" confirmation. + +## Configuration Files + +### No Changes Required +The feature works out-of-the-box with the current configuration: + +- `apps/docs/source.config.ts` - Standard MDX configuration +- `apps/docs/next.config.mjs` - Standard Next.js with Fumadocs MDX plugin +- `apps/docs/app/[lang]/docs/[[...slug]]/page.tsx` - Uses `defaultMdxComponents` + +## Conclusion + +**Status:** ✅ COMPLETE - No action required + +The documentation viewing page already fully supports copying code blocks. The feature is: +- Enabled by default +- Working across all documentation pages +- Providing good user experience with visual feedback +- Maintained by the Fumadocs UI framework + +## Recommendations + +1. **No code changes needed** - The feature is already implemented and working +2. **Keep Fumadocs updated** - Continue using the latest stable versions +3. **Consider customization** (optional) - If specific behavior is needed: + - Custom icon + - Custom copy button text + - Disable for specific code blocks + +## References + +- [Fumadocs Documentation](https://fumadocs.vercel.app/) +- [Fumadocs Code Block Component](https://fumadocs.vercel.app/docs/ui/mdx/codeblock) From bf5943d7337ae77248859d762849ca7156844ade Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 24 Jan 2026 11:27:11 +0000 Subject: [PATCH 4/5] Add copy page as markdown feature Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com> --- .../docs/app/[lang]/docs/[[...slug]]/page.tsx | 45 ++++++++++++++++--- apps/docs/components/copy-page-markdown.tsx | 42 +++++++++++++++++ content/docs/copy-test.mdx | 28 ++++++++++++ 3 files changed, 109 insertions(+), 6 deletions(-) create mode 100644 apps/docs/components/copy-page-markdown.tsx create mode 100644 content/docs/copy-test.mdx diff --git a/apps/docs/app/[lang]/docs/[[...slug]]/page.tsx b/apps/docs/app/[lang]/docs/[[...slug]]/page.tsx index e68476651..67f504f14 100644 --- a/apps/docs/app/[lang]/docs/[[...slug]]/page.tsx +++ b/apps/docs/app/[lang]/docs/[[...slug]]/page.tsx @@ -5,6 +5,9 @@ import { notFound } from 'next/navigation'; import defaultMdxComponents from 'fumadocs-ui/mdx'; import { Step, Steps } from 'fumadocs-ui/components/steps'; import { File, Folder, Files } from 'fumadocs-ui/components/files'; +import { CopyPageMarkdown } from '@/components/copy-page-markdown'; +import fs from 'fs'; +import path from 'path'; const components = { ...defaultMdxComponents, @@ -26,15 +29,45 @@ export default async function Page(props: { const data = page.data as any; const Content = data.body; + // Read the raw MDX content + let rawMarkdown = ''; + try { + const slugPath = params.slug?.join('/') || 'index'; + const possiblePaths = [ + path.join(process.cwd(), '../../content/docs', `${slugPath}.mdx`), + path.join(process.cwd(), '../../content/docs', `${slugPath}.${params.lang}.mdx`), + path.join(process.cwd(), '../../content/docs', slugPath, 'index.mdx'), + path.join(process.cwd(), '../../content/docs', slugPath, `index.${params.lang}.mdx`), + ]; + + for (const filePath of possiblePaths) { + if (fs.existsSync(filePath)) { + rawMarkdown = fs.readFileSync(filePath, 'utf-8'); + break; + } + } + } catch (error) { + console.error('Failed to read raw markdown:', error); + } + return ( -

{page.data.title}

- {page.data.description && ( -

- {page.data.description} -

- )} +
+
+

{page.data.title}

+ {page.data.description && ( +

+ {page.data.description} +

+ )} +
+ {rawMarkdown && ( +
+ +
+ )} +
diff --git a/apps/docs/components/copy-page-markdown.tsx b/apps/docs/components/copy-page-markdown.tsx new file mode 100644 index 000000000..c2c9a0122 --- /dev/null +++ b/apps/docs/components/copy-page-markdown.tsx @@ -0,0 +1,42 @@ +'use client'; + +import { useState } from 'react'; +import { Copy, Check } from 'lucide-react'; + +interface CopyPageMarkdownProps { + content: string; +} + +export function CopyPageMarkdown({ content }: CopyPageMarkdownProps) { + const [copied, setCopied] = useState(false); + + const copyToClipboard = async () => { + try { + await navigator.clipboard.writeText(content); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + } catch (error) { + console.error('Failed to copy:', error); + } + }; + + return ( + + ); +} diff --git a/content/docs/copy-test.mdx b/content/docs/copy-test.mdx new file mode 100644 index 000000000..72487188d --- /dev/null +++ b/content/docs/copy-test.mdx @@ -0,0 +1,28 @@ +--- +title: Copy Feature Test +description: Testing the copy page as markdown feature +--- + +## Introduction + +This is a test page for the copy functionality. + +## Example Code + +```typescript +const hello = 'world'; +console.log(hello); +``` + +## List Example + +- Item 1 +- Item 2 +- Item 3 + +## Table Example + +| Column 1 | Column 2 | +| --- | --- | +| Data 1 | Data 2 | +| Data 3 | Data 4 | From cebc20b429869c291b64e4f7d3bf7c476d9ac80b Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 24 Jan 2026 11:27:19 +0000 Subject: [PATCH 5/5] Remove test file Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com> --- content/docs/copy-test.mdx | 28 ---------------------------- 1 file changed, 28 deletions(-) delete mode 100644 content/docs/copy-test.mdx diff --git a/content/docs/copy-test.mdx b/content/docs/copy-test.mdx deleted file mode 100644 index 72487188d..000000000 --- a/content/docs/copy-test.mdx +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Copy Feature Test -description: Testing the copy page as markdown feature ---- - -## Introduction - -This is a test page for the copy functionality. - -## Example Code - -```typescript -const hello = 'world'; -console.log(hello); -``` - -## List Example - -- Item 1 -- Item 2 -- Item 3 - -## Table Example - -| Column 1 | Column 2 | -| --- | --- | -| Data 1 | Data 2 | -| Data 3 | Data 4 |