real integration of plugin pageHtml

dist/index.html

     <script src="./dev/bootstrap-4.0.0-beta.2.js"></script>
 
     <script type='text/javascript'>
-      GLOBAL_renderPlugin = pluginName => {
-        if (pluginName === 'PageHtml') {
-          pluginPageHtml.renderPlugin('pluginContainer')
-          console.log('plugin pagehtml rendered')
+      GLOBAL_renderPlugin = data => {
+        if (data.file.type === 'PageHtml') {
+          pluginPageHtml.renderPlugin('pluginContainer', data)
         }
       }
 

package.json

     "style-loader": "^0.19.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
+    "tracim_lib": "git://github.com/Skylsmoi/tracim_lib.git",
     "url-loader": "^0.6.2",
     "webpack": "^3.8.1",
-    "whatwg-fetch": "^2.0.3",
-    "tracim_lib": "git://github.com/Skylsmoi/tracim_lib.git"
+    "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
     "json-server": "^0.12.0",

src/component/Header/Logo.jsx

 }
 export default Logo
 
-Logo.PropTypes = {
+Logo.propTypes = {
   logoSrc: PropTypes.string.isRequired,
   onClickImg: PropTypes.func.isRequired
 }

src/component/Header/MenuActionListItem/DropdownLang.jsx

 }
 export default DropdownLang
 
-DropdownLang.PropTypes = {
+DropdownLang.propTypes = {
   langList: PropTypes.array.isRequired,
   onChangeLang: PropTypes.func.isRequired
 }

src/component/Header/MenuActionListItem/Help.jsx

 }
 export default Help
 
-Help.PropTypes = {
+Help.propTypes = {
   onClickHelp: PropTypes.func.isRequired
 }

src/component/Header/MenuActionListItem/MenuProfil.jsx

 }
 export default MenuProfil
 
-MenuProfil.PropTypes = {
+MenuProfil.propTypes = {
   user: PropTypes.object.isRequired,
   onClickMyProfil: PropTypes.func.isRequired,
   onClickLogout: PropTypes.func.isRequired

src/component/Header/MenuActionListItem/Search.jsx

 }
 export default Search
 
-Search.PropTypes = {
+Search.propTypes = {
   onChangeInput: PropTypes.func.isRequired,
   onClickSubmit: PropTypes.func.isRequired
 }

src/component/Header/MenuLinkList.jsx

 }
 export default MenuLinkList
 
-MenuLinkList.PropTypes = {
+MenuLinkList.propTypes = {
   onClickFeature: PropTypes.func.isRequired,
   onClickExplore: PropTypes.func.isRequired,
   onClickAbout: PropTypes.func.isRequired

src/component/common/Card/CardBody.jsx

 
 export default CardBody
 
-CardBody.PropTypes = {
+CardBody.propTypes = {
   children: PropTypes.element.isRequired,
   formClass: PropTypes.string
 }

src/component/common/Card/CardHeader.jsx

 
 export default CardHeader
 
-CardHeader.PropTypes = {
+CardHeader.propTypes = {
   children: PropTypes.element.isRequired,
   customClass: PropTypes.string
 }

src/component/common/Input/Button.jsx

 
 export default Button
 
-Button.PropTypes = {
+Button.propTypes = {
   htmlType: PropTypes.oneOf(['button', 'submit', 'reset']).isRequired,
   bootstrapType: PropTypes.oneOf(
     ['primary', 'default', 'default', 'success', 'danger', 'warning', 'info', 'light', 'dark']

src/component/common/Input/InputCheckbox.jsx

 
 export default InputGroupText
 
-InputGroupText.PropTypes = {
+InputGroupText.propTypes = {
   parentClassName: PropTypes.string.isRequired,
   checked: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,

src/component/common/Input/InputGroupText.jsx

 
 export default InputGroupText
 
-InputGroupText.PropTypes = {
+InputGroupText.propTypes = {
   parentClassName: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   type: PropTypes.oneOf(['text', 'email', 'password', 'tel']).isRequired,

src/container/PrivateRoute.jsx

 const mapStateToProps = ({ user }) => ({ user })
 export default withRouter(connect(mapStateToProps)(PrivateRoute))
 
-PrivateRoute.PropTypes = {
-  component: PropTypes.shape({
-    Component: PropTypes.object.isRequired
-  }),
+PrivateRoute.propTypes = {
+  component: PropTypes.func.isRequired,
   user: PropTypes.shape({ // user is get with redux connect
     isLoggedIn: PropTypes.bool.isRequired
   })

src/container/WorkspaceContent.jsx

 import PageTitle from '../component/common/layout/PageTitle.jsx'
 import PageContent from '../component/common/layout/PageContent.jsx'
 import DropdownCreateButton from '../component/common/Input/DropdownCreateButton.jsx'
-// import pluginDatabase from '../plugin/index.js'
 import {
   getPluginList,
   getWorkspaceContent
 } from '../action-creator.async.js'
-import { setActiveFileContent } from '../action-creator.sync.js'
-import { bonjour } from 'tracim_lib'
+// import pluginDatabase from '../plugin/index.js'
 
 class WorkspaceContent extends React.Component {
   constructor (props) {
   }
 
   handleClickFileItem = file => {
-    // this.props.dispatch(setActiveFileContent(file))
-    GLOBAL_renderPlugin(file.type)
-  }
-
-  handleDummyBtn = () => {
-    // GLOBAL_dispatchEvent({
-    //   source: 'Tracim',
-    //   type: 'PageHtml_showMsg',
-    //   content: 'Bonjour ?'
-    // })
-    bonjour()
+    GLOBAL_renderPlugin({
+      file,
+      pluginData: this.props.plugin[file.type]
+    })
   }
 
   render () {
         </PageTitle>
 
         <PageContent parentClass='workspace__content'>
-          <button onClick={this.handleDummyBtn}>Click Me</button>
-
           <div className='workspace__content__fileandfolder folder__content active'>
             <FileItemHeader />
 

src/css/Generic.styl

       border 1px solid grey
       border-radius 10px
       padding 15px 25px
-
-/********************/
-
-/*** PAGE FILE, THREAD, HTML, MARKDOWN, ISSUE ***/
-
-.wsFileGeneric
-  position fixed
-  top 85px
-  right 0
-  border 1px solid grey
-  height 100%
-  background-color lightGrey
-  box-shadow shadow-page
-  visibility hidden
-  z-index 1
-  &.visible
-    visibility visible
-  &__header
-    display flex
-    align-items center
-    padding 15px
-    height 64px
-    &__icon
-      margin-right 15px
-      font-size 22px
-      color white
-    &__title
-      margin-right 15px
-      color white
-      text-overflow ellipsis
-      overflow hidden
-      white-space nowrap
-    &__edittitle
-      margin 0 15px
-      color white
-      font-size 20px
-      cursor pointer
-      &:hover , &:focus
-        border 1px solid off-white
-        padding 0 10px
-        border-radius 5px
-    &__close
-      border 1px solid white
-      border-radius 5px
-      padding 2px 5px
-      cursor pointer
-      & > i
-        color white
-        font-size 20px
-  &__option
-    border-bottom 1px solid grey
-    padding 10px
-    height 58px
-    background-color off-white
-    & > i
-      vertical-align middle
-      margin-right 15px
-      font-size 25px
-      cursor pointer
-    &__menu
-      display flex
-      align-items center
-      &__status
-        margin-right 20px
-        .current
-          color blue
-        .check
-          color green
-        .invalid
-          color red
-        .ban
-          color grey
-        &__dropdownbtn
-          border 1px solid grey
-          width 150px
-          background-color transparent
-          cursor pointer
-          &::after
-            color fontColor
-          &:hover
-            background-color transparent
-          &__icon
-            display inline-block
-            margin 0 15px
-        &__submenu
-          &__item
-            display flex
-            justify-content space-between
-            margin 5px 0
-            cursor pointer
-            &:active
-              background-color transparent
-      &__action
-        margin 5px 10px 0 0
-        font-size 18px
-        cursor pointer
-        &:hover , &:focus
-          font-size 22px
-          color blue
-  &__content
-    display flex
-    &__left
-      width 55%
-    &__right
-      width 45%

src/css/Variable.styl

+// Côme - 2018/02/27 - DEPRECATED : now using Variable.styl from tracim_lib
+
 /**** VARIABLES ****/
 /*** COULEURS ****/
 

src/css/index.styl

 html, body, #content, #content > div
   height 100%
 
-@import 'Variable.styl'
+// @TODO Côme - 2018/02/27 - do not manually import from node_module relative path
+@import '../../node_modules/tracim_lib/src/css/Variable.styl'
+
 @import 'Generic.styl'
 
 @import 'Sidebar.styl'

src/plugin/ContentType/PageHtml/PageHtmlContainer.jsx

 import React from 'react'
 import { connect } from 'react-redux'
-import PopinFixed from '../../../component/common/PopinFixed/PopinFixed.jsx'
-import PopinFixedHeader from '../../../component/common/PopinFixed/PopinFixedHeader.jsx'
-import PopinFixedOption from '../../../component/common/PopinFixed/PopinFixedOption.jsx'
-import PopinFixedContent from '../../../component/common/PopinFixed/PopinFixedContent.jsx'
+// import PopinFixed from '../../../component/common/PopinFixed/PopinFixed.jsx'
+// import PopinFixedHeader from '../../../component/common/PopinFixed/PopinFixedHeader.jsx'
+// import PopinFixedOption from '../../../component/common/PopinFixed/PopinFixedOption.jsx'
+// import PopinFixedContent from '../../../component/common/PopinFixed/PopinFixedContent.jsx'
+import {
+  PopinFixed,
+  PopinFixedHeader,
+  PopinFixedOption,
+  PopinFixedContent
+} from 'tracim_lib'
 import PageHtmlComponent from './PageHtmlComponent.jsx'
 import Timeline from '../../../component/Timeline.jsx'
 import { hideActiveFileContent } from '../../../action-creator.sync.js'

src/plugin/ContentType/PageHtml/index.js

 import reducer from './pageHtml.js'
-import container from './PageHtmlContainer.jsx'
-import component from './PageHtmlComponent.jsx'
+// import container from './PageHtmlContainer.jsx'
+// import component from './PageHtmlComponent.jsx'
 
 const PageHtml = {
   name: 'PageHtml',
-  container,
-  component,
+  // container,
+  // component,
   reducer
 }
 

src/plugin/ContentType/Thread/index.js

 import reducer from './thread.js'
-import component from './Thread.jsx'
-import style from './Thread.styl'
+// import container from './ThreadContainer.jsx'
+// import component from './ThreadComponent.jsx'
 
-const Thread = { name: 'Thread', component, reducer, style }
+const Thread = {
+  name: 'Thread',
+  // container,
+  // component,
+  reducer
+}
 
 export default Thread