1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
import { CompletionsProvider, FoldingRangeProvider } from '../interfaces';
import { getEmmetCompletionParticipants, VSCodeEmmetConfig } from 'vscode-emmet-helper';
import { getLanguageService, HTMLDocument, CompletionItem as HtmlCompletionItem, Node, FoldingRange } from 'vscode-html-languageservice';
import { CompletionList, Position, CompletionItem, CompletionItemKind, TextEdit } from 'vscode-languageserver';
import type { Document, DocumentManager } from '../../core/documents';
import { isInsideExpression, isInsideFrontmatter } from '../../core/documents/utils';
import type { ConfigManager } from '../../core/config';
export class HTMLPlugin implements CompletionsProvider, FoldingRangeProvider {
private lang = getLanguageService();
private documents = new WeakMap<Document, HTMLDocument>();
private styleScriptTemplate = new Set(['template', 'style', 'script']);
private configManager: ConfigManager;
constructor(docManager: DocumentManager, configManager: ConfigManager) {
docManager.on('documentChange', (document) => {
this.documents.set(document, document.html);
});
this.configManager = configManager;
}
getCompletions(document: Document, position: Position): CompletionList | null {
const html = this.documents.get(document);
if (!html) {
return null;
}
if (this.isInsideFrontmatter(document, position) || this.isInsideExpression(html, document, position)) {
return null;
}
const emmetResults: CompletionList = {
isIncomplete: true,
items: [],
};
this.lang.setCompletionParticipants([getEmmetCompletionParticipants(document, position, 'html', this.configManager.getEmmetConfig(), emmetResults)]);
const results = this.lang.doComplete(document, position, html);
const items = this.toCompletionItems(results.items);
return CompletionList.create(
[...this.toCompletionItems(items), ...this.getLangCompletions(items), ...emmetResults.items],
// Emmet completions change on every keystroke, so they are never complete
emmetResults.items.length > 0
);
}
getFoldingRanges(document: Document): FoldingRange[] | null {
const html = this.documents.get(document);
if (!html) {
return null;
}
return this.lang.getFoldingRanges(document);
}
doTagComplete(document: Document, position: Position): string | null {
const html = this.documents.get(document);
if (!html) {
return null;
}
if (this.isInsideFrontmatter(document, position) || this.isInsideExpression(html, document, position)) {
return null;
}
return this.lang.doTagComplete(document, position, html);
}
/**
* The HTML language service uses newer types which clash
* without the stable ones. Transform to the stable types.
*/
private toCompletionItems(items: HtmlCompletionItem[]): CompletionItem[] {
return items.map((item) => {
if (!item.textEdit || TextEdit.is(item.textEdit)) {
return item as CompletionItem;
}
return {
...item,
textEdit: TextEdit.replace(item.textEdit.replace, item.textEdit.newText),
};
});
}
private getLangCompletions(completions: CompletionItem[]): CompletionItem[] {
const styleScriptTemplateCompletions = completions.filter((completion) => completion.kind === CompletionItemKind.Property && this.styleScriptTemplate.has(completion.label));
const langCompletions: CompletionItem[] = [];
addLangCompletion('style', ['scss', 'sass']);
return langCompletions;
/** Add language completions */
function addLangCompletion(tag: string, languages: string[]) {
const existingCompletion = styleScriptTemplateCompletions.find((completion) => completion.label === tag);
if (!existingCompletion) {
return;
}
languages.forEach((lang) =>
langCompletions.push({
...existingCompletion,
label: `${tag} (lang="${lang}")`,
insertText: existingCompletion.insertText && `${existingCompletion.insertText} lang="${lang}"`,
textEdit:
existingCompletion.textEdit && TextEdit.is(existingCompletion.textEdit)
? {
range: existingCompletion.textEdit.range,
newText: `${existingCompletion.textEdit.newText} lang="${lang}"`,
}
: undefined,
})
);
}
}
private isInsideExpression(html: HTMLDocument, document: Document, position: Position) {
const offset = document.offsetAt(position);
const node = html.findNodeAt(offset);
return isInsideExpression(document.getText(), node.start, offset);
}
private isInsideFrontmatter(document: Document, position: Position) {
return isInsideFrontmatter(document.getText(), document.offsetAt(position));
}
}
|
