refactor(editor): extract frame title widget (#9458)

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"
+}

blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts → 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;
       })
     );
 

blocksuite/blocks/src/root-block/widgets/frame-title/index.ts → 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';

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"
+    }
+  ]
+}

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:*",

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';

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(

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';

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';

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';

blocksuite/blocks/tsconfig.json

@@ -78,6 +78,9 @@
     },
     {
       "path": "../affine/widget-drag-handle"
+    },
+    {
+      "path": "../affine/widget-frame-title"
     }
   ]
 }

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'

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" },

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:*"