Changed "Enter Value" to "Add Remarks"

src/components/editor/State.css

@@ -51,6 +51,16 @@ textarea {
   padding-right: .2em;
 }
 
+.remarks-text div {
+  font-style: italic;
+  text-decoration: underline !important;
+  cursor: text;
+  color: #336699 !important;
+  position:relative;
+  padding-left: .2em;
+  padding-right: .2em;
+}
+
 .editable-error {
   color: #ff3300 !important;
 }
@@ -59,12 +69,16 @@ span.editable-text:empty {
   color: #ff3300 !important;
 }
 
+span.remarks-text div:empty{
+  height:1.5em;
+}
+
 span.editable-text:empty:after {
-  content: 'Enter value';
+  content: 'Enter Value';
 }
 
 span.editable-text > :empty:after {
-  content: 'Enter value';
+  content: 'Enter Value';
 }
 
 .section {
@@ -91,3 +105,4 @@ span.editable-text > :empty:after {
 .warning {
   color: #ff3300;
 }
+

src/components/editor/State.js

@@ -12,7 +12,7 @@ import ConditionalEditor from './Conditional';
 import Transition from './Transition';
 import { getTemplate } from '../../templates/Templates';
 import { BasicTutorial, EditTutorial } from '../../templates/Tutorial';
-
+import TextArea from './TextArea'
 
 import './State.css';
 
@@ -103,7 +103,20 @@ class StateEditor extends Component<Props> {
   }
 
   updateRemarks = (el:any) => {
-    const remarks = el.remarks? el.remarks.split("\n") : null;
+
+    // Need to make sure new lines get represented correctly
+    // when input from the remarks editor.
+    const editedRemarks = el.remarks.split("\n").reduce(((p,d,i)=>{
+      if(d.length>0){
+        return [...p,d,""];
+
+      }else{
+        return [...p,d];
+      }
+
+    }),[]);
+    console.log(editedRemarks);
+    let remarks = el.remarks? editedRemarks : null;
     this.props.onChange(`states.${this.props.state.name}.remarks`)({remarks:{id:remarks}});
   }
 
@@ -123,18 +136,16 @@ class StateEditor extends Component<Props> {
 
     let remarks = this.props.state.remarks ||"";
     remarks = Array.isArray(remarks)? remarks.join("\n"): remarks;
-
     const transitionType = (this.props.state.transition||{}).type;
     return (
         <div className="State">
           <div className='Editor-panel-title'> 
             State Editor
           </div>
-          <h3><RIEInput className='editable-text' className='editable-text' propName={'name'} value={this.props.state.name} change={this.props.renameNode} /></h3>
+          <h3><RIEInput className='editable-text' className='editable-text' propName={'name'} value={this.props.state.name} change={this.props.renameNode} /> </h3>
           State Type: <RIESelect className='editable-text' className='editable-text' value={{id: this.props.state.type, text: this.props.state.type}} propName='type'change={this.props.changeType} options={typeOptions}/>
           <hr/>
-          <RIETextArea className='editable-text' value={remarks} propName="remarks" change={this.updateRemarks} />
-          <br/>
+          <TextArea className='remarks-text' value={remarks} propName="remarks" change={this.updateRemarks} defaultText={"Add Remarks"}/>
           <hr/>
           <div className="State-Editor">
             {this.renderStateType()}

src/components/editor/TextArea.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import RIEStatefulBase from 'riek/lib/RIEStatefulBase';
+export default class TextArea extends RIEStatefulBase {
+    keyDown = (event) => {
+        if (event.keyCode === 27) { this.cancelEditing() }     // Escape
+    };
+
+    renderEditingComponent = () => {
+        var toggle = false;
+
+        const uneditedRemarks = this.props.value.split("\n").reduce(((p,d,i)=>{
+            if(d.length>0){
+                toggle = true;
+              return [...p,d];
+            }else if(toggle){
+                toggle=false;
+                return [...p];
+            }else{
+                return [...p,d]
+
+            }
+          }),[]).join("\n");
+
+        return <textarea
+            rows={this.props.rows}
+            cols={this.props.cols}
+            disabled={this.state.loading}
+            className={this.makeClassString()}
+            defaultValue={uneditedRemarks}
+            onInput={this.textChanged}
+            onBlur={this.finishEditing}
+            ref="input"
+            onKeyDown={this.keyDown}
+            {...this.props.editProps} />;
+    };
+
+    renderNormalComponent = () => {
+        const value = this.state.newValue || this.props.value
+        const spansAndBrs = []
+
+        // The regex just replaces whitespace (tabs, newline, space) 
+        // to check if the remarks section only has whitespace in it.
+        if(!value.replace(/\s/g,"").length){
+            spansAndBrs.push(<div key="placeholder">{this.props.defaultText}</div>)
+        }else{
+            let aggregateLine = "";
+            const lines = this.props.value.split("\n");
+            lines.forEach(line => {
+                if(line.length===0){
+                    // Empty lines get turned into new lines
+                    spansAndBrs.push(<div key={spansAndBrs.length}>{aggregateLine}</div>)
+                    aggregateLine = "";       
+                }
+                aggregateLine += line;      
+            });
+
+            if(aggregateLine.length > 0){
+                // Push the final aggregate line
+                spansAndBrs.push(<div key={spansAndBrs.length}>{aggregateLine}</div>)
+            }
+
+        }
+
+        return <span
+            tabIndex="0"
+            className={this.makeClassString()}
+            onFocus={this.startEditing}
+            onClick={this.startEditing}
+            {...this.props.defaultProps}>{spansAndBrs}</span>;
+    };
+}