Add vertical scroll bar to Preview in Split View (#17164)

* reset max height

* add editor height

* set md editor height
This commit is contained in:
Barbara Valdez
2021-09-29 15:29:03 -07:00
committed by GitHub
parent b2e9e30529
commit dfc2635aa7

View File

@@ -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 = <HTMLElement>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 = <HTMLElement>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 = <HTMLElement>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);
}
}