From 8a9cff9150dd253129438351f82bb2dcaab6b188 Mon Sep 17 00:00:00 2001
From: Fangdun Tsai <fundon@pindash.io>
Date: Tue, 7 Jan 2025 14:31:20 +0800
Subject: [PATCH] feat(editor): add affine toolbar widget

---
 blocksuite/affine/widget-toolbar/package.json | 35 +++++++++++++++++++
 .../affine/widget-toolbar/src/effects.ts      | 11 ++++++
 blocksuite/affine/widget-toolbar/src/index.ts |  1 +
 .../affine/widget-toolbar/src/toolbar.ts      |  5 +++
 .../affine/widget-toolbar/tsconfig.json       | 15 ++++++++
 blocksuite/blocks/package.json                |  1 +
 blocksuite/blocks/src/effects.ts              |  2 ++
 .../root-block/edgeless/edgeless-root-spec.ts |  2 ++
 .../src/root-block/page/page-root-spec.ts     |  2 ++
 blocksuite/blocks/tsconfig.json               |  1 +
 tools/utils/src/workspace.gen.ts              | 12 +++++++
 tsconfig.json                                 |  1 +
 yarn.lock                                     | 15 ++++++++
 13 files changed, 103 insertions(+)
 create mode 100644 blocksuite/affine/widget-toolbar/package.json
 create mode 100644 blocksuite/affine/widget-toolbar/src/effects.ts
 create mode 100644 blocksuite/affine/widget-toolbar/src/index.ts
 create mode 100644 blocksuite/affine/widget-toolbar/src/toolbar.ts
 create mode 100644 blocksuite/affine/widget-toolbar/tsconfig.json

diff --git a/blocksuite/affine/widget-toolbar/package.json b/blocksuite/affine/widget-toolbar/package.json
new file mode 100644
index 0000000000000..78f751a617508
--- /dev/null
+++ b/blocksuite/affine/widget-toolbar/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@blocksuite/affine-widget-toolbar",
+  "description": "Affine toolbar 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:*",
+    "@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/affine/widget-toolbar/src/effects.ts b/blocksuite/affine/widget-toolbar/src/effects.ts
new file mode 100644
index 0000000000000..8dcc6c2dc318c
--- /dev/null
+++ b/blocksuite/affine/widget-toolbar/src/effects.ts
@@ -0,0 +1,11 @@
+import { AFFINE_TOOLBAR_WIDGET, AffineToolbarWidget } from './toolbar';
+
+export function effects() {
+  customElements.define(AFFINE_TOOLBAR_WIDGET, AffineToolbarWidget);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [AFFINE_TOOLBAR_WIDGET]: AffineToolbarWidget;
+  }
+}
diff --git a/blocksuite/affine/widget-toolbar/src/index.ts b/blocksuite/affine/widget-toolbar/src/index.ts
new file mode 100644
index 0000000000000..316a52a324ed7
--- /dev/null
+++ b/blocksuite/affine/widget-toolbar/src/index.ts
@@ -0,0 +1 @@
+export * from './toolbar';
diff --git a/blocksuite/affine/widget-toolbar/src/toolbar.ts b/blocksuite/affine/widget-toolbar/src/toolbar.ts
new file mode 100644
index 0000000000000..b6e8472d11df2
--- /dev/null
+++ b/blocksuite/affine/widget-toolbar/src/toolbar.ts
@@ -0,0 +1,5 @@
+import { WidgetComponent } from '@blocksuite/block-std';
+
+export const AFFINE_TOOLBAR_WIDGET = 'affine-toolbar-widget';
+
+export class AffineToolbarWidget extends WidgetComponent {}
diff --git a/blocksuite/affine/widget-toolbar/tsconfig.json b/blocksuite/affine/widget-toolbar/tsconfig.json
new file mode 100644
index 0000000000000..50310f2829f8a
--- /dev/null
+++ b/blocksuite/affine/widget-toolbar/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./dist/",
+    "noEmit": false
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../model" },
+    { "path": "../shared" },
+    { "path": "../../framework/block-std" },
+    { "path": "../../framework/global" }
+  ]
+}
diff --git a/blocksuite/blocks/package.json b/blocksuite/blocks/package.json
index 11bfb851f0bc6..aa4f19ed02957 100644
--- a/blocksuite/blocks/package.json
+++ b/blocksuite/blocks/package.json
@@ -37,6 +37,7 @@
     "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
