Add description field on Snippet

tahabasri · Sep 2, 2023 · 44c5fe5 · 44c5fe5
1 parent f4b5371
commit 44c5fe5
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 20 deletions.
diff --git a/src/config/commands.ts b/src/config/commands.ts
@@ -70,6 +70,8 @@ export async function commonAddSnippet(snippetsProvider: SnippetsProvider, wsSni
 		vscode.window.showWarningMessage(Labels.snippetValueErrorMsg);
 		return;
 	}
+	// get snippet description
+	let description = await UIUtility.requestSnippetDescription() || '';
 
 	// request where to save snippets if ws is available
 	if (workspaceSnippetsAvailable) {
@@ -78,12 +80,12 @@ export async function commonAddSnippet(snippetsProvider: SnippetsProvider, wsSni
 		if (!targetView) {
 			vscode.window.showWarningMessage(Labels.noViewTypeSelected);
 		} else if (targetView === Labels.globalSnippets) {
-			snippetsProvider.addSnippet(name, text, Snippet.rootParentId);
+			snippetsProvider.addSnippet(name, description, text, Snippet.rootParentId);
 		} else if (targetView === Labels.wsSnippets) {
-			wsSnippetsProvider.addSnippet(name, text, Snippet.rootParentId);
+			wsSnippetsProvider.addSnippet(name, description, text, Snippet.rootParentId);
 		}
 	} else {
-		snippetsProvider.addSnippet(name, text, Snippet.rootParentId);
+		snippetsProvider.addSnippet(name, description, text, Snippet.rootParentId);
 	}
 }
 
@@ -115,16 +117,18 @@ export async function addSnippet(snippetsExplorer: vscode.TreeView<Snippet>, sni
 		vscode.window.showWarningMessage(Labels.snippetValueErrorMsg);
 		return;
 	}
+	// get snippet description
+	let description = await UIUtility.requestSnippetDescription() || '';
 	// When triggering the command with right-click the parameter node of type Tree Node will be tested.
 	// When the command is invoked via the menu popup, this node will be the highlighted node, and not the selected node, the latter will undefined.
 	if (snippetsExplorer.selection.length === 0 && !node) {
-		snippetsProvider.addSnippet(name, text, Snippet.rootParentId);
+		snippetsProvider.addSnippet(name, description, text, Snippet.rootParentId);
 	} else {
 		const selectedItem = node ? node : snippetsExplorer.selection[0];
 		if (selectedItem.folder && selectedItem.folder === true) {
-			snippetsProvider.addSnippet(name, text, selectedItem.id);
+			snippetsProvider.addSnippet(name, description, text, selectedItem.id);
 		} else {
-			snippetsProvider.addSnippet(name, text, selectedItem.parentId ?? Snippet.rootParentId);
+			snippetsProvider.addSnippet(name, description, text, selectedItem.parentId ?? Snippet.rootParentId);
 		}
 	}
 }
@@ -141,20 +145,21 @@ export async function commonAddSnippetFromClipboard(snippetsProvider: SnippetsPr
 		vscode.window.showWarningMessage(Labels.snippetNameErrorMsg);
 		return;
 	}
-
+	// get snippet description
+	let description = await UIUtility.requestSnippetDescription() || '';
 	// request where to save snippets if ws is available
 	if (workspaceSnippetsAvailable) {
 		const targetView = await UIUtility.requestTargetSnippetsView();
 		// no value chosen
 		if (!targetView) {
 			vscode.window.showWarningMessage(Labels.noViewTypeSelected);
 		} else if (targetView === Labels.globalSnippets) {
-			snippetsProvider.addSnippet(name, clipboardContent, Snippet.rootParentId);
+			snippetsProvider.addSnippet(name, description, clipboardContent, Snippet.rootParentId);
 		} else if (targetView === Labels.wsSnippets) {
-			wsSnippetsProvider.addSnippet(name, clipboardContent, Snippet.rootParentId);
+			wsSnippetsProvider.addSnippet(name, description, clipboardContent, Snippet.rootParentId);
 		}
 	} else {
-		snippetsProvider.addSnippet(name, clipboardContent, Snippet.rootParentId);
+		snippetsProvider.addSnippet(name, description, clipboardContent, Snippet.rootParentId);
 	}
 }
 
