Editor focus based on activeCell, create text in edit, scroll to active (#3725)

src/sql/parts/notebook/cellViews/code.component.ts

@@ -128,6 +128,7 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 		let uri = this.createUri();
 		this._editorInput = instantiationService.createInstance(UntitledEditorInput, uri, false, this.cellModel.language, '', '');
 		this._editor.setInput(this._editorInput, undefined);
+		this.setFocusAndScroll();
 		this._editorInput.resolve().then(model => {
 			this._editorModel = model.textEditorModel;
 			this._modelService.updateModel(this._editorModel, this.cellModel.source);
@@ -193,4 +194,10 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 		moreActionsEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
 	}
 
+	private setFocusAndScroll(): void {
+		if (this.cellModel.id === this._activeCellId) {
+			this._editor.focus();
+			this._editor.getContainer().scrollIntoView();
+		}
+	}
 }

src/sql/parts/notebook/cellViews/textCell.component.ts

@@ -60,7 +60,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 		@Inject(IOpenerService) private readonly openerService: IOpenerService,
 	) {
 		super();
-		this.isEditMode = false;
+		this.isEditMode = true;
 		this.isLoading = true;
 		this._cellToggleMoreActions = this._instantiationService.createInstance(CellToggleMoreActions);
 	}
@@ -87,10 +87,10 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 	}
 
 	ngOnInit() {
-		this.updatePreview();
 		this.setLoading(false);
 		this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
 		this.updateTheme(this.themeService.getColorTheme());
+		this.setFocusAndScroll();
 		this._register(this.cellModel.onOutputsChanged(e => {
 			this.updatePreview();
 		}));
@@ -101,7 +101,11 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 			if (propName === 'activeCellId') {
 				let changedProp = changes[propName];
 				this._activeCellId = changedProp.currentValue;
-				this.toggleEditMode(false);
+				// If the activeCellId is undefined (i.e. in an active cell update), don't unnecessarily set editMode to false;
+				// it will be set to true in a subsequent call to toggleEditMode()
+				if (changedProp.previousValue !== undefined) {
+					this.toggleEditMode(false);
+				}
 				break;
 			}
 		}
@@ -163,4 +167,15 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 		this.updatePreview();
 		this._changeRef.detectChanges();
 	}
+
+	private setFocusAndScroll(): void {
+		if (this.cellModel.id === this._activeCellId) {
+			this.toggleEditMode(true);
+		} else {
+			this.toggleEditMode(false);
+		}
+		if (this.output && this.output.nativeElement) {
+			(<HTMLElement>this.output.nativeElement).scrollTo();
+		}
+	}
 }

src/sql/parts/notebook/models/notebookModel.ts

@@ -62,6 +62,7 @@ export class NotebookModel extends Disposable implements INotebookModel {
 	private _defaultKernel: nb.IKernelSpec;
 	private _activeCell: ICellModel;
 	private _providerId: string;
+	private _isNewNotebook: boolean = true;
 
 	constructor(private notebookOptions: INotebookModelOptions, startSessionImmediately?: boolean, private connectionProfile?: IConnectionProfile) {
 		super();
@@ -170,6 +171,10 @@ export class NotebookModel extends Disposable implements INotebookModel {
 		return this._trustedMode;
 	}
 
+	public get isNewNotebook(): boolean {
+		return this._isNewNotebook;
+	}
+
 	public get providerId(): string {
 		return this._providerId;
 	}
@@ -218,6 +223,7 @@ export class NotebookModel extends Disposable implements INotebookModel {
 				version: ''
 			};
 			if (contents) {
+				this._isNewNotebook = false;
 				this._defaultLanguageInfo = this.getDefaultLanguageInfo(contents);
 				this._savedKernelInfo = this.getSavedKernelInfo(contents);
 				if (contents.cells && contents.cells.length > 0) {
@@ -250,7 +256,9 @@ export class NotebookModel extends Disposable implements INotebookModel {
 			index = undefined;
 		}
 		// Set newly created cell as active cell
-		this._activeCell.active = false;
+		if (this._activeCell) {
+			this._activeCell.active = false;
+		}
 		this._activeCell = cell;
 		this._activeCell.active = true;
 

src/sql/parts/notebook/notebook.component.ts

@@ -250,8 +250,9 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		this.updateToolbarComponents(this._model.trustedMode);
 		this._modelRegisteredDeferred.resolve(this._model);
 		model.backgroundStartSession();
-		// Set first cell as default active cell
-		if (this._model && this._model.cells && this._model.cells[0]) {
+		// Set first cell as default active cell if user creates new notebook
+		// Otherwise, don't select any cells by default
+		if (this._model && this._model.cells && this._model.cells[0] && this._model.isNewNotebook) {
 			this.selectCell(model.cells[0]);
 		}
 		this._changeRef.detectChanges();