feat(editor): add collapse/expand functionality to code block component (#14884)

This PR fixes #14040 

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

* **New Features**
* Code blocks can be collapsed and expanded via a toolbar toggle
(visible when the document is editable).
* Collapsed code blocks show a limited preview (~8 lines) with a bottom
fade overlay and reduced padding.
* Toolbar button updates icon and tooltip to reflect collapsed/expanded
state.
* Collapse state is preserved on the block so its current
collapsed/expanded setting is retained.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/code/src/code-block.ts

@@ -51,6 +51,10 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
     return modelPreview;
   });
 
+  collapsed$: Signal<boolean> = computed(
+    () => !!this.model.props.collapsed$.value
+  );
+
   highlightTokens$: Signal<ThemedToken[][]> = signal([]);
 
   languageName$: Signal<string> = computed(() => {
@@ -417,6 +421,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
       CodeBlockPreviewIdentifier(this.model.props.language ?? '')
     );
     const shouldRenderPreview = preview && previewContext;
+    const collapsed = this.collapsed$.value;
 
     return html`
       <div
@@ -426,6 +431,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
           mobile: IS_MOBILE,
           wrap: this.model.props.wrap,
           'disable-line-numbers': !showLineNumbers,
+          collapsed,
         })}
       >
         <rich-text
@@ -453,9 +459,12 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
           }}
         >
         </rich-text>
+        ${collapsed
+          ? html`<div class="code-collapsed-fade" aria-hidden="true"></div>`
+          : nothing}
         <div
           style=${styleMap({
-            display: shouldRenderPreview ? undefined : 'none',
+            display: shouldRenderPreview && !collapsed ? undefined : 'none',
           })}
           contenteditable="false"
           class="affine-code-block-preview"
@@ -471,6 +480,10 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
     this.store.updateBlock(this.model, { wrap });
   }
 
+  setCollapsed(collapsed: boolean) {
+    this.store.updateBlock(this.model, { collapsed });
+  }
+
   @query('rich-text')
   private accessor _richTextElement: RichText | null = null;