docs: middle mouse click opens editor example instead of docs in new …

…tab (#9498)

## PR Description

Clicking on `<a>` tags with the middle mouse button always opens them in
a new tab.
Currently, they open `/docs.{page}.html#` since the href link and
onclick link are different.
![Screenshot 2024-12-15 at 00 40
47](https://github.com/user-attachments/assets/33331bed-45cb-44dd-b803-9713ed18336d)

<details>
  <summary><h2>Checklist</h2></summary>

- [x] This PR is atomic (i.e., it fixes one issue at a time).
- [x] The title is a concise [semantic commit
message](https://www.conventionalcommits.org/) (e.g. "fix: correctly
handle undefined properties").
- [x] `yarn test` runs successfully

site/static/index.ts

@@ -40,6 +40,7 @@ const loader = vega.loader({
 });
 
 const editorURL = 'https://vega.github.io/editor/';
+const MIDDLE_MOUSE_CLICK = 1;
 
 /* Anchors */
 selectAll('h2, h3, h4, h5, h6').each(function (this: d3.BaseType) {
@@ -92,13 +93,16 @@ export function embedExample($target: any, spec: TopLevelSpec, actions = true, t
       .append('a')
       .text('Open in Vega Editor')
       .attr('href', '#')
-      .on('click', event => {
-        post(window, editorURL, {
-          mode: 'vega-lite',
-          spec: compactStringify(spec),
-          config: vgSpec.config,
-          renderer: 'svg'
-        });
+      .on('click mouseup', event => {
+        // Check if it's a regular left click or middle mouse click
+        if (event.type === 'click' || (event.type === 'mouseup' && event.button === MIDDLE_MOUSE_CLICK)) {
+          post(window, editorURL, {
+            mode: 'vega-lite',
+            spec: compactStringify(spec),
+            config: vgSpec.config,
+            renderer: 'svg'
+          });
+        }
         // remove as any when d3 typings are updated
         (event as any).preventDefault();
       });