From 6358249aea401afe8ad9d2365230c6e3c76dc7f3 Mon Sep 17 00:00:00 2001
From: Flrande <1978616327@qq.com>
Date: Wed, 14 May 2025 07:19:09 +0000
Subject: [PATCH] feat(editor): update code block ui (#12254)

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

- **New Features**
  - Updated the code block toolbar to use a toggle switch for the "wrap" option, providing a more interactive user experience.

- **Style**
  - Adjusted the height of the language selection button for consistent appearance.
  - Refined code block container padding and increased spacing for line numbers to improve readability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../code-toolbar/components/lang-button.ts    |  1 +
 .../blocks/code/src/code-toolbar/config.ts    | 30 +++++++++++++------
 blocksuite/affine/blocks/code/src/styles.ts   |  6 ++--
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts b/blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts
index dc05a2955d..9a2483f247 100644
--- a/blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts
+++ b/blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts
@@ -24,6 +24,7 @@ export class LanguageListButton extends WithDisposable(
       display: flex;
       gap: 4px;
       padding: 2px 4px;
+      height: 28px;
     }
 
     .lang-button:hover {
diff --git a/blocksuite/affine/blocks/code/src/code-toolbar/config.ts b/blocksuite/affine/blocks/code/src/code-toolbar/config.ts
index d05883b180..3ca1907b26 100644
--- a/blocksuite/affine/blocks/code/src/code-toolbar/config.ts
+++ b/blocksuite/affine/blocks/code/src/code-toolbar/config.ts
@@ -122,16 +122,28 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
     {
       type: 'wrap',
       generate: ({ blockComponent, close }) => {
-        const wrapped = blockComponent.model.props.wrap;
-        const label = wrapped ? 'Cancel wrap' : 'Wrap';
-        const icon = wrapped ? CancelWrapIcon : WrapIcon;
-
         return {
-          label,
-          icon,
-          action: () => {
-            blockComponent.setWrap(!wrapped);
-            close();
+          action: () => {},
+          render: () => {
+            const wrapped = blockComponent.model.props.wrap;
+            const label = wrapped ? 'Cancel wrap' : 'Wrap';
+            const icon = wrapped ? CancelWrapIcon : WrapIcon;
+            return html`
+              <editor-menu-action
+                @click=${() => {
+                  blockComponent.setWrap(!wrapped);
+                  close();
+                }}
+                aria-label=${label}
+              >
+                ${icon}
+                <span class="label">${label}</span>
+                <toggle-switch
+                  style="margin-left: auto;"
+                  .on="${wrapped}"
+                ></toggle-switch>
+              </editor-menu-action>
+            `;
           },
         };
       },
diff --git a/blocksuite/affine/blocks/code/src/styles.ts b/blocksuite/affine/blocks/code/src/styles.ts
index 5023c81df9..4be715c106 100644
--- a/blocksuite/affine/blocks/code/src/styles.ts
+++ b/blocksuite/affine/blocks/code/src/styles.ts
@@ -6,7 +6,7 @@ export const codeBlockStyles = css`
     font-size: var(--affine-font-xs);
     line-height: var(--affine-line-height);
     position: relative;
-    padding: 28px 24px;
+    padding: 32px 20px;
     background: var(--affine-background-code-block);
     border-radius: 10px;
     box-sizing: border-box;
@@ -36,8 +36,8 @@ export const codeBlockStyles = css`
   .affine-code-block-container .line-number {
     position: sticky;
     text-align: left;
-    padding-right: 4px;
-    width: 24px;
+    padding-right: 12px;
+    width: 32px;
     word-break: break-word;
     white-space: nowrap;
     left: -0.5px;