added react function to open/close editionmode

src/component/PageHtml.jsx

@@ -1,13 +1,20 @@
 import React from 'react'
 import { TextAreaApp } from 'tracim_lib'
+import { MODE } from '../helper.js'
 
 const PageHtml = props => {
   return (
     <div className='wsContentPageHtml__contentpage__textnote'>
-      <div className='wsContentPageHtml__contentpage__textnote__latestversion' dangerouslySetInnerHTML={{__html: props.version}} />
-      <div className='wsContentPageHtml__contentpage__textnote__text' dangerouslySetInnerHTML={{__html: props.text}} />
+      {props.mode === MODE.VIEW &&
+        <div>
+          <div className='wsContentPageHtml__contentpage__textnote__latestversion' dangerouslySetInnerHTML={{__html: props.version}} />
+          <div className='wsContentPageHtml__contentpage__textnote__text' dangerouslySetInnerHTML={{__html: props.text}} />
+        </div>
+      }
 
-      <TextAreaApp customClass={'wsContentPageHtml'} />
+      {props.mode === MODE.EDIT &&
+        <TextAreaApp customClass={'wsContentPageHtml'} onClickCancelBtn={props.onClickCloseNewVersion}/>
+      }
     </div>
   )
 }

src/container/PageHtml.jsx

@@ -9,7 +9,7 @@ import {
   Timeline
 } from 'tracim_lib'
 import { timelineDebugData } from '../timelineDebugData.js'
-import { FETCH_CONFIG } from '../helper.js'
+import { FETCH_CONFIG, MODE } from '../helper.js'
 import i18n from '../i18n.js'
 
 const debug = {
@@ -22,8 +22,8 @@ const debug = {
     componentLeft: 'PageHtml',
     componentRight: 'Timeline',
     customClass: 'wsContentPageHtml',
-    icon: 'fa fa-file-word-o',
-    color: '#65c7f2',
+    icon: 'fa fa-file-text-o',
+    color: '#fdfdfd',
     domContainer: 'appContainer',
     apiUrl: 'http://localhost:3001'
   },
@@ -60,7 +60,8 @@ class pageHtml extends React.Component {
       config: props.data ? props.data.config : debug.config,
       loggedUser: props.data ? props.data.loggedUser : debug.loggedUser,
       content: props.data ? props.data.content : debug.content,
-      timeline: props.data ? [] : debug.timeline
+      timeline: props.data ? [] : debug.timeline,
+      mode: MODE.VIEW
     }
 
     document.addEventListener('appCustomEvent', this.customEventReducer)
@@ -105,6 +106,16 @@ class pageHtml extends React.Component {
     this.setState({ isVisible: false })
   }
 
+  handleChangeTitle = e => console.log('new title : ', e.target.value)
+
+  handleClickNewVersion = () => {
+    this.setState({ mode: MODE.EDIT })
+  }
+
+  handleCloseNewVersion = () => {
+    this.setState({ mode: MODE.VIEW })
+  }
+
   render () {
     const { isVisible, loggedUser, content, timeline, config } = this.state
 
@@ -117,12 +128,19 @@ class pageHtml extends React.Component {
           icon={config.icon}
           name={content.title}
           onClickCloseBtn={this.handleClickBtnCloseApp}
+          onChangeTitle={this.handleChangeTitle}
         />
 
-        <PopinFixedOption customClass={`${config.customClass}`} i18n={i18n} />
+        <PopinFixedOption
+          customClass={`${config.customClass}`}
+          onClickNewVersion={this.handleClickNewVersion}
+          i18n={i18n}
+        />
 
         <PopinFixedContent customClass={`${config.customClass}__contentpage`}>
           <PageHtmlComponent
+            mode={this.state.mode}
+            onClickCloseNewVersion={this.handleCloseNewVersion}
             version={content.version}
             text={content.text}
             key={'PageHtml'}