From 6289981fd1b0b9ba5c199d9235bde76d443d3c2f Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Mon, 24 Feb 2025 10:37:59 +0000 Subject: [PATCH] refactor(editor): optimize extension register and effects (#10406) Key Changes: 1. **Code Reorganization and Consolidation** - Created new centralized extension management through new files: - `enableEditorExtension` in `extensions/entry/enable-editor.ts` - `enablePreviewExtension` in `extensions/entry/enable-preview.ts` - Removed several spec-related files that are now consolidated: - Removed `specs/edgeless.ts` - Removed `specs/page.ts` - Removed `specs/preview.ts` 2. **Template Management** - Added new `register-templates.ts` file to handle template registration - Moved template registration logic from `specs/edgeless.ts` to this new file - Templates now include both edgeless and sticker templates 3. **Extension Management Changes** - Simplified extension enabling process through new centralized functions - `enableEditorExtension` now handles both page and edgeless modes - `enablePreviewExtension` consolidates preview-related extensions - Removed duplicate code for extension management 4. **Preview Functionality Updates** - Streamlined preview spec management - Consolidated footnote configuration - Improved theme and preview extension handling 5. **Dependencies and Effects** - Updated how effects are registered and managed - Simplified initialization process in `index.ts` - More organized approach to handling framework providers The main theme of this PR appears to be code consolidation and simplification, moving from multiple specialized files to more centralized, reusable extension management. This should make the codebase more maintainable and reduce duplication while keeping the same functionality. The changes primarily affect the editor's extension system, preview functionality, and template management, making these systems more modular and easier to maintain. --- .github/CODEOWNERS | 1 + .../bi-directional-link-panel.tsx | 4 +- .../blocksuite/block-suite-editor/index.ts | 6 +- .../block-suite-editor/lit-adaper.tsx | 12 +-- .../block-suite-editor/register-templates.ts | 15 ++++ .../block-suite-editor/specs/edgeless.ts | 26 ------ .../block-suite-editor/specs/page.ts | 11 --- .../extensions/entry/enable-editor.ts | 16 ++++ .../entry/enable-preview.ts} | 89 +++++++++---------- .../editor/edgeless/snapshot.tsx | 73 +-------------- .../pages/workspace/detail-page/tabs/chat.tsx | 11 +-- .../core/src/modules/dnd/services/index.ts | 4 +- .../view/ai-chat-block-peek-view/index.tsx | 13 +-- 13 files changed, 89 insertions(+), 192 deletions(-) create mode 100644 packages/frontend/core/src/blocksuite/block-suite-editor/register-templates.ts delete mode 100644 packages/frontend/core/src/blocksuite/block-suite-editor/specs/edgeless.ts delete mode 100644 packages/frontend/core/src/blocksuite/block-suite-editor/specs/page.ts create mode 100644 packages/frontend/core/src/blocksuite/extensions/entry/enable-editor.ts rename packages/frontend/core/src/blocksuite/{block-suite-editor/specs/preview.ts => extensions/entry/enable-preview.ts} (55%) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index cdf951bee..742da5525 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1 +1,2 @@ /blocksuite/ @toeverything/blocksuite-core +/packages/frontend/core/src/blocksuite @toeverything/blocksuite-core diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/bi-directional-link-panel.tsx b/packages/frontend/core/src/blocksuite/block-suite-editor/bi-directional-link-panel.tsx index 34d7f3fa7..cdabedd6b 100644 --- a/packages/frontend/core/src/blocksuite/block-suite-editor/bi-directional-link-panel.tsx +++ b/packages/frontend/core/src/blocksuite/block-suite-editor/bi-directional-link-panel.tsx @@ -36,12 +36,12 @@ import { AffineSharedPageReference, } from '../../components/affine/reference-link'; import { LitTextRenderer } from '../ai/components/text-renderer'; +import { enableEditorExtension } from '../extensions/entry/enable-editor'; import { patchReferenceRenderer, type ReferenceReactRenderer, } from '../extensions/reference-renderer'; import * as styles from './bi-directional-link-panel.css'; -import { createPageModeSpecs } from './specs/page'; const PREFIX = 'bi-directional-link-panel-collapse:'; @@ -144,7 +144,7 @@ const usePreviewExtensions = () => { }, [workspaceService]); const extensions = useMemo(() => { - const specs = createPageModeSpecs(framework); + const specs = enableEditorExtension(framework, 'page'); specs.extend([patchReferenceRenderer(reactToLit, referenceRenderer)]); return specs.value; }, [reactToLit, referenceRenderer, framework]); diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/index.ts b/packages/frontend/core/src/blocksuite/block-suite-editor/index.ts index b878a7d61..f28fbfa26 100644 --- a/packages/frontend/core/src/blocksuite/block-suite-editor/index.ts +++ b/packages/frontend/core/src/blocksuite/block-suite-editor/index.ts @@ -2,14 +2,12 @@ import { registerAIEffects } from '@affine/core/blocksuite/ai/effects'; import { effects as editorEffects } from '@affine/core/blocksuite/editors'; import { effects as bsEffects } from '@blocksuite/affine/effects'; -import { effects as edgelessEffects } from './specs/edgeless'; -import { effects as patchEffects } from './specs/preview'; +import { registerTemplates } from './register-templates'; bsEffects(); -patchEffects(); editorEffects(); -edgelessEffects(); registerAIEffects(); +registerTemplates(); export * from './blocksuite-editor'; export * from './blocksuite-editor-container'; 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 577819073..a2eaae18d 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 @@ -51,7 +51,9 @@ import { patchDocModeService } from '../extensions/doc-mode-service'; import { patchDocUrlExtensions } from '../extensions/doc-url'; import { EdgelessClipboardWatcher } from '../extensions/edgeless-clipboard'; import { patchForClipboardInElectron } from '../extensions/electron-clipboard'; +import { enableEditorExtension } from '../extensions/entry/enable-editor'; import { enableMobileExtension } from '../extensions/entry/enable-mobile'; +import { enablePreviewExtension } from '../extensions/entry/enable-preview'; import { patchForEdgelessNoteConfig } from '../extensions/note-config'; import { patchNotificationService } from '../extensions/notification-service'; import { patchOpenDocExtension } from '../extensions/open-doc'; @@ -64,9 +66,6 @@ import { import { patchSideBarService } from '../extensions/side-bar-service'; import { BiDirectionalLinkPanel } from './bi-directional-link-panel'; import { BlocksuiteEditorJournalDocTitle } from './journal-doc-title'; -import { createEdgelessModeSpecs } from './specs/edgeless'; -import { createPageModeSpecs } from './specs/page'; -import { extendEdgelessPreviewSpec } from './specs/preview'; import { StarterBar } from './starter-bar'; import * as styles from './styles.css'; @@ -125,16 +124,13 @@ const usePatchSpecs = (mode: DocMode) => { }, [workspaceService]); useMemo(() => { - extendEdgelessPreviewSpec(framework); + enablePreviewExtension(framework); }, [framework]); const confirmModal = useConfirmModal(); const patchedSpecs = useMemo(() => { - const builder = - mode === 'edgeless' - ? createEdgelessModeSpecs(framework) - : createPageModeSpecs(framework); + const builder = enableEditorExtension(framework, mode); builder.extend( [ diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/register-templates.ts b/packages/frontend/core/src/blocksuite/block-suite-editor/register-templates.ts new file mode 100644 index 000000000..739a30dd0 --- /dev/null +++ b/packages/frontend/core/src/blocksuite/block-suite-editor/register-templates.ts @@ -0,0 +1,15 @@ +import { builtInTemplates as builtInEdgelessTemplates } from '@affine/templates/edgeless'; +import { builtInTemplates as builtInStickersTemplates } from '@affine/templates/stickers'; +import { + EdgelessTemplatePanel, + type TemplateManager, +} from '@blocksuite/affine/blocks'; + +export function registerTemplates() { + EdgelessTemplatePanel.templates.extend( + builtInStickersTemplates as TemplateManager + ); + EdgelessTemplatePanel.templates.extend( + builtInEdgelessTemplates as TemplateManager + ); +} diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/specs/edgeless.ts b/packages/frontend/core/src/blocksuite/block-suite-editor/specs/edgeless.ts deleted file mode 100644 index a26f14f09..000000000 --- a/packages/frontend/core/src/blocksuite/block-suite-editor/specs/edgeless.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { enableAIExtension } from '@affine/core/blocksuite/ai'; -import { enableAffineExtension } from '@affine/core/blocksuite/extensions'; -import { builtInTemplates as builtInEdgelessTemplates } from '@affine/templates/edgeless'; -import { builtInTemplates as builtInStickersTemplates } from '@affine/templates/stickers'; -import type { SpecBuilder, TemplateManager } from '@blocksuite/affine/blocks'; -import { EdgelessTemplatePanel, SpecProvider } from '@blocksuite/affine/blocks'; -import { type FrameworkProvider } from '@toeverything/infra'; - -export function createEdgelessModeSpecs( - framework: FrameworkProvider -): SpecBuilder { - const edgelessSpec = SpecProvider._.getSpec('edgeless'); - enableAffineExtension(edgelessSpec, framework); - enableAIExtension(edgelessSpec, framework); - - return edgelessSpec; -} - -export function effects() { - EdgelessTemplatePanel.templates.extend( - builtInStickersTemplates as TemplateManager - ); - EdgelessTemplatePanel.templates.extend( - builtInEdgelessTemplates as TemplateManager - ); -} diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/specs/page.ts b/packages/frontend/core/src/blocksuite/block-suite-editor/specs/page.ts deleted file mode 100644 index f074e016f..000000000 --- a/packages/frontend/core/src/blocksuite/block-suite-editor/specs/page.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { enableAIExtension } from '@affine/core/blocksuite/ai'; -import { enableAffineExtension } from '@affine/core/blocksuite/extensions'; -import { type SpecBuilder, SpecProvider } from '@blocksuite/affine/blocks'; -import { type FrameworkProvider } from '@toeverything/infra'; - -export function createPageModeSpecs(framework: FrameworkProvider): SpecBuilder { - const pageSpec = SpecProvider._.getSpec('page'); - enableAffineExtension(pageSpec, framework); - enableAIExtension(pageSpec, framework); - return pageSpec; -} diff --git a/packages/frontend/core/src/blocksuite/extensions/entry/enable-editor.ts b/packages/frontend/core/src/blocksuite/extensions/entry/enable-editor.ts new file mode 100644 index 000000000..a59d308c4 --- /dev/null +++ b/packages/frontend/core/src/blocksuite/extensions/entry/enable-editor.ts @@ -0,0 +1,16 @@ +import { enableAIExtension } from '@affine/core/blocksuite/ai'; +import { enableAffineExtension } from '@affine/core/blocksuite/extensions'; +import type { SpecBuilder } from '@blocksuite/affine/blocks'; +import { SpecProvider } from '@blocksuite/affine/blocks'; +import { type FrameworkProvider } from '@toeverything/infra'; + +export function enableEditorExtension( + framework: FrameworkProvider, + mode: 'edgeless' | 'page' +): SpecBuilder { + const spec = SpecProvider._.getSpec(mode); + enableAffineExtension(spec, framework); + enableAIExtension(spec, framework); + + return spec; +} diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/specs/preview.ts b/packages/frontend/core/src/blocksuite/extensions/entry/enable-preview.ts similarity index 55% rename from packages/frontend/core/src/blocksuite/block-suite-editor/specs/preview.ts rename to packages/frontend/core/src/blocksuite/extensions/entry/enable-preview.ts index 9c728ec6c..5dc67de57 100644 --- a/packages/frontend/core/src/blocksuite/block-suite-editor/specs/preview.ts +++ b/packages/frontend/core/src/blocksuite/extensions/entry/enable-preview.ts @@ -1,4 +1,3 @@ -import { AIChatBlockSpec } from '@affine/core/blocksuite/ai/blocks'; import { PeekViewService } from '@affine/core/modules/peek-view/services/peek-view'; import { AppThemeService } from '@affine/core/modules/theme'; import { @@ -9,8 +8,8 @@ import { import { ColorScheme, createSignalFromObservable, + FootNoteNodeConfigExtension, type Signal, - type SpecBuilder, SpecProvider, type ThemeExtension, ThemeExtensionIdentifier, @@ -20,30 +19,13 @@ import type { ExtensionType } from '@blocksuite/affine/store'; import type { FrameworkProvider } from '@toeverything/infra'; import type { Observable } from 'rxjs'; -import { buildDocDisplayMetaExtension } from '../../extensions/display-meta'; -import { getFontConfigExtension } from '../../extensions/font-config'; -import { patchPeekViewService } from '../../extensions/peek-view-service'; -import { getThemeExtension } from '../../extensions/theme'; +import { AIChatBlockSpec } from '../../ai/blocks'; +import { buildDocDisplayMetaExtension } from '../display-meta'; +import { getFontConfigExtension } from '../font-config'; +import { patchPeekViewService } from '../peek-view-service'; +import { getThemeExtension } from '../theme'; -const CustomSpecs: ExtensionType[] = [ - AIChatBlockSpec, - getFontConfigExtension(), -].flat(); - -function patchPreviewSpec( - id: 'preview:edgeless' | 'preview:page', - specs: ExtensionType[] -) { - const specProvider = SpecProvider._; - specProvider.extendSpec(id, specs); -} - -export function effects() { - // Patch edgeless preview spec for blocksuite surface-ref and embed-synced-doc - patchPreviewSpec('preview:edgeless', CustomSpecs); -} - -export function getPagePreviewThemeExtension(framework: FrameworkProvider) { +function getPagePreviewThemeExtension(framework: FrameworkProvider) { class AffinePagePreviewThemeExtension extends LifeCycleWatcher implements ThemeExtension @@ -98,33 +80,42 @@ export function getPagePreviewThemeExtension(framework: FrameworkProvider) { return AffinePagePreviewThemeExtension; } -export function createPageModePreviewSpecs( - framework: FrameworkProvider -): SpecBuilder { +// Disable hover effect for footnote node in center peek preview mode +const footnodeConfig = FootNoteNodeConfigExtension({ + disableHoverEffect: true, +}); + +const fontConfig = getFontConfigExtension(); + +let _framework: FrameworkProvider; +let _previewExtensions: ExtensionType[]; +export function enablePreviewExtension(framework: FrameworkProvider): void { + if (_framework === framework && _previewExtensions) { + return; + } + const specProvider = SpecProvider._; - const pagePreviewSpec = specProvider.getSpec('preview:page'); - // Enable theme extension, doc display meta extension and peek view service + + if (_previewExtensions) { + _previewExtensions.forEach(extension => { + specProvider.omitSpec('preview:page', extension); + specProvider.omitSpec('preview:edgeless', extension); + }); + } + + _framework = framework; const peekViewService = framework.get(PeekViewService); - pagePreviewSpec.extend([ + + _previewExtensions = [ + ...AIChatBlockSpec, + footnodeConfig, + fontConfig, + getThemeExtension(framework), getPagePreviewThemeExtension(framework), buildDocDisplayMetaExtension(framework), patchPeekViewService(peekViewService), - ]); - return pagePreviewSpec; -} + ]; -export const extendEdgelessPreviewSpec = (function () { - let _extension: ExtensionType; - let _framework: FrameworkProvider; - return function (framework: FrameworkProvider) { - if (framework === _framework && _extension) { - return _extension; - } else { - _extension && SpecProvider._.omitSpec('preview:edgeless', _extension); - _extension = getThemeExtension(framework); - _framework = framework; - SpecProvider._.extendSpec('preview:edgeless', [_extension]); - return _extension; - } - }; -})(); + specProvider.extendSpec('preview:page', _previewExtensions); + specProvider.extendSpec('preview:edgeless', _previewExtensions); +} diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx index 38c3878fb..afbc54444 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx +++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx @@ -1,35 +1,24 @@ import { Skeleton } from '@affine/component'; import type { EditorSettingSchema } from '@affine/core/modules/editor-setting'; import { EditorSettingService } from '@affine/core/modules/editor-setting'; -import { AppThemeService } from '@affine/core/modules/theme'; import type { EditorHost } from '@blocksuite/affine/block-std'; import { BlockServiceIdentifier, BlockStdScope, - LifeCycleWatcher, - StdIdentifier, } from '@blocksuite/affine/block-std'; import { GfxControllerIdentifier, type GfxPrimitiveElementModel, } from '@blocksuite/affine/block-std/gfx'; -import type { ThemeExtension } from '@blocksuite/affine/blocks'; import { - ColorScheme, - createSignalFromObservable, EdgelessCRUDIdentifier, SpecProvider, - ThemeExtensionIdentifier, } from '@blocksuite/affine/blocks'; -import type { Container } from '@blocksuite/affine/global/di'; import { Bound } from '@blocksuite/affine/global/utils'; import type { Block, Store } from '@blocksuite/affine/store'; -import type { Signal } from '@preact/signals-core'; -import type { FrameworkProvider } from '@toeverything/infra'; import { useFramework } from '@toeverything/infra'; import { isEqual } from 'lodash-es'; import { useCallback, useEffect, useRef } from 'react'; -import type { Observable } from 'rxjs'; import { map, pairwise } from 'rxjs'; import { @@ -91,10 +80,7 @@ export const EdgelessSnapshot = (props: Props) => { const editorHost = new BlockStdScope({ store: doc, - extensions: [ - ...SpecProvider._.getSpec('preview:edgeless').value, - getThemeExtension(framework), - ], + extensions: SpecProvider._.getSpec('preview:edgeless').value, }).render(); docRef.current = doc; editorHostRef.current?.remove(); @@ -128,7 +114,7 @@ export const EdgelessSnapshot = (props: Props) => { // append to dom node wrapperRef.current.append(editorHost); - }, [docName, firstUpdate, framework, updateElements]); + }, [docName, firstUpdate, updateElements]); useEffect(() => { // eslint-disable-next-line @typescript-eslint/no-floating-promises @@ -172,58 +158,3 @@ export const EdgelessSnapshot = (props: Props) => { ); }; - -function getThemeExtension(framework: FrameworkProvider) { - class AffineThemeExtension - extends LifeCycleWatcher - implements ThemeExtension - { - static override readonly key = 'affine-settings-theme'; - - private readonly theme: Signal; - - protected readonly disposables: (() => void)[] = []; - - static override setup(di: Container) { - super.setup(di); - di.override(ThemeExtensionIdentifier, AffineThemeExtension, [ - StdIdentifier, - ]); - } - - constructor(std: BlockStdScope) { - super(std); - const theme$: Observable = framework - .get(AppThemeService) - .appTheme.theme$.map(theme => { - return theme === ColorScheme.Dark - ? ColorScheme.Dark - : ColorScheme.Light; - }); - const { signal, cleanup } = createSignalFromObservable( - theme$, - ColorScheme.Light - ); - this.theme = signal; - this.disposables.push(cleanup); - } - - getAppTheme() { - return this.theme; - } - - getEdgelessTheme() { - return this.theme; - } - - override unmounted() { - this.dispose(); - } - - dispose() { - this.disposables.forEach(dispose => dispose()); - } - } - - return AffineThemeExtension; -} diff --git a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx index f40748992..fa1237e32 100644 --- a/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx +++ b/packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx @@ -1,6 +1,5 @@ import { ChatPanel } from '@affine/core/blocksuite/ai'; import type { AffineEditorContainer } from '@affine/core/blocksuite/block-suite-editor'; -import { createPageModePreviewSpecs } from '@affine/core/blocksuite/block-suite-editor/specs/preview'; import { AINetworkSearchService } from '@affine/core/modules/ai-button/services/network-search'; import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta'; import { DocSearchMenuService } from '@affine/core/modules/doc-search-menu/services'; @@ -8,8 +7,8 @@ import { WorkspaceService } from '@affine/core/modules/workspace'; import { createSignalFromObservable, DocModeProvider, - FootNoteNodeConfigExtension, RefNodeSlotsProvider, + SpecProvider, } from '@blocksuite/affine/blocks'; import { useFramework } from '@toeverything/infra'; import { forwardRef, useEffect, useRef } from 'react'; @@ -21,11 +20,6 @@ export interface SidebarTabProps { onLoad?: ((component: HTMLElement) => void) | null; } -// Disable hover effect for footnote node in chat panel -const FOOTNOTE_CONFIG = FootNoteNodeConfigExtension({ - disableHoverEffect: true, -}); - // A wrapper for CopilotPanel export const EditorChatPanel = forwardRef(function EditorChatPanel( { editor, onLoad }: SidebarTabProps, @@ -90,8 +84,7 @@ export const EditorChatPanel = forwardRef(function EditorChatPanel( ); }, }; - const previewSpecBuilder = createPageModePreviewSpecs(framework); - previewSpecBuilder.extend([FOOTNOTE_CONFIG]); + const previewSpecBuilder = SpecProvider._.getSpec('preview:page'); chatPanelRef.current.previewSpecBuilder = previewSpecBuilder; } else { chatPanelRef.current.host = editor.host; diff --git a/packages/frontend/core/src/modules/dnd/services/index.ts b/packages/frontend/core/src/modules/dnd/services/index.ts index bc01ab911..5c935def3 100644 --- a/packages/frontend/core/src/modules/dnd/services/index.ts +++ b/packages/frontend/core/src/modules/dnd/services/index.ts @@ -5,10 +5,10 @@ import { type MonitorGetFeedback, type toExternalData, } from '@affine/component'; -import { createPageModeSpecs } from '@affine/core/blocksuite/block-suite-editor/specs/page'; import type { AffineDNDData } from '@affine/core/types/dnd'; import { BlockStdScope } from '@blocksuite/affine/block-std'; import { + DNDAPIExtension, DndApiExtensionIdentifier, type DragBlockPayload, } from '@blocksuite/affine/blocks'; @@ -163,7 +163,7 @@ export class DndService extends Service { const std = new BlockStdScope({ store: doc, - extensions: createPageModeSpecs(this.framework).value, + extensions: [DNDAPIExtension], }); const dndAPI = std.get(DndApiExtensionIdentifier); return dndAPI; diff --git a/packages/frontend/core/src/modules/peek-view/view/ai-chat-block-peek-view/index.tsx b/packages/frontend/core/src/modules/peek-view/view/ai-chat-block-peek-view/index.tsx index 73d227757..a7e7e7e13 100644 --- a/packages/frontend/core/src/modules/peek-view/view/ai-chat-block-peek-view/index.tsx +++ b/packages/frontend/core/src/modules/peek-view/view/ai-chat-block-peek-view/index.tsx @@ -1,10 +1,9 @@ import { toReactNode } from '@affine/component'; import { AIChatBlockPeekViewTemplate } from '@affine/core/blocksuite/ai'; import type { AIChatBlockModel } from '@affine/core/blocksuite/ai/blocks/ai-chat-block/model/ai-chat-model'; -import { createPageModePreviewSpecs } from '@affine/core/blocksuite/block-suite-editor/specs/preview'; import { AINetworkSearchService } from '@affine/core/modules/ai-button/services/network-search'; import type { EditorHost } from '@blocksuite/affine/block-std'; -import { FootNoteNodeConfigExtension } from '@blocksuite/affine/blocks'; +import { SpecProvider } from '@blocksuite/affine/blocks'; import { useFramework } from '@toeverything/infra'; import { useMemo } from 'react'; @@ -13,11 +12,6 @@ export type AIChatBlockPeekViewProps = { host: EditorHost; }; -// Disable hover effect for footnote node in center peek preview mode -const FOOTNOTE_CONFIG = FootNoteNodeConfigExtension({ - disableHoverEffect: true, -}); - export const AIChatBlockPeekView = ({ model, host, @@ -25,8 +19,7 @@ export const AIChatBlockPeekView = ({ const framework = useFramework(); const searchService = framework.get(AINetworkSearchService); return useMemo(() => { - const previewSpecBuilder = createPageModePreviewSpecs(framework); - previewSpecBuilder.extend([FOOTNOTE_CONFIG]); + const previewSpecBuilder = SpecProvider._.getSpec('preview:page'); const networkSearchConfig = { visible: searchService.visible, enabled: searchService.enabled, @@ -39,5 +32,5 @@ export const AIChatBlockPeekView = ({ networkSearchConfig ); return toReactNode(template); - }, [framework, model, host, searchService]); + }, [model, host, searchService]); };