Merge pull request #192 from ananyasen/Codeview-improvements

submitting project : Code Editor Improvements [Phase 1]
author: Valerio Virgillito 2012-05-03 16:08:49 -0700
committer: Valerio Virgillito 2012-05-03 16:08:49 -0700
commit: 0e1c87871489c1d5d8deb609174d8876eb579169 (patch)
tree: f37c26fbab9151e6c4f50e3e786bdc96b9960014 /imports/codemirror/mode/less
parent: eb17fe1bbd05ad260e8a56918a3b396a03767e04 (diff)
parent: 01ecdc4bda1aff7d39f429c76e57b10af6079c53 (diff)
download: ninja-0e1c87871489c1d5d8deb609174d8876eb579169.tar.gz
2 files changed, 113 insertions, 69 deletions
diff --git a/imports/codemirror/mode/less/index.html b/imports/codemirror/mode/less/index.html
index bd3ef198..f7705205 100644
--- a/imports/codemirror/mode/less/index.html
+++ b/imports/codemirror/mode/less/index.html
@@ -7,23 +7,36 @@
    <script src="less.js"></script>
    <style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd;}</style>
    <link rel="stylesheet" href="../../doc/docs.css">
+    <link rel="stylesheet" href="../../theme/lesser-dark.css">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  </head>
  <body>
    <h1>CodeMirror: LESS mode</h1>
-    <form><textarea id="code" name="code">
+    <form><textarea id="code" name="code">/* Some LESS code */
-/* Some LESS code */
-video {
+@test_a: #eeeQQQ;//this is not a valid hex value and thus parsed as an element id
-  background-image:url('paper.gif');
+@test_b: #eeeFFF//this is a valid hex value but the declaration doesn't end with a semicolon and thus parsed as an element id
+#eee aaa .box
+{
+  #test bbb {
+    width: 500px;
+    height: 250px;
+    background-image: url(sheep.png), url(betweengrassandsky.png);
+    background-position: center bottom, left top;
+    background-repeat: no-repeat;
+  }
 }
-.pre_class {
+@base: #f938ab;
-  width: 500px;
-  height: 250px;
+.box-shadow(@style, @c) when (iscolor(@c)) {
-  background-image: url(sheep.png), url(betweengrassandsky.png);
+  box-shadow:         @style @c;
-  background-position: center bottom, left top;
+  -webkit-box-shadow: @style @c;
-  background-repeat: no-repeat;
+  -moz-box-shadow:    @style @c;
+}
+.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
+  .box-shadow(@style, rgba(0, 0, 0, @alpha));
 }
 @color: #4D926F;
@@ -171,7 +184,7 @@ blockquote {
 body > footer {
  text-align: left;
  margin-left: 10px;
-        font-style: italic;
+  font-style: italic;
  font-size: 18px;
  color: #888;
 }
@@ -580,7 +593,9 @@ td {
 }
 </textarea></form>
    <script>
-      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {});
+      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+        theme: "lesser-dark"
+      });
    </script>
    <p><strong>MIME types defined:</strong> <code>text/less</code>.</p>
