From e730f7e91f4c448c71792515ae3eb1a5c7453dac Mon Sep 17 00:00:00 2001
From: Lyu Jason <b00605009@ntu.edu.tw>
Date: Sat, 4 Sep 2021 12:30:54 +0800
Subject: [PATCH 1/5] completion

---
 .../src/plugins/html/HTMLPlugin.ts            | 11 ++++
 .../src/plugins/svelte/SveltePlugin.ts        |  2 +-
 .../plugins/svelte/features/getCompletions.ts | 59 ++++++++++++++++---
 .../svelte/features/getModifierData.ts        | 58 ++++++++++++++++++
 packages/language-server/src/server.ts        |  3 +-
 .../svelte/features/getCompletions.test.ts    | 10 ++--
 6 files changed, 128 insertions(+), 15 deletions(-)
 create mode 100644 packages/language-server/src/plugins/svelte/features/getModifierData.ts

diff --git a/packages/language-server/src/plugins/html/HTMLPlugin.ts b/packages/language-server/src/plugins/html/HTMLPlugin.ts
index 18e6a009e..a493d81cc 100644
--- a/packages/language-server/src/plugins/html/HTMLPlugin.ts
+++ b/packages/language-server/src/plugins/html/HTMLPlugin.ts
@@ -102,12 +102,23 @@ export class HTMLPlugin
                 )
             ]);
         }
+
         const results = this.isInComponentTag(html, document, position)
             ? // Only allow emmet inside component element tags.
               // Other attributes/events would be false positives.
               CompletionList.create([])
             : this.lang.doComplete(document, position, html);
         const items = this.toCompletionItems(results.items);
