From fc5999a4829848a673e1635b5fc5689692e85914 Mon Sep 17 00:00:00 2001
From: Saul-Mirone <Saul-Mirone@outlook.com>
Date: Thu, 26 Dec 2024 04:45:11 +0000
Subject: [PATCH] refactor(editor): extract frame block (#9322)

---
 blocksuite/affine/block-frame/package.json    | 42 +++++++++++++++++++
 blocksuite/affine/block-frame/src/effects.ts  |  5 +++
 .../block-frame/src}/frame-block.ts           | 10 +----
 .../block-frame/src}/frame-spec.ts            |  0
 .../block-frame/src}/index.ts                 |  0
 blocksuite/affine/block-frame/tsconfig.json   | 32 ++++++++++++++
 blocksuite/blocks/package.json                |  1 +
 .../blocks/src/_specs/group/edgeless.ts       |  2 +-
 .../src/_specs/preset/edgeless-specs.ts       |  2 +-
 .../blocks/src/_specs/preset/preview-specs.ts |  2 +-
 blocksuite/blocks/src/effects.ts              |  4 +-
 blocksuite/blocks/src/index.ts                |  2 +-
 blocksuite/blocks/tsconfig.json               |  3 ++
 tools/utils/src/workspace.gen.ts              | 15 +++++++
 tsconfig.project.json                         |  1 +
 yarn.lock                                     | 23 ++++++++++
 16 files changed, 130 insertions(+), 14 deletions(-)
 create mode 100644 blocksuite/affine/block-frame/package.json
 create mode 100644 blocksuite/affine/block-frame/src/effects.ts
 rename blocksuite/{blocks/src/frame-block => affine/block-frame/src}/frame-block.ts (89%)
 rename blocksuite/{blocks/src/frame-block => affine/block-frame/src}/frame-spec.ts (100%)
 rename blocksuite/{blocks/src/frame-block => affine/block-frame/src}/index.ts (100%)
 create mode 100644 blocksuite/affine/block-frame/tsconfig.json

