feat: add the outputEditorInstance property in panelService (#229)

* feat: add the outputEditorInstance property in panelService

* refactor: add css style for the Output component

* refactor: set builtIn output ID to PANEL_OUTPUT

* refactor: remove useless css style

Author: wewoor

src/model/workbench/panel.tsx

@@ -27,13 +27,27 @@ export interface IPanel {
     toolbox?: IActionBarItemProps[];
 }
 
+export interface IOutput extends IPanelItem {
+    outputEditorInstance?: IStandaloneCodeEditor;
+    onUpdateEditorIns?(editorInstance: IStandaloneCodeEditor): void;
+}
+
 export function builtInOutputPanel() {
-    return {
+    const outputPane: IOutput = {
         id: PANEL_OUTPUT,
         name: localize(PANEL_OUTPUT, 'output'),
         data: '',
-        renderPane: (item) => <Output {...item} />,
     };
+
+    function onUpdateEditorIns(editorInstance: IStandaloneCodeEditor) {
+        outputPane.outputEditorInstance = editorInstance;
+    }
+
+    outputPane.renderPane = (item) => (
+        <Output onUpdateEditorIns={onUpdateEditorIns} {...item} />
+    );
+
+    return outputPane;
 }
 
 export function builtInPanelToolboxResize(): IActionBarItemProps {

src/services/workbench/panelService.ts

@@ -4,6 +4,7 @@ import { Component } from 'mo/react';
 import {
     builtInOutputPanel,
     builtInPanelToolboxResize,
+    IOutput,
     IPanel,
     IPanelItem,
     PanelEvent,
@@ -19,6 +20,10 @@ import { localize } from 'mo/i18n/localize';
 import { LayoutService } from 'mo/services';
 
 export interface IPanelService extends Component<IPanel> {
+    /**
+     * The editorInstance of Output
+     */
+    readonly outputEditorInstance: IStandaloneCodeEditor | undefined;
     open(data: IPanelItem): void;
     getById(id: string): IPanelItem | undefined;
     add(data: IPanelItem | IPanelItem[]): void;
@@ -45,6 +50,13 @@ export class PanelService extends Component<IPanel> implements IPanelService {
         this.layoutService = container.resolve(LayoutService);
     }
 
+    public get outputEditorInstance() {
+        const outputPane: IOutput | undefined = this.state.data?.find(
+            searchById(PANEL_OUTPUT)
+        );
+        return outputPane?.outputEditorInstance;
+    }
+
     public maximizeRestore(): void {
         const panelMaximized = this.layoutService.isPanelMaximized();
         const { toolbox = [] } = this.state;
@@ -87,16 +99,14 @@ export class PanelService extends Component<IPanel> implements IPanelService {
     public updateOutput(data: IPanelItem<any>): IPanelItem | undefined {
         return this.update(Object.assign(builtInOutputPanel(), data));
     }
+
     public appendOutput(content: string): void {
-        const output = this.getById(PANEL_OUTPUT);
-        if (output) {
-            output.data = output.data + content;
-            this.updateOutput(output);
-        }
+        const outputValue = this.outputEditorInstance?.getValue();
+        this.outputEditorInstance?.setValue(outputValue + content);
     }
 
     public clearOutput(): void {
-        this.updateOutput(Object.assign(builtInOutputPanel(), { data: '' }));
+        this.outputEditorInstance?.setValue('');
     }
 
     public add(data: IPanelItem | IPanelItem[]) {

src/style/common.scss

@@ -42,6 +42,7 @@ $mainBench: prefix('mainBench');
 $activityBar: prefix('activityBar');
 $notification: prefix('notification');
 $problems: prefix('problems');
+$output: prefix('output');
 $folderTree: prefix('folderTree');
 $editorTree: prefix('editorTree');
 

src/workbench/panel/output.tsx

@@ -1,20 +1,16 @@
 import * as React from 'react';
 import { prefixClaName } from 'mo/common/className';
-import { IPanelItem } from 'mo/model/workbench/panel';
+import { IOutput } from 'mo/model/workbench/panel';
 import { MonacoEditor } from 'mo/components/monaco';
 
 const defaultClassName = prefixClaName('output');
 
-function Output(props: IPanelItem) {
-    const { data = '' } = props;
-    // TODO: Output should export the editorInstance, it's used for update the editor Language, Monarch
+function Output(props: IOutput) {
+    const { id, data = '', onUpdateEditorIns } = props;
     return (
-        <div
-            className={defaultClassName}
-            style={{ width: '100%', height: '100%' }}
-        >
+        <div className={defaultClassName}>
             <MonacoEditor
-                key={data.length}
+                key={id}
                 options={{
                     value: data,
                     readOnly: true,
@@ -25,6 +21,9 @@ function Output(props: IPanelItem) {
                     },
                     automaticLayout: true,
                 }}
+                editorInstanceRef={(editorInstance) => {
+                    onUpdateEditorIns?.(editorInstance);
+                }}
             />
         </div>
     );

src/workbench/panel/panel.tsx

@@ -7,9 +7,7 @@ import { ActionBar } from 'mo/components/actionBar';
 
 const defaultClassName = prefixClaName('panel');
 const panelHeaderClassName = getBEMElement(defaultClassName, 'header');
-
 const panelToolbarClassName = getBEMElement(defaultClassName, 'toolbar');
-
 const panelContainerClassName = getBEMElement(defaultClassName, 'container');
 
 export function Panel(props: IPanel & IPanelController) {

stories/extensions/test/testPane.tsx

@@ -93,7 +93,9 @@ export default class TestPane extends React.Component {
         };
 
         const updateOutput = () => {
-            molecule.panel.appendOutput('Number: ' + Math.random() * 10);
+            const editorIns = molecule.panel.outputEditorInstance;
+            console.log('outputEditorInstance:', editorIns);
+            molecule.panel.appendOutput('Number: ' + Math.random() * 10 + '\n');
         };
 
         const newEditor = function () {