refactor(editor): remove dependency of command global types (#9903)

Closes: [BS-2216](https://linear.app/affine-design/issue/BS-2216/remove-global-types-in-command)

blocksuite/affine/block-image/src/commands/index.ts

@@ -1,9 +1 @@
-import { getImageSelectionsCommand } from '@blocksuite/affine-shared/commands';
-import type { BlockCommands } from '@blocksuite/block-std';
-
-import { insertImagesCommand } from './insert-images.js';
-
-export const commands: BlockCommands = {
-  getImageSelections: getImageSelectionsCommand,
-  insertImages: insertImagesCommand,
-};
+export { insertImagesCommand } from './insert-images.js';

blocksuite/affine/block-image/src/commands/insert-images.ts

@@ -1,12 +1,18 @@
 import { getImageFilesFromLocal } from '@blocksuite/affine-shared/utils';
 import type { Command } from '@blocksuite/block-std';
+import type { BlockModel } from '@blocksuite/store';
 
 import { addSiblingImageBlock } from '../utils.js';
 
 export const insertImagesCommand: Command<
-  'selectedModels',
-  'insertedImageIds',
-  { removeEmptyLine?: boolean; place?: 'after' | 'before' }
+  {
+    selectedModels?: BlockModel[];
+    removeEmptyLine?: boolean;
+    place?: 'after' | 'before';
+  },
+  {
+    insertedImageIds: Promise<string[]>;
+  }
 > = (ctx, next) => {
   const { selectedModels, place, removeEmptyLine, std } = ctx;
   if (!selectedModels) return;

blocksuite/affine/block-image/src/components/page-image-block.ts

@@ -1,5 +1,13 @@
+import { focusBlockEnd, focusBlockStart } from '@blocksuite/affine-block-note';
+import {
+  getNextBlockCommand,
+  getPrevBlockCommand,
+} from '@blocksuite/affine-shared/commands';
 import { ImageSelection } from '@blocksuite/affine-shared/selection';
-import type { UIEventStateContext } from '@blocksuite/block-std';
+import type {
+  BlockComponent,
+  UIEventStateContext,
+} from '@blocksuite/block-std';
 import {
   BlockSelection,
   ShadowlessElement,
@@ -136,15 +144,14 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
 
         std.command
           .chain()
-          .getNextBlock({ path: this.block.blockId })
-          .inline((ctx, next) => {
+          .pipe(getNextBlockCommand, { path: this.block.blockId })
+          .pipe<{ focusBlock: BlockComponent }>((ctx, next) => {
             const { nextBlock } = ctx;
             if (!nextBlock) return;
 
             return next({ focusBlock: nextBlock });
           })
-          // @ts-expect-error FIXME(command): BS-2216
-          .focusBlockStart()
+          .pipe(focusBlockStart)
           .run();
         return true;
       },
@@ -162,15 +169,14 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
 
         std.command
           .chain()
-          .getPrevBlock({ path: this.block.blockId })
-          .inline((ctx, next) => {
+          .pipe(getPrevBlockCommand, { path: this.block.blockId })
+          .pipe<{ focusBlock: BlockComponent }>((ctx, next) => {
             const { prevBlock } = ctx;
             if (!prevBlock) return;
 
             return next({ focusBlock: prevBlock });
           })
-          // @ts-expect-error FIXME(command): BS-2216
-          .focusBlockEnd()
+          .pipe(focusBlockEnd)
           .run();
         return true;
       },

blocksuite/affine/block-image/src/effects.ts

@@ -1,6 +1,3 @@
-import type { getImageSelectionsCommand } from '@blocksuite/affine-shared/commands';
-
-import type { insertImagesCommand } from './commands/insert-images.js';
 import { ImageBlockFallbackCard } from './components/image-block-fallback.js';
 import { ImageBlockPageComponent } from './components/page-image-block.js';
 import { ImageBlockComponent } from './image-block.js';
@@ -16,21 +13,6 @@ export function effects() {
 
 declare global {
   namespace BlockSuite {
-    interface CommandContext {
-      insertedImageIds?: Promise<string[]>;
-    }
-
-    interface Commands {
-      getImageSelections: typeof getImageSelectionsCommand;
-      /**
-       * open file dialog to insert images before or after the current block selection
-       * @param removeEmptyLine remove the current block if it is empty
-       * @param place where to insert the images
-       * @returns a promise that resolves to the inserted image ids
-       */
-      insertImages: typeof insertImagesCommand;
-    }
-
     interface BlockServices {
       'affine:image': ImageBlockService;
     }

blocksuite/affine/block-image/src/image-spec.ts

@@ -1,6 +1,5 @@
 import {
   BlockViewExtension,
-  CommandExtension,
   FlavourExtension,
   WidgetViewMapExtension,
 } from '@blocksuite/block-std';
@@ -8,13 +7,11 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { ImageBlockAdapterExtensions } from './adapters/extension.js';
-import { commands } from './commands/index.js';
 import { ImageBlockService, ImageDropOption } from './image-service.js';
 
 export const ImageBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:image'),
   ImageBlockService,
-  CommandExtension(commands),
   BlockViewExtension('affine:image', model => {
     const parent = model.doc.getParent(model.id);
 

blocksuite/affine/block-image/src/index.ts

@@ -3,6 +3,7 @@ import type * as SurfaceEffects from '@blocksuite/affine-block-surface/effects';
 declare type _GLOBAL_ = typeof SurfaceEffects;
 
 export * from './adapters';
+export * from './commands';
 export * from './image-block';
 export * from './image-edgeless-block';
 export * from './image-service';

blocksuite/affine/block-image/src/utils.ts

@@ -1,3 +1,4 @@
+import { autoResizeElementsCommand } from '@blocksuite/affine-block-surface';
 import { toast } from '@blocksuite/affine-components/toast';
 import type {
   AttachmentBlockProps,
@@ -516,7 +517,7 @@ export async function addImages(
     editing: false,
   });
   if (isMultipleFiles) {
-    std.command.exec('autoResizeElements');
+    std.command.exec(autoResizeElementsCommand);
   }
   return blockIds;
 }