feat(editor): selection as store extension (#9605)

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

@@ -3,7 +3,6 @@ import {
   CommandExtension,
   FlavourExtension,
 } from '@blocksuite/block-std';
-import { DatabaseSelectionExtension } from '@blocksuite/data-view';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
@@ -16,6 +15,5 @@ export const DatabaseBlockSpec: ExtensionType[] = [
   DatabaseBlockService,
   CommandExtension(commands),
   BlockViewExtension('affine:database', literal`affine-database`),
-  DatabaseSelectionExtension,
   DatabaseBlockAdapterExtensions,
 ].flat();

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

@@ -1,11 +1,12 @@
 import { ImageSelection } from '@blocksuite/affine-shared/selection';
-import type { BaseSelection, UIEventStateContext } from '@blocksuite/block-std';
+import type { UIEventStateContext } from '@blocksuite/block-std';
 import {
   BlockSelection,
   ShadowlessElement,
   TextSelection,
 } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/utils';
+import type { BaseSelection } from '@blocksuite/store';
 import { css, html, type PropertyValues } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';

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

@@ -1,4 +1,3 @@
-import { ImageSelectionExtension } from '@blocksuite/affine-shared/selection';
 import {
   BlockViewExtension,
   CommandExtension,
@@ -29,6 +28,5 @@ export const ImageBlockSpec: ExtensionType[] = [
     imageToolbar: literal`affine-image-toolbar-widget`,
   }),
   ImageDropOption,
-  ImageSelectionExtension,
   ImageBlockAdapterExtensions,
 ].flat();

blocksuite/affine/block-list/src/list-block.ts

@@ -14,13 +14,14 @@ import {
 } from '@blocksuite/affine-shared/consts';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import { getViewportElement } from '@blocksuite/affine-shared/utils';
-import type { BaseSelection, BlockComponent } from '@blocksuite/block-std';
+import type { BlockComponent } from '@blocksuite/block-std';
 import {
   BlockSelection,
   getInlineRangeProvider,
   TextSelection,
 } from '@blocksuite/block-std';
 import type { InlineRangeProvider } from '@blocksuite/inline';
+import type { BaseSelection } from '@blocksuite/store';
 import { effect } from '@preact/signals-core';
 import { html, nothing, type TemplateResult } from 'lit';
 import { query, state } from 'lit/decorators.js';

blocksuite/affine/block-note/src/note-service.ts

