Monorepo for Tangled tangled.org

[feature] - Add copy-to-clipboard button for markdown code blocks #1114

Summary#

  • Injects a copy button into .prose pre.chroma code blocks via client-side DOM injection in base.html
  • Scoped to .prose so blob view source code (which has its own UX) is unaffected
  • Handles HTMX-swapped content (dynamic comment loading) via htmx:afterSettle listener

Test plan#

  • go test ./appview/pages/markup/... passes (no regressions)
  • Verify button appears on hover over code blocks in rendered markdown
  • Verify clicking copies code and shows check icon briefly
  • Verify dark mode styling
  • Verify blob view code blocks do NOT get copy buttons
Labels

None yet.

assignee

None yet.

Participants 3
AT URI
at://did:plc:c7frv4rcitff3p2nh7of5bcv/sh.tangled.repo.pull/3mgbmydvrsw22
+9 -9
Interdiff #2 โ†’ #3
appview/pages/markup/extension/codecopy.go

This file has not been changed.

+4 -3
appview/pages/markup/markdown.go
··· 53 53 Files fs.FS 54 54 } 55 55 56 - func NewMarkdown(hostname string, files fs.FS) goldmark.Markdown { 56 + func NewMarkdown(hostname string) goldmark.Markdown { 57 57 md := goldmark.New( 58 58 goldmark.WithExtensions( 59 59 extension.GFM, ··· 74 74 callout.CalloutExtention, 75 75 textension.AtExt, 76 76 textension.NewTangledLinkExt(hostname), 77 - textension.NewCodeCopyExt(files), 78 77 emoji.Emoji, 79 78 ), 80 79 goldmark.WithParserOptions( ··· 86 85 } 87 86 88 87 func (rctx *RenderContext) RenderMarkdown(source string) string { 89 - return rctx.RenderMarkdownWith(source, NewMarkdown(rctx.Hostname, rctx.Files)) 88 + md := NewMarkdown(rctx.Hostname) 89 + textension.NewCodeCopyExt(rctx.Files).Extend(md) 90 + return rctx.RenderMarkdownWith(source, md) 90 91 } 91 92 92 93 func (rctx *RenderContext) RenderMarkdownWith(source string, md goldmark.Markdown) string {
+3 -3
appview/pages/markup/markdown_test.go
··· 33 33 34 34 for _, tt := range tests { 35 35 t.Run(tt.name, func(t *testing.T) { 36 + md := NewMarkdown("tangled.org") 36 - md := NewMarkdown("tangled.org", nil) 37 37 38 38 var buf bytes.Buffer 39 39 if err := md.Convert([]byte(tt.markdown), &buf); err != nil { ··· 96 96 97 97 for _, tt := range tests { 98 98 t.Run(tt.name, func(t *testing.T) { 99 + md := NewMarkdown("tangled.org") 99 - md := NewMarkdown("tangled.org", nil) 100 100 101 101 var buf bytes.Buffer 102 102 if err := md.Convert([]byte(tt.markdown), &buf); err != nil { ··· 151 151 152 152 for _, tt := range tests { 153 153 t.Run(tt.name, func(t *testing.T) { 154 + md := NewMarkdown("tangled.org") 154 - md := NewMarkdown("tangled.org", nil) 155 155 156 156 var buf bytes.Buffer 157 157 if err := md.Convert([]byte(tt.markdown), &buf); err != nil {
+1 -1
appview/pages/markup/reference_link.go
··· 22 22 var ( 23 23 refLinkSet = make(map[models.ReferenceLink]struct{}) 24 24 mentionsSet = make(map[string]struct{}) 25 + md = NewMarkdown(host) 25 - md = NewMarkdown(host, nil) 26 26 sourceBytes = []byte(source) 27 27 root = md.Parser().Parse(text.NewReader(sourceBytes)) 28 28 )
appview/pages/markup/sanitizer.go

This file has not been changed.

appview/pages/templates/layouts/base.html

This file has not been changed.

-1
input.css
··· 1044 1044 .chroma .gl { 1045 1045 text-decoration: underline; 1046 1046 } 1047 - 1048 1047 } 1049 1048 1050 1049 actor-typeahead {

History

6 rounds 6 comments
sign up or login to add to the discussion
1 commit
expand
appview/pages: add copy-to-clipboard button for markdown code blocks
no conflicts, ready to merge
expand 0 comments
1 commit
expand
appview/pages: add copy-to-clipboard button for markdown code blocks
expand 3 comments

works brilliantly! one nit: the copy button seems to add an extra newline for each line on my browser. do you notice the same behavior on your end?

will do a more thorough code review shortly!

I still need to look into this!! I asked Claude in the meantime, and it thinks you're right - there's an unnecessary carriage return

1 commit
expand
appview/pages: add copy-to-clipboard button for markdown code blocks
expand 0 comments
1 commit
expand
appview/pages: add copy-to-clipboard button for markdown code blocks
expand 0 comments
1 commit
expand
appview/pages: add copy-to-clipboard button for markdown code blocks
expand 3 comments

Thank you for the contribution! Few feedbacks:

  • here we can use icon template like others.
  • can we use tailwindcss for styling? using @applysyntax in css file.

i would prefer if we added this button using a goldmark extension instead of a clientside script!

Thank you for the feedback! I've updating the diff to use goldmark and apply tailwind classes.

1 commit
expand
appview/pages: add copy-to-clipboard button for markdown code blocks
expand 0 comments