diff --git a/imports/codemirror/mode/less/less.js b/imports/codemirror/mode/less/less.js
index dc584f02..1c20bd81 100644
--- a/imports/codemirror/mode/less/less.js
+++ b/imports/codemirror/mode/less/less.js
@@ -1,21 +1,26 @@
-CodeMirror.defineMode("less", function(config) {
+/*
+LESS mode - http://www.lesscss.org/
+Ported to CodeMirror by Peter Kroon
+*/
+CodeMirror.defineMode("css", function(config) {
  var indentUnit = config.indentUnit, type;
  function ret(style, tp) {type = tp; return style;}
  //html5 tags
  var tags = ["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","command","datalist","dd","del","details","dfn","dir","div","dl","dt","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","keygen","kbd","label","legend","li","link","map","mark","menu","meta","meter","nav","noframes","noscript","object","ol","optgroup","option","output","p","param","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strike","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr"];
  
  function inTagsArray(val){
-    for(var i=0; i<tags.length; i++){
+          for(var i=0; i<tags.length; i++){
-      if(val === tags[i]){
+                  if(val === tags[i]){
-        return true;
+                          return true;
-      }
+                  }
-    }
+          }
  }
  function tokenBase(stream, state) {
    var ch = stream.next();
-    if (ch == "@") {stream.eatWhile(/[\w\-]/); return ret("meta", stream.current());}
+        if (ch == "@") {stream.eatWhile(/[\w\-]/); return ret("meta", stream.current());}
    else if (ch == "/" && stream.eat("*")) {
      state.tokenize = tokenCComment;
      return tokenCComment(stream, state);
@@ -30,15 +35,15 @@ CodeMirror.defineMode("less", function(config) {
      state.tokenize = tokenString(ch);
      return state.tokenize(stream, state);
    }
-    else if (ch == "/") { // lesscss e.g.: .png will not be parsed as a class
+        else if (ch == "/") { // lesscss e.g.: .png will not be parsed as a class
-      if(stream.eat("/")){
+          if(stream.eat("/")){
-        state.tokenize = tokenSComment
+                state.tokenize = tokenSComment
        return tokenSComment(stream, state);
-      }else{
+          }else{
-        stream.eatWhile(/[\a-zA-Z0-9\-_.]/);
+            stream.eatWhile(/[\a-zA-Z0-9\-_.\s]/);
-        if(stream.peek() == ")" || stream.peek() == "/")return ret("string", "string");//let url(/images/logo.png) without quotes return as string
+                if(/\/|\)/.test(stream.peek() || stream.eol() || (stream.eatSpace() && stream.peek() == ")")))return ret("string", "string");//let url(/images/logo.png) without quotes return as string
        return ret("number", "unit");
-      }
+          }
    }
    else if (ch == "!") {
      stream.match(/^\s*\w*/);
@@ -48,66 +53,86 @@ CodeMirror.defineMode("less", function(config) {
      stream.eatWhile(/[\w.%]/);
      return ret("number", "unit");
    }
-    else if (/[,+>*\/]/.test(ch)) {//removed . dot character original was [,.+>*\/]
+    else if (/[,+<>*\/]/.test(ch)) {//removed . dot character original was [,.+>*\/]
      return ret(null, "select-op");
    }
    else if (/[;{}:\[\]()]/.test(ch)) { //added () char for lesscss original was [;{}:\[\]]
      if(ch == ":"){
-        stream.eatWhile(/[active|hover|link|visited]/);
+                stream.eatWhile(/[active|hover|link|visited]/);
-        if( stream.current().match(/active|hover|link|visited/)){
+                if( stream.current().match(/active|hover|link|visited/)){
-          return ret("tag", "tag");
+                  return ret("tag", "tag");
-        }else{
+                }else{
-          return ret(null, ch); 
+                  return ret(null, ch); 
-        }
+                }
-      }else{
+          }else{
-        return ret(null, ch);
+            return ret(null, ch);
-      }
+          }
    }
-    else if (ch == ".") { // lesscss
+        else if (ch == ".") { // lesscss
-      stream.eatWhile(/[\a-zA-Z0-9\-_]/);
+          stream.eatWhile(/[\a-zA-Z0-9\-_]/);
      return ret("tag", "tag");
    }
-    else if (ch == "#") { // lesscss
+        else if (ch == "#") { // lesscss
-      stream.match(/([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/);
+          //we don't eat white-space, we want the hex color and or id only
-      if(stream.current().length >1){
+          stream.eatWhile(/[A-Za-z0-9]/);
-        if(stream.current().match(/([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/) != null){
+          //check if there is a proper hex color length e.g. #eee || #eeeEEE
-          return ret("number", "unit");
+          if(stream.current().length ===4 || stream.current().length ===7){
-        }else{
+                  if(stream.current().match(/[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/,false) != null){//is there a valid hex color value present in the current stream
+                        //when not a valid hex value, parse as id
+                        if(stream.current().substring(1) != stream.current().match(/[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}/,false))return ret("atom", "tag");
+                        //eat white-space
+                        stream.eatSpace();
+                        //when hex value declaration doesn't end with [;,] but is does with a slash/cc comment treat it as an id, just like the other hex values that don't end with[;,]
+                        if( /[\/<>.(){!$%^&*_\-\\?=+\|#'~`]/.test(stream.peek()) )return ret("atom", "tag");
+                        //#time { color: #aaa }
+                        else if(stream.peek() == "}" )return ret("number", "unit");
+                        //we have a valid hex color value, parse as id whenever an element/class is defined after the hex(id) value e.g. #eee aaa || #eee .aaa
+                        else if( /[a-zA-Z\\]/.test(stream.peek()) )return ret("atom", "tag");
+                        //when a hex value is on the end of a line, parse as id
+                        else if(stream.eol())return ret("atom", "tag");
+                        //default
+                        else return ret("number", "unit");
+                  }else{//when not a valid hexvalue in the current stream e.g. #footer
+                        stream.eatWhile(/[\w\\\-]/);
+                        return ret("atom", "tag"); 
+                  }
+          }else{
+                stream.eatWhile(/[\w\\\-]/);            
+                return ret("atom", "tag");
+          }
+    }
+        else if (ch == "&") {
          stream.eatWhile(/[\w\-]/);
-          return ret("atom", "tag"); 
+          return ret(null, ch);
+        }
author	Valerio Virgillito	2012-05-03 16:08:49 -0700
committer	Valerio Virgillito	2012-05-03 16:08:49 -0700
commit	0e1c87871489c1d5d8deb609174d8876eb579169 (patch)
tree	f37c26fbab9151e6c4f50e3e786bdc96b9960014 /imports/codemirror/mode/less
parent	eb17fe1bbd05ad260e8a56918a3b396a03767e04 (diff)
parent	01ecdc4bda1aff7d39f429c76e57b10af6079c53 (diff)
download	ninja-0e1c87871489c1d5d8deb609174d8876eb579169.tar.gz

diff --git a/imports/codemirror/mode/less/index.html b/imports/codemirror/mode/less/index.html index bd3ef198..f7705205 100644 --- a/imports/codemirror/mode/less/index.html +++ b/imports/codemirror/mode/less/index.html
@@ -7,23 +7,36 @@
7	<script src="less.js"></script>	7	<script src="less.js"></script>
8	<style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd;}</style>	8	<style>.CodeMirror {background: #f8f8f8; border: 1px solid #ddd;}</style>
9	<link rel="stylesheet" href="../../doc/docs.css">	9	<link rel="stylesheet" href="../../doc/docs.css">
		10	<link rel="stylesheet" href="../../theme/lesser-dark.css">
10	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	11	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
11	</head>	12	</head>
12	<body>	13	<body>
13	<h1>CodeMirror: LESS mode</h1>	14	<h1>CodeMirror: LESS mode</h1>
14	<form><textarea id="code" name="code">	15	<form><textarea id="code" name="code">/* Some LESS code */
15	/* Some LESS code */
16		16
17	video {	17	@test_a: #eeeQQQ;//this is not a valid hex value and thus parsed as an element id
18	background-image:url('paper.gif');	18	@test_b: #eeeFFF//this is a valid hex value but the declaration doesn't end with a semicolon and thus parsed as an element id
		19
		20	#eee aaa .box
		21	{
		22	#test bbb {
		23	width: 500px;
		24	height: 250px;
		25	background-image: url(sheep.png), url(betweengrassandsky.png);
		26	background-position: center bottom, left top;
		27	background-repeat: no-repeat;
		28	}
19	}	29	}
20		30
21	.pre_class {	31	@base: #f938ab;
22	width: 500px;	32
23	height: 250px;	33	.box-shadow(@style, @c) when (iscolor(@c)) {
24	background-image: url(sheep.png), url(betweengrassandsky.png);	34	box-shadow: @style @c;
25	background-position: center bottom, left top;	35	-webkit-box-shadow: @style @c;
26	background-repeat: no-repeat;	36	-moz-box-shadow: @style @c;
		37	}
		38	.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
		39	.box-shadow(@style, rgba(0, 0, 0, @alpha));
27	}	40	}
28		41
29	@color: #4D926F;	42	@color: #4D926F;
@@ -171,7 +184,7 @@ blockquote {
171	body > footer {	184	body > footer {
172	text-align: left;	185	text-align: left;
173	margin-left: 10px;	186	margin-left: 10px;
174	font-style: italic;	187	font-style: italic;
175	font-size: 18px;	188	font-size: 18px;
176	color: #888;	189	color: #888;
177	}	190	}
@@ -580,7 +593,9 @@ td {
580	}	593	}
581	</textarea></form>	594	</textarea></form>
582	<script>	595	<script>
583	var editor = CodeMirror.fromTextArea(document.getElementById("code"), {});	596	var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
		597	theme: "lesser-dark"
		598	});
584	</script>	599	</script>
585		600
586	<p><strong>MIME types defined:</strong> <code>text/less</code>.</p>	601	<p><strong>MIME types defined:</strong> <code>text/less</code>.</p>


diff --git a/imports/codemirror/mode/less/less.js b/imports/codemirror/mode/less/less.js index dc584f02..1c20bd81 100644 --- a/imports/codemirror/mode/less/less.js +++ b/imports/codemirror/mode/less/less.js
@@ -1,21 +1,26 @@
1	CodeMirror.defineMode("less", function(config) {	1	/*
		2	LESS mode - http://www.lesscss.org/
		3	Ported to CodeMirror by Peter Kroon
		4	*/
		5
		6	CodeMirror.defineMode("css", function(config) {
2	var indentUnit = config.indentUnit, type;	7	var indentUnit = config.indentUnit, type;
3	function ret(style, tp) {type = tp; return style;}	8	function ret(style, tp) {type = tp; return style;}
4	//html5 tags	9	//html5 tags
5	var tags = ["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","command","datalist","dd","del","details","dfn","dir","div","dl","dt","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","keygen","kbd","label","legend","li","link","map","mark","menu","meta","meter","nav","noframes","noscript","object","ol","optgroup","option","output","p","param","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strike","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr"];	10	var tags = ["a","abbr","acronym","address","applet","area","article","aside","audio","b","base","basefont","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","command","datalist","dd","del","details","dfn","dir","div","dl","dt","em","embed","fieldset","figcaption","figure","font","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","keygen","kbd","label","legend","li","link","map","mark","menu","meta","meter","nav","noframes","noscript","object","ol","optgroup","option","output","p","param","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strike","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","title","tr","track","tt","u","ul","var","video","wbr"];
6		11
7	function inTagsArray(val){	12	function inTagsArray(val){
8	for(var i=0; i<tags.length; i++){	13	for(var i=0; i<tags.length; i++){
9	if(val === tags[i]){	14	if(val === tags[i]){
10	return true;	15	return true;
11	}	16	}
12	}	17	}
13	}	18	}
14		19
15	function tokenBase(stream, state) {	20	function tokenBase(stream, state) {
16	var ch = stream.next();	21	var ch = stream.next();
17		22
18	if (ch == "@") {stream.eatWhile(/[\w\-]/); return ret("meta", stream.current());}	23	if (ch == "@") {stream.eatWhile(/[\w\-]/); return ret("meta", stream.current());}
19	else if (ch == "/" && stream.eat("*")) {	24	else if (ch == "/" && stream.eat("*")) {
20	state.tokenize = tokenCComment;	25	state.tokenize = tokenCComment;
21	return tokenCComment(stream, state);	26	return tokenCComment(stream, state);
@@ -30,15 +35,15 @@ CodeMirror.defineMode("less", function(config) {
30	state.tokenize = tokenString(ch);	35	state.tokenize = tokenString(ch);
31	return state.tokenize(stream, state);	36	return state.tokenize(stream, state);
32	}	37	}
33	else if (ch == "/") { // lesscss e.g.: .png will not be parsed as a class	38	else if (ch == "/") { // lesscss e.g.: .png will not be parsed as a class
34	if(stream.eat("/")){	39	if(stream.eat("/")){
35	state.tokenize = tokenSComment	40	state.tokenize = tokenSComment
36	return tokenSComment(stream, state);	41	return tokenSComment(stream, state);
37	}else{	42	}else{
38	stream.eatWhile(/[\a-zA-Z0-9\-_.]/);	43	stream.eatWhile(/[\a-zA-Z0-9\-_.\s]/);
39	if(stream.peek() == ")" \|\| stream.peek() == "/")return ret("string", "string");//let url(/images/logo.png) without quotes return as string	44	if(/\/\|\)/.test(stream.peek() \|\| stream.eol() \|\| (stream.eatSpace() && stream.peek() == ")")))return ret("string", "string");//let url(/images/logo.png) without quotes return as string
40	return ret("number", "unit");	45	return ret("number", "unit");
41	}	46	}
42	}	47	}
43	else if (ch == "!") {	48	else if (ch == "!") {
44	stream.match(/^\s\w/);	49	stream.match(/^\s\w/);
@@ -48,66 +53,86 @@ CodeMirror.defineMode("less", function(config) {
48	stream.eatWhile(/[\w.%]/);	53	stream.eatWhile(/[\w.%]/);
49	return ret("number", "unit");	54	return ret("number", "unit");
50	}	55	}
51	else if (/[,+>\/]/.test(ch)) {//removed . dot character original was [,.+>\/]	56	else if (/[,+<>\/]/.test(ch)) {//removed . dot character original was [,.+>\/]
52	return ret(null, "select-op");	57	return ret(null, "select-op");
53	}	58	}
54	else if (/[;{}:\[\]()]/.test(ch)) { //added () char for lesscss original was [;{}:\[\]]	59	else if (/[;{}:\[\]()]/.test(ch)) { //added () char for lesscss original was [;{}:\[\]]
55	if(ch == ":"){	60	if(ch == ":"){
56	stream.eatWhile(/[active\|hover\|link\|visited]/);	61	stream.eatWhile(/[active\|hover\|link\|visited]/);
57	if( stream.current().match(/active\|hover\|link\|visited/)){	62	if( stream.current().match(/active\|hover\|link\|visited/)){
58	return ret("tag", "tag");	63	return ret("tag", "tag");
59	}else{	64	}else{
60	return ret(null, ch);	65	return ret(null, ch);
61	}	66	}
62	}else{	67	}else{
63	return ret(null, ch);	68	return ret(null, ch);
64	}	69	}
65	}	70	}
66	else if (ch == ".") { // lesscss	71	else if (ch == ".") { // lesscss
67	stream.eatWhile(/[\a-zA-Z0-9\-_]/);	72	stream.eatWhile(/[\a-zA-Z0-9\-_]/);
68	return ret("tag", "tag");	73	return ret("tag", "tag");
69	}	74	}
70	else if (ch == "#") { // lesscss	75	else if (ch == "#") { // lesscss
71	stream.match(/([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})/);	76	//we don't eat white-space, we want the hex color and or id only
72	if(stream.current().length >1){	77	stream.eatWhile(/[A-Za-z0-9]/);
73	if(stream.current().match(/([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})/) != null){	78	//check if there is a proper hex color length e.g. #eee \|\| #eeeEEE
74	return ret("number", "unit");	79	if(stream.current().length ===4 \|\| stream.current().length ===7){
75	}else{	80	if(stream.current().match(/[A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3}/,false) != null){//is there a valid hex color value present in the current stream
		81	//when not a valid hex value, parse as id
		82	if(stream.current().substring(1) != stream.current().match(/[A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3}/,false))return ret("atom", "tag");
		83	//eat white-space
		84	stream.eatSpace();
		85	//when hex value declaration doesn't end with [;,] but is does with a slash/cc comment treat it as an id, just like the other hex values that don't end with[;,]
		86	if( /[\/<>.(){!$%^&*_\-\\?=+\\|#'~`]/.test(stream.peek()) )return ret("atom", "tag");
		87	//#time { color: #aaa }
		88	else if(stream.peek() == "}" )return ret("number", "unit");
		89	//we have a valid hex color value, parse as id whenever an element/class is defined after the hex(id) value e.g. #eee aaa \|\| #eee .aaa
		90	else if( /[a-zA-Z\\]/.test(stream.peek()) )return ret("atom", "tag");
		91	//when a hex value is on the end of a line, parse as id
		92	else if(stream.eol())return ret("atom", "tag");
		93	//default
		94	else return ret("number", "unit");
		95	}else{//when not a valid hexvalue in the current stream e.g. #footer
		96	stream.eatWhile(/[\w\\\-]/);
		97	return ret("atom", "tag");
		98	}
		99	}else{
		100	stream.eatWhile(/[\w\\\-]/);
		101	return ret("atom", "tag");
		102	}
		103	}
		104	else if (ch == "&") {
76	stream.eatWhile(/[\w\-]/);	105	stream.eatWhile(/[\w\-]/);
77	return ret("atom", "tag");	106	return ret(null, ch);
		107	}