From 2048f210e7fbacf71c8f761be98b63a74084a83a Mon Sep 17 00:00:00 2001
From: one <wangan.cs@gmail.com>
Date: Sat, 4 Oct 2025 23:24:50 +0800
Subject: [PATCH] feat(CodeEditor): add a prop to enable the readOnly extension
 (#10516)

* feat(CodeEditor): add a prop to enable the readOnly extension

* feat: enable keymap for TextFilePreview
---
 src/renderer/src/components/CodeEditor/index.tsx       | 9 ++++++++-
 src/renderer/src/components/Popups/TextFilePreview.tsx | 6 ++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/CodeEditor/index.tsx b/src/renderer/src/components/CodeEditor/index.tsx
index 4304ec324e..64c387ffd0 100644
--- a/src/renderer/src/components/CodeEditor/index.tsx
+++ b/src/renderer/src/components/CodeEditor/index.tsx
@@ -75,10 +75,15 @@ export interface CodeEditorProps {
   /** CSS class name appended to the default `code-editor` class. */
   className?: string
   /**
-   * Whether the editor is editable.
+   * Whether the editor view is editable.
    * @default true
    */
   editable?: boolean
+  /**
+   * Set the editor state to read only but keep some user interactions, e.g., keymaps.
+   * @default false
+   */
+  readOnly?: boolean
   /**
    * Whether the editor is expanded.
    * If true, the height and maxHeight props are ignored.
@@ -114,6 +119,7 @@ const CodeEditor = ({
   style,
   className,
   editable = true,
+  readOnly = false,
   expanded = true,
   wrapped = true
 }: CodeEditorProps) => {
@@ -189,6 +195,7 @@ const CodeEditor = ({
       maxHeight={expanded ? undefined : maxHeight}
       minHeight={minHeight}
       editable={editable}
+      readOnly={readOnly}
       // @ts-ignore 强制使用，见 react-codemirror 的 Example.tsx
       theme={activeCmTheme}
       extensions={customExtensions}
diff --git a/src/renderer/src/components/Popups/TextFilePreview.tsx b/src/renderer/src/components/Popups/TextFilePreview.tsx
index 9c74eef0d1..584929401c 100644
--- a/src/renderer/src/components/Popups/TextFilePreview.tsx
+++ b/src/renderer/src/components/Popups/TextFilePreview.tsx
@@ -1,4 +1,3 @@
-import { EditorState } from '@codemirror/state'
 import { Modal } from 'antd'
 import { useState } from 'react'
 import styled from 'styled-components'
@@ -56,12 +55,15 @@ const PopupContainer: React.FC<Props> = ({ text, title, extension, resolve }) =>
       footer={null}>
       {extension !== undefined ? (
         <Editor
+          readOnly={true}
           expanded={false}
           height="100%"
           style={{ height: '100%' }}
           value={text}
           language={extension}
-          extensions={[EditorState.readOnly.of(true)]}
+          options={{
+            keymap: true
+          }}
         />
       ) : (
         <Text>{text}</Text>