From ff8e451af9fb3b9633b4a5e2229ddd2c74b046d4 Mon Sep 17 00:00:00 2001
From: Chris LaFreniere <40371649+chlafreniere@users.noreply.github.com>
Date: Thu, 22 Oct 2020 13:21:05 -0700
Subject: [PATCH] Further enhancements to spans (#13035)

---
 .../notebook/browser/htmlMarkdownConverter.ts | 20 +++++++++++++++++--
 .../browser/htmlMarkdownConverter.test.ts     | 20 +++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/src/sql/workbench/contrib/notebook/browser/htmlMarkdownConverter.ts b/src/sql/workbench/contrib/notebook/browser/htmlMarkdownConverter.ts
index 91b253dbd2..e88f86ba5f 100644
--- a/src/sql/workbench/contrib/notebook/browser/htmlMarkdownConverter.ts
+++ b/src/sql/workbench/contrib/notebook/browser/htmlMarkdownConverter.ts
@@ -21,7 +21,7 @@ export class HTMLMarkdownConverter {
 	}
 
 	private setTurndownOptions() {
-		this.turndownService.keep(['u', 'mark']);
+		this.turndownService.keep(['u', 'mark', 'style']);
 		this.turndownService.use(turndownPluginGfm.gfm);
 		this.turndownService.addRule('pre', {
 			filter: 'pre',
@@ -39,6 +39,22 @@ export class HTMLMarkdownConverter {
 		this.turndownService.addRule('span', {
 			filter: 'span',
 			replacement: function (content, node) {
+				// There are certain properties that either don't have equivalents in markdown or whose transformations
+				// don't have actions defined in WYSIWYG yet. To unblock users, leaving these elements alone (including their child elements)
+				// Note: the initial list was generated from our TSG Jupyter Book
+				if (node && node.style) {
+					if (node.style.color ||
+						node.style.fontSize ||
+						(node.style.backgroundColor && node.style.backgroundColor !== 'yellow') ||
+						(node.style.background && node.style.background !== 'yellow') ||
+						node.style.lineHeight ||
+						node.style.marginLeft ||
+						node.style.marginBottom ||
+						node.style.textAlign
+					) {
+						return node.outerHTML;
+					}
+				}
 				let beginString = '';
 				let endString = '';
 				// TODO: handle other background colors and more styles
@@ -58,7 +74,7 @@ export class HTMLMarkdownConverter {
 					beginString = '<u>' + beginString;
 					endString += '</u>';
 				}
-				return beginString + node.textContent + endString;
+				return beginString + content + endString;
 			}
 		});
 		this.turndownService.addRule('img', {
diff --git a/src/sql/workbench/contrib/notebook/test/browser/htmlMarkdownConverter.test.ts b/src/sql/workbench/contrib/notebook/test/browser/htmlMarkdownConverter.test.ts
index 02555d1517..d09ad07e55 100644
--- a/src/sql/workbench/contrib/notebook/test/browser/htmlMarkdownConverter.test.ts
+++ b/src/sql/workbench/contrib/notebook/test/browser/htmlMarkdownConverter.test.ts
@@ -79,6 +79,26 @@ suite('HTML Markdown Converter', function (): void {
 		assert.equal(htmlMarkdownConverter.convert(htmlString), 'Yes<u>Hello test</u>', 'Basic underline span no space failed');
 		htmlString = '<h1>Yes<span style="text-decoration-line:underline; font-style:italic; font-weight:bold; background-color: yellow">Hello test</span></h1>';
 		assert.equal(htmlMarkdownConverter.convert(htmlString), '# Yes<u>_**<mark>Hello test</mark>**_</u>', 'Compound elements span failed');
+		htmlString = '<span style="color: orangered">Hello test</span>';
+		assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with color style should not be altered');
+		htmlString = '<span style="font-size: 10.0pt">Hello test</span>';
+		assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with font size style should not be altered');
+		htmlString = '<span style="font-size: 10.0pt">Hello test</span>';
+		assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with font size style should not be altered');
+		htmlString = '<span style="background-color: green">Hello test</span>';
+		assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with background color (non yellow) style should not be altered');
+		htmlString = '<span style="background: green">Hello test</span>';
+		assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with background (non yellow) style should not be altered');
+		htmlString = '<span style="line-height: 12.0pt">Hello test</span>';
+		assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with line height style should not be altered');
+		htmlString = '<span style="margin-left: 12.0pt">Hello test</span>';
+		assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with margin left style should not be altered');
+		htmlString = '<span style="margin-bottom: 12.0pt">Hello test</span>';
+		assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with margin bottom style should not be altered');
+		htmlString = '<span style="text-align: center">Hello test</span>';
+		assert.equal(htmlMarkdownConverter.convert(htmlString), htmlString, 'Span with text align style should not be altered');
+		htmlString = '<span style="list-style-type: circle">Hello test</span>';
+		assert.equal(htmlMarkdownConverter.convert(htmlString), 'Hello test', 'Span with style that is not included in allowlist should be altered');
 	});
 
 	test('Should transform <img> tag', () => {