Fix for Emmet's wrap with abbreviation inserting extra spaces (#43345)

* Fixing trailing spaces in expansion

* Emmet - Fixing extra spaces when wrapping with abbreviation

* Avoid fetching tag if there's no need to ezpand again

* Replacing several 'indexof's with regexp

* Making regexp for tagname stricter. Removing unnecessary check.

* Removing extra call to expand.

* tiny changes

* tinitiny changes

extensions/emmet/package.json

@@ -337,7 +337,7 @@
         "@emmetio/html-matcher": "^0.3.3",
         "@emmetio/css-parser": "ramya-rao-a/css-parser#vscode",
         "@emmetio/math-expression": "^0.1.1",
-        "vscode-emmet-helper": "^1.1.32",
+        "vscode-emmet-helper": "^1.1.36",
         "vscode-languageserver-types": "^3.5.0",
         "image-size": "^0.5.2",
         "vscode-nls": "3.2.1"

extensions/emmet/src/abbreviationActions.ts

@@ -10,6 +10,12 @@ import { getEmmetHelper, getNode, getInnerRange, getMappingForIncludedLanguages,
 const trimRegex = /[\u00a0]*[\d|#|\-|\*|\u2022]+\.?/;
 const hexColorRegex = /^#\d+$/;
 
+const inlineElements = ['a', 'abbr', 'acronym', 'applet', 'b', 'basefont', 'bdo',
+	'big', 'br', 'button', 'cite', 'code', 'del', 'dfn', 'em', 'font', 'i',
+	'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'map', 'object', 'q',
+	's', 'samp', 'select', 'small', 'span', 'strike', 'strong', 'sub', 'sup',
+	'textarea', 'tt', 'u', 'var'];
+
 interface ExpandAbbreviationInput {
 	syntax: string;
 	abbreviation: string;
@@ -62,7 +68,8 @@ export function wrapWithAbbreviation(args: any) {
 			const preceedingWhiteSpace = matches ? matches[1].length : 0;
 
 			rangeToReplace = new vscode.Range(rangeToReplace.start.line, rangeToReplace.start.character + preceedingWhiteSpace, rangeToReplace.end.line, rangeToReplace.end.character);
-			expandAbbrList.push({ syntax, abbreviation, rangeToReplace, textToWrap: ['\n\t$TM_SELECTED_TEXT\n'], filter });
+			let textToWrap = rangeToReplace.isSingleLine ? ['$TM_SELECTED_TEXT'] : ['\n\t$TM_SELECTED_TEXT\n'];
+			expandAbbrList.push({ syntax, abbreviation, rangeToReplace, textToWrap, filter });
 		});
 
 		return expandAbbreviationInRange(editor, expandAbbrList, true);
@@ -435,17 +442,29 @@ function expandAbbr(input: ExpandAbbreviationInput): string | undefined {
 
 	try {
 		// Expand the abbreviation
-		let expandedText = helper.expandAbbreviation(input.abbreviation, expandOptions);
+		let expandedText;
 
 		if (input.textToWrap) {
+			let parsedAbbr = helper.parseAbbreviation(input.abbreviation, expandOptions);
+			if (input.rangeToReplace.isSingleLine && input.textToWrap.length === 1) {
+
+				// Fetch rightmost element in the parsed abbreviation (i.e the element that will contain the wrapped text).
+				let wrappingNode = parsedAbbr;
+				while (wrappingNode && wrappingNode.children && wrappingNode.children.length > 0) {
+					wrappingNode = wrappingNode.children[wrappingNode.children.length - 1];
+				}
+
+				// If wrapping with a block element, insert newline in the text to wrap.
+				if (wrappingNode && inlineElements.indexOf(wrappingNode.name) === -1) {
+					wrappingNode.value = '\n\t' + wrappingNode.value + '\n';
+				}
+			}
+			expandedText = helper.expandAbbreviation(parsedAbbr, expandOptions);
 			// All $anyword would have been escaped by the emmet helper.
 			// Remove the escaping backslash from $TM_SELECTED_TEXT so that VS Code Snippet controller can treat it as a variable
 			expandedText = expandedText.replace('\\$TM_SELECTED_TEXT', '$TM_SELECTED_TEXT');
-
-			// If the expanded text is single line then we dont need the \t and \n we added to $TM_SELECTED_TEXT earlier
-			if (input.textToWrap.length === 1 && expandedText.indexOf('\n') === -1) {
-				expandedText = expandedText.replace(/\s*\$TM_SELECTED_TEXT\s*/, '$TM_SELECTED_TEXT');
-			}
+		} else {
+			expandedText = helper.expandAbbreviation(input.abbreviation, expandOptions);
 		}
 
 		return expandedText;

extensions/emmet/src/test/wrapWithAbbreviation.test.ts

@@ -197,6 +197,31 @@ suite('Tests for Wrap with Abbreviations', () => {
 		});
 	});
 
+	test('Wrap with multiline abbreviation doesnt add extra spaces', () => {
+		// Issue #29898
+		const contents = `
+	hello
+	`;
+		const expectedContents = `
+	<ul>
+		<li><a href="">hello</a></li>
+	</ul>
+	`;
+
+		return withRandomFileEditor(contents, 'html', (editor, doc) => {
+			editor.selections = [new Selection(1, 2, 1, 2)];
+			const promise = wrapWithAbbreviation({ abbreviation: 'ul>li>a' });
+			if (!promise) {
+				assert.equal(1, 2, 'Wrap returned undefined instead of promise.');
+				return Promise.resolve();
+			}
+			return promise.then(() => {
+				assert.equal(editor.document.getText(), expectedContents);
+				return Promise.resolve();
+			});
+		});
+	});
+
 	test('Wrap individual lines with abbreviation', () => {
 		const contents = `
 	<ul class="nav main">

extensions/emmet/yarn.lock

@@ -2052,18 +2052,22 @@ vinyl@~2.0.1:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
-vscode-emmet-helper@^1.1.32:
-  version "1.1.32"
-  resolved "https://registry.yarnpkg.com/vscode-emmet-helper/-/vscode-emmet-helper-1.1.32.tgz#5a67c6aa34255129d8b6564f5182f016a2b5b0da"
+vscode-emmet-helper@^1.1.36:
+  version "1.1.36"
+  resolved "https://registry.yarnpkg.com/vscode-emmet-helper/-/vscode-emmet-helper-1.1.36.tgz#537cbf91041a3d426f6f24dd9834550a26e61685"
   dependencies:
     "@emmetio/extract-abbreviation" "^0.1.4"
     jsonc-parser "^1.0.0"
-    vscode-languageserver-types "^3.5.0"
+    vscode-languageserver-types "^3.6.0-next.1"
 
 vscode-languageserver-types@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.5.0.tgz#e48d79962f0b8e02de955e3f524908e2b19c0374"
 
+vscode-languageserver-types@^3.6.0-next.1:
+  version "3.6.0-next.1"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.6.0-next.1.tgz#98e488d3f87b666b4ee1a3d89f0023e246d358f3"
+
 [email protected]:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-3.2.1.tgz#b1f3e04e8a94a715d5a7bcbc8339c51e6d74ca51"