ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-08 09:38:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix images in Notebook not showing (#18160)

Browse Source 
* Fix images in Notebook not showing

* fixes

* more fixes
This commit is contained in:
Charles Gagnon
2022-01-27 15:00:00 -08:00
committed by GitHub
parent 8333a39615
commit ad06fc7321
5 changed files with 65 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
View File

@@ -27,6 +27,7 @@ import { TextCellEditModes } from 'sql/workbench/services/notebook/common/contra
import { NotebookLinkHandler } from 'sql/workbench/contrib/notebook/browser/notebookLinkHandler';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import { FileAccess } from 'vs/base/common/network';
export const MARKDOWN_TOOLBAR_SELECTOR: string = 'markdown-toolbar-component';
const linksRegex = /\[(?<text>.+)\]\((?<url>[^ ]+)(?: "(?<title>.+)")?\)/;
@@ -297,8 +298,12 @@ export class MarkdownToolbarComponent extends AngularDisposable {
await insertFormattedMarkdown(linkCalloutResult?.insertEscapedMarkdown, this.getCellEditorControl());
} else if (type === MarkdownButtonType.IMAGE_PREVIEW) {
if (imageCalloutResult.embedImage) {
let base64String = await this.getFileContentBase64(URI.file(imageCalloutResult.imagePath));
let mimeType = await this.getFileMimeType(URI.file(imageCalloutResult.imagePath));
// VS Code blocks loading directly from the file protocol - we have to transform it to a vscode-file URI
// first. Currently we assume that the path here is always going to be a path since we don't support
// embedding images from web links.
const uri = FileAccess.asBrowserUri(URI.file(imageCalloutResult.imagePath));
let base64String = await this.getFileContentBase64(uri);
let mimeType = await this.getFileMimeType(uri);
const originalImageName: string = path.basename(imageCalloutResult.imagePath).replace(/\s/g, '');
let attachmentName = this.cellModel.addAttachment(mimeType, base64String, originalImageName);
if (originalImageName !== attachmentName) {

7
src/sql/workbench/contrib/notebook/browser/htmlMarkdownConverter.ts
View File

@@ -9,6 +9,7 @@ import * as path from 'vs/base/common/path';
import * as turndownPluginGfm from 'sql/workbench/contrib/notebook/browser/turndownPluginGfm';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { findPathRelativeToContent, NotebookLinkHandler } from 'sql/workbench/contrib/notebook/browser/notebookLinkHandler';
import { FileAccess } from 'vs/base/common/network';
// These replacements apply only to text. Here's how it's handled from Turndown:
// if (node.nodeType === 3) {
@@ -121,9 +122,11 @@ export class HTMLMarkdownConverter {
filter: 'img',
replacement: (content, node) => {
if (node?.src) {
let imgPath = URI.parse(node.src);
// Image URIs are converted to vscode-file URIs for the underlying HTML so that they can be loaded by ADS,
// but we want to convert them back to their file URI when converting back to markdown for displaying to the user
let imgUri = FileAccess.asFileUri(URI.parse(node.src));
const notebookFolder: string = this.notebookUri ? path.join(path.dirname(this.notebookUri.fsPath), path.sep) : '';
let relativePath = findPathRelativeToContent(notebookFolder, imgPath);
let relativePath = findPathRelativeToContent(notebookFolder, imgUri);
if (relativePath) {
return `![${node.alt}](${relativePath})`;
}

14
src/sql/workbench/contrib/notebook/browser/outputs/notebookMarkdown.ts
View File

@@ -17,6 +17,7 @@ import { IMarkdownStringWithCellAttachments, MarkdownRenderOptionsWithCellAttach
import { replaceInvalidLinkPath } from 'sql/workbench/contrib/notebook/common/utils';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { useNewMarkdownRendererKey } from 'sql/workbench/contrib/notebook/common/notebookCommon';
import { FileAccess, Schemas } from 'vs/base/common/network';
// Based off of HtmlContentRenderer
export class NotebookMarkdownRenderer {
@@ -98,7 +99,18 @@ export class NotebookMarkdownRenderer {
}
let attributes: string[] = [];
if (href) {
attributes.push(`src="${href}"`);
// VS Code blocks loading directly from the file protocol - we have to transform it to a vscode-file URI
// first. Since the href here can be either a file path, an HTTP/S link or embedded data though we first
// check if it's any of the others and if so then don't need to do anything.
let uri = URI.parse(href);
if (!(uri.scheme === Schemas.https ||
uri.scheme === Schemas.http ||
uri.scheme === Schemas.data ||
uri.scheme === Schemas.attachment ||
uri.scheme === Schemas.vscodeFileResource)) {
uri = FileAccess.asBrowserUri(URI.file(href));
}
attributes.push(`src="${uri.toString(true)}"`);
}
if (text) {
attributes.push(`alt="${text}"`);