Fix monacoEditor perf and intellisense in the interactive window (microsoft#7476)

rchiodo · web-flow · commit 9affc399e7ea · 2019-09-18T15:24:20.000-07:00
diff --git a/news/2 Fixes/7241.md b/news/2 Fixes/7241.md
@@ -0,0 +1 @@
+Fix monaco editor layout perf.
diff --git a/src/datascience-ui/history-react/interactivePanel.tsx b/src/datascience-ui/history-react/interactivePanel.tsx
@@ -342,7 +342,7 @@ export class InteractivePanel extends React.Component<IInteractivePanelProps, IM
                         showWatermark={cellVM.cell.id === Identifiers.EditCellId}
                         editExecutionCount={this.getInputExecutionCount().toString()}
                         onCodeChange={this.stateController.codeChange}
-                        onCodeCreated={this.stateController.editableCodeCreated}
+                        onCodeCreated={this.stateController.readOnlyCodeCreated}
                         monacoTheme={this.state.monacoTheme}
                         openLink={this.stateController.openLink}
                         expandImage={this.stateController.showPlot}
diff --git a/src/datascience-ui/interactive-common/mainState.ts b/src/datascience-ui/interactive-common/mainState.ts
@@ -182,7 +182,7 @@ function generateVMs(inputBlockToggled: (id: string) => void, filePath: string,
     const cells = generateCells(filePath);
     return cells.map((cell: ICell) => {
         const vm = createCellVM(cell, undefined, inputBlockToggled, editable);
-        vm.useQuickEdit = true;
+        vm.useQuickEdit = false;
         return vm;
     });
 }
diff --git a/src/datascience-ui/native-editor/nativeEditorStateController.ts b/src/datascience-ui/native-editor/nativeEditorStateController.ts
@@ -196,11 +196,6 @@ export class NativeEditorStateController extends MainStateController {
         cellVM.inputBlockOpen = true;
         cellVM.inputBlockText = newText;
 
-        // Turn on quick edit (use a textArea) for any cell that's just been created.
-        if (cellVM.useQuickEdit === undefined) {
-            cellVM.useQuickEdit = true;
-        }
-
         return cellVM;
     }
 
diff --git a/src/datascience-ui/react-common/monacoEditor.tsx b/src/datascience-ui/react-common/monacoEditor.tsx
@@ -37,6 +37,7 @@ interface IMonacoEditorState {
     editor?: monacoEditor.editor.IStandaloneCodeEditor;
     model: monacoEditor.editor.ITextModel | null;
     visibleLineCount: number;
+    attached: boolean;
 }
 
 // Need this to prevent wiping of the current value on a componentUpdate. react-monaco-editor has that problem.
@@ -56,10 +57,11 @@ export class MonacoEditor extends React.Component<IMonacoEditorProps, IMonacoEdi
     private styleObserver : MutationObserver | undefined;
     private watchingMargin: boolean = false;
     private throttledUpdateWidgetPosition = throttle(this.updateWidgetPosition.bind(this), 100);
+    private monacoContainer : HTMLDivElement | undefined;
 
     constructor(props: IMonacoEditorProps) {
         super(props);
-        this.state = { editor: undefined, model: null, visibleLineCount: -1 };
+        this.state = { editor: undefined, model: null, visibleLineCount: -1, attached: false };
         this.containerRef = React.createRef<HTMLDivElement>();
         this.measureWidthRef = React.createRef<HTMLDivElement>();
         this.debouncedUpdateEditorSize = debounce(this.updateEditorSize.bind(this), 150);
@@ -88,8 +90,12 @@ export class MonacoEditor extends React.Component<IMonacoEditorProps, IMonacoEdi
                 this.outermostParent.addEventListener('mouseleave', this.outermostParentLeave);
             }
 
+            // Create a dummy DOM node to attach the editor to so that it skips layout.
+            this.monacoContainer = document.createElement('div');
+            this.monacoContainer.setAttribute('class', 'monaco-editor-container');
+
             // Create the editor
-            const editor = monacoEditor.editor.create(this.containerRef.current,
+            const editor = monacoEditor.editor.create(this.monacoContainer,
                 {
                     value: this.props.value,
                     language: this.props.language,
@@ -153,9 +159,6 @@ export class MonacoEditor extends React.Component<IMonacoEditorProps, IMonacoEdi
             // Update our margin to include the correct line number style
             this.updateMargin(editor);
 
-            // Make sure our suggest and hover windows show up on top of other stuff
-            this.updateWidgetParent(editor);
-
             // If we're readonly, monaco is not putting the aria-readonly property on the textarea
             // We should do that
             if (this.props.options.readOnly) {
@@ -237,7 +240,6 @@ export class MonacoEditor extends React.Component<IMonacoEditorProps, IMonacoEdi
         const measureWidthClassName = this.props.measureWidthClassName ? this.props.measureWidthClassName : 'measure-width-div';
         return (
             <div className='monaco-editor-outer-container' ref={this.containerRef}>
-                <div className='monaco-editor-container' />
                 <div className={measureWidthClassName} ref={this.measureWidthRef} />
             </div>
         );
@@ -371,7 +373,14 @@ export class MonacoEditor extends React.Component<IMonacoEditorProps, IMonacoEdi
                 if (this.state.visibleLineCount !== currLineCount) {
                     this.props.lineCountChanged(currLineCount);
                 }
-                this.setState({visibleLineCount: currLineCount});
+                // Make sure to attach to a real dom node.
+                if (!this.state.attached && this.state.editor && this.monacoContainer) {
+                    this.containerRef.current.appendChild(this.monacoContainer);
+
+                    // Make sure our suggest and hover windows show up on top of other stuff
+                    this.updateWidgetParent(this.state.editor);
+                }
+                this.setState({visibleLineCount: currLineCount, attached: true});
                 this.state.editor.layout({width, height});
 
                 // Also need to update our widget positions

Original file line number	Diff line number	Diff line change
`@@ -182,7 +182,7 @@ function generateVMs(inputBlockToggled: (id: string) => void, filePath: string,`
`182`	`182`	`const cells = generateCells(filePath);`
`183`	`183`	`return cells.map((cell: ICell) => {`
`184`	`184`	`const vm = createCellVM(cell, undefined, inputBlockToggled, editable);`
`185`		`- vm.useQuickEdit = true;`
	`185`	`+ vm.useQuickEdit = false;`
`186`	`186`	`return vm;`
`187`	`187`	`});`
`188`	`188`	`}`