add snippet editor to the demo

demo/kitchen-sink/demo.js

@@ -120,14 +120,14 @@ env.editor.commands.addCommands([{
     name: "snippet",
     bindKey: {win: "Alt-C", mac: "Command-Alt-C"},
     exec: function(editor, needle) {
-        if (typeof needle == "object") {            
+        if (typeof needle == "object") {
             editor.cmdLine.setValue("snippet ", 1);
             editor.cmdLine.focus();
             return;
         }
-		var s = SnippetManager.getSnippetByName(needle, editor);
+        var s = SnippetManager.getSnippetByName(needle, editor);
-		if (s)
+        if (s)
-			SnippetManager.insertSnippet(editor, s.content);
+            SnippetManager.insertSnippet(editor, s.content);
     },
     readOnly: true
 }, {
@@ -169,7 +169,7 @@ commands.addCommand({
     exec: function() {alert("Fake Save File");}
 });
 
-var keybindings = {    
+var keybindings = {
     ace: null, // Null = use "default" keymapping
     vim: require("ace/keyboard/vim").handler,
     emacs: "ace/keyboard/emacs",
@@ -375,7 +375,7 @@ bindDropdown("split", function(value) {
         sp.setSplits(1);
     } else {
         var newEditor = (sp.getSplits() == 1);
-        sp.setOrientation(value == "below" ? sp.BELOW : sp.BESIDE);        
+        sp.setOrientation(value == "below" ? sp.BELOW : sp.BESIDE);
         sp.setSplits(2);
 
         if (newEditor) {
@@ -449,22 +449,33 @@ require("ace/placeholder").PlaceHolder;
 
 var SnippetManager = require("ace/snippets").SnippetManager
 var jsSnippets = require("ace/snippets/javascript");
-var testSnippet = "\
-\\begin{${1:document}}\n\
-    ${2:$TM_SELECTED_TEXT:some ${3:latex}}\n\
-    ${3:$TM_SELECTED_TEXT/a/b/c}\n\
-    ${4:${TM_SELECTED_TEXT/(.)/\\u$1/c:7}}\n\
-\\end{$1}\n\
-$0";
-SnippetManager.register({
-    content: testSnippet,
-    tabTrigger: "t",
-    name: "testSnippet"
-})
-jsSnippets.snippets = SnippetManager.parseSnippetFile(jsSnippets.snippetText)
-SnippetManager.register(jsSnippets.snippets, "javascript")
 window.SnippetManager = SnippetManager
 
+function saveSnippets() {
+    jsSnippets.snippets = SnippetManager.parseSnippetFile(jsSnippets.snippetText);
+    SnippetManager.register(jsSnippets.snippets, "javascript")
+}
+
+env.editSnippets = function() {
+    var sp = env.split;
+    sp.setSplits(1);
+    sp.setSplits(2);
+    sp.setOrientation(sp.BESIDE);
+    var editor = sp.$editors[1]
+    if (!env.snippetSession) {
+        var file = jsSnippets.snippetText;
+        env.snippetSession = doclist.initDoc(file, "", {});
+        env.snippetSession.setMode("ace/mode/tmsnippet");
+        env.snippetSession.setUseSoftTabs(false);
+    }
+    editor.on("blur", function() {
+        jsSnippets.snippetText = editor.getValue();
+        saveSnippets();
+    })
+    editor.setSession(env.snippetSession, 1);
+    editor.focus();
+}
+
 ace.commands.bindKey("Tab", function(editor) {
     var success = SnippetManager.expandWithTab(editor);
     if (!success)

demo/kitchen-sink/doclist.js

@@ -54,6 +54,7 @@ function initDoc(file, path, doc) {
     var mode = modelist.getModeFromPath(path);
     session.modeName = mode.name;
     session.setMode(mode.mode);
+    return session;
 }
 
 

demo/kitchen-sink/docs/tmSnippet.tmSnippet

@@ -1,19 +1,26 @@
-$$------------------------------------
+# Function
-tabTrigger: t
+snippet fun
-name: Heading 3
+	function ${1?:function_name}(${2:argument}) {
-scope: language
+		${3:// body...}
-content: -----------------------------
+	}
-\begin{${1:documnet}}
+# Anonymous Function
-    ${2:$TM_SELECTED_TEXT:some latex}
+regex /((=)\s*|(:)\s*|(\()|\b)/f/(\))?/
-    ${3:$TM_SELECTED_TEXT/a/b/c}
+name f
-    ${4:${TM_SELECTED_TEXT/(.)/\\u$1/g:7}}
+	function${M1?: ${1:functionName}}($2) {
-\end{$1}
+		${0:$TM_SELECTED_TEXT}
-$0\\$$
+	}${M2?;}${M3?,}${M4?)}
-$$------------------------------------
+# Immediate function
-tabTrigger: ^3
+trigger \(?f\(
-name: Heading 3
+endTrigger \)?
-scope: language
+snippet f(
-content: -----------------------------
+	(function(${1}) {
-
+		${0:${TM_SELECTED_TEXT:/* code */}}
-${TM_CURRENT_LINE/./^/g}
+	}(${1}));
-$$------------------------------------
+# if
+snippet if
+	if (${1:true}) {
+		${0}
+	}
+	
+	
+	

demo/kitchen-sink/modelist.js

@@ -98,7 +98,7 @@ var modesByName = {
     tex:        ["Tex"          , "tex"],
     text:       ["Text"         , "txt"],
     textile:    ["Textile"      , "textile"],
-    tmsnippet: ["tmSnippet"    , "tmSnippet"],
+    tmsnippet:  ["tmSnippet"    , "tmSnippet"],
     toml:       ["toml"         , "toml"],
     typescript: ["Typescript"   , "typescript|ts|str"],
     vbscript:   ["VBScript"     , "vbs"],

kitchen-sink.html

@@ -13,20 +13,20 @@
 
     <!--DEVEL-->
       <link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
-      <script async="true" src="http://use.edgefonts.net/source-code-pro.js"></script> 
+      <script async="true" src="http://use.edgefonts.net/source-code-pro.js"></script>
     <!--DEVEL-->
 
     <link href="./doc/site/images/favicon.ico" rel="icon" type="image/x-icon">
     <!--PACKAGE
       <link rel="stylesheet" href="kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
-      <script async="true" src="http://use.edgefonts.net/source-code-pro.js"></script> 
+      <script async="true" src="http://use.edgefonts.net/source-code-pro.js"></script>
     PACKAGE-->
 </head>
 <body>
 <div id="optionsPanel" style="position:absolute;height:100%;width:260px">
   <a href="http://ajaxorg.github.com/ace/" >
     <img id="logo" src="demo/kitchen-sink/logo.png">
-  </a> 
+  </a>
   <div style="position: absolute; overflow: hidden; top:80px; bottom:0">
   <div style="width: 120%; height:100%; overflow-y: scroll">
 
@@ -151,7 +151,7 @@
         </select>
       </td>
     </tr>
-  
+
     <tr><td colspan="2">
     <table id="more-controls">
     <tr>
@@ -265,10 +265,15 @@
         <input type="checkbox" id="read_only">
       </td>
     </tr>
+    <tr>
+      <td colspan="2">
+        <input type="button" value="Edit Snippets", onclick="env.editSnippets()">
+      </td>
+    </tr>
   </table>
   </td></tr>
   </table>
-  
+
   </div>
   </div>
 </div>

lib/ace/mode/_test/tokens_tmsnippet.json

@@ -1,132 +1,209 @@
 [[
    "start",
-  ["doc,comment","$$------------------------------------"]
+  ["comment","# Function"]
 ],[
    "start"
 ],[
    "start",
-  ["text","tabTrigger: t"]
+  ["constant.language.escape","snippet"],
+  ["text"," fun"]
 ],[
    "start"
 ],[
-   "start",
+   "sn-start",
-  ["text","name: Heading 3"]
+  ["text","\tfunction "],
-],[
-   "start"
-],[
-   "start",
-  ["text","scope: language"]
-],[
-   "start"
-],[
-   "start",
-  ["text","content: -----------------------------"]
-],[
-   "start"
-],[
-   "start",
-  ["text","\\begin{"],
   ["markup.list","${"],
   ["constant.numeric","1"],
-  ["punctuation.operator",":"],
+  ["text","?:function_name"],
-  ["text","documnet"],
   ["markup.list","}"],
-  ["text","}"]
+  ["text","("],
-],[
-   "start"
-],[
-   "start",
-  ["text","    "],
   ["markup.list","${"],
   ["constant.numeric","2"],
   ["punctuation.operator",":"],
-  ["keyword","$TM_SELECTED_TEXT"],
+  ["text","argument"],
-  ["text",":some latex"],
+  ["markup.list","}"],
-  ["markup.list","}"]
+  ["text",") {"]
 ],[
    "start"
 ],[
-   "start",
+   "sn-start",
-  ["text","    "],
+  ["text","\t\t"],
   ["markup.list","${"],
   ["constant.numeric","3"],
   ["punctuation.operator",":"],
+  ["text","// body..."],
+  ["markup.list","}"]
+],[
+   "start"
+],[
+   "sn-start",
+  ["text","\t}"]
+],[
+   "start"
+],[
+   "start",
+  ["comment","# Anonymous Function"]
+],[
+   "start"
+],[
+   "start",
+  ["constant.language.escape","regex "],
+  ["keyword","/"],
+  ["text","((=)\\s*|(:)\\s*|(\\()|\\b)"],
+  ["keyword","/"],
+  ["text","f"],
+  ["keyword","/"],
+  ["text","(\\))?"],
+  ["keyword","/"]
+],[
+   "start"
+],[
+   "start",
+  ["constant.language.escape","name"],
+  ["text"," f"]
+],[
+   "start"
+],[
+   "sn-start",
+  ["text","\tfunction"],
+  ["markup.list","${"],
+  ["variable","M1"],
+  ["text","?: "],
+  ["markup.list","${"],
+  ["constant.numeric","1"],
+  ["punctuation.operator",":"],
+  ["text","functionName"],
+  ["markup.list","}}"],
+  ["text","("],
+  ["variable","$2"],
+  ["text",") {"]
+],[
+   "start"
+],[
+   "sn-start",
+  ["text","\t\t"],
+  ["markup.list","${"],
+  ["constant.numeric","0"],
+  ["punctuation.operator",":"],
   ["keyword","$TM_SELECTED_TEXT"],
-  ["text","/a/b/c"],
+  ["markup.list","}"]
+],[
+   "start"
+],[
+   "sn-start",
+  ["text","\t}"],
+  ["markup.list","${"],
+  ["variable","M2"],
+  ["text","?;"],
+  ["markup.list","}${"],
+  ["variable","M3"],
+  ["text","?,"],
+  ["markup.list","}${"],
+  ["variable","M4"],
+  ["text","?)"],
   ["markup.list","}"]
 ],[
    "start"
 ],[
    "start",
-  ["text","    "],
+  ["comment","# Immediate function"]
+],[
+   "start"
+],[
+   "start",
+  ["constant.language.escape","trigger"],
+  ["text"," \\(?f\\("]
+],[
+   "start"
+],[
+   "start",
+  ["constant.language.escape","endTrigger"],
+  ["text"," \\)?"]
+],[
+   "start"
+],[
+   "start",
+  ["constant.language.escape","snippet"],
+  ["text"," f("]
+],[
+   "start"
+],[
+   "sn-start",
+  ["text","\t(function("],
   ["markup.list","${"],
-  ["constant.numeric","4"],
+  ["constant.numeric","1"],
+  ["markup.list","}"],
+  ["text",") {"]
+],[
+   "start"
+],[
+   "sn-start",
+  ["text","\t\t"],
+  ["markup.list","${"],
+  ["constant.numeric","0"],
   ["punctuation.operator",":"],
   ["markup.list","${"],
   ["keyword","TM_SELECTED_TEXT"],
-  ["string.regex","/(.)/"],
+  ["punctuation.operator",":"],
-  ["string","\\"],
+  ["text","/* code */"],
-  ["keyword","\\u"],
-  ["variable","$1"],
-  ["string.regex","/g:"],
-  ["text","7"],
   ["markup.list","}}"]
 ],[
    "start"
 ],[
-   "start",
+   "sn-start",
-  ["text","\\end{"],
+  ["text","\t}("],
-  ["variable","$1"],
-  ["text","}"]
-],[
-   "start"
-],[
-   "start",
-  ["variable","$0"],
-  ["constant.language.escape","\\\\"],
-  ["text","$$"]
-],[
-   "start"
-],[
-   "start",
-  ["doc,comment","$$------------------------------------"]
-],[
-   "start"
-],[
-   "start",
-  ["text","tabTrigger: ^3"]
-],[
-   "start"
-],[
-   "start",
-  ["text","name: Heading 3"]
-],[
-   "start"
-],[
-   "start",
-  ["text","scope: language"]
-],[
-   "start"
-],[
-   "start",
-  ["text","content: -----------------------------"]
-],[
-   "start"
-],[
-   "start"
-],[
-   "start"
-],[
-   "start",
   ["markup.list","${"],
-  ["keyword","TM_CURRENT_LINE"],
+  ["constant.numeric","1"],
-  ["string.regex","/./"],
+  ["markup.list","}"],
-  ["string","^"],
+  ["text","));"]
-  ["string.regex","/g"],
+],[
+   "start"
+],[
+   "start",
+  ["comment","# if"]
+],[
+   "start"
+],[
+   "start",
+  ["constant.language.escape","snippet"],
+  ["text"," if"]
+],[
+   "start"
+],[
+   "sn-start",
+  ["text","\tif ("],
+  ["markup.list","${"],
+  ["constant.numeric","1"],
+  ["punctuation.operator",":"],
+  ["text","true"],
+  ["markup.list","}"],
+  ["text",") {"]
+],[
+   "start"
+],[
+   "sn-start",
+  ["text","\t\t"],
+  ["markup.list","${"],
+  ["constant.numeric","0"],
   ["markup.list","}"]
 ],[
    "start"
 ],[
-   "start",
+   "sn-start",
-  ["doc,comment","$$------------------------------------"]
+  ["text","\t}"]
+],[
+   "start"
+],[
+   "sn-start",
+  ["text","\t"]
+],[
+   "start"
+],[
+   "sn-start",
+  ["text","\t"]
+],[
+   "start"
+],[
+   "sn-start",
+  ["text","\t"]
 ]]

lib/ace/mode/tmsnippet.js

@@ -20,7 +20,7 @@ var SnippetHighlightRules = function() {
                 if (stack[1])
                     stack[1]++;
                 else
-                    stack.unshift("start", 1);
+                    stack.unshift(state, 1);
                 return this.tokenName;
             }, tokenName: "markup.list", regex: "\\${", next: "varDecl"},
             {onMatch: function(value, state, stack) {
@@ -31,7 +31,7 @@ var SnippetHighlightRules = function() {
                     stack.splice(0,2);
                 return this.tokenName;
             }, tokenName: "markup.list", regex: "}"},
-            {token: "doc,comment", regex:/^\${2}-{5,}$/}
+            {token: "doc.comment", regex:/^\${2}-{5,}$/}
         ],
         "varDecl" : [
             {regex: /\d+\b/, token: "constant.numeric"},
@@ -62,15 +62,44 @@ var SnippetHighlightRules = function() {
         ]
     };
 };
-
 oop.inherits(SnippetHighlightRules, TextHighlightRules);
 
 exports.SnippetHighlightRules = SnippetHighlightRules;
 
+var SnippetGroupHighlightRules = function() {
+    this.$rules = {
+        "start" : [
+			{token: "text", regex: "^\\t", next: "sn-start"},
+			{token:"invalid", regex: /^ \s*/},
+            {token:"comment", regex: /^#.*/},
+            {token:"constant.language.escape", regex: "^regex ", next: "regex"},
+            {token:"constant.language.escape", regex: "^(trigger|endTrigger|name|snippet|guard|endGuard|tabTrigger|key)\\b"}
+        ],
+		"regex" : [
+			{token:"text", regex: "\\."},
+			{token:"keyword", regex: "/"},
+			{token:"empty", regex: "$", next: "start"}
+		]
+    };
+	this.embedRules(SnippetHighlightRules, "sn-", [
+		{token: "text", regex: "^\\t", next: "sn-start"},
+		{onMatch: function(value, state, stack) {
+			stack.splice(stack.length);
+			return this.tokenName;
+		}, tokenName: "text", regex: "^(?!\t)", next: "start"},
+	])
+	
+};
+
+oop.inherits(SnippetGroupHighlightRules, TextHighlightRules);
+
+exports.SnippetGroupHighlightRules = SnippetGroupHighlightRules;
+
+var FoldMode = require("./folding/coffee").FoldMode;
 
 var Mode = function() {
-    var highlighter = new SnippetHighlightRules();
+    var highlighter = new SnippetGroupHighlightRules();
-
+    this.foldingRules = new FoldMode();
     this.$tokenizer = new Tokenizer(highlighter.getRules());
 };
 oop.inherits(Mode, TextMode);

lib/ace/snippets.js

@@ -619,6 +619,8 @@ var TabstopManager = function(editor) {
         var anchor = this.editor.selection.anchor;
         var isEmpty = this.editor.selection.isEmpty();
         for (var i = this.ranges.length; i--;) {
+            if (this.ranges[i].linked)
+                continue;
             var containsLead = this.ranges[i].contains(lead.row, lead.column);
             var containsAnchor = isEmpty || this.ranges[i].contains(anchor.row, anchor.column);
             if (containsLead && containsAnchor)

lib/ace/snippets/javascript.snippets

@@ -1,6 +1,6 @@
 # Prototype
 snippet proto
-	${1:class_name}.prototype.${2:method_name} = function(${3irst_argument}) {
+	${1:class_name}.prototype.${2:method_name} = function(${3:first_argument}) {
 		${4:// body...}
 	};
 # Function