From 6c33eaace070c9dd0f6aca7007eeee7a45387e8b Mon Sep 17 00:00:00 2001
From: Saul-Mirone <Saul-Mirone@outlook.com>
Date: Tue, 31 Dec 2024 10:12:03 +0000
Subject: [PATCH] refactor(editor): extract frame title widget (#9458)

---
 .../affine/widget-frame-title/package.json    | 36 +++++++++++++++++++
 .../widget-frame-title/src}/effects.ts        |  0
 .../widget-frame-title/src}/frame-title.ts    | 13 +++----
 .../widget-frame-title/src}/index.ts          |  8 ++---
 .../widget-frame-title/src}/styles.ts         |  0
 .../affine/widget-frame-title/tsconfig.json   | 20 +++++++++++
 blocksuite/blocks/package.json                |  1 +
 blocksuite/blocks/src/effects.ts              |  2 +-
 .../text/edgeless-frame-title-editor.ts       | 10 +++---
 .../root-block/edgeless/edgeless-root-spec.ts |  2 +-
 blocksuite/blocks/src/root-block/types.ts     |  2 +-
 .../blocks/src/root-block/widgets/index.ts    |  2 +-
 blocksuite/blocks/tsconfig.json               |  3 ++
 tools/utils/src/workspace.gen.ts              | 12 +++++++
 tsconfig.project.json                         |  1 +
 yarn.lock                                     | 16 +++++++++
 16 files changed, 105 insertions(+), 23 deletions(-)
 create mode 100644 blocksuite/affine/widget-frame-title/package.json
 rename blocksuite/{blocks/src/root-block/widgets/frame-title => affine/widget-frame-title/src}/effects.ts (100%)
 rename blocksuite/{blocks/src/root-block/widgets/frame-title => affine/widget-frame-title/src}/frame-title.ts (95%)
 rename blocksuite/{blocks/src/root-block/widgets/frame-title => affine/widget-frame-title/src}/index.ts (85%)
 rename blocksuite/{blocks/src/root-block/widgets/frame-title => affine/widget-frame-title/src}/styles.ts (100%)
 create mode 100644 blocksuite/affine/widget-frame-title/tsconfig.json

