feat: add support for tab stops

Author: devvaannsh

src/editor/CodeHintManager.js

@@ -270,15 +270,18 @@ define(function (require, exports, module) {
     // this is to check whether user has set any custom snippets as we need to show it at the first
     let customSnippetsDriver = null;
     let customSnippetsGlobal = null;
+    let customSnippetsCursorManager = null;
 
     // load custom snippets driver and global
     try {
         customSnippetsDriver = require("../extensionsIntegrated/CustomSnippets/src/driver");
         customSnippetsGlobal = require("../extensionsIntegrated/CustomSnippets/src/global");
+        customSnippetsCursorManager = require("../extensionsIntegrated/CustomSnippets/src/snippetCursorManager");
     } catch (e) {
         // if unable to load we just set it to null to prevent other parts of the code from breaking
         customSnippetsDriver = null;
         customSnippetsGlobal = null;
+        customSnippetsCursorManager = null;
     }
 
     PreferencesManager.definePreference("showCodeHints", "boolean", true, {
@@ -579,11 +582,22 @@ define(function (require, exports, module) {
                             (snippet) => snippet.abbreviation === abbreviation
                         );
                         if (matchedSnippet) {
-                            // replace the typed abbreviation with the template text
+                            // replace the typed abbreviation with the template text using cursor manager
                             const wordInfo = customSnippetsDriver.getWordBeforeCursor();
                             const start = { line: wordInfo.line, ch: wordInfo.ch + 1 };
                             const end = sessionEditor.getCursorPos();
-                            sessionEditor.document.replaceRange(matchedSnippet.templateText, start, end);
+
+                            if (customSnippetsCursorManager) {
+                                customSnippetsCursorManager.insertSnippetWithTabStops(
+                                    sessionEditor,
+                                    matchedSnippet.templateText,
+                                    start,
+                                    end
+                                );
+                            } else {
+                                // insert snippet just by replacing range if cursor manager is not available
+                                sessionEditor.document.replaceRange(matchedSnippet.templateText, start, end);
+                            }
                             _endSession();
                             return;
                         }

src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html

@@ -90,11 +90,11 @@
 
             <div id="template-text-box-wrapper">
                 <label for="template-text-box"
-                       title="The actual code that will be inserted. Use ${cursor} to set cursor position after insertion."
+                       title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
                        data-placement="top">
                     Template Text:
                 </label>
-                <textarea id="template-text-box" placeholder="console.log(${cursor});" autocomplete="off"></textarea>
+                <textarea id="template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
             </div>
 
             <div id="file-extn-box-wrapper">
@@ -135,11 +135,11 @@
 
             <div id="edit-template-text-box-wrapper">
                 <label for="edit-template-text-box"
-                       title="The actual code that will be inserted. Use ${cursor} to set cursor position after insertion."
+                       title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
                        data-placement="top">
                     Template Text:
                 </label>
-                <textarea id="edit-template-text-box" placeholder="console.log(${cursor});" autocomplete="off"></textarea>
+                <textarea id="edit-template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
             </div>
 
             <div id="edit-file-extn-box-wrapper">

src/extensionsIntegrated/CustomSnippets/main.js

@@ -12,6 +12,7 @@ define(function (require, exports, module) {
     const Helper = require("./src/helper");
     const UIHelper = require("./src/UIHelper");
     const SnippetsState = require("./src/snippetsState");
+    const SnippetCursorManager = require("./src/snippetCursorManager");
 
     const snippetsPanelTpl = require("text!./htmlContent/snippets-panel.html");
     // the html content of the panel will be stored in this variable
@@ -197,5 +198,6 @@ define(function (require, exports, module) {
         _addToMenu();
         SnippetCodeHints.init();
         SnippetsState.loadSnippetsFromState();
+        SnippetCursorManager.registerHandlers();
     });
 });

src/extensionsIntegrated/CustomSnippets/src/snippetCodeHints.js

@@ -4,6 +4,7 @@ define(function (require, exports, module) {
     const Global = require("./global");
     const Driver = require("./driver");
     const Helper = require("./helper");
+    const SnippetCursorManager = require("./snippetCursorManager");
 
     /**
      * Constructor
@@ -96,7 +97,9 @@ define(function (require, exports, module) {
         const end = cursor;
 
         const matchedItem = Global.SnippetHintsList.find((snippet) => snippet.abbreviation === word.word);
-        this.editor.document.replaceRange(matchedItem.templateText, start, end);
+
+        // Use the new cursor manager for snippet insertion with tab stops
+        SnippetCursorManager.insertSnippetWithTabStops(this.editor, matchedItem.templateText, start, end);
 
         return false;
     };