(fix) don't trigger html completions inside moustache tags (#90)

Fixes #89

Author: dummdidumm

packages/language-server/src/plugins/html/HTMLPlugin.ts

@@ -14,7 +14,7 @@ export class HTMLPlugin implements OnRegister, HoverProvider, CompletionsProvide
 
     onRegister(docManager: DocumentManager, configManager: LSConfigManager) {
         this.configManager = configManager;
-        docManager.on('documentChange', document => {
+        docManager.on('documentChange', (document) => {
             const html = this.lang.parseHTMLDocument(document);
             this.documents.set(document, html);
         });
@@ -43,6 +43,10 @@ export class HTMLPlugin implements OnRegister, HoverProvider, CompletionsProvide
             return null;
         }
 
+        if (this.isInsideMoustacheTag(html, document, position)) {
+            return null;
+        }
+
         const emmetResults: CompletionList = {
             isIncomplete: true,
             items: [],
@@ -64,9 +68,20 @@ export class HTMLPlugin implements OnRegister, HoverProvider, CompletionsProvide
             return null;
         }
 
+        if (this.isInsideMoustacheTag(html, document, position)) {
+            return null;
+        }
+
         return this.lang.doTagComplete(document, position, html);
     }
 
+    private isInsideMoustacheTag(html: HTMLDocument, document: Document, position: Position) {
+        const offset = document.offsetAt(position);
+        const node = html.findNodeAt(offset);
+        const charactersInNode = document.getText().substring(node.start, offset);
+        return charactersInNode.lastIndexOf('{') > charactersInNode.lastIndexOf('}');
+    }
+
     getDocumentSymbols(document: Document): SymbolInformation[] {
         if (!this.featureEnabled('documentSymbols')) {
             return [];

packages/language-server/test/plugins/html/HTMLPlugin.test.ts

@@ -54,4 +54,42 @@ describe('HTML Plugin', () => {
             insertTextFormat: InsertTextFormat.PlainText,
         });
     });
+
+    it('does not provide completions inside of moustache tag', async () => {
+        const { plugin, document } = setup('<div on:click={() =>');
+
+        const completions = plugin.getCompletions(document, Position.create(0, 20));
+        assert.strictEqual(completions, null);
+
+        const tagCompletion = plugin.doTagComplete(document, Position.create(0, 20));
+        assert.strictEqual(tagCompletion, null);
+    });
+
+    it('does provide completions outside of moustache tag', async () => {
+        const { plugin, document } = setup('<div on:click={bla} >');
+
+        const completions = plugin.getCompletions(document, Position.create(0, 21));
+        assert.deepEqual(completions?.items[0], <CompletionItem>{
+            filterText: '</div>',
+            insertTextFormat: 2,
+            kind: 10,
+            label: '</div>',
+            textEdit: {
+                newText: '$0</div>',
+                range: {
+                    end: {
+                        character: 21,
+                        line: 0,
+                    },
+                    start: {
+                        character: 21,
+                        line: 0,
+                    },
+                },
+            },
+        });
+
+        const tagCompletion = plugin.doTagComplete(document, Position.create(0, 21));
+        assert.strictEqual(tagCompletion, '$0</div>');
+    });
 });