fix(packages): copy selected Debian installation values (#39718) (#39734)

Backport #39718

Fixes https://github.com/go-gitea/gitea/issues/39715.

Make "copy code" button work with changed content.

Co-authored-by: Ehsan-hash <150884269+Ehsan-hash@users.noreply.github.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/markup/codecopy.ts

@@ -1,9 +1,10 @@
 import {svg} from '../svg.ts';
-import {createElementFromAttrs, queryElems} from '../utils/dom.ts';
+import {createElementFromAttrs, generateElemId, queryElems} from '../utils/dom.ts';
 
 export function makeCodeCopyButton(attrs: Record<string, string> = {}): HTMLButtonElement {
   const btn = createElementFromAttrs<HTMLButtonElement>('button', {
     class: 'ui compact icon button code-copy auto-hide-control',
+    type: 'button',
     ...attrs,
   });
   btn.innerHTML = svg('octicon-copy');
@@ -11,13 +12,11 @@ export function makeCodeCopyButton(attrs: Record<string, string> = {}): HTMLButt
 }
 
 export function initMarkupCodeCopy(elMarkup: HTMLElement): void {
-  // .markup .code-block code
   queryElems(elMarkup, '.code-block code', (el) => {
-    if (!el.textContent) return;
+    // the code block's content can change (e.g.: debian package page: select different distributions),
-    // remove final trailing newline introduced during HTML rendering
+    // so use "data-clipboard-target" to copy the target's textContent, also always respect the content's end of block newline.
-    const btn = makeCodeCopyButton({
+    if (!el.getAttribute('id')) el.setAttribute('id', generateElemId('_code_block_'));
-      'data-clipboard-text': el.textContent.replace(/\r?\n$/, ''),
+    const btn = makeCodeCopyButton({'data-clipboard-target': `#${CSS.escape(el.getAttribute('id')!)}`});
-    });
     // we only want to use `.code-block-container` if it exists, no matter `.code-block` exists or not.
     const btnContainer = el.closest('.code-block-container') ?? el.closest('.code-block')!;
     btnContainer.append(btn);