integrated pagehtml plugin

dist/index.html

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
     -->
 
-    <script src='./plugin/pageHtml.plugin.js'></script>
+    <!-- script src='./plugin/pageHtml.plugin.js'></script -->
 
     <script src="./dev/jquery-3.2.1.js"></script>
     <script src="./dev/popper-1.12.3.js"></script>

jsonserver/static_db.json

     "name": "PageHtml",
     "componentLeft": "PageHtml",
     "componentRight": "Timeline",
-    "customClass": "wsContentPageHtml",
+    "customClass": "wsFilePageHtml",
     "icon": "fa fa-file-word-o"
   }, {
     "name": "PageMarkdown",
     "componentLeft": "PageMarkdown",
     "componentRight": "undefined",
-    "customClass": "wsContentPageMarkdown",
+    "customClass": "wsFilePageMarkdown",
     "icon": "fa fa-file-code-o"
   }, {
     "name": "File",
     "componentLeft": "File",
     "componentRight": "undefined",
-    "customClass": "wsContentFile",
+    "customClass": "wsFileFile",
     "icon": "fa fa-file-text-o"
   }, {
     "name": "Thread",
     "componentLeft": "Thread",
     "componentRight": "undefined",
-    "customClass": "wsContentThread",
+    "customClass": "wsFileThread",
     "icon": "fa fa-comments-o"
   }, {
     "name": "Task",
     "componentLeft": "Task",
     "componentRight": "undefined",
-    "customClass": "wsContentTask",
+    "customClass": "wsFileTask",
     "icon": "fa fa-list-ul"
   }, {
     "name": "Issue",
     "componentLeft": "Issue",
     "componentRight": "undefined",
-    "customClass": "wsContentIssue",
+    "customClass": "wsFileIssue",
     "icon": "fa fa-ticket"
   }],
   "workspace_detail": {

src/component/PluginContentType.jsx

 import {FILE_TYPE} from '../helper.js'
 
 const PluginContentType = props => {
-  // const [leftPart, rightPart] = (() => {
-  //   switch (props.file.type) {
-  //     case FILE_TYPE[0].name: // pageHtml
-  //       return [
-  //         <PageHtml version={props.file.version} text={props.file.text} />,
-  //         <Timeline customClass={`${props.customClass}__contentpage`} />
-  //       ]
-  //     case FILE_TYPE[3].name: // thread
-  //       return [
-  //         <Thread />
-  //       ]
-  //   }
-  // })()
-  // return [leftPart, rightPart]
-  const { componentLeft, componentRight, customClass, } = FILE_TYPE.find(p => p.name === props.file.type)
-
-  return [
-    genericPlugin.componentLeft,
-    genericPlugin.componentRight
-  ]
+  const [leftPart, rightPart] = (() => {
+    switch (props.file.type) {
+      case FILE_TYPE[0].name: // pageHtml
+        return [
+          <PageHtml version={props.file.version} text={props.file.text} key={'pageHtml'} />,
+          <Timeline customClass={`${props.customClass}__contentpage`} key={'pageHtml__timeline'} />
+        ]
+      case FILE_TYPE[3].name: // thread
+        return [
+          <Thread />
+        ]
+    }
+  })()
+  return [leftPart, rightPart]
+  // const { componentLeft, componentRight, customClass, } = FILE_TYPE.find(p => p.name === props.file.type)
+  //
+  // return [
+  //   genericPlugin.componentLeft,
+  //   genericPlugin.componentRight
+  // ]
 }
 
 export default PluginContentType

src/container/WorkspaceContent.jsx

   getWorkspaceContent
 } from '../action-creator.async.js'
 import { setActiveFileContent, hideActiveFileContent } from '../action-creator.sync.js'
