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,
} 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<{
focusBlock?: BlockComponent;
force?: boolean;
}> = (ctx, next) => {
const { focusBlock, std } = ctx;
const { focusBlock, force, std } = ctx;
if (!focusBlock || !focusBlock.model.text) return;
const { selection } = std;
if (force) selection.clear();
selection.setGroup('note', [
selection.create(TextSelection, {
from: {
@@ -151,6 +151,7 @@ export const BlocksuiteEditorContainer = forwardRef<
const focusBlock = std.view.getBlock(lastBlock.id) ?? undefined;
std.command.exec(focusBlockEnd, {
focusBlock,
force: true,
});
return;
}
@@ -1,4 +1,5 @@
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 {
addDatabase,
@@ -82,7 +83,15 @@ test('append paragraph when click editor gap', async ({ page }) => {
await page.locator('[data-testid=page-editor-blank]').click();
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();
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);
});