feat(editor): support linked-doc in rich-text column (#9634)

close: BS-2345
2025-01-10 14:43:40 +00:00
parent cc08094b17
commit c016f8e37e
6 changed files with 488 additions and 152 deletions
--- a/tests/affine-local/e2e/blocksuite/database/rich-text.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/database/rich-text.spec.ts
@@ -0,0 +1,99 @@
+import { test } from '@affine-test/kit/playwright';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+import {
+  addColumn,
+  createDatabaseBlock,
+  createNewPage,
+  gotoContentFromTitle,
+  selectCell,
+} from './utils';
+
+test.describe('Database Rich Text Column', () => {
+  test('paste document link into rich text cell', async ({ page }) => {
+    // Step 1: Open home page
+    await openHomePage(page);
+    await waitForEditorLoad(page);
+
+    // Step 2: Create a new page
+    await createNewPage(page);
+
+    await gotoContentFromTitle(page);
+
+    // Step 3: Create a database in the page
+    await createDatabaseBlock(page);
+
+    // Step 4: Add a text column
+    await addColumn(page, 'Text');
+
+    // Step 5: Create a new page to get its link
+    await clickNewPageButton(page, 'Test Page');
+    const pageUrl = page.url();
+
+    // Step 6: Go back to database page
+    await page.goBack();
+    await waitForEditorLoad(page);
+
+    // Step 7: Select and edit the rich text cell
+    const richTextCell = await selectCell(page, 2);
+
+    // Step 8: Paste the document link
+    await page.evaluate(url => {
+      const clipboardData = new DataTransfer();
+      clipboardData.setData('text/plain', url);
+      const pasteEvent = new ClipboardEvent('paste', {
+        clipboardData,
+        bubbles: true,
+        cancelable: true,
+      });
+      document.activeElement?.dispatchEvent(pasteEvent);
+    }, pageUrl);
+
+    // Step 9: Verify the result
+    const referenceTitle = richTextCell.locator('.affine-reference-title');
+    await expect(referenceTitle).toBeVisible();
+    await expect(referenceTitle).toContainText('Test Page');
+  });
+
+  test('add document link via @ in rich text cell', async ({ page }) => {
+    // Step 1: Open home page
+    await openHomePage(page);
+    await waitForEditorLoad(page);
+
+    // Step 2: Create a new page
+    await createNewPage(page);
+    await gotoContentFromTitle(page);
+
+    // Step 3: Create a database in the page
+    await createDatabaseBlock(page);
+
+    // Step 4: Add a text column
+    await addColumn(page, 'Text');
+
+    // Step 5: Create a new page as reference target
+    await clickNewPageButton(page, 'Reference Target');
+    await page.goBack();
+    await waitForEditorLoad(page);
+
+    // Step 6: Select and edit the rich text cell
+    const richTextCell = await selectCell(page, 2);
+    await richTextCell.click();
+    await page.keyboard.type('@');
+
+    // Step 7: Wait for reference picker and select the page
+    const linkedDocPopover = page.locator('.linked-doc-popover');
+    await expect(linkedDocPopover).toBeVisible();
+    const targetPage = linkedDocPopover.getByText('Reference Target');
+    await targetPage.click();
+
+    // Step 8: Verify the result
+    const referenceTitle = richTextCell.locator('.affine-reference-title');
+    await expect(referenceTitle).toBeVisible();
+    await expect(referenceTitle).toContainText('Reference Target');
+  });
+});