+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 PluginContentType from '../component/PluginContentType.jsx'
 
 class WorkspaceContent extends React.Component {
   constructor (props) {
   }
 
   render () {
-    const { workspace, activeFileContent } = this.props
+    const { workspace, activeFileContent, plugin } = this.props
+
+    const pluginContent = (() => {
+      switch (activeFileContent.type) {
+        case 'PageHtml':
+          return <PopinFixed customClass={`${plugin.pageHtml.customClass}`}>
+            <PopinFixedHeader
+              customClass={`${plugin.pageHtml.customClass}`}
+              icon={plugin.pageHtml.icon}
+              name={activeFileContent.title}
+              onClickCloseBtn={this.handleClickCloseBtn}
+            />
+
+            <PopinFixedOption customClass={`${plugin.pageHtml.customClass}`} />
+
+            <PopinFixedContent customClass={`${plugin.pageHtml.customClass}__contentpage`}>
+              <PluginContentType
+                file={activeFileContent}
+                customClass={`${plugin.pageHtml.customClass}`}
+              />
+            </PopinFixedContent>
+          </PopinFixed>
+      }
+    })()
 
     return (
       <PageWrapper customeClass='workspace'>
           <DropdownCreateButton customClass='workspace__content__button mb-5' />
 
           <div id='pluginContainer'>
-
+            { activeFileContent.display && pluginContent }
           </div>
         </PageContent>
 
   }
 }
 
-const mapStateToProps = ({ workspace, activeFileContent }) => ({ workspace, activeFileContent })
+const mapStateToProps = ({ workspace, activeFileContent, plugin }) => ({ workspace, activeFileContent, plugin })
 export default connect(mapStateToProps)(WorkspaceContent)

src/css/Timeline.styl

 .timeline
+  display flex
+  flex-direction column
   &__messagelist
     flex 1 1 0
     margin-bottom 0

src/css/index.styl

 html, body, #content, #content > div
   height 100%
 
-@import 'Variable'
-@import 'Generic'
+@import 'Variable.styl'
+@import 'Generic.styl'
 
-@import 'Sidebar'
-@import 'Header'
-@import 'Footer'
+@import 'Sidebar.styl'
+@import 'Header.styl'
+@import 'Footer.styl'
 
-@import 'Login'
-@import 'Workspace'
+@import 'Login.styl'
+@import 'Workspace.styl'
 
-@import 'FileItem'
-@import 'FileItemHeader'
-@import 'Folder'
+@import 'FileItem.styl'
+@import 'FileItemHeader.styl'
+@import 'Folder.styl'
 
+@import 'Timeline.styl'
 @import '../plugin/ContentType/Thread/Thread.styl'
 @import '../plugin/ContentType/PageHtml/PageHtml.styl'
-@import 'Timeline'

src/helper.js

   name: 'PageHtml',
   componentLeft: 'PageHtml',
   componentRight: 'Timeline',
-  customClass: 'wsContentPageHtml',
+  customClass: 'wsFilePageHtml',
   icon: 'fa fa-file-word-o'
 }, {
   name: 'PageMarkdown',
   componentLeft: 'PageMarkdown',
   componentRight: 'undefined',
-  customClass: 'wsContentPageMarkdown',
+  customClass: 'wsFilePageMarkdown',
   icon: 'fa fa-file-code-o'
 }, {
   name: 'File',
   componentLeft: 'File',
   componentRight: 'undefined',
-  customClass: 'wsContentFile',
+  customClass: 'wsFileFile',
   icon: 'fa fa-file-text-o'
 }, {
   name: 'Thread',
   componentLeft: 'Thread',
   componentRight: 'undefined',
-  customClass: 'wsContentThread',
+  customClass: 'wsFileThread',
   icon: 'fa fa-comments-o'
 }, {
   name: 'Task',
   componentLeft: 'Task',
   componentRight: 'undefined',
-  customClass: 'wsContentTask',
+  customClass: 'wsFileTask',
   icon: 'fa fa-list-ul'
 }, {
   name: 'Issue',
   componentLeft: 'Issue',
   componentRight: 'undefined',
-  customClass: 'wsContentIssue',
+  customClass: 'wsFileIssue',
   icon: 'fa fa-ticket'
 }]

src/plugin/ContentType/PageHtml/PageHtml.jsx

 const PageHtml = props => {
   return (
     <div className='wsFilePageHtml__contentpage__textnote'>
-      <div className='wsFilePageHtml__contentpage__textnote__latestversion'>
-        { props.version }
-      </div>
-      <div className='wsFilePageHtml__contentpage__textnote__text'>
-        { props.text }
-      </div>
+      <div className='wsFilePageHtml__contentpage__textnote__latestversion' dangerouslySetInnerHTML={{__html: props.version}} />
+      <div className='wsFilePageHtml__contentpage__textnote__text' dangerouslySetInnerHTML={{__html: props.text}} />
     </div>
   )
 }

src/plugin/ContentType/PageHtml/PageHtml.styl

-.wsContentPageHtml
+.wsFilePageHtml
   width 1200px
   height calc(100% - 85px)
   overflow-Y auto
             background-color htmlColor
 
 .messagelistOpen
-  .wsContentPageHtml__contentpage__messagelist
+  .wsFilePageHtml__contentpage__messagelist
     flex 0
     min-height 0
 
 .received
-  .wsContentPageHtml__contentpage__messagelist__item__content
+  .wsFilePageHtml__contentpage__messagelist__item__content
       background-color htmlColor
 
 @media (min-width: max-xs) and (max-width: max-lg)
-  .wsContentPageHtml
+  .wsFilePageHtml
     &__contentpage
       display block
       overflow-Y scroll
               margin-left 15px
 
 @media (min-width: min-lg) and (max-width: max-lg)
-  .wsContentPageHtml
+  .wsFilePageHtml
     width 692px
     &__contentpage__texteditor__simpletext
       margin-left 15px
 
 @media (min-width: min-md) and (max-width: max-md)
-  .wsContentPageHtml
+  .wsFilePageHtml
     width 768px
     &__contentpage__texteditor__simpletext
       margin-left 25px
 
 @media (min-width: min-sm) and (max-width: max-sm)
-  .wsContentPageHtml
+  .wsFilePageHtml
       top 69px
       width 576px
       height calc(100% - 69px)
         margin-left 10px
 
 @media (max-width: max-xs)
-  .wsContentPageHtml
+  .wsFilePageHtml
     top 70px
     height calc(100% - 70px)
     width 100%

src/reducer/plugin.js

 import { combineReducers } from 'redux'
 import pageHtml from '../plugin/ContentType/PageHtml/pageHtml.js'
-import thread from '../plugin/ContentType/Thread/thread'
+import thread from '../plugin/ContentType/Thread/thread.js'
 
 export default combineReducers({
   pageHtml, thread