From d320b72a8b3fe76c441d1c9b6ddc8ffe81ee900d Mon Sep 17 00:00:00 2001
From: larrywang0701 <113608053+larrywang0701@users.noreply.github.com>
Date: Wed, 1 Nov 2023 06:48:14 +0800
Subject: [PATCH] Fix the bug that AceEditor in REPL tab is not notified during
 resize (#262)

Fix the bug that the actual code area in AceEditor in REPL tab not resizes with the displayed editor area. Now AceEditor will automatically resize the code area when user drag the resize bar.
---
 src/tabs/Repl/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/tabs/Repl/index.tsx b/src/tabs/Repl/index.tsx
index 034a2ee08..06c291ad4 100644
--- a/src/tabs/Repl/index.tsx
+++ b/src/tabs/Repl/index.tsx
@@ -32,6 +32,7 @@ const BOX_PADDING_VALUE = 4;
 class ProgrammableReplGUI extends React.Component<Props, State> {
   public replInstance : ProgrammableRepl;
   private editorAreaRect;
+  private editorInstance;
   constructor(data: Props) {
     super(data);
     this.replInstance = data.programmableReplInstance;
@@ -50,6 +51,7 @@ class ProgrammableReplGUI extends React.Component<Props, State> {
       const height = Math.max(e.clientY - this.editorAreaRect.top - BOX_PADDING_VALUE * 2, MINIMUM_EDITOR_HEIGHT);
       this.replInstance.editorHeight = height;
       this.setState({ editorHeight: height });
+      this.editorInstance.resize();
     }
   };
   private onMouseUp = (_e) => {
@@ -108,7 +110,7 @@ class ProgrammableReplGUI extends React.Component<Props, State> {
           border: '2px solid #6f8194',
         }}>
           <AceEditor
-            ref={ (e) => this.replInstance.setEditorInstance(e?.editor)}
+            ref={ (e) => { this.editorInstance = e?.editor; this.replInstance.setEditorInstance(e?.editor); }}
             style= { {
               width: '100%',
               height: `${editorHeight}px`,