Fix/open relative on dev (#8359)

* escape characters only on hyperlinks

* removed extra line

* added tests and changes to accomodate tests

* updates to test

* added comments

* use path.join

* format doc build error

* added comments

src/sql/workbench/contrib/notebook/browser/outputs/notebookMarkdown.ts

@@ -59,7 +59,7 @@ export class NotebookMarkdownRenderer {
 		let signalInnerHTML: () => void;
 		const withInnerHTML = new Promise(c => signalInnerHTML = c);
 
-		let notebookFolder = path.dirname(this._notebookURI.fsPath) + '/';
+		let notebookFolder = this._notebookURI ? path.join(path.dirname(this._notebookURI.fsPath), path.sep) : '';
 		if (!this._baseUrls.some(x => x === notebookFolder)) {
 			this._baseUrls.push(notebookFolder);
 		}
@@ -111,7 +111,12 @@ export class NotebookMarkdownRenderer {
 				text = removeMarkdownEscapes(text);
 			}
 			title = removeMarkdownEscapes(title);
-			href = removeMarkdownEscapes(href);
+			// only remove markdown escapes if it's a hyperlink, filepath usually can start with .{}_
+			// and the below function escapes them if it encounters in the path.
+			// dev note: using path.isAbsolute instead of isPathLocal since the latter accepts resolver (IRenderMime.IResolver) to check isLocal
+			if (!path.isAbsolute(href)) {
+				href = removeMarkdownEscapes(href);
+			}
 			if (
 				!href
 				|| !markdown.isTrusted
@@ -203,7 +208,7 @@ export class NotebookMarkdownRenderer {
 			href = this.resolveUrl(base, href);
 		}
 		try {
-			href = encodeURI(href).replace(/%5C/g, '\\').replace(/%25/g, '%');
+			href = encodeURI(href).replace(/%5C/g, '\\').replace(/%7C/g, '|').replace(/%25/g, '%');
 		} catch (e) {
 			return null;
 		}

src/sql/workbench/contrib/notebook/test/browser/notebookMarkdown.test.ts

@@ -0,0 +1,64 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as assert from 'assert';
+import * as marked from 'vs/base/common/marked/marked';
+import { NotebookMarkdownRenderer } from '../../browser/outputs/notebookMarkdown';
+import { URI } from 'vs/base/common/uri';
+
+suite('NotebookMarkdownRenderer', () => {
+	let notebookMarkdownRenderer = new NotebookMarkdownRenderer();
+	test('image rendering conforms to default', () => {
+		const markdown = { value: `![image](someimageurl 'caption')` };
+		const result: HTMLElement = notebookMarkdownRenderer.renderMarkdown(markdown);
+		const renderer = new marked.Renderer();
+		const imageFromMarked = marked(markdown.value, {
+			sanitize: true,
+			renderer
+		}).trim();
+		assert.strictEqual(result.innerHTML, imageFromMarked);
+	});
+
+	test('image rendering conforms to default without title', () => {
+		const markdown = { value: `![image](someimageurl)` };
+		const result: HTMLElement = notebookMarkdownRenderer.renderMarkdown(markdown);
+		const renderer = new marked.Renderer();
+		const imageFromMarked = marked(markdown.value, {
+			sanitize: true,
+			renderer
+		}).trim();
+		assert.strictEqual(result.innerHTML, imageFromMarked);
+	});
+
+	test('image width from title params', () => {
+		let result: HTMLElement = notebookMarkdownRenderer.renderMarkdown({ value: `![image](someimageurl|width=100 'caption')` });
+		assert.strictEqual(result.innerHTML, `<p><img src="someimageurl" alt="image" title="caption" width="100"></p>`);
+	});
+
+	test('image height from title params', () => {
+		let result: HTMLElement = notebookMarkdownRenderer.renderMarkdown({ value: `![image](someimageurl|height=100 'caption')` });
+		assert.strictEqual(result.innerHTML, `<p><img src="someimageurl" alt="image" title="caption" height="100"></p>`);
+	});
+
+	test('image width and height from title params', () => {
+		let result: HTMLElement = notebookMarkdownRenderer.renderMarkdown({ value: `![image](someimageurl|height=200,width=100 'caption')` });
+		assert.strictEqual(result.innerHTML, `<p><img src="someimageurl" alt="image" title="caption" width="100" height="200"></p>`);
+	});
+
+	test('link from local file path', () => {
+		let result: HTMLElement = notebookMarkdownRenderer.renderMarkdown({ value: `[Link to File Path](someFileurl)`, isTrusted: true });
+		assert.strictEqual(result.innerHTML, `<p><a href="someFileurl" data-href="someFileurl" title="someFileurl">Link to File Path</a></p>`);
+	});
+
+	test('link from relative file path', () => {
+		notebookMarkdownRenderer.setNotebookURI(URI.parse('maddy/temp/file1.txt'));
+		let result: HTMLElement = notebookMarkdownRenderer.renderMarkdown({ value: `[Link to relative path](../test/.build/someimageurl)`, isTrusted: true });
+		if (process.platform === 'win32') {
+			assert.strictEqual(result.innerHTML, `<p><a href="\\maddy\\test\\.build\\someimageurl" data-href="\\maddy\\test\\.build\\someimageurl" title="\\maddy\\test\\.build\\someimageurl">Link to relative path</a></p>`);
+		} else {
+			assert.strictEqual(result.innerHTML, `<p><a href="/maddy/test/.build/someimageurl" data-href="/maddy/test/.build/someimageurl" title="/maddy/test/.build/someimageurl">Link to relative path</a></p>`);
+		}
+	});
+});