fix(core): editor blur unexpectedly when clicking blank area (#10501)

### Before

https://github.com/user-attachments/assets/3c4b20e1-6d89-4dc7-a51f-04b6e9a89486

### After

https://github.com/user-attachments/assets/86b93403-597e-4dbb-ab65-90908342c230
This commit is contained in:
L-Sun
2025-02-28 07:05:06 +00:00
parent 27fc4afc35
commit 90b37ce65c
3 changed files with 22 additions and 3 deletions
@@ -4,14 +4,23 @@ import {
TextSelection, TextSelection,
} from '@blocksuite/block-std'; } from '@blocksuite/block-std';
/**
* Focus the end of the block
* @param focusBlock - The block to focus
* @param force - If set to true, the selection will be cleared.
* It is useful when the selection is same.
*/
export const focusBlockEnd: Command<{ export const focusBlockEnd: Command<{
focusBlock?: BlockComponent; focusBlock?: BlockComponent;
force?: boolean;
}> = (ctx, next) => { }> = (ctx, next) => {
const { focusBlock, std } = ctx; const { focusBlock, force, std } = ctx;
if (!focusBlock || !focusBlock.model.text) return; if (!focusBlock || !focusBlock.model.text) return;
const { selection } = std; const { selection } = std;
if (force) selection.clear();
selection.setGroup('note', [ selection.setGroup('note', [
selection.create(TextSelection, { selection.create(TextSelection, {
from: { from: {
@@ -151,6 +151,7 @@ export const BlocksuiteEditorContainer = forwardRef<
const focusBlock = std.view.getBlock(lastBlock.id) ?? undefined; const focusBlock = std.view.getBlock(lastBlock.id) ?? undefined;
std.command.exec(focusBlockEnd, { std.command.exec(focusBlockEnd, {
focusBlock, focusBlock,
force: true,
}); });
return; return;
} }
@@ -1,4 +1,5 @@
import { test } from '@affine-test/kit/playwright'; import { test } from '@affine-test/kit/playwright';
import { locateEditorContainer } from '@affine-test/kit/utils/editor';
import { openHomePage } from '@affine-test/kit/utils/load-page'; import { openHomePage } from '@affine-test/kit/utils/load-page';
import { import {
addDatabase, addDatabase,
@@ -82,7 +83,15 @@ test('append paragraph when click editor gap', async ({ page }) => {
await page.locator('[data-testid=page-editor-blank]').click(); await page.locator('[data-testid=page-editor-blank]').click();
expect(await paragraph.count()).toBe(numParagraphs + 1); expect(await paragraph.count()).toBe(numParagraphs + 1);
// click the gap again, should not append another paragraph
await page.locator('[data-testid=page-editor-blank]').click(); await page.locator('[data-testid=page-editor-blank]').click();
expect(await paragraph.count()).toBe(numParagraphs + 1); expect(
await paragraph.count(),
'click the gap again, should not append another paragraph'
).toBe(numParagraphs + 1);
const editorContainer = locateEditorContainer(page);
expect(
await editorContainer.evaluate(el => el.contains(document.activeElement)),
'editor should should keep being focused'
).toBe(true);
}); });