Section heading anchor copy ("¶") fails silently in modern browsers

[h30s]

Problem

Inside content pages, headings (h2–h4) have an anchor link (¶) with aria-label="Copy link to this section".

In theme/js/theme.js (lines 153–170), the click listener attempts to copy the URL using setTimeout:

a.addEventListener('click', (e) => {
  // let it navigate, then copy
  setTimeout(() => navigator.clipboard.writeText(window.location.href), 0);
});

Because navigator.clipboard.writeText is called inside a setTimeout callback, it loses the transient user activation (user gesture) context. In modern browsers (Chrome, Safari, Firefox), this throws a NotAllowedError (DOMException: Document is not focused or DOMException: Must be handling a user gesture).

In addition:

• There is no .catch() error handler or fallback (unlike the code block copy button in the same file, which uses a fallback document.execCommand('copy')).
• There is no visual feedback (such as a brief "Copied!" indicator) to show the user whether the copy succeeded or failed.

User Impact

When a user clicks the anchor symbol (¶) next to a heading expecting to copy the link to that section, nothing is copied to their clipboard, and the failure occurs silently without any error notification or feedback.

Expected Behavior

• Clicking the section anchor link should copy the section's URL (including #heading-id) synchronously within the user gesture or with a working fallback.
• The user should receive visual feedback confirming that the link has been copied.

Relevant Code References

• theme/js/theme.js (lines 153–170):

  const contentRoot = document.querySelector('main .content-inner') || document.querySelector('main');
  if (contentRoot) {
    contentRoot.querySelectorAll('h2[id], h3[id], h4[id]').forEach(h => {
      if (h.querySelector('a.anchor-link')) return;
      const a = document.createElement('a');
      a.href = `#${h.id}`;
      a.className = 'anchor-link ms-2';
      a.setAttribute('aria-label', 'Copy link to this section');
      a.innerHTML = '¶';
      a.addEventListener('click', (e) => {
        setTimeout(() => navigator.clipboard.writeText(window.location.href), 0);
      });
      h.appendChild(a);
    });
  }

[tyagivibhor111-hub]

Hi @h30s, I looked into this issue and I can reproduce the problem in the current theme/js/theme.js.

The main issue is that navigator.clipboard.writeText() is called inside setTimeout(), so the browser can reject the clipboard operation because the original user activation has already been lost.

I’d like to fix this by:

• preventing the default anchor navigation while copying;
• building the section URL directly from the current page and heading ID;
• calling navigator.clipboard.writeText() directly inside the click handler;
• adding the same document.execCommand('copy') fallback already used by the code-copy button;
• showing temporary Copied! feedback on successful copy.

This keeps the change limited to the existing heading-anchor functionality and follows the pattern already present in theme.js.

I’d be happy to work on this issue and submit a PR.