feat(editor): add affine toolbar widget

toeverything · Jan 7, 2025 · ea53486 · ea53486
1 parent 69e73af
commit ea53486
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 0 deletions.
diff --git a/blocksuite/affine/widget-toolbar/package.json 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
@@ -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
@@ -0,0 +1 @@
+export * from './toolbar';
diff --git a/blocksuite/affine/widget-toolbar/src/toolbar.ts 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
@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./dist/",
+    "noEmit": false
+  },
+  "include": ["./src"],
+  "references": [
+    {
+      "path": "../../framework"
+    },
+    {
+      "path": "../model"
+    },
+    {
+      "path": "../shared"
+    }
+  ]
+}
diff --git 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
@@ -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
@@ -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
@@ -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/yarn.lock b/yarn.lock
@@ -3792,6 +3792,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"
@@ -3856,6 +3870,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:*"