fix: remove monacoDiffEditor readonly props

Author: HaydenOrz

src/diff.tsx

@@ -25,52 +25,59 @@ class MonacoDiffEditor extends React.Component<MonacoDiffEditorProps> {
     }
 
     componentDidUpdate(prevProps) {
-        const { language, theme, options, sync, readOnly } = this.props;
+        const { language, theme, options, sync } = this.props;
         const { original, modified } = this.diffEditor.getModel();
 
+        if (prevProps.language !== language) {
+            editor.setModelLanguage(original, language);
+            editor.setModelLanguage(modified, language);
+        }
+        if (prevProps.theme !== theme) {
+            editor.setTheme(theme);
+        }
+        if (prevProps.options !== options) {
+            this.diffEditor.updateOptions({
+                ...options,
+            });
+        }
+
         if (this.props.original !== original.getValue() && sync) {
             original.setValue(this.props.original);
         }
+
         if (
             this.props.value != null &&
             this.props.value !== modified.getValue() &&
             sync
         ) {
             this.__prevent_onChange = true;
-            this.diffEditor.getModifiedEditor().updateOptions({
-                readOnly: false,
-            });
-            this.diffEditor.getModifiedEditor().pushUndoStop();
-            this.diffEditor.getModifiedEditor().executeEdits('sync-value', [
+            const modifiedEditor = this.diffEditor.getModifiedEditor();
+
+            const readOnly = modifiedEditor.getRawOptions().readOnly;
+
+            if (readOnly) {
+                modifiedEditor.updateOptions({
+                    readOnly: false,
+                });
+            }
+
+            modifiedEditor.pushUndoStop();
+            modifiedEditor.executeEdits('sync-value', [
                 {
                     range: modified.getFullModelRange(),
                     text: this.props.value,
                     forceMoveMarkers: true,
                 },
             ]);
-            this.diffEditor.getModifiedEditor().pushUndoStop();
-            this.diffEditor.getModifiedEditor().updateOptions({
-                readOnly,
-            });
+            modifiedEditor.pushUndoStop();
+
+            if (readOnly) {
+                modifiedEditor.updateOptions({
+                    readOnly: readOnly,
+                });
+            }
             this.__prevent_onChange = false;
         }
-        if (prevProps.language !== language) {
-            editor.setModelLanguage(original, language);
-            editor.setModelLanguage(modified, language);
-        }
-        if (prevProps.theme !== theme) {
-            editor.setTheme(theme);
-        }
-        if (prevProps.options !== options) {
-            this.diffEditor.updateOptions({
-                ...options,
-            });
-        }
-        if (prevProps.readOnly !== readOnly) {
-            this.diffEditor.getModifiedEditor().updateOptions({
-                readOnly,
-            });
-        }
     }
 
     componentWillUnmount() {
@@ -79,14 +86,7 @@ class MonacoDiffEditor extends React.Component<MonacoDiffEditorProps> {
     }
 
     initMonaco() {
-        const {
-            original,
-            value,
-            language,
-            options,
-            theme = 'vs',
-            readOnly,
-        } = this.props;
+        const { original, value, language, options, theme = 'vs' } = this.props;
         if (!this.monacoDom.current) {
             console.error('Can not get monacoDom element!');
             return;
@@ -113,9 +113,6 @@ class MonacoDiffEditor extends React.Component<MonacoDiffEditorProps> {
             original: originalModel,
             modified: modifiedModel,
         });
-        this.diffEditor.getModifiedEditor().updateOptions({
-            readOnly: readOnly,
-        });
 
         this.initEditorEvent();
         this.props.editorDidMount?.(this.diffEditor);

src/types.ts

@@ -28,13 +28,6 @@ export interface BasicEditorProps {
      * Sync value to model when value change if sync is true.
      */
     sync?: boolean;
-    /**
-     * An event emitted when the value of the modifiedEditor model has changed.
-     */
-    onChange?: (
-        originValue: string,
-        event: monaco.editor.IModelContentChangedEvent
-    ) => any;
 }
 
 export interface MonacoEditorProps extends BasicEditorProps {
@@ -82,6 +75,13 @@ export interface MonacoEditorProps extends BasicEditorProps {
      * An event emitted when the editor is out of focus.
      */
     onBlur?: (value: string) => any;
+    /**
+     * An event emitted when the value of the model has changed.
+     */
+    onChange?: (
+        value: string,
+        event: monaco.editor.IModelContentChangedEvent
+    ) => any;
 }
 
 export interface MonacoDiffEditorProps extends BasicEditorProps {
@@ -99,10 +99,6 @@ export interface MonacoDiffEditorProps extends BasicEditorProps {
      * @see {@link monaco.editor.IStandaloneDiffEditorConstructionOptions}
      */
     options?: monaco.editor.IStandaloneDiffEditorConstructionOptions;
-    /**
-     * Is modifiedEditor readonly, defaults to false.
-     */
-    readOnly?: boolean;
     /**
      * Get diff editor instance.
      * @deprecated Use {@link editorDidMount} instead.
@@ -122,4 +118,11 @@ export interface MonacoDiffEditorProps extends BasicEditorProps {
      * Called immediately before the editor is destroyed (similar to componentWillUnmount of React).
      */
     editorWillUnMount?: (editor: monaco.editor.IStandaloneDiffEditor) => void;
+    /**
+     * An event emitted when the value of the modifiedEditor model has changed.
+     */
+    onChange?: (
+        modifiedValue: string,
+        event: monaco.editor.IModelContentChangedEvent
+    ) => any;
 }