From 3ab1beb1f2f95a1dd937938aa1e2a0f1a0ffc0c7 Mon Sep 17 00:00:00 2001
From: Karan Yadav <xpresskaran98@gmail.com>
Date: Mon, 7 Apr 2025 18:26:26 +0000
Subject: [PATCH] feat(postprocess): add copy button into code blocks

Adds a "Copy" button to all `<pre><code>` blocks in the generated HTML.
Ensures improved UX for users reading code examples.

Fixes: #6600
Private-ref: https://github.com/stdlib-js/stdlib/issues/6600

---
type: pre_commit_static_analysis_report
description: Results of running static analysis checks when committing changes.
report:
  - task: lint_filenames
    status: passed
  - task: lint_editorconfig
    status: passed
  - task: lint_markdown
    status: na
  - task: lint_package_json
    status: na
  - task: lint_repl_help
    status: na
  - task: lint_javascript_src
    status: passed
  - task: lint_javascript_cli
    status: na
  - task: lint_javascript_examples
    status: na
  - task: lint_javascript_tests
    status: na
  - task: lint_javascript_benchmarks
    status: na
  - task: lint_python
    status: na
  - task: lint_r
    status: na
  - task: lint_c_src
    status: na
  - task: lint_c_examples
    status: na
  - task: lint_c_benchmarks
    status: na
  - task: lint_c_tests_fixtures
    status: na
  - task: lint_shell
    status: na
  - task: lint_typescript_declarations
    status: na
  - task: lint_typescript_tests
    status: na
  - task: lint_license_headers
    status: passed
---
---
 .../markdown/to-html/lib/post_process.js      | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/lib/node_modules/@stdlib/_tools/markdown/to-html/lib/post_process.js b/lib/node_modules/@stdlib/_tools/markdown/to-html/lib/post_process.js
index 57b4bcbc1cd7..fd0dac4d2f78 100644
--- a/lib/node_modules/@stdlib/_tools/markdown/to-html/lib/post_process.js
+++ b/lib/node_modules/@stdlib/_tools/markdown/to-html/lib/post_process.js
@@ -28,6 +28,7 @@ var replace = require( '@stdlib/string/replace' );
 var RE_VIEW_BOX = /(?:(view-box)(=".*?"))/g;
 var RE_CLIP_PATH_OPEN = /(?:<(clip-path)(.*?>))/g;
 var RE_CLIP_PATH_CLOSE = /<\/clip-path>/g;
+var RE_CODE_BLOCKS = /<pre>\s*<code class="([^"]*)">\s*([\s\S]*?)\s*<\/code>\s*<\/pre>/g;
 
 
 // MAIN //
@@ -53,9 +54,38 @@ function postProcess( html ) {
 	html = replace( html, RE_VIEW_BOX, 'viewBox$2' );
 	html = replace( html, RE_CLIP_PATH_OPEN, '<clipPath$2' );
 	html = replace( html, RE_CLIP_PATH_CLOSE, '</clipPath>' );
+	html = replace( html, RE_CODE_BLOCKS, injectCopyButton );
+	html += getCopyButtonStyles();
 	return html;
 }
 
+/**
+* Injects a "Copy" button into a code block.
+*
+* This function wraps a `<pre><code>` block in a container div and inserts a
+* "Copy" button above it. The button uses the Clipboard API to copy the visible
+* text content (`innerText`) of the `<code>` element when clicked.
+*
+* @private
+* @param {string} match The entire matched HTML
+* @param {string} lang The language class
+* @param {string} code The raw HTML contents of the code block
+* @returns {string} copy button HTML
+*/
+function injectCopyButton( match, lang, code ) {
+	return '<div class="code-container"><button class="copy-button" onclick="const codeContainer = this.closest(\'.code-container\');if ( codeContainer ) { const codeElement = codeContainer.querySelector( \'code\' ); if ( codeElement ) { try { navigator.clipboard.writeText( codeElement.innerText ); this.innerText = \'Copied\'; setTimeout(() => { this.innerText = \'Copy\' }, 2000); } catch (err) { console.error(err); } } }">Copy</button><pre><code class="' + lang + '">' + code + '</code></pre></div>';
+}
+
+/**
+* Returns copy button styles.
+*
+* @private
+* @returns {string} copy button styles
+*/
+function getCopyButtonStyles() {
+	return '<style>.code-container { position: relative; } .copy-button { position: absolute; top: 8px; right: 8px; background: #eee; border: none; padding: 5px 10px; cursor: pointer; font-size: 0.8em; border-radius: 4px; } .copy-button:hover { background: #ddd; }</style>';
+}
+
 
 // EXPORTS //