From 7dcfa41451833021c1734c09ddea8d2b13c05d54 Mon Sep 17 00:00:00 2001
From: Oyku Yilmaz <12100596+oykuyilmaz@users.noreply.github.com>
Date: Fri, 2 Feb 2024 11:06:13 +0100
Subject: [PATCH] Only show snippet markers for the current snippet on edit
 (#5478)

* remove previous tabmanager if there is one

* show tabstop markers for only selected snippet

* fix if tab goes to -zsh of selected snippet

* adds test

* update test
---
 src/snippets.js      | 22 ++++++++++++++++++----
 src/snippets_test.js | 17 +++++++++++++++++
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/snippets.js b/src/snippets.js
index f014395855d..263434e0f67 100644
--- a/src/snippets.js
+++ b/src/snippets.js
@@ -384,10 +384,8 @@ class SnippetManager {
         //@ts-expect-error TODO: potential wrong arguments
         tabstopManager.addTabstops(processedSnippet.tabstops, range.start, end, selectionId);
     }
-    
     insertSnippet(editor, snippetText, options={}) {
         var self = this;
-        
         if (editor.inVirtualSelectionMode)
             return self.insertSnippetForSelection(editor, snippetText, options);
         
@@ -894,8 +892,10 @@ class TabstopManager {
         if (index == max)
             index = 0;
         this.selectTabstop(index);
-        if (index === 0)
+        this.updateTabstopMarkers();
+        if (index === 0) {
             this.detach();
+        }
     }
     selectTabstop(index) {
         this.$openTabstops = null;
@@ -943,9 +943,10 @@ class TabstopManager {
         var i = this.index;
         var arg = [i + 1, 0];
         var ranges = this.ranges;
+        var snippetId = this.snippetId = (this.snippetId || 0) + 1;
         tabstops.forEach(function(ts, index) {
             var dest = this.$openTabstops[index] || ts;
-            
+            dest.snippetId = snippetId;
             for (var i = 0; i < ts.length; i++) {
                 var p = ts[i];
                 /**@type {Range & {original?: Range, tabstop?: any, linked?: boolean}}}*/
@@ -999,6 +1000,19 @@ class TabstopManager {
             range.markerId = null;
         });
     }
+    updateTabstopMarkers() {
+        if (!this.selectedTabstop) return;
+        var currentSnippetId =  this.selectedTabstop.snippetId;
+        // back to the parent snippet tabstops if $0
+        if ( this.selectedTabstop.index === 0) {
+            currentSnippetId--;
+        }
+        this.tabstops.forEach(function(ts) {
+            // show marker only for the tabstops of the currently active snippet
+            if (ts.snippetId === currentSnippetId) this.addTabstopMarkers(ts);
+            else this.removeTabstopMarkers(ts);
+        }, this);
+    }
     removeRange(range) {
         var i = range.tabstop.indexOf(range);
         if (i != -1) range.tabstop.splice(i, 1);
diff --git a/src/snippets_test.js b/src/snippets_test.js
index 66ef67612cc..1a57925d76a 100644
--- a/src/snippets_test.js
+++ b/src/snippets_test.js
@@ -318,6 +318,23 @@ module.exports = {
         testTabstop(tabstops[4], "[5/3]> [5/3],[2/3]> [2/3]");
         testTabstop(tabstops[5], "[6/2]> [6/5]");
     },
+    "test: insert snippet inside snippet and check markers": function() {
+        var editor = this.editor;
+        editor.session.setValue("");
+        editor.insertSnippet("{$1}");
+
+        // check first snippet's marker
+        var snippetMarkers = Object.values(editor.session.$backMarkers).filter(function(i) {return i.clazz == "ace_snippet-marker";});
+        assert.jsonEquals(snippetMarkers[0].range.start, {row: 0, column: 2});
+        assert.jsonEquals(snippetMarkers[1].range.start, {row: 0, column: 1});
+
+        // check markers after insertion of the second snippet
+        editor.insertSnippet("\"examples\": [$1]");
+        snippetMarkers = Object.values(editor.session.$backMarkers).filter(function(i) {return i.clazz == "ace_snippet-marker";});
+        assert.equal(snippetMarkers.length, 2);
+        assert.jsonEquals(snippetMarkers[0].range.start, {row: 0, column: 15});
+        assert.jsonEquals(snippetMarkers[1].range.start, {row: 0, column: 14});
+    },
     "test: linking": function() {
         var editor = this.editor;
         editor.setOption("enableMultiselect", false);