Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-04 08:38:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): extract frame title widget (#9458)

Browse Source
This commit is contained in:
Saul-Mirone
2024-12-31 10:12:03 +00:00
parent f64d62d869
commit 6c33eaace0
16 changed files with 105 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
blocksuite/affine/widget-frame-title/package.json Normal file
View File

@@ -0,0 +1,36 @@
{
"name": "@blocksuite/affine-widget-frame-title",
"description": "Affine frame title 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:*",
"@lit/context": "^1.1.2",
"@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"
}

0
blocksuite/blocks/src/root-block/widgets/frame-title/effects.ts → blocksuite/affine/widget-frame-title/src/effects.ts
View File

13
blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts → blocksuite/affine/widget-frame-title/src/frame-title.ts
View File

@@ -23,7 +23,6 @@ import { themeToVar } from '@toeverything/theme/v2';
import { LitElement } from 'lit';
import { property, state } from 'lit/decorators.js';
import type { EdgelessRootService } from '../../edgeless/index.js';
import { frameTitleStyle, frameTitleStyleVars } from './styles.js';
export const AFFINE_FRAME_TITLE = 'affine-frame-title';
@@ -85,10 +84,6 @@ export class AffineFrameTitle extends SignalWatcher(
return this.std.get(GfxControllerIdentifier);
}
get rootService() {
return this.std.getService('affine:page') as EdgelessRootService;
}
private _isInsideFrame() {
return this.gfx.grid.has(
this.model.elementBound,
@@ -165,7 +160,7 @@ export class AffineFrameTitle extends SignalWatcher(
override connectedCallback() {
super.connectedCallback();
const { _disposables, doc, gfx, rootService } = this;
const { _disposables, doc, gfx } = this;
this._nestedFrame = this._isInsideFrame();
@@ -198,10 +193,10 @@ export class AffineFrameTitle extends SignalWatcher(
);
_disposables.add(
rootService.selection.slots.updated.on(() => {
gfx.selection.slots.updated.on(() => {
this._editing =
rootService.selection.selectedIds[0] === this.model.id &&
rootService.selection.editing;
gfx.selection.selectedIds[0] === this.model.id &&
gfx.selection.editing;
})
);

8
blocksuite/blocks/src/root-block/widgets/frame-title/index.ts → blocksuite/affine/widget-frame-title/src/index.ts
View File

@@ -3,15 +3,11 @@ import { WidgetComponent } from '@blocksuite/block-std';
import { html } from 'lit';
import { repeat } from 'lit/directives/repeat.js';
import type { EdgelessRootBlockComponent } from '../../index.js';
import type { AffineFrameTitle } from './frame-title.js';
export const AFFINE_FRAME_TITLE_WIDGET = 'affine-frame-title-widget';
export class AffineFrameTitleWidget extends WidgetComponent<
RootBlockModel,
EdgelessRootBlockComponent
> {
export class AffineFrameTitleWidget extends WidgetComponent<RootBlockModel> {
private get _frames() {
return Object.values(this.doc.blocks.value)
.map(({ model }) => model)
@@ -38,3 +34,5 @@ export class AffineFrameTitleWidget extends WidgetComponent<
);
}
}
export * from './styles.js';

0
blocksuite/blocks/src/root-block/widgets/frame-title/styles.ts → blocksuite/affine/widget-frame-title/src/styles.ts
View File

20
blocksuite/affine/widget-frame-title/tsconfig.json Normal file
View File

@@ -0,0 +1,20 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src/",
"outDir": "./dist/",
"noEmit": false
},
"include": ["./src"],
"references": [
{
"path": "../../framework"
},
{
"path": "../model"
},
{
"path": "../shared"
}
]
}

1
blocksuite/blocks/package.json
View File

@@ -34,6 +34,7 @@
"@blocksuite/affine-model": "workspace:*",
"@blocksuite/affine-shared": "workspace:*",
"@blocksuite/affine-widget-drag-handle": "workspace:*",
"@blocksuite/affine-widget-frame-title": "workspace:*",
"@blocksuite/affine-widget-remote-selection": "workspace:*",
"@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
"@blocksuite/block-std": "workspace:*",

2
blocksuite/blocks/src/effects.ts
View File

@@ -31,6 +31,7 @@ import { effects as componentToggleButtonEffects } from '@blocksuite/affine-comp
import { ToggleSwitch } from '@blocksuite/affine-components/toggle-switch';
import { effects as componentToolbarEffects } from '@blocksuite/affine-components/toolbar';
import { effects as widgetDragHandleEffects } from '@blocksuite/affine-widget-drag-handle/effects';
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 type { BlockComponent } from '@blocksuite/block-std';
@@ -161,7 +162,6 @@ import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from './root-block/widgets/edgele
import { ZoomBarToggleButton } from './root-block/widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.js';
import { EdgelessZoomToolbar } from './root-block/widgets/edgeless-zoom-toolbar/zoom-toolbar.js';
import { effects as widgetEdgelessElementToolbarEffects } from './root-block/widgets/element-toolbar/effects.js';
import { effects as widgetFrameTitleEffects } from './root-block/widgets/frame-title/effects.js';
import { AffineImageToolbar } from './root-block/widgets/image-toolbar/components/image-toolbar.js';
import { AFFINE_IMAGE_TOOLBAR_WIDGET } from './root-block/widgets/image-toolbar/index.js';
import { AFFINE_INNER_MODAL_WIDGET } from './root-block/widgets/inner-modal/inner-modal.js';

10
blocksuite/blocks/src/root-block/edgeless/components/text/edgeless-frame-title-editor.ts
View File

@@ -1,5 +1,10 @@
import type { RichText } from '@blocksuite/affine-components/rich-text';
import { FrameBlockModel } from '@blocksuite/affine-model';
import {
AFFINE_FRAME_TITLE_WIDGET,
type AffineFrameTitleWidget,
frameTitleStyleVars,
} from '@blocksuite/affine-widget-frame-title';
import {
RANGE_SYNC_EXCLUDE_ATTR,
ShadowlessElement,
@@ -10,11 +15,6 @@ import { css, html, nothing } from 'lit';
import { property, query } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import {
AFFINE_FRAME_TITLE_WIDGET,
type AffineFrameTitleWidget,
} from '../../../widgets/frame-title/index.js';
import { frameTitleStyleVars } from '../../../widgets/frame-title/styles.js';
import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
export class EdgelessFrameTitleEditor extends WithDisposable(

2
blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts
View File

@@ -7,6 +7,7 @@ import {
ThemeService,
} from '@blocksuite/affine-shared/services';
import { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
import { AFFINE_FRAME_TITLE_WIDGET } from '@blocksuite/affine-widget-frame-title';
import {
AFFINE_DOC_REMOTE_SELECTION_WIDGET,
AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
@@ -31,7 +32,6 @@ import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from '../widgets/edgeless-zoom-to
import { EDGELESS_ELEMENT_TOOLBAR_WIDGET } from '../widgets/element-toolbar/index.js';
import { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from '../widgets/embed-card-toolbar/embed-card-toolbar.js';
import { AFFINE_FORMAT_BAR_WIDGET } from '../widgets/format-bar/format-bar.js';
import { AFFINE_FRAME_TITLE_WIDGET } from '../widgets/frame-title/index.js';
import { AFFINE_INNER_MODAL_WIDGET } from '../widgets/inner-modal/inner-modal.js';
import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/index.js';
import { AFFINE_MODAL_WIDGET } from '../widgets/modal/modal.js';

2
blocksuite/blocks/src/root-block/types.ts
View File

@@ -1,4 +1,5 @@
import type { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
import type { AFFINE_FRAME_TITLE_WIDGET } from '@blocksuite/affine-widget-frame-title';
import type {
AFFINE_DOC_REMOTE_SELECTION_WIDGET,
AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
@@ -10,7 +11,6 @@ import type { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from './widgets/edgeless-zoo
import type { EDGELESS_ELEMENT_TOOLBAR_WIDGET } from './widgets/element-toolbar/index.js';
import type { AFFINE_EMBED_CARD_TOOLBAR_WIDGET } from './widgets/embed-card-toolbar/embed-card-toolbar.js';
import type { AFFINE_FORMAT_BAR_WIDGET } from './widgets/format-bar/format-bar.js';
import type { AFFINE_FRAME_TITLE_WIDGET } from './widgets/frame-title/index.js';
import type { AFFINE_KEYBOARD_TOOLBAR_WIDGET } from './widgets/index.js';
import type { AFFINE_INNER_MODAL_WIDGET } from './widgets/inner-modal/inner-modal.js';
import type { AFFINE_LINKED_DOC_WIDGET } from './widgets/linked-doc/index.js';

2
blocksuite/blocks/src/root-block/widgets/index.ts
View File

@@ -25,7 +25,6 @@ export {
AFFINE_FORMAT_BAR_WIDGET,
AffineFormatBarWidget,
} from './format-bar/format-bar.js';
export { AffineFrameTitleWidget } from './frame-title/index.js';
export { AffineImageToolbarWidget } from './image-toolbar/index.js';
export { AffineInnerModalWidget } from './inner-modal/inner-modal.js';
export * from './keyboard-toolbar/index.js';
@@ -52,3 +51,4 @@ export {
type AffineSlashSubMenu,
} from './slash-menu/index.js';
export { AffineSurfaceRefToolbar } from './surface-ref-toolbar/surface-ref-toolbar.js';
export { AffineFrameTitleWidget } from '@blocksuite/affine-widget-frame-title';

3
blocksuite/blocks/tsconfig.json
View File

@@ -78,6 +78,9 @@
},
{
"path": "../affine/widget-drag-handle"
},
{
"path": "../affine/widget-frame-title"
}
]
}

12
tools/utils/src/workspace.gen.ts
View File

@@ -295,6 +295,16 @@ export const PackageList = [
'blocksuite/framework/store',
],
},
{
location: 'blocksuite/affine/widget-frame-title',
name: '@blocksuite/affine-widget-frame-title',
workspaceDependencies: [
'blocksuite/affine/model',
'blocksuite/affine/shared',
'blocksuite/framework/block-std',
'blocksuite/framework/global',
],
},
{
location: 'blocksuite/affine/widget-remote-selection',
name: '@blocksuite/affine-widget-remote-selection',
@@ -339,6 +349,7 @@ export const PackageList = [
'blocksuite/affine/model',
'blocksuite/affine/shared',
'blocksuite/affine/widget-drag-handle',
'blocksuite/affine/widget-frame-title',
'blocksuite/affine/widget-remote-selection',
'blocksuite/affine/widget-scroll-anchoring',
'blocksuite/framework/block-std',
@@ -698,6 +709,7 @@ export type PackageName =
| '@blocksuite/affine-model'
| '@blocksuite/affine-shared'
| '@blocksuite/affine-widget-drag-handle'
| '@blocksuite/affine-widget-frame-title'
| '@blocksuite/affine-widget-remote-selection'
| '@blocksuite/affine-widget-scroll-anchoring'
| '@blocksuite/blocks'

1
tsconfig.project.json
View File

@@ -28,6 +28,7 @@
{ "path": "./blocksuite/affine/model" },
{ "path": "./blocksuite/affine/shared" },
{ "path": "./blocksuite/affine/widget-drag-handle" },
{ "path": "./blocksuite/affine/widget-frame-title" },
{ "path": "./blocksuite/affine/widget-remote-selection" },
{ "path": "./blocksuite/affine/widget-scroll-anchoring" },
{ "path": "./blocksuite/blocks" },

16
yarn.lock
View File

@@ -3747,6 +3747,21 @@ __metadata:
languageName: unknown
linkType: soft
"@blocksuite/affine-widget-frame-title@workspace:*, @blocksuite/affine-widget-frame-title@workspace:blocksuite/affine/widget-frame-title":
version: 0.0.0-use.local
resolution: "@blocksuite/affine-widget-frame-title@workspace:blocksuite/affine/widget-frame-title"
dependencies:
"@blocksuite/affine-model": "workspace:*"
"@blocksuite/affine-shared": "workspace:*"
"@blocksuite/block-std": "workspace:*"
"@blocksuite/global": "workspace:*"
"@lit/context": "npm:^1.1.2"
"@preact/signals-core": "npm:^1.8.0"
"@toeverything/theme": "npm:^1.1.3"
lit: "npm:^3.2.0"
languageName: unknown
linkType: soft
"@blocksuite/affine-widget-remote-selection@workspace:*, @blocksuite/affine-widget-remote-selection@workspace:blocksuite/affine/widget-remote-selection":
version: 0.0.0-use.local
resolution: "@blocksuite/affine-widget-remote-selection@workspace:blocksuite/affine/widget-remote-selection"
@@ -3834,6 +3849,7 @@ __metadata:
"@blocksuite/affine-model": "workspace:*"
"@blocksuite/affine-shared": "workspace:*"
"@blocksuite/affine-widget-drag-handle": "workspace:*"
"@blocksuite/affine-widget-frame-title": "workspace:*"
"@blocksuite/affine-widget-remote-selection": "workspace:*"
"@blocksuite/affine-widget-scroll-anchoring": "workspace:*"
"@blocksuite/block-std": "workspace:*"