maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Emmet comment spacing fixup, fixes #112835

Browse source
This commit is contained in:
Raymond Zhao 2020-12-18 18:40:35 +00:00 committed by GitHub
parent a8cadd3912
commit 273a5cdf5a
2 changed files with 69 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
extensions/emmet/src/test/toggleComment.test.ts
View file

@ -58,13 +58,13 @@ suite('Tests for Toggle Comment action from Emmet (HTML)', () => {
<span/>
<style>
.boo {
/*margin: 10px;*/
/* margin: 10px; */
padding: 20px;
}
/*.hoo {
/* .hoo {
margin: 10px;
padding: 20px;
}*/
} */
</style>
</div>
`;
@ -100,13 +100,13 @@ suite('Tests for Toggle Comment action from Emmet (HTML)', () => {
<span/>
<style>
.boo {
/*margin: 10px;*/
/* margin: 10px; */
padding: 20px;
}
/*.hoo {
/* .hoo {
margin: 10px;
padding: 20px;
}*/
} */
</style>
</div>
`;
@ -141,8 +141,8 @@ suite('Tests for Toggle Comment action from Emmet (HTML)', () => {
<span/>
<style>
.boo {
/*margin: 10px;
padding: 20px;*/
/* margin: 10px;
padding: 20px; */
}
.hoo {
margin: 10px;
@ -298,13 +298,13 @@ suite('Tests for Toggle Comment action from Emmet (CSS)', () => {
test('toggle comment with multiple cursors, but no selection (CSS)', () => {
const expectedContents = `
.one {
/*margin: 10px;*/
/* margin: 10px; */
padding: 10px;
}
/*.two {
/* .two {
height: 42px;
display: none;
}*/
} */
.three {
width: 42px;
}`;
@ -327,13 +327,13 @@ suite('Tests for Toggle Comment action from Emmet (CSS)', () => {
test('toggle comment with multiple cursors and whole node selected (CSS)', () => {
const expectedContents = `
.one {
/*margin: 10px;*/
/*padding: 10px;*/
/* margin: 10px; */
/* padding: 10px; */
}
/*.two {
/* .two {
height: 42px;
display: none;
}*/
} */
.three {
width: 42px;
}`;
@ -359,16 +359,16 @@ suite('Tests for Toggle Comment action from Emmet (CSS)', () => {
test('toggle comment when multiple nodes of same parent are completely under single selection (CSS)', () => {
const expectedContents = `
.one {
/* margin: 10px;
padding: 10px;*/
/* margin: 10px;
padding: 10px; */
}
/*.two {
/* .two {
height: 42px;
display: none;
}
.three {
width: 42px;
}*/`;
} */`;
return withRandomFileEditor(contents, 'css', (editor, doc) => {
editor.selections = [
new Selection(2, 0, 3, 16), // 2 properties completely under a single selection along with whitespace
@ -389,10 +389,10 @@ suite('Tests for Toggle Comment action from Emmet (CSS)', () => {
const expectedContents = `
.one {
margin: 10px;
/*padding: 10px;
/* padding: 10px;
}
.two {
height: 42px;*/
height: 42px; */
display: none;
}
.three {
@ -417,10 +417,10 @@ suite('Tests for Toggle Comment action from Emmet (CSS)', () => {
const expectedContents = `
.one {
margin: 10px;
/*padding: 10px;
/* padding: 10px;
}
.two {
height: 42px;*/
height: 42px; */
display: none;
}
.three {
@ -445,10 +445,10 @@ suite('Tests for Toggle Comment action from Emmet (CSS)', () => {
const expectedContents = `
.one {
margin: 10px;
/*padding: 10px;
/* padding: 10px;
}
.two {
height: 42px;*/
height: 42px; */
display: none;
}
.three {
@ -473,10 +473,10 @@ suite('Tests for Toggle Comment action from Emmet (CSS)', () => {
const expectedContents = `
.one {
margin: 10px;
/*padding: 10px;
/* padding: 10px;
}
.two {
height: 42px;*/
height: 42px; */
display: none;
}
.three {
@ -500,16 +500,16 @@ suite('Tests for Toggle Comment action from Emmet (CSS)', () => {
test('toggle comment when multiple nodes of same parent are partially under single selection (CSS)', () => {
const expectedContents = `
.one {
/*margin: 10px;
padding: 10px;*/
/* margin: 10px;
padding: 10px; */
}
/*.two {
/* .two {
height: 42px;
display: none;
}
.three {
width: 42px;
*/ }`;
*/ }`;
return withRandomFileEditor(contents, 'css', (editor, doc) => {
editor.selections = [
new Selection(2, 7, 3, 10), // 2 properties partially under a single selection
@ -549,14 +549,14 @@ suite('Tests for Toggle Comment action from Emmet in nested css (SCSS)', () => {
test('toggle comment with multiple cursors selecting nested nodes (SCSS)', () => {
const expectedContents = `
.one {
/*height: 42px;*/
/* height: 42px; */
/*.two {
/* .two {
width: 42px;
}*/
} */
.three {
/*padding: 10px;*/
/* padding: 10px; */
}
}`;
return withRandomFileEditor(contents, 'css', (editor, doc) => {
@ -578,7 +578,7 @@ suite('Tests for Toggle Comment action from Emmet in nested css (SCSS)', () => {
});
test('toggle comment with multiple cursors selecting several nested nodes (SCSS)', () => {
const expectedContents = `
/*.one {
/* .one {
height: 42px;
.two {
@ -588,7 +588,7 @@ suite('Tests for Toggle Comment action from Emmet in nested css (SCSS)', () => {
.three {
padding: 10px;
}
}*/`;
} */`;
return withRandomFileEditor(contents, 'css', (editor, doc) => {
editor.selections = [
new Selection(1, 3, 1, 3), // cursor in the outside rule. And several cursors inside:
@ -611,14 +611,14 @@ suite('Tests for Toggle Comment action from Emmet in nested css (SCSS)', () => {
test('toggle comment with multiple cursors, but no selection (SCSS)', () => {
const expectedContents = `
.one {
/*height: 42px;*/
/* height: 42px; */
/*.two {
/* .two {
width: 42px;
}*/
} */
.three {
/*padding: 10px;*/
/* padding: 10px; */
}
}`;
return withRandomFileEditor(contents, 'css', (editor, doc) => {
@ -641,14 +641,14 @@ suite('Tests for Toggle Comment action from Emmet in nested css (SCSS)', () => {
test('toggle comment with multiple cursors and whole node selected (CSS)', () => {
const expectedContents = `
.one {
/*height: 42px;*/
/* height: 42px; */
/*.two {
/* .two {
width: 42px;
}*/
} */
.three {
/*padding: 10px;*/
/* padding: 10px; */
}
}`;
return withRandomFileEditor(contents, 'css', (editor, doc) => {
@ -673,11 +673,11 @@ suite('Tests for Toggle Comment action from Emmet in nested css (SCSS)', () => {
test('toggle comment when multiple nodes are completely under single selection (CSS)', () => {
const expectedContents = `
.one {
/*height: 42px;
/* height: 42px;
.two {
width: 42px;
}*/
} */
.three {
padding: 10px;
@ -701,11 +701,11 @@ suite('Tests for Toggle Comment action from Emmet in nested css (SCSS)', () => {
test('toggle comment when multiple nodes are partially under single selection (CSS)', () => {
const expectedContents = `
.one {
/*height: 42px;
/* height: 42px;
.two {
width: 42px;
*/ }
*/ }
.three {
padding: 10px;

25
extensions/emmet/src/toggleComment.ts
View file

@ -9,15 +9,17 @@ import { Node, Stylesheet, Rule } from 'EmmetNode';
import parseStylesheet from '@emmetio/css-parser';
import { DocumentStreamReader } from './bufferStream';
const startCommentStylesheet = '/*';
const endCommentStylesheet = '*/';
const startCommentHTML = '<!-- ';
const endCommentHTML = ' -->';
let startCommentStylesheet: string;
let endCommentStylesheet: string;
let startCommentHTML: string;
let endCommentHTML: string;
export function toggleComment(): Thenable<boolean> | undefined {
if (!validate() || !vscode.window.activeTextEditor) {
return;
}
setupCommentSpacing();
const editor = vscode.window.activeTextEditor;
let rootNode = parseDocument(editor.document);
if (!rootNode) {
@ -145,8 +147,21 @@ function toggleCommentStylesheet(selection: vscode.Selection, rootNode: Styleshe
new vscode.TextEdit(new vscode.Range(selection.start, selection.start), startCommentStylesheet),
new vscode.TextEdit(new vscode.Range(selection.end, selection.end), endCommentStylesheet)
];
}
function setupCommentSpacing() {
const config: boolean | undefined = vscode.workspace.getConfiguration('editor.comments').get('insertSpace');
if (config) {
startCommentStylesheet = '/* ';
endCommentStylesheet = ' */';
startCommentHTML = '<!-- ';
endCommentHTML = ' -->';
} else {
startCommentStylesheet = '/*';
endCommentStylesheet = '*/';
startCommentHTML = '<!--';
endCommentHTML = '-->';
}
}
function adjustStartNodeCss(node: Node | null, pos: vscode.Position, rootNode: Stylesheet): vscode.Position {