From e91e0e18121a0f371226ef68cef8f91b4e1ccc40 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Mon, 12 May 2025 01:36:41 +0000 Subject: [PATCH] refactor(editor): split turbo renderer and cloud view builder (#12213) ## Summary by CodeRabbit - **New Features** - Introduced dedicated extensions for cloud features, turbo renderer, and PDF embed preview, enabling modular and configurable view options. - Added audio embed preview support for attachments, enhancing the audio file viewing experience. - **Refactor** - Streamlined editor view configuration with modular extension registration. - Simplified extension setup by removing some feature flags and related services from core editor configuration. - **Chores** - Updated internal worker configuration paths for improved organization. --- .../block-suite-editor/lit-adaper.tsx | 7 ++- .../extensions/audio/audio-view.tsx | 19 ++++++++ .../src/blocksuite/extensions/cloud/index.ts | 40 +++++++++++++++++ .../extensions/{ => cloud}/user-list.ts | 0 .../blocksuite/extensions/{ => cloud}/user.ts | 0 .../src/blocksuite/extensions/pdf/index.ts | 38 ++++++++++++++++ .../pdf-view.tsx} | 15 ------- .../extensions/turbo-renderer/index.ts | 34 +++++++++++++++ .../turbo-painter.worker.ts | 0 .../{ => turbo-renderer}/turbo-renderer.ts | 0 .../src/blocksuite/manager/editor-view.tsx | 38 +--------------- .../src/blocksuite/manager/migrating-view.ts | 43 ++++++++++++++++++- tools/cli/src/bundle.ts | 4 +- 13 files changed, 180 insertions(+), 58 deletions(-) create mode 100644 packages/frontend/core/src/blocksuite/extensions/audio/audio-view.tsx create mode 100644 packages/frontend/core/src/blocksuite/extensions/cloud/index.ts rename packages/frontend/core/src/blocksuite/extensions/{ => cloud}/user-list.ts (100%) rename packages/frontend/core/src/blocksuite/extensions/{ => cloud}/user.ts (100%) create mode 100644 packages/frontend/core/src/blocksuite/extensions/pdf/index.ts rename packages/frontend/core/src/blocksuite/extensions/{attachment-embed-view.tsx => pdf/pdf-view.tsx} (73%) create mode 100644 packages/frontend/core/src/blocksuite/extensions/turbo-renderer/index.ts rename packages/frontend/core/src/blocksuite/extensions/{ => turbo-renderer}/turbo-painter.worker.ts (100%) rename packages/frontend/core/src/blocksuite/extensions/{ => turbo-renderer}/turbo-renderer.ts (100%) diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx index 1675777dc..cdaf3f432 100644 --- a/packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx +++ b/packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx @@ -84,14 +84,13 @@ const usePatchSpecs = (mode: DocMode) => { .theme(framework) .editorConfig(framework) .editorView({ - isCloud, - isInPeekView, - enableTurboRenderer, - enablePDFEmbedPreview, framework, reactToLit, confirmModal, }) + .cloud(framework, isCloud) + .turboRenderer(enableTurboRenderer) + .pdf(enablePDFEmbedPreview, reactToLit) .edgelessBlockHeader({ framework, isInPeekView, diff --git a/packages/frontend/core/src/blocksuite/extensions/audio/audio-view.tsx b/packages/frontend/core/src/blocksuite/extensions/audio/audio-view.tsx new file mode 100644 index 000000000..109fa91d9 --- /dev/null +++ b/packages/frontend/core/src/blocksuite/extensions/audio/audio-view.tsx @@ -0,0 +1,19 @@ +import type { ReactToLit } from '@affine/component'; +import { AttachmentEmbedPreview } from '@affine/core/blocksuite/attachment-viewer/attachment-embed-preview'; +import { AttachmentEmbedConfigIdentifier } from '@blocksuite/affine/blocks/attachment'; +import type { ExtensionType } from '@blocksuite/store'; + +export function patchForAudioEmbedView(reactToLit: ReactToLit): ExtensionType { + return { + setup: di => { + di.override(AttachmentEmbedConfigIdentifier('audio'), () => ({ + name: 'audio', + check: (model, maxFileSize) => + model.props.type.startsWith('audio/') && + model.props.size <= maxFileSize, + render: (model, _) => + reactToLit(, false), + })); + }, + }; +} diff --git a/packages/frontend/core/src/blocksuite/extensions/cloud/index.ts b/packages/frontend/core/src/blocksuite/extensions/cloud/index.ts new file mode 100644 index 000000000..20274bdd5 --- /dev/null +++ b/packages/frontend/core/src/blocksuite/extensions/cloud/index.ts @@ -0,0 +1,40 @@ +import { PublicUserService } from '@affine/core/modules/cloud'; +import { MemberSearchService } from '@affine/core/modules/permissions'; +import { + type ViewExtensionContext, + ViewExtensionProvider, +} from '@blocksuite/affine/ext-loader'; +import { FrameworkProvider } from '@toeverything/infra'; +import { z } from 'zod'; + +import { patchUserExtensions } from './user'; +import { patchUserListExtensions } from './user-list'; + +const optionsSchema = z.object({ + framework: z.instanceof(FrameworkProvider).optional(), + enableCloud: z.boolean().optional(), +}); + +type CloudViewOptions = z.infer; + +export class CloudViewExtension extends ViewExtensionProvider { + override name = 'affine-view-cloud'; + + override schema = optionsSchema; + + override setup(context: ViewExtensionContext, options?: CloudViewOptions) { + super.setup(context, options); + const enableCloud = options?.enableCloud; + const framework = options?.framework; + if (!enableCloud || !framework) { + return; + } + const memberSearchService = framework.get(MemberSearchService); + const publicUserService = framework.get(PublicUserService); + + context.register([ + patchUserListExtensions(memberSearchService), + patchUserExtensions(publicUserService), + ]); + } +} diff --git a/packages/frontend/core/src/blocksuite/extensions/user-list.ts b/packages/frontend/core/src/blocksuite/extensions/cloud/user-list.ts similarity index 100% rename from packages/frontend/core/src/blocksuite/extensions/user-list.ts rename to packages/frontend/core/src/blocksuite/extensions/cloud/user-list.ts diff --git a/packages/frontend/core/src/blocksuite/extensions/user.ts b/packages/frontend/core/src/blocksuite/extensions/cloud/user.ts similarity index 100% rename from packages/frontend/core/src/blocksuite/extensions/user.ts rename to packages/frontend/core/src/blocksuite/extensions/cloud/user.ts diff --git a/packages/frontend/core/src/blocksuite/extensions/pdf/index.ts b/packages/frontend/core/src/blocksuite/extensions/pdf/index.ts new file mode 100644 index 000000000..bde0225d8 --- /dev/null +++ b/packages/frontend/core/src/blocksuite/extensions/pdf/index.ts @@ -0,0 +1,38 @@ +import type { ElementOrFactory } from '@affine/component'; +import { + type ViewExtensionContext, + ViewExtensionProvider, +} from '@blocksuite/affine/ext-loader'; +import type { TemplateResult } from 'lit'; +import { z } from 'zod'; + +import { patchForPDFEmbedView } from './pdf-view'; + +const optionsSchema = z.object({ + enablePDFEmbedPreview: z.boolean().optional(), + reactToLit: z.optional( + z + .function() + .args(z.custom(), z.boolean().optional()) + .returns(z.custom()) + ), +}); + +type PdfViewOptions = z.infer; + +export class PdfViewExtension extends ViewExtensionProvider { + override name = 'affine-view-pdf'; + + override schema = optionsSchema; + + override setup(context: ViewExtensionContext, options?: PdfViewOptions) { + super.setup(context, options); + const enablePDFEmbedPreview = options?.enablePDFEmbedPreview; + const reactToLit = options?.reactToLit; + if (!enablePDFEmbedPreview || !reactToLit) { + return; + } + + context.register(patchForPDFEmbedView(reactToLit)); + } +} diff --git a/packages/frontend/core/src/blocksuite/extensions/attachment-embed-view.tsx b/packages/frontend/core/src/blocksuite/extensions/pdf/pdf-view.tsx similarity index 73% rename from packages/frontend/core/src/blocksuite/extensions/attachment-embed-view.tsx rename to packages/frontend/core/src/blocksuite/extensions/pdf/pdf-view.tsx index 896877c86..af85f3c22 100644 --- a/packages/frontend/core/src/blocksuite/extensions/attachment-embed-view.tsx +++ b/packages/frontend/core/src/blocksuite/extensions/pdf/pdf-view.tsx @@ -33,18 +33,3 @@ export function patchForPDFEmbedView(reactToLit: ReactToLit): ExtensionType { }, }; } - -export function patchForAudioEmbedView(reactToLit: ReactToLit): ExtensionType { - return { - setup: di => { - di.override(AttachmentEmbedConfigIdentifier('audio'), () => ({ - name: 'audio', - check: (model, maxFileSize) => - model.props.type.startsWith('audio/') && - model.props.size <= maxFileSize, - render: (model, _) => - reactToLit(, false), - })); - }, - }; -} diff --git a/packages/frontend/core/src/blocksuite/extensions/turbo-renderer/index.ts b/packages/frontend/core/src/blocksuite/extensions/turbo-renderer/index.ts new file mode 100644 index 000000000..af20fb12a --- /dev/null +++ b/packages/frontend/core/src/blocksuite/extensions/turbo-renderer/index.ts @@ -0,0 +1,34 @@ +import { + type ViewExtensionContext, + ViewExtensionProvider, +} from '@blocksuite/affine/ext-loader'; +import { z } from 'zod'; + +import { turboRendererExtension } from './turbo-renderer'; + +const optionsSchema = z.object({ + enableTurboRenderer: z.boolean().optional(), +}); + +type TurboRendererViewOptions = z.infer; + +export class TurboRendererViewExtension extends ViewExtensionProvider { + override name = 'affine-view-turbo-renderer'; + + override schema = optionsSchema; + + override setup( + context: ViewExtensionContext, + options?: TurboRendererViewOptions + ) { + super.setup(context, options); + const enableTurboRenderer = options?.enableTurboRenderer; + const isEdgeless = this.isEdgeless(context.scope); + + if (!enableTurboRenderer || !isEdgeless) { + return; + } + + context.register(turboRendererExtension); + } +} diff --git a/packages/frontend/core/src/blocksuite/extensions/turbo-painter.worker.ts b/packages/frontend/core/src/blocksuite/extensions/turbo-renderer/turbo-painter.worker.ts similarity index 100% rename from packages/frontend/core/src/blocksuite/extensions/turbo-painter.worker.ts rename to packages/frontend/core/src/blocksuite/extensions/turbo-renderer/turbo-painter.worker.ts diff --git a/packages/frontend/core/src/blocksuite/extensions/turbo-renderer.ts b/packages/frontend/core/src/blocksuite/extensions/turbo-renderer/turbo-renderer.ts similarity index 100% rename from packages/frontend/core/src/blocksuite/extensions/turbo-renderer.ts rename to packages/frontend/core/src/blocksuite/extensions/turbo-renderer/turbo-renderer.ts diff --git a/packages/frontend/core/src/blocksuite/manager/editor-view.tsx b/packages/frontend/core/src/blocksuite/manager/editor-view.tsx index 17877a090..3dfabf579 100644 --- a/packages/frontend/core/src/blocksuite/manager/editor-view.tsx +++ b/packages/frontend/core/src/blocksuite/manager/editor-view.tsx @@ -1,8 +1,5 @@ import type { ConfirmModalProps, ElementOrFactory } from '@affine/component'; -import { - patchForAudioEmbedView, - patchForPDFEmbedView, -} from '@affine/core/blocksuite/extensions/attachment-embed-view'; +import { patchForAudioEmbedView } from '@affine/core/blocksuite/extensions/audio/audio-view'; import { patchDatabaseBlockConfigService } from '@affine/core/blocksuite/extensions/database-block-config-service'; import { patchDocModeService } from '@affine/core/blocksuite/extensions/doc-mode-service'; import { patchDocUrlExtensions } from '@affine/core/blocksuite/extensions/doc-url'; @@ -16,18 +13,13 @@ import { type ReferenceReactRenderer, } from '@affine/core/blocksuite/extensions/reference-renderer'; import { patchSideBarService } from '@affine/core/blocksuite/extensions/side-bar-service'; -import { turboRendererExtension } from '@affine/core/blocksuite/extensions/turbo-renderer'; -import { patchUserExtensions } from '@affine/core/blocksuite/extensions/user'; -import { patchUserListExtensions } from '@affine/core/blocksuite/extensions/user-list'; import { AffinePageReference, AffineSharedPageReference, } from '@affine/core/components/affine/reference-link'; -import { PublicUserService } from '@affine/core/modules/cloud'; import { DocService, DocsService } from '@affine/core/modules/doc'; import { EditorService } from '@affine/core/modules/editor'; import { toDocSearchParams } from '@affine/core/modules/navigation'; -import { MemberSearchService } from '@affine/core/modules/permissions'; import { WorkspaceService } from '@affine/core/modules/workspace'; import { type ViewExtensionContext, @@ -45,14 +37,6 @@ import { } from '../extensions/mobile-config'; const optionsSchema = z.object({ - // env - isCloud: z.boolean(), - isInPeekView: z.boolean(), - - // flags - enableTurboRenderer: z.boolean(), - enablePDFEmbedPreview: z.boolean(), - // services framework: z.instanceof(FrameworkProvider), @@ -117,25 +101,17 @@ export class AffineEditorViewExtension extends ViewExtensionProvider { + this._manager.configure(CloudViewExtension, { framework, enableCloud }); + return this.config; + }; + + private readonly _configureTurboRenderer = ( + enableTurboRenderer?: boolean + ) => { + this._manager.configure(TurboRendererViewExtension, { + enableTurboRenderer, + }); + return this.config; + }; + + private readonly _configurePdf = ( + enablePDFEmbedPreview?: boolean, + reactToLit?: ReactToLit + ) => { + this._manager.configure(PdfViewExtension, { + enablePDFEmbedPreview, + reactToLit, + }); + return this.config; + }; } export function getViewManager() { diff --git a/tools/cli/src/bundle.ts b/tools/cli/src/bundle.ts index a595c97a8..bac047352 100644 --- a/tools/cli/src/bundle.ts +++ b/tools/cli/src/bundle.ts @@ -32,7 +32,9 @@ function getBaseWorkerConfigs(pkg: Package) { ), createWorkerTargetConfig( pkg, - core.srcPath.join('blocksuite/extensions/turbo-painter.worker.ts').value + core.srcPath.join( + 'blocksuite/extensions/turbo-renderer/turbo-painter.worker.ts' + ).value ), ]; }