Skip to content

Commit

Permalink
fix: cmd-k keybinding not show when editor input is active (#7398)
Browse files Browse the repository at this point in the history
  • Loading branch information
pengx17 authored Jul 1, 2024
1 parent 4d484ea commit 8c4a42f
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 14 deletions.
1 change: 1 addition & 0 deletions packages/frontend/core/src/commands/registry/command.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export type CommandCategory =

export interface KeybindingOptions {
binding: string;
capture?: boolean;
// some keybindings are already registered in blocksuite
// we can skip the registration of these keybindings __FOR NOW__
skipRegister?: boolean;
Expand Down
64 changes: 53 additions & 11 deletions packages/frontend/core/src/commands/registry/registry.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,50 @@
import { DebugLogger } from '@affine/debug';
// @ts-expect-error upstream type is wrong
import { tinykeys } from 'tinykeys';
import { createKeybindingsHandler } from 'tinykeys';

import type { AffineCommand, AffineCommandOptions } from './command';
import { createAffineCommand } from './command';

const commandLogger = new DebugLogger('command:registry');

interface KeyBindingMap {
[keybinding: string]: (event: KeyboardEvent) => void;
}

export interface KeyBindingOptions {
/**
* Key presses will listen to this event (default: "keydown").
*/
event?: 'keydown' | 'keyup';

/**
* Whether to capture the event during the capture phase (default: false).
*/
capture?: boolean;

/**
* Keybinding sequences will wait this long between key presses before
* cancelling (default: 1000).
*
* **Note:** Setting this value too low (i.e. `300`) will be too fast for many
* of your users.
*/
timeout?: number;
}

const bindKeys = (
target: Window | HTMLElement,
keyBindingMap: KeyBindingMap,
options: KeyBindingOptions = {}
) => {
const event = options.event ?? 'keydown';
const onKeyEvent = createKeybindingsHandler(keyBindingMap, options);
target.addEventListener(event, onKeyEvent, options.capture);
return () => {
target.removeEventListener(event, onKeyEvent, options.capture);
};
};

export const AffineCommandRegistry = new (class {
readonly commands: Map<string, AffineCommand> = new Map();

Expand All @@ -25,17 +63,21 @@ export const AffineCommandRegistry = new (class {
!command.keyBinding.skipRegister &&
typeof window !== 'undefined'
) {
const { binding: keybinding } = command.keyBinding;
unsubKb = tinykeys(window, {
[keybinding]: async (e: Event) => {
e.preventDefault();
try {
await command.run();
} catch (e) {
console.error(`Failed to invoke keybinding [${keybinding}]`, e);
}
const { binding: keybinding, capture } = command.keyBinding;
unsubKb = bindKeys(
window,
{
[keybinding]: (e: Event) => {
e.preventDefault();
command.run()?.catch(e => {
console.error(`Failed to run command [${command.id}]`, e);
});
},
},
});
{
capture,
}
);
}

commandLogger.debug(`Registered command ${command.id}`);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ import { useNavigateHelper } from './use-navigate-helper';

function hasLinkPopover(editor: AffineEditorContainer | null) {
const textSelection = editor?.host?.std.selection.find('text');
if (textSelection && textSelection.from.length > 0) {
const linkPopup = document.querySelector('link-popup');
if (linkPopup) {
if (editor && textSelection && textSelection.from.length > 0) {
const formatBar = editor.host.querySelector('affine-format-bar-widget');
if (formatBar) {
return true;
}
}
Expand All @@ -42,6 +42,7 @@ function registerCMDKCommand(
category: 'affine:general',
keyBinding: {
binding: '$mod+K',
capture: true,
},
label: '',
icon: '',
Expand Down

0 comments on commit 8c4a42f

Please sign in to comment.