feat(CodeEditor): enable readOnly for CodeEditor (v2) (#10517)

* feat(CodeEditor): enable readOnly for CodeEditor (v2)

* docs: update prop comments

packages/ui/src/components/interactive/CodeEditor/CodeEditor.tsx

@@ -31,6 +31,7 @@ const CodeEditor = ({
   style,
   className,
   editable = true,
+  readOnly = false,
   expanded = true,
   wrapped = true
 }: CodeEditorProps) => {
@@ -111,6 +112,7 @@ const CodeEditor = ({
       maxHeight={expanded ? undefined : maxHeight}
       minHeight={minHeight}
       editable={editable}
+      readOnly={readOnly}
       theme={theme}
       extensions={customExtensions}
       onCreateEditor={(view: EditorView) => {

packages/ui/src/components/interactive/CodeEditor/types.ts

@@ -91,10 +91,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.

packages/ui/stories/components/interactive/CodeEditor.stories.tsx

@@ -66,6 +66,7 @@ const meta: Meta<typeof CodeEditor> = {
     },
     fontSize: { control: { type: 'range', min: 12, max: 22, step: 1 } },
     editable: { control: 'boolean' },
+    readOnly: { control: 'boolean' },
     expanded: { control: 'boolean' },
     wrapped: { control: 'boolean' },
     height: { control: 'text' },
@@ -89,6 +90,7 @@ export const Default: Story = {
     value: `function greet(name: string) {\n  return 'Hello ' + name\n}`,
     fontSize: 16,
     editable: true,
+    readOnly: false,
     expanded: true,
     wrapped: true
   },
@@ -101,6 +103,7 @@ export const Default: Story = {
         theme={getCmThemeByName((args as any).theme || 'light')}
         fontSize={args.fontSize as number}
         editable={args.editable as boolean}
+        readOnly={args.readOnly as boolean}
         expanded={args.expanded as boolean}
         wrapped={args.wrapped as boolean}
         height={args.height as string | undefined}