2 files changed, 12 insertions, 7 deletions
diff --git a/web/src/js/components/ContentView/ContentLoader.jsx b/web/src/js/components/ContentView/ContentLoader.jsx
index 1a23325c..eff82d05 100644
--- a/web/src/js/components/ContentView/ContentLoader.jsx
+++ b/web/src/js/components/ContentView/ContentLoader.jsx
@@ -46,9 +46,13 @@ export default class ContentLoader extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        if (nextProps.message !== this.props.message) {
+        let reload = nextProps.message !== this.props.message
+        let isUserEdit = !nextProps.readonly && nextProps.message.content
+
+        if (isUserEdit)
+            this.setState({content: nextProps.message.content})
+        else if(reload)
             this.requestContent(nextProps)
-        }
     }
 
     componentWillUnmount() {
diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx
index 82ee0adc..b39e545a 100644
--- a/web/src/js/components/ContentView/ContentViews.jsx
+++ b/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,8 @@ ViewRaw.propTypes = {
     content: React.PropTypes.string.isRequired,
 }
 
-export function ViewRaw({ content }) {
-    return <pre>{content}</pre>
+export function ViewRaw({ content, readonly, onChange }) {
+    return readonly ? <pre>{content}</pre> : <CodeEditor content={content} onChange={onChange}/>
 }
 
 ViewJSON.textView = true
@@ -59,12 +60,12 @@ ViewAuto.propTypes = {
     flow: React.PropTypes.object.isRequired,
 }
 
-export function ViewAuto({ message, flow }) {
+export function ViewAuto({ message, flow, readonly, onChange }) {
     const View = ViewAuto.findView(message)
     if (View.textView) {
-        return <ContentLoader message={message} flow={flow}><View content="" /></ContentLoader>
+        return <ContentLoader message={message} flow={flow}><View readonly={readonly} onChange={onChange}  content="" /></ContentLoader>
     } else {
-        return <View message={message} flow={flow} />
+        return <View readonly={readonly} message={message} flow={flow} />
     }
 }