@@ -170,16 +175,18 @@ export async function addSnippetFromClipboard(snippetsExplorer: vscode.TreeView<
 		vscode.window.showWarningMessage(Labels.snippetNameErrorMsg);
 		return;
 	}
+	// get snippet description
+	let description = await UIUtility.requestSnippetDescription() || '';
 	// When triggering the command with right-click the parameter node of type Tree Node will be tested.
 	// When the command is invoked via the menu popup, this node will be the highlighted node, and not the selected node, the latter will undefined.
 	if (snippetsExplorer.selection.length === 0 && !node) {
-		snippetsProvider.addSnippet(name, clipboardContent, Snippet.rootParentId);
+		snippetsProvider.addSnippet(name, description, clipboardContent, Snippet.rootParentId);
 	} else {
 		const selectedItem = node ? node : snippetsExplorer.selection[0];
 		if (selectedItem.folder && selectedItem.folder === true) {
-			snippetsProvider.addSnippet(name, clipboardContent, selectedItem.id);
+			snippetsProvider.addSnippet(name, description, clipboardContent, selectedItem.id);
 		} else {
-			snippetsProvider.addSnippet(name, clipboardContent, selectedItem.parentId ?? Snippet.rootParentId);
+			snippetsProvider.addSnippet(name, description, clipboardContent, selectedItem.parentId ?? Snippet.rootParentId);
 		}
 	}
 }

