Merge branch 'master' into 0614-support-DnD-images-from-outside-into-…

…editor

* master: (62 commits)
  fix: image resize after switch page mode (toeverything#3238)
  feat(edgeless): add index for other notes when selecting a note (toeverything#3235)
  feat: support import notion database (toeverything#3170)
  style: adjust checkbox style (toeverything#3240)
  fix: the incorrect import path (toeverything#3234)
  fix: console error exporting PNG/PDF in playground (toeverything#3205)
  feat(blocks): add page block service (toeverything#3232)
  refactor(edgeless): rename children container (toeverything#3231)
  fix: edgeless text error when importing from snapshot (toeverything#3229)
  refactor(blocks): split code (toeverything#3228)
  fix(store): handle resource load error when importing snapshot (toeverything#3227)
  feat: use human-readable name in code block (toeverything#3225)
  fix(store): snapshot import and export (toeverything#3223)
  fix(phasor): curveFitting should be enabled on ellipse (toeverything#3224)
  feat: support for adding tags to pages (toeverything#3203)
  fix(store): broadcast channel not defined (toeverything#3222)
  fix(store): bring back remove page for subdoc (toeverything#3221)
  fix(phasor): bound should be calculated using expand (toeverything#3220)
  refactor: migrate image resize manager to block level (toeverything#3218)
  feat(edgeless): support select element below the hollow shape (toeverything#3212)
  ...

.commitlintrc.json

@@ -26,7 +26,9 @@
         "slash-menu",
         "drag-handle",
         "format-bar",
-        "connector"
+        "connector",
+        "lit",
+        "block-std"
       ]
     ]
   }

.eslintrc.cjs

@@ -11,7 +11,7 @@ const allPackages = [
   'virgo',
   'connector',
   'lit',
-  'hosts',
+  'block-std',
 ];
 
 const createPattern = packageName => [
@@ -36,6 +36,15 @@ const createPattern = packageName => [
     message: 'Do not import package itself',
     allowTypeImports: false,
   },
+  ...(packageName === 'blocks'
+    ? [
+        {
+          group: ['**/std.js'],
+          message: 'Do not import from std',
+          allowTypeImports: false,
+        },
+      ]
+    : []),
 ];
 
 module.exports = {
@@ -61,7 +70,7 @@ module.exports = {
     'packages/playground/dist/assets/*',
     'packages/virgo/dist/*',
     'packages/connector/dist/*',
-    'packages/hosts/dist/*',
+    'packages/block-std/dist/*',
   ],
   overrides: [
     {

.github/CLA.md

@@ -78,3 +78,4 @@ Example:
 - Till, @tillkwl, 2023/06/04
 - Yuexun Jiang, @ahonn, 2023/06/06
 - Hyden Liu, @HydenLiu, 2023/06/11
+- zhengjitf, @zhengjitf, 2023/06/17

.github/workflows/lint.yml

@@ -53,6 +53,9 @@ jobs:
         # Refs: https://eslint.org/docs/latest/user-guide/command-line-interface#--cache-location
         run: pnpm lint
 
+      - name: Run lit-lint
+        run: pnpm lit-lint
+
       - name: Run prettier
         run: npx prettier --cache --check packages tests
 

package.json

@@ -20,13 +20,11 @@
   },
   "packageManager": "pnpm@8.6.1",
   "scripts": {
-    "serve": "pnpm --filter @blocksuite/store serve",
-    "preview": "run-p serve preview:playground",
-    "preview:playground": "pnpm --filter @blocksuite/playground preview",
-    "dev": "run-p serve dev:playground",
-    "dev:playground": "pnpm --filter @blocksuite/playground dev",
+    "preview": "pnpm --filter @blocksuite/playground preview",
+    "dev": "pnpm --filter @blocksuite/playground dev",
     "dev:docs": "pnpm --filter @blocksuite/docs dev",
     "lint": "eslint --cache --cache-location=node_modules/.cache/.eslintcache/ ./ --max-warnings=0",
+    "lit-lint": "pnpm lit-analyzer --strict=false --rules.no-incompatible-property-type=error --rules.no-incompatible-type-binding=off --rules.no-invalid-css=off --rules.no-invalid-tag-name=off \"packages/**/*.ts\"",
     "test": "playwright test",
     "coverage:report": "nyc report -t .nyc_output --report-dir .coverage --reporter=html",
     "circular": "madge --circular ./packages/*/dist/index.js",
@@ -78,12 +76,13 @@
     "happy-dom": "^9.20.3",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.0",
+    "lit-analyzer": "2.0.0-pre.3",
     "madge": "^6.0.0",
     "micromatch": "^4.0.5",
-    "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
     "prettier": "^2.8.5",
     "pretty-format": "^29.5.0",
+    "ts-lit-plugin": "^1.2.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.4",
     "vite": "^4.3.3",

packages/block-std/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@blocksuite/block-std",
+  "version": "0.6.0",
+  "description": "Std for blocksuite blocks",
+  "main": "src/index.ts",
+  "type": "module",
+  "repository": "toeverything/blocksuite",
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MPL-2.0",
+  "peerDependencies": {
+    "@blocksuite/store": "workspace:*"
+  },
+  "dependencies": {
+    "@blocksuite/global": "workspace:*"
+  },
+  "devDependencies": {
+    "@blocksuite/store": "workspace:*"
+  },
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+      ".": {
+        "module": "./dist/index.js",
+        "import": "./dist/index.js"
+      }
+    },
+    "files": [
+      "dist"
+    ]
+  }
+}

packages/lit/src/event/pointer.ts → packages/block-std/src/event/pointer.ts

@@ -1,6 +1,6 @@
 import { assertExists } from '@blocksuite/global/utils';
 
-import { UIEventStateContext } from './base.js';
+import { UIEventState, UIEventStateContext } from './base.js';
 import type { UIEventDispatcher } from './dispatcher.js';
 import { PointerEventState } from './state.js';
 import { isFarEnough } from './utils.js';
@@ -45,6 +45,10 @@ export class PointerControl {
     this._dragging = false;
   };
 
+  private _createContext(event: Event, pointerState: PointerEventState) {
+    return UIEventStateContext.from(new UIEventState(event), pointerState);
+  }
+
   private _down = (event: PointerEvent) => {
     if (
       this._lastPointerDownEvent &&
@@ -72,7 +76,7 @@ export class PointerControl {
 
     this._dispatcher.run(
       'pointerDown',
-      UIEventStateContext.from(pointerEventState)
+      this._createContext(event, pointerEventState)
     );
 
     this._dispatcher.disposables.addFromEvent(
@@ -91,7 +95,7 @@ export class PointerControl {
       startY: this._startY,
       last: this._lastDragState,
     });
-    const context = UIEventStateContext.from(pointerEventState);
+    const context = this._createContext(event, pointerEventState);
 
     const run = () => {
       if (this._dragging) {
@@ -132,12 +136,12 @@ export class PointerControl {
       this._dragging = true;
       this._dispatcher.run(
         'dragStart',
-        UIEventStateContext.from(this._startDragState)
+        this._createContext(event, this._startDragState)
       );
     }
 
     if (this._dragging) {
-      this._dispatcher.run('dragMove', UIEventStateContext.from(state));
+      this._dispatcher.run('dragMove', this._createContext(event, state));
     }
   };
 
@@ -150,7 +154,7 @@ export class PointerControl {
       last: this._lastDragState,
     });
 
-    this._dispatcher.run('pointerMove', UIEventStateContext.from(state));
+    this._dispatcher.run('pointerMove', this._createContext(event, state));
   };
 
   private _out = (event: PointerEvent) => {
@@ -162,6 +166,6 @@ export class PointerControl {
       last: null,
     });
 
-    this._dispatcher.run('pointerOut', UIEventStateContext.from(state));
+    this._dispatcher.run('pointerOut', this._createContext(event, state));
   };
 }

packages/block-std/src/index.ts

@@ -0,0 +1,4 @@
+export * from './event/index.js';
+export * from './service/index.js';
+export * from './spec/index.js';
+export * from './store/index.js';

packages/block-std/src/service/index.ts

@@ -0,0 +1,46 @@
+import type { BaseBlockModel } from '@blocksuite/store';
+import { DisposableGroup } from '@blocksuite/store';
+
+import type { UIEventDispatcher } from '../event/index.js';
+import type { EventName, UIEventHandler } from '../event/index.js';
+
+export interface BlockServiceOptions {
+  // TODO: add these
+  // selectionManager;
+  // transformer;
+
+  uiEventDispatcher: UIEventDispatcher;
+}
+
+export class BlockService<Model extends BaseBlockModel = BaseBlockModel> {
+  disposables = new DisposableGroup();
+  uiEventDispatcher: UIEventDispatcher;
+
+  constructor(options: BlockServiceOptions) {
+    this.uiEventDispatcher = options.uiEventDispatcher;
+  }
+
+  // life cycle start
+  dispose() {
+    this.disposables.dispose();
+  }
+
+  mounted() {
+    // do nothing
+  }
+
+  unmounted() {
+    // do nothing
+  }
+  // life cycle end
+
+  // event handlers start
+  handleEvent(name: EventName, fn: UIEventHandler) {
+    this.disposables.add(this.uiEventDispatcher.add(name, fn));
+  }
+  // event handlers end
+}
+
+export type BlockServiceConstructor = new (
+  options: BlockServiceOptions
+) => BlockService;

packages/block-std/src/spec/index.ts

@@ -0,0 +1,14 @@
+import type { BlockSchemaType } from '@blocksuite/store';
+
+import type { BlockServiceConstructor } from '../service/index.js';
+
+export interface BlockView<ComponentType = unknown> {
+  component: ComponentType;
+  widgets?: ComponentType[];
+}
+
+export interface BlockSpec<ComponentType = unknown> {
+  schema: BlockSchemaType;
+  service?: BlockServiceConstructor;
+  view: BlockView<ComponentType>;
+}

packages/block-std/src/store/index.ts

@@ -0,0 +1,92 @@
+import type { UIEventDispatcher } from '../event/index.js';
+import type { BlockService, BlockServiceOptions } from '../service/index.js';
+import type { BlockSpec } from '../spec/index.js';
+
+export interface BlockStoreOptions {
+  uiEventDispatcher: UIEventDispatcher;
+}
+
+export class BlockStore<ComponentType = unknown> {
+  private _specs: Map<string, BlockSpec<ComponentType>> = new Map();
+  private _services: Map<string, BlockService> = new Map();
+  private readonly _uiEventDispatcher: UIEventDispatcher;
+  constructor(options: BlockStoreOptions) {
+    this._uiEventDispatcher = options.uiEventDispatcher;
+  }
+
+  applySpecs(specs: Array<BlockSpec<ComponentType>>) {
+    const oldSpecs = this._specs;
+    const newSpecs = this._buildSpecMap(specs);
+    this._diffServices(oldSpecs, newSpecs);
+    this._specs = newSpecs;
+  }
+
+  dispose() {
+    this._services.forEach(service => {
+      service.dispose();
+      service.unmounted();
+    });
+    this._services.clear();
+  }
+
+  getView(flavour: string) {
+    const spec = this._specs.get(flavour);
+    if (!spec) {
+      return null;
+    }
+
+    return spec.view;
+  }
+
+  getService(flavour: string) {
+    return this._services.get(flavour);
+  }
+
+  private _diffServices(
+    oldSpecs: Map<string, BlockSpec<ComponentType>>,
+    newSpecs: Map<string, BlockSpec<ComponentType>>
+  ) {
+    oldSpecs.forEach((oldSpec, flavour) => {
+      if (
+        newSpecs.has(flavour) &&
+        newSpecs.get(flavour)?.service === oldSpec.service
+      ) {
+        return;
+      }
+
+      const service = this._services.get(flavour);
+      if (service) {
+        service.dispose();
+        service.unmounted();
+      }
+      this._services.delete(flavour);
+    });
+    newSpecs.forEach((newSpec, flavour) => {
+      if (this._services.has(flavour)) {
+        return;
+      }
+
+      if (!newSpec.service) {
+        return;
+      }
+
+      const service = new newSpec.service(this._serviceOptions);
+      this._services.set(flavour, service);
+      service.mounted();
+    });
+  }
+
+  private get _serviceOptions(): BlockServiceOptions {
+    return {
+      uiEventDispatcher: this._uiEventDispatcher,
+    };
+  }
+
+  private _buildSpecMap(specs: Array<BlockSpec<ComponentType>>) {
+    const specMap = new Map<string, BlockSpec<ComponentType>>();
+    specs.forEach(spec => {
+      specMap.set(spec.schema.model.flavour, spec);
+    });
+    return specMap;
+  }
+}

packages/block-std/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./dist/",
+    "noEmit": false
+  },
+  "include": ["./src"],
+  "references": []
+}