diff --git a/blocksuite/affine/widget-frame-title/package.json b/blocksuite/affine/widget-frame-title/package.json
new file mode 100644
index 0000000000000..8a420cf4dcc29
--- /dev/null
+++ b/blocksuite/affine/widget-frame-title/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@blocksuite/affine-widget-frame-title",
+  "description": "Affine frame title 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:*",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.3",
+    "lit": "^3.2.0"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.19.0"
+}
diff --git a/blocksuite/blocks/src/root-block/widgets/frame-title/effects.ts b/blocksuite/affine/widget-frame-title/src/effects.ts
similarity index 100%
rename from blocksuite/blocks/src/root-block/widgets/frame-title/effects.ts
rename to blocksuite/affine/widget-frame-title/src/effects.ts
diff --git a/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts b/blocksuite/affine/widget-frame-title/src/frame-title.ts
similarity index 95%
rename from blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts
rename to blocksuite/affine/widget-frame-title/src/frame-title.ts
index cbb5abe474e6a..8efb9cf764065 100644
--- a/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts
+++ b/blocksuite/affine/widget-frame-title/src/frame-title.ts
@@ -23,7 +23,6 @@ import { themeToVar } from '@toeverything/theme/v2';
 import { LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 
-import type { EdgelessRootService } from '../../edgeless/index.js';
 import { frameTitleStyle, frameTitleStyleVars } from './styles.js';
 
 export const AFFINE_FRAME_TITLE = 'affine-frame-title';
@@ -85,10 +84,6 @@ export class AffineFrameTitle extends SignalWatcher(
     return this.std.get(GfxControllerIdentifier);
   }
 
-  get rootService() {
-    return this.std.getService('affine:page') as EdgelessRootService;
-  }
-
   private _isInsideFrame() {
     return this.gfx.grid.has(
       this.model.elementBound,
@@ -165,7 +160,7 @@ export class AffineFrameTitle extends SignalWatcher(
   override connectedCallback() {
     super.connectedCallback();
 
-    const { _disposables, doc, gfx, rootService } = this;
+    const { _disposables, doc, gfx } = this;
 
     this._nestedFrame = this._isInsideFrame();
 
@@ -198,10 +193,10 @@ export class AffineFrameTitle extends SignalWatcher(
     );
 
     _disposables.add(
-      rootService.selection.slots.updated.on(() => {
+      gfx.selection.slots.updated.on(() => {
         this._editing =
-          rootService.selection.selectedIds[0] === this.model.id &&
-          rootService.selection.editing;
+          gfx.selection.selectedIds[0] === this.model.id &&
+          gfx.selection.editing;
       })
     );
 
diff --git a/blocksuite/blocks/src/root-block/widgets/frame-title/index.ts b/blocksuite/affine/widget-frame-title/src/index.ts
similarity index 85%
rename from blocksuite/blocks/src/root-block/widgets/frame-title/index.ts
rename to blocksuite/affine/widget-frame-title/src/index.ts
index 31c0e73cb3215..bd694eafad43a 100644
--- a/blocksuite/blocks/src/root-block/widgets/frame-title/index.ts
+++ b/blocksuite/affine/widget-frame-title/src/index.ts
@@ -3,15 +3,11 @@ import { WidgetComponent } from '@blocksuite/block-std';
 import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
-import type { EdgelessRootBlockComponent } from '../../index.js';
 import type { AffineFrameTitle } from './frame-title.js';
 
 export const AFFINE_FRAME_TITLE_WIDGET = 'affine-frame-title-widget';
 
-export class AffineFrameTitleWidget extends WidgetComponent<
-  RootBlockModel,
-  EdgelessRootBlockComponent
-> {
+export class AffineFrameTitleWidget extends WidgetComponent<RootBlockModel> {
   private get _frames() {
     return Object.values(this.doc.blocks.value)
       .map(({ model }) => model)
@@ -38,3 +34,5 @@ export class AffineFrameTitleWidget extends WidgetComponent<
     );
   }
 }
+
+export * from './styles.js';
diff --git a/blocksuite/blocks/src/root-block/widgets/frame-title/styles.ts b/blocksuite/affine/widget-frame-title/src/styles.ts
similarity index 100%
rename from blocksuite/blocks/src/root-block/widgets/frame-title/styles.ts
rename to blocksuite/affine/widget-frame-title/src/styles.ts
diff --git a/blocksuite/affine/widget-frame-title/tsconfig.json b/blocksuite/affine/widget-frame-title/tsconfig.json
new file mode 100644
index 0000000000000..515e24c087583
--- /dev/null
+++ b/blocksuite/affine/widget-frame-title/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./dist/",
+    "noEmit": false
+  },
+  "include": ["./src"],
+  "references": [
+    {
+      "path": "../../framework"
+    },
+    {
+      "path": "../model"
+    },
+    {
+      "path": "../shared"
+    }
+  ]
+}
diff --git a/blocksuite/blocks/package.json b/blocksuite/blocks/package.json
index b13c670940f46..364424d937bd1 100644
--- a/blocksuite/blocks/package.json
+++ b/blocksuite/blocks/package.json
@@ -34,6 +34,7 @@
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-drag-handle": "workspace:*",
+    "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts
index 07c6cf021c79f..839e72be814c6 100644
--- a/blocksuite/blocks/src/effects.ts
+++ b/blocksuite/blocks/src/effects.ts
@@ -31,6 +31,7 @@ import { effects as componentToggleButtonEffects } from '@blocksuite/affine-comp
 import { ToggleSwitch } from '@blocksuite/affine-components/toggle-switch';
 import { effects as componentToolbarEffects } from '@blocksuite/affine-components/toolbar';
 import { effects as widgetDragHandleEffects } from '@blocksuite/affine-widget-drag-handle/effects';
+import { effects as widgetFrameTitleEffects } from '@blocksuite/affine-widget-frame-title/effects';
 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';
@@ -161,7 +162,6 @@ import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from './root-block/widgets/edgele
 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';
 import { effects as widgetEdgelessElementToolbarEffects } from './root-block/widgets/element-toolbar/effects.js';
-import { effects as widgetFrameTitleEffects } from './root-block/widgets/frame-title/effects.js';
 import { AffineImageToolbar } from './root-block/widgets/image-toolbar/components/image-toolbar.js';
 import { AFFINE_IMAGE_TOOLBAR_WIDGET } from './root-block/widgets/image-toolbar/index.js';
 import { AFFINE_INNER_MODAL_WIDGET } from './root-block/widgets/inner-modal/inner-modal.js';
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/text/edgeless-frame-title-editor.ts b/blocksuite/blocks/src/root-block/edgeless/components/text/edgeless-frame-title-editor.ts
index 93ae12807abf8..a40b1f877f467 100644
--- a/blocksuite/blocks/src/root-block/edgeless/components/text/edgeless-frame-title-editor.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/text/edgeless-frame-title-editor.ts
@@ -1,5 +1,10 @@
 import type { RichText } from '@blocksuite/affine-components/rich-text';
 import { FrameBlockModel } from '@blocksuite/affine-model';
+import {
+  AFFINE_FRAME_TITLE_WIDGET,
+  type AffineFrameTitleWidget,
+  frameTitleStyleVars,
+} from '@blocksuite/affine-widget-frame-title';
 import {
   RANGE_SYNC_EXCLUDE_ATTR,
   ShadowlessElement,
@@ -10,11 +15,6 @@ import { css, html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import {
-  AFFINE_FRAME_TITLE_WIDGET,
-  type AffineFrameTitleWidget,
-} from '../../../widgets/frame-title/index.js';
-import { frameTitleStyleVars } from '../../../widgets/frame-title/styles.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
 
 export class EdgelessFrameTitleEditor extends WithDisposable(
diff --git a/blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts b/blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts
index 2b0416d85ba36..bb947e26d0299 100644
--- a/blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts
@@ -7,6 +7,7 @@ import {
   ThemeService,
 } from '@blocksuite/affine-shared/services';
 import { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
+import { AFFINE_FRAME_TITLE_WIDGET } from '@blocksuite/affine-widget-frame-title';
 import {
   AFFINE_DOC_REMOTE_SELECTION_WIDGET,
   AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
@@ -31,7 +32,6 @@ import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from '../widgets/edgeless-zoom-to
 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';
 import { AFFINE_FORMAT_BAR_WIDGET } from '../widgets/format-bar/format-bar.js';
-import { AFFINE_FRAME_TITLE_WIDGET } from '../widgets/frame-title/index.js';
 import { AFFINE_INNER_MODAL_WIDGET } from '../widgets/inner-modal/inner-modal.js';
 import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/index.js';
 import { AFFINE_MODAL_WIDGET } from '../widgets/modal/modal.js';
diff --git a/blocksuite/blocks/src/root-block/types.ts b/blocksuite/blocks/src/root-block/types.ts
index d3c9117d317b5..9667e36fb6809 100644
--- a/blocksuite/blocks/src/root-block/types.ts
+++ b/blocksuite/blocks/src/root-block/types.ts
@@ -1,4 +1,5 @@
 import type { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
+import type { AFFINE_FRAME_TITLE_WIDGET } from '@blocksuite/affine-widget-frame-title';
 import type {
   AFFINE_DOC_REMOTE_SELECTION_WIDGET,
   AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
@@ -10,7 +11,6 @@ import type { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from './widgets/edgeless-zoo
 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';
 import type { AFFINE_FORMAT_BAR_WIDGET } from './widgets/format-bar/format-bar.js';
-import type { AFFINE_FRAME_TITLE_WIDGET } from './widgets/frame-title/index.js';
 import type { AFFINE_KEYBOARD_TOOLBAR_WIDGET } from './widgets/index.js';
 import type { AFFINE_INNER_MODAL_WIDGET } from './widgets/inner-modal/inner-modal.js';
 import type { AFFINE_LINKED_DOC_WIDGET } from './widgets/linked-doc/index.js';
diff --git a/blocksuite/blocks/src/root-block/widgets/index.ts b/blocksuite/blocks/src/root-block/widgets/index.ts
index dc0fa9b3a03fd..9002afde57b1c 100644
--- a/blocksuite/blocks/src/root-block/widgets/index.ts
+++ b/blocksuite/blocks/src/root-block/widgets/index.ts
@@ -25,7 +25,6 @@ export {
   AFFINE_FORMAT_BAR_WIDGET,
   AffineFormatBarWidget,
 } from './format-bar/format-bar.js';
-export { AffineFrameTitleWidget } from './frame-title/index.js';
 export { AffineImageToolbarWidget } from './image-toolbar/index.js';
 export { AffineInnerModalWidget } from './inner-modal/inner-modal.js';
 export * from './keyboard-toolbar/index.js';
@@ -52,3 +51,4 @@ export {
   type AffineSlashSubMenu,
 } from './slash-menu/index.js';
 export { AffineSurfaceRefToolbar } from './surface-ref-toolbar/surface-ref-toolbar.js';
+export { AffineFrameTitleWidget } from '@blocksuite/affine-widget-frame-title';
diff --git a/blocksuite/blocks/tsconfig.json b/blocksuite/blocks/tsconfig.json
index 5e628e4868625..def85d15021d6 100644
--- a/blocksuite/blocks/tsconfig.json
+++ b/blocksuite/blocks/tsconfig.json
@@ -78,6 +78,9 @@
     },
     {
       "path": "../affine/widget-drag-handle"
+    },
+    {
+      "path": "../affine/widget-frame-title"
     }
   ]
 }
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index 7ae3874b72d72..ba18062f8a792 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -295,6 +295,16 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/widget-frame-title',
+    name: '@blocksuite/affine-widget-frame-title',
+    workspaceDependencies: [
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/block-std',
+      'blocksuite/framework/global',
+    ],
+  },
   {
     location: 'blocksuite/affine/widget-remote-selection',
     name: '@blocksuite/affine-widget-remote-selection',
@@ -339,6 +349,7 @@ export const PackageList = [
       'blocksuite/affine/model',
       'blocksuite/affine/shared',
       'blocksuite/affine/widget-drag-handle',
+      'blocksuite/affine/widget-frame-title',
       'blocksuite/affine/widget-remote-selection',
       'blocksuite/affine/widget-scroll-anchoring',
       'blocksuite/framework/block-std',
@@ -698,6 +709,7 @@ export type PackageName =
   | '@blocksuite/affine-model'
   | '@blocksuite/affine-shared'
   | '@blocksuite/affine-widget-drag-handle'
+  | '@blocksuite/affine-widget-frame-title'
   | '@blocksuite/affine-widget-remote-selection'
   | '@blocksuite/affine-widget-scroll-anchoring'
   | '@blocksuite/blocks'
diff --git a/tsconfig.project.json b/tsconfig.project.json
index a006fc85e6f82..af4dcdb8debbd 100644
--- a/tsconfig.project.json
+++ b/tsconfig.project.json
@@ -28,6 +28,7 @@
     { "path": "./blocksuite/affine/model" },
     { "path": "./blocksuite/affine/shared" },
     { "path": "./blocksuite/affine/widget-drag-handle" },
+    { "path": "./blocksuite/affine/widget-frame-title" },
     { "path": "./blocksuite/affine/widget-remote-selection" },
     { "path": "./blocksuite/affine/widget-scroll-anchoring" },
     { "path": "./blocksuite/blocks" },
diff --git a/yarn.lock b/yarn.lock
index 4a7684e9a9715..956cb9affe8f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3747,6 +3747,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-widget-frame-title@workspace:*, @blocksuite/affine-widget-frame-title@workspace:blocksuite/affine/widget-frame-title":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-widget-frame-title@workspace:blocksuite/affine/widget-frame-title"
+  dependencies:
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/block-std": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.3"
+    lit: "npm:^3.2.0"
+  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"
@@ -3834,6 +3849,7 @@ __metadata:
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/affine-widget-drag-handle": "workspace:*"
+    "@blocksuite/affine-widget-frame-title": "workspace:*"
     "@blocksuite/affine-widget-remote-selection": "workspace:*"
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"
     "@blocksuite/block-std": "workspace:*"