+
+        items.forEach((item) => {
+            if (item.label.startsWith('on:') && item.textEdit) {
+                item.textEdit = {
+                    ...item.textEdit,
+                    newText: item.textEdit.newText.replace('="$1"', '$2="$1"')
+                };
+            }
+        });
+
         return CompletionList.create(
             [
                 ...this.toCompletionItems(items),
diff --git a/packages/language-server/src/plugins/svelte/SveltePlugin.ts b/packages/language-server/src/plugins/svelte/SveltePlugin.ts
index 34901f141..29335979b 100644
--- a/packages/language-server/src/plugins/svelte/SveltePlugin.ts
+++ b/packages/language-server/src/plugins/svelte/SveltePlugin.ts
@@ -160,7 +160,7 @@ export class SveltePlugin
             return null;
         }
 
-        return getCompletions(svelteDoc, position);
+        return getCompletions(document, svelteDoc, position);
     }
 
     async doHover(document: Document, position: Position): Promise<Hover | null> {
diff --git a/packages/language-server/src/plugins/svelte/features/getCompletions.ts b/packages/language-server/src/plugins/svelte/features/getCompletions.ts
index 8b16a17b2..1427e595d 100644
--- a/packages/language-server/src/plugins/svelte/features/getCompletions.ts
+++ b/packages/language-server/src/plugins/svelte/features/getCompletions.ts
@@ -5,10 +5,13 @@ import {
     CompletionList,
     CompletionItemKind,
     CompletionItem,
-    InsertTextFormat
+    InsertTextFormat,
+    MarkupKind
 } from 'vscode-languageserver';
 import { SvelteTag, documentation, getLatestOpeningTag } from './SvelteTags';
-import { isInTag } from '../../../lib/documents';
+import { isInTag, Document } from '../../../lib/documents';
+import { AttributeContext, getAttributeContextAtPosition } from '../../../lib/documents/parseHtml';
+import { getModifierData } from './getModifierData';
 
 const HTML_COMMENT_START = '<!--';
 
@@ -26,6 +29,7 @@ const componentDocumentationCompletion: CompletionItem = {
 };
 
 export function getCompletions(
+    document: Document,
     svelteDoc: SvelteDocument,
     position: Position
 ): CompletionList | null {
@@ -39,18 +43,22 @@ export function getCompletions(
         .getText()
         // use last 10 characters, should cover 99% of all cases
         .substr(Math.max(offset - 10, 0), Math.min(offset, 10));
-    const notPreceededByOpeningBracket = !/[\s\S]*{\s*[#:/@]\w*$/.test(
-        lastCharactersBeforePosition
-    );
+    const precededByOpeningBracket = /[\s\S]*{\s*[#:/@]\w*$/.test(lastCharactersBeforePosition);
     if (isInStyleOrScript) {
         return null;
     }
 
-    if (notPreceededByOpeningBracket) {
-        return getComponentDocumentationCompletions();
+    if (precededByOpeningBracket) {
+        return getTagCompletionsWithinMoustache();
+    }
+
+    const attributeContext = getAttributeContextAtPosition(document, position);
+
+    if (attributeContext) {
+        return getEventModifierCompletion(attributeContext);
     }
 
-    return getTagCompletionsWithinMoustache();
+    return getComponentDocumentationCompletions();
 
     /**
      * Get completions for special svelte tags within moustache tags.
@@ -78,6 +86,39 @@ export function getCompletions(
     }
 }
 
+function getEventModifierCompletion(attributeContext: AttributeContext): CompletionList | null {
+    const modifiers = getModifierData();
+
+    if (
+        !attributeContext ||
+        attributeContext.inValue ||
+        !attributeContext.name.startsWith('on:') ||
+        !attributeContext.name.includes('|')
+    ) {
+        return null;
+    }
+
+    const items = modifiers
+        .filter(
+            (modifier) =>
+                !attributeContext.name.includes('|' + modifier.modifier) &&
+                !modifier.modifiersInvalidWith?.some((invalidWith) =>
+                    attributeContext.name.includes(invalidWith)
+                )
+        )
+        .map(
+            (m): CompletionItem => ({
+                label: m.modifier,
+                documentation: {
+                    kind: MarkupKind.Markdown,
+                    value: m.documentation
+                }
+            })
+        );
+
+    return CompletionList.create(items);
+}
+
 /**
  * Get completions with regard to trigger character.
  */
@@ -207,7 +248,7 @@ function createCompletionItems(
                     kind: CompletionItemKind.Keyword,
                     preselect: true,
                     documentation: {
-                        kind: 'markdown',
+                        kind: MarkupKind.Markdown,
                         value: documentation[item.tag]
                     }
                 }
diff --git a/packages/language-server/src/plugins/svelte/features/getModifierData.ts b/packages/language-server/src/plugins/svelte/features/getModifierData.ts
new file mode 100644
index 000000000..94b15b674
--- /dev/null
+++ b/packages/language-server/src/plugins/svelte/features/getModifierData.ts
@@ -0,0 +1,58 @@
+export interface ModifierData {
+    modifier: string;
+    documentation: string;
+    modifiersInvalidWith?: string[];
+}
+
+export function getModifierData(): ModifierData[] {
+    return [
+        {
+            modifier: 'preventDefault',
+            documentation: 'calls `event.preventDefault()` before running the handler',
+            modifiersInvalidWith: ['passive']
+        },
+        {
+            modifier: 'stopPropagation',
+            documentation:
+                'calls `event.stopPropagation()`, preventing the event reaching the next element'
+        },
+        {
+            modifier: 'passive',
+            documentation:
+                'improves scrolling performance on touch/wheel events ' +
+                "(Svelte will add it automatically where it's safe to do so)",
+            modifiersInvalidWith: ['nopassive', 'preventDefault']
+        },
+        {
+            modifier: 'nonpassive',
+            documentation: 'explicitly set `passive: false`',
+            modifiersInvalidWith: ['passive']
+        },
+        {
+            modifier: 'capture',
+            documentation:
+                'fires the handler during the capture phase instead of the bubbling phase'
+        },
+        {
+            modifier: 'once',
+            documentation: 'remove the handler after the first time it runs'
+        },
+        {
+            modifier: 'self',
+            documentation: 'only trigger handler if `event.target` is the element itself'
+        },
+        {
+            modifier: 'trusted',
+            documentation:
+                'only trigger handler if event.isTrusted is true. ' +
+                'I.e. if the event is triggered by a user action'
+        }
+    ].map((item) => ({
+        ...item,
+        documentation: `\`${item.modifier}\` event modifier
+
+${item.documentation}
+
+https://svelte.dev/docs#on_element_event`
+    }));
+}
diff --git a/packages/language-server/src/server.ts b/packages/language-server/src/server.ts
index 22f19277a..140d38e8c 100644
--- a/packages/language-server/src/server.ts
+++ b/packages/language-server/src/server.ts
@@ -188,7 +188,8 @@ export function startServer(options?: LSOptions) {
                         // of other completion providers
 
                         // Svelte
-                        ':'
+                        ':',
+                        '|'
                     ]
                 },
                 documentFormattingProvider: true,
diff --git a/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts b/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts
index f7a26230f..f60124b1f 100644
--- a/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts
+++ b/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts
@@ -10,8 +10,9 @@ describe('SveltePlugin#getCompletions', () => {
         content: string,
         position: Position = Position.create(0, content.length)
     ) {
-        const svelteDoc = new SvelteDocument(new Document('url', content));
-        const completions = getCompletions(svelteDoc, position);
+        const document = new Document('url', content);
+        const svelteDoc = new SvelteDocument(document);
+        const completions = getCompletions(document, svelteDoc, position);
         return {
             toEqual: (expectedLabels: string[] | null) =>
                 assert.deepStrictEqual(
@@ -123,8 +124,9 @@ describe('SveltePlugin#getCompletions', () => {
 
     it('should return completion for component documentation comment', () => {
         const content = '<!--@';
-        const svelteDoc = new SvelteDocument(new Document('url', content));
-        const completions = getCompletions(svelteDoc, Position.create(0, content.length));
+        const document = new Document('url', content);
+        const svelteDoc = new SvelteDocument(document);
+        const completions = getCompletions(document, svelteDoc, Position.create(0, content.length));
         assert.deepStrictEqual(completions?.items?.[0].insertText, `component${EOL}$1${EOL}`);
     });
 });

From 40ea6e2d1b216f20d37eec396d49d5a60984098b Mon Sep 17 00:00:00 2001
From: Lyu Jason <b00605009@ntu.edu.tw>
Date: Sat, 4 Sep 2021 15:03:49 +0800
Subject: [PATCH 2/5] completion item kind

---
 .../src/plugins/svelte/features/getCompletions.ts              | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/language-server/src/plugins/svelte/features/getCompletions.ts b/packages/language-server/src/plugins/svelte/features/getCompletions.ts
index 1427e595d..0686a9c8d 100644
--- a/packages/language-server/src/plugins/svelte/features/getCompletions.ts
+++ b/packages/language-server/src/plugins/svelte/features/getCompletions.ts
@@ -112,7 +112,8 @@ function getEventModifierCompletion(attributeContext: AttributeContext): Complet
                 documentation: {
                     kind: MarkupKind.Markdown,
                     value: m.documentation
-                }
+                },
+                kind: CompletionItemKind.Event
             })
         );
 

From 6a9dedeb9af1502bbadc5a1b67395a3673d16682 Mon Sep 17 00:00:00 2001
From: Lyu Jason <b00605009@ntu.edu.tw>
Date: Sat, 4 Sep 2021 15:04:14 +0800
Subject: [PATCH 3/5] don't show on component

---
 .../src/lib/documents/parseHtml.ts              |  4 ++++
 .../src/plugins/html/HTMLPlugin.ts              | 17 ++++-------------
 .../plugins/svelte/features/getCompletions.ts   |  2 ++
 packages/language-server/src/utils.ts           | 14 ++++++++++++++
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/packages/language-server/src/lib/documents/parseHtml.ts b/packages/language-server/src/lib/documents/parseHtml.ts
index 7ee6b45c1..cfa65ebe4 100644
--- a/packages/language-server/src/lib/documents/parseHtml.ts
+++ b/packages/language-server/src/lib/documents/parseHtml.ts
@@ -90,6 +90,7 @@ function preprocess(text: string) {
 export interface AttributeContext {
     name: string;
     inValue: boolean;
+    elementTag: Node;
     valueRange?: [number, number];
 }
 
@@ -122,6 +123,7 @@ export function getAttributeContextAtPosition(
 
             if (inTokenRange()) {
                 return {
+                    elementTag: tag,
                     name: currentAttributeName,
                     inValue: false
                 };
@@ -131,6 +133,7 @@ export function getAttributeContextAtPosition(
                 const nextToken = scanner.scan();
 
                 return {
+                    elementTag: tag,
                     name: currentAttributeName,
                     inValue: true,
                     valueRange: [
@@ -151,6 +154,7 @@ export function getAttributeContextAtPosition(
                 }
 
                 return {
+                    elementTag: tag,
                     name: currentAttributeName,
                     inValue: true,
                     valueRange: [start, end]
diff --git a/packages/language-server/src/plugins/html/HTMLPlugin.ts b/packages/language-server/src/plugins/html/HTMLPlugin.ts
index a493d81cc..c3c183194 100644
--- a/packages/language-server/src/plugins/html/HTMLPlugin.ts
+++ b/packages/language-server/src/plugins/html/HTMLPlugin.ts
@@ -32,6 +32,7 @@ import {
     LinkedEditingRangesProvider
 } from '../interfaces';
 import { isInsideMoustacheTag, toRange } from '../../lib/documents/utils';
+import { possiblyComponent } from '../../utils';
 
 export class HTMLPlugin
     implements HoverProvider, CompletionsProvider, RenameProvider, LinkedEditingRangesProvider
@@ -62,7 +63,7 @@ export class HTMLPlugin
         }
 
         const node = html.findNodeAt(document.offsetAt(position));
-        if (!node || this.possiblyComponent(node)) {
+        if (!node || possiblyComponent(node)) {
             return null;
         }
 
@@ -236,7 +237,7 @@ export class HTMLPlugin
         }
 
         const node = html.findNodeAt(document.offsetAt(position));
-        if (!node || this.possiblyComponent(node)) {
+        if (!node || possiblyComponent(node)) {
             return null;
         }
 
@@ -257,7 +258,7 @@ export class HTMLPlugin
         const node = html.findNodeAt(offset);
         if (
             !node ||
-            this.possiblyComponent(node) ||
+            possiblyComponent(node) ||
             !node.tag ||
             !this.isRenameAtTag(node, offset)
         ) {
@@ -287,16 +288,6 @@ export class HTMLPlugin
         return { ranges };
     }
 
-    /**
-     *
-     * The language service is case insensitive, and would provide
-     * hover info for Svelte components like `Option` which have
-     * the same name like a html tag.
-     */
-    private possiblyComponent(node: Node): boolean {
-        return !!node.tag?.[0].match(/[A-Z]/);
-    }
-
     /**
      * Returns true if rename happens at the tag name, not anywhere inbetween.
      */
diff --git a/packages/language-server/src/plugins/svelte/features/getCompletions.ts b/packages/language-server/src/plugins/svelte/features/getCompletions.ts
index 0686a9c8d..e49c8e768 100644
--- a/packages/language-server/src/plugins/svelte/features/getCompletions.ts
+++ b/packages/language-server/src/plugins/svelte/features/getCompletions.ts
@@ -12,6 +12,7 @@ import { SvelteTag, documentation, getLatestOpeningTag } from './SvelteTags';
 import { isInTag, Document } from '../../../lib/documents';
 import { AttributeContext, getAttributeContextAtPosition } from '../../../lib/documents/parseHtml';
 import { getModifierData } from './getModifierData';
+import { possiblyComponent } from '../../../utils';
 
 const HTML_COMMENT_START = '<!--';
 
@@ -92,6 +93,7 @@ function getEventModifierCompletion(attributeContext: AttributeContext): Complet
     if (
         !attributeContext ||
         attributeContext.inValue ||
+        possiblyComponent(attributeContext.elementTag) ||
         !attributeContext.name.startsWith('on:') ||
         !attributeContext.name.includes('|')
     ) {
diff --git a/packages/language-server/src/utils.ts b/packages/language-server/src/utils.ts
index 6ebe8ddbb..3f8f98e65 100644
--- a/packages/language-server/src/utils.ts
+++ b/packages/language-server/src/utils.ts
@@ -1,5 +1,6 @@
 import { URI } from 'vscode-uri';
 import { Position, Range } from 'vscode-languageserver';
+import { Node } from 'vscode-html-languageservice';
 
 export function clamp(num: number, min: number, max: number): number {
     return Math.max(min, Math.min(max, num));
@@ -226,3 +227,16 @@ export async function filterAsync<T>(
 export function getIndent(text: string) {
     return /^[ |\t]+/.exec(text)?.[0] ?? '';
 }
+
+/**
+ *
+ * The html language service is case insensitive, and would provide
+ * hover/ completion info for Svelte components like `Option` which have
+ * the same name like a html tag.
+ *
+ * Also, svelte directives like action and event modifier only work
+ * with element not component
+ */
+export function possiblyComponent(node: Node): boolean {
+    return !!node.tag?.[0].match(/[A-Z]/);
+}

From cddc5a9836f5f2441ea6b0eee4dfe6558fb0fce5 Mon Sep 17 00:00:00 2001
From: Lyu Jason <b00605009@ntu.edu.tw>
Date: Sat, 4 Sep 2021 15:32:40 +0800
Subject: [PATCH 4/5] test

---
 .../svelte/features/getCompletions.test.ts    | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts b/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts
index f60124b1f..a41a15f8c 100644
--- a/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts
+++ b/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts
@@ -4,6 +4,7 @@ import { Position } from 'vscode-languageserver';
 import { getCompletions } from '../../../../src/plugins/svelte/features/getCompletions';
 import { SvelteDocument } from '../../../../src/plugins/svelte/SvelteDocument';
 import { Document } from '../../../../src/lib/documents';
+import { getModifierData } from '../../../../src/plugins/svelte/features/getModifierData';
 
 describe('SveltePlugin#getCompletions', () => {
     function expectCompletionsFor(
@@ -129,4 +130,36 @@ describe('SveltePlugin#getCompletions', () => {
         const completions = getCompletions(document, svelteDoc, Position.create(0, content.length));
         assert.deepStrictEqual(completions?.items?.[0].insertText, `component${EOL}$1${EOL}`);
     });
+
+    function expectCompletionsForModifier(
+        content: string,
+        position = Position.create(0, content.lastIndexOf('|') + 1)
+    ) {
+        return expectCompletionsFor(content, position);
+    }
+
+    describe('should return completion for event modifier', () => {
+        const modifierData = getModifierData();
+        const allModifiers = modifierData.map(modifier => modifier.modifier);
+
+        it('can provides modifiers', () => {
+            expectCompletionsForModifier('<div on:click| />').toEqual(allModifiers);
+        });
+
+        it('can chain modifier and does not provide duplicated modifier', () => {
+            expectCompletionsForModifier('<div on:click|stopPropagation| />').toEqual(
+                allModifiers.filter(modifier => modifier !== 'stopPropagation')
+            );
+        });
+
+        it('can chain modifier and does not provide modifier that can\'t used together', () => {
+            expectCompletionsForModifier('<div on:click|preventDefault| />').toEqual(
+                modifierData
+                    .filter(modifier =>
+                        modifier.modifier != 'preventDefault' &&
+                        !modifier.modifiersInvalidWith?.includes('preventDefault'))
+                    .map(modifier => modifier.modifier)
+            );
+        });
+    });
 });

From 945ae42849a739a26721c344b06f11b66fc2ea7b Mon Sep 17 00:00:00 2001
From: Lyu Jason <b00605009@ntu.edu.tw>
Date: Sat, 4 Sep 2021 18:03:55 +0800
Subject: [PATCH 5/5] hover info

---
 .../src/plugins/html/HTMLPlugin.ts            |  7 +--
 .../src/plugins/svelte/SveltePlugin.ts        |  2 +-
 .../plugins/svelte/features/getCompletions.ts | 15 +----
 .../plugins/svelte/features/getHoverInfo.ts   | 59 +++++++++++++++++--
 .../svelte/features/getModifierData.ts        |  9 ++-
 .../src/plugins/svelte/features/utils.ts      | 11 ++++
 .../svelte/features/getCompletions.test.ts    | 16 ++---
 .../svelte/features/getHoverInfo.test.ts      | 27 ++++++++-
 8 files changed, 111 insertions(+), 35 deletions(-)
 create mode 100644 packages/language-server/src/plugins/svelte/features/utils.ts

diff --git a/packages/language-server/src/plugins/html/HTMLPlugin.ts b/packages/language-server/src/plugins/html/HTMLPlugin.ts
index c3c183194..b2260b002 100644
--- a/packages/language-server/src/plugins/html/HTMLPlugin.ts
+++ b/packages/language-server/src/plugins/html/HTMLPlugin.ts
@@ -256,12 +256,7 @@ export class HTMLPlugin
 
         const offset = document.offsetAt(position);
         const node = html.findNodeAt(offset);
-        if (
-            !node ||
-            possiblyComponent(node) ||
-            !node.tag ||
-            !this.isRenameAtTag(node, offset)
-        ) {
+        if (!node || possiblyComponent(node) || !node.tag || !this.isRenameAtTag(node, offset)) {
             return null;
         }
         const tagNameStart = node.start + '<'.length;
diff --git a/packages/language-server/src/plugins/svelte/SveltePlugin.ts b/packages/language-server/src/plugins/svelte/SveltePlugin.ts
index 29335979b..4233bcfb1 100644
--- a/packages/language-server/src/plugins/svelte/SveltePlugin.ts
+++ b/packages/language-server/src/plugins/svelte/SveltePlugin.ts
@@ -168,7 +168,7 @@ export class SveltePlugin
             return null;
         }
 
-        return getHoverInfo(await this.getSvelteDoc(document), position);
+        return getHoverInfo(document, await this.getSvelteDoc(document), position);
     }
 
     async getCodeActions(
diff --git a/packages/language-server/src/plugins/svelte/features/getCompletions.ts b/packages/language-server/src/plugins/svelte/features/getCompletions.ts
index e49c8e768..4cef1b66a 100644
--- a/packages/language-server/src/plugins/svelte/features/getCompletions.ts
+++ b/packages/language-server/src/plugins/svelte/features/getCompletions.ts
@@ -12,7 +12,7 @@ import { SvelteTag, documentation, getLatestOpeningTag } from './SvelteTags';
 import { isInTag, Document } from '../../../lib/documents';
 import { AttributeContext, getAttributeContextAtPosition } from '../../../lib/documents/parseHtml';
 import { getModifierData } from './getModifierData';
-import { possiblyComponent } from '../../../utils';
+import { attributeCanHaveEventModifier } from './utils';
 
 const HTML_COMMENT_START = '<!--';
 
@@ -90,13 +90,7 @@ export function getCompletions(
 function getEventModifierCompletion(attributeContext: AttributeContext): CompletionList | null {
     const modifiers = getModifierData();
 
-    if (
-        !attributeContext ||
-        attributeContext.inValue ||
-        possiblyComponent(attributeContext.elementTag) ||
-        !attributeContext.name.startsWith('on:') ||
-        !attributeContext.name.includes('|')
-    ) {
+    if (!attributeContext || !attributeCanHaveEventModifier(attributeContext)) {
         return null;
     }
 
@@ -111,10 +105,7 @@ function getEventModifierCompletion(attributeContext: AttributeContext): Complet
         .map(
             (m): CompletionItem => ({
                 label: m.modifier,
-                documentation: {
-                    kind: MarkupKind.Markdown,
-                    value: m.documentation
-                },
+                documentation: m.documentation,
                 kind: CompletionItemKind.Event
             })
         );
diff --git a/packages/language-server/src/plugins/svelte/features/getHoverInfo.ts b/packages/language-server/src/plugins/svelte/features/getHoverInfo.ts
index cc12537ad..c81008492 100644
--- a/packages/language-server/src/plugins/svelte/features/getHoverInfo.ts
+++ b/packages/language-server/src/plugins/svelte/features/getHoverInfo.ts
@@ -2,12 +2,19 @@ import { Hover, Position } from 'vscode-languageserver';
 import { SvelteDocument } from '../SvelteDocument';
 import { documentation, SvelteTag, getLatestOpeningTag } from './SvelteTags';
 import { flatten } from '../../../utils';
-import { isInTag } from '../../../lib/documents';
+import { Document, isInTag } from '../../../lib/documents';
+import { AttributeContext, getAttributeContextAtPosition } from '../../../lib/documents/parseHtml';
+import { attributeCanHaveEventModifier } from './utils';
+import { getModifierData } from './getModifierData';
 
 /**
  * Get hover information for special svelte tags within moustache tags.
  */
-export function getHoverInfo(svelteDoc: SvelteDocument, position: Position): Hover | null {
+export function getHoverInfo(
+    document: Document,
+    svelteDoc: SvelteDocument,
+    position: Position
+): Hover | null {
     const offset = svelteDoc.offsetAt(position);
 
     const isInStyleOrScript =
@@ -20,13 +27,34 @@ export function getHoverInfo(svelteDoc: SvelteDocument, position: Position): Hov
         .getText()
         // use last 10 and next 10 characters, should cover 99% of all cases
         .substr(offsetStart, 20);
-    const isNoSvelteTag = !tagRegexp.test(charactersAroundOffset);
+    const isSvelteTag = tagRegexp.test(charactersAroundOffset);
+
+    if (isInStyleOrScript) {
+        return null;
+    }
+
+    if (isSvelteTag) {
+        return getTagHoverInfoAtOffset(svelteDoc, offsetStart, charactersAroundOffset, offset);
+    }
 
-    if (isInStyleOrScript || isNoSvelteTag) {
+    const attributeContext = getAttributeContextAtPosition(document, position);
+
+    if (!attributeContext || !attributeCanHaveEventModifier(attributeContext)) {
         return null;
     }
 
-    const tag = getTagAtOffset(svelteDoc, offsetStart, charactersAroundOffset, offset);
+    const attributeOffset = svelteDoc.getText().lastIndexOf(attributeContext.name, offset);
+
+    return getEventModifierHoverInfo(attributeContext, attributeOffset, offset);
+}
+
+function getTagHoverInfoAtOffset(
+    svelteDoc: SvelteDocument,
+    charactersOffset: number,
+    charactersAroundOffset: string,
+    offset: number
+): Hover | null {
+    const tag = getTagAtOffset(svelteDoc, charactersOffset, charactersAroundOffset, offset);
     if (!tag) {
         return null;
     }
@@ -91,3 +119,24 @@ const tagPossibilities: Array<{ tag: SvelteTag | ':else'; values: string[] }> =
 const tagRegexp = new RegExp(
     `[\\s\\S]*{\\s*(${flatten(tagPossibilities.map((p) => p.values)).join('|')})(\\s|})`
 );
+function getEventModifierHoverInfo(
+    attributeContext: AttributeContext,
+    attributeOffset: number,
+    offset: number
+): Hover | null {
+    const { name } = attributeContext;
+
+    const modifierData = getModifierData();
+
+    const found = modifierData.find((modifier) =>
+        isAroundOffset(attributeOffset, name, modifier.modifier, offset)
+    );
+
+    if (!found) {
+        return null;
+    }
+
+    return {
+        contents: found.documentation
+    };
+}
diff --git a/packages/language-server/src/plugins/svelte/features/getModifierData.ts b/packages/language-server/src/plugins/svelte/features/getModifierData.ts
index 94b15b674..27b183c48 100644
--- a/packages/language-server/src/plugins/svelte/features/getModifierData.ts
+++ b/packages/language-server/src/plugins/svelte/features/getModifierData.ts
@@ -1,6 +1,8 @@
+import { MarkupContent, MarkupKind } from 'vscode-languageserver';
+
 export interface ModifierData {
     modifier: string;
-    documentation: string;
+    documentation: MarkupContent;
     modifiersInvalidWith?: string[];
 }
 
@@ -49,10 +51,13 @@ export function getModifierData(): ModifierData[] {
         }
     ].map((item) => ({
         ...item,
-        documentation: `\`${item.modifier}\` event modifier
+        documentation: {
+            kind: MarkupKind.Markdown,
+            value: `\`${item.modifier}\` event modifier
 
 ${item.documentation}
 
 https://svelte.dev/docs#on_element_event`
+        }
     }));
 }
diff --git a/packages/language-server/src/plugins/svelte/features/utils.ts b/packages/language-server/src/plugins/svelte/features/utils.ts
new file mode 100644
index 000000000..9a1619cbe
--- /dev/null
+++ b/packages/language-server/src/plugins/svelte/features/utils.ts
@@ -0,0 +1,11 @@
+import { AttributeContext } from '../../../lib/documents/parseHtml';
+import { possiblyComponent } from '../../../utils';
+
+export function attributeCanHaveEventModifier(attributeContext: AttributeContext) {
+    return (
+        !attributeContext.inValue &&
+        !possiblyComponent(attributeContext.elementTag) &&
+        attributeContext.name.startsWith('on:') &&
+        attributeContext.name.includes('|')
+    );
+}
diff --git a/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts b/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts
index a41a15f8c..6e428f25a 100644
--- a/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts
+++ b/packages/language-server/test/plugins/svelte/features/getCompletions.test.ts
@@ -140,7 +140,7 @@ describe('SveltePlugin#getCompletions', () => {
 
     describe('should return completion for event modifier', () => {
         const modifierData = getModifierData();
-        const allModifiers = modifierData.map(modifier => modifier.modifier);
+        const allModifiers = modifierData.map((modifier) => modifier.modifier);
 
         it('can provides modifiers', () => {
             expectCompletionsForModifier('<div on:click| />').toEqual(allModifiers);
@@ -148,17 +148,19 @@ describe('SveltePlugin#getCompletions', () => {
 
         it('can chain modifier and does not provide duplicated modifier', () => {
             expectCompletionsForModifier('<div on:click|stopPropagation| />').toEqual(
-                allModifiers.filter(modifier => modifier !== 'stopPropagation')
+                allModifiers.filter((modifier) => modifier !== 'stopPropagation')
             );
         });
 
-        it('can chain modifier and does not provide modifier that can\'t used together', () => {
+        it("can chain modifier and does not provide modifier that can't used together", () => {
             expectCompletionsForModifier('<div on:click|preventDefault| />').toEqual(
                 modifierData
-                    .filter(modifier =>
-                        modifier.modifier != 'preventDefault' &&
-                        !modifier.modifiersInvalidWith?.includes('preventDefault'))
-                    .map(modifier => modifier.modifier)
+                    .filter(
+                        (modifier) =>
+                            modifier.modifier != 'preventDefault' &&
+                            !modifier.modifiersInvalidWith?.includes('preventDefault')
+                    )
+                    .map((modifier) => modifier.modifier)
             );
         });
     });
diff --git a/packages/language-server/test/plugins/svelte/features/getHoverInfo.test.ts b/packages/language-server/test/plugins/svelte/features/getHoverInfo.test.ts
index c49de2292..bd01df60f 100644
--- a/packages/language-server/test/plugins/svelte/features/getHoverInfo.test.ts
+++ b/packages/language-server/test/plugins/svelte/features/getHoverInfo.test.ts
@@ -4,11 +4,13 @@ import { getHoverInfo } from '../../../../src/plugins/svelte/features/getHoverIn
 import { SvelteDocument } from '../../../../src/plugins/svelte/SvelteDocument';
 import { documentation, SvelteTag } from '../../../../src/plugins/svelte/features/SvelteTags';
 import { Document } from '../../../../src/lib/documents';
+import { getModifierData } from '../../../../src/plugins/svelte/features/getModifierData';
 
 describe('SveltePlugin#getHoverInfo', () => {
     function expectHoverInfoFor(content: string, position: Position) {
-        const svelteDoc = new SvelteDocument(new Document('url', content));
-        const hover = getHoverInfo(svelteDoc, position);
+        const document = new Document('url', content);
+        const svelteDoc = new SvelteDocument(document);
+        const hover = getHoverInfo(document, svelteDoc, position);
         return {
             toEqual: (tag: SvelteTag | null) =>
                 assert.deepStrictEqual(hover, tag ? { contents: documentation[tag] } : null)
@@ -97,4 +99,25 @@ describe('SveltePlugin#getHoverInfo', () => {
             });
         });
     });
+
+    function expectHoverInfoForEventModifier(content: string, position: Position) {
+        const document = new Document('url', content);
+        const svelteDoc = new SvelteDocument(document);
+        const hover = getHoverInfo(document, svelteDoc, position);
+        return {
+            toEqual: (expectedModifier: string) => {
+                const contents = getModifierData().find(
+                    (modifier) => modifier.modifier === expectedModifier
+                )?.documentation;
+                assert.deepStrictEqual(hover, { contents });
+            }
+        };
+    }
+
+    it('should return hover event modifier', () => {
+        expectHoverInfoForEventModifier(
+            '<div on:click|preventDefault />',
+            Position.create(0, 15)
+        ).toEqual('preventDefault');
+    });
 });