From ea534862d8c6f5503878e876d9a147bcd053d0b3 Mon Sep 17 00:00:00 2001 From: Fangdun Tsai 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 | 20 +++++++++++ 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 ++ yarn.lock | 15 ++++++++ 10 files changed, 94 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..515e24c087583 --- /dev/null +++ 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 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/yarn.lock b/yarn.lock index f8e699375da21..3013ba827872e 100644 --- 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:*"