Add toggle to header on annotations (#37758)

Co-authored-by: Kevin Heis <heiskr@users.noreply.github.com>

lib/render-content/plugins/code-header.js

@@ -9,6 +9,7 @@ import { h } from 'hastscript'
 import octicons from '@primer/octicons'
 import { parse } from 'parse5'
 import { fromParse5 } from 'hast-util-from-parse5'
+import murmur from 'imurmurhash'
 
 const languages = yaml.load(fs.readFileSync('./data/variables/code-languages.yml', 'utf8'))
 
@@ -35,7 +36,8 @@ function wrapCodeExample(node) {
   return h('div', { className: 'code-example' }, [header(lang, code), node])
 }
 
-export function header(lang, code) {
+export function header(lang, code, subnav) {
+  const codeId = murmur('js-btn-copy').hash(code).result()
   return h(
     'header',
     {
@@ -52,16 +54,18 @@ export function header(lang, code) {
       ],
     },
     [
-      h('span', languages[lang]?.name),
+      h('span', { className: 'flex-1' }, languages[lang]?.name),
+      subnav,
       h(
         'button',
         {
           class: ['js-btn-copy', 'btn', 'btn-sm', 'tooltipped', 'tooltipped-nw'],
-          'data-clipboard-text': code,
           'aria-label': 'Copy code to clipboard',
+          'data-clipboard': codeId,
         },
         btnIcon()
       ),
+      h('pre', { hidden: true, 'data-clipboard': codeId }, code),
     ]
   )
 }