Skip to content

Commit

Permalink
fix: keyboard controller should attach event on document (#8801)
Browse files Browse the repository at this point in the history
  • Loading branch information
doouding committed Dec 19, 2024
1 parent e6706fb commit cea0a56
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 15 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { assertExists, assertNotExists } from '@blocksuite/global/utils';
import { assertExists } from '@blocksuite/global/utils';
import { Slot } from '@blocksuite/store';

import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
Expand Down Expand Up @@ -53,10 +53,9 @@ export class PieManager {
private static _register(schema: PieMenuSchema) {
const { id } = schema;

assertNotExists(
this.registeredSchemas[id],
`Menu with id '${id}' already exists. Please provide a unique id`
);
if (this.registeredSchemas[id]) {
return;
}

this.registeredSchemas[id] = schema;
}
Expand Down
28 changes: 18 additions & 10 deletions packages/framework/block-std/src/gfx/keyboard.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,27 +16,35 @@ export class KeyboardController {

private _init() {
this._disposable.add(
this.std.event.add('keyDown', evt => {
const state = evt.get('keyboardState');

this.shiftKey$.value = state.raw.shiftKey && state.raw.key === 'Shift';
this.spaceKey$.value = state.raw.code === 'Space';
this._listenKeyboard('keydown', evt => {
this.shiftKey$.value = evt.shiftKey && evt.key === 'Shift';
this.spaceKey$.value = evt.code === 'Space';
})
);

this._disposable.add(
this.std.event.add('keyUp', evt => {
const state = evt.get('keyboardState');

this.shiftKey$.value = state.raw.shiftKey && state.raw.key === 'Shift';
this._listenKeyboard('keyup', evt => {
this.shiftKey$.value =
evt.shiftKey && evt.key === 'Shift' ? true : false;

if (state.raw.code === 'Space') {
if (evt.code === 'Space') {
this.spaceKey$.value = false;
}
})
);
}

private _listenKeyboard(
event: 'keydown' | 'keyup',
callback: (keyboardEvt: KeyboardEvent) => void
) {
document.addEventListener(event, callback, false);

return () => {
document.removeEventListener(event, callback, false);
};
}

dispose() {
this._disposable.dispose();
}
Expand Down
43 changes: 43 additions & 0 deletions tests/multiple-editors/edgeless.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { expect } from '@playwright/test';

import {
switchMultipleEditorsMode,
toggleMultipleEditors,
} from '../utils/actions/edgeless.js';
import {
enterPlaygroundRoom,
initEmptyEdgelessState,
initThreeParagraphs,
waitNextFrame,
} from '../utils/actions/misc.js';
import { test } from '../utils/playwright.js';

test('the shift pressing status should effect all editors', async ({
page,
}) => {
await enterPlaygroundRoom(page);
await initEmptyEdgelessState(page);
await initThreeParagraphs(page);
await toggleMultipleEditors(page);
await switchMultipleEditorsMode(page);

await waitNextFrame(page, 5000);

const getShiftPressedStatus = async () => {
return page.evaluate(() => {
const edgelessBlocks = document.querySelectorAll('affine-edgeless-root');

return Array.from(edgelessBlocks).map(edgelessRoot => {
return edgelessRoot.gfx.keyboard.shiftKey$.peek();
});
});
};

await page.keyboard.down('Shift');
const pressed = await getShiftPressedStatus();
expect(pressed).toEqual([true, true]);

await page.keyboard.up('Shift');
const released = await getShiftPressedStatus();
expect(released).toEqual([false, false]);
});
11 changes: 11 additions & 0 deletions tests/utils/actions/edgeless.ts
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,17 @@ export async function switchEditorMode(page: Page) {
await waitNextFrame(page);
}

export async function switchMultipleEditorsMode(page: Page) {
await page.evaluate(() => {
const containers = document.querySelectorAll('affine-editor-container');
const mode = containers[0].mode === 'edgeless' ? 'page' : 'edgeless';

containers.forEach(container => {
container.mode = mode;
});
});
}

export async function switchEditorEmbedMode(page: Page) {
await page.click('sl-button:text("Test Operations")');
await page.click('sl-menu-item:text("Switch Offset Mode")');
Expand Down

0 comments on commit cea0a56

Please sign in to comment.