refactor(editor): remote selection widget (#9408)

blocksuite/affine/widget-remote-selection/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@blocksuite/affine-widget-remote-selection",
+  "description": "Affine remote selection widget.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "test:unit": "nx vite:test --run --passWithNoTests",
+    "test:unit:coverage": "nx vite:test --run --coverage",
+    "test:e2e": "playwright test"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.1",
+    "lit": "^3.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.19.0"
+}

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

@@ -11,9 +11,9 @@ import { computed } from '@preact/signals-core';
 import { css, html, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { RemoteColorManager } from '../../../root-block/remote-color-manager/remote-color-manager.js';
+import { RemoteColorManager } from '../manager/remote-color-manager';
-import type { DocRemoteSelectionConfig } from './config.js';
+import type { DocRemoteSelectionConfig } from './config';
-import { cursorStyle, selectionStyle } from './utils.js';
+import { cursorStyle, selectionStyle } from './utils';
 
 export interface SelectionRect {
   width: number;
@@ -56,14 +56,12 @@ export class AffineDocRemoteSelectionWidget extends WidgetComponent {
   });
 
   private get _config(): DocRemoteSelectionConfig {
-    const config =
-      this.std.getConfig('affine:page')?.docRemoteSelectionWidget ?? {};
-
     return {
       blockSelectionBackgroundTransparent: block => {
         return (
           matchFlavours(block, [
             'affine:code',
+            // @ts-expect-error FIXME: fix after database model moved to affine-model
             'affine:database',
             'affine:image',
             'affine:attachment',
@@ -72,7 +70,6 @@ export class AffineDocRemoteSelectionWidget extends WidgetComponent {
           ]) || /affine:embed-*/.test(block.flavour)
         );
       },
-      ...config,
     };
   }
 

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

@@ -1,2 +1 @@
-export * from './config.js';
 export * from './doc-remote-selection.js';

blocksuite/affine/widget-remote-selection/src/edgeless/index.ts

@@ -15,7 +15,7 @@ import { state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { RemoteColorManager } from '../../../root-block/remote-color-manager/remote-color-manager.js';
+import { RemoteColorManager } from '../manager/remote-color-manager';
 
 export const AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET =
   'affine-edgeless-remote-selection-widget';

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

@@ -0,0 +1,17 @@
+import { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from './doc';
+import { AffineDocRemoteSelectionWidget } from './doc/doc-remote-selection';
+import {
+  AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
+  EdgelessRemoteSelectionWidget,
+} from './edgeless';
+
+export function effects() {
+  customElements.define(
+    AFFINE_DOC_REMOTE_SELECTION_WIDGET,
+    AffineDocRemoteSelectionWidget
+  );
+  customElements.define(
+    AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
+    EdgelessRemoteSelectionWidget
+  );
+}

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

@@ -0,0 +1,6 @@
+import type * as CommandsType from '@blocksuite/affine-shared/commands';
+
+declare type _GLOBAL_ = typeof CommandsType;
+
+export * from './doc';
+export * from './edgeless';

blocksuite/affine/widget-remote-selection/src/manager/remote-color-manager.ts

@@ -1,7 +1,7 @@
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
 import type { BlockStdScope } from '@blocksuite/block-std';
 
-import { multiPlayersColor } from './color-picker.js';
+import { multiPlayersColor } from './color-picker';
 
 export class RemoteColorManager {
   private get awarenessStore() {

blocksuite/affine/widget-remote-selection/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./dist/",
+    "noEmit": false
+  },
+  "include": ["./src"],
+  "references": [
+    {
+      "path": "../../framework/global"
+    },
+    {
+      "path": "../../framework/block-std"
+    },
+    {
+      "path": "../model"
+    },
+    {
+      "path": "../shared"
+    }
+  ]
+}

blocksuite/blocks/package.json

@@ -30,6 +30,7 @@
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/data-view": "workspace:*",

blocksuite/blocks/src/effects.ts

@@ -26,6 +26,7 @@ import { SmoothCorner } from '@blocksuite/affine-components/smooth-corner';
 import { effects as componentToggleButtonEffects } from '@blocksuite/affine-components/toggle-button';
 import { ToggleSwitch } from '@blocksuite/affine-components/toggle-switch';
 import { effects as componentToolbarEffects } from '@blocksuite/affine-components/toolbar';
+import { effects as widgetRemoteSelectionEffects } from '@blocksuite/affine-widget-remote-selection/effects';
 import { effects as widgetScrollAnchoringEffects } from '@blocksuite/affine-widget-scroll-anchoring/effects';
 import type { BlockComponent } from '@blocksuite/block-std';
 import { effects as stdEffects } from '@blocksuite/block-std/effects';
@@ -147,7 +148,6 @@ import {
   AFFINE_EMBED_CARD_TOOLBAR_WIDGET,
   AFFINE_FORMAT_BAR_WIDGET,
   AffineAIPanelWidget,
-  AffineDocRemoteSelectionWidget,
   AffineDragHandleWidget,
   AffineEdgelessZoomToolbarWidget,
   AffineFormatBarWidget,
@@ -159,7 +159,6 @@ import {
   AffineSurfaceRefToolbar,
   EdgelessCopilotToolbarEntry,
   EdgelessCopilotWidget,
-  EdgelessRemoteSelectionWidget,
   EdgelessRootBlockComponent,
   EmbedCardToolbar,
   FramePreview,
@@ -177,7 +176,6 @@ import {
   AIPanelGenerating,
   AIPanelInput,
 } from './root-block/widgets/ai-panel/components/index.js';
-import { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from './root-block/widgets/doc-remote-selection/index.js';
 import { DragPreview } from './root-block/widgets/drag-handle/components/drag-preview.js';
 import { DropIndicator } from './root-block/widgets/drag-handle/components/drop-indicator.js';
 import { AFFINE_DRAG_HANDLE_WIDGET } from './root-block/widgets/drag-handle/consts.js';
@@ -186,7 +184,6 @@ import {
   EdgelessAutoConnectWidget,
 } from './root-block/widgets/edgeless-auto-connect/edgeless-auto-connect.js';
 import { EdgelessCopilotPanel } from './root-block/widgets/edgeless-copilot-panel/index.js';
-import { AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET } from './root-block/widgets/edgeless-remote-selection/index.js';
 import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from './root-block/widgets/edgeless-zoom-toolbar/index.js';
 import { ZoomBarToggleButton } from './root-block/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.js';
 import { EdgelessZoomToolbar } from './root-block/widgets/edgeless-zoom-toolbar/zoom-toolbar.js';
@@ -261,7 +258,7 @@ export function effects() {
   widgetLinkedDocEffects();
   widgetFrameTitleEffects();
   widgetEdgelessElementToolbarEffects();
-
+  widgetRemoteSelectionEffects();
   dataViewEffects();
 
   customElements.define('affine-database-title', DatabaseTitle);
@@ -461,10 +458,6 @@ export function effects() {
   customElements.define(AFFINE_AI_PANEL_WIDGET, AffineAIPanelWidget);
   customElements.define(AFFINE_EMBED_CARD_TOOLBAR_WIDGET, EmbedCardToolbar);
   customElements.define(AFFINE_INNER_MODAL_WIDGET, AffineInnerModalWidget);
-  customElements.define(
-    AFFINE_DOC_REMOTE_SELECTION_WIDGET,
-    AffineDocRemoteSelectionWidget
-  );
   customElements.define(AFFINE_MODAL_WIDGET, AffineModalWidget);
   customElements.define(
     AFFINE_PAGE_DRAGGING_AREA_WIDGET,
@@ -475,10 +468,6 @@ export function effects() {
 
   customElements.define(AFFINE_IMAGE_TOOLBAR_WIDGET, AffineImageToolbarWidget);
   customElements.define(AFFINE_SLASH_MENU_WIDGET, AffineSlashMenuWidget);
-  customElements.define(
-    AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
-    EdgelessRemoteSelectionWidget
-  );
   customElements.define(
     AFFINE_VIEWPORT_OVERLAY_WIDGET,
     AffineViewportOverlayWidget

blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts

@@ -6,6 +6,10 @@ import {
   EmbedOptionService,
   ThemeService,
 } from '@blocksuite/affine-shared/services';
+import {
+  AFFINE_DOC_REMOTE_SELECTION_WIDGET,
+  AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
+} from '@blocksuite/affine-widget-remote-selection';
 import { AFFINE_SCROLL_ANCHORING_WIDGET } from '@blocksuite/affine-widget-scroll-anchoring';
 import {
   BlockServiceWatcher,
@@ -21,10 +25,8 @@ import { literal, unsafeStatic } from 'lit/static-html.js';
 import { ExportManagerExtension } from '../../_common/export-manager/export-manager.js';
 import { RootBlockAdapterExtensions } from '../adapters/extension.js';
 import { commands } from '../commands/index.js';
-import { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from '../widgets/doc-remote-selection/doc-remote-selection.js';
 import { AFFINE_DRAG_HANDLE_WIDGET } from '../widgets/drag-handle/consts.js';
 import { AFFINE_EDGELESS_AUTO_CONNECT_WIDGET } from '../widgets/edgeless-auto-connect/edgeless-auto-connect.js';
-import { AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET } from '../widgets/edgeless-remote-selection/index.js';
 import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from '../widgets/edgeless-zoom-toolbar/index.js';
 import { EDGELESS_ELEMENT_TOOLBAR_WIDGET } from '../widgets/element-toolbar/index.js';
 import { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from '../widgets/embed-card-toolbar/embed-card-toolbar.js';

blocksuite/blocks/src/root-block/page/page-root-spec.ts

@@ -6,6 +6,7 @@ import {
   EmbedOptionService,
   ThemeService,
 } from '@blocksuite/affine-shared/services';
+import { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from '@blocksuite/affine-widget-remote-selection';
 import { AFFINE_SCROLL_ANCHORING_WIDGET } from '@blocksuite/affine-widget-scroll-anchoring';
 import {
   BlockViewExtension,
@@ -19,7 +20,6 @@ import { literal, unsafeStatic } from 'lit/static-html.js';
 import { ExportManagerExtension } from '../../_common/export-manager/export-manager.js';
 import { RootBlockAdapterExtensions } from '../adapters/extension.js';
 import { commands } from '../commands/index.js';
-import { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from '../widgets/doc-remote-selection/doc-remote-selection.js';
 import { AFFINE_DRAG_HANDLE_WIDGET } from '../widgets/drag-handle/consts.js';
 import { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from '../widgets/embed-card-toolbar/embed-card-toolbar.js';
 import { AFFINE_FORMAT_BAR_WIDGET } from '../widgets/format-bar/format-bar.js';

blocksuite/blocks/src/root-block/root-config.ts

@@ -1,13 +1,11 @@
 import type { ToolbarMoreMenuConfig } from '@blocksuite/affine-components/toolbar';
 
 import type { DatabaseOptionsConfig } from '../database-block/config.js';
-import type { DocRemoteSelectionConfig } from './widgets/doc-remote-selection/config.js';
 import type { KeyboardToolbarConfig } from './widgets/keyboard-toolbar/config.js';
 import type { LinkedWidgetConfig } from './widgets/linked-doc/index.js';
 
 export interface RootBlockConfig {
   linkedWidget?: Partial<LinkedWidgetConfig>;
-  docRemoteSelectionWidget?: Partial<DocRemoteSelectionConfig>;
   toolbarMoreMenu?: Partial<ToolbarMoreMenuConfig>;
   databaseOptions?: Partial<DatabaseOptionsConfig>;
   keyboardToolbar?: Partial<KeyboardToolbarConfig>;

blocksuite/blocks/src/root-block/types.ts

@@ -1,8 +1,11 @@
+import type {
+  AFFINE_DOC_REMOTE_SELECTION_WIDGET,
+  AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
+} from '@blocksuite/affine-widget-remote-selection';
+
 import type { EdgelessRootBlockComponent } from './edgeless/edgeless-root-block.js';
 import type { PageRootBlockComponent } from './page/page-root-block.js';
-import type { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from './widgets/doc-remote-selection/index.js';
 import type { AFFINE_DRAG_HANDLE_WIDGET } from './widgets/drag-handle/consts.js';
-import type { AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET } from './widgets/edgeless-remote-selection/index.js';
 import type { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from './widgets/edgeless-zoom-toolbar/index.js';
 import type { EDGELESS_ELEMENT_TOOLBAR_WIDGET } from './widgets/element-toolbar/index.js';
 import type { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from './widgets/embed-card-toolbar/embed-card-toolbar.js';

blocksuite/blocks/src/root-block/widgets/index.ts

@@ -6,14 +6,12 @@ export {
   type AffineAIPanelState,
   type AffineAIPanelWidgetConfig,
 } from './ai-panel/type.js';
-export { AffineDocRemoteSelectionWidget } from './doc-remote-selection/doc-remote-selection.js';
 export { AffineDragHandleWidget } from './drag-handle/drag-handle.js';
 export {
   AFFINE_EDGELESS_COPILOT_WIDGET,
   EdgelessCopilotWidget,
 } from './edgeless-copilot/index.js';
 export { EdgelessCopilotToolbarEntry } from './edgeless-copilot-panel/toolbar-entry.js';
-export { EdgelessRemoteSelectionWidget } from './edgeless-remote-selection/index.js';
 export { AffineEdgelessZoomToolbarWidget } from './edgeless-zoom-toolbar/index.js';
 export {
   EDGELESS_ELEMENT_TOOLBAR_WIDGET,
@@ -55,3 +53,7 @@ export {
   type AffineSlashSubMenu,
 } from './slash-menu/index.js';
 export { AffineSurfaceRefToolbar } from './surface-ref-toolbar/surface-ref-toolbar.js';
+export {
+  AffineDocRemoteSelectionWidget,
+  EdgelessRemoteSelectionWidget,
+} from '@blocksuite/affine-widget-remote-selection';

blocksuite/blocks/tsconfig.json

@@ -72,6 +72,9 @@
     },
     {
       "path": "../affine/widget-scroll-anchoring"
+    },
+    {
+      "path": "../affine/widget-remote-selection"
     }
   ]
 }

tools/utils/src/workspace.gen.ts

@@ -234,6 +234,16 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/widget-remote-selection',
+    name: '@blocksuite/affine-widget-remote-selection',
+    workspaceDependencies: [
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/block-std',
+      'blocksuite/framework/global',
+    ],
+  },
   {
     location: 'blocksuite/affine/widget-scroll-anchoring',
     name: '@blocksuite/affine-widget-scroll-anchoring',
@@ -264,6 +274,7 @@ export const PackageList = [
       'blocksuite/affine/components',
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
+      'blocksuite/affine/widget-remote-selection',
       'blocksuite/affine/widget-scroll-anchoring',
       'blocksuite/framework/block-std',
       'blocksuite/affine/data-view',
@@ -613,6 +624,7 @@ export type PackageName =
   | '@blocksuite/data-view'
   | '@blocksuite/affine-model'
   | '@blocksuite/affine-shared'
+  | '@blocksuite/affine-widget-remote-selection'
   | '@blocksuite/affine-widget-scroll-anchoring'
   | '@blocksuite/blocks'
   | '@blocksuite/block-std'

tsconfig.project.json

@@ -24,6 +24,7 @@
     { "path": "./blocksuite/affine/data-view" },
     { "path": "./blocksuite/affine/model" },
     { "path": "./blocksuite/affine/shared" },
+    { "path": "./blocksuite/affine/widget-remote-selection" },
     { "path": "./blocksuite/affine/widget-scroll-anchoring" },
     { "path": "./blocksuite/blocks" },
     { "path": "./blocksuite/framework/block-std" },

yarn.lock

@@ -3613,6 +3613,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-widget-remote-selection@workspace:*, @blocksuite/affine-widget-remote-selection@workspace:blocksuite/affine/widget-remote-selection":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-widget-remote-selection@workspace:blocksuite/affine/widget-remote-selection"
+  dependencies:
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/block-std": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.1"
+    lit: "npm:^3.2.0"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-widget-scroll-anchoring@workspace:*, @blocksuite/affine-widget-scroll-anchoring@workspace:blocksuite/affine/widget-scroll-anchoring":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-widget-scroll-anchoring@workspace:blocksuite/affine/widget-scroll-anchoring"
@@ -3682,6 +3696,7 @@ __metadata:
     "@blocksuite/affine-components": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/affine-widget-remote-selection": "workspace:*"
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"
     "@blocksuite/block-std": "workspace:*"
     "@blocksuite/data-view": "workspace:*"