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/styles.ts

@@ -80,4 +80,35 @@ export const codeBlockStyles = css`
   affine-code .affine-code-block-preview {
     padding: 12px;
   }
+
+  /* ── Collapsed state ──────────────────────────────────────────────── */
+
+  /* Clamp the rich-text to the first 8 lines */
+  .affine-code-block-container.collapsed rich-text {
+    display: block;
+    max-height: calc(8 * var(--affine-line-height));
+    overflow: hidden;
+  }
+
+  /* Reduce bottom padding so the fade sits flush with the border */
+  .affine-code-block-container.collapsed {
+    padding-bottom: 0;
+  }
+
+  /* Gradient overlay that fades to the block background */
+  .affine-code-block-container .code-collapsed-fade {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 80px;
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      var(--affine-background-code-block)
+    );
+    border-radius: 0 0 10px 10px;
+    pointer-events: none;
+    z-index: 1;
+  }
 `;