Fix for relative markdown image paths (#4889)

* Fix for relative markdown image paths

* PR comments
This commit is contained in:
Chris LaFreniere
2019-04-10 11:35:06 -07:00
committed by GitHub
parent d6df20b0e8
commit 88712f46bf
2 changed files with 26 additions and 4 deletions

View File

@@ -5,6 +5,7 @@
import 'vs/css!./textCell';
import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, OnChanges, SimpleChange } from '@angular/core';
import * as path from 'path';
import { localize } from 'vs/nls';
import { IColorTheme, IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
@@ -133,8 +134,9 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
} else {
this._content = this.sanitizeContent(this.cellModel.source);
}
// todo: pass in the notebook filename instead of undefined value
this._commandService.executeCommand<string>('notebook.showPreview', undefined, this._content).then((htmlcontent) => {
this._commandService.executeCommand<string>('notebook.showPreview', this.cellModel.notebookModel.notebookUri, this._content).then((htmlcontent) => {
htmlcontent = this.convertVscodeResourceToFileInSubDirectories(htmlcontent);
let outputElement = <HTMLElement>this.output.nativeElement;
outputElement.innerHTML = htmlcontent;
});
@@ -149,6 +151,24 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
return content;
}
// Only replace vscode-resource with file when in the same (or a sub) directory
// This matches Jupyter Notebook viewer behavior
private convertVscodeResourceToFileInSubDirectories(htmlContent: string): string {
let htmlContentCopy = htmlContent;
while (htmlContentCopy.search('(?<=img src=\"vscode-resource:)') > 0) {
let pathStartIndex = htmlContentCopy.search('(?<=img src=\"vscode-resource:)');
let pathEndIndex = htmlContentCopy.indexOf('\" ', pathStartIndex);
let filePath = htmlContentCopy.substring(pathStartIndex, pathEndIndex);
// If the asset is in the same folder or a subfolder, replace 'vscode-resource:' with 'file:', so the image is visible
if (!path.relative(path.dirname(this.cellModel.notebookModel.notebookUri.fsPath), filePath).includes('..')) {
// ok to change from vscode-resource: to file:
htmlContent = htmlContent.replace('vscode-resource:'+ filePath, 'file:' + filePath);
}
htmlContentCopy = htmlContentCopy.slice(pathEndIndex);
}
return htmlContent;
}
// Todo: implement layout
public layout() {