feat: add copy markdowm/text button for docs pages by solarhell · Pull Request #1521 · cloudwego/cloudwego.github.io

solarhell · 2026-03-11T08:14:51Z

Summary

Add a "复制全文 / Copy Full Text" split button with dropdown on docs pages
Supports copying page content as Markdown (with title and source URL) or plain text
Fully internationalized (Chinese and English) via i18n

Changes

New: layouts/partials/copy-to-llm.html — button component template
New: assets/js/copy-to-llm.js — copy logic (Clipboard API + fallback)
New: assets/scss/_copy-to-llm.scss — button and dropdown styles
Modified: layouts/_default/content.html — include the button partial
Modified: layouts/partials/scripts.html — add JS to bundle
Modified: assets/scss/main.scss — import new SCSS
Modified: i18n/zh.toml / i18n/en.toml — add translation keys

Test plan

Verify button renders correctly on docs pages (zh and en)
Click "复制全文" copies Markdown content to clipboard
Dropdown "复制 Markdown" and "复制文本" work correctly
Success feedback "✓ 已复制" / "✓ Copied" shows and resets after 2s
Button does not appear on non-docs pages (home, blog, etc.)

Add a split button with dropdown to copy page content as Markdown or plain text, useful for pasting into LLMs. Supports i18n (zh/en).

netlify · 2026-03-11T08:14:57Z

✅ Deploy Preview for cloudwego ready!

Name	Link
🔨 Latest commit	`5de2093`
🔍 Latest deploy log	https://app.netlify.com/projects/cloudwego/deploys/69b3c61ed6c0110008e3c011
😎 Deploy Preview	https://deploy-preview-1521--cloudwego.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

CLAassistant · 2026-03-11T08:15:02Z

All committers have signed the CLA.

- Replace rendered mermaid SVGs with [diagram] placeholder - Replace images with [image: alt] or remove if no alt text - Prevents gibberish SVG text nodes from polluting plain text output

The copy-to-llm partial was only included in _default/content.html, but most docs pages use layouts/docs/list.html, so the button never rendered.

Hugo's jsonify double-encodes .RawContent, causing JSON.parse to return a string instead of an object. Fix by placing markdown in a separate text/plain script tag and reading it directly from the DOM.

Replace the JSON script tag with data-* attributes on the container element, eliminating JSON parse/stringify overhead entirely.

Show a toast above the button with format-specific message (e.g. "已复制 Markdown 格式") and swap the copy icon to a checkmark, similar to volcengine docs.

solarhell · 2026-03-12T02:42:12Z

Copy Button Preview Screenshots

Chinese (zh) - Toast: "已复制 Markdown 格式"

English (en) - Toast: "Copied as Markdown"

This reverts commit 5e6350d.

GuangmingLuo · 2026-03-12T06:01:12Z

什么场景下需要复制全文？

solarhell · 2026-03-12T06:02:30Z

什么场景下需要复制全文？

不方便 web-fetch 的情况，手动复制了粘贴过去给 LLM（ClaudeCode、Codex）。

GuangmingLuo · 2026-03-12T07:11:28Z

把这个仓库或者eino目录喂给 LLM 不是更直接吗？@solarhell

solarhell · 2026-03-12T08:54:06Z

把这个仓库或者eino目录喂给 LLM 不是更直接吗？@solarhell

直接喂仓库/目录确实是一种方式，但有几个场景下「复制全文」按钮更实用：

针对性强：很多时候只需要某一篇文档的内容（比如某个 API 的用法），喂整个仓库信息量太大，反而影响 LLM 回答质量
格式更好：网站渲染后的文档是最终形态，仓库里的 markdown 源文件可能有 Hugo shortcode、frontmatter 等非内容信息，复制出来需要二次处理
门槛更低：不是所有用户都熟悉 git clone，在浏览文档时一键复制是最自然的操作路径
不局限于 Eino：这个按钮对所有文档页面生效，用户在查阅任何项目文档时都可以用

其他一些文档站（如火山引擎

）也有类似的 copy 功能，算是比较常见的 DX 改进。

GuangmingLuo · 2026-03-12T11:03:03Z

