feat(editor): add affine toolbar widget

Author: fundon

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"
+}

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;
+  }
+}

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

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

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 {}

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" }
+  ]
+}

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:*",

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);

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)}`,

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[] = [

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" },