use codemirror for plugin editor

app/assets/javascripts/application.js

@@ -10,7 +10,6 @@
 //= require ./nested_form.js
 //= require ./noapi.js
 //= require ./rest.js
-//= require ./tabby.js
 //= require ./validate.min.js
 //= require ./channels.js
 //= require ./sidebar.js

app/views/docs/tutorials.html.erb

@@ -116,6 +116,7 @@
     <h3>Twitter</h3>
     <ul>
     <li><a title="Send Twitter Status Updates using the ThingTweet App, Twitter Proxy from ThingSpeak" href="http://community.thingspeak.com/twitter/send-status-updates-using-the-thingtweet-app/">Send Status Updates using the ThingTweet App</a></li>
+    <li><a href="http://community.thingspeak.com/2014/10/official-tutorial-sending-tweets-automatically-every-morning-with-timecontrol/">Sending Tweets Automatically Every Morning With TimeControl</a></li>
     </ul>
     <h3>WordPress</h3>
     <ul>

app/views/plugins/edit.html.erb

@@ -1,8 +1,24 @@
+<link href="//thingspeak.com/codemirror/codemirror.css" rel="stylesheet" />
+<link href="//thingspeak.com/codemirror/neat.css" rel="stylesheet" />
+<script type="text/javascript" src="//thingspeak.com/codemirror/codemirror.js"></script>
+<script type="text/javascript" src="//thingspeak.com/codemirror/xml.js"></script>
+<script type="text/javascript" src="//thingspeak.com/codemirror/javascript.js"></script>
+<script type="text/javascript" src="//thingspeak.com/codemirror/css.js"></script>
+<script type="text/javascript" src="//thingspeak.com/codemirror/htmlmixed.js"></script>
+
+<style type="text/css">
+  /* codemirror overrides */
+  pre { overflow: inherit !important; }
+  .activeline { background: #e8f2ff !important; }
+  .CodeMirror { border: 1px solid #ccc; }
+  .CodeMirror-scroll { height: 300px; }
+</style>
+
 <div class="col-sm-8 col-xs-8">
 
   <ol class="breadcrumb" data-no-turbolink>
     <li><%= link_to t(:plugins), plugins_path %></li>
-    <li><%= link_to plugin_path(@plugin.id) do %> <%= t(:plugin) %> <%= @plugin.id %><% end %></li>
+    <li><%= link_to plugin_path(@plugin.id) do %><%= t(:plugin) %> <%= @plugin.id %><% end %></li>
     <li class="active"><%= t(:edit) %></li>
   </ol>
 
@@ -56,11 +72,54 @@
 </div>
 
 <script type="text/javascript">
+
   // when document is ready
   $(document).on('page:load ready', function() {
 
-    // allow tabs to work in textareas
-    $("textarea").tabby();
+    // set html codemirror
+    var html_line = '';
+    var html_editor = CodeMirror.fromTextArea(document.getElementById("plugin_html"), {
+      lineNumbers: true,
+      indentUnit: 2,
+      extraKeys: {Tab: function(cm) { cm.replaceSelection("  ", "end"); }},
+      matchBrackets: true,
+      mode: "text/html",
+      height: '300px',
+      onCursorActivity: function() {
+        html_editor.setLineClass(html_line, null, null);
+        html_line = html_editor.setLineClass(html_editor.getCursor().line, null, "activeline");
+      }
+    });
+
+    // set css codemirror
+    var css_line = '';
+    var css_editor = CodeMirror.fromTextArea(document.getElementById("plugin_css"), {
+      lineNumbers: true,
+      indentUnit: 2,
+      extraKeys: {Tab: function(cm) { cm.replaceSelection("  ", "end"); }},
+      matchBrackets: true,
+      mode: "text/html",
+      height: '300px',
+      onCursorActivity: function() {
+        css_editor.setLineClass(css_line, null, null);
+        css_line = css_editor.setLineClass(css_editor.getCursor().line, null, "activeline");
+      }
+    });
+
+    // set js codemirror
+    var js_line = '';
+    var js_editor = CodeMirror.fromTextArea(document.getElementById("plugin_js"), {
+      lineNumbers: true,
+      indentUnit: 2,
+      extraKeys: {Tab: function(cm) { cm.replaceSelection("  ", "end"); }},
+      matchBrackets: true,
+      mode: "text/html",
+      height: '300px',
+      onCursorActivity: function() {
+        js_editor.setLineClass(js_line, null, null);
+        js_line = js_editor.setLineClass(js_editor.getCursor().line, null, "activeline");
+      }
+    });
 
     // clears status message
     function clearStatus() {

app/views/plugins/index.html.erb

@@ -29,7 +29,7 @@
               </h4>
               <div class="btn-group btn-group-sm">
                 <%= link_to T(:view), plugin_path(p.id), :target => '_blank', class: 'btn btn-default' %>
-                <%= link_to T(:edit), edit_plugin_path(p.id), class: 'btn btn-default' %>
+                <%= link_to T(:edit), edit_plugin_path(p.id), class: 'btn btn-default', 'data-no-turbolink' => 'true' %>
               </div>
             </td>
             <td><%= p.created_at.strftime("%Y-%m-%d") %></td>

config/locales/en.yml

@@ -358,6 +358,7 @@ en:
   timecontrol_days: 'days'
   timecontrol_delete: "Delete TimeControl"
   timecontrol_delete_message: "Want to delete this TimeControl?"
+  timecontrol_edit: "Edit TimeControl"
   timecontrol_error: "There were some problems creating your TimeControl:"
   timecontrol_fuzzy_time: 'fuzzy time'
   timecontrol_max_message: "You have reached the maximum number of TimeControls available per user. Please delete an existing TimeControl before adding a new one."