From d63f16da5ec8252f704c951005fe63b4a3de50d0 Mon Sep 17 00:00:00 2001
From: donteatfriedrice <chs@bupt.cn>
Date: Wed, 26 Feb 2025 04:25:24 +0000
Subject: [PATCH] fix(editor): affine preview root style (#10420)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../embed-synced-doc-block.ts                 |  1 +
 .../src/embed-synced-doc-block/styles.ts      | 10 ++++++-
 .../src/preview/preview-root-block.ts         |  1 -
 .../nodes/footnote-node/footnote-node.ts      | 30 ++++++++++---------
 .../extensions/entry/enable-preview.ts        |  7 -----
 .../blocksuite/extensions/footnote-config.ts  | 17 +++++++++++
 .../core/src/blocksuite/extensions/index.ts   |  1 +
 .../pages/workspace/detail-page/tabs/chat.tsx |  5 +++-
 .../view/ai-chat-block-peek-view/index.tsx    |  5 +++-
 9 files changed, 52 insertions(+), 25 deletions(-)
 create mode 100644 packages/frontend/core/src/blocksuite/extensions/footnote-config.ts

diff --git a/blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts b/blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts
index 5ecc8fd69..0a1588ba8 100644
--- a/blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts
+++ b/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}
diff --git a/blocksuite/affine/block-embed/src/embed-synced-doc-block/styles.ts b/blocksuite/affine/block-embed/src/embed-synced-doc-block/styles.ts
index d4b12ab6a..12842767b 100644
--- a/blocksuite/affine/block-embed/src/embed-synced-doc-block/styles.ts
+++ b/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
diff --git a/blocksuite/affine/block-root/src/preview/preview-root-block.ts b/blocksuite/affine/block-root/src/preview/preview-root-block.ts
index 511689c5a..28cc7d1b3 100644
--- a/blocksuite/affine/block-root/src/preview/preview-root-block.ts
+++ b/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;
     }
   `;
 
diff --git a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/footnote-node/footnote-node.ts b/blocksuite/affine/components/src/rich-text/inline/presets/nodes/footnote-node/footnote-node.ts
index fb122a4b5..5422ba628 100644
--- a/blocksuite/affine/components/src/rich-text/inline/presets/nodes/footnote-node/footnote-node.ts
+++ b/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 {
-      display: inline-block;
-      background: ${unsafeCSSVarV2('block/footnote/numberBgHover')};
-      color: ${unsafeCSSVarV2('button/pureWhiteText')};
-      width: 14px;
-      height: 14px;
-      line-height: 14px;
-      font-size: 10px;
-      font-weight: 400;
-      border-radius: 50%;
-      text-align: center;
-      text-overflow: ellipsis;
-      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
-      transition: background 0.3s ease-in-out;
+    .footnote-node {
+      .footnote-content-default {
+        display: inline-block;
+        background: ${unsafeCSSVarV2('block/footnote/numberBgHover')};
+        color: ${unsafeCSSVarV2('button/pureWhiteText')};
+        width: 14px;
+        height: 14px;
+        line-height: 14px;
+        font-size: 10px;
+        font-weight: 400;
+        border-radius: 50%;
+        text-align: center;
+        text-overflow: ellipsis;
+        font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
+        transition: background 0.3s ease-in-out;
+      }
     }
 
     .footnote-node.hover-effect {
diff --git a/packages/frontend/core/src/blocksuite/extensions/entry/enable-preview.ts b/packages/frontend/core/src/blocksuite/extensions/entry/enable-preview.ts
index 5dc67de57..2a71aabb5 100644
--- a/packages/frontend/core/src/blocksuite/extensions/entry/enable-preview.ts
+++ b/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),
diff --git a/packages/frontend/core/src/blocksuite/extensions/footnote-config.ts b/packages/frontend/core/src/blocksuite/extensions/footnote-config.ts
new file mode 100644
index 000000000..22ba8302c
--- /dev/null
+++ b/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]);
+}
diff --git a/packages/frontend/core/src/blocksuite/extensions/index.ts b/packages/frontend/core/src/blocksuite/extensions/index.ts
index bbc9b34f6..5882bf3a3 100644
--- a/packages/frontend/core/src/blocksuite/extensions/index.ts
+++ b/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';
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 fa1237e32..d35f2965a 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,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;
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 a7e7e7e13..3ea325aa8 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,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,