diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts index 0da6e27a2b..ff6f1e930f 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts @@ -103,6 +103,8 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges { public doubleClickEditEnabled: boolean; private _highlightRange: NotebookRange; private _isFindActive: boolean = false; + private _editorHeight: number; + private readonly _markdownMaxHeight = 4000; private readonly _undoStack: RichTextEditStack; private readonly _redoStack: RichTextEditStack; @@ -176,6 +178,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges { } ngOnInit() { + this._editorHeight = document.querySelector('.editor-container').clientHeight; this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures'); this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this)); this.updateTheme(this.themeService.getColorTheme()); @@ -262,7 +265,9 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges { let outputElement = this.output.nativeElement; outputElement.innerHTML = this.markdownResult.element.innerHTML; this.addUndoElement(outputElement.innerHTML); - + if (this.markdownMode) { + this.setSplitViewHeight(); + } outputElement.style.lineHeight = this.markdownPreviewLineHeight.toString(); this.cellModel.renderedOutputTextContent = this.getRenderedTextOutput(); outputElement.focus(); @@ -273,6 +278,23 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges { } } + private setSplitViewHeight(): void { + // Set the same height for markdown editor and preview + this.setMarkdownEditorHeight(this._editorHeight); + let outputElement = this.output.nativeElement; + outputElement.style.maxHeight = this._editorHeight.toString() + 'px'; + outputElement.style.overflowY = 'scroll'; + } + + private setMarkdownEditorHeight(height: number): void { + // Find cell editor provider via cell guid to set markdown editor max height + let cellEditorProvider = this.markdowncodeCell.find(c => c.cellGuid() === this.cellModel.cellGuid); + let markdownEditor = cellEditorProvider?.getEditor(); + if (markdownEditor) { + markdownEditor.setMaximumHeight(height); + } + } + private updateCellSource(): void { let textOutputElement = this.output.nativeElement; let newCellSource: string = this._htmlMarkdownConverter.convert(textOutputElement.innerHTML); @@ -404,11 +426,18 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges { } private focusIfPreviewMode(): void { - if (this.previewMode && !this.markdownMode) { - let outputElement = this.output?.nativeElement as HTMLElement; - if (outputElement) { - outputElement.focus(); + if (this.previewMode) { + if (!this.markdownMode) { + let outputElement = this.output?.nativeElement as HTMLElement; + if (outputElement) { + outputElement.style.maxHeight = 'unset'; + outputElement.focus(); + } + } else { + this.setSplitViewHeight(); } + } else { + this.setMarkdownEditorHeight(this._markdownMaxHeight); } }