fix(editor): affine preview root style (#10420)

Fix [BS-2677](https://linear.app/affine-design/issue/BS-2677/linked-doc-embed-view样式错误)

1. Only show the border of embed synced doc block (in note) when hover.
2. Fix affine preview root padding style, set padding only when affine preview root in embed synced doc block (in surface).
3. Only add the footnote config extension to the chat panel and chat block center peek. For footnotes in other page preview scenarios, such as footnote nodes within embed synced doc blocks or embed linked doc blocks, the hover effect should be maintained.

blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts

@@ -231,6 +231,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
             [theme]: true,
             surface: false,
             selected: this.selected$.value,
+            'show-hover-border': true,
           })}
           @click=${this._handleClick}
           style=${containerStyleMap}

blocksuite/affine/block-embed/src/embed-synced-doc-block/styles.ts

@@ -57,10 +57,13 @@ export const blockStyles = css`
   }
 
   .affine-embed-synced-doc-container {
-    border: 1px solid var(--affine-border-color);
+    border: 1px solid transparent;
     border-radius: 8px;
     overflow: hidden;
   }
+  .affine-embed-synced-doc-container.show-hover-border:hover {
+    border-color: var(--affine-border-color);
+  }
   .affine-embed-synced-doc-container.page {
     display: block;
     width: 100%;
@@ -151,7 +154,12 @@ export const blockStyles = css`
   }
 
   .affine-embed-synced-doc-container.surface {
+    border-color: var(--affine-border-color);
     background: var(--affine-background-primary-color);
+
+    affine-preview-root {
+      padding: 0 24px;
+    }
   }
 
   .affine-embed-synced-doc-container

blocksuite/affine/block-root/src/preview/preview-root-block.ts

@@ -10,7 +10,6 @@ export class PreviewRootBlockComponent extends BlockComponent {
   static override styles = css`
     affine-preview-root {
       display: block;
-      padding: 0 24px;
     }
   `;
 

blocksuite/affine/components/src/rich-text/inline/presets/nodes/footnote-node/footnote-node.ts

@@ -36,20 +36,22 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
       cursor: pointer;
     }
 
-    .footnote-content-default {
+    .footnote-node {
-      display: inline-block;
+      .footnote-content-default {
-      background: ${unsafeCSSVarV2('block/footnote/numberBgHover')};
+        display: inline-block;
-      color: ${unsafeCSSVarV2('button/pureWhiteText')};
+        background: ${unsafeCSSVarV2('block/footnote/numberBgHover')};
-      width: 14px;
+        color: ${unsafeCSSVarV2('button/pureWhiteText')};
-      height: 14px;
+        width: 14px;
-      line-height: 14px;
+        height: 14px;
-      font-size: 10px;
+        line-height: 14px;
-      font-weight: 400;
+        font-size: 10px;
-      border-radius: 50%;
+        font-weight: 400;
-      text-align: center;
+        border-radius: 50%;
-      text-overflow: ellipsis;
+        text-align: center;
-      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
+        text-overflow: ellipsis;
-      transition: background 0.3s ease-in-out;
+        font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
+        transition: background 0.3s ease-in-out;
+      }
     }
 
     .footnote-node.hover-effect {

packages/frontend/core/src/blocksuite/extensions/entry/enable-preview.ts

@@ -8,7 +8,6 @@ import {
 import {
   ColorScheme,
   createSignalFromObservable,
-  FootNoteNodeConfigExtension,
   type Signal,
   SpecProvider,
   type ThemeExtension,
@@ -80,11 +79,6 @@ function getPagePreviewThemeExtension(framework: FrameworkProvider) {
   return AffinePagePreviewThemeExtension;
 }
 
-// Disable hover effect for footnote node in center peek preview mode
-const footnodeConfig = FootNoteNodeConfigExtension({
-  disableHoverEffect: true,
-});
-
 const fontConfig = getFontConfigExtension();
 
 let _framework: FrameworkProvider;
@@ -108,7 +102,6 @@ export function enablePreviewExtension(framework: FrameworkProvider): void {
 
   _previewExtensions = [
     ...AIChatBlockSpec,
-    footnodeConfig,
     fontConfig,
     getThemeExtension(framework),
     getPagePreviewThemeExtension(framework),

packages/frontend/core/src/blocksuite/extensions/footnote-config.ts

@@ -0,0 +1,17 @@
+import {
+  FootNoteNodeConfigExtension,
+  type SpecBuilder,
+} from '@blocksuite/affine/blocks';
+
+// Disable hover effect for footnote node
+const disableHoverEffectConfig = {
+  disableHoverEffect: true,
+};
+
+export function enableFootnoteConfigExtension(
+  specBuilder: SpecBuilder,
+  config = disableHoverEffectConfig
+) {
+  const footNoteConfig = FootNoteNodeConfigExtension(config);
+  return specBuilder.extend([footNoteConfig]);
+}

packages/frontend/core/src/blocksuite/extensions/index.ts

@@ -1,2 +1,3 @@
 export * from './entry/enable-affine';
 export * from './entry/enable-mobile';
+export * from './footnote-config';

packages/frontend/core/src/desktop/pages/workspace/detail-page/tabs/chat.tsx

@@ -1,5 +1,6 @@
 import { ChatPanel } from '@affine/core/blocksuite/ai';
 import type { AffineEditorContainer } from '@affine/core/blocksuite/block-suite-editor';
+import { enableFootnoteConfigExtension } from '@affine/core/blocksuite/extensions';
 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';
@@ -84,7 +85,9 @@ export const EditorChatPanel = forwardRef(function EditorChatPanel(
           );
         },
       };
-      const previewSpecBuilder = SpecProvider._.getSpec('preview:page');
+      const previewSpecBuilder = enableFootnoteConfigExtension(
+        SpecProvider._.getSpec('preview:page')
+      );
       chatPanelRef.current.previewSpecBuilder = previewSpecBuilder;
     } else {
       chatPanelRef.current.host = editor.host;

packages/frontend/core/src/modules/peek-view/view/ai-chat-block-peek-view/index.tsx

@@ -1,6 +1,7 @@
 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 { enableFootnoteConfigExtension } from '@affine/core/blocksuite/extensions';
 import { AINetworkSearchService } from '@affine/core/modules/ai-button/services/network-search';
 import type { EditorHost } from '@blocksuite/affine/block-std';
 import { SpecProvider } from '@blocksuite/affine/blocks';
@@ -19,7 +20,9 @@ export const AIChatBlockPeekView = ({
   const framework = useFramework();
   const searchService = framework.get(AINetworkSearchService);
   return useMemo(() => {
-    const previewSpecBuilder = SpecProvider._.getSpec('preview:page');
+    const previewSpecBuilder = enableFootnoteConfigExtension(
+      SpecProvider._.getSpec('preview:page')
+    );
     const networkSearchConfig = {
       visible: searchService.visible,
       enabled: searchService.enabled,