-
Notifications
You must be signed in to change notification settings - Fork 305
feat: add copy markdowm/text button for docs pages #1521
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.
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
solarhell
wants to merge
12
commits into
cloudwego:main
Choose a base branch
from
solarhell:feat/copy-fulltext-button
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+199
−1
Open
Changes from all commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
f403c1f
feat: add copy fulltext button for docs pages
solarhell b4b56ac
fix: handle mermaid SVGs and images in plain text copy
solarhell c09dfc2
fix: add copy fulltext button to docs list template
solarhell 78b35ac
fix: resolve double JSON encoding of RawContent for markdown copy
solarhell 0e4b64d
refactor: use data attributes instead of JSON for copy button metadata
solarhell 1e20168
feat: add toast notification and checkmark icon on copy success
solarhell b8ac7c0
docs: add copy button preview screenshots
solarhell 5e6350d
chore: remove temporary screenshot files
solarhell eea61ed
Revert "chore: remove temporary screenshot files"
solarhell 1168316
refactor: use Bootstrap 4 split button dropdown for copy button
solarhell 1a333bc
chore: remove screenshots directory
solarhell 5de2093
refactor: remove deprecated execCommand fallback for clipboard copy
solarhell File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| (function () { | ||
| 'use strict'; | ||
|
|
||
| var container = document.getElementById('copy-fulltext'); | ||
| if (!container) return; | ||
|
|
||
| var defaultBtn = document.getElementById('copy-fulltext-default'); | ||
| var options = container.querySelectorAll('.dropdown-item'); | ||
| var toast = document.getElementById('copy-fulltext-toast'); | ||
|
|
||
| // Default button copies markdown (most useful for LLM) | ||
| defaultBtn.addEventListener('click', function () { | ||
| copyContent('markdown'); | ||
| }); | ||
|
|
||
| options.forEach(function (opt) { | ||
| opt.addEventListener('click', function () { | ||
| copyContent(this.getAttribute('data-copy-type')); | ||
| }); | ||
| }); | ||
|
|
||
| function getSourceData() { | ||
| var mdEl = document.getElementById('copy-fulltext-markdown'); | ||
| return { | ||
| title: container.getAttribute('data-title') || '', | ||
| url: container.getAttribute('data-url') || '', | ||
| successMarkdown: container.getAttribute('data-success-markdown') || 'Copied as Markdown', | ||
| successText: container.getAttribute('data-success-text') || 'Copied as plain text', | ||
| markdown: mdEl ? mdEl.textContent : '' | ||
| }; | ||
| } | ||
|
|
||
| function getPlainText() { | ||
| var contentEl = document.querySelector('.td-content'); | ||
| if (!contentEl) return ''; | ||
| var clone = contentEl.cloneNode(true); | ||
|
|
||
| // Remove UI elements that shouldn't be copied | ||
| var removals = clone.querySelectorAll('.copy-fulltext, .td-page-meta, script, style, .feedback--container'); | ||
| removals.forEach(function (el) { el.remove(); }); | ||
|
|
||
| // Replace mermaid SVGs with placeholder (SVG textContent is gibberish) | ||
| clone.querySelectorAll('pre.mermaid, .mermaid').forEach(function (el) { | ||
| var placeholder = document.createElement('p'); | ||
| placeholder.textContent = '[diagram]'; | ||
| el.replaceWith(placeholder); | ||
| }); | ||
|
|
||
| // Replace images with their alt text | ||
| clone.querySelectorAll('img').forEach(function (img) { | ||
| var alt = img.getAttribute('alt'); | ||
| if (alt) { | ||
| var text = document.createElement('span'); | ||
| text.textContent = '[image: ' + alt + ']'; | ||
| img.replaceWith(text); | ||
| } else { | ||
| img.remove(); | ||
| } | ||
| }); | ||
|
|
||
| return clone.textContent.replace(/\n{3,}/g, '\n\n').trim(); | ||
| } | ||
|
|
||
| function copyContent(type) { | ||
| var data = getSourceData(); | ||
| var text = ''; | ||
| var actualType = type; | ||
|
|
||
| if (type === 'markdown' && data && data.markdown) { | ||
| text = '# ' + data.title + '\n\n' + data.markdown; | ||
| if (data.url) { | ||
| text += '\n\n---\nSource: ' + data.url; | ||
| } | ||
| } else { | ||
| actualType = 'text'; | ||
| text = getPlainText(); | ||
| } | ||
|
|
||
| copyToClipboard(text, data, actualType); | ||
| } | ||
|
|
||
| function copyToClipboard(text, data, type) { | ||
| navigator.clipboard.writeText(text).then(function () { | ||
| showFeedback(data, type); | ||
| }); | ||
| } | ||
|
|
||
| function showFeedback(data, type) { | ||
| // Swap icon to checkmark | ||
| var icon = defaultBtn.querySelector('i'); | ||
| icon.classList.replace('fa-copy', 'fa-check'); | ||
| defaultBtn.classList.add('copy-fulltext__btn--success'); | ||
|
|
||
| // Show toast | ||
| var toastText = type === 'markdown' ? data.successMarkdown : data.successText; | ||
| toast.textContent = '✅ ' + toastText; | ||
| toast.classList.add('copy-fulltext__toast--visible'); | ||
|
|
||
| setTimeout(function () { | ||
| icon.classList.replace('fa-check', 'fa-copy'); | ||
| defaultBtn.classList.remove('copy-fulltext__btn--success'); | ||
| toast.classList.remove('copy-fulltext__toast--visible'); | ||
| }, 2000); | ||
| } | ||
| })(); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| .copy-fulltext { | ||
| float: right; | ||
| margin-top: 0.25rem; | ||
|
|
||
| &__btn--success { | ||
| color: $success !important; | ||
| } | ||
|
|
||
| &__toast { | ||
| display: none; | ||
| position: absolute; | ||
| bottom: 100%; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| margin-bottom: 0.5rem; | ||
| padding: 0.5rem 0.75rem; | ||
| background: $white; | ||
| border: 1px solid $gray-300; | ||
| border-radius: $border-radius; | ||
| box-shadow: 0 4px 12px rgba($black, 0.1); | ||
| font-size: 0.875rem; | ||
| color: $gray-700; | ||
| white-space: nowrap; | ||
| z-index: 11; | ||
|
|
||
| &--visible { | ||
| display: block; | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,27 @@ | ||||||
| {{/* Copy full text button with split dropdown for markdown / plain text */}} | ||||||
| <div class="copy-fulltext btn-group" id="copy-fulltext" | ||||||
| data-title="{{ .Title }}" | ||||||
| data-url="{{ .Permalink }}" | ||||||
| data-success-markdown="{{ T "copy_success_markdown" }}" | ||||||
| data-success-text="{{ T "copy_success_text" }}"> | ||||||
| <button type="button" class="btn btn-sm btn-outline-secondary" id="copy-fulltext-default" title="{{ T "copy_full_text" }}"> | ||||||
| <i class="fa-regular fa-copy"></i> | ||||||
| <span>{{ T "copy_full_text" }}</span> | ||||||
| </button> | ||||||
| <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle dropdown-toggle-split" | ||||||
| data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> | ||||||
| <span class="sr-only">Toggle Dropdown</span> | ||||||
| </button> | ||||||
| <div class="dropdown-menu dropdown-menu-right"> | ||||||
| <button class="dropdown-item" data-copy-type="markdown"> | ||||||
| {{ T "copy_markdown" }} | ||||||
| </button> | ||||||
| <button class="dropdown-item" data-copy-type="text"> | ||||||
| {{ T "copy_plain_text" }} | ||||||
| </button> | ||||||
| </div> | ||||||
| <div class="copy-fulltext__toast" id="copy-fulltext-toast"></div> | ||||||
| </div> | ||||||
|
|
||||||
| {{/* Embed raw markdown for copy-as-markdown */}} | ||||||
| <script id="copy-fulltext-markdown" type="text/plain">{{ .RawContent }}</script> | ||||||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
safeHTML 会好点,有标签的页面复制出来会有很多符号 |
||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
好点。比如 section类型 的页面,复制会有有大量空格