Add backend support for word wrap - https://github.com/mozilla/thimble.webmaker.org/issues/648

README.md

@@ -260,6 +260,7 @@ a number of read-only getters are available in order to access state information
 * `getLayout()` - returns an `Object` with three integer properties: `sidebarWidth`, `firstPaneWidth`, `secondPaneWidth`.  The `firstPaneWidth` refers to the editor, where `secondPaneWidth` is the preview.
 * `getTheme()` - returns the name of the current theme.
 * `getFontSize()` - returns the current font size as a string (e.g., `"12px"`).
+* `getWordWrap()` - returns the current word wrap setting as a `Boolean` (i.e., enabled or disabled).
 
 **NOTE**: calling these getters before the `ready()` callback on the bramble instance
 won't do what you want.
@@ -294,6 +295,8 @@ to be notified when the action completes:
 * `useDesktopPreview([callback])` - uses a Desktop view in the preview, as it would look on a desktop computer (default)
 * `enableJavaScript([callback])` - turns on JavaScript execution for the preview (default)
 * `disableJavaScript([callback])` - turns off JavaScript execution for the preview
+* `enableWordWrap([callback])` - turns on word wrap for the editor (default)
+* `disableWordWrap([callback])` - turns off word wrap for the editor
 
 ## Bramble Instance Events
 
@@ -306,6 +309,7 @@ the following events:
 * `"sidebarChange"` - triggered whenever the sidebar is hidden or shown. It includes an `Object` with a `visible` property set to `true` or `false`
 * `"themeChange"` - triggered whenever the theme changes. It inclues an `Object` with a `theme` property that indicates the new theme
 * `"fontSizeChange"` - triggered whenever the font size changes. It includes an `Object` with a `fontSize` property that indicates the new size (e.g., `"12px"`).
+* `"wordWrapChange"` - triggered whenever the word wrap value changes. It includes an `Object` with a `wordWrap` property that indicates the new value (e.g., `true` or `false`).
 
 There are also high-level events for changes to files:
 

src/bramble/client/StateManager.js

@@ -97,6 +97,10 @@ define(function() {
             fullPath: {
                 get: function()  { return getString(storage, "fullPath"); },
                 set: function(v) { storage.setItem(prefix("fullPath"), v); }
+            },
+            wordWrap: {
+                get: function()  { return getBool(storage, "wordWrap"); },
+                set: function(v) { storage.setItem(prefix("wordWrap"), v); }
             }
         });
     }

src/bramble/client/main.js