diff --git a/src/config/labels.ts b/src/config/labels.ts
@@ -22,7 +22,9 @@ export const enum Labels {
 	snippetValueErrorMsg = "Snippet must have a non-empty value.",
 
 	snippetNamePrompt = "Snippet Name",
+	snippetDescriptionPrompt = "Snippet Description",
 	snippetNamePlaceholder = "Some examples: Custom Navbar, CSS Alert Style, etc.",
+	snippetDescriptionPlaceholder = "A brief description of the snippet...",
 	snippetNameValidationMsg = "Snippet name should not be empty.",
 	snippetNameErrorMsg = "Snippet must have a non-empty name.",
 

diff --git a/src/extension.ts b/src/extension.ts
@@ -278,16 +278,16 @@ export function activate(context: vscode.ExtensionContext) {
                 // add suffix for all workspace items
                 candidates = candidates.concat(wsSnippetService.getAllSnippets().map(
                     elt => {
-                        elt.label = `${elt.label}__(ws)`;
+                        elt.label = `${elt.description}__(ws)`;
                         return elt;
                     }
                 ));
             }
             return candidates.map(element =>
                 <vscode.CompletionItem>{
-                    label: `snp:${element.label.replace('\n', '').replace(' ', '-').replace("__(ws)", " (ws)")}`,
+                    label: `snp:${element.label.replace('\n', '').replace(' ', '-')}`,
                     insertText: new vscode.SnippetString(element.value),
-                    detail: element.label.replace("__(ws)", " (snippet from workspace)"),
+                    detail: element.description?.replace("__(ws)", " (snippet from workspace)"),
                     kind: vscode.CompletionItemKind.Snippet,
                     // replace trigger character with the chosen suggestion
                     additionalTextEdits: isTriggeredByChar

diff --git a/src/interface/snippet.ts b/src/interface/snippet.ts
@@ -9,6 +9,7 @@ export class Snippet {
   value?: string;
   lastId?: number;
   resolveSyntax?: boolean;
+  description?: string;
 
   constructor(
     id: number,

diff --git a/src/provider/snippetsProvider.ts b/src/provider/snippetsProvider.ts
@@ -1,5 +1,4 @@
 import * as vscode from 'vscode';
-import fs = require('fs');
 import * as path from 'path';
 import { Snippet } from '../interface/snippet';
 import { CommandsConsts } from '../config/commands';
@@ -98,7 +97,7 @@ export class SnippetsProvider implements vscode.TreeDataProvider<Snippet>, vscod
         this.refresh();
     }
 
-    addSnippet(name: string, snippet: string, parentId: number) {
+    addSnippet(name: string, description: string, snippet: string, parentId: number) {
         let lastId = this._snippetService.incrementLastId();
 
         this._snippetService.addSnippet(
@@ -107,6 +106,7 @@ export class SnippetsProvider implements vscode.TreeDataProvider<Snippet>, vscod
                 parentId: parentId,
                 label: name,
                 value: snippet,
+                description: description,
                 children: []
             }
         );
@@ -179,7 +179,7 @@ export class SnippetsProvider implements vscode.TreeDataProvider<Snippet>, vscod
                 dark: path.join(this._extensionPath, 'resources', 'icons', 'dark', 'folder.svg')
             };
         } else {
-            treeItem.tooltip = `${snippet.value}`;
+            treeItem.tooltip = snippet.description ? `(${snippet.description})\n${snippet.value}` : `${snippet.value}`;
             treeItem.contextValue = 'snippet';
             treeItem.iconPath = {
                 light: path.join(this._extensionPath, 'resources', 'icons', 'light', 'file.svg'),

diff --git a/src/utility/uiUtility.ts b/src/utility/uiUtility.ts
@@ -52,6 +52,13 @@ export class UIUtility {
         });
     }
 
+    static async requestSnippetDescription(): Promise<string | undefined> {
+        return await vscode.window.showInputBox({
+            prompt: Labels.snippetDescriptionPrompt,
+            placeHolder: Labels.snippetDescriptionPlaceholder
+        });
+    }
+
     static async requestSnippetFolderName(): Promise<string | undefined> {
         return await vscode.window.showInputBox({
             prompt: Labels.snippetNameFolderPrompt,

diff --git a/src/views/editSnippet.ts b/src/views/editSnippet.ts
@@ -17,11 +17,14 @@ export class EditSnippet extends EditView {
     handleReceivedMessage(message: any): any {
         switch (message.command) {
             case 'edit-snippet':
-                const { label, value, resolveSyntax } = message.data;
+                const { label, description, value, resolveSyntax } = message.data;
                 // call provider only if there is data change
                 if (label !== undefined) {
                     this._snippet.label = label;
                 }
+                if (description !== undefined) {
+                    this._snippet.description = description;
+                }
                 if (value !== undefined) {
                     this._snippet.value = value;
                 }

diff --git a/views/editSnippet.html b/views/editSnippet.html
@@ -15,6 +15,8 @@
     <form name="edit-snippet-form">
         <div class="no-m"><label for="snippet-label">Snippet Label:</label></div>
         <div><input type="text" id="snippet-label" value="{{snippet.label}}" required></div>
+        <div class="no-m"><label for="snippet-description">Snippet Description:</label></div>
+        <div><input type="text" id="snippet-description" value="{{snippet.description}}"></div>
         <div>
             <label for="snippet-value">Snippet Content:</label>
             <div class="popup" name="_snippets_syntax">

diff --git a/views/js/editSnippet.js b/views/js/editSnippet.js
@@ -28,12 +28,14 @@
         e.preventDefault();
         const form = document.querySelector('form[name="edit-snippet-form"]');
         const snippetLabel = form.elements['snippet-label'].value;
+        const snippetDescription = form.elements['snippet-description'].value;
         const snippetValue = form.elements['snippet-value'].value;
         const resolveSyntax = form.elements['snippet-resolveSyntax'].checked;
 
         vscode.postMessage({
             data: {
                 label: snippetLabel,
+                description: snippetDescription,
                 value: snippetValue,
                 resolveSyntax: resolveSyntax
             },