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

@@ -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}

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>