diff --git a/extensions/emmet/src/balance.ts b/extensions/emmet/src/balance.ts index 109a82b6150..5e323f29e22 100644 --- a/extensions/emmet/src/balance.ts +++ b/extensions/emmet/src/balance.ts @@ -5,7 +5,7 @@ import * as vscode from 'vscode'; import { HtmlNode } from 'EmmetNode'; -import { getNode, parseDocument, validate } from './util'; +import { getHtmlNode, parseDocument, validate } from './util'; let balanceOutStack: Array = []; let lastOut = false; @@ -61,7 +61,7 @@ function balance(out: boolean) { } function getRangeToBalanceOut(document: vscode.TextDocument, selection: vscode.Selection, rootNode: HtmlNode): vscode.Selection { - let nodeToBalance = getNode(rootNode, selection.start); + let nodeToBalance = getHtmlNode(document, rootNode, selection.start); if (!nodeToBalance) { return selection; } @@ -82,7 +82,7 @@ function getRangeToBalanceOut(document: vscode.TextDocument, selection: vscode.S } function getRangeToBalanceIn(document: vscode.TextDocument, selection: vscode.Selection, rootNode: HtmlNode): vscode.Selection { - let nodeToBalance = getNode(rootNode, selection.start, true); + let nodeToBalance = getHtmlNode(document, rootNode, selection.start, true); if (!nodeToBalance) { return selection; } diff --git a/extensions/emmet/src/removeTag.ts b/extensions/emmet/src/removeTag.ts index f30be3361b9..0ea6e4dde96 100644 --- a/extensions/emmet/src/removeTag.ts +++ b/extensions/emmet/src/removeTag.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as vscode from 'vscode'; -import { parseDocument, validate, getNode } from './util'; +import { parseDocument, validate, getHtmlNode } from './util'; import { HtmlNode } from 'EmmetNode'; export function removeTag() { @@ -38,7 +38,7 @@ export function removeTag() { function getRangeToRemove(editor: vscode.TextEditor, rootNode: HtmlNode, selection: vscode.Selection, indentInSpaces: string): vscode.Range[] { - let nodeToUpdate = getNode(rootNode, selection.start); + let nodeToUpdate = getHtmlNode(editor.document, rootNode, selection.start); if (!nodeToUpdate) { return []; } diff --git a/extensions/emmet/src/selectItemHTML.ts b/extensions/emmet/src/selectItemHTML.ts index d2c32c43d78..d5dbbf33d05 100644 --- a/extensions/emmet/src/selectItemHTML.ts +++ b/extensions/emmet/src/selectItemHTML.ts @@ -4,11 +4,11 @@ *--------------------------------------------------------------------------------------------*/ import * as vscode from 'vscode'; -import { getDeepestNode, findNextWord, findPrevWord, getNode } from './util'; +import { getDeepestNode, findNextWord, findPrevWord, getHtmlNode } from './util'; import { HtmlNode } from 'EmmetNode'; export function nextItemHTML(selectionStart: vscode.Position, selectionEnd: vscode.Position, editor: vscode.TextEditor, rootNode: HtmlNode): vscode.Selection | undefined { - let currentNode = getNode(rootNode, selectionEnd); + let currentNode = getHtmlNode(editor.document, rootNode, selectionEnd); let nextNode: HtmlNode | undefined = undefined; if (!currentNode) { @@ -54,7 +54,7 @@ export function nextItemHTML(selectionStart: vscode.Position, selectionEnd: vsco } export function prevItemHTML(selectionStart: vscode.Position, selectionEnd: vscode.Position, editor: vscode.TextEditor, rootNode: HtmlNode): vscode.Selection | undefined { - let currentNode = getNode(rootNode, selectionStart); + let currentNode = getHtmlNode(editor.document, rootNode, selectionStart); let prevNode: HtmlNode | undefined = undefined; if (!currentNode) { diff --git a/extensions/emmet/src/splitJoinTag.ts b/extensions/emmet/src/splitJoinTag.ts index 38d2b163c01..c437d5d14f3 100644 --- a/extensions/emmet/src/splitJoinTag.ts +++ b/extensions/emmet/src/splitJoinTag.ts @@ -5,7 +5,7 @@ import * as vscode from 'vscode'; import { HtmlNode } from 'EmmetNode'; -import { getNode, parseDocument, validate, getEmmetMode, getEmmetConfiguration } from './util'; +import { getHtmlNode, parseDocument, validate, getEmmetMode, getEmmetConfiguration } from './util'; export function splitJoinTag() { if (!validate(false) || !vscode.window.activeTextEditor) { @@ -20,7 +20,7 @@ export function splitJoinTag() { return editor.edit(editBuilder => { editor.selections.reverse().forEach(selection => { - let nodeToUpdate = getNode(rootNode, selection.start); + let nodeToUpdate = getHtmlNode(editor.document, rootNode, selection.start); if (nodeToUpdate) { let textEdit = getRangesToReplace(editor.document, nodeToUpdate); editBuilder.replace(textEdit.range, textEdit.newText); diff --git a/extensions/emmet/src/test/editPointSelectItemBalance.test.ts b/extensions/emmet/src/test/editPointSelectItemBalance.test.ts index 61fe36ea4ee..a9f25685b91 100644 --- a/extensions/emmet/src/test/editPointSelectItemBalance.test.ts +++ b/extensions/emmet/src/test/editPointSelectItemBalance.test.ts @@ -19,7 +19,7 @@ suite('Tests for Next/Previous Select/Edit point and Balance actions', () => { margin: 20px 10px; background-image: url('tryme.png'); } - + .boo .hoo { margin: 10px; } @@ -46,7 +46,7 @@ suite('Tests for Next/Previous Select/Edit point and Balance actions', () => {
- +\t\t
    @@ -113,6 +113,43 @@ suite('Tests for Next/Previous Select/Edit point and Balance actions', () => { }); }); + test('Emmet Next/Prev Item in html template', function (): any { + const templateContents = ` + +`; + return withRandomFileEditor(templateContents, '.html', (editor, doc) => { + editor.selections = [new Selection(2, 2, 2, 2)]; + + let expectedNextItemPoints: [number, number, number][] = [ + [2, 2, 5], // div + [2, 6, 20], // class="header" + [2, 13, 19], // header + [3, 3, 5], // ul + [3, 6, 22], // class="nav main" + [3, 13, 21], // nav main + [3, 13, 16], // nav + [3, 17, 21], // main + ]; + expectedNextItemPoints.forEach(([line, colstart, colend]) => { + fetchSelectItem('next'); + testSelection(editor.selection, colstart, line, colend); + }); + + editor.selections = [new Selection(4, 1, 4, 1)]; + expectedNextItemPoints.reverse().forEach(([line, colstart, colend]) => { + fetchSelectItem('prev'); + testSelection(editor.selection, colstart, line, colend); + }); + + return Promise.resolve(); + }); + }); + test('Emmet Select Next/Prev Item in css file', function (): any { return withRandomFileEditor(cssContents, '.css', (editor, doc) => { editor.selections = [new Selection(0, 0, 0, 0)]; @@ -240,6 +277,42 @@ suite('Tests for Next/Previous Select/Edit point and Balance actions', () => { }); }); + test('Emmet Balance In/Out in html template', function (): any { + const htmlTemplate = ` +`; + + return withRandomFileEditor(htmlTemplate, 'html', (editor, doc) => { + + editor.selections = [new Selection(5, 24, 5, 24)]; + let expectedBalanceOutRanges: [number, number, number, number][] = [ + [5, 20, 5, 26], //
  • ``Item 2''
    • + [5, 2, 5, 31], // ``
  • Item 2
    • '' + [3, 22, 6, 1], // inner contents of ul + [3, 1, 6, 6], // outer contents of ul + [2, 20, 7, 0], // inner contents of div + [2, 0, 7, 6], // outer contents of div + ]; + expectedBalanceOutRanges.forEach(([linestart, colstart, lineend, colend]) => { + balanceOut(); + testSelection(editor.selection, colstart, linestart, colend, lineend); + }); + + expectedBalanceOutRanges.pop(); + expectedBalanceOutRanges.reverse().forEach(([linestart, colstart, lineend, colend]) => { + balanceIn(); + testSelection(editor.selection, colstart, linestart, colend, lineend); + }); + + return Promise.resolve(); + }); + }); }); function testSelection(selection: Selection, startChar: number, startline: number, endChar?: number, endLine?: number) { diff --git a/extensions/emmet/src/test/tagActions.test.ts b/extensions/emmet/src/test/tagActions.test.ts index 554b376acb8..6c60eaae2a9 100644 --- a/extensions/emmet/src/test/tagActions.test.ts +++ b/extensions/emmet/src/test/tagActions.test.ts @@ -30,6 +30,17 @@ suite('Tests for Emmet actions on html tags', () => {
`; + let contentsWithTemplate = ` + + `; + test('update tag with multiple cursors', () => { const expectedContents = `
@@ -55,6 +66,30 @@ suite('Tests for Emmet actions on html tags', () => { }); }); + test('update tag with template', () => { + const expectedContents = ` + + `; + + return withRandomFileEditor(contentsWithTemplate, 'html', (editor, doc) => { + editor.selections = [ + new Selection(2, 4, 2, 4), // cursor inside ul tag + ]; + + return updateTag('section')!.then(() => { + assert.equal(doc.getText(), expectedContents); + return Promise.resolve(); + }); + }); + }); + test('remove tag with mutliple cursors', () => { const expectedContents = ` @@ -81,6 +116,30 @@ suite('Tests for Emmet actions on html tags', () => { }); }); + + test('remove tag with template', () => { + const expectedContents = ` + + `; + return withRandomFileEditor(contentsWithTemplate, 'html', (editor, doc) => { + editor.selections = [ + new Selection(2, 4, 2, 4), // cursor inside ul tag + ]; + + return removeTag()!.then(() => { + assert.equal(doc.getText(), expectedContents); + return Promise.resolve(); + }); + }); + }); + test('split/join tag with mutliple cursors', () => { const expectedContents = `
@@ -105,6 +164,30 @@ suite('Tests for Emmet actions on html tags', () => { }); }); + test('split/join tag with templates', () => { + const expectedContents = ` + + `; + return withRandomFileEditor(contentsWithTemplate, 'html', (editor, doc) => { + editor.selections = [ + new Selection(3, 17, 3, 17), // join tag + new Selection(7, 5, 7, 5), // split tag + ]; + + return splitJoinTag()!.then(() => { + assert.equal(doc.getText(), expectedContents); + return Promise.resolve(); + }); + }); + }); + test('split/join tag in jsx with xhtml self closing tag', () => { const expectedContents = `
diff --git a/extensions/emmet/src/test/toggleComment.test.ts b/extensions/emmet/src/test/toggleComment.test.ts index 8bf3a42a1db..a8994f49746 100644 --- a/extensions/emmet/src/test/toggleComment.test.ts +++ b/extensions/emmet/src/test/toggleComment.test.ts @@ -247,6 +247,36 @@ suite('Tests for Toggle Comment action from Emmet (HTML)', () => { }); }); }); + + test('toggle comment within script template', () => { + const templateContents = ` + + `; + const expectedContents = ` + + `; + return withRandomFileEditor(templateContents, 'html', (editor, doc) => { + editor.selections = [ + new Selection(2, 2, 2, 28), // select entire li element + new Selection(3, 17, 3, 17), // cursor inside the commented span + new Selection(4, 18, 4, 18), // cursor inside the noncommented span + ]; + return toggleComment().then(() => { + assert.equal(doc.getText(), expectedContents); + return Promise.resolve(); + }); + }); + }); }); suite('Tests for Toggle Comment action from Emmet (CSS)', () => { @@ -541,7 +571,7 @@ suite('Tests for Toggle Comment action from Emmet in nested css (SCSS)', () => { assert.equal(doc.getText(), expectedContents); return toggleComment().then(() => { assert.equal(doc.getText(), contents); - return Promise.resolve(); + return Promise.resolve(); }); }); }); diff --git a/extensions/emmet/src/toggleComment.ts b/extensions/emmet/src/toggleComment.ts index dc756f5b990..e6d66d9acfe 100644 --- a/extensions/emmet/src/toggleComment.ts +++ b/extensions/emmet/src/toggleComment.ts @@ -4,8 +4,8 @@ *--------------------------------------------------------------------------------------------*/ import * as vscode from 'vscode'; -import { getNodesInBetween, getNode, parseDocument, sameNodes, isStyleSheet, validate } from './util'; -import { Node, Stylesheet, Rule, HtmlNode } from 'EmmetNode'; +import { getNodesInBetween, getNode, getHtmlNode, parseDocument, sameNodes, isStyleSheet, validate } from './util'; +import { Node, Stylesheet, Rule } from 'EmmetNode'; import parseStylesheet from '@emmetio/css-parser'; import { DocumentStreamReader } from './bufferStream'; @@ -63,8 +63,8 @@ function toggleCommentHTML(document: vscode.TextDocument, selection: vscode.Sele const selectionStart = selection.isReversed ? selection.active : selection.anchor; const selectionEnd = selection.isReversed ? selection.anchor : selection.active; - let startNode = getNode(rootNode, selectionStart, true); - let endNode = getNode(rootNode, selectionEnd, true); + let startNode = getHtmlNode(document, rootNode, selectionStart, true); + let endNode = getHtmlNode(document, rootNode, selectionEnd, true); if (!startNode || !endNode) { return []; diff --git a/extensions/emmet/src/updateTag.ts b/extensions/emmet/src/updateTag.ts index b62f167d70a..f260d3f1082 100644 --- a/extensions/emmet/src/updateTag.ts +++ b/extensions/emmet/src/updateTag.ts @@ -5,7 +5,7 @@ import * as vscode from 'vscode'; import { HtmlNode } from 'EmmetNode'; -import { getNode, parseDocument, validate } from './util'; +import { getHtmlNode, parseDocument, validate } from './util'; export function updateTag(tagName: string): Thenable | undefined { if (!validate(false) || !vscode.window.activeTextEditor) { @@ -30,7 +30,7 @@ export function updateTag(tagName: string): Thenable | undefined { } function getRangesToUpdate(editor: vscode.TextEditor, selection: vscode.Selection, rootNode: HtmlNode): vscode.Range[] { - let nodeToUpdate = getNode(rootNode, selection.start); + let nodeToUpdate = getHtmlNode(editor.document, rootNode, selection.start); if (!nodeToUpdate) { return []; } diff --git a/extensions/emmet/src/util.ts b/extensions/emmet/src/util.ts index 93b8ecb9068..a8165ff2518 100644 --- a/extensions/emmet/src/util.ts +++ b/extensions/emmet/src/util.ts @@ -311,7 +311,7 @@ export function getNode(root: Node | undefined, position: vscode.Position, inclu } export function getHtmlNode(document: vscode.TextDocument, root: Node | undefined, position: vscode.Position, includeNodeBoundary: boolean = false): HtmlNode | undefined { - let currentNode = getNode(root, position, true); + let currentNode = getNode(root, position, includeNodeBoundary); if (!currentNode) { return; } if (isTemplateScript(currentNode) && currentNode.close && @@ -321,7 +321,7 @@ export function getHtmlNode(document: vscode.TextDocument, root: Node | undefine try { let scriptInnerNodes = parse(buffer); - currentNode = getNode(scriptInnerNodes, position, true) || currentNode; + currentNode = getNode(scriptInnerNodes, position, includeNodeBoundary) || currentNode; } catch (e) { } }