refactor(editor): move frame toolbar config and components to its package (#11084)

blocksuite/affine/blocks/block-edgeless-text/package.json

@@ -16,6 +16,7 @@
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",
     "@blocksuite/icons": "^2.2.6",

blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/config.ts

@@ -2,7 +2,7 @@ import { EdgelessTextBlockModel } from '@blocksuite/affine-model';
 import { type ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
 import { createTextActions } from '@blocksuite/affine-widget-edgeless-toolbar';
 
-export const builtinEdgelessTextToolbarConfig = {
+export const edgelessTextToolbarConfig = {
   // No need to adjust element bounds, which updates itself using ResizeObserver
   actions: createTextActions(EdgelessTextBlockModel, 'edgeless-text'),
 

blocksuite/affine/blocks/block-edgeless-text/src/edgelss-toolbar/index.ts

@@ -0,0 +1 @@
+export * from './config';

blocksuite/affine/blocks/block-edgeless-text/src/index.ts

@@ -1,3 +1,4 @@
 export * from './commands';
 export * from './edgeless-text-block.js';
 export * from './edgeless-text-spec.js';
+export * from './edgelss-toolbar';

blocksuite/affine/blocks/block-edgeless-text/tsconfig.json

@@ -13,6 +13,7 @@
     { "path": "../../model" },
     { "path": "../../rich-text" },
     { "path": "../../shared" },
+    { "path": "../../widgets/widget-edgeless-toolbar" },
     { "path": "../../../framework/block-std" },
     { "path": "../../../framework/global" },
     { "path": "../../../framework/store" }

blocksuite/affine/blocks/block-frame/package.json

@@ -14,6 +14,7 @@
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
     "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",

blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-dense-menu.ts

@@ -1,8 +1,8 @@
-import { EdgelessFrameManagerIdentifier } from '@blocksuite/affine-block-frame';
 import { menu } from '@blocksuite/affine-components/context-menu';
+import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { FrameIcon } from '@blocksuite/icons/lit';
 
-import type { DenseMenuBuilder } from '../common/type.js';
+import { EdgelessFrameManagerIdentifier } from '../frame-manager.js';
 import { FrameConfig } from './config.js';
 
 export const buildFrameDenseMenu: DenseMenuBuilder = (edgeless, gfx) =>
@@ -22,6 +22,7 @@ export const buildFrameDenseMenu: DenseMenuBuilder = (edgeless, gfx) =>
             name: `Slide ${config.name}`,
             select: () => {
               const frame = edgeless.std.get(EdgelessFrameManagerIdentifier);
+              // @ts-expect-error FIXME: resolve after gfx tool refactor
               gfx.tool.setTool('default');
               frame.createFrameOnViewportCenter(config.wh);
             },

blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/frame-menu.ts

@@ -1,9 +1,9 @@
-import { EdgelessFrameManagerIdentifier } from '@blocksuite/affine-block-frame';
 import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { css, html, LitElement } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
+import { EdgelessFrameManagerIdentifier } from '../frame-manager.js';
 import { FrameConfig } from './config.js';
 
 export class EdgelessFrameMenu extends EdgelessToolbarToolMixin(LitElement) {
@@ -84,6 +84,7 @@ export class EdgelessFrameMenu extends EdgelessToolbarToolMixin(LitElement) {
             (item, index) => html`
               <div
                 @click=${() => {
+                  // @ts-expect-error FIXME: resolve after gfx tool refactor
                   gfx.tool.setTool('default');
                   frameManager.createFrameOnViewportCenter(item.wh);
                 }}

blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/index.ts

@@ -0,0 +1,5 @@
+export * from './config';
+export * from './frame-dense-menu';
+export * from './frame-menu';
+export * from './frame-tool-button';
+export * from './quick-tool';

blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/quick-tool.ts

@@ -0,0 +1,15 @@
+import { QuickToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+import { buildFrameDenseMenu } from './frame-dense-menu';
+
+export const frameQuickTool = QuickToolExtension('frame', ({ block, gfx }) => {
+  return {
+    type: 'frame',
+    content: html`<edgeless-frame-tool-button
+      .edgeless=${block}
+    ></edgeless-frame-tool-button>`,
+    menu: buildFrameDenseMenu(block, gfx),
+    enable: !block.doc.readonly,
+  };
+});

blocksuite/affine/blocks/block-frame/src/effects.ts

@@ -1,5 +1,16 @@
+import { EdgelessFrameMenu, EdgelessFrameToolButton } from './edgeless-toolbar';
 import { FrameBlockComponent } from './frame-block';
 
 export function effects() {
   customElements.define('affine-frame', FrameBlockComponent);
+  customElements.define('edgeless-frame-tool-button', EdgelessFrameToolButton);
+  customElements.define('edgeless-frame-menu', EdgelessFrameMenu);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-frame': FrameBlockComponent;
+    'edgeless-frame-tool-button': EdgelessFrameToolButton;
+    'edgeless-frame-menu': EdgelessFrameMenu;
+  }
 }

blocksuite/affine/blocks/block-frame/src/index.ts

@@ -1,6 +1,7 @@
 import type { FrameTool } from './frame-tool';
 import type { PresentTool, PresentToolOption } from './preset-tool';
 
+export * from './edgeless-toolbar';
 export * from './frame-block';
 export * from './frame-highlight-manager';
 export * from './frame-manager';

blocksuite/affine/blocks/block-frame/tsconfig.json

@@ -11,6 +11,7 @@
     { "path": "../../components" },
     { "path": "../../model" },
     { "path": "../../shared" },
+    { "path": "../../widgets/widget-edgeless-toolbar" },
     { "path": "../../widgets/widget-frame-title" },
     { "path": "../../../framework/block-std" },
     { "path": "../../../framework/global" },

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/common/type.ts

@@ -1,11 +0,0 @@
-import type { MenuConfig } from '@blocksuite/affine-components/context-menu';
-import type { BlockComponent } from '@blocksuite/block-std';
-import type { GfxController } from '@blocksuite/block-std/gfx';
-
-/**
- * Helper function to build a menu configuration for a tool in dense mode
- */
-export type DenseMenuBuilder = (
-  edgeless: BlockComponent,
-  gfx: GfxController
-) => MenuConfig;

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/connector/connector-dense-menu.ts

@@ -1,14 +1,13 @@
 import { menu } from '@blocksuite/affine-components/context-menu';
 import { ConnectorMode } from '@blocksuite/affine-model';
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
+import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar';
 import {
   ConnectorCIcon,
   ConnectorEIcon,
   ConnectorLIcon,
 } from '@blocksuite/icons/lit';
 
-import type { DenseMenuBuilder } from '../common/type.js';
-
 export const buildConnectorDenseMenu: DenseMenuBuilder = (edgeless, gfx) => {
   const prevMode =
     edgeless.std.get(EditPropsStore).lastProps$.value.connector.mode;

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/lasso/lasso-dense-menu.ts

@@ -1,7 +1,7 @@
 import { menu } from '@blocksuite/affine-components/context-menu';
 import { LassoMode } from '@blocksuite/affine-shared/types';
+import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar';
 
-import type { DenseMenuBuilder } from '../common/type.js';
 import { LassoFreeHandIcon, LassoPolygonalIcon } from './icons.js';
 
 export const buildLassoDenseMenu: DenseMenuBuilder = (_, gfx) => {

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/link/link-dense-menu.ts

@@ -2,8 +2,7 @@ import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmar
 import { menu } from '@blocksuite/affine-components/context-menu';
 import { LinkIcon } from '@blocksuite/affine-components/icons';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';
-
-import type { DenseMenuBuilder } from '../common/type.js';
+import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar';
 
 export const buildLinkDenseMenu: DenseMenuBuilder = edgeless =>
   menu.action({

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts

@@ -1,10 +1,11 @@
+import { frameQuickTool } from '@blocksuite/affine-block-frame';
+import { shapeSeniorTool } from '@blocksuite/affine-gfx-shape';
 import {
   QuickToolExtension,
   SeniorToolExtension,
 } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { html } from 'lit';
 
-import { buildFrameDenseMenu } from './frame/frame-dense-menu.js';
 import { buildLinkDenseMenu } from './link/link-dense-menu.js';
 
 const defaultQuickTool = QuickToolExtension('default', ({ block }) => {
@@ -16,17 +17,6 @@ const defaultQuickTool = QuickToolExtension('default', ({ block }) => {
   };
 });
 
-const frameQuickTool = QuickToolExtension('frame', ({ block, gfx }) => {
-  return {
-    type: 'frame',
-    content: html`<edgeless-frame-tool-button
-      .edgeless=${block}
-    ></edgeless-frame-tool-button>`,
-    menu: buildFrameDenseMenu(block, gfx),
-    enable: !block.doc.readonly,
-  };
-});
-
 const connectorQuickTool = QuickToolExtension('connector', ({ block }) => {
   return {
     type: 'connector',
@@ -69,19 +59,6 @@ const penSeniorTool = SeniorToolExtension('pen', ({ block }) => {
   };
 });
 
-const shapeSeniorTool = SeniorToolExtension(
-  'shape',
-  ({ block, toolbarContainer }) => {
-    return {
-      name: 'Shape',
-      content: html`<edgeless-shape-tool-button
-        .edgeless=${block}
-        .toolbarContainer=${toolbarContainer}
-      ></edgeless-shape-tool-button>`,
-    };
-  }
-);
-
 const mindMapSeniorTool = SeniorToolExtension(
   'mindMap',
   ({ block, toolbarContainer }) => {

blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts

@@ -1,3 +1,4 @@
+import { edgelessTextToolbarConfig } from '@blocksuite/affine-block-edgeless-text';
 import { frameToolbarExtension } from '@blocksuite/affine-block-frame';
 import { textToolbarConfig } from '@blocksuite/affine-gfx-text';
 import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
@@ -6,7 +7,6 @@ import type { ExtensionType } from '@blocksuite/store';
 
 import { builtinBrushToolbarConfig } from './brush';
 import { builtinConnectorToolbarConfig } from './connector';
-import { builtinEdgelessTextToolbarConfig } from './edgeless-text';
 import { builtinGroupToolbarConfig } from './group';
 import { builtinMindmapToolbarConfig } from './mindmap';
 import { builtinLockedToolbarConfig, builtinMiscToolbarConfig } from './misc';
@@ -42,7 +42,7 @@ export const EdgelessElementToolbarExtension: ExtensionType[] = [
 
   ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:edgeless-text'),
-    config: builtinEdgelessTextToolbarConfig,
+    config: edgelessTextToolbarConfig,
   }),
 
   ToolbarModuleExtension({

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

@@ -36,8 +36,6 @@ import { EdgelessConnectorMenu } from './edgeless/components/toolbar/connector/c
 import { EdgelessConnectorToolButton } from './edgeless/components/toolbar/connector/connector-tool-button.js';
 import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
 import { EdgelessEraserToolButton } from './edgeless/components/toolbar/eraser/eraser-tool-button.js';
-import { EdgelessFrameMenu } from './edgeless/components/toolbar/frame/frame-menu.js';
-import { EdgelessFrameToolButton } from './edgeless/components/toolbar/frame/frame-tool-button.js';
 import { EdgelessLassoToolButton } from './edgeless/components/toolbar/lasso/lasso-tool-button.js';
 import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
 import { MindMapPlaceholder } from './edgeless/components/toolbar/mindmap/mindmap-importing-placeholder.js';
@@ -157,7 +155,6 @@ function registerEdgelessToolbarComponents() {
     'edgeless-eraser-tool-button',
     EdgelessEraserToolButton
   );
-  customElements.define('edgeless-frame-tool-button', EdgelessFrameToolButton);
   customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
   customElements.define('edgeless-lasso-tool-button', EdgelessLassoToolButton);
   customElements.define(
@@ -170,7 +167,6 @@ function registerEdgelessToolbarComponents() {
   // Menus
   customElements.define('edgeless-brush-menu', EdgelessBrushMenu);
   customElements.define('edgeless-connector-menu', EdgelessConnectorMenu);
-  customElements.define('edgeless-frame-menu', EdgelessFrameMenu);
   customElements.define('edgeless-mindmap-menu', EdgelessMindmapMenu);
   customElements.define('edgeless-note-menu', EdgelessNoteMenu);
   customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
@@ -301,8 +297,6 @@ declare global {
     'edgeless-connector-tool-button': EdgelessConnectorToolButton;
     'edgeless-default-tool-button': EdgelessDefaultToolButton;
     'edgeless-eraser-tool-button': EdgelessEraserToolButton;
-    'edgeless-frame-menu': EdgelessFrameMenu;
-    'edgeless-frame-tool-button': EdgelessFrameToolButton;
     'edgeless-lasso-tool-button': EdgelessLassoToolButton;
     'edgeless-link-tool-button': EdgelessLinkToolButton;
     'mindmap-import-placeholder': MindMapPlaceholder;

blocksuite/affine/gfx/shape/src/toolbar/index.ts

@@ -1,3 +1,4 @@
 export * from './config';
 export * from './icons';
+export * from './senior-tool';
 export * from './shape-menu-config';

blocksuite/affine/gfx/shape/src/toolbar/senior-tool.ts

@@ -0,0 +1,15 @@
+import { SeniorToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+export const shapeSeniorTool = SeniorToolExtension(
+  'shape',
+  ({ block, toolbarContainer }) => {
+    return {
+      name: 'Shape',
+      content: html`<edgeless-shape-tool-button
+        .edgeless=${block}
+        .toolbarContainer=${toolbarContainer}
+      ></edgeless-shape-tool-button>`,
+    };
+  }
+);

blocksuite/affine/widgets/widget-edgeless-toolbar/src/config/types.ts

@@ -1,3 +1,6 @@
+import type { MenuConfig } from '@blocksuite/affine-components/context-menu';
+import type { BlockComponent } from '@blocksuite/block-std';
+import type { GfxController } from '@blocksuite/block-std/gfx';
 import type { TemplateResult } from 'lit';
 
 export type MenuItem<T> = {
@@ -15,3 +18,11 @@ export type Menu<T> = {
   currentValue: T;
   onPick: (value: T) => void;
 };
+
+/**
+ * Helper function to build a menu configuration for a tool in dense mode
+ */
+export type DenseMenuBuilder = (
+  edgeless: BlockComponent,
+  gfx: GfxController
+) => MenuConfig;