fix problems with html style comments in embedded code (microsoft#160981)

w1redch4d · aeschli · web-flow · commit 70328b1b48dc · 2022-10-26T08:41:05.000Z
* fix problems with html style comments in embedded code

* add spacings to the replaced characters

add same amount of characters, in the replacements so that all offsets stays the same

* revert javascriptMode.ts

* add replace characters in embeddedSupport.ts instead

* added few more tests with javascript

more testcases with js code before and after the comments

* polish

Co-authored-by: UwUeeb &lt;106700035+UwUeeb@users.noreply.github.com&gt;
Co-authored-by: Martin Aeschlimann &lt;martinae@microsoft.com&gt;
diff --git a/extensions/html-language-features/server/src/modes/embeddedSupport.ts b/extensions/html-language-features/server/src/modes/embeddedSupport.ts
@@ -168,7 +168,7 @@ function getEmbeddedDocument(document: TextDocument, contents: EmbeddedRegion[],
 	for (const c of contents) {
 		if (c.languageId === languageId && (!ignoreAttributeValues || !c.attributeValue)) {
 			result = substituteWithWhitespace(result, currentPos, c.start, oldContent, lastSuffix, getPrefix(c));
-			result += oldContent.substring(c.start, c.end);
+			result += updateContent(c, oldContent.substring(c.start, c.end));
 			currentPos = c.end;
 			lastSuffix = getSuffix(c);
 		}
@@ -194,6 +194,12 @@ function getSuffix(c: EmbeddedRegion) {
 	}
 	return '';
 }
+function updateContent(c: EmbeddedRegion, content: string): string {
+	if (!c.attributeValue && c.languageId === 'javascript') {
+		return content.replace(`<!--`, `/* `).replace(`-->`, ` */`);
+	}
+	return content;
+}
 
 function substituteWithWhitespace(result: string, start: number, end: number, oldContent: string, before: string, after: string) {
 	result += before;
diff --git a/extensions/html-language-features/server/src/test/embedded.test.ts b/extensions/html-language-features/server/src/test/embedded.test.ts
@@ -119,7 +119,10 @@ suite('HTML Embedded Support', () => {
 	test('Script content', function (): any {
 		assertEmbeddedLanguageContent('<html><script>var i = 0;</script></html>', 'javascript', '              var i = 0;                ');
 		assertEmbeddedLanguageContent('<script type="text/javascript">var i = 0;</script>', 'javascript', '                               var i = 0;         ');
+		assertEmbeddedLanguageContent('<script><!--this comment should not give error--></script>', 'javascript', '        /* this comment should not give error */         ');
+		assertEmbeddedLanguageContent('<script><!--this comment should not give error--> console.log("logging");</script>', 'javascript', '        /* this comment should not give error */ console.log("logging");         ');
 
+		assertEmbeddedLanguageContent('<script>var data=100; <!--this comment should not give error--> </script>', 'javascript', '        var data=100; /* this comment should not give error */          ');
 		assertEmbeddedLanguageContent('<div onKeyUp="foo()" onkeydown="bar()"/>', 'javascript', '              foo();            bar();  ');
 		assertEmbeddedLanguageContent('<div onKeyUp="return"/>', 'javascript', '              return;  ');
 		assertEmbeddedLanguageContent('<div onKeyUp=return\n/><script>foo();</script>', 'javascript', '             return;\n          foo();         ');
