Add editor.html dropdown Soft Wrap

demo/startup.js

@@ -150,7 +150,11 @@ exports.launch = function(env) {
             modeEl.value = "text";
         }
 
-        wrapModeEl.checked = doc.getUseWrapMode() ? "checked" : "";
+        if (!doc.getUseWrapMode()) {
+            wrapModeEl.value = "off";
+        } else {
+            wrapModeEl.value = doc.getWrapLimit();
+        }
         env.editor.focus();
     });
 
@@ -163,11 +167,32 @@ exports.launch = function(env) {
     });
 
     bindDropdown("keybinding", function(value) {
-      env.editor.setKeyboardHandler(keybindings[value]);
+        env.editor.setKeyboardHandler(keybindings[value]);
     });
 
     bindDropdown("fontsize", function(value) {
-      document.getElementById("editor").style["font-size"] = value;
+        document.getElementById("editor").style["font-size"] = value;
+    });
+
+    bindDropdown("soft_wrap", function(value) {
+        var session = env.editor.getSession();
+        var renderer = env.editor.renderer;
+        switch (value) {
+            case "off":
+                session.setUseWrapMode(false);
+                renderer.setPrintMarginColumn(80);
+                break;
+            case "40":
+                session.setUseWrapMode(true);
+                session.setWrapLimit(40);
+                renderer.setPrintMarginColumn(40);
+                break;
+            case "80":
+                session.setUseWrapMode(true);
+                session.setWrapLimit(80);
+                renderer.setPrintMarginColumn(80);
+                break;
+        }
     });
 
     bindCheckbox("select_style", function(checked) {
@@ -190,10 +215,6 @@ exports.launch = function(env) {
         env.editor.renderer.setShowPrintMargin(checked);
     });
 
-    bindCheckbox("soft_wrap", function(checked) {
-        env.editor.getSession().setUseWrapMode(checked);
-    });
-
     function bindCheckbox(id, callback) {
         var el = document.getElementById(id);
         var onCheck = function() {

editor.html

@@ -74,7 +74,6 @@
           <option value="php">PHP</option>
         </select>
       </td>
-
       <td align="right">
         <label for="keybinding">Key Binding:</label>
         <select id="keybinding" size="1">
@@ -84,6 +83,14 @@
           <option value="custom">Custom</option>
         </select>
       </td>
+      <td align="right">
+        <label for="soft_wrap">Soft Wrap:</label>
+        <select id="soft_wrap" size="1">
+          <option value="off">Off</option>
+          <option value="40">40 Chars</option>
+          <option value="80">80 Chars</option>
+        </select>
+      </td>
       <td align="right">
         <label for="show_gutter">Show Gutter</label>
         <input type="checkbox" id="show_gutter" checked>
@@ -92,10 +99,6 @@
         <label for="show_print_margin">Show Print Margin</label>
         <input type="checkbox" id="show_print_margin" checked>
       </td>
-      <td align="right">
-        <label for="soft_wrap">Soft Wrap</label>
-        <input type="checkbox" id="soft_wrap">
-      </td>
       </tr>
     </table>
 

lib/ace/edit_session.js

@@ -656,6 +656,7 @@ var EditSession = function(text, mode) {
         if (wrapLimit != this.$wrapLimit) {
             this.$wrapLimit = wrapLimit;
             this.$updateWrapData(0, this.getLength() - 1);
+            this._dispatchEvent("changeWrapMode");
         }
     };
 

lib/ace/virtual_renderer.js

@@ -293,18 +293,18 @@ var VirtualRenderer = function(container, theme) {
     this.getMouseEventTarget = function() {
         return this.content;
     };
-    
+
     this.getTextAreaContainer = function() {
         return this.scroller;
     };
-    
+
     this.moveTextAreaToCursor = function(textarea) {
         var pos = this.$cursorLayer.getPixelPosition();
         if (!pos)
             return;
-            
+
         textarea.style.left = (pos.left + this.$padding) + "px";
-        textarea.style.top = pos.top + "px";        
+        textarea.style.top = pos.top + "px";
     };
 
     this.getFirstVisibleRow = function() {