From b8dcb850079e98c1fd87fc530f9adf7eaa44f52b Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Thu, 20 Feb 2025 15:59:13 +0000 Subject: [PATCH] refactor: move outline fragment to separate package (#10331) ### TL;DR Moved outline functionality into a dedicated fragment package and updated vanilla-extract CSS dependency. ### What changed? - Created new `@blocksuite/affine-fragment-outline` package - Relocated outline-related code from presets to the new fragment package - Updated imports across affected files to reference the new package location - Upgraded `@vanilla-extract/css` dependency from 1.14.0/1.16.1 to 1.17.0 - Added necessary package configuration and TypeScript setup for the new fragment ### How to test? 1. Verify outline functionality works as expected in both desktop and mobile views 2. Check that outline panel, viewer, and mobile menu components render correctly 3. Ensure outline navigation and interactions continue to work 4. Confirm no regressions in outline-related features ### Why make this change? This change improves code organization by isolating outline functionality into a dedicated package, following the modular architecture pattern. This makes the codebase more maintainable and allows for better separation of concerns. The vanilla-extract CSS upgrade ensures consistency across packages and provides access to the latest features and fixes. --- blocksuite/affine/block-table/package.json | 2 +- .../affine/fragment-outline/package.json | 45 ++++++++++++++++++ .../src}/body/outline-notice.css.ts | 0 .../src}/body/outline-notice.ts | 0 .../src}/body/outline-panel-body.css.ts | 0 .../src}/body/outline-panel-body.ts | 46 ++++++------------- .../src}/card/outline-card.css.ts | 0 .../src}/card/outline-card.ts | 7 +-- .../src}/card/outline-preview.css.ts | 0 .../src}/card/outline-preview.ts | 22 ++++----- .../fragment-outline/src}/config.ts | 3 +- .../affine/fragment-outline/src/effects.ts | 39 ++++++++++++++++ .../src}/header/outline-panel-header.css.ts | 0 .../src}/header/outline-panel-header.ts | 2 +- .../src}/header/outline-setting-menu.css.ts | 0 .../src}/header/outline-setting-menu.ts | 0 .../fragment-outline/src}/index.ts | 0 .../src}/mobile-outline-panel.ts | 14 +++--- .../src}/outline-panel.css.ts | 0 .../fragment-outline/src}/outline-panel.ts | 2 +- .../fragment-outline/src}/outline-viewer.ts | 8 ++-- .../src}/utils/custom-events.ts | 2 +- .../fragment-outline/src}/utils/drag.ts | 0 .../fragment-outline/src}/utils/query.ts | 9 ++-- .../fragment-outline/src}/utils/scroll.ts | 15 +++--- .../affine/fragment-outline/tsconfig.json | 19 ++++++++ blocksuite/blocks/package.json | 1 + blocksuite/blocks/src/effects.ts | 2 + blocksuite/blocks/src/index.ts | 1 + blocksuite/blocks/tsconfig.json | 1 + blocksuite/presets/src/effects.ts | 46 +------------------ blocksuite/presets/src/fragments/index.ts | 1 - .../apps/electron-renderer/package.json | 2 +- packages/frontend/component/package.json | 2 +- packages/frontend/core/package.json | 2 +- .../blocksuite/outline-viewer/index.tsx | 2 +- .../workspace/detail-page/tabs/outline.tsx | 2 +- .../src/mobile/components/toc-menu/index.tsx | 2 +- tools/utils/src/workspace.gen.ts | 16 +++++++ tsconfig.json | 1 + yarn.lock | 35 ++++++++++++-- 41 files changed, 217 insertions(+), 134 deletions(-) create mode 100644 blocksuite/affine/fragment-outline/package.json rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/body/outline-notice.css.ts (100%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/body/outline-notice.ts (100%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/body/outline-panel-body.css.ts (100%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/body/outline-panel-body.ts (93%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/card/outline-card.css.ts (100%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/card/outline-card.ts (98%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/card/outline-preview.css.ts (100%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/card/outline-preview.ts (95%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/config.ts (94%) create mode 100644 blocksuite/affine/fragment-outline/src/effects.ts rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/header/outline-panel-header.css.ts (100%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/header/outline-panel-header.ts (97%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/header/outline-setting-menu.css.ts (100%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/header/outline-setting-menu.ts (100%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/index.ts (100%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/mobile-outline-panel.ts (96%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/outline-panel.css.ts (100%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/outline-panel.ts (97%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/outline-viewer.ts (97%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/utils/custom-events.ts (96%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/utils/drag.ts (100%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/utils/query.ts (88%) rename blocksuite/{presets/src/fragments/outline => affine/fragment-outline/src}/utils/scroll.ts (91%) create mode 100644 blocksuite/affine/fragment-outline/tsconfig.json diff --git a/blocksuite/affine/block-table/package.json b/blocksuite/affine/block-table/package.json index ea81b1daa..521c66ca2 100644 --- a/blocksuite/affine/block-table/package.json +++ b/blocksuite/affine/block-table/package.json @@ -24,7 +24,7 @@ "@blocksuite/store": "workspace:*", "@floating-ui/dom": "^1.6.10", "@preact/signals-core": "^1.8.0", - "@vanilla-extract/css": "^1.14.0", + "@vanilla-extract/css": "^1.17.0", "lit": "^3.2.0", "yjs": "^13.6.21", "zod": "^3.24.1" diff --git a/blocksuite/affine/fragment-outline/package.json b/blocksuite/affine/fragment-outline/package.json new file mode 100644 index 000000000..ef8fb0a53 --- /dev/null +++ b/blocksuite/affine/fragment-outline/package.json @@ -0,0 +1,45 @@ +{ + "name": "@blocksuite/affine-fragment-outline", + "description": "Outline fragment for BlockSuite.", + "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-block-note": "workspace:*", + "@blocksuite/affine-components": "workspace:*", + "@blocksuite/affine-model": "workspace:*", + "@blocksuite/affine-shared": "workspace:*", + "@blocksuite/block-std": "workspace:*", + "@blocksuite/global": "workspace:*", + "@blocksuite/icons": "^2.2.1", + "@blocksuite/inline": "workspace:*", + "@blocksuite/store": "workspace:*", + "@floating-ui/dom": "^1.6.10", + "@lit/context": "^1.1.2", + "@preact/signals-core": "^1.8.0", + "@toeverything/theme": "^1.1.11", + "@vanilla-extract/css": "^1.17.0", + "lit": "^3.2.0", + "minimatch": "^10.0.1", + "zod": "^3.23.8" + }, + "exports": { + ".": "./src/index.ts", + "./effects": "./src/effects.ts" + }, + "files": [ + "src", + "dist", + "!src/__tests__", + "!dist/__tests__" + ], + "version": "0.19.0" +} diff --git a/blocksuite/presets/src/fragments/outline/body/outline-notice.css.ts b/blocksuite/affine/fragment-outline/src/body/outline-notice.css.ts similarity index 100% rename from blocksuite/presets/src/fragments/outline/body/outline-notice.css.ts rename to blocksuite/affine/fragment-outline/src/body/outline-notice.css.ts diff --git a/blocksuite/presets/src/fragments/outline/body/outline-notice.ts b/blocksuite/affine/fragment-outline/src/body/outline-notice.ts similarity index 100% rename from blocksuite/presets/src/fragments/outline/body/outline-notice.ts rename to blocksuite/affine/fragment-outline/src/body/outline-notice.ts diff --git a/blocksuite/presets/src/fragments/outline/body/outline-panel-body.css.ts b/blocksuite/affine/fragment-outline/src/body/outline-panel-body.css.ts similarity index 100% rename from blocksuite/presets/src/fragments/outline/body/outline-panel-body.css.ts rename to blocksuite/affine/fragment-outline/src/body/outline-panel-body.css.ts diff --git a/blocksuite/presets/src/fragments/outline/body/outline-panel-body.ts b/blocksuite/affine/fragment-outline/src/body/outline-panel-body.ts similarity index 93% rename from blocksuite/presets/src/fragments/outline/body/outline-panel-body.ts rename to blocksuite/affine/fragment-outline/src/body/outline-panel-body.ts index ff73429c2..b0da8c260 100644 --- a/blocksuite/presets/src/fragments/outline/body/outline-panel-body.ts +++ b/blocksuite/affine/fragment-outline/src/body/outline-panel-body.ts @@ -1,18 +1,10 @@ -import { effects } from '@blocksuite/affine-block-note/effects'; +import { changeNoteDisplayMode } from '@blocksuite/affine-block-note'; +import { NoteBlockModel, NoteDisplayMode } from '@blocksuite/affine-model'; +import { DocModeProvider } from '@blocksuite/affine-shared/services'; +import { matchModels } from '@blocksuite/affine-shared/utils'; import { ShadowlessElement, SurfaceSelection } from '@blocksuite/block-std'; -import { - changeNoteDisplayMode, - DocModeProvider, - matchModels, - NoteBlockModel, - NoteDisplayMode, -} from '@blocksuite/blocks'; -import { - Bound, - noop, - SignalWatcher, - WithDisposable, -} from '@blocksuite/global/utils'; +import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; +import { Bound, SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import type { BlockModel } from '@blocksuite/store'; import { consume } from '@lit/context'; import { effect, signal } from '@preact/signals-core'; @@ -22,8 +14,6 @@ import { classMap } from 'lit/directives/class-map.js'; import { repeat } from 'lit/directives/repeat.js'; import { when } from 'lit/directives/when.js'; -noop(effects); - import { type TocContext, tocContext } from '../config'; import type { ClickBlockEvent, @@ -79,10 +69,6 @@ export class OutlinePanelBody extends SignalWatcher( return this.editor.doc; } - private get edgeless() { - return this.editor.querySelector('affine-edgeless-root'); - } - get viewportPadding(): [number, number, number, number] { const fitPadding = this._context.fitPadding$.value; return fitPadding.length === 4 @@ -93,9 +79,9 @@ export class OutlinePanelBody extends SignalWatcher( } private _deSelectNoteInEdgelessMode(note: NoteBlockModel) { - if (!this.edgeless) return; + const gfx = this.editor.std.get(GfxControllerIdentifier); + const selection = gfx.selection; - const { selection } = this.edgeless.service; if (!selection.has(note.id)) return; const selectedIds = selection.selectedIds.filter(id => id !== note.id); selection.set({ @@ -116,18 +102,12 @@ export class OutlinePanelBody extends SignalWatcher( } private _fitToElement(e: FitViewEvent) { - const edgeless = this.edgeless; - - if (!edgeless) return; + const gfx = this.editor.std.get(GfxControllerIdentifier); const { block } = e.detail; const bound = Bound.deserialize(block.xywh); - edgeless.service.viewport.setViewportByBound( - bound, - this.viewportPadding, - true - ); + gfx.viewport.setViewportByBound(bound, this.viewportPadding, true); } // when display mode change to page only, we should de-select the note if it is selected in edgeless mode @@ -200,6 +180,8 @@ export class OutlinePanelBody extends SignalWatcher( private _selectNote(e: SelectEvent) { const { selected, id, multiselect } = e.detail; + const gfx = this.editor.std.get(GfxControllerIdentifier); + const editorMode = this.editor.std.get(DocModeProvider).getEditorMode(); const note = this.doc.getBlock(id)?.model; if (!note || !matchModels(note, [NoteBlockModel])) return; @@ -213,8 +195,8 @@ export class OutlinePanelBody extends SignalWatcher( selectedNotes = [note]; } - if (this.edgeless) { - this.edgeless?.service.selection.set({ + if (editorMode === 'edgeless') { + gfx.selection.set({ elements: selectedNotes.map(({ id }) => id), editing: false, }); diff --git a/blocksuite/presets/src/fragments/outline/card/outline-card.css.ts b/blocksuite/affine/fragment-outline/src/card/outline-card.css.ts similarity index 100% rename from blocksuite/presets/src/fragments/outline/card/outline-card.css.ts rename to blocksuite/affine/fragment-outline/src/card/outline-card.css.ts diff --git a/blocksuite/presets/src/fragments/outline/card/outline-card.ts b/blocksuite/affine/fragment-outline/src/card/outline-card.ts similarity index 98% rename from blocksuite/presets/src/fragments/outline/card/outline-card.ts rename to blocksuite/affine/fragment-outline/src/card/outline-card.ts index d3e1194b9..4e1ccafd5 100644 --- a/blocksuite/presets/src/fragments/outline/card/outline-card.ts +++ b/blocksuite/affine/fragment-outline/src/card/outline-card.ts @@ -1,9 +1,6 @@ +import { type NoteBlockModel, NoteDisplayMode } from '@blocksuite/affine-model'; +import { createButtonPopper } from '@blocksuite/affine-shared/utils'; import { ShadowlessElement } from '@blocksuite/block-std'; -import { - createButtonPopper, - type NoteBlockModel, - NoteDisplayMode, -} from '@blocksuite/blocks'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import { ArrowDownSmallIcon, InvisibleIcon } from '@blocksuite/icons/lit'; import type { BlockModel } from '@blocksuite/store'; diff --git a/blocksuite/presets/src/fragments/outline/card/outline-preview.css.ts b/blocksuite/affine/fragment-outline/src/card/outline-preview.css.ts similarity index 100% rename from blocksuite/presets/src/fragments/outline/card/outline-preview.css.ts rename to blocksuite/affine/fragment-outline/src/card/outline-preview.css.ts diff --git a/blocksuite/presets/src/fragments/outline/card/outline-preview.ts b/blocksuite/affine/fragment-outline/src/card/outline-preview.ts similarity index 95% rename from blocksuite/presets/src/fragments/outline/card/outline-preview.ts rename to blocksuite/affine/fragment-outline/src/card/outline-preview.ts index 997c8ee98..d956fa4d5 100644 --- a/blocksuite/presets/src/fragments/outline/card/outline-preview.ts +++ b/blocksuite/affine/fragment-outline/src/card/outline-preview.ts @@ -1,16 +1,16 @@ +import type { + AttachmentBlockModel, + BookmarkBlockModel, + CodeBlockModel, + DatabaseBlockModel, + ImageBlockModel, + ListBlockModel, + ParagraphBlockModel, + RootBlockModel, +} from '@blocksuite/affine-model'; +import { DocDisplayMetaProvider } from '@blocksuite/affine-shared/services'; import type { AffineTextAttributes } from '@blocksuite/affine-shared/types'; import { ShadowlessElement } from '@blocksuite/block-std'; -import { - type AttachmentBlockModel, - type BookmarkBlockModel, - type CodeBlockModel, - type DatabaseBlockModel, - DocDisplayMetaProvider, - type ImageBlockModel, - type ListBlockModel, - type ParagraphBlockModel, - type RootBlockModel, -} from '@blocksuite/blocks'; import { noop, SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import { LinkedPageIcon } from '@blocksuite/icons/lit'; import type { DeltaInsert } from '@blocksuite/inline'; diff --git a/blocksuite/presets/src/fragments/outline/config.ts b/blocksuite/affine/fragment-outline/src/config.ts similarity index 94% rename from blocksuite/presets/src/fragments/outline/config.ts rename to blocksuite/affine/fragment-outline/src/config.ts index cca821d0c..cea37bddc 100644 --- a/blocksuite/presets/src/fragments/outline/config.ts +++ b/blocksuite/affine/fragment-outline/src/config.ts @@ -1,5 +1,5 @@ +import type { ParagraphBlockModel } from '@blocksuite/affine-model'; import type { EditorHost } from '@blocksuite/block-std'; -import type { ParagraphBlockModel, Signal } from '@blocksuite/blocks'; import { AttachmentIcon, BlockIcon, @@ -21,6 +21,7 @@ import { TextIcon, } from '@blocksuite/icons/lit'; import { createContext } from '@lit/context'; +import type { Signal } from '@preact/signals-core'; import type { TemplateResult } from 'lit'; const _16px = { width: '16px', height: '16px' }; diff --git a/blocksuite/affine/fragment-outline/src/effects.ts b/blocksuite/affine/fragment-outline/src/effects.ts new file mode 100644 index 000000000..ff0493547 --- /dev/null +++ b/blocksuite/affine/fragment-outline/src/effects.ts @@ -0,0 +1,39 @@ +import { AFFINE_OUTLINE_NOTICE, OutlineNotice } from './body/outline-notice'; +import { + AFFINE_OUTLINE_PANEL_BODY, + OutlinePanelBody, +} from './body/outline-panel-body'; +import { AFFINE_OUTLINE_NOTE_CARD, OutlineNoteCard } from './card/outline-card'; +import { + AFFINE_OUTLINE_BLOCK_PREVIEW, + OutlineBlockPreview, +} from './card/outline-preview'; +import { + AFFINE_OUTLINE_PANEL_HEADER, + OutlinePanelHeader, +} from './header/outline-panel-header'; +import { + AFFINE_OUTLINE_NOTE_PREVIEW_SETTING_MENU, + OutlineNotePreviewSettingMenu, +} from './header/outline-setting-menu'; +import { + AFFINE_MOBILE_OUTLINE_MENU, + MobileOutlineMenu, +} from './mobile-outline-panel'; +import { AFFINE_OUTLINE_PANEL, OutlinePanel } from './outline-panel'; +import { AFFINE_OUTLINE_VIEWER, OutlineViewer } from './outline-viewer'; + +export function effects() { + customElements.define( + AFFINE_OUTLINE_NOTE_PREVIEW_SETTING_MENU, + OutlineNotePreviewSettingMenu + ); + customElements.define(AFFINE_OUTLINE_NOTICE, OutlineNotice); + customElements.define(AFFINE_OUTLINE_PANEL, OutlinePanel); + customElements.define(AFFINE_OUTLINE_PANEL_HEADER, OutlinePanelHeader); + customElements.define(AFFINE_OUTLINE_NOTE_CARD, OutlineNoteCard); + customElements.define(AFFINE_OUTLINE_VIEWER, OutlineViewer); + customElements.define(AFFINE_MOBILE_OUTLINE_MENU, MobileOutlineMenu); + customElements.define(AFFINE_OUTLINE_BLOCK_PREVIEW, OutlineBlockPreview); + customElements.define(AFFINE_OUTLINE_PANEL_BODY, OutlinePanelBody); +} diff --git a/blocksuite/presets/src/fragments/outline/header/outline-panel-header.css.ts b/blocksuite/affine/fragment-outline/src/header/outline-panel-header.css.ts similarity index 100% rename from blocksuite/presets/src/fragments/outline/header/outline-panel-header.css.ts rename to blocksuite/affine/fragment-outline/src/header/outline-panel-header.css.ts diff --git a/blocksuite/presets/src/fragments/outline/header/outline-panel-header.ts b/blocksuite/affine/fragment-outline/src/header/outline-panel-header.ts similarity index 97% rename from blocksuite/presets/src/fragments/outline/header/outline-panel-header.ts rename to blocksuite/affine/fragment-outline/src/header/outline-panel-header.ts index 95718aea9..e03a95f6a 100644 --- a/blocksuite/presets/src/fragments/outline/header/outline-panel-header.ts +++ b/blocksuite/affine/fragment-outline/src/header/outline-panel-header.ts @@ -1,5 +1,5 @@ +import { createButtonPopper } from '@blocksuite/affine-shared/utils'; import { ShadowlessElement } from '@blocksuite/block-std'; -import { createButtonPopper } from '@blocksuite/blocks'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import { SettingsIcon, SortIcon } from '@blocksuite/icons/lit'; import { consume } from '@lit/context'; diff --git a/blocksuite/presets/src/fragments/outline/header/outline-setting-menu.css.ts b/blocksuite/affine/fragment-outline/src/header/outline-setting-menu.css.ts similarity index 100% rename from blocksuite/presets/src/fragments/outline/header/outline-setting-menu.css.ts rename to blocksuite/affine/fragment-outline/src/header/outline-setting-menu.css.ts diff --git a/blocksuite/presets/src/fragments/outline/header/outline-setting-menu.ts b/blocksuite/affine/fragment-outline/src/header/outline-setting-menu.ts similarity index 100% rename from blocksuite/presets/src/fragments/outline/header/outline-setting-menu.ts rename to blocksuite/affine/fragment-outline/src/header/outline-setting-menu.ts diff --git a/blocksuite/presets/src/fragments/outline/index.ts b/blocksuite/affine/fragment-outline/src/index.ts similarity index 100% rename from blocksuite/presets/src/fragments/outline/index.ts rename to blocksuite/affine/fragment-outline/src/index.ts diff --git a/blocksuite/presets/src/fragments/outline/mobile-outline-panel.ts b/blocksuite/affine/fragment-outline/src/mobile-outline-panel.ts similarity index 96% rename from blocksuite/presets/src/fragments/outline/mobile-outline-panel.ts rename to blocksuite/affine/fragment-outline/src/mobile-outline-panel.ts index a18b189fc..a8add1d34 100644 --- a/blocksuite/presets/src/fragments/outline/mobile-outline-panel.ts +++ b/blocksuite/affine/fragment-outline/src/mobile-outline-panel.ts @@ -1,16 +1,16 @@ +import { + NoteDisplayMode, + ParagraphBlockModel, + RootBlockModel, +} from '@blocksuite/affine-model'; +import { DocModeProvider } from '@blocksuite/affine-shared/services'; import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; +import { matchModels } from '@blocksuite/affine-shared/utils'; import { type EditorHost, PropTypes, requiredProperties, } from '@blocksuite/block-std'; -import { - DocModeProvider, - matchModels, - NoteDisplayMode, - ParagraphBlockModel, - RootBlockModel, -} from '@blocksuite/blocks'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import type { BlockModel } from '@blocksuite/store'; import { signal } from '@preact/signals-core'; diff --git a/blocksuite/presets/src/fragments/outline/outline-panel.css.ts b/blocksuite/affine/fragment-outline/src/outline-panel.css.ts similarity index 100% rename from blocksuite/presets/src/fragments/outline/outline-panel.css.ts rename to blocksuite/affine/fragment-outline/src/outline-panel.css.ts diff --git a/blocksuite/presets/src/fragments/outline/outline-panel.ts b/blocksuite/affine/fragment-outline/src/outline-panel.ts similarity index 97% rename from blocksuite/presets/src/fragments/outline/outline-panel.ts rename to blocksuite/affine/fragment-outline/src/outline-panel.ts index 0e54b217c..7fffd086c 100644 --- a/blocksuite/presets/src/fragments/outline/outline-panel.ts +++ b/blocksuite/affine/fragment-outline/src/outline-panel.ts @@ -1,10 +1,10 @@ +import { DocModeProvider } from '@blocksuite/affine-shared/services'; import { type EditorHost, PropTypes, requiredProperties, ShadowlessElement, } from '@blocksuite/block-std'; -import { DocModeProvider } from '@blocksuite/blocks'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import { provide } from '@lit/context'; import { effect, signal } from '@preact/signals-core'; diff --git a/blocksuite/presets/src/fragments/outline/outline-viewer.ts b/blocksuite/affine/fragment-outline/src/outline-viewer.ts similarity index 97% rename from blocksuite/presets/src/fragments/outline/outline-viewer.ts rename to blocksuite/affine/fragment-outline/src/outline-viewer.ts index ca410643e..064a74b02 100644 --- a/blocksuite/presets/src/fragments/outline/outline-viewer.ts +++ b/blocksuite/affine/fragment-outline/src/outline-viewer.ts @@ -1,14 +1,12 @@ +import { NoteDisplayMode } from '@blocksuite/affine-model'; +import { DocModeProvider } from '@blocksuite/affine-shared/services'; +import { scrollbarStyle } from '@blocksuite/affine-shared/styles'; import { type EditorHost, PropTypes, requiredProperties, ShadowlessElement, } from '@blocksuite/block-std'; -import { - DocModeProvider, - NoteDisplayMode, - scrollbarStyle, -} from '@blocksuite/blocks'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import { TocIcon } from '@blocksuite/icons/lit'; import { provide } from '@lit/context'; diff --git a/blocksuite/presets/src/fragments/outline/utils/custom-events.ts b/blocksuite/affine/fragment-outline/src/utils/custom-events.ts similarity index 96% rename from blocksuite/presets/src/fragments/outline/utils/custom-events.ts rename to blocksuite/affine/fragment-outline/src/utils/custom-events.ts index 7140eb0ba..11324c0d2 100644 --- a/blocksuite/presets/src/fragments/outline/utils/custom-events.ts +++ b/blocksuite/affine/fragment-outline/src/utils/custom-events.ts @@ -1,4 +1,4 @@ -import type { NoteBlockModel, NoteDisplayMode } from '@blocksuite/blocks'; +import type { NoteBlockModel, NoteDisplayMode } from '@blocksuite/affine-model'; export type ReorderEvent = CustomEvent<{ currentNumber: number; diff --git a/blocksuite/presets/src/fragments/outline/utils/drag.ts b/blocksuite/affine/fragment-outline/src/utils/drag.ts similarity index 100% rename from blocksuite/presets/src/fragments/outline/utils/drag.ts rename to blocksuite/affine/fragment-outline/src/utils/drag.ts diff --git a/blocksuite/presets/src/fragments/outline/utils/query.ts b/blocksuite/affine/fragment-outline/src/utils/query.ts similarity index 88% rename from blocksuite/presets/src/fragments/outline/utils/query.ts rename to blocksuite/affine/fragment-outline/src/utils/query.ts index 0ddc4f587..f1beff057 100644 --- a/blocksuite/presets/src/fragments/outline/utils/query.ts +++ b/blocksuite/affine/fragment-outline/src/utils/query.ts @@ -1,11 +1,10 @@ import { - BlocksUtils, - matchModels, NoteBlockModel, NoteDisplayMode, ParagraphBlockModel, RootBlockModel, -} from '@blocksuite/blocks'; +} from '@blocksuite/affine-model'; +import { matchModels } from '@blocksuite/affine-shared/utils'; import type { BlockModel, Store } from '@blocksuite/store'; import { headingKeys } from '../config.js'; @@ -35,14 +34,14 @@ export function getNotesFromDoc( } export function isRootBlock(block: BlockModel): block is RootBlockModel { - return BlocksUtils.matchModels(block, [RootBlockModel]); + return matchModels(block, [RootBlockModel]); } export function isHeadingBlock( block: BlockModel ): block is ParagraphBlockModel { return ( - BlocksUtils.matchModels(block, [ParagraphBlockModel]) && + matchModels(block, [ParagraphBlockModel]) && headingKeys.has(block.type$.value) ); } diff --git a/blocksuite/presets/src/fragments/outline/utils/scroll.ts b/blocksuite/affine/fragment-outline/src/utils/scroll.ts similarity index 91% rename from blocksuite/presets/src/fragments/outline/utils/scroll.ts rename to blocksuite/affine/fragment-outline/src/utils/scroll.ts index 855de2c1c..f21d63327 100644 --- a/blocksuite/presets/src/fragments/outline/utils/scroll.ts +++ b/blocksuite/affine/fragment-outline/src/utils/scroll.ts @@ -1,9 +1,8 @@ +import { getDocTitleByEditorHost } from '@blocksuite/affine-components/doc-title'; +import { NoteDisplayMode } from '@blocksuite/affine-model'; +import { DocModeProvider } from '@blocksuite/affine-shared/services'; +import type { Viewport } from '@blocksuite/affine-shared/types'; import type { EditorHost } from '@blocksuite/block-std'; -import { - DocModeProvider, - getDocTitleByEditorHost, - NoteDisplayMode, -} from '@blocksuite/blocks'; import { clamp, DisposableGroup } from '@blocksuite/global/utils'; import { getHeadingBlocksFromDoc } from './query.js'; @@ -13,7 +12,7 @@ export function scrollToBlock(host: EditorHost, blockId: string) { const mode = docModeService.getEditorMode(); if (mode === 'edgeless') return; - if (editor.doc.root?.id === blockId) { + if (host.doc.root?.id === blockId) { const docTitle = getDocTitleByEditorHost(host); if (!docTitle) return; @@ -89,7 +88,9 @@ function highlightBlock(host: EditorHost, blockId: string) { if (host.doc.root?.id === blockId) return emptyClear; - const rootComponent = host.querySelector('affine-page-root'); + const rootComponent = host.querySelector< + HTMLElement & { viewport: Viewport } + >('affine-page-root'); if (!rootComponent) return emptyClear; if (!rootComponent.viewport) { diff --git a/blocksuite/affine/fragment-outline/tsconfig.json b/blocksuite/affine/fragment-outline/tsconfig.json new file mode 100644 index 000000000..5617ed4f3 --- /dev/null +++ b/blocksuite/affine/fragment-outline/tsconfig.json @@ -0,0 +1,19 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "outDir": "./dist", + "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo" + }, + "include": ["./src"], + "references": [ + { "path": "../block-note" }, + { "path": "../components" }, + { "path": "../model" }, + { "path": "../shared" }, + { "path": "../../framework/block-std" }, + { "path": "../../framework/global" }, + { "path": "../../framework/inline" }, + { "path": "../../framework/store" } + ] +} diff --git a/blocksuite/blocks/package.json b/blocksuite/blocks/package.json index c4f73c409..f42b15a84 100644 --- a/blocksuite/blocks/package.json +++ b/blocksuite/blocks/package.json @@ -33,6 +33,7 @@ "@blocksuite/affine-block-table": "workspace:*", "@blocksuite/affine-components": "workspace:*", "@blocksuite/affine-fragment-frame-panel": "workspace:*", + "@blocksuite/affine-fragment-outline": "workspace:*", "@blocksuite/affine-model": "workspace:*", "@blocksuite/affine-shared": "workspace:*", "@blocksuite/affine-widget-drag-handle": "workspace:*", diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts index 9b68a5de5..f607b7035 100644 --- a/blocksuite/blocks/src/effects.ts +++ b/blocksuite/blocks/src/effects.ts @@ -34,6 +34,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 fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects'; +import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects'; import { effects as widgetDragHandleEffects } from '@blocksuite/affine-widget-drag-handle/effects'; import { effects as widgetEdgelessAutoConnectEffects } from '@blocksuite/affine-widget-edgeless-auto-connect/effects'; import { effects as widgetFrameTitleEffects } from '@blocksuite/affine-widget-frame-title/effects'; @@ -229,6 +230,7 @@ export function effects() { widgetEdgelessAutoConnectEffects(); fragmentFramePanelEffects(); + fragmentOutlineEffects(); customElements.define('affine-page-root', PageRootBlockComponent); customElements.define('affine-preview-root', PreviewRootBlockComponent); diff --git a/blocksuite/blocks/src/index.ts b/blocksuite/blocks/src/index.ts index 7dc6f757b..eafc99426 100644 --- a/blocksuite/blocks/src/index.ts +++ b/blocksuite/blocks/src/index.ts @@ -91,6 +91,7 @@ export { Tooltip, } from '@blocksuite/affine-components/toolbar'; export * from '@blocksuite/affine-fragment-frame-panel'; +export * from '@blocksuite/affine-fragment-outline'; export * from '@blocksuite/affine-model'; export { AttachmentAdapter, diff --git a/blocksuite/blocks/tsconfig.json b/blocksuite/blocks/tsconfig.json index 713345bb0..681b898bc 100644 --- a/blocksuite/blocks/tsconfig.json +++ b/blocksuite/blocks/tsconfig.json @@ -26,6 +26,7 @@ { "path": "../affine/block-table" }, { "path": "../affine/components" }, { "path": "../affine/fragment-frame-panel" }, + { "path": "../affine/fragment-outline" }, { "path": "../affine/model" }, { "path": "../affine/shared" }, { "path": "../affine/widget-drag-handle" }, diff --git a/blocksuite/presets/src/effects.ts b/blocksuite/presets/src/effects.ts index 3e9dd2c64..6aa7fa268 100644 --- a/blocksuite/presets/src/effects.ts +++ b/blocksuite/presets/src/effects.ts @@ -7,56 +7,12 @@ import { PageEditor, } from './editors/index.js'; import { CommentInput } from './fragments/comment/comment-input.js'; -import { - AFFINE_MOBILE_OUTLINE_MENU, - AFFINE_OUTLINE_PANEL, - AFFINE_OUTLINE_VIEWER, - CommentPanel, - MobileOutlineMenu, - OutlinePanel, - OutlineViewer, -} from './fragments/index.js'; -import { - AFFINE_OUTLINE_NOTICE, - OutlineNotice, -} from './fragments/outline/body/outline-notice.js'; -import { - AFFINE_OUTLINE_PANEL_BODY, - OutlinePanelBody, -} from './fragments/outline/body/outline-panel-body.js'; -import { - AFFINE_OUTLINE_NOTE_CARD, - OutlineNoteCard, -} from './fragments/outline/card/outline-card.js'; -import { - AFFINE_OUTLINE_BLOCK_PREVIEW, - OutlineBlockPreview, -} from './fragments/outline/card/outline-preview.js'; -import { - AFFINE_OUTLINE_PANEL_HEADER, - OutlinePanelHeader, -} from './fragments/outline/header/outline-panel-header.js'; -import { - AFFINE_OUTLINE_NOTE_PREVIEW_SETTING_MENU, - OutlineNotePreviewSettingMenu, -} from './fragments/outline/header/outline-setting-menu.js'; +import { CommentPanel } from './fragments/index.js'; export function effects() { customElements.define('page-editor', PageEditor); customElements.define('comment-input', CommentInput); - customElements.define( - AFFINE_OUTLINE_NOTE_PREVIEW_SETTING_MENU, - OutlineNotePreviewSettingMenu - ); - customElements.define(AFFINE_OUTLINE_NOTICE, OutlineNotice); customElements.define('comment-panel', CommentPanel); - customElements.define(AFFINE_OUTLINE_PANEL, OutlinePanel); - customElements.define(AFFINE_OUTLINE_PANEL_HEADER, OutlinePanelHeader); customElements.define('affine-editor-container', AffineEditorContainer); - customElements.define(AFFINE_OUTLINE_NOTE_CARD, OutlineNoteCard); customElements.define('edgeless-editor', EdgelessEditor); - customElements.define(AFFINE_OUTLINE_VIEWER, OutlineViewer); - customElements.define(AFFINE_MOBILE_OUTLINE_MENU, MobileOutlineMenu); - customElements.define(AFFINE_OUTLINE_BLOCK_PREVIEW, OutlineBlockPreview); - customElements.define(AFFINE_OUTLINE_PANEL_BODY, OutlinePanelBody); } diff --git a/blocksuite/presets/src/fragments/index.ts b/blocksuite/presets/src/fragments/index.ts index 87d148805..9881073fa 100644 --- a/blocksuite/presets/src/fragments/index.ts +++ b/blocksuite/presets/src/fragments/index.ts @@ -1,2 +1 @@ export * from './comment/index.js'; -export * from './outline/index.js'; diff --git a/packages/frontend/apps/electron-renderer/package.json b/packages/frontend/apps/electron-renderer/package.json index deb3f8005..777fc5210 100644 --- a/packages/frontend/apps/electron-renderer/package.json +++ b/packages/frontend/apps/electron-renderer/package.json @@ -17,7 +17,7 @@ "@sentry/react": "^8.44.0", "@toeverything/infra": "workspace:*", "@toeverything/theme": "^1.1.11", - "@vanilla-extract/css": "^1.16.1", + "@vanilla-extract/css": "^1.17.0", "async-call-rpc": "^6.4.2", "next-themes": "^0.4.4", "react": "^19.0.0", diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json index 8eaf2abdf..dcb350cdc 100644 --- a/packages/frontend/component/package.json +++ b/packages/frontend/component/package.json @@ -79,7 +79,7 @@ "@testing-library/react": "^16.1.0", "@types/react": "^19.0.1", "@types/react-dom": "^19.0.2", - "@vanilla-extract/css": "^1.16.1", + "@vanilla-extract/css": "^1.17.0", "storybook": "^8.4.7", "typescript": "^5.7.2", "unplugin-swc": "^1.5.1", diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json index 657152c99..102bef54d 100644 --- a/packages/frontend/core/package.json +++ b/packages/frontend/core/package.json @@ -88,7 +88,7 @@ "@types/bytes": "^3.1.5", "@types/image-blob-reduce": "^4.1.4", "@types/lodash-es": "^4.17.12", - "@vanilla-extract/css": "^1.16.1", + "@vanilla-extract/css": "^1.17.0", "fake-indexeddb": "^6.0.0", "lodash-es": "^4.17.21", "vitest": "3.0.6" diff --git a/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx b/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx index 97fb92a13..bccd74ddb 100644 --- a/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx +++ b/packages/frontend/core/src/components/blocksuite/outline-viewer/index.tsx @@ -1,5 +1,5 @@ import type { EditorHost } from '@blocksuite/affine/block-std'; -import { OutlineViewer } from '@blocksuite/affine/presets'; +import { OutlineViewer } from '@blocksuite/affine/blocks'; import { useCallback, useRef } from 'react'; import * as styles from './outline-viewer.css'; diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx index 9912fc356..b00ba259f 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/outline.tsx @@ -1,5 +1,5 @@ import type { EditorHost } from '@blocksuite/affine/block-std'; -import { OutlinePanel } from '@blocksuite/affine/presets'; +import { OutlinePanel } from '@blocksuite/affine/blocks'; import { useCallback, useEffect, useRef } from 'react'; import * as styles from './outline.css'; diff --git a/packages/frontend/core/src/mobile/components/toc-menu/index.tsx b/packages/frontend/core/src/mobile/components/toc-menu/index.tsx index 48b07c69f..809786bf3 100644 --- a/packages/frontend/core/src/mobile/components/toc-menu/index.tsx +++ b/packages/frontend/core/src/mobile/components/toc-menu/index.tsx @@ -1,5 +1,5 @@ import type { EditorHost } from '@blocksuite/affine/block-std'; -import { MobileOutlineMenu } from '@blocksuite/affine/presets'; +import { MobileOutlineMenu } from '@blocksuite/affine/blocks'; import { useCallback, useRef } from 'react'; export const MobileTocMenu = ({ editor }: { editor: EditorHost | null }) => { diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index bd4f24cbd..0a3e6408d 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -289,6 +289,20 @@ export const PackageList = [ 'blocksuite/framework/store', ], }, + { + location: 'blocksuite/affine/fragment-outline', + name: '@blocksuite/affine-fragment-outline', + workspaceDependencies: [ + 'blocksuite/affine/block-note', + 'blocksuite/affine/components', + 'blocksuite/affine/model', + 'blocksuite/affine/shared', + 'blocksuite/framework/block-std', + 'blocksuite/framework/global', + 'blocksuite/framework/inline', + 'blocksuite/framework/store', + ], + }, { location: 'blocksuite/affine/model', name: '@blocksuite/affine-model', @@ -396,6 +410,7 @@ export const PackageList = [ 'blocksuite/affine/block-table', 'blocksuite/affine/components', 'blocksuite/affine/fragment-frame-panel', + 'blocksuite/affine/fragment-outline', 'blocksuite/affine/model', 'blocksuite/affine/shared', 'blocksuite/affine/widget-drag-handle', @@ -780,6 +795,7 @@ export type PackageName = | '@blocksuite/affine-components' | '@blocksuite/data-view' | '@blocksuite/affine-fragment-frame-panel' + | '@blocksuite/affine-fragment-outline' | '@blocksuite/affine-model' | '@blocksuite/affine-shared' | '@blocksuite/affine-widget-drag-handle' diff --git a/tsconfig.json b/tsconfig.json index 7e51c2a2b..a8dc236d1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -71,6 +71,7 @@ { "path": "./blocksuite/affine/components" }, { "path": "./blocksuite/affine/data-view" }, { "path": "./blocksuite/affine/fragment-frame-panel" }, + { "path": "./blocksuite/affine/fragment-outline" }, { "path": "./blocksuite/affine/model" }, { "path": "./blocksuite/affine/shared" }, { "path": "./blocksuite/affine/widget-drag-handle" }, diff --git a/yarn.lock b/yarn.lock index 0fa0c5221..5e69660c1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -311,7 +311,7 @@ __metadata: "@toeverything/theme": "npm:^1.1.11" "@types/react": "npm:^19.0.1" "@types/react-dom": "npm:^19.0.2" - "@vanilla-extract/css": "npm:^1.16.1" + "@vanilla-extract/css": "npm:^1.17.0" "@vanilla-extract/dynamic": "npm:^2.1.2" check-password-strength: "npm:^3.0.0" clsx: "npm:^2.1.1" @@ -396,7 +396,7 @@ __metadata: "@types/bytes": "npm:^3.1.5" "@types/image-blob-reduce": "npm:^4.1.4" "@types/lodash-es": "npm:^4.17.12" - "@vanilla-extract/css": "npm:^1.16.1" + "@vanilla-extract/css": "npm:^1.17.0" "@vanilla-extract/dynamic": "npm:^2.1.2" animejs: "npm:^3.2.2" bytes: "npm:^3.1.2" @@ -488,7 +488,7 @@ __metadata: "@toeverything/theme": "npm:^1.1.11" "@types/react": "npm:^19.0.1" "@types/react-dom": "npm:^19.0.2" - "@vanilla-extract/css": "npm:^1.16.1" + "@vanilla-extract/css": "npm:^1.17.0" async-call-rpc: "npm:^6.4.2" cross-env: "npm:^7.0.3" next-themes: "npm:^0.4.4" @@ -3680,7 +3680,7 @@ __metadata: "@blocksuite/store": "workspace:*" "@floating-ui/dom": "npm:^1.6.10" "@preact/signals-core": "npm:^1.8.0" - "@vanilla-extract/css": "npm:^1.14.0" + "@vanilla-extract/css": "npm:^1.17.0" lit: "npm:^3.2.0" yjs: "npm:^13.6.21" zod: "npm:^3.24.1" @@ -3744,6 +3744,30 @@ __metadata: languageName: unknown linkType: soft +"@blocksuite/affine-fragment-outline@workspace:*, @blocksuite/affine-fragment-outline@workspace:blocksuite/affine/fragment-outline": + version: 0.0.0-use.local + resolution: "@blocksuite/affine-fragment-outline@workspace:blocksuite/affine/fragment-outline" + dependencies: + "@blocksuite/affine-block-note": "workspace:*" + "@blocksuite/affine-components": "workspace:*" + "@blocksuite/affine-model": "workspace:*" + "@blocksuite/affine-shared": "workspace:*" + "@blocksuite/block-std": "workspace:*" + "@blocksuite/global": "workspace:*" + "@blocksuite/icons": "npm:^2.2.1" + "@blocksuite/inline": "workspace:*" + "@blocksuite/store": "workspace:*" + "@floating-ui/dom": "npm:^1.6.10" + "@lit/context": "npm:^1.1.2" + "@preact/signals-core": "npm:^1.8.0" + "@toeverything/theme": "npm:^1.1.11" + "@vanilla-extract/css": "npm:^1.17.0" + lit: "npm:^3.2.0" + minimatch: "npm:^10.0.1" + zod: "npm:^3.23.8" + languageName: unknown + linkType: soft + "@blocksuite/affine-model@workspace:*, @blocksuite/affine-model@workspace:blocksuite/affine/model": version: 0.0.0-use.local resolution: "@blocksuite/affine-model@workspace:blocksuite/affine/model" @@ -3962,6 +3986,7 @@ __metadata: "@blocksuite/affine-block-table": "workspace:*" "@blocksuite/affine-components": "workspace:*" "@blocksuite/affine-fragment-frame-panel": "workspace:*" + "@blocksuite/affine-fragment-outline": "workspace:*" "@blocksuite/affine-model": "workspace:*" "@blocksuite/affine-shared": "workspace:*" "@blocksuite/affine-widget-drag-handle": "workspace:*" @@ -15886,7 +15911,7 @@ __metadata: languageName: node linkType: hard -"@vanilla-extract/css@npm:^1.14.0, @vanilla-extract/css@npm:^1.16.1, @vanilla-extract/css@npm:^1.17.0, @vanilla-extract/css@npm:^1.17.1": +"@vanilla-extract/css@npm:^1.17.0, @vanilla-extract/css@npm:^1.17.1": version: 1.17.1 resolution: "@vanilla-extract/css@npm:1.17.1" dependencies: