Add button directives

Author: theletterf

package.json

@@ -2,7 +2,7 @@
   "name": "elastic-docs-v3-utilities",
   "displayName": "Elastic Docs Utilities",
   "description": "Utilities for Elastic Docs authoring",
-  "version": "0.12.5",
+  "version": "0.12.6",
   "publisher": "Elastic",
   "repository": {
     "type": "git",

src/directiveDiagnosticProvider.ts

@@ -193,7 +193,7 @@ export class DirectiveDiagnosticProvider {
         return blocks;
     }
 
-    private validateDirectiveBlock(block: DirectiveBlock, _document: vscode.TextDocument): vscode.Diagnostic[] {
+    private validateDirectiveBlock(block: DirectiveBlock, document: vscode.TextDocument): vscode.Diagnostic[] {
         const diagnostics: vscode.Diagnostic[] = [];
 
         outputChannel.appendLine(`[Elastic Docs] Validating block '${block.name}' (${block.openingColons} colons) - Has closing: ${!!block.closing}`);
@@ -248,7 +248,32 @@ export class DirectiveDiagnosticProvider {
             }
         }
 
-        // 6. Check for malformed opening (missing braces)
+        // 6. Validate button directive content (must be a markdown link)
+        if (block.name === 'button' && block.contentLines.length > 0) {
+            const contentLines = block.contentLines.map(lineNum => document.lineAt(lineNum).text);
+            const content = contentLines.join('\n').trim();
+            const markdownLinkPattern = /^\[([^\]]+)\]\(([^)]+)\)$/;
+            
+            if (!markdownLinkPattern.test(content)) {
+                // Create a range covering all content lines
+                const firstContentLine = block.contentLines[0];
+                const lastContentLine = block.contentLines[block.contentLines.length - 1];
+                const firstLine = document.lineAt(firstContentLine);
+                const lastLine = document.lineAt(lastContentLine);
+                const contentRange = new vscode.Range(
+                    new vscode.Position(firstContentLine, 0),
+                    new vscode.Position(lastContentLine, lastLine.text.length)
+                );
+                
+                diagnostics.push(new vscode.Diagnostic(
+                    contentRange,
+                    "Button directive content must be a markdown link in the format [text](url)",
+                    vscode.DiagnosticSeverity.Error
+                ));
+            }
+        }
+        
+        // 7. Check for malformed opening (missing braces)
         if (block.isMalformed) {
             if (block.missingClosingBrace) {
                 diagnostics.push(new vscode.Diagnostic(

src/directives.ts

@@ -152,6 +152,20 @@ export const DIRECTIVES: readonly DirectiveDefinition[] = [
         template: ':::{math}\n:label: equation-label\nE = mc^2\n:::',
         description: 'Render mathematical expressions using LaTeX syntax. Mathematical expressions are rendered client-side using KaTeX for fast, accurate display.'
     },
+    {
+        name: 'button',
+        hasArgument: false,
+        parameters: ['type', 'align'],
+        template: ':::{button}\n[Button Text](/link)\n:::',
+        description: 'Styled link element for calls to action in documentation.'
+    },
+    {
+        name: 'button-group',
+        hasArgument: false,
+        parameters: ['align'],
+        template: '::::{button-group}\n:::{button}\n[Button Text](/link)\n:::\n::::',
+        description: 'Group multiple buttons in a row.'
+    },
 ];
 
 export const PARAMETER_VALUES: { [key: string]: string[] } = {
@@ -162,5 +176,7 @@ export const PARAMETER_VALUES: { [key: string]: string[] } = {
     'height': ['100px', '200px', '300px', '400px', '500px'],
     'alt': ['Image description', 'Screenshot', 'Diagram', 'Icon'],
     'separator': [',', ';', '|', 'tab'],
-    'caption': ['Table caption']
+    'caption': ['Table caption'],
+    'type': ['primary', 'secondary'],
+    'align': ['left', 'center', 'right']
 };