Emmet - Wrap with abbreviation with live preview #45092
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -24,6 +24,12 @@ interface ExpandAbbreviationInput { | |
| filter?: string; | ||
| } | ||
|
|
||
| interface RangesAndContent { | ||
| currentRange: vscode.Range; | ||
| originalRange: vscode.Range; | ||
| content: string; | ||
| } | ||
|
|
||
| export function wrapWithAbbreviation(args: any) { | ||
| if (!validate(false) || !vscode.window.activeTextEditor) { | ||
| return; | ||
|
|
@@ -37,45 +43,166 @@ export function wrapWithAbbreviation(args: any) { | |
| return; | ||
| } | ||
|
|
||
| let previewMade = false; | ||
|
|
||
| // Fetch general information for the succesive expansions. i.e. the ranges to replace and its contents | ||
| let expandAbbrList: ExpandAbbreviationInput[] = []; | ||
| let rangesToReplace: RangesAndContent[] = []; | ||
|
|
||
| editor.selections.sort((a: vscode.Selection, b: vscode.Selection) => { return a.start.line - b.start.line; }).forEach(selection => { | ||
| let rangeToReplace: vscode.Range = selection.isReversed ? new vscode.Range(selection.active, selection.anchor) : selection; | ||
| if (rangeToReplace.isEmpty) { | ||
| let { active } = selection; | ||
| let currentNode = getNode(rootNode, active, true); | ||
| if (currentNode && (currentNode.start.line === active.line || currentNode.end.line === active.line)) { | ||
| rangeToReplace = new vscode.Range(currentNode.start, currentNode.end); | ||
| } else { | ||
| rangeToReplace = new vscode.Range(rangeToReplace.start.line, 0, rangeToReplace.start.line, editor.document.lineAt(rangeToReplace.start.line).text.length); | ||
| } | ||
| } | ||
|
|
||
| const firstLineOfSelection = editor.document.lineAt(rangeToReplace.start).text.substr(rangeToReplace.start.character); | ||
| const matches = firstLineOfSelection.match(/^(\s*)/); | ||
| const preceedingWhiteSpace = matches ? matches[1].length : 0; | ||
|
|
||
| rangeToReplace = new vscode.Range(rangeToReplace.start.line, rangeToReplace.start.character + preceedingWhiteSpace, rangeToReplace.end.line, rangeToReplace.end.character); | ||
| let textToReplace = editor.document.getText(rangeToReplace); | ||
| rangesToReplace.push({ currentRange: rangeToReplace, originalRange: rangeToReplace, content: textToReplace }); | ||
| }); | ||
|
|
||
| let abbreviationPromise; | ||
| let currentValue = ''; | ||
|
|
||
| function inputChanged(value: string): string { | ||
| if (value !== currentValue) { | ||
| currentValue = value; | ||
| makeChanges(value, previewMade, false).then((out) => { | ||
|
There was a problem hiding this comment. What if |
||
| if (typeof out === 'boolean') { | ||
| previewMade = out; | ||
| } | ||
| }); | ||
| } | ||
| return ''; | ||
| } | ||
|
|
||
| abbreviationPromise = (args && args['abbreviation']) ? Promise.resolve(args['abbreviation']) : vscode.window.showInputBox({ prompt: 'Enter Abbreviation', validateInput: inputChanged }); | ||
| const helper = getEmmetHelper(); | ||
|
|
||
| function makeChanges(inputAbbreviation: string | undefined, previewMade?: boolean, definitive?: boolean): Thenable<any> { | ||
| if (!inputAbbreviation || !inputAbbreviation.trim() || !helper.isAbbreviationValid(syntax, inputAbbreviation)) { | ||
| let returnPromise: Thenable<any> = Promise.resolve(); | ||
|
There was a problem hiding this comment. You can condense these 5 lines to |
||
| if (previewMade) { | ||
| returnPromise = revertPreview(editor, rangesToReplace).then(() => { return false; }); | ||
| } | ||
| return returnPromise; | ||
| } | ||
|
|
||
| let extractedResults = helper.extractAbbreviationFromText(inputAbbreviation); | ||
|
There was a problem hiding this comment. This might be an exisitng bug... but shouldnt we check for the validity of the abbreviation after it is extracted instead of before? I would suggest to move the extraction to be the first thing that we do in |
||
| if (!extractedResults) { | ||
| return Promise.resolve(previewMade); | ||
| } | ||
| let { abbreviation, filter } = extractedResults; | ||
|
|
||
| expandAbbrList = []; | ||
|
|
||
| // we need to apply the previewchanges and get the new ranges | ||
| let revertPromise: Thenable<any> = Promise.resolve(); | ||
| if (definitive) { | ||
| if (previewMade) { | ||
| revertPromise = revertPreview(editor, rangesToReplace); | ||
| } | ||
| rangesToReplace.forEach(rangesAndContent => { | ||
|
There was a problem hiding this comment. The |
||
| let rangeToReplace = rangesAndContent.originalRange; | ||
| let textToWrap = rangeToReplace.isSingleLine ? ['$TM_SELECTED_TEXT'] : ['\n\t$TM_SELECTED_TEXT\n']; | ||
| expandAbbrList.push({ syntax: syntax || '', abbreviation, rangeToReplace, textToWrap, filter }); | ||
|
There was a problem hiding this comment. why would |
||
| }); | ||
| return revertPromise.then(() => { | ||
| return expandAbbreviationInRange(editor, expandAbbrList, true).then(() => { return Promise.resolve(); }); | ||
| }); | ||
| } else { | ||
| rangesToReplace.forEach(rangesAndContent => { | ||
| let match = rangesAndContent.content.match(/\n[\s]*/g); | ||
| let textToWrap = match ? ['\n\t' + rangesAndContent.content.split(match[match.length - 1]).join('\n\t') + '\n'] : [rangesAndContent.content]; | ||
| expandAbbrList.push({ syntax: syntax || '', abbreviation, rangeToReplace: rangesAndContent.originalRange, textToWrap, filter }); | ||
| }); | ||
| } | ||
|
|
||
| return Promise.resolve().then(() => { | ||
| return applyPreview(editor, expandAbbrList, rangesToReplace).then(ranges => { | ||
|
There was a problem hiding this comment. Why return the ranges here from |
||
| for (let i = 0; i < ranges.length; i++) { | ||
| rangesToReplace[i].currentRange = ranges[i]; | ||
| } | ||
| previewMade = true; | ||
| return previewMade; | ||
| }); | ||
| }); | ||
|
|
||
| } | ||
|
|
||
| // On inputBox closing | ||
| return abbreviationPromise.then(inputAbbreviation => { | ||
|
There was a problem hiding this comment. The tests are currently failing as the promise returned by Since |
||
| if (typeof inputAbbreviation === 'string') { | ||
| // If succeeded (user pressed enter), remove the previews and add the final snippet | ||
| makeChanges(inputAbbreviation, previewMade, true); | ||
| } else { | ||
| // If not (user pressed esc or changed focus), remove the previews. | ||
| Promise.resolve().then(() => { | ||
| let revertPromise: Thenable<any> = Promise.resolve(); | ||
| if (previewMade) { | ||
| revertPromise = revertPreview(editor, rangesToReplace); | ||
| } | ||
| return revertPromise; | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| function revertPreview(editor: vscode.TextEditor, rangesToReplace: RangesAndContent[]): Thenable<any> { | ||
| return editor.edit(builder => { | ||
| for (let i = 0; i < rangesToReplace.length; i++) { | ||
| builder.replace(rangesToReplace[i].currentRange, rangesToReplace[i].content); | ||
| rangesToReplace[i].currentRange = rangesToReplace[i].originalRange; | ||
| } | ||
| }, { undoStopBefore: false, undoStopAfter: false }); | ||
| } | ||
|
|
||
| function applyPreview(editor: vscode.TextEditor, expandAbbrList: ExpandAbbreviationInput[], rangesToReplace: RangesAndContent[]): Thenable<vscode.Range[]> { | ||
| const anyExpandAbbrInput = expandAbbrList[0]; | ||
| let expandedText = expandAbbr(anyExpandAbbrInput); | ||
| let rangesObtained: vscode.Range[] = []; | ||
| let linesInserted = 0; | ||
|
|
||
| if (expandedText) { | ||
| return editor.edit(builder => { | ||
| for (let i = 0; i < rangesToReplace.length; i++) { | ||
| if (i) { | ||
| expandedText = expandAbbr(expandAbbrList[i]); | ||
| } | ||
| let thisRange = rangesToReplace[i].currentRange; | ||
| let indentPrefix = ''; | ||
| let preceedingText = editor.document.getText(new vscode.Range(new vscode.Position(thisRange.start.line, 0), thisRange.start)); | ||
| // If there is only whitespace before the text to wrap, take that as prefix. If not, take as much whitespace as there is before text appears. | ||
| if (!preceedingText.match(/[^\s]/)) { | ||
|
There was a problem hiding this comment. Instead of this if/else, why not follow the same logic as |
||
| indentPrefix = preceedingText; | ||
| } else { | ||
| indentPrefix = (preceedingText.match(/(^[\s]*)/) || ['', ''])[1]; | ||
| } | ||
|
|
||
| let newText = expandedText || ''; | ||
|
There was a problem hiding this comment. Why would we continue if |
||
| newText = newText.replace(/\n/g, '\n' + indentPrefix).replace(/\$\{[\d]*\}/g, '|'); | ||
|
There was a problem hiding this comment. This will not replace placeholders. Try wrapping with |
||
| let newTextLines = (newText.match(/\n/g) || []).length + 1; | ||
| let currentTextLines = thisRange.end.line - thisRange.start.line + 1; | ||
| builder.replace(thisRange, newText); | ||
| rangesObtained.push(new vscode.Range(thisRange.start.line + linesInserted, thisRange.start.character, thisRange.start.line + linesInserted + newTextLines - 1, 1000)); // TODO: fix 1000! Count characters in the resulting text? | ||
| linesInserted += newTextLines - currentTextLines; | ||
| } | ||
| }, { undoStopBefore: false, undoStopAfter: false }).then(() => { | ||
| return rangesObtained; | ||
| }); | ||
| } | ||
| return Promise.resolve([]); | ||
| } | ||
|
|
||
| export function wrapIndividualLinesWithAbbreviation(args: any) { | ||
| if (!validate(false) || !vscode.window.activeTextEditor) { | ||
| return; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
currentRangehere will only have the preview ranges correct? If so, let's rename it topreviewRangeto make it more readable.Also rename
contenttooriginalContentto match with theoriginalRangeandRangesAndContenttoPreviewRangesWithContentThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure