feat: Add editable props.

Author: jaywcjlove

src/index.tsx

@@ -27,6 +27,11 @@ export interface ReactCodeMirrorProps
    * @default true
    */
   basicSetup?: boolean;
+  /**
+   * This disables editing of the editor content by the user.
+   * @default true
+   */
+  editable?: boolean;
   /**
    * Whether to optional basicSetup by default
    * @default true
@@ -69,6 +74,7 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
     maxWidth,
     basicSetup,
     indentWithTab,
+    editable,
     ...other
   } = props;
   const editor = useRef<HTMLDivElement>(null);
@@ -85,6 +91,7 @@ const ReactCodeMirror = React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProp
     maxWidth,
     basicSetup,
     indentWithTab,
+    editable,
     selection,
     onChange,
     onUpdate,

src/useCodeMirror.ts

@@ -3,8 +3,8 @@ import { basicSetup as defaultBasicSetup } from '@codemirror/basic-setup';
 import { EditorState, StateEffect } from '@codemirror/state';
 import { indentWithTab as defaultIndentWithTab } from '@codemirror/commands';
 import { EditorView, keymap, ViewUpdate } from '@codemirror/view';
-import { ReactCodeMirrorProps } from './';
 import { oneDarkTheme } from '@codemirror/theme-one-dark';
+import { ReactCodeMirrorProps } from './';
 import { defaultLightThemeOption } from './theme/light';
 
 export interface UseCodeMirror extends ReactCodeMirrorProps {
@@ -26,6 +26,7 @@ export function useCodeMirror(props: UseCodeMirror) {
     width = '',
     minWidth = '',
     maxWidth = '',
+    editable = true,
     indentWithTab = true,
     basicSetup = true,
   } = props;
@@ -56,7 +57,13 @@ export function useCodeMirror(props: UseCodeMirror) {
   if (basicSetup) {
     getExtensions.unshift(defaultBasicSetup);
   }
+
   theme === 'light' ? getExtensions.push(defaultLightThemeOption) : getExtensions.push(oneDarkTheme);
+
+  if (editable === false) {
+    getExtensions.push(EditorView.editable.of(false));
+  }
+
   if (onUpdate && typeof onUpdate === 'function') {
     getExtensions.push(EditorView.updateListener.of(onUpdate));
   }
@@ -103,7 +110,7 @@ export function useCodeMirror(props: UseCodeMirror) {
       view.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [theme, extensions, height, minHeight, maxHeight, width, minWidth, maxWidth]);
+  }, [theme, extensions, height, minHeight, maxHeight, width, minWidth, maxWidth, editable, indentWithTab, basicSetup]);
 
   useEffect(() => {
     if (autoFocus && view) {

website/App.tsx

@@ -127,6 +127,7 @@ let count = 0;
 export default function App() {
   const [mode, setMode] = useState('javascript');
   const [autofocus, setAutofocus] = useState(false);
+  const [editable, setEditable] = useState(true);
   const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>('light');
   const [code, setCode] = useState('');
   const [extensions, setExtensions] = useState<Extension[]>();
@@ -185,6 +186,7 @@ export default function App() {
         value={code}
         height={height}
         theme={theme}
+        editable={editable}
         extensions={extensions}
         autoFocus={autofocus}
         className={styles.codemirror}
@@ -224,6 +226,10 @@ export default function App() {
           <input type="checkbox" checked={autofocus} onChange={(evn) => setAutofocus(evn.target.checked)} />
           autoFocus
         </label>
+        <label>
+          <input type="checkbox" checked={editable} onChange={(evn) => setEditable(evn.target.checked)} />
+          editable
+        </label>
       </div>
       <MarkdownPreview className={styles.markdown} source={DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '')} />
       <div className={styles.footer}>