feat(editor): add frame title and mobile toolbar widget extension (#11996)

Closes: BS-3223
Closes: BS-3224

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced new view extensions for frame title and keyboard toolbar widgets with conditional registration based on context and environment.
  - Enhanced widget integration by adding explicit exports for view components.

- **Chores**
  - Updated export paths and package dependencies to improve modularity and compatibility.
  - Removed deprecated widget dependencies and related imports from core packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/all/package.json

@@ -168,13 +168,15 @@
     "./widgets/edgeless-auto-connect/view": "./src/widgets/edgeless-auto-connect/view.ts",
     "./widgets/edgeless-toolbar": "./src/widgets/edgeless-toolbar/index.ts",
     "./widgets/edgeless-toolbar/view": "./src/widgets/edgeless-toolbar/view.ts",
-    "./widgets/frame-title": "./src/widgets/frame-title.ts",
+    "./widgets/frame-title": "./src/widgets/frame-title/index.ts",
+    "./widgets/frame-title/view": "./src/widgets/frame-title/view.ts",
     "./widgets/linked-doc": "./src/widgets/linked-doc.ts",
     "./widgets/remote-selection": "./src/widgets/remote-selection.ts",
     "./widgets/scroll-anchoring": "./src/widgets/scroll-anchoring.ts",
     "./widgets/slash-menu": "./src/widgets/slash-menu.ts",
     "./widgets/toolbar": "./src/widgets/toolbar.ts",
-    "./widgets/keyboard-toolbar": "./src/widgets/keyboard-toolbar.ts",
+    "./widgets/keyboard-toolbar": "./src/widgets/keyboard-toolbar/index.ts",
+    "./widgets/keyboard-toolbar/view": "./src/widgets/keyboard-toolbar/view.ts",
     "./fragments/doc-title": "./src/fragments/doc-title.ts",
     "./fragments/frame-panel": "./src/fragments/frame-panel.ts",
     "./fragments/outline": "./src/fragments/outline.ts",

blocksuite/affine/all/src/extensions/effects.ts

@@ -29,7 +29,6 @@ import { effects as fragmentDocTitleEffects } from '@blocksuite/affine-fragment-
 import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects';
 import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects';
 import { effects as richTextEffects } from '@blocksuite/affine-rich-text/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 { effects as widgetSlashMenuEffects } from '@blocksuite/affine-widget-slash-menu/effects';
@@ -67,7 +66,6 @@ export function effects() {
   componentOpenDocDropdownMenuEffects();
 
   widgetScrollAnchoringEffects();
-  widgetFrameTitleEffects();
   widgetRemoteSelectionEffects();
   widgetSlashMenuEffects();
   widgetToolbarEffects();

blocksuite/affine/all/src/extensions/view.ts

@@ -33,6 +33,8 @@ import { ReferenceViewExtension } from '@blocksuite/affine-inline-reference/view
 import { DragHandleViewExtension } from '@blocksuite/affine-widget-drag-handle/view';
 import { EdgelessAutoConnectViewExtension } from '@blocksuite/affine-widget-edgeless-auto-connect/view';
 import { EdgelessToolbarViewExtension } from '@blocksuite/affine-widget-edgeless-toolbar/view';
+import { FrameTitleViewExtension } from '@blocksuite/affine-widget-frame-title/view';
+import { KeyboardToolbarViewExtension } from '@blocksuite/affine-widget-keyboard-toolbar/view';
 
 import { MigratingViewExtension } from './migrating-view';
 
@@ -81,5 +83,7 @@ export function getInternalViewExtensions() {
     EdgelessAutoConnectViewExtension,
     EdgelessToolbarViewExtension,
     MigratingViewExtension,
+    FrameTitleViewExtension,
+    KeyboardToolbarViewExtension,
   ];
 }

blocksuite/affine/all/src/widgets/frame-title/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-frame-title/view';

blocksuite/affine/all/src/widgets/keyboard-toolbar/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-keyboard-toolbar/view';

blocksuite/affine/blocks/root/package.json

@@ -33,10 +33,7 @@
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
-    "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
-    "@blocksuite/affine-widget-frame-title": "workspace:*",
-    "@blocksuite/affine-widget-keyboard-toolbar": "workspace:*",
     "@blocksuite/affine-widget-linked-doc": "workspace:*",
     "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",

blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts

@@ -15,7 +15,6 @@ import { EdgelessClipboardFrameConfig } from '@blocksuite/affine-block-frame';
 import { EdgelessClipboardImageConfig } from '@blocksuite/affine-block-image';
 import { EdgelessClipboardNoteConfig } from '@blocksuite/affine-block-note';
 import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
-import { frameTitleWidget } from '@blocksuite/affine-widget-frame-title';
 import { edgelessRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
 import {
   BlockViewExtension,
@@ -97,7 +96,6 @@ export const EdgelessRootBlockSpec: ExtensionType[] = [
   BlockViewExtension('affine:page', literal`affine-edgeless-root`),
   edgelessRemoteSelectionWidget,
   edgelessZoomToolbarWidget,
-  frameTitleWidget,
   edgelessDraggingAreaWidget,
   noteSlicerWidget,
   edgelessNavigatorBgWidget,

blocksuite/affine/blocks/root/src/effects.ts

@@ -1,4 +1,3 @@
-import { effects as widgetMobileToolbarEffects } from '@blocksuite/affine-widget-keyboard-toolbar/effects';
 import { effects as widgetLinkedDocEffects } from '@blocksuite/affine-widget-linked-doc/effects';
 
 import { EdgelessAutoCompletePanel } from './edgeless/components/auto-complete/auto-complete-panel.js';
@@ -46,7 +45,6 @@ import {
 
 export function effects() {
   // Run other effects
-  widgetMobileToolbarEffects();
   widgetLinkedDocEffects();
 
   // Register components by category

blocksuite/affine/blocks/root/src/page/page-root-spec.ts

@@ -1,6 +1,4 @@
 import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
-import { keyboardToolbarWidget } from '@blocksuite/affine-widget-keyboard-toolbar';
-import { IS_MOBILE } from '@blocksuite/global/env';
 import { BlockViewExtension, WidgetViewExtension } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';
@@ -26,7 +24,6 @@ const PageCommonExtension: ExtensionType[] = [
 export const PageRootBlockSpec: ExtensionType[] = [
   ...PageCommonExtension,
   BlockViewExtension('affine:page', literal`affine-page-root`),
-  IS_MOBILE ? [keyboardToolbarWidget] : [],
   PageClipboard,
 ].flat();
 

blocksuite/affine/blocks/root/src/widgets/index.ts

@@ -1,4 +1,3 @@
 export { AffineEdgelessZoomToolbarWidget } from './edgeless-zoom-toolbar/index.js';
 export { AffinePageDraggingAreaWidget } from './page-dragging-area/page-dragging-area.js';
 export * from './viewport-overlay/viewport-overlay.js';
-export { AffineFrameTitleWidget } from '@blocksuite/affine-widget-frame-title';

blocksuite/affine/blocks/root/tsconfig.json

@@ -30,10 +30,7 @@
     { "path": "../../model" },
     { "path": "../../rich-text" },
     { "path": "../../shared" },
-    { "path": "../../widgets/edgeless-auto-connect" },
     { "path": "../../widgets/edgeless-toolbar" },
-    { "path": "../../widgets/frame-title" },
-    { "path": "../../widgets/keyboard-toolbar" },
     { "path": "../../widgets/linked-doc" },
     { "path": "../../widgets/remote-selection" },
     { "path": "../../widgets/scroll-anchoring" },

blocksuite/affine/widgets/frame-title/package.json

@@ -11,6 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
@@ -24,7 +25,8 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",

blocksuite/affine/widgets/frame-title/src/view.ts

@@ -0,0 +1,23 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+
+import { frameTitleWidget } from './affine-frame-title-widget';
+import { effects } from './effects';
+
+export class FrameTitleViewExtension extends ViewExtensionProvider {
+  override name = 'affine-frame-title-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    if (context.scope === 'edgeless') {
+      context.register(frameTitleWidget);
+    }
+  }
+}

blocksuite/affine/widgets/frame-title/tsconfig.json

@@ -8,6 +8,7 @@
   "include": ["./src"],
   "references": [
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../model" },
     { "path": "../../rich-text" },
     { "path": "../../shared" },

blocksuite/affine/widgets/keyboard-toolbar/package.json

@@ -21,6 +21,7 @@
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-block-surface-ref": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-fragment-doc-title": "workspace:*",
     "@blocksuite/affine-inline-latex": "workspace:*",
     "@blocksuite/affine-inline-link": "workspace:*",
@@ -45,7 +46,8 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./view": "./src/view.ts"
   },
   "files": [
     "src",

blocksuite/affine/widgets/keyboard-toolbar/src/view.ts

@@ -0,0 +1,28 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@blocksuite/affine-ext-loader';
+import { IS_MOBILE } from '@blocksuite/global/env';
+
+import { effects } from './effects';
+import { keyboardToolbarWidget } from './widget';
+
+export class KeyboardToolbarViewExtension extends ViewExtensionProvider {
+  override name = 'affine-keyboard-toolbar-widget';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    if (
+      context.scope === 'mobile-page' ||
+      // Legacy mobile page
+      (context.scope === 'page' && IS_MOBILE)
+    ) {
+      context.register(keyboardToolbarWidget);
+    }
+  }
+}

blocksuite/affine/widgets/keyboard-toolbar/tsconfig.json

@@ -18,6 +18,7 @@
     { "path": "../../blocks/surface" },
     { "path": "../../blocks/surface-ref" },
     { "path": "../../components" },
+    { "path": "../../ext-loader" },
     { "path": "../../fragments/doc-title" },
     { "path": "../../inlines/latex" },
     { "path": "../../inlines/link" },

blocksuite/integration-test/src/__tests__/edgeless/frame.spec.ts

@@ -1,9 +1,7 @@
 import type { FrameBlockComponent } from '@blocksuite/affine/blocks/frame';
-import type {
+import type { EdgelessRootBlockComponent } from '@blocksuite/affine/blocks/root';
-  AffineFrameTitleWidget,
-  EdgelessRootBlockComponent,
-} from '@blocksuite/affine/blocks/root';
 import type { FrameBlockModel } from '@blocksuite/affine/model';
+import type { AffineFrameTitleWidget } from '@blocksuite/affine/widgets/frame-title';
 import { assertType } from '@blocksuite/global/utils';
 import { Text } from '@blocksuite/store';
 import { beforeEach, describe, expect, test } from 'vitest';

tools/utils/src/workspace.gen.ts

@@ -343,10 +343,7 @@ export const PackageList = [
       'blocksuite/affine/model',
       'blocksuite/affine/rich-text',
       'blocksuite/affine/shared',
-      'blocksuite/affine/widgets/edgeless-auto-connect',
       'blocksuite/affine/widgets/edgeless-toolbar',
-      'blocksuite/affine/widgets/frame-title',
-      'blocksuite/affine/widgets/keyboard-toolbar',
       'blocksuite/affine/widgets/linked-doc',
       'blocksuite/affine/widgets/remote-selection',
       'blocksuite/affine/widgets/scroll-anchoring',
@@ -803,6 +800,7 @@ export const PackageList = [
     name: '@blocksuite/affine-widget-frame-title',
     workspaceDependencies: [
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/model',
       'blocksuite/affine/rich-text',
       'blocksuite/affine/shared',
@@ -825,6 +823,7 @@ export const PackageList = [
       'blocksuite/affine/blocks/surface',
       'blocksuite/affine/blocks/surface-ref',
       'blocksuite/affine/components',
+      'blocksuite/affine/ext-loader',
       'blocksuite/affine/fragments/doc-title',
       'blocksuite/affine/inlines/latex',
       'blocksuite/affine/inlines/link',

yarn.lock

@@ -2859,10 +2859,7 @@ __metadata:
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-rich-text": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
-    "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*"
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
-    "@blocksuite/affine-widget-frame-title": "workspace:*"
-    "@blocksuite/affine-widget-keyboard-toolbar": "workspace:*"
     "@blocksuite/affine-widget-linked-doc": "workspace:*"
     "@blocksuite/affine-widget-remote-selection": "workspace:*"
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"
@@ -3710,6 +3707,7 @@ __metadata:
   resolution: "@blocksuite/affine-widget-frame-title@workspace:blocksuite/affine/widgets/frame-title"
   dependencies:
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
     "@blocksuite/affine-rich-text": "workspace:*"
     "@blocksuite/affine-shared": "workspace:*"
@@ -3738,6 +3736,7 @@ __metadata:
     "@blocksuite/affine-block-surface": "workspace:*"
     "@blocksuite/affine-block-surface-ref": "workspace:*"
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-ext-loader": "workspace:*"
     "@blocksuite/affine-fragment-doc-title": "workspace:*"
     "@blocksuite/affine-inline-latex": "workspace:*"
     "@blocksuite/affine-inline-link": "workspace:*"