Add completion providers

src/completion.ts

@@ -0,0 +1,164 @@
+import {
+    Disposable,
+    languages,
+    CompletionItem,
+    SnippetString,
+    MarkdownString,
+    CompletionList,
+    ProviderResult,
+    TextDocument,
+    Position,
+} from 'vscode'
+import { tagAttributes, cssProperties, htmlTags } from './snippets'
+
+interface Snippet {
+    prefix: string
+    body: string
+    description?: string
+}
+
+function createCompletionItem(snippet: Snippet, detail: string, kind?: number) {
+    const snippetCompletion = new CompletionItem(snippet.prefix)
+
+    snippetCompletion.detail = detail
+    snippetCompletion.documentation = new MarkdownString(snippet.description)
+    snippetCompletion.insertText = new SnippetString(snippet.body)
+    snippetCompletion.kind = kind
+
+    return snippetCompletion
+}
+
+function isWithinTags(document: TextDocument, position: Position, regex: RegExp): boolean {
+    const docText = document.getText()
+    const tagMatches = docText.match(regex)
+
+    if (!tagMatches) return false
+
+    const offset = document.offsetAt(position)
+
+    let isWithinOpeningTag = false
+    let isWithinClosingTag = false
+    let indexOfPos = 0
+
+    tagMatches.forEach((tag) => {
+        if (isWithinOpeningTag && isWithinClosingTag) return
+
+        const tagIndex = docText.indexOf(tag, indexOfPos)
+        const tagLength = tagIndex + tag.length
+        const isHTMLTag = tag[0] === '<'
+
+        indexOfPos = tagLength
+
+        if ((isHTMLTag && tag[1] !== '/') || tag === '{') {
+            isWithinOpeningTag = tagLength < offset
+        } else if (tag[1] === '/' || tag === '}') {
+            isWithinClosingTag = tagIndex > offset - 1
+        }
+    })
+
+    if (isWithinOpeningTag && isWithinClosingTag) return true
+    else return false
+}
+
+function isWithinOpeningTag(document: TextDocument, position: Position, regex: RegExp): boolean {
+    const docText = document.getText()
+    const tagMatches = docText.match(regex)
+
+    if (!tagMatches) return false
+
+    const cursorPos = document.offsetAt(position)
+    let isWithinOpeningTag = false
+    let indexOfPos = 0
+
+    tagMatches.forEach((tag) => {
+        const tagStart = docText.indexOf(tag, indexOfPos)
+        const tagEnd = tagStart + tag.length
+
+        indexOfPos = tagEnd
+
+        if (cursorPos > tagStart && cursorPos <= tagEnd) {
+            isWithinOpeningTag = true
+        }
+    })
+
+    return isWithinOpeningTag
+}
+
+export default class Completion {
+    constructor(subscriptions: Disposable[]) {
+        const attributeProvider = languages.registerCompletionItemProvider('mjml', {
+            provideCompletionItems(document, position) {
+                const tagRegex = /<[^/](?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>/gm
+
+                if (!isWithinOpeningTag(document, position, tagRegex)) return
+
+                return tagAttributes.map((attr) => createCompletionItem(attr, 'MJML'))
+            },
+        })
+
+        const cssPropertyProvider = languages.registerCompletionItemProvider('mjml', {
+            provideCompletionItems(document, position) {
+                const { text: lineText } = document.lineAt(position)
+                const lastLineChar = lineText[position.character]
+
+                if (lastLineChar === ';') return
+
+                const tagRegex = /<\/?mj-style(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])*>/gm
+                const bracketRegex = /{|}/gm
+
+                if (!isWithinTags(document, position, tagRegex)) return
+                if (!isWithinTags(document, position, bracketRegex)) return
+
+                return cssProperties.map((prop) => {
+                    const snippetCompletion = createCompletionItem(prop, 'MJML (CSS)')
+
+                    snippetCompletion.command = {
+                        command: 'editor.action.triggerSuggest',
+                        title: '',
+                    }
+
+                    return snippetCompletion
+                })
+            },
+        })
+
+        const cssValueProvider = languages.registerCompletionItemProvider('mjml', {
+            provideCompletionItems(document, position) {
+                const snippetCompletions: ProviderResult<CompletionItem[] | CompletionList> = []
+
+                cssProperties.forEach((prop) => {
+                    const formattedBody = prop.body.split('$1').join('')
+
+                    if (!document.lineAt(position).text.includes(formattedBody)) return
+
+                    prop.values.forEach((val) => {
+                        snippetCompletions.push(
+                            createCompletionItem({ prefix: val, body: val }, '', 11),
+                        )
+                    })
+                })
+
+                return snippetCompletions
+            },
+        })
+
+        const htmlTagProvider = languages.registerCompletionItemProvider('mjml', {
+            provideCompletionItems(document, position) {
+                const mjTextRegex = /<\/?mj-text(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])*>/gm
+                const htmlTagRegex = /<\/?[^/?mj\-.*](?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])*>/gm
+
+                if (!isWithinTags(document, position, mjTextRegex)) return
+                if (isWithinOpeningTag(document, position, htmlTagRegex)) return
+
+                return htmlTags.map((tag) => createCompletionItem(tag, 'MJML (HTML)'))
+            },
+        })
+
+        subscriptions.push(
+            attributeProvider,
+            cssPropertyProvider,
+            cssValueProvider,
+            htmlTagProvider,
+        )
+    }
+}

