Files
AFFiNE-Mirror/tests/affine-local/e2e/blocksuite/edgeless/embed.spec.ts
T
congzhou09 478138493a fix(editor): invalid caret in note-edgeless-block on focus (#14229)
### Problem
●In edgeless mode, when starting to edit, `note-block` exhibits two
types of invalid caret behavior:
(1)**Title Region Misalignment**: Clicking on the title region
incorrectly generates the caret in the first line of the note content,
rather than in the title itself.
(2)**Vanishing Caret at Line End**: When clicking in the empty space
beyond the end of a text section, the caret appears momentarily at the
line's end but disappears immediately.
●The following video demonstrates these issues:


https://github.com/user-attachments/assets/db9c2c50-709f-4d32-912c-0f01841d2024


### Solution
●**Title Click Interception**: Added a check to determine if the click
coordinates fall in the title region. If so, the caret positioning is
now handled by a dedicated logic path. Otherwise, it falls back to the
existing note-content logic as before.
●**Range Normalization**: When the generated `range.startContainer` is
not a `TextNode`, try to find a most appropriate `TextNode` and update
the `range` accordingly.

### After
●The video below shows the behavior after this fix.


https://github.com/user-attachments/assets/b2f70b64-1fc6-4049-8379-8bcf3a488a05



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

* **Bug Fixes**
* Clicking a page block title no longer creates unwanted paragraphs and
reliably focuses the title.
* Paragraph creation now occurs only when needed and focus is applied
only after successful creation.
* Click coordinates are clamped to container bounds to prevent misplaced
cursors or focus.

* **Improvements**
* Caret normalization: clicks place the caret at the last meaningful
text position for consistent single-cursor behavior.

* **Tests**
  * Added end-to-end coverage for caret placement and focus transitions.
* New ratio-based click/double-click test utilities and a helper for
double-clicking note bodies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-03-02 18:51:23 +08:00

61 lines
2.0 KiB
TypeScript

import { test } from '@affine-test/kit/playwright';
import {
clickEdgelessModeButton,
dblclickNoteBody,
locateEditorContainer,
locateToolbar,
} from '@affine-test/kit/utils/editor';
import { pressEnter } from '@affine-test/kit/utils/keyboard';
import { openHomePage } from '@affine-test/kit/utils/load-page';
import {
clickNewPageButton,
type,
waitForEditorLoad,
} from '@affine-test/kit/utils/page-logic';
import { isContainedInBoundingBox } from '@affine-test/kit/utils/utils';
import { expect } from '@playwright/test';
test.beforeEach(async ({ page }) => {
await openHomePage(page);
await waitForEditorLoad(page);
await clickNewPageButton(page);
await clickEdgelessModeButton(page);
const container = locateEditorContainer(page);
await container.click();
});
test('should close embed editing modal when editor switching to page mode by short cut', async ({
page,
}) => {
await page.keyboard.press('@');
await page.getByTestId('cmdk-label').getByText('Getting Started').click();
const toolbar = locateToolbar(page);
await toolbar.getByLabel('Switch view').click();
await toolbar.getByLabel('Card view').click();
await toolbar.getByLabel('Edit').click();
const editingModal = page.locator('embed-card-edit-modal');
await expect(editingModal).toBeVisible();
await page.keyboard.press('Alt+s');
await waitForEditorLoad(page);
await expect(editingModal).toBeHidden();
});
test('embed card should not overflow the edgeless note', async ({ page }) => {
const note = page.locator('affine-edgeless-note');
await dblclickNoteBody(page);
await type(page, '/github');
await pressEnter(page);
await page
.locator('.embed-card-modal-input')
.fill('https://github.com/toeverything/AFFiNE/pull/10442');
await pressEnter(page);
const embedCard = page.locator('affine-embed-github-block');
await embedCard
.locator('.affine-embed-github-block:not(.loading)')
.waitFor({ state: 'visible' });
expect(await isContainedInBoundingBox(note, embedCard, true)).toBe(true);
});