Fix: UI layout issues

docs/API-Reference/editor/CodeHintManager.md

@@ -227,6 +227,8 @@ insertHintOnTab Preference.
     * [.registerHintProvider(provider, languageIds, priority)](#module_CodeHintManager..registerHintProvider)
     * [.hasValidExclusion(exclusion, textAfterCursor)](#module_CodeHintManager..hasValidExclusion) ⇒ <code>boolean</code>
     * [.isOpen()](#module_CodeHintManager..isOpen) ⇒ <code>boolean</code>
+    * [.showHintsAtTop(handler)](#module_CodeHintManager..showHintsAtTop)
+    * [.clearHintsAtTop()](#module_CodeHintManager..clearHintsAtTop)
 
 <a name="module_CodeHintManager..registerHintProvider"></a>
 
@@ -263,3 +265,21 @@ Test if a hint popup is open.
 
 **Kind**: inner method of [<code>CodeHintManager</code>](#module_CodeHintManager)  
 **Returns**: <code>boolean</code> - - true if the hints are open, false otherwise.  
+<a name="module_CodeHintManager..showHintsAtTop"></a>
+
+### CodeHintManager.showHintsAtTop(handler)
+Register a handler to show hints at the top of the hint list.
+This API allows extensions to add their own hints at the top of the standard hint list.
+
+**Kind**: inner method of [<code>CodeHintManager</code>](#module_CodeHintManager)
+
+| Param | Type | Description |
+| --- | --- | --- |
+| handler | <code>Object</code> | A hint provider object with standard methods:   - hasHints: function(editor, implicitChar) - returns true if hints are available   - getHints: function(editor, implicitChar) - returns hint response object with hints array   - insertHint: function(hint) - handles hint insertion, returns true if handled |
+
+<a name="module_CodeHintManager..clearHintsAtTop"></a>
+
+### CodeHintManager.clearHintsAtTop()
+Unregister the hints at top handler.
+
+**Kind**: inner method of [<code>CodeHintManager</code>](#module_CodeHintManager)

src/extensionsIntegrated/CustomSnippets/UIHelper.js

@@ -20,7 +20,9 @@
 
 /* eslint-disable no-invalid-this */
 define(function (require, exports, module) {
+    const StringUtils = require("utils/StringUtils");
     const Global = require("./global");
+    const Strings = require("strings");
 
     /**
      * this is a generic function to show error messages for input fields
@@ -187,7 +189,7 @@ define(function (require, exports, module) {
         const wrapperId = isEditForm ? "edit-abbr-box-wrapper" : "abbr-box-wrapper";
         const errorId = isEditForm ? "edit-abbreviation-duplicate-error" : "abbreviation-duplicate-error";
 
-        showError(inputId, wrapperId, `A snippet with abbreviation "${abbreviation}" already exists.`, errorId);
+        showError(inputId, wrapperId, StringUtils.format(Strings.CUSTOM_SNIPPETS_DUPLICATE_ERROR, abbreviation), errorId);
     }
 
     /**

src/extensionsIntegrated/CustomSnippets/codeHintIntegration.js

@@ -21,6 +21,7 @@
 define(function (require, exports, module) {
     const CodeHintManager = require("editor/CodeHintManager");
     const EditorManager = require("editor/EditorManager");
+    const Metrics = require("utils/Metrics");
 
     const Global = require("./global");
     const Driver = require("./driver");
@@ -118,6 +119,10 @@ define(function (require, exports, module) {
                         const editor = EditorManager.getFocusedEditor();
 
                         if (editor) {
+                            // to track the usage metrics
+                            const fileCategory = Helper.categorizeFileExtensionForMetrics(matchedSnippet.fileExtension);
+                            Metrics.countEvent(Metrics.EVENT_TYPE.EDITOR, "snipt", `use.${fileCategory}`);
+
                             // replace the typed abbreviation with the template text using cursor manager
                             const wordInfo = Driver.getWordBeforeCursor();
                             const start = { line: wordInfo.line, ch: wordInfo.ch + 1 };

src/extensionsIntegrated/CustomSnippets/driver.js

@@ -18,8 +18,10 @@
  *
  */
 
+/* global logger */
 define(function (require, exports, module) {
     const EditorManager = require("editor/EditorManager");
+    const Metrics = require("utils/Metrics");
 
     const Global = require("./global");
     const Helper = require("./helper");
@@ -43,9 +45,19 @@ define(function (require, exports, module) {
 
         if (shouldAddSnippetToList(snippetData)) {
             Global.SnippetHintsList.push(snippetData);
+            Helper.rebuildOptimizedStructures();
             Helper.clearAllInputFields();
             Helper.toggleSaveButtonDisability();
-            SnippetsState.saveSnippetsToState();
+
+            // snippet creating metrics
+            const fileCategory = Helper.categorizeFileExtensionForMetrics(snippetData.fileExtension);
+            Metrics.countEvent(Metrics.EVENT_TYPE.EDITOR, "snipt", `add.${fileCategory}`);
+
+            // save to file storage
+            SnippetsState.saveSnippetsToState()
+                .catch(function (error) {
+                    logger.reportError(error, "Custom Snippets: failed to save new snippet to file storage");
+                });
 
             // we need to move back to snippets list view after a snippet is saved
             UIHelper.showSnippetListMenu();
@@ -87,7 +99,13 @@ define(function (require, exports, module) {
         // update the snippet in the list
         if (snippetIndex !== -1) {
             Global.SnippetHintsList[snippetIndex] = editedData;
-            SnippetsState.saveSnippetsToState();
+            Helper.rebuildOptimizedStructures();
+
+            // save to file storage
+            SnippetsState.saveSnippetsToState()
+                .catch(function (error) {
+                    logger.reportError(error, "Custom Snippets: failed to save edited snippet to file storage");
+                });
 
             // clear the stored data
             $editView.removeData("originalSnippet");
@@ -100,19 +118,24 @@ define(function (require, exports, module) {
     }
 
     /**
-     * This function handles the reset button click for editing a snippet
-     * It restores the original snippet data in the edit form
+     * This function is responsible to handle the cancel button click in the edit-snippet panel
+     * this resets the format to the last saved values and then moves back to the snippets-list panel
      */
-    function handleResetBtnClick() {
+    function handleCancelEditBtnClick() {
         const $editView = $("#custom-snippets-edit");
         const originalSnippet = $editView.data("originalSnippet");
 
         if (originalSnippet) {
-            // restore original data in the form
+            // restore original data in the form to reset any changes
             Helper.populateEditForm(originalSnippet);
-            // update save button state
-            Helper.toggleEditSaveButtonDisability();
         }
+
+        $editView.removeData("originalSnippet");
+        $editView.removeData("snippetIndex");
+
+        // navigate back to snippets list
+        UIHelper.showSnippetListMenu();
+        SnippetsList.showSnippetsList();
     }
 
     /**
@@ -164,10 +187,8 @@ define(function (require, exports, module) {
         };
     }
 
-
-
     exports.getWordBeforeCursor = getWordBeforeCursor;
     exports.handleSaveBtnClick = handleSaveBtnClick;
     exports.handleEditSaveBtnClick = handleEditSaveBtnClick;
-    exports.handleResetBtnClick = handleResetBtnClick;
+    exports.handleCancelEditBtnClick = handleCancelEditBtnClick;
 });