@@ -2,7 +2,6 @@ import { textConversionConfigs } from '@blocksuite/affine-components/rich-text';
 import { NoteBlockSchema } from '@blocksuite/affine-model';
 import { matchFlavours } from '@blocksuite/affine-shared/utils';
 import {
-  type BaseSelection,
   type BlockComponent,
   BlockSelection,
   BlockService,
@@ -11,7 +10,7 @@ import {
   type UIEventHandler,
   type UIEventStateContext,
 } from '@blocksuite/block-std';
-import type { BlockModel } from '@blocksuite/store';
+import type { BaseSelection, BlockModel } from '@blocksuite/store';
 
 import { moveBlockConfigs } from './move-block';
 import { quickActionConfig } from './quick-action';

blocksuite/affine/block-surface-ref/src/surface-ref-block.ts

@@ -26,7 +26,6 @@ import {
   SpecProvider,
 } from '@blocksuite/affine-shared/utils';
 import {
-  type BaseSelection,
   BlockComponent,
   BlockSelection,
   BlockServiceWatcher,
@@ -47,7 +46,7 @@ import {
   DisposableGroup,
   type SerializedXYWH,
 } from '@blocksuite/global/utils';
-import { type Store } from '@blocksuite/store';
+import type { BaseSelection, Store } from '@blocksuite/store';
 import { css, html, nothing, type TemplateResult } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';

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

@@ -1,4 +1,3 @@
-import { HighlightSelectionExtension } from '@blocksuite/affine-shared/selection';
 import {
   BlockViewExtension,
   CommandExtension,
@@ -23,7 +22,6 @@ const CommonSurfaceBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:surface'),
   SurfaceBlockService,
   CommandExtension(commands),
-  HighlightSelectionExtension,
   MindMapView,
   EdgelessCRUDExtension,
   EdgelessLegacySlotExtension,

blocksuite/affine/data-view/src/core/common/selection-schema.ts

@@ -1,4 +1,4 @@
-import { BaseSelection, SelectionExtension } from '@blocksuite/block-std';
+import { BaseSelection, SelectionExtension } from '@blocksuite/store';
 import { z } from 'zod';
 
 import type { DataViewSelection, GetDataViewSelection } from '../types.js';

blocksuite/affine/shared/src/selection/hightlight.ts

@@ -2,7 +2,7 @@ import {
   type ReferenceParams,
   ReferenceParamsSchema,
 } from '@blocksuite/affine-model';
-import { BaseSelection, SelectionExtension } from '@blocksuite/block-std';
+import { BaseSelection, SelectionExtension } from '@blocksuite/store';
 
 export class HighlightSelection extends BaseSelection {
   static override group = 'scene';

blocksuite/affine/shared/src/selection/image.ts

@@ -1,4 +1,4 @@
-import { BaseSelection, SelectionExtension } from '@blocksuite/block-std';
+import { BaseSelection, SelectionExtension } from '@blocksuite/store';
 import z from 'zod';
 
 const ImageSelectionSchema = z.object({

blocksuite/affine/widget-drag-handle/src/utils.ts

@@ -9,13 +9,9 @@ import {
   getClosestBlockComponentByPoint,
   matchFlavours,
 } from '@blocksuite/affine-shared/utils';
-import type {
-  BaseSelection,
-  BlockComponent,
-  EditorHost,
-} from '@blocksuite/block-std';
+import type { BlockComponent, EditorHost } from '@blocksuite/block-std';
 import { Point, Rect } from '@blocksuite/global/utils';
-import type { BlockModel } from '@blocksuite/store';
+import type { BaseSelection, BlockModel } from '@blocksuite/store';
 
 import {
   DRAG_HANDLE_CONTAINER_HEIGHT,

blocksuite/affine/widget-remote-selection/src/doc/doc-remote-selection.ts

@@ -1,12 +1,11 @@
 import { matchFlavours } from '@blocksuite/affine-shared/utils';
 import {
-  type BaseSelection,
   BlockSelection,
   TextSelection,
   WidgetComponent,
 } from '@blocksuite/block-std';
 import { throttle } from '@blocksuite/global/utils';
-import type { UserInfo } from '@blocksuite/store';
+import type { BaseSelection, UserInfo } from '@blocksuite/store';
 import { computed, effect } from '@preact/signals-core';
 import { css, html, nothing, type PropertyValues } from 'lit';
 import { state } from 'lit/decorators.js';

blocksuite/blocks/src/_specs/common.ts

@@ -27,13 +27,24 @@ import {
   RefNodeSlotsExtension,
   RichTextExtensions,
 } from '@blocksuite/affine-components/rich-text';
+import {
+  HighlightSelectionExtension,
+  ImageSelectionExtension,
+} from '@blocksuite/affine-shared/selection';
 import {
   DefaultOpenDocExtension,
   DocDisplayMetaService,
   EditPropsStore,
   FeatureFlagService,
   FontLoaderService,
 } from '@blocksuite/affine-shared/services';
+import {
+  BlockSelectionExtension,
+  CursorSelectionExtension,
+  SurfaceSelectionExtension,
+  TextSelectionExtension,
+} from '@blocksuite/block-std';
+import { DatabaseSelectionExtension } from '@blocksuite/data-view';
 import type { ExtensionType } from '@blocksuite/store';
 
 import { AdapterFactoryExtensions } from '../_common/adapters/extension.js';
@@ -77,4 +88,13 @@ export const EdgelessFirstPartyBlockSpecs: ExtensionType[] = [
   FontLoaderService,
 ].flat();
 
-export const StoreExtensions: ExtensionType[] = [FeatureFlagService];
+export const StoreExtensions: ExtensionType[] = [
+  FeatureFlagService,
+  BlockSelectionExtension,
+  TextSelectionExtension,
+  SurfaceSelectionExtension,
+  CursorSelectionExtension,
+  HighlightSelectionExtension,
+  ImageSelectionExtension,
+  DatabaseSelectionExtension,
+];

blocksuite/blocks/src/root-block/widgets/ai-panel/ai-panel.ts

@@ -7,9 +7,9 @@ import {
   getPageRootByElement,
   stopPropagation,
 } from '@blocksuite/affine-shared/utils';
-import type { BaseSelection } from '@blocksuite/block-std';
 import { WidgetComponent } from '@blocksuite/block-std';
 import { assertExists } from '@blocksuite/global/utils';
+import type { BaseSelection } from '@blocksuite/store';
 import {
   autoPlacement,
   autoUpdate,

blocksuite/blocks/src/root-block/widgets/format-bar/format-bar.ts

@@ -9,7 +9,6 @@ import {
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { matchFlavours } from '@blocksuite/affine-shared/utils';
 import {
-  type BaseSelection,
   type BlockComponent,
   BlockSelection,
   CursorSelection,
@@ -22,6 +21,7 @@ import {
   DisposableGroup,
   nextTick,
 } from '@blocksuite/global/utils';
+import type { BaseSelection } from '@blocksuite/store';
 import {
   autoUpdate,
   computePosition,

blocksuite/framework/block-std/src/extension/index.ts

@@ -4,7 +4,6 @@ export * from './config.js';
 export * from './flavour.js';
 export * from './keymap.js';
 export * from './lifecycle-watcher.js';
-export * from './selection.js';
 export * from './service.js';
 export * from './service-watcher.js';
 export * from './widget-view-map.js';

blocksuite/framework/block-std/src/identifier.ts

@@ -4,7 +4,6 @@ import type { Command } from './command/index.js';
 import type { EventOptions, UIEventHandler } from './event/index.js';
 import type { BlockService, LifeCycleWatcher } from './extension/index.js';
 import type { BlockStdScope } from './scope/index.js';
-import type { SelectionConstructor } from './selection/index.js';
 import type { BlockViewType, WidgetViewMapType } from './spec/type.js';
 
 export const BlockServiceIdentifier =
@@ -33,6 +32,3 @@ export const KeymapIdentifier = createIdentifier<{
   getter: (std: BlockStdScope) => Record<string, UIEventHandler>;
   options?: EventOptions;
 }>('Keymap');
-
-export const SelectionIdentifier =
-  createIdentifier<SelectionConstructor>('Selection');

blocksuite/framework/block-std/src/range/inline-range-provider.ts

@@ -84,18 +84,21 @@ export const getInlineRangeProvider: (
     }
   };
   const inlineRange$: InlineRangeProvider['inlineRange$'] = signal(null);
-  selectionManager.slots.changed.on(selections => {
-    const textSelection = selections.find(s => s.type === 'text') as
-      | TextSelection
-      | undefined;
-    const range = rangeManager.value;
-    if (!range || !textSelection) {
-      inlineRange$.value = null;
-      return;
-    }
-    const inlineRange = calculateInlineRange(range, textSelection);
-    inlineRange$.value = inlineRange;
-  });
+
+  editorHost.disposables.add(
+    selectionManager.slots.changed.on(selections => {
+      const textSelection = selections.find(s => s.type === 'text') as
+        | TextSelection
+        | undefined;
+      const range = rangeManager.value;
+      if (!range || !textSelection) {
+        inlineRange$.value = null;
+        return;
+      }
+      const inlineRange = calculateInlineRange(range, textSelection);
+      inlineRange$.value = inlineRange;
+    })
+  );
 
   return {
     setInlineRange,

blocksuite/framework/block-std/src/range/range-binding.ts

@@ -1,7 +1,7 @@
 import { throttle } from '@blocksuite/global/utils';
-import type { BlockModel } from '@blocksuite/store';
+import type { BaseSelection, BlockModel } from '@blocksuite/store';
 
-import { type BaseSelection, TextSelection } from '../selection/index.js';
+import { TextSelection } from '../selection/index.js';
 import type { BlockComponent } from '../view/element/block-component.js';
 import { BLOCK_ID_ATTR } from '../view/index.js';
 import { RANGE_SYNC_EXCLUDE_ATTR } from './consts.js';
@@ -247,6 +247,9 @@ export class RangeBinding {
   };
 
   private readonly _onStdSelectionChanged = (selections: BaseSelection[]) => {
+    const closestHost = document.activeElement?.closest('editor-host');
+    if (closestHost && closestHost !== this.host) return;
+
     const text =
       selections.find((selection): selection is TextSelection =>
         selection.is(TextSelection)

blocksuite/framework/block-std/src/scope/block-std-scope.ts

@@ -5,6 +5,7 @@ import {
   Job,
   type JobMiddleware,
   type Store,
+  StoreSelectionExtension,
 } from '@blocksuite/store';
 
 import { Clipboard } from '../clipboard/index.js';
@@ -23,13 +24,6 @@ import {
   StdIdentifier,
 } from '../identifier.js';
 import { RangeManager } from '../range/index.js';
-import {
-  BlockSelectionExtension,
-  CursorSelectionExtension,
-  SelectionManager,
-  SurfaceSelectionExtension,
-  TextSelectionExtension,
-} from '../selection/index.js';
 import { ServiceManager } from '../service/index.js';
 import { EditorHost } from '../view/element/index.js';
 import { ViewStore } from '../view/view-store.js';
@@ -43,15 +37,10 @@ const internalExtensions = [
   ServiceManager,
   CommandManager,
   UIEventDispatcher,
-  SelectionManager,
   RangeManager,
   ViewStore,
   Clipboard,
   GfxController,
-  BlockSelectionExtension,
-  TextSelectionExtension,
-  SurfaceSelectionExtension,
-  CursorSelectionExtension,
   GfxSelectionManager,
   SurfaceMiddlewareExtension,
   ViewManager,
@@ -107,7 +96,7 @@ export class BlockStdScope {
   }
 
   get selection() {
-    return this.get(SelectionManager);
+    return this.get(StoreSelectionExtension);
   }
 
   get view() {

blocksuite/framework/block-std/src/selection/index.ts

@@ -1,3 +1 @@
-export * from './base.js';
-export * from './manager.js';
 export * from './variants/index.js';

blocksuite/framework/block-std/src/selection/variants/block.ts

@@ -1,8 +1,6 @@
+import { BaseSelection, SelectionExtension } from '@blocksuite/store';
 import z from 'zod';
 
-import { SelectionExtension } from '../../extension/selection.js';
-import { BaseSelection } from '../base.js';
-
 const BlockSelectionSchema = z.object({
   blockId: z.string(),
 });

blocksuite/framework/block-std/src/selection/variants/cursor.ts

@@ -1,8 +1,6 @@
+import { BaseSelection, SelectionExtension } from '@blocksuite/store';
 import z from 'zod';
 
-import { SelectionExtension } from '../../extension/selection.js';
-import { BaseSelection } from '../base.js';
-
 const CursorSelectionSchema = z.object({
   x: z.number(),
   y: z.number(),

blocksuite/framework/block-std/src/selection/variants/surface.ts

@@ -1,8 +1,6 @@
+import { BaseSelection, SelectionExtension } from '@blocksuite/store';
 import z from 'zod';
 
-import { SelectionExtension } from '../../extension/selection.js';
-import { BaseSelection } from '../base.js';
-
 const SurfaceSelectionSchema = z.object({
   blockId: z.string(),
   elements: z.array(z.string()),