refactor(infra): directory structure (#4615)

packages/common/infra/src/command/README.md

@@ -0,0 +1,5 @@
+# AFFiNE Command Abstractions
+
+This package contains the command abstractions for the AFFiNE framework to be used for CMD-K.
+
+The implementation is highly inspired by the [VSCode Command Abstractions](https://github.com/microsoft/vscode)

packages/common/infra/src/command/command.ts

@@ -0,0 +1,82 @@
+import type { ReactNode } from 'react';
+
+// TODO: need better way for composing different precondition strategies
+export enum PreconditionStrategy {
+  Always,
+  InPaperOrEdgeless,
+  InPaper,
+  InEdgeless,
+  InEdgelessPresentationMode,
+  NoSearchResult,
+  Never,
+}
+
+export type CommandCategory =
+  | 'editor:insert-object'
+  | 'editor:page'
+  | 'editor:edgeless'
+  | 'affine:recent'
+  | 'affine:pages'
+  | 'affine:edgeless'
+  | 'affine:collections'
+  | 'affine:navigation'
+  | 'affine:creation'
+  | 'affine:settings'
+  | 'affine:layout'
+  | 'affine:updates'
+  | 'affine:help'
+  | 'affine:general';
+
+export interface KeybindingOptions {
+  binding: string;
+  // some keybindings are already registered in blocksuite
+  // we can skip the registration of these keybindings __FOR NOW__
+  skipRegister?: boolean;
+}
+
+export interface AffineCommandOptions {
+  id: string;
+  // a set of predefined precondition strategies, but also allow user to customize their own
+  preconditionStrategy?: PreconditionStrategy | (() => boolean);
+  // main text on the left..
+  // make text a function so that we can do i18n and interpolation when we need to
+  label?: string | (() => string) | ReactNode | (() => ReactNode);
+  icon: React.ReactNode; // todo: need a mapping from string -> React element/SVG
+  category?: CommandCategory;
+  // we use https://github.com/jamiebuilds/tinykeys so that we can use the same keybinding definition
+  // for both mac and windows
+  // todo: render keybinding in command palette
+  keyBinding?: KeybindingOptions | string;
+  run: () => void | Promise<void>;
+}
+
+export interface AffineCommand {
+  readonly id: string;
+  readonly preconditionStrategy: PreconditionStrategy | (() => boolean);
+  readonly label?: ReactNode | string;
+  readonly icon?: React.ReactNode; // icon name
+  readonly category: CommandCategory;
+  readonly keyBinding?: KeybindingOptions;
+  run(): void | Promise<void>;
+}
+
+export function createAffineCommand(
+  options: AffineCommandOptions
+): AffineCommand {
+  return {
+    id: options.id,
+    run: options.run,
+    icon: options.icon,
+    preconditionStrategy:
+      options.preconditionStrategy ?? PreconditionStrategy.Always,
+    category: options.category ?? 'affine:general',
+    get label() {
+      const label = options.label;
+      return typeof label === 'function' ? label?.() : label;
+    },
+    keyBinding:
+      typeof options.keyBinding === 'string'
+        ? { binding: options.keyBinding }
+        : options.keyBinding,
+  };
+}

packages/common/infra/src/command/index.ts

@@ -0,0 +1,2 @@
+export * from './command';
+export * from './registry';

packages/common/infra/src/command/registry.ts

@@ -0,0 +1,64 @@
+// @ts-expect-error upstream type is wrong
+import { tinykeys } from 'tinykeys';
+
+import {
+  type AffineCommand,
+  type AffineCommandOptions,
+  createAffineCommand,
+} from './command';
+
+export const AffineCommandRegistry = new (class {
+  readonly commands: Map<string, AffineCommand> = new Map();
+
+  register(options: AffineCommandOptions) {
+    if (this.commands.has(options.id)) {
+      console.warn(`Command ${options.id} already registered.`);
+      return () => {};
+    }
+    const command = createAffineCommand(options);
+    this.commands.set(command.id, command);
+
+    let unsubKb: (() => void) | undefined;
+
+    if (
+      command.keyBinding &&
+      !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);
+          }
+        },
+      });
+    }
+
+    console.debug(`Registered command ${command.id}`);
+    return () => {
+      unsubKb?.();
+      this.commands.delete(command.id);
+      console.debug(`Unregistered command ${command.id}`);
+    };
+  }
+
+  get(id: string): AffineCommand | undefined {
+    if (!this.commands.has(id)) {
+      console.warn(`Command ${id} not registered.`);
+      return undefined;
+    }
+    return this.commands.get(id);
+  }
+
+  getAll(): AffineCommand[] {
+    return Array.from(this.commands.values());
+  }
+})();
+
+export function registerAffineCommand(options: AffineCommandOptions) {
+  return AffineCommandRegistry.register(options);
+}