moved editor to raw_view mode

web/src/js/components/ContentView.jsx

@@ -6,7 +6,6 @@ import * as MetaViews from './ContentView/MetaViews'
 import ContentLoader from './ContentView/ContentLoader'
 import ViewSelector from './ContentView/ViewSelector'
 import { setContentView, displayLarge, updateEdit } from '../ducks/ui/flow'
-import CodeEditor from './common/CodeEditor'
 
 ContentView.propTypes = {
     // It may seem a bit weird at the first glance:
@@ -19,7 +18,7 @@ ContentView.propTypes = {
 ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
 
 function ContentView(props) {
-    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, onContentChange, isFlowEditorOpen, setModifiedFlowContent } = props
+    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge, onContentChange, readonly, isFlowEditorOpen } = props
 
     if (message.contentLength === 0) {
         return <MetaViews.ContentEmpty {...props}/>
@@ -37,43 +36,35 @@ function ContentView(props) {
 
     return (
         <div>
-            {isFlowEditorOpen ? (
+            {View.textView ? (
                 <ContentLoader flow={flow} message={message}>
-                        <CodeEditor content="" onChange={content =>{setModifiedFlowContent(content)}}/>
+                    <View readonly={readonly} isFlowEditorOpen={isFlowEditorOpen} content="" />
-                    </ContentLoader>
+                </ContentLoader>
-            ): (
+            ) : (
-                <div>
+                <View flow={flow} message={message} />
-                    {View.textView ? (
-                        <ContentLoader flow={flow} message={message}>
-                            <View content="" />
-                        </ContentLoader>
-                    ) : (
-                        <View flow={flow} message={message} />
-                    )}
-                    <div className="view-options text-center">
-                        <ViewSelector onSelectView={selectView} active={View} message={message}/>
-                        &nbsp;
-                        <a className="btn btn-default btn-xs"
-                           href={MessageUtils.getContentURL(flow, message)}
-                           title="Download the content of the flow.">
-                            <i className="fa fa-download"/>
-                        </a>
-                        &nbsp;
-                        <a  className="btn btn-default btn-xs"
-                            onClick={() => ContentView.fileInput.click()}
-                            title="Upload a file to replace the content."
-                        >
-                            <i className="fa fa-upload"/>
-                        </a>
-                        <input
-                            ref={ref => ContentView.fileInput = ref}
-                            className="hidden"
-                            type="file"
-                            onChange={e => {if(e.target.files.length > 0) onContentChange(e.target.files[0])}}
-                        />
-                    </div>
-                </div>
             )}
+            <div className="view-options text-center">
+                <ViewSelector onSelectView={selectView} active={View} message={message}/>
+                &nbsp;
+                <a className="btn btn-default btn-xs"
+                   href={MessageUtils.getContentURL(flow, message)}
+                   title="Download the content of the flow.">
+                    <i className="fa fa-download"/>
+                </a>
+                &nbsp;
+                <a  className="btn btn-default btn-xs"
+                    onClick={() => ContentView.fileInput.click()}
+                    title="Upload a file to replace the content."
+                >
+                    <i className="fa fa-upload"/>
+                </a>
+                <input
+                    ref={ref => ContentView.fileInput = ref}
+                    className="hidden"
+                    type="file"
+                    onChange={e => {if(e.target.files.length > 0) onContentChange(e.target.files[0])}}
+                />
+            </div>
         </div>
     )
 }

web/src/js/components/ContentView/ContentViews.jsx

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import ContentLoader from './ContentLoader'
 import { MessageUtils } from '../../flow/utils.js'
+import CodeEditor from '../common/CodeEditor'
 
 
 const views = [ViewAuto, ViewImage, ViewJSON, ViewRaw]
@@ -28,8 +29,9 @@ ViewRaw.propTypes = {
     content: React.PropTypes.string.isRequired,
 }
 
-export function ViewRaw({ content }) {
+export function ViewRaw({ content, isFlowEditorOpen, readonly }) {
-    return <pre>{content}</pre>
+    let showEditor = isFlowEditorOpen && !readonly
+    return showEditor ? <CodeEditor content={content} onChange={content =>alert(content)}/> : <pre>{content}</pre>
 }
 
 ViewJSON.textView = true

web/src/js/components/FlowView/Messages.jsx

@@ -144,7 +144,11 @@ export class Response extends Component {
                     onChange={headers => updateFlow({ response: { headers } })}
                 />
                 <hr/>
-                <ContentView flow={flow} message={flow.response}/>
+                <ContentView
+                    readonly={!isEdit}
+                    flow={flow}
+                    message={flow.response}
+                />
             </section>
         )
     }

web/src/js/ducks/ui/flow.js

@@ -22,7 +22,8 @@ export default function reducer(state = defaultState, action) {
         case START_EDIT:
             return {
                 ...state,
-                modifiedFlow: action.flow
+                modifiedFlow: action.flow,
+                contentView: 'ViewRaw'
             }
 
         case UPDATE_EDIT: