+134

appview/pages/markup/extension/codecopy.go

··· 1 1 + package extension 2 2 + 3 3 + import ( 4 4 + "fmt" 5 5 + "io/fs" 6 6 + "path/filepath" 7 7 + "strings" 8 8 + 9 9 + "github.com/yuin/goldmark" 10 10 + "github.com/yuin/goldmark/ast" 11 11 + "github.com/yuin/goldmark/parser" 12 12 + "github.com/yuin/goldmark/renderer" 13 13 + "github.com/yuin/goldmark/text" 14 14 + "github.com/yuin/goldmark/util" 15 15 + ) 16 16 + 17 17 + // KindCodeCopyBlock is a NodeKind of the CodeCopyBlock node. 18 18 + var KindCodeCopyBlock = ast.NewNodeKind("CodeCopyBlock") 19 19 + 20 20 + // CodeCopyBlock wraps a FencedCodeBlock to add a copy-to-clipboard button. 21 21 + type CodeCopyBlock struct { 22 22 + ast.BaseBlock 23 23 + } 24 24 + 25 25 + var _ ast.Node = (*CodeCopyBlock)(nil) 26 26 + 27 27 + func (n *CodeCopyBlock) Kind() ast.NodeKind { 28 28 + return KindCodeCopyBlock 29 29 + } 30 30 + 31 31 + func (n *CodeCopyBlock) Dump(source []byte, level int) { 32 32 + ast.DumpHelper(n, source, level, nil, nil) 33 33 + } 34 34 + 35 35 + // codeCopyTransformer wraps FencedCodeBlock nodes in CodeCopyBlock nodes. 36 36 + type codeCopyTransformer struct{} 37 37 + 38 38 + func (t *codeCopyTransformer) Transform(node *ast.Document, reader text.Reader, pc parser.Context) { 39 39 + var fencedBlocks []*ast.FencedCodeBlock 40 40 + 41 41 + _ = ast.Walk(node, func(n ast.Node, entering bool) (ast.WalkStatus, error) { 42 42 + if !entering { 43 43 + return ast.WalkContinue, nil 44 44 + } 45 45 + if fcb, ok := n.(*ast.FencedCodeBlock); ok { 46 46 + lang := string(fcb.Language(reader.Source())) 47 47 + if lang != "mermaid" { 48 48 + fencedBlocks = append(fencedBlocks, fcb) 49 49 + } 50 50 + } 51 51 + return ast.WalkContinue, nil 52 52 + }) 53 53 + 54 54 + for _, fcb := range fencedBlocks { 55 55 + wrapper := &CodeCopyBlock{} 56 56 + parent := fcb.Parent() 57 57 + parent.ReplaceChild(parent, fcb, wrapper) 58 58 + wrapper.AppendChild(wrapper, fcb) 59 59 + } 60 60 + } 61 61 + 62 62 + // codeCopyRenderer renders the CodeCopyBlock wrapper with a copy button. 63 63 + type codeCopyRenderer struct { 64 64 + copyIconSVG string 65 65 + checkIconSVG string 66 66 + } 67 67 + 68 68 + func (r *codeCopyRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) { 69 69 + reg.Register(KindCodeCopyBlock, r.renderCodeCopyBlock) 70 70 + } 71 71 + 72 72 + func (r *codeCopyRenderer) renderCodeCopyBlock(w util.BufWriter, source []byte, node ast.Node, entering bool) (ast.WalkStatus, error) { 73 73 + if entering { 74 74 + _, _ = w.WriteString(`<div class="code-copy-wrapper">`) 75 75 + } else { 76 76 + _, _ = w.WriteString(fmt.Sprintf( 77 77 + `<button class="code-copy-btn" type="button" aria-label="Copy code to clipboard">`+ 78 78 + `<span class="copy-icon">%s</span>`+ 79 79 + `<span class="check-icon">%s</span>`+ 80 80 + `</button></div>`, 81 81 + r.copyIconSVG, r.checkIconSVG, 82 82 + )) 83 83 + } 84 84 + return ast.WalkContinue, nil 85 85 + } 86 86 + 87 87 + // CodeCopyExt is a goldmark extension that adds copy-to-clipboard buttons to fenced code blocks. 88 88 + type CodeCopyExt struct { 89 89 + files fs.FS 90 90 + } 91 91 + 92 92 + func NewCodeCopyExt(files fs.FS) *CodeCopyExt { 93 93 + return &CodeCopyExt{files: files} 94 94 + } 95 95 + 96 96 + func (e *CodeCopyExt) Extend(md goldmark.Markdown) { 97 97 + copyIcon := readIcon(e.files, "copy", "size-4") 98 98 + checkIcon := readIcon(e.files, "check", "size-4") 99 99 + 100 100 + md.Parser().AddOptions( 101 101 + parser.WithASTTransformers( 102 102 + util.Prioritized(&codeCopyTransformer{}, 500), 103 103 + ), 104 104 + ) 105 105 + md.Renderer().AddOptions( 106 106 + renderer.WithNodeRenderers( 107 107 + util.Prioritized(&codeCopyRenderer{ 108 108 + copyIconSVG: copyIcon, 109 109 + checkIconSVG: checkIcon, 110 110 + }, 500), 111 111 + ), 112 112 + ) 113 113 + } 114 114 + 115 115 + func readIcon(files fs.FS, name string, classes ...string) string { 116 116 + if files == nil { 117 117 + return "" 118 118 + } 119 119 + 120 120 + iconPath := filepath.Join("static", "icons", name+".svg") 121 121 + data, err := fs.ReadFile(files, iconPath) 122 122 + if err != nil { 123 123 + return "" 124 124 + } 125 125 + 126 126 + svgStr := string(data) 127 127 + svgTagEnd := strings.Index(svgStr, ">") 128 128 + if svgTagEnd == -1 { 129 129 + return svgStr 130 130 + } 131 131 + 132 132 + classTag := ` class="` + strings.Join(classes, " ") + `"` 133 133 + return svgStr[:svgTagEnd] + classTag + svgStr[svgTagEnd:] 134 134 + }