table, "", // 拷贝出来 md 格式一堆乱码

rogerogers · 2026-03-13T02:34:59Z

button 和 dropdown 参考下 bootstrap 本身的写法，https://getbootstrap.com/docs/4.0/components/dropdowns/

solarhell · 2026-03-13T03:54:11Z

关于 HTML table 复制为 Markdown 的分析

@GuangmingLuo 感谢反馈！我统计了一下 content/ 目录下所有 md 文件的情况：

总览

指标	数据
总 md 文件数	963
纯净 markdown（直接复制无问题）	795 (82.6%)
含 HTML 标签的文件	168 (17.4%)
含 HTML `<table>` 的文件	71 (7.4%)

各项目分布

项目	文件数	含 HTML	含 table	评价
Kitex	275	7 (2.5%)	0	✅ 非常干净
Hertz	198	11 (5.6%)	0	✅ 非常干净
Netpoll	10	0 (0%)	0	✅ 完美
Volo	60	6 (10%)	0	✅ 基本干净
Blog/News 等	240	48 (20%)	1	⚠️ 主要是 `<a>` 作者链接
EINO	176	96 (54.5%)	70	❌ 问题集中区

结论

82.6% 的页面直接复制 .RawContent 就很干净，LLM 可直接使用
HTML table 问题几乎全部集中在 EINO 文档（70/71 个含 table 的文件来自 EINO），因为 EINO 的 md 源文件里 table 是用 HTML <table> 写的，不是 markdown pipe table
其他 HTML 标签（<a>、<img> 等）LLM 基本都能理解，影响不大

方案讨论

针对 EINO 的 table 问题，有两个方向：

加一个轻量 JS 转换：在复制时把 <table> 转为 markdown pipe table（~25 行 JS），不引入外部依赖
不做转换：HTML table 对 LLM 来说也不算完全不可读，只是不够优雅

大家觉得有必要加这个转换吗？还是说可以接受 HTML table 原样复制？

- Replace custom dropdown with Bootstrap btn-group + dropdown-toggle-split - Remove manual open/close JS logic, leverage Bootstrap's built-in dropdown - Simplify SCSS from ~120 lines to ~30 lines by reusing Bootstrap styles

solarhell · 2026-03-13T03:57:56Z

@rogerogers 感谢建议！已重构为 Bootstrap 4 的 split button dropdown 写法（commit 1168316）：

外层改用 btn-group + btn btn-sm btn-outline-secondary
下拉箭头用 dropdown-toggle dropdown-toggle-split + data-toggle="dropdown"
菜单用 dropdown-menu dropdown-menu-right + dropdown-item
删除了自定义的 open/close JS 逻辑，完全由 Bootstrap 处理
SCSS 从 ~120 行精简到 ~30 行

screenshots/en-copy-toast.png

rogerogers · 2026-03-13T07:06:21Z

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand execCommand 看着已经完全弃用了，感觉没必要作为 fallback

Use navigator.clipboard.writeText directly as execCommand is fully deprecated. Removes the fallback textarea + execCommand approach.

solarhell · 2026-03-13T08:09:03Z

@rogerogers 已移除 execCommand fallback，现在直接使用 navigator.clipboard.writeText（commit 5de2093）。

rogerogers · 2026-03-13T14:53:11Z

assets/js/copy-to-llm.js

+      }
+    });
+
+    return clone.textContent.replace(/\n{3,}/g, '\n\n').trim();


Suggested change

return clone.textContent.replace(/\n{3,}/g, '\n\n').trim();

return clone.textContent.replace(/(\s*\n){3,}/g, '\n\n').trim();

好点。比如 section类型的页面，复制会有有大量空格

rogerogers · 2026-03-13T14:54:23Z

layouts/partials/copy-to-llm.html

+</div>
+
+{{/* Embed raw markdown for copy-as-markdown */}}
+<script id="copy-fulltext-markdown" type="text/plain">{{ .RawContent }}</script>


Suggested change

<script id="copy-fulltext-markdown" type="text/plain">{{ .RawContent }}</script>

