luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(editor): slash menu and toolbar widget extensions (#12002)

Browse Source 
Closes: BS-3226
Closes: BS-3227
Closes: BS-3228
Closes: BS-3229

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced new view extensions for remote selection, scroll anchoring, slash menu, and toolbar widgets, enhancing customization and integration capabilities.

- **Refactor**
  - Updated export paths and module structure for widget-related packages to improve modularity and accessibility.
  - Reorganized internal dependencies and removed redundant widget imports from core block packages.
  - Refactored edgeless-related widgets and components to use a standardized scope interface for improved context and state management.
  - Centralized graphics controller access and slot management through standardized context objects.

- **Chores**
  - Added and updated dependencies to streamline extension loading and workspace management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Saul-Mirone
2025-04-26 11:27:13 +00:00
parent de01692414
commit 59d4942d9b
37 changed files with 200 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
blocksuite/affine/blocks/root/package.json
View File

@@ -34,8 +34,6 @@
"@blocksuite/affine-rich-text": "workspace:*",
"@blocksuite/affine-shared": "workspace:*",
"@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
"@blocksuite/affine-widget-remote-selection": "workspace:*",
"@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
"@blocksuite/affine-widget-slash-menu": "workspace:*",
"@blocksuite/affine-widget-toolbar": "workspace:*",
"@blocksuite/data-view": "workspace:*",

8
blocksuite/affine/blocks/root/src/common-specs/index.ts
View File

@@ -10,10 +10,6 @@ import {
ToolbarModuleExtension,
ToolbarRegistryExtension,
} from '@blocksuite/affine-shared/services';
import { docRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
import { scrollAnchoringWidget } from '@blocksuite/affine-widget-scroll-anchoring';
import { SlashMenuExtension } from '@blocksuite/affine-widget-slash-menu';
import { toolbarWidget } from '@blocksuite/affine-widget-toolbar';
import { BlockFlavourIdentifier, FlavourExtension } from '@blocksuite/std';
import type { ExtensionType } from '@blocksuite/store';
@@ -35,11 +31,7 @@ export const CommonSpecs: ExtensionType[] = [
AutoClearSelectionService,
...RootBlockAdapterExtensions,
...clipboardConfigs,
SlashMenuExtension,
docRemoteSelectionWidget,
viewportOverlayWidget,
scrollAnchoringWidget,
toolbarWidget,
fallbackKeymap,
ToolbarModuleExtension({

18
blocksuite/affine/blocks/root/src/edgeless/components/rects/edgeless-dragging-area-rect.ts
View File

@@ -1,10 +1,10 @@
import type { RootBlockModel } from '@blocksuite/affine-model';
import { WidgetComponent } from '@blocksuite/std';
import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
import { cssVarV2 } from '@toeverything/theme/v2';
import { css, html, nothing, unsafeCSS } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';
import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
import {
DefaultModeDragType,
DefaultTool,
@@ -12,10 +12,7 @@ import {
export const EDGELESS_DRAGGING_AREA_WIDGET = 'edgeless-dragging-area-rect';
export class EdgelessDraggingAreaRectWidget extends WidgetComponent<
RootBlockModel,
EdgelessRootBlockComponent
> {
export class EdgelessDraggingAreaRectWidget extends WidgetComponent<RootBlockModel> {
static override styles = css`
.affine-edgeless-dragging-area {
position: absolute;
@@ -34,12 +31,13 @@ export class EdgelessDraggingAreaRectWidget extends WidgetComponent<
}
`;
get gfx() {
return this.std.get(GfxControllerIdentifier);
}
override render() {
if (!this.block) {
return nothing;
}
const rect = this.block.gfx.tool.draggingViewArea$.value;
const tool = this.block.gfx.tool.currentTool$.value;
const rect = this.gfx.tool.draggingViewArea$.value;
const tool = this.gfx.tool.currentTool$.value;
if (
rect.w === 0 ||

4
blocksuite/affine/blocks/root/src/edgeless/edgeless-root-spec.ts
View File

@@ -15,7 +15,6 @@ import { EdgelessClipboardFrameConfig } from '@blocksuite/affine-block-frame';
import { EdgelessClipboardImageConfig } from '@blocksuite/affine-block-image';
import { EdgelessClipboardNoteConfig } from '@blocksuite/affine-block-note';
import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
import { edgelessRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
import {
BlockViewExtension,
LifeCycleWatcher,
@@ -26,7 +25,6 @@ import type { ExtensionType } from '@blocksuite/store';
import { literal, unsafeStatic } from 'lit/static-html.js';
import { CommonSpecs } from '../common-specs/index.js';
import { edgelessNavigatorBgWidget } from '../widgets/edgeless-navigator-bg/index.js';
import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from '../widgets/edgeless-zoom-toolbar/index.js';
import { EdgelessClipboardController } from './clipboard/clipboard.js';
import { NOTE_SLICER_WIDGET } from './components/note-slicer/index.js';
@@ -94,11 +92,9 @@ const EdgelessCommonExtension: ExtensionType[] = [
export const EdgelessRootBlockSpec: ExtensionType[] = [
...EdgelessCommonExtension,
BlockViewExtension('affine:page', literal`affine-edgeless-root`),
edgelessRemoteSelectionWidget,
edgelessZoomToolbarWidget,
edgelessDraggingAreaWidget,
noteSlicerWidget,
edgelessNavigatorBgWidget,
edgelessSelectedRectWidget,
EdgelessClipboardController,
];

11
blocksuite/affine/blocks/root/src/effects.ts
View File

@@ -22,10 +22,6 @@ import {
PageRootBlockComponent,
PreviewRootBlockComponent,
} from './index.js';
import {
EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
EdgelessNavigatorBlackBackgroundWidget,
} from './widgets/edgeless-navigator-bg/index.js';
import {
AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
AffineEdgelessZoomToolbarWidget,
@@ -104,12 +100,6 @@ function registerMiscComponents() {
// Note and template components
customElements.define(NOTE_SLICER_WIDGET, NoteSlicer);
// Navigation components
customElements.define(
EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
EdgelessNavigatorBlackBackgroundWidget
);
// Dragging area components
customElements.define(
EDGELESS_DRAGGING_AREA_WIDGET,
@@ -128,7 +118,6 @@ declare global {
'edgeless-auto-complete-panel': EdgelessAutoCompletePanel;
'edgeless-auto-complete': EdgelessAutoComplete;
'note-slicer': NoteSlicer;
'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget;
'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
'edgeless-selected-rect': EdgelessSelectedRectWidget;
'edgeless-slide-menu': EdgelessSlideMenu;

124
blocksuite/affine/blocks/root/src/widgets/edgeless-navigator-bg/index.ts
View File

@@ -1,124 +0,0 @@
import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
import type { FrameBlockModel, RootBlockModel } from '@blocksuite/affine-model';
import { EditPropsStore } from '@blocksuite/affine-shared/services';
import { Bound } from '@blocksuite/global/gfx';
import { WidgetComponent, WidgetViewExtension } from '@blocksuite/std';
import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
import { effect } from '@preact/signals-core';
import { css, html, nothing } from 'lit';
import { state } from 'lit/decorators.js';
import { literal, unsafeStatic } from 'lit/static-html.js';
export const EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET =
'edgeless-navigator-black-background';
export class EdgelessNavigatorBlackBackgroundWidget extends WidgetComponent<RootBlockModel> {
static override styles = css`
.edgeless-navigator-black-background {
background-color: black;
position: absolute;
z-index: 1;
background-color: transparent;
box-shadow: 0 0 0 5000px black;
pointer-events: none;
}
`;
private _blackBackground = false;
get gfx() {
return this.std.get(GfxControllerIdentifier);
}
private get _slots() {
return this.std.get(EdgelessLegacySlotIdentifier);
}
private _tryLoadBlackBackground() {
const value = this.std
.get(EditPropsStore)
.getStorage('presentBlackBackground');
this._blackBackground = value ?? true;
}
override firstUpdated() {
const { _disposables, gfx } = this;
_disposables.add(
this._slots.navigatorFrameChanged.subscribe(frame => {
this.frame = frame;
})
);
_disposables.add(
this._slots.navigatorSettingUpdated.subscribe(({ blackBackground }) => {
if (blackBackground !== undefined) {
this.std
.get(EditPropsStore)
.setStorage('presentBlackBackground', blackBackground);
this._blackBackground = blackBackground;
this.show =
blackBackground &&
this.gfx.tool.currentToolOption$.peek().type === 'frameNavigator';
}
})
);
_disposables.add(
effect(() => {
const tool = gfx.tool.currentToolName$.value;
if (tool !== 'frameNavigator') {
this.show = false;
} else {
this.show = this._blackBackground;
}
})
);
_disposables.add(
this._slots.fullScreenToggled.subscribe(
() =>
setTimeout(() => {
this.requestUpdate();
}, 500) // wait for full screen animation
)
);
this._tryLoadBlackBackground();
}
override render() {
const { frame, show, gfx } = this;
if (!show || !frame) return nothing;
const bound = Bound.deserialize(frame.xywh);
const zoom = gfx.viewport.zoom;
const width = bound.w * zoom;
const height = bound.h * zoom;
const [x, y] = gfx.viewport.toViewCoord(bound.x, bound.y);
return html` <style>
.edgeless-navigator-black-background {
width: ${width}px;
height: ${height}px;
top: ${y}px;
left: ${x}px;
}
</style>
<div class="edgeless-navigator-black-background"></div>`;
}
@state()
private accessor frame: FrameBlockModel | undefined = undefined;
@state()
private accessor show = false;
}
export const edgelessNavigatorBgWidget = WidgetViewExtension(
'affine:page',
EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
literal`${unsafeStatic(EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET)}`
);

20
blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/index.ts
View File

@@ -1,19 +1,15 @@
import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
import type { RootBlockModel } from '@blocksuite/affine-model';
import { WidgetComponent } from '@blocksuite/std';
import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
import { effect } from '@preact/signals-core';
import { css, html, nothing } from 'lit';
import { state } from 'lit/decorators.js';
import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
export const AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET =
'affine-edgeless-zoom-toolbar-widget';
export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<
RootBlockModel,
EdgelessRootBlockComponent
> {
export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<RootBlockModel> {
static override styles = css`
:host {
position: absolute;
@@ -43,12 +39,16 @@ export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<
return this.block;
}
get gfx() {
return this.std.get(GfxControllerIdentifier);
}
override connectedCallback() {
super.connectedCallback();
this.disposables.add(
effect(() => {
const currentTool = this.edgeless?.gfx.tool.currentToolName$.value;
const currentTool = this.gfx.tool.currentToolName$.value;
if (currentTool !== 'frameNavigator') {
this._hide = false;
@@ -77,10 +77,8 @@ export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<
}
return html`
<edgeless-zoom-toolbar .edgeless=${this.edgeless}></edgeless-zoom-toolbar>
<zoom-bar-toggle-button
.edgeless=${this.edgeless}
></zoom-bar-toggle-button>
<edgeless-zoom-toolbar .std=${this.std}></edgeless-zoom-toolbar>
<zoom-bar-toggle-button .std=${this.std}></zoom-bar-toggle-button>
`;
}

16
blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.ts
View File

@@ -1,13 +1,13 @@
import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
import { createLitPortal } from '@blocksuite/affine-components/portal';
import { stopPropagation } from '@blocksuite/affine-shared/utils';
import { WithDisposable } from '@blocksuite/global/lit';
import { MoreHorizontalIcon } from '@blocksuite/icons/lit';
import type { BlockStdScope } from '@blocksuite/std';
import { offset } from '@floating-ui/dom';
import { css, html, LitElement, nothing } from 'lit';
import { property, query, state } from 'lit/decorators.js';
import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
export class ZoomBarToggleButton extends WithDisposable(LitElement) {
static override styles = css`
:host {
@@ -33,6 +33,10 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) {
}
}
private get _slots() {
return this.std.get(EdgelessLegacySlotIdentifier);
}
private _toggleZoomMenu() {
if (this._abortController && !this._abortController.signal.aborted) {
this._closeZoomMenu();
@@ -45,7 +49,7 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) {
});
createLitPortal({
template: html`<edgeless-zoom-toolbar
.edgeless=${this.edgeless}
.std=${this.std}
.layout=${'vertical'}
></edgeless-zoom-toolbar>`,
container: this._toggleButton,
@@ -69,14 +73,14 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) {
override firstUpdated() {
const { disposables } = this;
disposables.add(
this.edgeless.slots.readonlyUpdated.subscribe(() => {
this._slots.readonlyUpdated.subscribe(() => {
this.requestUpdate();
})
);
}
override render() {
if (this.edgeless.doc.readonly) {
if (this.std.store.readonly) {
return nothing;
}
@@ -105,5 +109,5 @@ export class ZoomBarToggleButton extends WithDisposable(LitElement) {
private accessor _toggleButton!: HTMLElement;
@property({ attribute: false })
accessor edgeless!: EdgelessRootBlockComponent;
accessor std!: BlockStdScope;
}

51
blocksuite/affine/blocks/root/src/widgets/edgeless-zoom-toolbar/zoom-toolbar.ts
View File

@@ -1,13 +1,19 @@
import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
import { stopPropagation } from '@blocksuite/affine-shared/utils';
import { WithDisposable } from '@blocksuite/global/lit';
import { MinusIcon, PlusIcon, ViewBarIcon } from '@blocksuite/icons/lit';
import { ZOOM_STEP } from '@blocksuite/std/gfx';
import type { BlockStdScope } from '@blocksuite/std';
import {
GfxControllerIdentifier,
ZOOM_MAX,
ZOOM_MIN,
ZOOM_STEP,
} from '@blocksuite/std/gfx';
import { effect } from '@preact/signals-core';
import { baseTheme } from '@toeverything/theme';
import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
import { property } from 'lit/decorators.js';
import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js';
import clamp from 'lodash-es/clamp';
export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
static override styles = css`
@@ -79,26 +85,30 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
}
`;
get edgelessService() {
return this.edgeless.service;
get slots() {
return this.std.get(EdgelessLegacySlotIdentifier);
}
get gfx() {
return this.edgeless.gfx;
return this.std.get(GfxControllerIdentifier);
}
get edgelessTool() {
return this.edgeless.gfx.tool.currentToolOption$.peek();
return this.gfx.tool.currentToolOption$.peek();
}
get locked() {
return this.edgelessService.locked;
return this.viewport.locked;
}
get viewport() {
return this.edgelessService.viewport;
return this.gfx.viewport;
}
setZoomByStep = (step: number) => {
this.viewport.smoothZoom(clamp(this.zoom + step, ZOOM_MIN, ZOOM_MAX));
};
get zoom() {
if (!this.viewport) {
console.error('Something went wrong, viewport is not available');
@@ -107,11 +117,6 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
return this.viewport.zoom;
}
constructor(edgeless: EdgelessRootBlockComponent) {
super();
this.edgeless = edgeless;
}
private _isVerticalBar() {
return this.layout === 'vertical';
}
@@ -121,7 +126,7 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
this.disposables.add(
effect(() => {
this.edgeless.gfx.tool.currentToolName$.value;
this.gfx.tool.currentToolName$.value;
this.requestUpdate();
})
);
@@ -130,19 +135,17 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
override firstUpdated() {
const { disposables } = this;
disposables.add(
this.edgeless.service.viewport.viewportUpdated.subscribe(() =>
this.requestUpdate()
)
this.viewport.viewportUpdated.subscribe(() => this.requestUpdate())
);
disposables.add(
this.edgeless.slots.readonlyUpdated.subscribe(() => {
this.slots.readonlyUpdated.subscribe(() => {
this.requestUpdate();
})
);
}
override render() {
if (this.edgeless.doc.readonly) {
if (this.std.store.readonly) {
return nothing;
}
@@ -173,7 +176,7 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
.tooltip=${'Zoom out'}
.tipPosition=${this._isVerticalBar() ? 'right' : 'top'}
.arrow=${!this._isVerticalBar()}
@click=${() => this.edgelessService.setZoomByStep(-ZOOM_STEP)}
@click=${() => this.setZoomByStep(-ZOOM_STEP)}
.iconContainerPadding=${4}
.iconSize=${'24px'}
.disabled=${locked}
@@ -191,7 +194,7 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
.tooltip=${'Zoom in'}
.tipPosition=${this._isVerticalBar() ? 'right' : 'top'}
.arrow=${!this._isVerticalBar()}
@click=${() => this.edgelessService.setZoomByStep(ZOOM_STEP)}
@click=${() => this.setZoomByStep(ZOOM_STEP)}
.iconContainerPadding=${4}
.iconSize=${'24px'}
.disabled=${locked}
@@ -203,8 +206,8 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
}
@property({ attribute: false })
accessor edgeless: EdgelessRootBlockComponent;
accessor layout: 'horizontal' | 'vertical' = 'horizontal';
@property({ attribute: false })
accessor layout: 'horizontal' | 'vertical' = 'horizontal';
accessor std!: BlockStdScope;
}

2
blocksuite/affine/blocks/root/tsconfig.json
View File

@@ -31,8 +31,6 @@
{ "path": "../../rich-text" },
{ "path": "../../shared" },
{ "path": "../../widgets/edgeless-toolbar" },
{ "path": "../../widgets/remote-selection" },
{ "path": "../../widgets/scroll-anchoring" },
{ "path": "../../widgets/slash-menu" },
{ "path": "../../widgets/toolbar" },
{ "path": "../../data-view" },