fix: output panel didn't save data when switching panels (#252)

* fix: output panel didn't save data when switching panels

* fix: improve output editor instance

* fix: improve append output via updateOutput

Author: mortalYoung

src/model/workbench/panel.tsx

@@ -39,12 +39,18 @@ export function builtInOutputPanel() {
         data: '',
     };
 
-    function onUpdateEditorIns(editorInstance: IStandaloneCodeEditor) {
-        outputPane.outputEditorInstance = editorInstance;
+    function onUpdateEditorIns(
+        editorInstance: IStandaloneCodeEditor,
+        item: IOutput
+    ) {
+        item.outputEditorInstance = editorInstance;
     }
 
     outputPane.renderPane = (item) => (
-        <Output onUpdateEditorIns={onUpdateEditorIns} {...item} />
+        <Output
+            onUpdateEditorIns={(instance) => onUpdateEditorIns(instance, item)}
+            {...item}
+        />
     );
 
     return outputPane;

src/services/workbench/panelService.ts

@@ -102,6 +102,10 @@ export class PanelService extends Component<IPanel> implements IPanelService {
 
     public appendOutput(content: string): void {
         const outputValue = this.outputEditorInstance?.getValue();
+        this.updateOutput({
+            id: PANEL_OUTPUT,
+            data: outputValue + content,
+        });
         this.outputEditorInstance?.setValue(outputValue + content);
     }
 

src/workbench/panel/output.tsx

@@ -6,7 +6,13 @@ import { MonacoEditor } from 'mo/components/monaco';
 const defaultClassName = prefixClaName('output');
 
 function Output(props: IOutput) {
-    const { id, data = '', onUpdateEditorIns } = props;
+    const { id, data = '', onUpdateEditorIns, outputEditorInstance } = props;
+    const editorDidMount = React.useRef(false);
+
+    if (!editorDidMount.current && outputEditorInstance) {
+        outputEditorInstance.dispose();
+    }
+
     return (
         <div className={defaultClassName}>
             <MonacoEditor
@@ -23,6 +29,7 @@ function Output(props: IOutput) {
                 }}
                 editorInstanceRef={(editorInstance) => {
                     onUpdateEditorIns?.(editorInstance);
+                    editorDidMount.current = true;
                 }}
             />
         </div>