+3 -1

appview/pages/markup/markdown.go

··· 85 85 } 86 86 87 87 func (rctx *RenderContext) RenderMarkdown(source string) string { 88 88 - return rctx.RenderMarkdownWith(source, NewMarkdown(rctx.Hostname)) 88 88 + md := NewMarkdown(rctx.Hostname) 89 89 + textension.NewCodeCopyExt(rctx.Files).Extend(md) 90 90 + return rctx.RenderMarkdownWith(source, md) 89 91 } 90 92 91 93 func (rctx *RenderContext) RenderMarkdownWith(source string, md goldmark.Markdown) string {

+86

appview/pages/markup/markdown_test.go

··· 4 4 "bytes" 5 5 "strings" 6 6 "testing" 7 7 + 8 8 + textension "tangled.org/core/appview/pages/markup/extension" 7 9 ) 8 10 9 11 func TestMermaidExtension(t *testing.T) { ··· 165 167 }) 166 168 } 167 169 } 170 170 + 171 171 + func TestCodeCopyExtension(t *testing.T) { 172 172 + tests := []struct { 173 173 + name string 174 174 + markdown string 175 175 + contains string 176 176 + notContains string 177 177 + }{ 178 178 + { 179 179 + name: "fenced code block gets copy wrapper", 180 180 + markdown: "```go\nfunc main() {}\n```", 181 181 + contains: `<div class="code-copy-wrapper">`, 182 182 + }, 183 183 + { 184 184 + name: "fenced code block gets copy button", 185 185 + markdown: "```go\nfunc main() {}\n```", 186 186 + contains: `<button class="code-copy-btn"`, 187 187 + }, 188 188 + { 189 189 + name: "copy button has both icon spans", 190 190 + markdown: "```go\nfunc main() {}\n```", 191 191 + contains: `<span class="copy-icon">`, 192 192 + }, 193 193 + { 194 194 + name: "mermaid blocks are not wrapped", 195 195 + markdown: "```mermaid\ngraph TD\n A-->B\n```", 196 196 + notContains: `code-copy-wrapper`, 197 197 + }, 198 198 + { 199 199 + name: "inline code is not affected", 200 200 + markdown: "use `fmt.Println` here", 201 201 + notContains: `code-copy-wrapper`, 202 202 + }, 203 203 + { 204 204 + name: "fenced block without language gets wrapper", 205 205 + markdown: "```\nsome text\n```", 206 206 + contains: `<div class="code-copy-wrapper">`, 207 207 + }, 208 208 + } 209 209 + 210 210 + for _, tt := range tests { 211 211 + t.Run(tt.name, func(t *testing.T) { 212 212 + md := NewMarkdown("tangled.org") 213 213 + textension.NewCodeCopyExt(nil).Extend(md) 214 214 + 215 215 + var buf bytes.Buffer 216 216 + if err := md.Convert([]byte(tt.markdown), &buf); err != nil { 217 217 + t.Fatalf("failed to convert markdown: %v", err) 218 218 + } 219 219 + 220 220 + result := buf.String() 221 221 + if tt.contains != "" && !strings.Contains(result, tt.contains) { 222 222 + t.Errorf("expected output to contain:\n%s\ngot:\n%s", tt.contains, result) 223 223 + } 224 224 + if tt.notContains != "" && strings.Contains(result, tt.notContains) { 225 225 + t.Errorf("expected output NOT to contain:\n%s\ngot:\n%s", tt.notContains, result) 226 226 + } 227 227 + }) 228 228 + } 229 229 + } 230 230 + 231 231 + func TestCodeCopyButtonSurvivesSanitization(t *testing.T) { 232 232 + md := NewMarkdown("tangled.org") 233 233 + textension.NewCodeCopyExt(nil).Extend(md) 234 234 + 235 235 + var buf bytes.Buffer 236 236 + if err := md.Convert([]byte("```go\nfunc main() {}\n```"), &buf); err != nil { 237 237 + t.Fatalf("failed to convert markdown: %v", err) 238 238 + } 239 239 + 240 240 + sanitizer := NewSanitizer() 241 241 + result := sanitizer.SanitizeDefault(buf.String()) 242 242 + 243 243 + for _, expected := range []string{ 244 244 + `<div class="code-copy-wrapper">`, 245 245 + `<button class="code-copy-btn"`, 246 246 + `<span class="copy-icon">`, 247 247 + `<span class="check-icon">`, 248 248 + } { 249 249 + if !strings.Contains(result, expected) { 250 250 + t.Errorf("expected sanitized output to contain:\n%s\ngot:\n%s", expected, result) 251 251 + } 252 252 + } 253 253 + }

