CodeEditor: Ensure latest onChange callback is called (#83599)

packages/grafana-ui/src/components/Monaco/CodeEditor.tsx

@@ -102,7 +102,7 @@ class UnthemedCodeEditor extends PureComponent<Props> {
   };
 
   handleOnMount = (editor: MonacoEditorType, monaco: Monaco) => {
-    const { getSuggestions, language, onChange, onEditorDidMount } = this.props;
+    const { getSuggestions, language, onEditorDidMount } = this.props;
 
     this.modelId = editor.getModel()?.id;
     this.getEditorValue = () => editor.getValue();
@@ -119,15 +119,21 @@ class UnthemedCodeEditor extends PureComponent<Props> {
       }
     });
 
-    if (onChange) {
-      editor.getModel()?.onDidChangeContent(() => onChange(editor.getValue()));
-    }
+    editor.getModel()?.onDidChangeContent(this.handleChangeContent);
 
     if (onEditorDidMount) {
       onEditorDidMount(editor, monaco);
     }
   };
 
+  handleChangeContent = () => {
+    const { onChange } = this.props;
+
+    if (onChange) {
+      onChange(this.getEditorValue());
+    }
+  };
+
   render() {
     const { theme, language, width, height, showMiniMap, showLineNumbers, readOnly, monacoOptions } = this.props;
     const { alwaysConsumeMouseWheel, ...restMonacoOptions } = monacoOptions ?? {};