fix(core): read-only editor does not support code preview (#12700)

Close [AI-160](https://linear.app/affine-design/issue/AI-160)

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

## Summary by CodeRabbit

- **New Features**
  - Improved preview state management for code blocks, ensuring consistent behavior in both editable and readonly modes.

- **Refactor**
  - Streamlined the way preview state is toggled and displayed for code blocks, resulting in a more reliable and maintainable user experience.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/code/src/code-toolbar/components/preview-button.ts

@@ -58,11 +58,7 @@ export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
   `;
 
   private readonly _toggle = (value: boolean) => {
-    if (this.blockComponent.store.readonly) return;
-
-    this.blockComponent.store.updateBlock(this.blockComponent.model, {
-      preview: value,
-    });
+    this.blockComponent.setPreviewState(value);
 
     const std = this.blockComponent.std;
     const mode = std.getOptional(DocModeProvider)?.getEditorMode() ?? 'page';
@@ -77,7 +73,7 @@ export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
   };
 
   get preview() {
-    return !!this.blockComponent.model.props.preview$.value;
+    return this.blockComponent.preview$.value;
   }
 
   override render() {