Cleanup and improve CodeMirror integration

Fixed some issues, improved css/layout, added autoscroll to invalid line on error

plugins/managesieve/codemirror/initeditor.js

@@ -1,35 +0,0 @@
-var cmeditor;
-
-function createErrorElem(msg) 
-{
-  var marker = document.createElement("div");
-  marker.style.color = "#822";
-  marker.innerHTML = "●";
-  marker.title = msg;
-  return marker;
-}
-
-if (window.rcmail) {
-  rcmail.addEventListener('init', function(evt) {
-    var textArea = document.getElementById('rawfiltersettxt');
-    if (textArea) {
-      cmeditor = CodeMirror.fromTextArea(textArea, {
-        mode: 'sieve',
-        lineNumbers: true,
-        gutters: ["CodeMirror-linenumbers", "errorGutter"],
-        styleActiveLine: true
-      });
-      
-      // fetching errors from environment and setting the line background 
-      // and a gutter element with the error message accordingly
-      var errors = rcmail.env.sieve_errors; 
-      if (errors !== undefined) {
-        errors.forEach(function(err) {
-          var lineNo = Number(err.line) - 1;
-          cmeditor.addLineClass(lineNo, 'background', 'line-error');
-          cmeditor.setGutterMarker(lineNo, 'errorGutter', createErrorElem(err.msg));
-        });
-      }
-    }
-  });
-}

plugins/managesieve/codemirror/overrides.css

@@ -1,11 +0,0 @@
-.CodeMirror {
-  height: 600px;
-}
-
-.CodeMirror-linebackground.line-error {
-	background-color: #f66;
-}
-
-.errorGutter {
-	width: 0.8em;
-}

plugins/managesieve/lib/Roundcube/rcube_sieve_engine.php

@@ -1309,7 +1309,7 @@ class rcube_sieve_engine
                 'rows' => '15'
         ));
 
-        $out .= $txtarea->show($script_post !== null ? $script_post : ($script !== false ? $script : ''));
+        $out .= $txtarea->show($script_post !== null ? $script_post : ($script !== false ? rtrim($script) : ''));
 
         $this->rc->output->add_gui_object('sievesetrawform', 'filtersetrawform');
         $this->plugin->include_stylesheet('codemirror/lib/codemirror.css');
@@ -1317,9 +1317,6 @@ class rcube_sieve_engine
         $this->plugin->include_script('codemirror/addon/selection/active-line.js');
         $this->plugin->include_script('codemirror/mode/sieve/sieve.js');
 
-        $this->plugin->include_script('codemirror/initeditor.js');
-        $this->plugin->include_stylesheet('codemirror/overrides.css');
-
         if ($script === false) {
             $this->rc->output->show_message('managesieve.filterunknownerror', 'error');
         }

plugins/managesieve/managesieve.js

@@ -53,6 +53,7 @@ if (window.rcmail) {
       }
       else if (rcmail.gui_objects.sievesetrawform) {
         rcmail.enable_command('plugin.managesieve-save', true);
+        sieve_raw_editor_init();
       }
       else {
         rcmail.enable_command('plugin.managesieve-add', 'plugin.managesieve-setadd', !rcmail.env.sieveconnerror);
@@ -1025,6 +1026,53 @@ function sieve_form_init()
   });
 }
 
+/*********************************************************/
+/*********        RAW editor methods             *********/
+/*********************************************************/
+
+var cmeditor;
+
+function cmCreateErrorElem(msg)
+{
+  var marker = document.createElement("div");
+  marker.style.color = "#822";
+  marker.innerHTML = "●";
+  marker.title = msg;
+
+  return marker;
+}
+
+function cmScrollToError()
+{
+  var line = $('.CodeMirror-lines .line-error'),
+    scroll = $('.CodeMirror-scroll'),
+    h = line.parent();
+
+  scroll.scrollTop(line.offset().top - scroll.offset().top - Math.round(scroll.height()/2));
+}
+
+function sieve_raw_editor_init()
+{
+  var textArea = document.getElementById('rawfiltersettxt');
+  if (textArea && !cmeditor) {
+    cmeditor = CodeMirror.fromTextArea(textArea, {
+      mode: 'sieve',
+      lineNumbers: true,
+      gutters: ["CodeMirror-linenumbers", "errorGutter"],
+      styleActiveLine: true
+    });
+
+    // fetching errors from environment and setting the line background
+    // and a gutter element with the error message accordingly
+    $.each(rcmail.env.sieve_errors || [], function(i, err) {
+      var lineNo = Number(err.line) - 1;
+      cmeditor.addLineClass(lineNo, 'background', 'line-error');
+      cmeditor.setGutterMarker(lineNo, 'errorGutter', cmCreateErrorElem(err.msg));
+      if (!i) cmScrollToError();
+    });
+  }
+}
+
 
 /*********************************************************/
 /*********           Mail UI methods             *********/