+    "@blocksuite/affine-widget-toolbar": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/data-view": "workspace:*",
     "@blocksuite/global": "workspace:*",
diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts
index d3524020ad813..6b435172ae5f3 100644
--- a/blocksuite/blocks/src/effects.ts
+++ b/blocksuite/blocks/src/effects.ts
@@ -34,6 +34,7 @@ import { effects as widgetDragHandleEffects } from '@blocksuite/affine-widget-dr
 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 widgetToolbarEffects } from '@blocksuite/affine-widget-toolbar/effects';
 import type { BlockComponent } from '@blocksuite/block-std';
 import { effects as stdEffects } from '@blocksuite/block-std/effects';
 import { effects as dataViewEffects } from '@blocksuite/data-view/effects';
@@ -223,6 +224,7 @@ export function effects() {
   widgetEdgelessElementToolbarEffects();
   widgetRemoteSelectionEffects();
   widgetDragHandleEffects();
+  widgetToolbarEffects();
   dataViewEffects();
 
   customElements.define('affine-page-root', PageRootBlockComponent);
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 5d6ebf9d03eab..461a54eaf0a89 100644
--- a/blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts
@@ -13,6 +13,7 @@ import {
   AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
 } from '@blocksuite/affine-widget-remote-selection';
 import { AFFINE_SCROLL_ANCHORING_WIDGET } from '@blocksuite/affine-widget-scroll-anchoring';
+import { AFFINE_TOOLBAR_WIDGET } from '@blocksuite/affine-widget-toolbar';
 import {
   BlockServiceWatcher,
   BlockViewExtension,
@@ -80,6 +81,7 @@ export const edgelessRootWidgetViewMap = {
     AFFINE_EDGELESS_AUTO_CONNECT_WIDGET
   )}`,
   [AFFINE_SCROLL_ANCHORING_WIDGET]: literal`${unsafeStatic(AFFINE_SCROLL_ANCHORING_WIDGET)}`,
+  [AFFINE_TOOLBAR_WIDGET]: literal`${unsafeStatic(AFFINE_TOOLBAR_WIDGET)}`,
   [EDGELESS_DRAGGING_AREA_WIDGET]: literal`${unsafeStatic(EDGELESS_DRAGGING_AREA_WIDGET)}`,
   [NOTE_SLICER_WIDGET]: literal`${unsafeStatic(NOTE_SLICER_WIDGET)}`,
   [EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET]: literal`${unsafeStatic(EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET)}`,
diff --git a/blocksuite/blocks/src/root-block/page/page-root-spec.ts b/blocksuite/blocks/src/root-block/page/page-root-spec.ts
index 96e772383cfc6..c7ae87d84ed08 100644
--- a/blocksuite/blocks/src/root-block/page/page-root-spec.ts
+++ b/blocksuite/blocks/src/root-block/page/page-root-spec.ts
@@ -9,6 +9,7 @@ import {
 import { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
 import { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from '@blocksuite/affine-widget-remote-selection';
 import { AFFINE_SCROLL_ANCHORING_WIDGET } from '@blocksuite/affine-widget-scroll-anchoring';
+import { AFFINE_TOOLBAR_WIDGET } from '@blocksuite/affine-widget-toolbar';
 import {
   BlockViewExtension,
   CommandExtension,
@@ -61,6 +62,7 @@ export const pageRootWidgetViewMap = {
     AFFINE_VIEWPORT_OVERLAY_WIDGET
   )}`,
   [AFFINE_SCROLL_ANCHORING_WIDGET]: literal`${unsafeStatic(AFFINE_SCROLL_ANCHORING_WIDGET)}`,
+  [AFFINE_TOOLBAR_WIDGET]: literal`${unsafeStatic(AFFINE_TOOLBAR_WIDGET)}`,
 };
 
 const PageCommonExtension: ExtensionType[] = [
diff --git a/blocksuite/blocks/tsconfig.json b/blocksuite/blocks/tsconfig.json
index 06299daf0f6f4..1b853b4f763b8 100644
--- a/blocksuite/blocks/tsconfig.json
+++ b/blocksuite/blocks/tsconfig.json
@@ -30,6 +30,7 @@
     { "path": "../affine/widget-frame-title" },
     { "path": "../affine/widget-remote-selection" },
     { "path": "../affine/widget-scroll-anchoring" },
+    { "path": "../affine/widget-toolbar" },
     { "path": "../framework/block-std" },
     { "path": "../affine/data-view" },
     { "path": "../framework/global" },
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index 92cec7e22f244..c51def7a12d09 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -326,6 +326,16 @@ export const PackageList = [
       'blocksuite/framework/global',
     ],
   },
