fix(editor): middle click open new tab (#12902)

Close
[BS-3251](https://linear.app/affine-design/issue/BS-3251/正文的inline链接，chrome中，中键开新窗口的行为丢失了)

#### PR Dependency Tree


* **PR #12902** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Middle-clicking on links and references now opens them in a new
browser tab.
- Linux platform detection has been added for improved
environment-specific behavior.

- **Bug Fixes**
- Middle-click paste prevention is now limited to Linux environments
when the relevant setting is disabled and excludes clicks on links and
references.

- **Tests**
- Added end-to-end tests to verify that middle-clicking links opens them
in a new tab for external links, internal links, and reference
documents.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

tests/affine-local/e2e/links.spec.ts

@@ -1,9 +1,15 @@
 import { toolbarButtons } from '@affine-test/kit/bs/linked-toolbar';
 import { waitNextFrame } from '@affine-test/kit/bs/misc';
 import { test } from '@affine-test/kit/playwright';
-import { clickEdgelessModeButton } from '@affine-test/kit/utils/editor';
+import {
+  clickEdgelessModeButton,
+  locateToolbar,
+} from '@affine-test/kit/utils/editor';
 import {
   pasteByKeyboard,
+  pressArrowUp,
+  pressBackspace,
+  pressEnter,
   selectAllByKeyboard,
   writeTextToClipboard,
 } from '@affine-test/kit/utils/keyboard';
@@ -13,6 +19,7 @@ import {
   createLinkedPage,
   createTodayPage,
   getBlockSuiteEditorTitle,
+  type,
   waitForEmptyEditor,
 } from '@affine-test/kit/utils/page-logic';
 import {
@@ -1164,3 +1171,75 @@ test('should add HTTP protocol into link automatically', async ({ page }) => {
   url = await linkPreview.locator('a').getAttribute('href');
   expect(url).toBe(link);
 });
+
+test('should open link in new tab when middle clicking on link', async ({
+  page,
+  context,
+}) => {
+  await pressEnter(page);
+
+  // external link
+  {
+    await type(page, 'external-link');
+    await selectAllByKeyboard(page);
+    const toolbar = locateToolbar(page);
+    await toolbar.getByTestId('link').click();
+    const input = page.locator('.affine-link-popover-input');
+
+    const externalUrl = new URL('https://github.com/').toString();
+    await input.fill(externalUrl);
+    await pressEnter(page);
+
+    const newTabPromise = context.waitForEvent('page');
+
+    await page.locator('affine-link').click({ button: 'middle' });
+
+    const newTab = await newTabPromise;
+    await expect(newTab).toHaveURL(externalUrl);
+    await newTab.close();
+  }
+
+  await selectAllByKeyboard(page);
+  await pressBackspace(page);
+
+  // internal link
+  {
+    await type(page, 'internal-link');
+    const url = page.url();
+    await selectAllByKeyboard(page);
+    const toolbar = locateToolbar(page);
+    await toolbar.getByTestId('link').click();
+    const input = page.locator('.affine-link-popover-input');
+    await input.fill(url);
+    await pressEnter(page);
+
+    const newTabPromise = context.waitForEvent('page');
+
+    await page.locator('affine-link').click({ button: 'middle' });
+
+    const newTab = await newTabPromise;
+    // there is a refreshKey in the url
+    expect(newTab.url()).toContain(url);
+    await newTab.close();
+  }
+
+  await selectAllByKeyboard(page);
+  await pressBackspace(page);
+
+  // reference doc
+  {
+    await pressArrowUp(page);
+    await type(page, 'ThisPage');
+    await pressEnter(page);
+    await type(page, '@ThisPage');
+    await pressEnter(page);
+
+    const newTabPromise = context.waitForEvent('page');
+
+    await page.locator('affine-reference').click({ button: 'middle' });
+
+    const newTab = await newTabPromise;
+    expect(newTab.url()).toContain(page.url());
+    await newTab.close();
+  }
+});