@@ -166,6 +166,7 @@ define([
         self.getTheme = function() { return _state.theme; };
         self.getFontSize = function() { return _state.fontSize; };
         self.getSidebarVisible = function() { return _state.sidebarVisible; };
+        self.getWordWrap = function() { return _state.wordWrap; };
         self.getLayout = function() {
             return {
                 sidebarWidth: _state.sidebarWidth,
@@ -221,6 +222,7 @@ define([
                     _state.secondPaneWidth = data.secondPaneWidth;
                     _state.previewMode = data.previewMode;
                     _state.theme = data.theme;
+                    _state.wordWrap = data.wordWrap;
 
                     setReadyState(Bramble.READY);
                 }
@@ -254,6 +256,8 @@ define([
                         _state.fontSize = data.fontSize;
                     } else if (eventName === "sidebarChange") {
                         _state.sidebarVisible = data.visible;
+                    } else if (eventName === "wordWrapChange") {
+                        _state.wordWrap = data.wordWrap;
                     }
 
                     debug("triggering remote event", eventName, data);
@@ -359,7 +363,8 @@ define([
                                 sidebarWidth: _state.sidebarWidth,
                                 firstPaneWidth: _state.firstPaneWidth,
                                 secondPaneWidth: _state.secondPaneWidth,
-                                previewMode: _state.previewMode
+                                previewMode: _state.previewMode,
+                                wordWrap: _state.wordWrap
                             }
                         };
                         _brambleWindow.postMessage(JSON.stringify(initMessage), _iframe.src);
@@ -602,5 +607,13 @@ define([
         this._executeRemoteCommand({commandCategory: "bramble", command: "BRAMBLE_DISABLE_SCRIPTS"}, callback);
     };
 
+    BrambleProxy.prototype.enableWordWrap = function(callback) {
+        this._executeRemoteCommand({commandCategory: "bramble", command: "BRAMBLE_ENABLE_WORD_WRAP"}, callback);
+    };
+
+    BrambleProxy.prototype.disableWordWrap = function(callback) {
+        this._executeRemoteCommand({commandCategory: "bramble", command: "BRAMBLE_DISABLE_WORD_WRAP"}, callback);
+    };
+
     return Bramble;
 });

src/extensions/default/bramble/lib/RemoteCommandHandler.js

@@ -12,7 +12,8 @@ define(function (require, exports, module) {
     var StatusBar      = brackets.getModule("widgets/StatusBar");
     var WorkspaceManager = brackets.getModule("view/WorkspaceManager");
     var BrambleEvents = brackets.getModule("bramble/BrambleEvents");
-    
+    var PreferencesManager = brackets.getModule("preferences/PreferencesManager");
+
     var PostMessageTransport = require("lib/PostMessageTransport");
     var Theme = require("lib/Theme");
     var UI = require("lib/UI");
@@ -95,6 +96,12 @@ define(function (require, exports, module) {
         case "BRAMBLE_SHOW_STATUSBAR":
             StatusBar.enable();
             break;
+        case "BRAMBLE_ENABLE_WORD_WRAP":
+            PreferencesManager.set("wordWrap", true);
+            break;
+        case "BRAMBLE_DISABLE_WORD_WRAP":
+            PreferencesManager.set("wordWrap", false);
+            break;
         case "RESIZE":
             // The host window was resized, update all panes
             WorkspaceManager.recomputeLayout(true);

src/extensions/default/bramble/lib/RemoteEvents.js

@@ -9,6 +9,7 @@ define(function (require, exports, module) {
     var MainViewManager = brackets.getModule("view/MainViewManager");
     var ViewCommandHandlers = brackets.getModule("view/ViewCommandHandlers");
     var Path = brackets.getModule("filesystem/impls/filer/FilerUtils").Path;
+    var PreferencesManager = brackets.getModule("preferences/PreferencesManager");
     var UI = require("lib/UI");
     var Theme = require("lib/Theme");
 
@@ -97,6 +98,14 @@ define(function (require, exports, module) {
                 fontSize: fontSize
             });
         });
+
+        // Listen for changes to word wrap
+        PreferencesManager.on("change", "wordWrap", function () {
+            sendEvent({
+                type: "bramble:wordWrapChange",
+                wordWrap: PreferencesManager.get("wordWrap")
+            });
+        });
     }
 
     /**
@@ -121,7 +130,8 @@ define(function (require, exports, module) {
             filename: filename,
             previewMode: UI.getPreviewMode(),
             fontSize: ViewCommandHandlers.getFontSize(),
-            theme: Theme.getTheme()
+            theme: Theme.getTheme(),
+            wordWrap: PreferencesManager.get("wordWrap")
         });
     }
 

src/extensions/default/bramble/lib/UI.js

@@ -15,7 +15,8 @@ define(function (require, exports, module) {
         FileSystem          = brackets.getModule("filesystem/FileSystem"),
         ViewCommandHandlers = brackets.getModule("view/ViewCommandHandlers"),
         SidebarView         = brackets.getModule("project/SidebarView"),
-        WorkspaceManager    = brackets.getModule("view/WorkspaceManager");
+        WorkspaceManager    = brackets.getModule("view/WorkspaceManager"),
+        PreferencesManager  = brackets.getModule("preferences/PreferencesManager");
 
     var PhonePreview  = require("text!lib/Mobile.html");
     var PostMessageTransport = require("lib/PostMessageTransport");
@@ -90,6 +91,11 @@ define(function (require, exports, module) {
             }
         }
 
+        var wordWrap = BrambleStartupState.ui("wordWrap");
+        if(typeof wordWrap === "boolean") {
+            PreferencesManager.set("wordWrap", wordWrap);
+        }
+
         var sidebarWidth = BrambleStartupState.ui("sidebarWidth");
         if(sidebarWidth) {
             SidebarView.resize(sidebarWidth);

src/extensions/default/bramble/main.js

@@ -187,7 +187,8 @@ define(function (require, exports, module) {
                 sidebarWidth: data.state.sidebarWidth,
                 firstPaneWidth: data.state.firstPaneWidth,
                 secondPaneWidth: data.state.secondPaneWidth,
-                previewMode: data.state.previewMode
+                previewMode: data.state.previewMode,
+                wordWrap: data.state.wordWrap
             });
 
             deferred.resolve();