diff --git a/blocksuite/affine/block-frame/package.json b/blocksuite/affine/block-frame/package.json
new file mode 100644
index 000000000..5bdbf383a
--- /dev/null
+++ b/blocksuite/affine/block-frame/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@blocksuite/affine-block-frame",
+  "description": "Frame 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-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "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.1",
+    "@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__"
+  ]
+}
diff --git a/blocksuite/affine/block-frame/src/effects.ts b/blocksuite/affine/block-frame/src/effects.ts
new file mode 100644
index 000000000..557ff8b6a
--- /dev/null
+++ b/blocksuite/affine/block-frame/src/effects.ts
@@ -0,0 +1,5 @@
+import { FrameBlockComponent } from './frame-block';
+
+export function effects() {
+  customElements.define('affine-frame', FrameBlockComponent);
+}
diff --git a/blocksuite/blocks/src/frame-block/frame-block.ts b/blocksuite/affine/block-frame/src/frame-block.ts
similarity index 89%
rename from blocksuite/blocks/src/frame-block/frame-block.ts
rename to blocksuite/affine/block-frame/src/frame-block.ts
index 1250575cf..61f583b84 100644
--- a/blocksuite/blocks/src/frame-block/frame-block.ts
+++ b/blocksuite/affine/block-frame/src/frame-block.ts
@@ -7,13 +7,7 @@ import { html } from 'lit';
 import { state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type { EdgelessRootService } from '../root-block/index.js';
-
 export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
-  get rootService() {
-    return this.std.getService('affine:page') as EdgelessRootService;
-  }
-
   override connectedCallback() {
     super.connectedCallback();
 
@@ -59,13 +53,13 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
   }
 
   override renderGfxBlock() {
-    const { model, showBorder, rootService, std } = this;
+    const { model, showBorder, std } = this;
     const backgroundColor = std
       .get(ThemeProvider)
       .generateColorProperty(model.background, '--affine-platte-transparent');
     const _isNavigator =
       this.gfx.tool.currentToolName$.value === 'frameNavigator';
-    const frameIndex = rootService.layer.getZIndex(model);
+    const frameIndex = this.gfx.layer.getZIndex(model);
 
     return html`
       <div
diff --git a/blocksuite/blocks/src/frame-block/frame-spec.ts b/blocksuite/affine/block-frame/src/frame-spec.ts
similarity index 100%
rename from blocksuite/blocks/src/frame-block/frame-spec.ts
rename to blocksuite/affine/block-frame/src/frame-spec.ts
diff --git a/blocksuite/blocks/src/frame-block/index.ts b/blocksuite/affine/block-frame/src/index.ts
similarity index 100%
rename from blocksuite/blocks/src/frame-block/index.ts
rename to blocksuite/affine/block-frame/src/index.ts
diff --git a/blocksuite/affine/block-frame/tsconfig.json b/blocksuite/affine/block-frame/tsconfig.json
new file mode 100644
index 000000000..c1a5453aa
--- /dev/null
+++ b/blocksuite/affine/block-frame/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./dist/",
+    "noEmit": false
+  },
+  "include": ["./src"],
+  "references": [
+    {
+      "path": "../../framework/global"
+    },
+    {
+      "path": "../../framework/store"
+    },
+    {
+      "path": "../../framework/block-std"
+    },
+    {
+      "path": "../../framework/inline"
+    },
+    {
+      "path": "../model"
+    },
+    {
+      "path": "../components"
+    },
+    {
+      "path": "../shared"
+    }
+  ]
+}
diff --git a/blocksuite/blocks/package.json b/blocksuite/blocks/package.json
index e8ad30a02..3b9c76a8f 100644
--- a/blocksuite/blocks/package.json
+++ b/blocksuite/blocks/package.json
@@ -17,6 +17,7 @@
     "@blocksuite/affine-block-attachment": "workspace:*",
     "@blocksuite/affine-block-bookmark": "workspace:*",
     "@blocksuite/affine-block-embed": "workspace:*",
+    "@blocksuite/affine-block-frame": "workspace:*",
     "@blocksuite/affine-block-image": "workspace:*",
     "@blocksuite/affine-block-list": "workspace:*",
     "@blocksuite/affine-block-note": "workspace:*",
diff --git a/blocksuite/blocks/src/_specs/group/edgeless.ts b/blocksuite/blocks/src/_specs/group/edgeless.ts
index f21777b54..f8eafc61d 100644
--- a/blocksuite/blocks/src/_specs/group/edgeless.ts
+++ b/blocksuite/blocks/src/_specs/group/edgeless.ts
@@ -1,7 +1,7 @@
+import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
 import { EdgelessSurfaceBlockSpec } from '@blocksuite/affine-block-surface';
 
 import { EdgelessTextBlockSpec } from '../../edgeless-text-block/index.js';
-import { FrameBlockSpec } from '../../frame-block/frame-spec.js';
 import { LatexBlockSpec } from '../../latex-block/latex-spec.js';
 import { EdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
 import { EdgelessSurfaceRefBlockSpec } from '../../surface-ref-block/surface-ref-spec.js';
diff --git a/blocksuite/blocks/src/_specs/preset/edgeless-specs.ts b/blocksuite/blocks/src/_specs/preset/edgeless-specs.ts
index 443152413..9aa793713 100644
--- a/blocksuite/blocks/src/_specs/preset/edgeless-specs.ts
+++ b/blocksuite/blocks/src/_specs/preset/edgeless-specs.ts
@@ -1,3 +1,4 @@
+import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
 import {
   ConnectionOverlay,
   EdgelessSurfaceBlockSpec,
@@ -6,7 +7,6 @@ import { FontLoaderService } from '@blocksuite/affine-shared/services';
 import type { ExtensionType } from '@blocksuite/block-std';
 
 import { EdgelessTextBlockSpec } from '../../edgeless-text-block/edgeless-text-spec.js';
-import { FrameBlockSpec } from '../../frame-block/frame-spec.js';
 import { LatexBlockSpec } from '../../latex-block/latex-spec.js';
 import { EdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
 import {
diff --git a/blocksuite/blocks/src/_specs/preset/preview-specs.ts b/blocksuite/blocks/src/_specs/preset/preview-specs.ts
index bc7661aa4..99d67e17f 100644
--- a/blocksuite/blocks/src/_specs/preset/preview-specs.ts
+++ b/blocksuite/blocks/src/_specs/preset/preview-specs.ts
@@ -1,3 +1,4 @@
+import { FrameBlockSpec } from '@blocksuite/affine-block-frame';
 import {
   EdgelessSurfaceBlockSpec,
   PageSurfaceBlockSpec,
@@ -18,7 +19,6 @@ import {
 import { literal } from 'lit/static-html.js';
 
 import { EdgelessTextBlockSpec } from '../../edgeless-text-block/index.js';
-import { FrameBlockSpec } from '../../frame-block/frame-spec.js';
 import { LatexBlockSpec } from '../../latex-block/latex-spec.js';
 import { PreviewEdgelessRootBlockSpec } from '../../root-block/edgeless/edgeless-root-spec.js';
 import { PageRootService } from '../../root-block/page/page-root-service.js';
diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts
index 729bc6e0b..46e63cd44 100644
--- a/blocksuite/blocks/src/effects.ts
+++ b/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 blockEmbedEffects } from '@blocksuite/affine-block-embed/effects';
+import { effects as blockFrameEffects } from '@blocksuite/affine-block-frame/effects';
 import { effects as blockImageEffects } from '@blocksuite/affine-block-image/effects';
 import { effects as blockListEffects } from '@blocksuite/affine-block-list/effects';
 import { effects as blockNoteEffects } from '@blocksuite/affine-block-note/effects';
@@ -64,7 +65,6 @@ import {
 import { DividerBlockComponent } from './divider-block/index.js';
 import type { insertEdgelessTextCommand } from './edgeless-text-block/commands/insert-edgeless-text.js';
 import { EdgelessTextBlockComponent } from './edgeless-text-block/index.js';
-import { FrameBlockComponent } from './frame-block/index.js';
 import { effects as blockLatexEffects } from './latex-block/effects.js';
 import { LatexBlockComponent } from './latex-block/index.js';
 import { EdgelessAutoCompletePanel } from './root-block/edgeless/components/auto-complete/auto-complete-panel.js';
@@ -251,6 +251,7 @@ export function effects() {
   blockNoteEffects();
   blockAttachmentEffects();
   blockBookmarkEffects();
+  blockFrameEffects();
   blockListEffects();
   blockParagraphEffects();
   blockEmbedEffects();
@@ -302,7 +303,6 @@ export function effects() {
   customElements.define('affine-preview-root', PreviewRootBlockComponent);
   customElements.define('affine-code', CodeBlockComponent);
   customElements.define('mini-mindmap-preview', MiniMindmapPreview);
-  customElements.define('affine-frame', FrameBlockComponent);
   customElements.define('mini-mindmap-surface-block', MindmapSurfaceBlock);
   customElements.define('affine-data-view', DataViewBlockComponent);
   customElements.define('affine-edgeless-root', EdgelessRootBlockComponent);
diff --git a/blocksuite/blocks/src/index.ts b/blocksuite/blocks/src/index.ts
index 3ac457f35..749bac23f 100644
--- a/blocksuite/blocks/src/index.ts
+++ b/blocksuite/blocks/src/index.ts
@@ -21,7 +21,6 @@ export * from './data-view-block/index.js';
 export * from './database-block/index.js';
 export * from './divider-block/index.js';
 export * from './edgeless-text-block/index.js';
-export * from './frame-block/index.js';
 export * from './latex-block/index.js';
 export { EdgelessTemplatePanel } from './root-block/edgeless/components/toolbar/template/template-panel.js';
 export type {
@@ -49,6 +48,7 @@ export * from './surface-ref-block/index.js';
 export * from '@blocksuite/affine-block-attachment';
 export * from '@blocksuite/affine-block-bookmark';
 export * from '@blocksuite/affine-block-embed';
+export * from '@blocksuite/affine-block-frame';
 export * from '@blocksuite/affine-block-image';
 export * from '@blocksuite/affine-block-list';
 export * from '@blocksuite/affine-block-note';
diff --git a/blocksuite/blocks/tsconfig.json b/blocksuite/blocks/tsconfig.json
index a6c6e94f1..aa11c7a82 100644
--- a/blocksuite/blocks/tsconfig.json
+++ b/blocksuite/blocks/tsconfig.json
@@ -37,6 +37,9 @@
     {
       "path": "../affine/block-embed"
     },
+    {
+      "path": "../affine/block-frame"
+    },
     {
       "path": "../affine/block-note"
     },
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index 0c48fc16d..44d0927c6 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -55,6 +55,19 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/block-frame',
+    name: '@blocksuite/affine-block-frame',
+    workspaceDependencies: [
+      'blocksuite/affine/components',
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/block-std',
+      'blocksuite/framework/global',
+      'blocksuite/framework/inline',
+      'blocksuite/framework/store',
+    ],
+  },
   {
     location: 'blocksuite/affine/block-image',
     name: '@blocksuite/affine-block-image',
@@ -182,6 +195,7 @@ export const PackageList = [
       'blocksuite/affine/block-attachment',
       'blocksuite/affine/block-bookmark',
       'blocksuite/affine/block-embed',
+      'blocksuite/affine/block-frame',
       'blocksuite/affine/block-image',
       'blocksuite/affine/block-list',
       'blocksuite/affine/block-note',
@@ -519,6 +533,7 @@ export type PackageName =
   | '@blocksuite/affine-block-attachment'
   | '@blocksuite/affine-block-bookmark'
   | '@blocksuite/affine-block-embed'
+  | '@blocksuite/affine-block-frame'
   | '@blocksuite/affine-block-image'
   | '@blocksuite/affine-block-list'
   | '@blocksuite/affine-block-note'
diff --git a/tsconfig.project.json b/tsconfig.project.json
index b5c5893da..5dcce7df0 100644
--- a/tsconfig.project.json
+++ b/tsconfig.project.json
@@ -10,6 +10,7 @@
     { "path": "./blocksuite/affine/block-attachment" },
     { "path": "./blocksuite/affine/block-bookmark" },
     { "path": "./blocksuite/affine/block-embed" },
+    { "path": "./blocksuite/affine/block-frame" },
     { "path": "./blocksuite/affine/block-image" },
     { "path": "./blocksuite/affine/block-list" },
     { "path": "./blocksuite/affine/block-note" },
diff --git a/yarn.lock b/yarn.lock
index 663c89d4f..282765307 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3295,6 +3295,28 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-block-frame@workspace:*, @blocksuite/affine-block-frame@workspace:blocksuite/affine/block-frame":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-block-frame@workspace:blocksuite/affine/block-frame"
+  dependencies:
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/block-std": "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.1"
+    "@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-image@workspace:*, @blocksuite/affine-block-image@workspace:blocksuite/affine/block-image":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-block-image@workspace:blocksuite/affine/block-image"
@@ -3535,6 +3557,7 @@ __metadata:
     "@blocksuite/affine-block-attachment": "workspace:*"
     "@blocksuite/affine-block-bookmark": "workspace:*"
     "@blocksuite/affine-block-embed": "workspace:*"
+    "@blocksuite/affine-block-frame": "workspace:*"
     "@blocksuite/affine-block-image": "workspace:*"
     "@blocksuite/affine-block-list": "workspace:*"
     "@blocksuite/affine-block-note": "workspace:*"