escape line breaks in value input

Author: corevo

src/formatCommand.js

@@ -20,56 +20,56 @@
 var declaredVars = {};
 
 function xlateArgument(value) {
-    value = value.replace(/^\s+/, '');
-    value = value.replace(/\s+$/, '');
-    var r;
-    var r2;
-    var parts = [];
-    if ((r = /\$\{/.exec(value))) {
-        var regexp = /\$\{(.*?)\}/g;
-        var lastIndex = 0;
-        while ( (r2 = regexp.exec(value)) ) {
-            if (declaredVars[r2[1]]) {
-                if (r2.index - lastIndex > 0) {
-                    parts.push(string(value.substring(lastIndex, r2.index)));
-                }
-                parts.push(declaredVars[r2[1]]);
-                lastIndex = regexp.lastIndex;
-            } else if (r2[1] == "nbsp") {
-                if (r2.index - lastIndex > 0) {
-                    parts.push(declaredVars[string(value.substring(lastIndex, r2.index))]);
-                }
-                parts.push(nonBreakingSpace());
-                lastIndex = regexp.lastIndex;
-            }
+  value = value.replace(/^\s+/, "");
+  value = value.replace(/\s+$/, "");
+  var r;
+  var r2;
+  var parts = [];
+  if ((r = /\$\{/.exec(value))) {
+    var regexp = /\$\{(.*?)\}/g;
+    var lastIndex = 0;
+    while ((r2 = regexp.exec(value))) {
+      if (declaredVars[r2[1]]) {
+        if (r2.index - lastIndex > 0) {
+          parts.push(string(value.substring(lastIndex, r2.index)));
         }
-        if (lastIndex < value.length) {
-            parts.push(string(value.substring(lastIndex, value.length)));
+        parts.push(declaredVars[r2[1]]);
+        lastIndex = regexp.lastIndex;
+      } else if (r2[1] == "nbsp") {
+        if (r2.index - lastIndex > 0) {
+          parts.push(declaredVars[string(value.substring(lastIndex, r2.index))]);
         }
-        return parts.join("");
-    } else {
-        return string(value);
+        parts.push(nonBreakingSpace());
+        lastIndex = regexp.lastIndex;
+      }
     }
+    if (lastIndex < value.length) {
+      parts.push(string(value.substring(lastIndex, value.length)));
+    }
+    return parts.join("");
+  } else {
+    return string(value);
+  }
 }
 
 function string(value) {
-    if (value != null) {
-        value = value.replace(/\\/g, '\\\\');
-        value = value.replace(/\"/g, '\\"');
-        value = value.replace(/\r/g, '\\r');
-        value = value.replace(/\n/g, '\\n');
-        return value;
-    } else {
-        return '';
-    }
+  if (value != null) {
+    value = value.replace(/\\\\/g, "\\");
+    value = value.replace(/\\r/g, "\r");
+    value = value.replace(/\\n/g, "\n");
+    return value;
+  } else {
+    return "";
+  }
 }
 
-function handleFormatCommand(message, sender, response) {
-    if (message.storeStr) {
-        declaredVars[message.storeVar] = message.storeStr;
-    } else if (message.echoStr) {
-        window.addLog("echo: " + message.echoStr);
-    }
+function handleFormatCommand(message) {
+  if (message.storeStr) {
+    declaredVars[message.storeVar] = message.storeStr;
+  } else if (message.echoStr) {
+    window.addLog("echo: " + message.echoStr);
+  }
 }
 
 browser.runtime.onMessage.addListener(handleFormatCommand);
+

src/neo/__test__/models/Command.spec.js

@@ -47,6 +47,11 @@ describe("Command", () => {
     command.setValue("123456");
     expect(command.value).toBe("123456");
   });
+  it("should escape new lines when value is set", () => {
+    const command = new Command();
+    command.setValue("Hello\nWorld!");
+    expect(command.value).toBe("Hello\\nWorld!");
+  });
   it("should initialize the primitives with empty strings", () => {
     const command = new Command();
     expect(command.command).toBe("");

src/neo/components/CommandForm/index.jsx

@@ -21,6 +21,7 @@ import { observer } from "mobx-react";
 import classNames from "classnames";
 import { Commands } from "../../models/Command";
 import Input from "../FormInput";
+import TextArea from "../FormTextArea";
 import CommandInput from "../CommandInput";
 import FlatButton from "../FlatButton";
 import { find, select } from "../../IO/SideeX/find-select";
@@ -57,7 +58,7 @@ import "./style.css";
             <FlatButton data-tip="<p>Select target in page</p>" className={classNames("icon", "si-select", {"active": this.props.isSelecting})} onClick={select} />
             <FlatButton data-tip="<p>Find target in page</p>" className="icon si-search" onClick={() => {find(this.props.command.target);}} />
           </div>
-          <Input
+          <TextArea
             id="value"
             name="value"
             label="Value"

src/neo/components/CommandForm/style.css

@@ -1,48 +1,56 @@
 .command-form {
-  margin: 15px 8px;
+    margin: 15px 8px;
 }
 
-.command-form form > * {
-  max-width: 480px;
+.command-form form> * {
+    max-width: 480px;
 }
 
-.command-form .form-input:first-child > div {
-  display: flex!important;
+.command-form .form-input:first-child> div {
+    display: flex!important;
 }
 
-.command-form .form-input:first-child > div span {
-  flex-grow: 1;
+.command-form .form-input:first-child> div span {
+    flex-grow: 1;
 }
 
-.command-form input {
-  font-size: 13px;
-  padding: 4px 5px;
-  width: 100px;
+.command-form input,
+.command-form textarea {
+    font-size: 13px;
+    padding: 4px 5px;
+    width: 100px;
+}
+
+.command-form textarea {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: pre;
 }
 
 .command-form .target {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }
 
-.command-form .target > *:first-child {
-  flex-grow: 1;
+.command-form .target> *:first-child {
+    flex-grow: 1;
 }
 
 .command-form .target button {
-  margin: 0;
-  padding: 2px 4px;
-  margin-left: 5px;
+    margin: 0;
+    padding: 2px 4px;
+    margin-left: 5px;
 }
 
 .command-form .target button img {
-  height: 19px;
+    height: 19px;
 }
 
 .command-form input[type="submit"] {
-  position: absolute;
-  width: 0;
-  height: 0;
-  padding: 0;
-  border: none;
+    position: absolute;
+    width: 0;
+    height: 0;
+    padding: 0;
+    border: none;
 }
+

src/neo/components/FormTextArea/index.jsx

@@ -0,0 +1,32 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import React from "react";
+import PropTypes from "prop-types";
+import Input from "../FormInput";
+
+export default class FormTextArea extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func
+  };
+  render() {
+    const props = Object.assign({ rows: "1" }, this.props, { onChange: (e) => {if (this.props.onChange) this.props.onChange(e.target.value);}});
+    return (
+      <Input {...props}><textarea {...props}></textarea></Input>
+    );
+  }
+}

src/neo/containers/Editor/index.jsx

@@ -66,7 +66,7 @@ import "./style.css";
     modifier(e);
     const noModifiers = (!e.primaryKey && !e.secondaryKey);
 
-    if (e.target.localName !== "input" && noModifiers && e.key === "ArrowLeft") {
+    if (e.target.localName !== "input" && e.target.localName !== "textarea" && noModifiers && e.key === "ArrowLeft") {
       event.preventDefault();
       event.stopPropagation();
       UiState.focusNavigation();

src/neo/models/Command.js

@@ -53,7 +53,7 @@ export default class Command {
   }
 
   @action.bound setValue(value) {
-    this.value = value;
+    this.value = value.replace(/\n/g, "\\n");
   }
 
   static fromJS = function(jsRep) {