feat(editor): root block extension (#12063)

Closes: BS-3202

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

- **New Features**
  - Introduced new root block store and view extensions, enhancing modularity and integration options for root block functionality.
  - Exported the EdgelessLocker class for broader usage.

- **Improvements**
  - Updated export paths for root block modules, enabling clearer and more flexible module access.
  - Enhanced view extension setup to better tailor user interface and interactions based on context.

- **Removals**
  - Removed legacy migrating store and view extension logic, streamlining extension management and reducing unused code.
  - Removed multiple deprecated block specifications and common extension collections to simplify the codebase.
  - Deleted AI page root block specification, retaining only lifecycle watcher functionality.

- **Chores**
  - Updated dependencies and project references to support new extension loader integration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Saul-Mirone
2025-04-29 09:15:51 +00:00
parent b5edd7a6bb
commit d6ab958e15
22 changed files with 138 additions and 246 deletions
+3 -1
View File
@@ -139,7 +139,9 @@
"./blocks/paragraph": "./src/blocks/paragraph/index.ts",
"./blocks/paragraph/store": "./src/blocks/paragraph/store.ts",
"./blocks/paragraph/view": "./src/blocks/paragraph/view.ts",
"./blocks/root": "./src/blocks/root.ts",
"./blocks/root": "./src/blocks/root/index.ts",
"./blocks/root/store": "./src/blocks/root/store.ts",
"./blocks/root/view": "./src/blocks/root/view.ts",
"./blocks/surface": "./src/blocks/surface/index.ts",
"./blocks/surface/store": "./src/blocks/surface/store.ts",
"./blocks/surface/view": "./src/blocks/surface/view.ts",
@@ -0,0 +1 @@
export * from '@blocksuite/affine-block-root/store';
@@ -0,0 +1 @@
export * from '@blocksuite/affine-block-root/view';
@@ -1,11 +1,8 @@
import { effects as blockRootEffects } from '@blocksuite/affine-block-root/effects';
import { effects as fragmentDocTitleEffects } from '@blocksuite/affine-fragment-doc-title/effects';
import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects';
import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects';
export function effects() {
blockRootEffects();
fragmentDocTitleEffects();
fragmentFramePanelEffects();
fragmentOutlineEffects();
@@ -1,48 +0,0 @@
import {
RootBlockHtmlAdapterExtension,
RootBlockMarkdownAdapterExtension,
RootBlockNotionHtmlAdapterExtension,
} from '@blocksuite/affine-block-root';
import {
type StoreExtensionContext,
StoreExtensionProvider,
} from '@blocksuite/affine-ext-loader';
import { RootBlockSchemaExtension } from '@blocksuite/affine-model';
import type { ExtensionType } from '@blocksuite/store';
const defaultBlockHtmlAdapterMatchers = [RootBlockHtmlAdapterExtension];
const defaultBlockMarkdownAdapterMatchers = [RootBlockMarkdownAdapterExtension];
const defaultBlockNotionHtmlAdapterMatchers: ExtensionType[] = [
RootBlockNotionHtmlAdapterExtension,
];
function getHtmlAdapterExtensions(): ExtensionType[] {
return [...defaultBlockHtmlAdapterMatchers];
}
function getMarkdownAdapterExtensions(): ExtensionType[] {
return [...defaultBlockMarkdownAdapterMatchers];
}
function getNotionHtmlAdapterExtensions(): ExtensionType[] {
return [...defaultBlockNotionHtmlAdapterMatchers];
}
const MigratingStoreExtensions: ExtensionType[] = [
RootBlockSchemaExtension,
getHtmlAdapterExtensions(),
getMarkdownAdapterExtensions(),
getNotionHtmlAdapterExtensions(),
].flat();
export class MigratingStoreExtension extends StoreExtensionProvider {
override name = 'migrating';
override setup(context: StoreExtensionContext) {
super.setup(context);
context.register(MigratingStoreExtensions);
}
}
@@ -4,12 +4,6 @@ import {
} from '@blocksuite/affine-ext-loader';
import { effects } from './effects';
import {
MigratingEdgelessEditorBlockSpecs,
MigratingPageEditorBlockSpecs,
MigratingPreviewEdgelessEditorBlockSpecs,
MigratingPreviewPageEditorBlockSpecs,
} from './migrating';
export class MigratingViewExtension extends ViewExtensionProvider {
override name = 'migrating';
@@ -21,22 +15,5 @@ export class MigratingViewExtension extends ViewExtensionProvider {
override setup(context: ViewExtensionContext) {
super.setup(context);
const scope = context.scope;
if (scope === 'preview-page') {
context.register(MigratingPreviewPageEditorBlockSpecs);
return;
}
if (scope === 'preview-edgeless') {
context.register(MigratingPreviewEdgelessEditorBlockSpecs);
return;
}
if (scope === 'page' || scope === 'mobile-page') {
context.register(MigratingPageEditorBlockSpecs);
return;
}
if (scope === 'edgeless' || scope === 'mobile-edgeless') {
context.register(MigratingEdgelessEditorBlockSpecs);
return;
}
}
}
@@ -1,26 +0,0 @@
import {
EdgelessBuiltInSpecs,
PageRootBlockSpec,
PreviewEdgelessRootBlockSpec,
PreviewPageRootBlockSpec,
ReadOnlyClipboard,
} from '@blocksuite/affine-block-root';
import type { ExtensionType } from '@blocksuite/store';
export const MigratingEdgelessEditorBlockSpecs: ExtensionType[] = [
EdgelessBuiltInSpecs,
].flat();
export const MigratingPageEditorBlockSpecs: ExtensionType[] = [
PageRootBlockSpec,
].flat();
export const MigratingPreviewEdgelessEditorBlockSpecs: ExtensionType[] = [
PreviewEdgelessRootBlockSpec,
ReadOnlyClipboard,
].flat();
export const MigratingPreviewPageEditorBlockSpecs: ExtensionType[] = [
PreviewPageRootBlockSpec,
ReadOnlyClipboard,
].flat();
@@ -13,6 +13,7 @@ import { LatexStoreExtension } from '@blocksuite/affine-block-latex/store';
import { ListStoreExtension } from '@blocksuite/affine-block-list/store';
import { NoteStoreExtension } from '@blocksuite/affine-block-note/store';
import { ParagraphStoreExtension } from '@blocksuite/affine-block-paragraph/store';
import { RootStoreExtension } from '@blocksuite/affine-block-root/store';
import { SurfaceStoreExtension } from '@blocksuite/affine-block-surface/store';
import { SurfaceRefStoreExtension } from '@blocksuite/affine-block-surface-ref/store';
import { TableStoreExtension } from '@blocksuite/affine-block-table/store';
@@ -29,8 +30,6 @@ import { LinkStoreExtension } from '@blocksuite/affine-inline-link/store';
import { InlinePresetStoreExtension } from '@blocksuite/affine-inline-preset/store';
import { ReferenceStoreExtension } from '@blocksuite/affine-inline-reference/store';
import { MigratingStoreExtension } from './migrating-store';
export function getInternalStoreExtensions() {
return [
FoundationStoreExtension,
@@ -53,6 +52,7 @@ export function getInternalStoreExtensions() {
SurfaceRefStoreExtension,
TableStoreExtension,
SurfaceStoreExtension,
RootStoreExtension,
FootnoteStoreExtension,
LinkStoreExtension,
@@ -66,7 +66,5 @@ export function getInternalStoreExtensions() {
ConnectorStoreExtension,
GroupStoreExtension,
TextStoreExtension,
MigratingStoreExtension,
];
}
@@ -13,6 +13,7 @@ import { LatexViewExtension } from '@blocksuite/affine-block-latex/view';
import { ListViewExtension } from '@blocksuite/affine-block-list/view';
import { NoteViewExtension } from '@blocksuite/affine-block-note/view';
import { ParagraphViewExtension } from '@blocksuite/affine-block-paragraph/view';
import { RootViewExtension } from '@blocksuite/affine-block-root/view';
import { SurfaceViewExtension } from '@blocksuite/affine-block-surface/view';
import { SurfaceRefViewExtension } from '@blocksuite/affine-block-surface-ref/view';
import { TableViewExtension } from '@blocksuite/affine-block-table/view';
@@ -84,6 +85,7 @@ export function getInternalViewExtensions() {
SurfaceRefViewExtension,
TableViewExtension,
SurfaceViewExtension,
RootViewExtension,
// Inline
FootnoteViewExtension,
+4 -8
View File
@@ -21,7 +21,7 @@
"@blocksuite/affine-block-paragraph": "workspace:*",
"@blocksuite/affine-block-surface": "workspace:*",
"@blocksuite/affine-components": "workspace:*",
"@blocksuite/affine-fragment-doc-title": "workspace:*",
"@blocksuite/affine-ext-loader": "workspace:*",
"@blocksuite/affine-gfx-brush": "workspace:*",
"@blocksuite/affine-gfx-connector": "workspace:*",
"@blocksuite/affine-gfx-group": "workspace:*",
@@ -35,8 +35,6 @@
"@blocksuite/affine-rich-text": "workspace:*",
"@blocksuite/affine-shared": "workspace:*",
"@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
"@blocksuite/affine-widget-slash-menu": "workspace:*",
"@blocksuite/affine-widget-toolbar": "workspace:*",
"@blocksuite/data-view": "workspace:*",
"@blocksuite/global": "workspace:*",
"@blocksuite/icons": "^2.2.12",
@@ -47,22 +45,20 @@
"@preact/signals-core": "^1.8.0",
"@toeverything/theme": "^1.1.12",
"@types/lodash-es": "^4.17.12",
"@types/mdast": "^4.0.4",
"@vanilla-extract/css": "^1.17.0",
"dompurify": "^3.2.4",
"fflate": "^0.8.2",
"html2canvas": "^1.4.1",
"lit": "^3.2.0",
"lodash-es": "^4.17.21",
"minimatch": "^10.0.1",
"rxjs": "^7.8.1",
"simple-xml-to-json": "^1.2.2",
"yjs": "^13.6.21",
"zod": "^3.23.8"
},
"exports": {
".": "./src/index.ts",
"./effects": "./src/effects.ts"
"./effects": "./src/effects.ts",
"./store": "./src/store.ts",
"./view": "./src/view.ts"
},
"files": [
"src",
@@ -1,19 +0,0 @@
import { NoteBlockSchema } from '@blocksuite/affine-model';
import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
import { BlockFlavourIdentifier, FlavourExtension } from '@blocksuite/std';
import type { ExtensionType } from '@blocksuite/store';
import { RootBlockAdapterExtensions } from '../adapters/extension';
import { builtinToolbarConfig } from '../configs/toolbar';
import { fallbackKeymap } from '../keyboard/keymap';
export const CommonSpecs: ExtensionType[] = [
FlavourExtension('affine:page'),
...RootBlockAdapterExtensions,
fallbackKeymap,
ToolbarModuleExtension({
id: BlockFlavourIdentifier(NoteBlockSchema.model.flavour),
config: builtinToolbarConfig,
}),
];
@@ -1,15 +0,0 @@
import type { ExtensionType } from '@blocksuite/store';
import { EdgelessElementToolbarExtension } from './configs/toolbar';
import { EdgelessRootBlockSpec } from './edgeless-root-spec.js';
import { AltCloneExtension } from './interact-extensions/clone-ext.js';
export const EdgelessBuiltInManager: ExtensionType[] = [
AltCloneExtension,
EdgelessElementToolbarExtension,
].flat();
export const EdgelessBuiltInSpecs: ExtensionType[] = [
EdgelessRootBlockSpec,
EdgelessBuiltInManager,
].flat();
@@ -1,19 +1,10 @@
import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
import {
BlockViewExtension,
LifeCycleWatcher,
WidgetViewExtension,
} from '@blocksuite/std';
import { LifeCycleWatcher, WidgetViewExtension } from '@blocksuite/std';
import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
import type { ExtensionType } from '@blocksuite/store';
import { literal, unsafeStatic } from 'lit/static-html.js';
import { CommonSpecs } from '../common-specs/index.js';
import { EdgelessClipboardController } from './clipboard/clipboard.js';
import { NOTE_SLICER_WIDGET } from './components/note-slicer/index.js';
import { EDGELESS_DRAGGING_AREA_WIDGET } from './components/rects/edgeless-dragging-area-rect.js';
import { EDGELESS_SELECTED_RECT_WIDGET } from './components/rects/edgeless-selected-rect.js';
import { EdgelessRootService } from './edgeless-root-service.js';
export const edgelessDraggingAreaWidget = WidgetViewExtension(
'affine:page',
@@ -31,7 +22,7 @@ export const edgelessSelectedRectWidget = WidgetViewExtension(
literal`${unsafeStatic(EDGELESS_SELECTED_RECT_WIDGET)}`
);
class EdgelessLocker extends LifeCycleWatcher {
export class EdgelessLocker extends LifeCycleWatcher {
static override key = 'edgeless-locker';
override mounted() {
@@ -39,24 +30,3 @@ class EdgelessLocker extends LifeCycleWatcher {
viewport.locked = true;
}
}
const EdgelessCommonExtension: ExtensionType[] = [
CommonSpecs,
EdgelessRootService,
ViewportElementExtension('.affine-edgeless-viewport'),
].flat();
export const EdgelessRootBlockSpec: ExtensionType[] = [
...EdgelessCommonExtension,
BlockViewExtension('affine:page', literal`affine-edgeless-root`),
edgelessDraggingAreaWidget,
noteSlicerWidget,
edgelessSelectedRectWidget,
EdgelessClipboardController,
];
export const PreviewEdgelessRootBlockSpec: ExtensionType[] = [
...EdgelessCommonExtension,
BlockViewExtension('affine:page', literal`affine-edgeless-root-preview`),
EdgelessLocker,
];
@@ -5,12 +5,9 @@ import type * as ShapeEffect from '@blocksuite/affine-gfx-shape';
export * from './adapters';
export * from './clipboard/index.js';
export * from './common-specs/index.js';
export * from './edgeless/edgeless-builtin-spec.js';
export * from './edgeless/edgeless-root-spec.js';
export * from './edgeless/index.js';
export * from './page/page-root-block.js';
export * from './page/page-root-spec.js';
export * from './preview/preview-root-block.js';
export * from './types.js';
export * from './utils/index.js';
@@ -1,23 +0,0 @@
import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
import { BlockViewExtension } from '@blocksuite/std';
import type { ExtensionType } from '@blocksuite/store';
import { literal } from 'lit/static-html.js';
import { PageClipboard } from '../clipboard/page-clipboard.js';
import { CommonSpecs } from '../common-specs/index.js';
const PageCommonExtension: ExtensionType[] = [
CommonSpecs,
ViewportElementExtension('.affine-page-viewport'),
].flat();
export const PageRootBlockSpec: ExtensionType[] = [
...PageCommonExtension,
BlockViewExtension('affine:page', literal`affine-page-root`),
PageClipboard,
].flat();
export const PreviewPageRootBlockSpec: ExtensionType[] = [
...PageCommonExtension,
BlockViewExtension('affine:page', literal`affine-preview-root`),
];
@@ -0,0 +1,17 @@
import {
type StoreExtensionContext,
StoreExtensionProvider,
} from '@blocksuite/affine-ext-loader';
import { RootBlockSchemaExtension } from '@blocksuite/affine-model';
import { RootBlockAdapterExtensions } from './adapters/extension';
export class RootStoreExtension extends StoreExtensionProvider {
override name = 'affine-root-block';
override setup(context: StoreExtensionContext) {
super.setup(context);
context.register(RootBlockSchemaExtension);
context.register(RootBlockAdapterExtensions);
}
}
+101
View File
@@ -0,0 +1,101 @@
import {
type ViewExtensionContext,
ViewExtensionProvider,
} from '@blocksuite/affine-ext-loader';
import { NoteBlockSchema } from '@blocksuite/affine-model';
import {
ToolbarModuleExtension,
ViewportElementExtension,
} from '@blocksuite/affine-shared/services';
import {
BlockFlavourIdentifier,
BlockViewExtension,
FlavourExtension,
} from '@blocksuite/std';
import { literal } from 'lit/static-html.js';
import { PageClipboard, ReadOnlyClipboard } from './clipboard';
import { builtinToolbarConfig } from './configs/toolbar';
import { EdgelessClipboardController, EdgelessRootService } from './edgeless';
import { EdgelessElementToolbarExtension } from './edgeless/configs/toolbar';
import {
edgelessDraggingAreaWidget,
EdgelessLocker,
edgelessSelectedRectWidget,
noteSlicerWidget,
} from './edgeless/edgeless-root-spec';
import { AltCloneExtension } from './edgeless/interact-extensions/clone-ext';
import { effects } from './effects';
import { fallbackKeymap } from './keyboard/keymap';
export class RootViewExtension extends ViewExtensionProvider {
override name = 'affine-root-block';
override effect(): void {
super.effect();
effects();
}
override setup(context: ViewExtensionContext) {
super.setup(context);
context.register([
FlavourExtension('affine:page'),
fallbackKeymap,
ToolbarModuleExtension({
id: BlockFlavourIdentifier(NoteBlockSchema.model.flavour),
config: builtinToolbarConfig,
}),
]);
if (
context.scope === 'preview-page' ||
context.scope === 'preview-edgeless'
) {
context.register(ReadOnlyClipboard);
}
if (this.isEdgeless(context.scope)) {
this._setupEdgeless(context);
return;
}
this._setupPage(context);
}
private readonly _setupPage = (context: ViewExtensionContext) => {
context.register(ViewportElementExtension('.affine-page-viewport'));
if (context.scope === 'preview-page') {
context.register(
BlockViewExtension('affine:page', literal`affine-preview-root`)
);
return;
}
context.register(
BlockViewExtension('affine:page', literal`affine-page-root`)
);
context.register(PageClipboard);
};
private readonly _setupEdgeless = (context: ViewExtensionContext) => {
context.register([
EdgelessRootService,
ViewportElementExtension('.affine-edgeless-viewport'),
]);
if (context.scope === 'preview-edgeless') {
context.register([
BlockViewExtension(
'affine:page',
literal`affine-edgeless-root-preview`
),
EdgelessLocker,
]);
return;
}
context.register([
BlockViewExtension('affine:page', literal`affine-edgeless-root`),
edgelessDraggingAreaWidget,
noteSlicerWidget,
edgelessSelectedRectWidget,
EdgelessClipboardController,
AltCloneExtension,
]);
context.register(EdgelessElementToolbarExtension);
};
}
+1 -3
View File
@@ -18,7 +18,7 @@
{ "path": "../paragraph" },
{ "path": "../surface" },
{ "path": "../../components" },
{ "path": "../../fragments/doc-title" },
{ "path": "../../ext-loader" },
{ "path": "../../gfx/brush" },
{ "path": "../../gfx/connector" },
{ "path": "../../gfx/group" },
@@ -32,8 +32,6 @@
{ "path": "../../rich-text" },
{ "path": "../../shared" },
{ "path": "../../widgets/edgeless-toolbar" },
{ "path": "../../widgets/slash-menu" },
{ "path": "../../widgets/toolbar" },
{ "path": "../../data-view" },
{ "path": "../../../framework/global" },
{ "path": "../../../framework/std" },
@@ -1,20 +1,9 @@
import { PageRootBlockSpec } from '@blocksuite/affine/blocks/root';
import { ToolbarModuleExtension } from '@blocksuite/affine/shared/services';
import {
BlockFlavourIdentifier,
LifeCycleWatcher,
} from '@blocksuite/affine/std';
import type { ExtensionType } from '@blocksuite/affine/store';
import { LifeCycleWatcher } from '@blocksuite/affine/std';
import type { FrameworkProvider } from '@toeverything/infra';
import { buildAIPanelConfig } from '../ai-panel';
import { toolbarAIEntryConfig } from '../entries';
import { setupSpaceAIEntry } from '../entries/space/setup-space';
import {
AffineAIPanelWidget,
aiPanelWidget,
} from '../widgets/ai-panel/ai-panel';
import { AiSlashMenuConfigExtension } from './ai-slash-menu';
import { AffineAIPanelWidget } from '../widgets/ai-panel/ai-panel';
export function getAIPageRootWatcher(framework: FrameworkProvider) {
class AIPageRootWatcher extends LifeCycleWatcher {
@@ -38,18 +27,3 @@ export function getAIPageRootWatcher(framework: FrameworkProvider) {
}
return AIPageRootWatcher;
}
export function createAIPageRootBlockSpec(
framework: FrameworkProvider
): ExtensionType[] {
return [
...PageRootBlockSpec,
aiPanelWidget,
getAIPageRootWatcher(framework),
ToolbarModuleExtension({
id: BlockFlavourIdentifier('custom:affine:note'),
config: toolbarAIEntryConfig(),
}),
AiSlashMenuConfigExtension(),
];
}
+1 -3
View File
@@ -337,7 +337,7 @@ export const PackageList = [
'blocksuite/affine/blocks/paragraph',
'blocksuite/affine/blocks/surface',
'blocksuite/affine/components',
'blocksuite/affine/fragments/doc-title',
'blocksuite/affine/ext-loader',
'blocksuite/affine/gfx/brush',
'blocksuite/affine/gfx/connector',
'blocksuite/affine/gfx/group',
@@ -351,8 +351,6 @@ export const PackageList = [
'blocksuite/affine/rich-text',
'blocksuite/affine/shared',
'blocksuite/affine/widgets/edgeless-toolbar',
'blocksuite/affine/widgets/slash-menu',
'blocksuite/affine/widgets/toolbar',
'blocksuite/affine/data-view',
'blocksuite/framework/global',
'blocksuite/framework/std',
+1 -7
View File
@@ -2847,7 +2847,7 @@ __metadata:
"@blocksuite/affine-block-paragraph": "workspace:*"
"@blocksuite/affine-block-surface": "workspace:*"
"@blocksuite/affine-components": "workspace:*"
"@blocksuite/affine-fragment-doc-title": "workspace:*"
"@blocksuite/affine-ext-loader": "workspace:*"
"@blocksuite/affine-gfx-brush": "workspace:*"
"@blocksuite/affine-gfx-connector": "workspace:*"
"@blocksuite/affine-gfx-group": "workspace:*"
@@ -2861,8 +2861,6 @@ __metadata:
"@blocksuite/affine-rich-text": "workspace:*"
"@blocksuite/affine-shared": "workspace:*"
"@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
"@blocksuite/affine-widget-slash-menu": "workspace:*"
"@blocksuite/affine-widget-toolbar": "workspace:*"
"@blocksuite/data-view": "workspace:*"
"@blocksuite/global": "workspace:*"
"@blocksuite/icons": "npm:^2.2.12"
@@ -2873,16 +2871,12 @@ __metadata:
"@preact/signals-core": "npm:^1.8.0"
"@toeverything/theme": "npm:^1.1.12"
"@types/lodash-es": "npm:^4.17.12"
"@types/mdast": "npm:^4.0.4"
"@vanilla-extract/css": "npm:^1.17.0"
dompurify: "npm:^3.2.4"
fflate: "npm:^0.8.2"
html2canvas: "npm:^1.4.1"
lit: "npm:^3.2.0"
lodash-es: "npm:^4.17.21"
minimatch: "npm:^10.0.1"
rxjs: "npm:^7.8.1"
simple-xml-to-json: "npm:^1.2.2"
yjs: "npm:^13.6.21"
zod: "npm:^3.23.8"
languageName: unknown