src/extension.ts

@@ -1,6 +1,7 @@
 import { ExtensionContext, TextDocument, window, workspace } from 'vscode'
 
 import Beautify from './beautify'
+import Completion from './completion'
 import Copy from './copy'
 import Documentation from './documentation'
 import Email from './email'
@@ -22,6 +23,7 @@ export function activate(extensionContext: ExtensionContext) {
 
     extensionFeatures = [
         new Beautify(context.subscriptions),
+        new Completion(context.subscriptions),
         new Copy(context.subscriptions),
         new Documentation(context),
         new Email(context.subscriptions),

src/snippets/attributes.ts

@@ -0,0 +1,167 @@
+export default [
+    {
+        prefix: 'align',
+        body: 'align="$1"',
+        description: 'align attribute: `align=""`',
+    },
+    {
+        prefix: 'alt',
+        body: 'alt="$1"',
+        description: 'alt attribute: `alt=""`',
+    },
+    {
+        prefix: 'background-color',
+        body: 'background-color="$1"',
+        description: 'background-color attribute: `background-color=""`',
+    },
+    {
+        prefix: 'border',
+        body: 'border="$1"',
+        description: 'border attribute: `border=""`',
+    },
+    {
+        prefix: 'border-radius',
+        body: 'border-radius="$1"',
+        description: 'border-radius attribute: `border-radius=""`',
+    },
+    {
+        prefix: 'class',
+        body: 'class="$1"',
+        description: 'class attribute: `class=""`',
+    },
+    {
+        prefix: 'color',
+        body: 'color="$1"',
+        description: 'color attribute: `color=""`',
+    },
+    {
+        prefix: 'container-background-color',
+        body: 'container-background-color="$1"',
+        description: 'container-background-color attribute: `container-background-color=""`',
+    },
+    {
+        prefix: 'css-class',
+        body: 'css-class="$1"',
+        description: 'css-class attribute: `css-class=""`',
+    },
+    {
+        prefix: 'font-family',
+        body: 'font-family="$1"',
+        description: 'font-family attribute: `font-family=""`',
+    },
+    {
+        prefix: 'font-size',
+        body: 'font-size="$1"',
+        description: 'font-size attribute: `font-size=""`',
+    },
+    {
+        prefix: 'font-weight',
+        body: 'font-weight="$1"',
+        description: 'font-weight attribute: `font-weight=""`',
+    },
+    {
+        prefix: 'height',
+        body: 'height="$1"',
+        description: 'height attribute: `height=""`',
+    },
+    {
+        prefix: 'href',
+        body: 'href="$1"',
+        description: 'href attribute: `href=""`',
+    },
+    {
+        prefix: 'id',
+        body: 'id="$1"',
+        description: 'id attribute: `id=""`',
+    },
+    {
+        prefix: 'inline',
+        body: 'inline="$1"',
+        description: 'inline attribute: `inline=""`',
+    },
+    {
+        prefix: 'inner-padding',
+        body: 'inner-padding="$1"',
+        description: 'inner-padding attribute: `inner-padding=""`',
+    },
+    {
+        prefix: 'lang',
+        body: 'lang="$1"',
+        description: 'lang attribute: `lang=""`',
+    },
+    {
+        prefix: 'letter-spacing',
+        body: 'letter-spacing="$1"',
+        description: 'letter-spacing attribute: `letter-spacing=""`',
+    },
+    {
+        prefix: 'line-height',
+        body: 'line-height="$1"',
+        description: 'line-height attribute: `line-height=""`',
+    },
+    {
+        prefix: 'mj-class',
+        body: 'mj-class="$1"',
+        description: 'mj-class attribute: `mj-class=""`',
+    },
+    {
+        prefix: 'name',
+        body: 'name="$1"',
+        description: 'name attribute: `name=""`',
+    },
+    {
+        prefix: 'padding',
+        body: 'padding="$1"',
+        description: 'padding attribute: `padding=""`',
+    },
+    {
+        prefix: 'padding-bottom',
+        body: 'padding-bottom="$1"',
+        description: 'padding-bottom attribute: `padding-bottom=""`',
+    },
+    {
+        prefix: 'padding-left',
+        body: 'padding-left="$1"',
+        description: 'padding-left attribute: `padding-left=""`',
+    },
+    {
+        prefix: 'padding-right',
+        body: 'padding-right="$1"',
+        description: 'padding-right attribute: `padding-right=""`',
+    },
+    {
+        prefix: 'padding-top',
+        body: 'padding-top="$1"',
+        description: 'padding-top attribute: `padding-top=""`',
+    },
+    {
+        prefix: 'path',
+        body: 'path="$1"',
+        description: 'path attribute: `path=""`',
+    },
+    {
+        prefix: 'src',
+        body: 'src="$1"',
+        description: 'src attribute: `src=""`',
+    },
+    {
+        prefix: 'style',
+        body: 'style="$1"',
+        description: 'style attribute: `style=""`',
+    },
+    {
+        prefix: 'text-align',
+        body: 'text-align="$1"',
+        description: 'text-align attribute: `text-align=""`',
+    },
+    {
+        prefix: 'vertical-align',
+        body: 'vertical-align="$1"',
+        description: 'vertical-align attribute: `vertical-align=""`',
+    },
+    {
+        prefix: 'width',
+        body: 'width="$1"',
+        description: 'width attribute: `width=""`',
+    },
+]