refactor(editor): extract data view block (#9452)

blocksuite/affine/block-data-view/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@blocksuite/affine-block-data-view",
+  "description": "Data view block for BlockSuite.",
+  "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-block-database": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/data-view": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/inline": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.10",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.3",
+    "@types/mdast": "^4.0.4",
+    "lit": "^3.2.0",
+    "minimatch": "^10.0.1",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.19.0"
+}

blocksuite/affine/block-data-view/src/data-view-block.ts

@@ -1,5 +1,4 @@
 import { BlockRenderer, NoteRenderer } from '@blocksuite/affine-block-database';
-import type { NoteBlockComponent } from '@blocksuite/affine-block-note';
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import {
   menu,
@@ -13,12 +12,17 @@ import {
 } from '@blocksuite/affine-components/icons';
 import { PeekViewProvider } from '@blocksuite/affine-components/peek';
 import { toast } from '@blocksuite/affine-components/toast';
+import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
 import {
+  DocModeProvider,
   NotificationProvider,
   type TelemetryEventMap,
   TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
-import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/block-std';
+import {
+  type BlockComponent,
+  RANGE_SYNC_EXCLUDE_ATTR,
+} from '@blocksuite/block-std';
 import {
   createRecordDetail,
   createUniComponentFromWebComponent,
@@ -40,10 +44,6 @@ import { computed, signal } from '@preact/signals-core';
 import { css, nothing, unsafeCSS } from 'lit';
 import { html } from 'lit/static-html.js';
 
-import {
-  EdgelessRootBlockComponent,
-  type RootService,
-} from '../root-block/index.js';
 import { BlockQueryDataSource } from './data-source.js';
 import type { DataViewBlockModel } from './data-view-model.js';
 
@@ -153,10 +153,6 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
     };
   };
 
-  getRootService = () => {
-    return this.std.getService<RootService>('affine:page');
-  };
-
   headerWidget: DataViewWidget = defineUniComponent(
     (props: DataViewWidgetProps) => {
       return html`
@@ -230,9 +226,8 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
   }
 
   override get topContenteditableElement() {
-    if (this.rootComponent instanceof EdgelessRootBlockComponent) {
+    if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
-      const note = this.closest<NoteBlockComponent>('affine-note');
+      return this.closest<BlockComponent>(NOTE_SELECTOR);
-      return note;
     }
     return this.rootComponent;
   }

blocksuite/affine/block-data-view/src/effects.ts

@@ -0,0 +1,14 @@
+import { DataViewBlockComponent } from './data-view-block';
+import type { DataViewBlockModel } from './data-view-model';
+
+export function effects() {
+  customElements.define('affine-data-view', DataViewBlockComponent);
+}
+
+declare global {
+  namespace BlockSuite {
+    interface BlockModels {
+      'affine:data-view': DataViewBlockModel;
+    }
+  }
+}

blocksuite/affine/block-data-view/src/index.ts

@@ -0,0 +1,3 @@
+export * from './data-view-block.js';
+export * from './data-view-model.js';
+export * from './data-view-spec.js';

blocksuite/affine/block-data-view/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./dist/",
+    "noEmit": false
+  },
+  "include": ["./src"],
+  "references": [
+    {
+      "path": "../../framework"
+    },
+    {
+      "path": "../model"
+    },
+    {
+      "path": "../components"
+    },
+    {
+      "path": "../shared"
+    },
+    {
+      "path": "../data-view"
+    },
+    {
+      "path": "../block-database"
+    }
+  ]
+}

blocksuite/blocks/package.json

@@ -17,6 +17,7 @@
     "@blocksuite/affine-block-attachment": "workspace:*",
     "@blocksuite/affine-block-bookmark": "workspace:*",
     "@blocksuite/affine-block-code": "workspace:*",
+    "@blocksuite/affine-block-data-view": "workspace:*",
     "@blocksuite/affine-block-database": "workspace:*",
     "@blocksuite/affine-block-divider": "workspace:*",
     "@blocksuite/affine-block-edgeless-text": "workspace:*",

blocksuite/blocks/src/_specs/common.ts

@@ -1,6 +1,7 @@
 import { AttachmentBlockSpec } from '@blocksuite/affine-block-attachment';
 import { BookmarkBlockSpec } from '@blocksuite/affine-block-bookmark';
 import { CodeBlockSpec } from '@blocksuite/affine-block-code';
+import { DataViewBlockSpec } from '@blocksuite/affine-block-data-view';
 import { DatabaseBlockSpec } from '@blocksuite/affine-block-database';
 import { DividerBlockSpec } from '@blocksuite/affine-block-divider';
 import { EdgelessTextBlockSpec } from '@blocksuite/affine-block-edgeless-text';
@@ -34,7 +35,6 @@ import {
 import type { ExtensionType } from '@blocksuite/block-std';
 
 import { AdapterFactoryExtensions } from '../_common/adapters/extension.js';
-import { DataViewBlockSpec } from '../data-view-block/data-view-spec.js';
 
 export const CommonBlockSpecs: ExtensionType[] = [
   DocDisplayMetaService,

blocksuite/blocks/src/data-view-block/index.ts

@@ -1,13 +0,0 @@
-import type { DataViewBlockModel } from './data-view-model.js';
-
-export * from './data-view-block.js';
-export * from './data-view-model.js';
-export * from './data-view-spec.js';
-
-declare global {
-  namespace BlockSuite {
-    interface BlockModels {
-      'affine:data-view': DataViewBlockModel;
-    }
-  }
-}

blocksuite/blocks/src/effects.ts

@@ -1,6 +1,7 @@
 import { effects as blockAttachmentEffects } from '@blocksuite/affine-block-attachment/effects';
 import { effects as blockBookmarkEffects } from '@blocksuite/affine-block-bookmark/effects';
 import { effects as blockCodeEffects } from '@blocksuite/affine-block-code/effects';
+import { effects as blockDataViewEffects } from '@blocksuite/affine-block-data-view/effects';
 import { effects as blockDatabaseEffects } from '@blocksuite/affine-block-database/effects';
 import { effects as blockDividerEffects } from '@blocksuite/affine-block-divider/effects';
 import { effects as blockEdgelessTextEffects } from '@blocksuite/affine-block-edgeless-text/effects';
@@ -38,7 +39,6 @@ import { effects as inlineEffects } from '@blocksuite/inline/effects';
 import type { BlockModel } from '@blocksuite/store';
 
 import { registerSpecs } from './_specs/register-specs.js';
-import { DataViewBlockComponent } from './data-view-block/index.js';
 import { EdgelessAutoCompletePanel } from './root-block/edgeless/components/auto-complete/auto-complete-panel.js';
 import { EdgelessAutoComplete } from './root-block/edgeless/components/auto-complete/edgeless-auto-complete.js';
 import { EdgelessToolIconButton } from './root-block/edgeless/components/buttons/tool-icon-button.js';
@@ -209,6 +209,7 @@ export function effects() {
   blockLatexEffects();
   blockEdgelessTextEffects();
   blockDividerEffects();
+  blockDataViewEffects();
   blockCodeEffects();
 
   componentCaptionEffects();
@@ -234,7 +235,6 @@ export function effects() {
   customElements.define('affine-preview-root', PreviewRootBlockComponent);
   customElements.define('mini-mindmap-preview', MiniMindmapPreview);
   customElements.define('mini-mindmap-surface-block', MindmapSurfaceBlock);
-  customElements.define('affine-data-view', DataViewBlockComponent);
   customElements.define('affine-edgeless-root', EdgelessRootBlockComponent);
   customElements.define('edgeless-copilot-panel', EdgelessCopilotPanel);
   customElements.define(

blocksuite/blocks/src/index.ts

@@ -17,7 +17,6 @@ export * from './_common/test-utils/test-utils.js';
 export * from './_common/transformers/index.js';
 export { type AbstractEditor } from './_common/types.js';
 export * from './_specs/index.js';
-export * from './data-view-block';
 export { EdgelessTemplatePanel } from './root-block/edgeless/components/toolbar/template/template-panel.js';
 export type {
   Template,
@@ -42,6 +41,7 @@ export {
 export * from '@blocksuite/affine-block-attachment';
 export * from '@blocksuite/affine-block-bookmark';
 export * from '@blocksuite/affine-block-code';
+export * from '@blocksuite/affine-block-data-view';
 export * from '@blocksuite/affine-block-database';
 export * from '@blocksuite/affine-block-divider';
 export * from '@blocksuite/affine-block-edgeless-text';

blocksuite/blocks/src/root-block/widgets/slash-menu/config.ts

@@ -1,5 +1,6 @@
 import { addSiblingAttachmentBlocks } from '@blocksuite/affine-block-attachment';
 import { toggleEmbedCardCreateModal } from '@blocksuite/affine-block-bookmark';
+import type { DataViewBlockComponent } from '@blocksuite/affine-block-data-view';
 import {
   FigmaIcon,
   GithubIcon,
@@ -51,7 +52,6 @@ import type { BlockModel } from '@blocksuite/store';
 import { Slice, Text } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
 
-import type { DataViewBlockComponent } from '../../../data-view-block/index.js';
 import type { RootBlockComponent } from '../../types.js';
 import { formatDate, formatTime } from '../../utils/misc.js';
 import type { AffineLinkedDocWidget } from '../linked-doc/index.js';

blocksuite/blocks/src/schemas.ts

@@ -1,4 +1,5 @@
 // Import models only, the bundled file should not include anything else.
+import { DataViewBlockSchema } from '@blocksuite/affine-block-data-view';
 import { SurfaceBlockSchema } from '@blocksuite/affine-block-surface';
 import {
   AttachmentBlockSchema,
@@ -26,8 +27,6 @@ import {
 import type { BlockSchema } from '@blocksuite/store';
 import type { z } from 'zod';
 
-import { DataViewBlockSchema } from './data-view-block/data-view-model.js';
-
 /** Built-in first party block models built for affine */
 export const AffineSchemas: z.infer<typeof BlockSchema>[] = [
   CodeBlockSchema,

blocksuite/blocks/tsconfig.json

@@ -64,6 +64,9 @@
     {
       "path": "../affine/block-surface-ref"
     },
+    {
+      "path": "../affine/block-data-view"
+    },
     {
       "path": "../affine/data-view"
     },

packages/frontend/electron-api/package.json

@@ -11,4 +11,4 @@
   "dependencies": {
     "async-call-rpc": "^6.4.2"
   }
-}
+}

tools/utils/src/workspace.gen.ts

@@ -55,6 +55,21 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/block-data-view',
+    name: '@blocksuite/affine-block-data-view',
+    workspaceDependencies: [
+      'blocksuite/affine/block-database',
+      'blocksuite/affine/components',
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/block-std',
+      'blocksuite/affine/data-view',
+      'blocksuite/framework/global',
+      'blocksuite/framework/inline',
+      'blocksuite/framework/store',
+    ],
+  },
   {
     location: 'blocksuite/affine/block-database',
     name: '@blocksuite/affine-block-database',
@@ -307,6 +322,7 @@ export const PackageList = [
       'blocksuite/affine/block-attachment',
       'blocksuite/affine/block-bookmark',
       'blocksuite/affine/block-code',
+      'blocksuite/affine/block-data-view',
       'blocksuite/affine/block-database',
       'blocksuite/affine/block-divider',
       'blocksuite/affine/block-edgeless-text',
@@ -663,6 +679,7 @@ export type PackageName =
   | '@blocksuite/affine-block-attachment'
   | '@blocksuite/affine-block-bookmark'
   | '@blocksuite/affine-block-code'
+  | '@blocksuite/affine-block-data-view'
   | '@blocksuite/affine-block-database'
   | '@blocksuite/affine-block-divider'
   | '@blocksuite/affine-block-edgeless-text'

tsconfig.project.json

@@ -10,6 +10,7 @@
     { "path": "./blocksuite/affine/block-attachment" },
     { "path": "./blocksuite/affine/block-bookmark" },
     { "path": "./blocksuite/affine/block-code" },
+    { "path": "./blocksuite/affine/block-data-view" },
     { "path": "./blocksuite/affine/block-database" },
     { "path": "./blocksuite/affine/block-divider" },
     { "path": "./blocksuite/affine/block-edgeless-text" },

yarn.lock

@@ -3334,6 +3334,30 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-block-data-view@workspace:*, @blocksuite/affine-block-data-view@workspace:blocksuite/affine/block-data-view":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-block-data-view@workspace:blocksuite/affine/block-data-view"
+  dependencies:
+    "@blocksuite/affine-block-database": "workspace:*"
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/block-std": "workspace:*"
+    "@blocksuite/data-view": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@blocksuite/inline": "workspace:*"
+    "@blocksuite/store": "workspace:*"
+    "@floating-ui/dom": "npm:^1.6.10"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.3"
+    "@types/mdast": "npm:^4.0.4"
+    lit: "npm:^3.2.0"
+    minimatch: "npm:^10.0.1"
+    zod: "npm:^3.23.8"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-block-database@workspace:*, @blocksuite/affine-block-database@workspace:blocksuite/affine/block-database":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-block-database@workspace:blocksuite/affine/block-database"
@@ -3793,6 +3817,7 @@ __metadata:
     "@blocksuite/affine-block-attachment": "workspace:*"
     "@blocksuite/affine-block-bookmark": "workspace:*"
     "@blocksuite/affine-block-code": "workspace:*"
+    "@blocksuite/affine-block-data-view": "workspace:*"
     "@blocksuite/affine-block-database": "workspace:*"
     "@blocksuite/affine-block-divider": "workspace:*"
     "@blocksuite/affine-block-edgeless-text": "workspace:*"