feat(editor): edgeless toolbar widget package (#11064)

blocksuite/affine/all/package.json

@@ -46,6 +46,7 @@
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-drag-handle": "workspace:*",
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
     "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
@@ -104,6 +105,7 @@
     "./inlines/latex": "./src/inlines/latex.ts",
     "./widgets/drag-handle": "./src/widgets/drag-handle.ts",
     "./widgets/edgeless-auto-connect": "./src/widgets/edgeless-auto-connect.ts",
+    "./widgets/edgeless-toolbar": "./src/widgets/edgeless-toolbar.ts",
     "./widgets/frame-title": "./src/widgets/frame-title.ts",
     "./widgets/remote-selection": "./src/widgets/remote-selection.ts",
     "./widgets/scroll-anchoring": "./src/widgets/scroll-anchoring.ts",

blocksuite/affine/all/src/widgets/edgeless-toolbar.ts

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

blocksuite/affine/all/tsconfig.json

@@ -43,6 +43,7 @@
     { "path": "../shared" },
     { "path": "../widgets/widget-drag-handle" },
     { "path": "../widgets/widget-edgeless-auto-connect" },
+    { "path": "../widgets/widget-edgeless-toolbar" },
     { "path": "../widgets/widget-frame-title" },
     { "path": "../widgets/widget-remote-selection" },
     { "path": "../widgets/widget-scroll-anchoring" },

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

@@ -38,6 +38,7 @@
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-drag-handle": "workspace:*",
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
     "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",

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

@@ -1,3 +1,7 @@
+import {
+  type EdgelessToolbarSlots,
+  edgelessToolbarSlotsContext,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
 import { WithDisposable } from '@blocksuite/global/lit';
 import { ArrowRightSmallIcon } from '@blocksuite/icons/lit';
 import { consume } from '@lit/context';
@@ -5,11 +9,6 @@ import { css, html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import {
-  type EdgelessToolbarSlots,
-  edgelessToolbarSlotsContext,
-} from '../context.js';
-
 export class EdgelessSlideMenu extends WithDisposable(LitElement) {
   static override styles = css`
     :host {

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/mixins/tool.mixin.ts

@@ -1,4 +1,13 @@
 import type { ColorScheme } from '@blocksuite/affine-model';
+import {
+  createPopper,
+  edgelessToolbarContext,
+  type EdgelessToolbarSlots,
+  edgelessToolbarSlotsContext,
+  edgelessToolbarThemeContext,
+  type EdgelessToolbarWidget,
+  type MenuPopper,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
 import type {
   GfxToolsFullOption,
   GfxToolsFullOptionValue,
@@ -17,14 +26,6 @@ import type { LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 
 import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js';
-import { createPopper, type MenuPopper } from '../common/create-popper.js';
-import {
-  edgelessToolbarContext,
-  type EdgelessToolbarSlots,
-  edgelessToolbarSlotsContext,
-  edgelessToolbarThemeContext,
-} from '../context.js';
-import type { EdgelessToolbarWidget } from '../edgeless-toolbar.js';
 
 type ValueOf<T> = T[keyof T];
 

blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/note/note-tool-button.ts

@@ -1,3 +1,7 @@
+import {
+  createPopper,
+  type MenuPopper,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
 import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
 import { PageIcon } from '@blocksuite/icons/lit';
 import { effect } from '@preact/signals-core';
@@ -5,7 +9,6 @@ import { css, html, LitElement } from 'lit';
 import { state } from 'lit/decorators.js';
 
 import type { NoteToolOption } from '../../../gfx-tool/note-tool.js';
-import { createPopper, type MenuPopper } from '../common/create-popper.js';
 import { QuickToolMixin } from '../mixins/quick-tool.mixin.js';
 import type { EdgelessNoteMenu } from './note-menu.js';
 

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

@@ -1,6 +1,9 @@
+import {
+  QuickToolExtension,
+  SeniorToolExtension,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
 import { html } from 'lit';
 
-import { QuickToolExtension, SeniorToolExtension } from './extension/index.js';
 import { buildFrameDenseMenu } from './frame/frame-dense-menu.js';
 import { buildLinkDenseMenu } from './link/link-dense-menu.js';
 

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

@@ -1,5 +1,6 @@
 import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
 import { autoConnectWidget } from '@blocksuite/affine-widget-edgeless-auto-connect';
+import { edgelessToolbarWidget } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { frameTitleWidget } from '@blocksuite/affine-widget-frame-title';
 import { edgelessRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
 import {
@@ -20,7 +21,6 @@ import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from '../widgets/edgeless-zoom-to
 import { NOTE_SLICER_WIDGET } from './components/note-slicer/index.js';
 import { EDGELESS_DRAGGING_AREA_WIDGET } from './components/rects/edgeless-dragging-area-rect.js';
 import { EDGELESS_SELECTED_RECT_WIDGET } from './components/rects/edgeless-selected-rect.js';
-import { EDGELESS_TOOLBAR_WIDGET } from './components/toolbar/edgeless-toolbar.js';
 import { quickTools, seniorTools } from './components/toolbar/tools.js';
 import { EdgelessRootService } from './edgeless-root-service.js';
 
@@ -44,11 +44,6 @@ export const edgelessSelectedRectWidget = WidgetViewExtension(
   EDGELESS_SELECTED_RECT_WIDGET,
   literal`${unsafeStatic(EDGELESS_SELECTED_RECT_WIDGET)}`
 );
-export const edgelessToolbarWidget = WidgetViewExtension(
-  'affine:page',
-  EDGELESS_TOOLBAR_WIDGET,
-  literal`${unsafeStatic(EDGELESS_TOOLBAR_WIDGET)}`
-);
 
 class EdgelessLocker extends LifeCycleWatcher {
   static override key = 'edgeless-locker';

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

@@ -1,10 +1,9 @@
 import { effects as gfxShapeEffects } from '@blocksuite/affine-gfx-shape/effects';
 import { effects as gfxCanvasTextEffects } from '@blocksuite/affine-gfx-text/effects';
+import { effects as widgetEdgelessToolbarEffects } from '@blocksuite/affine-widget-edgeless-toolbar/effects';
 
 import { EdgelessAutoCompletePanel } from './edgeless/components/auto-complete/auto-complete-panel.js';
 import { EdgelessAutoComplete } from './edgeless/components/auto-complete/edgeless-auto-complete.js';
-import { EdgelessToolIconButton } from './edgeless/components/buttons/tool-icon-button.js';
-import { EdgelessToolbarButton } from './edgeless/components/buttons/toolbar-button.js';
 import { EdgelessConnectorHandle } from './edgeless/components/connector/connector-handle.js';
 import {
   NOTE_SLICER_WIDGET,
@@ -36,7 +35,6 @@ import { ToolbarArrowUpIcon } from './edgeless/components/toolbar/common/toolbar
 import { EdgelessConnectorMenu } from './edgeless/components/toolbar/connector/connector-menu.js';
 import { EdgelessConnectorToolButton } from './edgeless/components/toolbar/connector/connector-tool-button.js';
 import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
-import { EdgelessToolbarWidget } from './edgeless/components/toolbar/edgeless-toolbar.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';
@@ -63,7 +61,6 @@ import { EdgelessTextMenu } from './edgeless/components/toolbar/text/text-menu.j
 import {
   AffineImageToolbarWidget,
   AffineModalWidget,
-  EDGELESS_TOOLBAR_WIDGET,
   EdgelessRootBlockComponent,
   EdgelessRootPreviewBlockComponent,
   PageRootBlockComponent,
@@ -103,6 +100,7 @@ export function effects() {
   // Run other effects
   widgetMobileToolbarEffects();
   widgetLinkedDocEffects();
+  widgetEdgelessToolbarEffects();
 
   // Register components by category
   registerRootComponents();
@@ -183,9 +181,6 @@ function registerEdgelessToolbarComponents() {
   customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
 
   // Toolbar components
-  customElements.define(EDGELESS_TOOLBAR_WIDGET, EdgelessToolbarWidget);
-  customElements.define('edgeless-toolbar-button', EdgelessToolbarButton);
-  customElements.define('edgeless-tool-icon-button', EdgelessToolIconButton);
   customElements.define(
     'edgeless-toolbar-shape-draggable',
     EdgelessToolbarShapeDraggable
@@ -290,8 +285,6 @@ declare global {
     'affine-edgeless-root-preview': EdgelessRootPreviewBlockComponent;
     'edgeless-auto-complete-panel': EdgelessAutoCompletePanel;
     'edgeless-auto-complete': EdgelessAutoComplete;
-    'edgeless-tool-icon-button': EdgelessToolIconButton;
-    'edgeless-toolbar-button': EdgelessToolbarButton;
     'edgeless-connector-handle': EdgelessConnectorHandle;
     'note-slicer': NoteSlicer;
     'edgeless-font-family-panel': EdgelessFontFamilyPanel;
@@ -308,7 +301,6 @@ declare global {
     'edgeless-selected-rect': EdgelessSelectedRectWidget;
     'edgeless-connector-label-editor': EdgelessConnectorLabelEditor;
     'edgeless-group-title-editor': EdgelessGroupTitleEditor;
-    'edgeless-toolbar-widget': EdgelessToolbarWidget;
     'presentation-toolbar': PresentationToolbar;
     'edgeless-brush-menu': EdgelessBrushMenu;
     'edgeless-brush-tool-button': EdgelessBrushToolButton;

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

@@ -1,4 +1,3 @@
-export { EDGELESS_TOOLBAR_WIDGET } from '../edgeless/components/toolbar/edgeless-toolbar.js';
 export { AffineEdgelessZoomToolbarWidget } from './edgeless-zoom-toolbar/index.js';
 export { AffineImageToolbarWidget } from './image-toolbar/index.js';
 export { AffineInnerModalWidget } from './inner-modal/inner-modal.js';

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

@@ -35,6 +35,7 @@
     { "path": "../../shared" },
     { "path": "../../widgets/widget-drag-handle" },
     { "path": "../../widgets/widget-edgeless-auto-connect" },
+    { "path": "../../widgets/widget-edgeless-toolbar" },
     { "path": "../../widgets/widget-frame-title" },
     { "path": "../../widgets/widget-remote-selection" },
     { "path": "../../widgets/widget-scroll-anchoring" },

blocksuite/affine/widgets/widget-edgeless-toolbar/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@blocksuite/affine-widget-edgeless-toolbar",
+  "description": "Affine edgeless toolbar widget.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.6",
+    "@floating-ui/dom": "^1.6.13",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
+    "rxjs": "^7.8.1"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.20.0"
+}

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

@@ -15,7 +15,7 @@ import {
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
-import { WidgetComponent } from '@blocksuite/block-std';
+import { WidgetComponent, WidgetViewExtension } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import {
   ArrowLeftSmallIcon,
@@ -29,16 +29,17 @@ import { baseTheme, cssVar } from '@toeverything/theme';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { cache } from 'lit/directives/cache.js';
+import { literal, unsafeStatic } from 'lit/static-html.js';
 import debounce from 'lodash-es/debounce';
 import { Subject } from 'rxjs';
 
-import type { MenuPopper } from './common/create-popper.js';
 import {
   edgelessToolbarContext,
   type EdgelessToolbarSlots,
   edgelessToolbarSlotsContext,
   edgelessToolbarThemeContext,
 } from './context.js';
+import type { MenuPopper } from './create-popper.js';
 import {
   QuickToolIdentifier,
   SeniorToolIdentifier,
@@ -431,7 +432,8 @@ export class EdgelessToolbarWidget extends WidgetComponent<RootBlockModel> {
   }
 
   get edgelessTool() {
-    return this.gfx.tool.currentToolOption$.value;
+    // FIXME: maybe we need to fix this type
+    return this.gfx.tool.currentToolOption$.value as { type: string };
   }
 
   get gfx() {
@@ -610,6 +612,7 @@ export class EdgelessToolbarWidget extends WidgetComponent<RootBlockModel> {
               }
               return;
             }
+            // @ts-expect-error FIXME: resolve after gfx tool refactor
             this.gfx.tool.setTool('default');
           },
         },
@@ -721,3 +724,9 @@ export class EdgelessToolbarWidget extends WidgetComponent<RootBlockModel> {
   @query('.edgeless-toolbar-container')
   accessor toolbarContainer!: HTMLElement;
 }
+
+export const edgelessToolbarWidget = WidgetViewExtension(
+  'affine:page',
+  EDGELESS_TOOLBAR_WIDGET,
+  literal`${unsafeStatic(EDGELESS_TOOLBAR_WIDGET)}`
+);

blocksuite/affine/widgets/widget-edgeless-toolbar/src/effects.ts

@@ -0,0 +1,20 @@
+import { EdgelessToolIconButton } from './button/tool-icon-button';
+import { EdgelessToolbarButton } from './button/toolbar-button';
+import {
+  EDGELESS_TOOLBAR_WIDGET,
+  EdgelessToolbarWidget,
+} from './edgeless-toolbar';
+
+export function effects() {
+  customElements.define(EDGELESS_TOOLBAR_WIDGET, EdgelessToolbarWidget);
+  customElements.define('edgeless-toolbar-button', EdgelessToolbarButton);
+  customElements.define('edgeless-tool-icon-button', EdgelessToolIconButton);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-tool-icon-button': EdgelessToolIconButton;
+    'edgeless-toolbar-button': EdgelessToolbarButton;
+    'edgeless-toolbar-widget': EdgelessToolbarWidget;
+  }
+}

blocksuite/affine/widgets/widget-edgeless-toolbar/src/index.ts

@@ -0,0 +1,4 @@
+export * from './context';
+export * from './create-popper';
+export * from './edgeless-toolbar';
+export * from './extension';

blocksuite/affine/widgets/widget-edgeless-toolbar/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../blocks/block-surface" },
+    { "path": "../../components" },
+    { "path": "../../model" },
+    { "path": "../../rich-text" },
+    { "path": "../../shared" },
+    { "path": "../../../framework/block-std" },
+    { "path": "../../../framework/global" }
+  ]
+}

tools/utils/src/workspace.gen.ts

@@ -41,6 +41,7 @@ export const PackageList = [
       'blocksuite/affine/shared',
       'blocksuite/affine/widgets/widget-drag-handle',
       'blocksuite/affine/widgets/widget-edgeless-auto-connect',
+      'blocksuite/affine/widgets/widget-edgeless-toolbar',
       'blocksuite/affine/widgets/widget-frame-title',
       'blocksuite/affine/widgets/widget-remote-selection',
       'blocksuite/affine/widgets/widget-scroll-anchoring',
@@ -315,6 +316,7 @@ export const PackageList = [
       'blocksuite/affine/shared',
       'blocksuite/affine/widgets/widget-drag-handle',
       'blocksuite/affine/widgets/widget-edgeless-auto-connect',
+      'blocksuite/affine/widgets/widget-edgeless-toolbar',
       'blocksuite/affine/widgets/widget-frame-title',
       'blocksuite/affine/widgets/widget-remote-selection',
       'blocksuite/affine/widgets/widget-scroll-anchoring',
@@ -605,6 +607,19 @@ export const PackageList = [
       'blocksuite/framework/global',
     ],
   },
+  {
+    location: 'blocksuite/affine/widgets/widget-edgeless-toolbar',
+    name: '@blocksuite/affine-widget-edgeless-toolbar',
+    workspaceDependencies: [
+      'blocksuite/affine/blocks/block-surface',
+      'blocksuite/affine/components',
+      'blocksuite/affine/model',
+      'blocksuite/affine/rich-text',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/block-std',
+      'blocksuite/framework/global',
+    ],
+  },
   {
     location: 'blocksuite/affine/widgets/widget-frame-title',
     name: '@blocksuite/affine-widget-frame-title',
@@ -1049,6 +1064,7 @@ export type PackageName =
   | '@blocksuite/affine-shared'
   | '@blocksuite/affine-widget-drag-handle'
   | '@blocksuite/affine-widget-edgeless-auto-connect'
+  | '@blocksuite/affine-widget-edgeless-toolbar'
   | '@blocksuite/affine-widget-frame-title'
   | '@blocksuite/affine-widget-remote-selection'
   | '@blocksuite/affine-widget-scroll-anchoring'

tsconfig.json

@@ -88,6 +88,7 @@
     { "path": "./blocksuite/affine/shared" },
     { "path": "./blocksuite/affine/widgets/widget-drag-handle" },
     { "path": "./blocksuite/affine/widgets/widget-edgeless-auto-connect" },
+    { "path": "./blocksuite/affine/widgets/widget-edgeless-toolbar" },
     { "path": "./blocksuite/affine/widgets/widget-frame-title" },
     { "path": "./blocksuite/affine/widgets/widget-remote-selection" },
     { "path": "./blocksuite/affine/widgets/widget-scroll-anchoring" },

yarn.lock

@@ -2750,6 +2750,7 @@ __metadata:
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/affine-widget-drag-handle": "workspace:*"
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*"
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
     "@blocksuite/affine-widget-frame-title": "workspace:*"
     "@blocksuite/affine-widget-remote-selection": "workspace:*"
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"
@@ -3331,6 +3332,29 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-widget-edgeless-toolbar@workspace:*, @blocksuite/affine-widget-edgeless-toolbar@workspace:blocksuite/affine/widgets/widget-edgeless-toolbar":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-widget-edgeless-toolbar@workspace:blocksuite/affine/widgets/widget-edgeless-toolbar"
+  dependencies:
+    "@blocksuite/affine-block-surface": "workspace:*"
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-rich-text": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/block-std": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@blocksuite/icons": "npm:^2.2.6"
+    "@floating-ui/dom": "npm:^1.6.13"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.12"
+    "@types/lodash-es": "npm:^4.17.12"
+    lit: "npm:^3.2.0"
+    lodash-es: "npm:^4.17.21"
+    rxjs: "npm:^7.8.1"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-widget-frame-title@workspace:*, @blocksuite/affine-widget-frame-title@workspace:blocksuite/affine/widgets/widget-frame-title":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-widget-frame-title@workspace:blocksuite/affine/widgets/widget-frame-title"
@@ -3473,6 +3497,7 @@ __metadata:
     "@blocksuite/affine-shared": "workspace:*"
     "@blocksuite/affine-widget-drag-handle": "workspace:*"
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*"
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
     "@blocksuite/affine-widget-frame-title": "workspace:*"
     "@blocksuite/affine-widget-remote-selection": "workspace:*"
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"