add snippet editor to the demo
This commit is contained in:
parent
d97de5c149
commit
19ea0fe979
9 changed files with 274 additions and 142 deletions
|
|
@ -449,22 +449,33 @@ require("ace/placeholder").PlaceHolder;
|
||||||
|
|
||||||
var SnippetManager = require("ace/snippets").SnippetManager
|
var SnippetManager = require("ace/snippets").SnippetManager
|
||||||
var jsSnippets = require("ace/snippets/javascript");
|
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
|
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) {
|
ace.commands.bindKey("Tab", function(editor) {
|
||||||
var success = SnippetManager.expandWithTab(editor);
|
var success = SnippetManager.expandWithTab(editor);
|
||||||
if (!success)
|
if (!success)
|
||||||
|
|
|
||||||
|
|
@ -54,6 +54,7 @@ function initDoc(file, path, doc) {
|
||||||
var mode = modelist.getModeFromPath(path);
|
var mode = modelist.getModeFromPath(path);
|
||||||
session.modeName = mode.name;
|
session.modeName = mode.name;
|
||||||
session.setMode(mode.mode);
|
session.setMode(mode.mode);
|
||||||
|
return session;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 */}}
|
||||||
|
}(${1}));
|
||||||
|
# if
|
||||||
|
snippet if
|
||||||
|
if (${1:true}) {
|
||||||
|
${0}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
${TM_CURRENT_LINE/./^/g}
|
|
||||||
$$------------------------------------
|
|
||||||
|
|
@ -265,6 +265,11 @@
|
||||||
<input type="checkbox" id="read_only">
|
<input type="checkbox" id="read_only">
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="2">
|
||||||
|
<input type="button" value="Edit Snippets", onclick="env.editSnippets()">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</td></tr>
|
</td></tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
|
||||||
|
|
@ -1,132 +1,209 @@
|
||||||
[[
|
[[
|
||||||
"start",
|
"start",
|
||||||
["doc,comment","$$------------------------------------"]
|
["comment","# Function"]
|
||||||
],[
|
],[
|
||||||
"start"
|
"start"
|
||||||
],[
|
],[
|
||||||
"start",
|
"start",
|
||||||
["text","tabTrigger: t"]
|
["constant.language.escape","snippet"],
|
||||||
|
["text"," fun"]
|
||||||
],[
|
],[
|
||||||
"start"
|
"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","${"],
|
["markup.list","${"],
|
||||||
["constant.numeric","1"],
|
["constant.numeric","1"],
|
||||||
["punctuation.operator",":"],
|
["text","?:function_name"],
|
||||||
["text","documnet"],
|
|
||||||
["markup.list","}"],
|
["markup.list","}"],
|
||||||
["text","}"]
|
["text","("],
|
||||||
],[
|
|
||||||
"start"
|
|
||||||
],[
|
|
||||||
"start",
|
|
||||||
["text"," "],
|
|
||||||
["markup.list","${"],
|
["markup.list","${"],
|
||||||
["constant.numeric","2"],
|
["constant.numeric","2"],
|
||||||
["punctuation.operator",":"],
|
["punctuation.operator",":"],
|
||||||
["keyword","$TM_SELECTED_TEXT"],
|
["text","argument"],
|
||||||
["text",":some latex"],
|
["markup.list","}"],
|
||||||
["markup.list","}"]
|
["text",") {"]
|
||||||
],[
|
],[
|
||||||
"start"
|
"start"
|
||||||
],[
|
],[
|
||||||
"start",
|
"sn-start",
|
||||||
["text"," "],
|
["text","\t\t"],
|
||||||
["markup.list","${"],
|
["markup.list","${"],
|
||||||
["constant.numeric","3"],
|
["constant.numeric","3"],
|
||||||
["punctuation.operator",":"],
|
["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"],
|
["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","}"]
|
["markup.list","}"]
|
||||||
],[
|
],[
|
||||||
"start"
|
"start"
|
||||||
],[
|
],[
|
||||||
"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","${"],
|
["markup.list","${"],
|
||||||
["constant.numeric","4"],
|
["constant.numeric","1"],
|
||||||
|
["markup.list","}"],
|
||||||
|
["text",") {"]
|
||||||
|
],[
|
||||||
|
"start"
|
||||||
|
],[
|
||||||
|
"sn-start",
|
||||||
|
["text","\t\t"],
|
||||||
|
["markup.list","${"],
|
||||||
|
["constant.numeric","0"],
|
||||||
["punctuation.operator",":"],
|
["punctuation.operator",":"],
|
||||||
["markup.list","${"],
|
["markup.list","${"],
|
||||||
["keyword","TM_SELECTED_TEXT"],
|
["keyword","TM_SELECTED_TEXT"],
|
||||||
["string.regex","/(.)/"],
|
["punctuation.operator",":"],
|
||||||
["string","\\"],
|
["text","/* code */"],
|
||||||
["keyword","\\u"],
|
|
||||||
["variable","$1"],
|
|
||||||
["string.regex","/g:"],
|
|
||||||
["text","7"],
|
|
||||||
["markup.list","}}"]
|
["markup.list","}}"]
|
||||||
],[
|
],[
|
||||||
"start"
|
"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","${"],
|
["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","}"]
|
["markup.list","}"]
|
||||||
],[
|
],[
|
||||||
"start"
|
"start"
|
||||||
],[
|
],[
|
||||||
"start",
|
"sn-start",
|
||||||
["doc,comment","$$------------------------------------"]
|
["text","\t}"]
|
||||||
|
],[
|
||||||
|
"start"
|
||||||
|
],[
|
||||||
|
"sn-start",
|
||||||
|
["text","\t"]
|
||||||
|
],[
|
||||||
|
"start"
|
||||||
|
],[
|
||||||
|
"sn-start",
|
||||||
|
["text","\t"]
|
||||||
|
],[
|
||||||
|
"start"
|
||||||
|
],[
|
||||||
|
"sn-start",
|
||||||
|
["text","\t"]
|
||||||
]]
|
]]
|
||||||
|
|
@ -20,7 +20,7 @@ var SnippetHighlightRules = function() {
|
||||||
if (stack[1])
|
if (stack[1])
|
||||||
stack[1]++;
|
stack[1]++;
|
||||||
else
|
else
|
||||||
stack.unshift("start", 1);
|
stack.unshift(state, 1);
|
||||||
return this.tokenName;
|
return this.tokenName;
|
||||||
}, tokenName: "markup.list", regex: "\\${", next: "varDecl"},
|
}, tokenName: "markup.list", regex: "\\${", next: "varDecl"},
|
||||||
{onMatch: function(value, state, stack) {
|
{onMatch: function(value, state, stack) {
|
||||||
|
|
@ -31,7 +31,7 @@ var SnippetHighlightRules = function() {
|
||||||
stack.splice(0,2);
|
stack.splice(0,2);
|
||||||
return this.tokenName;
|
return this.tokenName;
|
||||||
}, tokenName: "markup.list", regex: "}"},
|
}, tokenName: "markup.list", regex: "}"},
|
||||||
{token: "doc,comment", regex:/^\${2}-{5,}$/}
|
{token: "doc.comment", regex:/^\${2}-{5,}$/}
|
||||||
],
|
],
|
||||||
"varDecl" : [
|
"varDecl" : [
|
||||||
{regex: /\d+\b/, token: "constant.numeric"},
|
{regex: /\d+\b/, token: "constant.numeric"},
|
||||||
|
|
@ -62,15 +62,44 @@ var SnippetHighlightRules = function() {
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
oop.inherits(SnippetHighlightRules, TextHighlightRules);
|
oop.inherits(SnippetHighlightRules, TextHighlightRules);
|
||||||
|
|
||||||
exports.SnippetHighlightRules = SnippetHighlightRules;
|
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 Mode = function() {
|
||||||
var highlighter = new SnippetHighlightRules();
|
var highlighter = new SnippetGroupHighlightRules();
|
||||||
|
this.foldingRules = new FoldMode();
|
||||||
this.$tokenizer = new Tokenizer(highlighter.getRules());
|
this.$tokenizer = new Tokenizer(highlighter.getRules());
|
||||||
};
|
};
|
||||||
oop.inherits(Mode, TextMode);
|
oop.inherits(Mode, TextMode);
|
||||||
|
|
|
||||||
|
|
@ -619,6 +619,8 @@ var TabstopManager = function(editor) {
|
||||||
var anchor = this.editor.selection.anchor;
|
var anchor = this.editor.selection.anchor;
|
||||||
var isEmpty = this.editor.selection.isEmpty();
|
var isEmpty = this.editor.selection.isEmpty();
|
||||||
for (var i = this.ranges.length; i--;) {
|
for (var i = this.ranges.length; i--;) {
|
||||||
|
if (this.ranges[i].linked)
|
||||||
|
continue;
|
||||||
var containsLead = this.ranges[i].contains(lead.row, lead.column);
|
var containsLead = this.ranges[i].contains(lead.row, lead.column);
|
||||||
var containsAnchor = isEmpty || this.ranges[i].contains(anchor.row, anchor.column);
|
var containsAnchor = isEmpty || this.ranges[i].contains(anchor.row, anchor.column);
|
||||||
if (containsLead && containsAnchor)
|
if (containsLead && containsAnchor)
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
# Prototype
|
# Prototype
|
||||||
snippet proto
|
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...}
|
${4:// body...}
|
||||||
};
|
};
|
||||||
# Function
|
# Function
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue