fix(editor): format text in code block (#10575)

Closes: [BS-2724](https://linear.app/affine-design/issue/BS-2724/code-block%E9%87%8C%E4%B8%8D%E5%BA%94%E8%AF%A5%E6%98%BE%E7%A4%BAtoolbar)

blocksuite/affine/block-code/src/highlight/affine-code-unit.ts

@@ -1,3 +1,4 @@
+import { affineTextStyles } from '@blocksuite/affine-components/rich-text';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { ShadowlessElement } from '@blocksuite/block-std';
 import { type DeltaInsert, ZERO_WIDTH_SPACE } from '@blocksuite/inline';
@@ -16,7 +17,25 @@ export class AffineCodeUnit extends ShadowlessElement {
   }
 
   override render() {
-    const plainContent = html`<span
+    if (this.delta.attributes?.link && this.codeBlock) {
+      return html`<affine-link
+        .std=${this.codeBlock.std}
+        .delta=${this.delta}
+      ></affine-link>`;
+    }
+
+    let style = this.delta.attributes
+      ? affineTextStyles(this.delta.attributes)
+      : {};
+    if (this.delta.attributes?.code) {
+      style = {
+        ...style,
+        'font-size': 'calc(var(--affine-font-base) - 3px)',
+        padding: '0px 4px 2px',
+      };
+    }
+
+    const plainContent = html`<span style=${styleMap(style)}
       ><v-text .str=${this.delta.insert}></v-text
     ></span>`;
 
@@ -53,12 +72,13 @@ export class AffineCodeUnit extends ShadowlessElement {
         endOffset - token.offset
       );
 
-      return html`<v-text
+      return html`<span
-        .str=${content}
         style=${styleMap({
           color: token.color,
+          ...style,
         })}
-      ></v-text>`;
+        ><v-text .str=${content}></v-text
+      ></span>`;
     } else {
       const firstToken = includedTokens[0];
       const lastToken = includedTokens[includedTokens.length - 1];
@@ -79,6 +99,7 @@ export class AffineCodeUnit extends ShadowlessElement {
           .str=${token.content}
           style=${styleMap({
             color: token.color,
+            ...style,
           })}
         ></v-text>`;
       });

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

@@ -1,3 +1,4 @@
+export { affineTextStyles } from './affine-text.js';
 export * from './footnote-node/footnote-config.js';
 export { AffineFootnoteNode } from './footnote-node/footnote-node.js';
 export { AffineLink, toggleLinkPopup } from './link-node/index.js';

blocksuite/tests-legacy/e2e/code/crud.spec.ts

@@ -597,7 +597,21 @@ test('format text in code block', async ({ page }, testInfo) => {
   await type(page, 'https://www.baidu.com');
   await pressEnter(page);
 
-  expect(await line.innerText()).toBe('const aaa = 1000;');
+  const linkLocator = page.locator('[data-block-id="3"] affine-link a');
+  expect(await linkLocator.count()).toBe(3);
+  await expect(linkLocator.nth(0)).toHaveAttribute(
+    'href',
+    'https://www.baidu.com'
+  );
+  await expect(linkLocator.nth(1)).toHaveAttribute(
+    'href',
+    'https://www.baidu.com'
+  );
+  await expect(linkLocator.nth(2)).toHaveAttribute(
+    'href',
+    'https://www.baidu.com'
+  );
+
   expect(await getPageSnapshot(page, true)).toMatchSnapshot(
     `${testInfo.title}_link.json`
   );