+  {
+    location: 'blocksuite/affine/widget-toolbar',
+    name: '@blocksuite/affine-widget-toolbar',
+    workspaceDependencies: [
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/block-std',
+      'blocksuite/framework/global',
+    ],
+  },
   {
     location: 'blocksuite/blocks',
     name: '@blocksuite/blocks',
@@ -353,6 +363,7 @@ export const PackageList = [
       'blocksuite/affine/widget-frame-title',
       'blocksuite/affine/widget-remote-selection',
       'blocksuite/affine/widget-scroll-anchoring',
+      'blocksuite/affine/widget-toolbar',
       'blocksuite/framework/block-std',
       'blocksuite/affine/data-view',
       'blocksuite/framework/global',
@@ -719,6 +730,7 @@ export type PackageName =
   | '@blocksuite/affine-widget-frame-title'
   | '@blocksuite/affine-widget-remote-selection'
   | '@blocksuite/affine-widget-scroll-anchoring'
+  | '@blocksuite/affine-widget-toolbar'
   | '@blocksuite/blocks'
   | '@blocksuite/block-std'
   | '@blocksuite/global'
diff --git a/tsconfig.json b/tsconfig.json
index 3d9a96ba42326..49b2cfc597c2e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -75,6 +75,7 @@
     { "path": "./blocksuite/affine/widget-frame-title" },
     { "path": "./blocksuite/affine/widget-remote-selection" },
     { "path": "./blocksuite/affine/widget-scroll-anchoring" },
+    { "path": "./blocksuite/affine/widget-toolbar" },
     { "path": "./blocksuite/blocks" },
     { "path": "./blocksuite/framework/block-std" },
     { "path": "./blocksuite/framework/global" },
diff --git a/yarn.lock b/yarn.lock
index e1a5374248759..26a531a0b32c5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3796,6 +3796,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-widget-toolbar@workspace:*, @blocksuite/affine-widget-toolbar@workspace:blocksuite/affine/widget-toolbar":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-widget-toolbar@workspace:blocksuite/affine/widget-toolbar"
+  dependencies:
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/block-std": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.3"
+    lit: "npm:^3.2.0"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine@workspace:*, @blocksuite/affine@workspace:blocksuite/affine/all":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine@workspace:blocksuite/affine/all"
@@ -3860,6 +3874,7 @@ __metadata:
     "@blocksuite/affine-widget-frame-title": "workspace:*"
     "@blocksuite/affine-widget-remote-selection": "workspace:*"
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*"
+    "@blocksuite/affine-widget-toolbar": "workspace:*"
     "@blocksuite/block-std": "workspace:*"
     "@blocksuite/data-view": "workspace:*"
     "@blocksuite/global": "workspace:*"