From 5817c9aa778855211bcefcb6731082712e1649bf Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Mon, 26 Jan 2026 14:08:34 +0800
Subject: [PATCH] feat(editor): add readOnly mode to JsonEditor component

Add a readOnly prop to the JsonEditor component that:
- Enables CodeMirror's EditorState.readOnly extension
- Applies visual styling (reduced opacity, default cursor)
- Prevents user modifications to the editor content

This feature is needed for displaying merged config previews where
users should see the final result but not edit it directly.
---
 src/components/JsonEditor.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/JsonEditor.tsx b/src/components/JsonEditor.tsx
index 860660252..5a8fb3c6c 100644
--- a/src/components/JsonEditor.tsx
+++ b/src/components/JsonEditor.tsx
@@ -22,6 +22,8 @@ interface JsonEditorProps {
   language?: "json" | "javascript";
   height?: string | number;
   showMinimap?: boolean; // 添加此属性以防未来使用
+  /** 只读模式 */
+  readOnly?: boolean;
 }
 
 const JsonEditor: React.FC<JsonEditorProps> = ({
@@ -33,6 +35,7 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
   showValidation = true,
   language = "json",
   height,
+  readOnly = false,
 }) => {
   const { t } = useTranslation();
   const editorRef = useRef<HTMLDivElement>(null);
@@ -150,6 +153,22 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
       }),
     ];
 
+    // 如果是只读模式，添加只读扩展
+    if (readOnly) {
+      extensions.push(EditorState.readOnly.of(true));
+      extensions.push(
+        EditorView.theme({
+          ".cm-editor": {
+            opacity: "0.8",
+            cursor: "default",
+          },
+          ".cm-content": {
+            cursor: "default",
+          },
+        }),
+      );
+    }
+
     // 如果启用深色模式，添加深色主题
     if (darkMode) {
       extensions.push(oneDark);
@@ -208,7 +227,7 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
       view.destroy();
       viewRef.current = null;
     };
-  }, [darkMode, rows, height, language, jsonLinter]); // 依赖项中不包含 onChange 和 placeholder，避免不必要的重建
+  }, [darkMode, rows, height, language, jsonLinter, readOnly]); // 依赖项中不包含 onChange 和 placeholder，避免不必要的重建
 
   // 当 value 从外部改变时更新编辑器内容
   useEffect(() => {