<script id="copy-fulltext-markdown" type="text/plain">{{ .RawContent | safeHTML }}</script>

safeHTML 会好点，有标签的页面复制出来会有很多符号

feat: add copy fulltext button for docs pages

f403c1f

Add a split button with dropdown to copy page content as Markdown or plain text, useful for pasting into LLMs. Supports i18n (zh/en).

solarhell requested review from a team as code owners March 11, 2026 08:14

solarhell added 6 commits March 11, 2026 16:20

fix: handle mermaid SVGs and images in plain text copy

b4b56ac

- Replace rendered mermaid SVGs with [diagram] placeholder - Replace images with [image: alt] or remove if no alt text - Prevents gibberish SVG text nodes from polluting plain text output

fix: add copy fulltext button to docs list template

c09dfc2

The copy-to-llm partial was only included in _default/content.html, but most docs pages use layouts/docs/list.html, so the button never rendered.

fix: resolve double JSON encoding of RawContent for markdown copy

78b35ac

Hugo's jsonify double-encodes .RawContent, causing JSON.parse to return a string instead of an object. Fix by placing markdown in a separate text/plain script tag and reading it directly from the DOM.

refactor: use data attributes instead of JSON for copy button metadata

0e4b64d

Replace the JSON script tag with data-* attributes on the container element, eliminating JSON parse/stringify overhead entirely.

feat: add toast notification and checkmark icon on copy success

1e20168

Show a toast above the button with format-specific message (e.g. "已复制 Markdown 格式") and swap the copy icon to a checkmark, similar to volcengine docs.

docs: add copy button preview screenshots

b8ac7c0

solarhell added 2 commits March 12, 2026 10:42

chore: remove temporary screenshot files

5e6350d

Revert "chore: remove temporary screenshot files"

eea61ed

This reverts commit 5e6350d.

solarhell changed the title ~~feat: add copy fulltext button for docs pages~~ feat: add copy markdowm/text button for docs pages Mar 12, 2026

GuangmingLuo reviewed Mar 13, 2026

View reviewed changes

screenshots/en-copy-toast.png Outdated Show resolved Hide resolved

chore: remove screenshots directory

1a333bc

refactor: remove deprecated execCommand fallback for clipboard copy

5de2093

Use navigator.clipboard.writeText directly as execCommand is fully deprecated. Removes the fallback textarea + execCommand approach.

rogerogers reviewed Mar 13, 2026

View reviewed changes

	return clone.textContent.replace(/\n{3,}/g, '\n\n').trim();
	return clone.textContent.replace(/(\s*\n){3,}/g, '\n\n').trim();

	<script id="copy-fulltext-markdown" type="text/plain">{{ .RawContent }}</script>
	<script id="copy-fulltext-markdown" type="text/plain">{{ .RawContent \| safeHTML }}</script>

Conversation

solarhell commented Mar 11, 2026

Summary

Changes

Test plan

Uh oh!

netlify bot commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for cloudwego ready!

Uh oh!

CLAassistant commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

solarhell commented Mar 12, 2026

Copy Button Preview Screenshots

Chinese (zh) - Toast: "已复制 Markdown 格式"

English (en) - Toast: "Copied as Markdown"

Uh oh!

GuangmingLuo commented Mar 12, 2026

Uh oh!

solarhell commented Mar 12, 2026

Uh oh!

GuangmingLuo commented Mar 12, 2026

Uh oh!

solarhell commented Mar 12, 2026

Uh oh!

GuangmingLuo commented Mar 12, 2026

Uh oh!

rogerogers commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

solarhell commented Mar 13, 2026

关于 HTML table 复制为 Markdown 的分析

总览

各项目分布

结论

方案讨论

Uh oh!

solarhell commented Mar 13, 2026

Uh oh!

Uh oh!

rogerogers commented Mar 13, 2026

Uh oh!

solarhell commented Mar 13, 2026

Uh oh!

rogerogers Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

rogerogers Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

netlify bot commented Mar 11, 2026 •

edited

Loading

CLAassistant commented Mar 11, 2026 •

edited

Loading

rogerogers commented Mar 13, 2026 •

edited

Loading