From 15726bd52201b10537366e0c4228f6107137f864 Mon Sep 17 00:00:00 2001
From: L-Sun <zover.v@gmail.com>
Date: Fri, 11 Jul 2025 17:06:18 +0800
Subject: [PATCH] fix(editor): missing viewport selector in editor setting
 (#13168)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### PR Dependency Tree


* **PR #13168** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

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

## Summary by CodeRabbit

* **Style**
* Updated CSS class names for the snapshot container to improve
consistency in styling and targeting.


<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../setting/general-setting/editor/edgeless/snapshot.tsx     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx
index 1ed588cce..ca29e576b 100644
--- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx
+++ b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx
@@ -13,6 +13,7 @@ import {
 } from '@blocksuite/affine/std/gfx';
 import type { Block, Store } from '@blocksuite/affine/store';
 import { useFramework } from '@toeverything/infra';
+import clsx from 'clsx';
 import { isEqual } from 'lodash-es';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { map, pairwise } from 'rxjs';
@@ -65,7 +66,7 @@ export const EdgelessSnapshot = (props: Props) => {
       .codeBlockHtmlPreview(framework).value;
     return manager
       .get('preview-edgeless')
-      .concat([ViewportElementExtension('.ref-viewport')]);
+      .concat([ViewportElementExtension('.setting-editor-snapshot')]);
   }, [framework]);
 
   const updateElements = useCallback(() => {
@@ -156,7 +157,7 @@ export const EdgelessSnapshot = (props: Props) => {
   }, [editorSetting.provider, keyName, updateElements]);
 
   return (
-    <div className={snapshotContainer}>
+    <div className={clsx(snapshotContainer, 'setting-editor-snapshot')}>
       <div className={snapshotTitle}>{title}</div>
       <div className={snapshotLabel}>{title}</div>
       <div ref={wrapperRef} className={editorWrapper} style={{ height }}>