+13

appview/pages/markup/sanitizer.go

··· 120 120 // goldmark-callout 121 121 policy.AllowAttrs("data-callout").OnElements("details") 122 122 123 123 + // code copy button 124 124 + policy.AllowElements("button") 125 125 + policy.AllowAttrs("class").Matching(regexp.MustCompile(`code-copy-btn`)).OnElements("button") 126 126 + policy.AllowAttrs("type", "aria-label").OnElements("button") 127 127 + policy.AllowAttrs("class").Matching(regexp.MustCompile(`code-copy-wrapper`)).OnElements("div") 128 128 + policy.AllowAttrs("class").Matching(regexp.MustCompile(`copy-icon|check-icon`)).OnElements("span") 129 129 + 130 130 + // SVG elements for code copy icons 131 131 + policy.AllowElements("svg", "path", "rect") 132 132 + policy.AllowAttrs("xmlns", "viewBox", "fill", "stroke", "stroke-width", "stroke-linecap", "stroke-linejoin", "class").OnElements("svg") 133 133 + policy.AllowAttrs("d").OnElements("path") 134 134 + policy.AllowAttrs("x", "y", "rx", "ry").OnElements("rect") 135 135 + 123 136 return policy 124 137 } 125 138

+15

appview/pages/templates/layouts/base.html

··· 97 97 {{ template "layouts/fragments/footer" . }} 98 98 </footer> 99 99 {{ end }} 100 100 + 101 101 + <script> 102 102 + document.addEventListener('click', function(e) { 103 103 + var btn = e.target.closest('.code-copy-btn'); 104 104 + if (!btn) return; 105 105 + var pre = btn.closest('.code-copy-wrapper').querySelector('pre'); 106 106 + if (!pre) return; 107 107 + var code = pre.querySelector('code'); 108 108 + var text = code ? code.innerText : pre.innerText; 109 109 + navigator.clipboard.writeText(text).then(function() { 110 110 + btn.classList.add('copied'); 111 111 + setTimeout(function() { btn.classList.remove('copied'); }, 2000); 112 112 + }); 113 113 + }); 114 114 + </script> 100 115 </body> 101 116 </html> 102 117 {{ end }}

+36

input.css

··· 220 220 @apply flex justify-center my-4 overflow-x-auto bg-transparent border-0; 221 221 } 222 222 223 223 + .code-copy-wrapper { 224 224 + @apply relative; 225 225 + } 226 226 + 227 227 + .code-copy-btn { 228 228 + @apply absolute top-2 right-2 p-1.5 rounded cursor-pointer; 229 229 + @apply text-gray-500 bg-gray-200/80 dark:text-gray-400 dark:bg-gray-800/80; 230 230 + @apply opacity-0 transition-opacity duration-150 ease-in-out; 231 231 + @apply leading-none border-0 z-10; 232 232 + } 233 233 + 234 234 + .code-copy-wrapper:hover .code-copy-btn, 235 235 + .code-copy-btn:focus { 236 236 + @apply opacity-100; 237 237 + } 238 238 + 239 239 + .code-copy-btn:hover { 240 240 + @apply bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200; 241 241 + } 242 242 + 243 243 + .code-copy-btn.copied { 244 244 + @apply text-green-600 dark:text-green-400; 245 245 + } 246 246 + 247 247 + .code-copy-btn .check-icon { 248 248 + @apply hidden; 249 249 + } 250 250 + 251 251 + .code-copy-btn.copied .copy-icon { 252 252 + @apply hidden; 253 253 + } 254 254 + 255 255 + .code-copy-btn.copied .check-icon { 256 256 + @apply block; 257 257 + } 258 258 + 223 259 /* Base callout */ 224 260 details[data-callout] { 225 261 @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4;