feat(blocks): add scroll anchoring widget

.github/snapshot-changeset.md

@@ -1,15 +1,19 @@
 ---
-'@blocksuite/global': patch
+'@blocksuite/affine-block-embed': patch
+'@blocksuite/affine-block-list': patch
+'@blocksuite/affine-block-paragraph': patch
+'@blocksuite/affine-block-surface': patch
+'@blocksuite/affine-components': patch
+'@blocksuite/affine-data-view': patch
+'@blocksuite/affine-model': patch
+'@blocksuite/affine-shared': patch
+'@blocksuite/affine-widget-scroll-anchoring': patch
+'@blocksuite/blocks': patch
 '@blocksuite/block-std': patch
-'@blocksuite/store': patch
+'@blocksuite/global': patch
 '@blocksuite/inline': patch
+'@blocksuite/store': patch
 '@blocksuite/sync': patch
-'@blocksuite/affine-shared': patch
-'@blocksuite/affine-model': patch
-'@blocksuite/affine-components': patch
-'@blocksuite/affine-block-paragraph': patch
-'@blocksuite/affine-block-list': patch
-'@blocksuite/blocks': patch
 '@blocksuite/presets': patch
 ---
 

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

@@ -0,0 +1,59 @@
+import {
+  type ReferenceParams,
+  ReferenceParamsSchema,
+} from '@blocksuite/affine-model';
+import { BaseSelection } from '@blocksuite/block-std';
+
+export class HighlightSelection extends BaseSelection {
+  static override group = 'scene';
+
+  static override type = 'highlight';
+
+  readonly blockIds: string[] = [];
+
+  readonly elementIds: string[] = [];
+
+  readonly mode: 'page' | 'edgeless' = 'page';
+
+  constructor({ mode, blockIds, elementIds }: ReferenceParams) {
+    super({ blockId: '[scene-highlight]' });
+
+    this.mode = mode ?? 'page';
+    this.blockIds = blockIds ?? [];
+    this.elementIds = elementIds ?? [];
+  }
+
+  static override fromJSON(json: Record<string, unknown>): HighlightSelection {
+    const result = ReferenceParamsSchema.parse(json);
+    return new HighlightSelection(result);
+  }
+
+  override equals(other: HighlightSelection): boolean {
+    return (
+      this.mode === other.mode &&
+      this.blockId === other.blockId &&
+      this.blockIds.length === other.blockIds.length &&
+      this.elementIds.length === other.elementIds.length &&
+      this.blockIds.every((id, n) => id === other.blockIds[n]) &&
+      this.elementIds.every((id, n) => id === other.elementIds[n])
+    );
+  }
+
+  override toJSON(): Record<string, unknown> {
+    return {
+      type: 'highlight',
+      mode: this.mode,
+      blockId: this.blockId,
+      blockIds: this.blockIds,
+      elementIds: this.elementIds,
+    };
+  }
+}
+
+declare global {
+  namespace BlockSuite {
+    interface Selection {
+      highlight: typeof HighlightSelection;
+    }
+  }
+}

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

@@ -11,10 +11,8 @@ export class ImageSelection extends BaseSelection {
   static override type = 'image';
 
   static override fromJSON(json: Record<string, unknown>): ImageSelection {
-    ImageSelectionSchema.parse(json);
-    return new ImageSelection({
-      blockId: json.blockId as string,
-    });
+    const result = ImageSelectionSchema.parse(json);
+    return new ImageSelection(result);
   }
 
   override equals(other: BaseSelection): boolean {

packages/affine/shared/src/selection/index.ts

@@ -1 +1,2 @@
+export { HighlightSelection } from './hightlight.js';
 export { ImageSelection } from './image.js';

packages/affine/widget-scroll-anchoring/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@blocksuite/affine-widget-scroll-anchoring",
+  "version": "0.17.10",
+  "description": "Affine scroll anchroing widget.",
+  "type": "module",
+  "repository": "toeverything/blocksuite",
+  "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": "MPL-2.0",
+  "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.0.8",
+    "lit": "^3.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      },
+      "./effects": {
+        "import": "./dist/effects.js",
+        "types": "./dist/effects.d.ts"
+      }
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ]
+}

packages/affine/widget-scroll-anchoring/src/effects.ts

@@ -0,0 +1,17 @@
+import {
+  AFFINE_SCROLL_ANCHORING_WIDGET,
+  AffineScrollAnchoringWidget,
+} from './scroll-anchoring.js';
+
+export function effects() {
+  customElements.define(
+    AFFINE_SCROLL_ANCHORING_WIDGET,
+    AffineScrollAnchoringWidget
+  );
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [AFFINE_SCROLL_ANCHORING_WIDGET]: AffineScrollAnchoringWidget;
+  }
+}

packages/affine/widget-scroll-anchoring/src/index.ts

@@ -0,0 +1 @@
+export * from './scroll-anchoring.js';