plugins/managesieve/managesieve.php

@@ -240,9 +240,6 @@ class managesieve extends rcube_plugin
         // load localization
         $this->add_texts('localization/', array('filters','managefilters'));
 
-        // include main js script
-        $this->include_script('managesieve.js');
-
         $engine->saveraw();
     }
 

plugins/managesieve/skins/classic/managesieve.css

@@ -332,14 +332,6 @@ a.button.disabled
   vertical-align: middle;
 }
 
-#filter-form #rawfiltersettxt {
-	width: 98%;
-	min-height: 400px;
-	max-width: none;
-	font-family: monospace;
-}
-
-
 /* smart multi-row input field */
 .listarea
 {
@@ -444,3 +436,47 @@ body.iframe.mail #filter-form
 #vacationform input.button {
   margin-left: 10px;
 }
+
+/* RAW editor and CodeMirror overrides */
+
+.raweditor textarea {
+  border: none;
+  border-radius: 0;
+  max-width: none !important;
+  box-shadow: none;
+  font-family: monospace;
+  width: 99%;
+  min-height: 300px;
+  padding-left: 40px;
+}
+
+.raweditor textarea,
+.raweditor .CodeMirror {
+  position: absolute;
+  top: 34px;
+  bottom: 45px;
+  right: 0;
+  left: 0;
+  height: auto;
+  background-color: #fdfdfd;
+  border-bottom: 1px solid #eee;
+}
+
+.raweditor .CodeMirror-linebackground.line-error {
+  background-color: #f00;
+  opacity: 0.4;
+}
+
+.raweditor .errorGutter {
+  width: 0.8em;
+}
+
+.raweditor #footer {
+  position: absolute;
+  bottom: 5px;
+}
+
+body.iframe.raweditor {
+  min-width: 100px;
+  overflow: hidden;
+}

plugins/managesieve/skins/classic/templates/seteditraw.html

@@ -4,7 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 </head>
-<body class="iframe">
+<body class="iframe raweditor">
 
 <div id="filtersetraw-title" class="boxtitle"><roundcube:label name="managesieve.filterseteditraw" /></div>
 

plugins/managesieve/skins/larry/managesieve.css

@@ -317,14 +317,6 @@ a.button.disabled
   vertical-align: middle;
   max-width: 280px;
 }
-
-#filter-form #rawfiltersettxt {
-	width: 98%;
-	min-height: 400px;
-	max-width: none;
-	font-family: monospace;
-}
-
 /* revert larry style button */
 #filter-form input.button
 {
@@ -455,3 +447,47 @@ body.iframe.mail #filter-form
 #vacationform input.button {
   margin-left: 10px;
 }
+
+/* RAW editor and CodeMirror overrides */
+
+.raweditor textarea {
+  border: none;
+  border-radius: 0;
+  max-width: none !important;
+  box-shadow: none;
+  font-family: monospace;
+  width: 99%;
+  min-height: 300px;
+  padding-left: 40px;
+}
+
+.raweditor textarea,
+.raweditor .CodeMirror {
+  position: absolute;
+  top: 34px;
+  bottom: 45px;
+  right: 0;
+  left: 0;
+  height: auto;
+  background-color: #fdfdfd;
+  border-bottom: 1px solid #eee;
+}
+
+.raweditor .CodeMirror-linebackground.line-error {
+  background-color: #f00;
+  opacity: 0.4;
+}
+
+.raweditor .errorGutter {
+  width: 0.8em;
+}
+
+.raweditor #footer {
+  position: absolute;
+  bottom: 5px;
+}
+
+body.iframe.raweditor {
+  min-width: 100px;
+  overflow: hidden;
+}

plugins/managesieve/skins/larry/templates/seteditraw.html

@@ -4,7 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 </head>
-<body class="iframe floatingbuttons">
+<body class="iframe raweditor">
 
 <div id="filtersetraw-title" class="boxtitle"><roundcube:label name="managesieve.filterseteditraw" /></div>