Textbox to enter project/system description is now syntax-highlighted.

changelog.html

@@ -57,6 +57,8 @@ Upcoming changes</a>
 <ul class=image>
   <li class=rfe>
     Groovy script console is now syntax highlighted.
+  <li class=rfe>
+    Text area to enter description is now syntax highlighted.
 </ul>
 </div><!--=TRUNK-END=-->
 

core/pom.xml

@@ -392,7 +392,7 @@ THE SOFTWARE.
     <dependency>
       <groupId>org.kohsuke.stapler</groupId>
       <artifactId>stapler-adjunct-codemirror</artifactId>
-      <version>1.0</version>
+      <version>1.1</version>
     </dependency>
     <dependency><!-- this helps us see the source code of the control while we edit Jenkins. -->
       <groupId>org.kohsuke.stapler</groupId>

core/src/main/resources/hudson/model/AbstractModelObject/descriptionForm.jelly

@@ -34,7 +34,8 @@ THE SOFTWARE.
     <form action="submitDescription" method="post">
       <table>
         <f:entry help="${app.markupFormatter.helpUrl}">
-          <f:textarea name="description" value="${it.description}" />
+          <f:textarea name="description" value="${it.description}"
+                      codemirror-mode="htmlmixed" codemirror-config="mode:'text/html'"/>
         </f:entry>
       </table>
       <div align="right">

core/src/main/resources/hudson/model/AbstractModelObject/editDescription.jelly

@@ -33,7 +33,8 @@ THE SOFTWARE.
       <form action="submitDescription" method="post">
         <table>
           <f:entry help="${app.markupFormatter.helpUrl}">
-            <f:textarea name="description" value="${it.description}" />
+            <f:textarea name="description" value="${it.description}"
+                        codemirror-mode="htmlmixed" codemirror-config="mode:'text/html'"/>
           </f:entry>
         </table>
         <f:submit value="${%Submit}" />

core/src/main/resources/hudson/model/Hudson/configure.jelly

@@ -39,7 +39,8 @@ THE SOFTWARE.
         ${it.rootDir}
       </f:entry>
       <f:entry title="${%System Message}" help="/help/system-config/systemMessage.html">
-        <f:textarea name="system_message" value="${it.systemMessage}" />
+        <f:textarea name="system_message" value="${it.systemMessage}"
+                    codemirror-mode="htmlmixed" codemirror-config="mode:'text/html'" />
       </f:entry>
       <f:entry title="${%# of executors}" field="numExecutors">
         <f:textbox />

core/src/main/resources/lib/form/textarea.jelly

@@ -51,15 +51,31 @@ THE SOFTWARE.
       If @field is specified, this will be inferred automatically,
       which is the recommended approach.
     </st:attribute>
+    <st:attribute name="codemirror-mode">
+      Turns this text area into CodeMirror-assisted code editing text area.
+      This attribute specifies the mode of CodeMirror, such as "text/x-java".
+      See http://codemirror.net/ for more details.
+    </st:attribute>
+    <st:attribute name="codemirror-config">
+      Specifies additional key/value pairs in the JSON format (except the start and end bracket)
+      to be passed as CodeMirror option object.
+    </st:attribute>
   </st:documentation>
 
   <f:prepareDatabinding />
   <j:set var="value" value="${attrs.value ?: instance[attrs.field] ?: attrs.default}" />
+  <j:if test="${attrs['codemirror-mode']!=null}">
+    <st:adjunct includes="
+        org.kohsuke.stapler.codemirror.mode.${attrs['codemirror-mode']}.${attrs['codemirror-mode']},
+        org.kohsuke.stapler.codemirror.theme.default"/>
+  </j:if>
   <textarea id="${attrs.id}" style="${attrs.style}"
             name ="${attrs.name ?: '_.'+attrs.field}"
-            class="setting-input ${attrs.checkUrl!=null?'validated':''} ${attrs.class}"
+            class="setting-input ${attrs.checkUrl!=null?'validated':''} ${attrs['codemirror-mode']!=null?'codemirror':''} ${attrs.class}"
             checkUrl="${attrs.checkUrl}"
-            rows="${h.determineRows(value)}">
+            rows="${h.determineRows(value)}"
+            codemirror-mode="${attrs['codemirror-mode']}"
+            codemirror-config="${attrs['codemirror-config']}">
     <st:out value="${value}" />
   </textarea>
   <!-- resize handle -->

war/src/main/webapp/scripts/hudson-behavior.js

@@ -723,6 +723,15 @@ var hudsonRules = {
         e = null; // avoid memory leak
     },
 
+    "TEXTAREA.codemirror" : function(e) {
+        var h = e.clientHeight;
+        var config = e.getAttribute("codemirror-config") || "";
+        config = eval('({'+config+'})');
+        var w = CodeMirror.fromTextArea(e,config).getWrapperElement();
+        w.setAttribute("style","border:1px solid black;");
+        w.style.height = h+"px";
+    },
+
 // deferred client-side clickable map.
 // this is useful where the generation of <map> element is time consuming
     "IMG[lazymap]" : function(e) {
@@ -1232,8 +1241,10 @@ function replaceDescription() {
         {
           onComplete : function(x) {
             d.innerHTML = x.responseText;
-            Behaviour.applySubtree(d);
-            d.getElementsByTagName("TEXTAREA")[0].focus();
+            evalInnerHtmlScripts(x.responseText,function() {
+                Behaviour.applySubtree(d);
+                d.getElementsByTagName("TEXTAREA")[0].focus();
+            });
           }
         }
     );