PR 226 added editable descriptions

package.json

@@ -3,7 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "draft-js": "^0.10.5",
+    "draft-js-autolist-plugin": "^2.0.0",
+    "draft-js-markdown-plugin": "^3.0.0",
+    "draft-js-plugins-editor": "^2.0.8",
     "glamor": "^2.20.40",
+    "markdown-draft-js": "^1.0.1",
+    "prismjs": "^1.15.0",
     "react": "^15.6.1",
     "react-animated-number": "^0.4.3",
     "react-big-calendar": "^0.19.0",

src/components/Content/Calendar/Calendar.js

@@ -1,11 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import moment from 'moment';
-import {
-  getTasks,
-  getPursuances,
-  rpShowTaskDetails,
-} from '../../../actions';
+import {getTasks, getPursuances, rpShowTaskDetails} from '../../../actions';
 import BigCalendar from 'react-big-calendar';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import './Calendar.css';
@@ -14,7 +10,6 @@ import '../Content.css';
 BigCalendar.momentLocalizer(moment);
 
 class Calendar extends Component {
-
   componentDidMount() {
     const {
       getPursuances,
@@ -44,8 +39,7 @@ class Calendar extends Component {
           t.due_date &&
           t.status !== 'Done' &&
           t.assigned_to === user.username &&
-          (t.pursuance_id === currentPursuanceId ||
-           t.assigned_to_pursuance_id === currentPursuanceId)
+          (t.pursuance_id === currentPursuanceId || t.assigned_to_pursuance_id === currentPursuanceId)
       })
       .map((gid) => {
         const t = taskMap[gid];
@@ -99,5 +93,5 @@ export default connect(({ pursuances, currentPursuanceId, tasks, rightPanel, use
   ({ pursuances, currentPursuanceId, tasks, rightPanel, user }), {
     getTasks,
     getPursuances,
-    rpShowTaskDetails,
+    rpShowTaskDetails
 })(Calendar);

src/components/Content/RightPanel/TaskDetails/TaskDetails.css

@@ -109,7 +109,7 @@
 
 .subtasks-list {
   list-style: none;
-  padding-left: 0
+  padding-left: 0;
 }
 
 .subtask-item {

src/components/Content/RightPanel/TaskDetails/TaskDetails.js

@@ -3,17 +3,16 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { showTaskInPursuance } from '../../../../utils/tasks';
 import { getPursuances, getTasks, getUsers, rpShowTaskDetails, patchTask } from '../../../../actions';
-import ReactMarkdown from 'react-markdown';
 import FaCircleO from 'react-icons/lib/fa/circle-o';
 import TaskDetailsTopbar from './TaskDetailsTopbar';
 import TaskTitle from './TaskTitle/TaskTitle';
 import TaskIcons from './TaskIcons/TaskIcons';
 import TaskForm from '../../TaskManager/TaskForm/TaskForm';
+import Wysiwyg from './Wysiwyg/Wysiwyg';
 
 import './TaskDetails.css';
 
 class TaskDetails extends Component {
-
   componentWillMount() {
     const {
       currentPursuanceId,
@@ -28,8 +27,7 @@ class TaskDetails extends Component {
 
       // If this task was assigned to this pursuance from another
       // pursuance, grab the current pursuance's tasks, too
-      if (currentPursuanceId &&
-          thisTasksPursuanceId !== currentPursuanceId.toString()) {
+      if (currentPursuanceId && thisTasksPursuanceId !== currentPursuanceId.toString()) {
         getTasks(currentPursuanceId);
       }
     }
@@ -93,17 +91,7 @@ class TaskDetails extends Component {
             </div>
             <div className="task-deliverables-ctn">
               <h4><strong>Description / Deliverables</strong></h4>
-              <span>
-                <ReactMarkdown
-                  source={task.deliverables}
-                  render={{Link: props => {
-                    if (props.href.startsWith('/')) {
-                      return <a href={props.href}>{props.children}</a>;
-                    }
-                    // If link to external site, open in new tab
-                    return <a href={props.href} target="_blank">{props.children}</a>;
-                  }}} />
-              </span>
+              <Wysiwyg taskGid={taskGid} attributeName='deliverables' patchTask={this.props.patchTask} />
             </div>
             <div className="subtasks-ctn">
               <h4><strong>Subtasks</strong></h4>
@@ -129,5 +117,7 @@ class TaskDetails extends Component {
   };
 }
 
-export default withRouter(connect(({currentPursuanceId, pursuances, tasks, rightPanel, users}) => ({currentPursuanceId, pursuances, tasks, rightPanel, users}),
-  { getPursuances, getTasks, getUsers, rpShowTaskDetails, patchTask })(TaskDetails));
+export default withRouter(connect(
+  ({currentPursuanceId, pursuances, tasks, rightPanel, users}) => ({currentPursuanceId, pursuances, tasks, rightPanel, users}),
+  {getPursuances, getTasks, getUsers, rpShowTaskDetails, patchTask}
+)(TaskDetails));

src/components/Content/RightPanel/TaskDetails/Wysiwyg/Wysiwyg.css

@@ -0,0 +1,21 @@
+.wysiwyg {
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  cursor: text;
+  padding: 16px;
+  border-radius: 5px;
+  margin: 20px 0;
+  box-shadow: inset 0px 1px 8px 3px #ABABAB;
+  background: #fefefe;
+  color: black;
+}
+
+.wysiwyg :global(.public-DraftEditor-content) {
+  min-height: 140px;
+}
+
+.wysiwyg-save,
+.wysiwyg-edit {
+  border-radius: 5px;
+  background-color: #000;
+}

src/components/Content/RightPanel/TaskDetails/Wysiwyg/Wysiwyg.js

@@ -0,0 +1,103 @@
+import React, {Component} from 'react';
+import {connect} from 'react-redux';
+import {EditorState, convertToRaw, convertFromRaw} from 'draft-js';
+import Editor from 'draft-js-plugins-editor';
+import createAutoListPlugin from 'draft-js-autolist-plugin'
+import createMarkdownPlugin from 'draft-js-markdown-plugin';
+import {markdownToDraft, draftToMarkdown} from 'markdown-draft-js';
+import ReactMarkdown from 'react-markdown';
+import './Wysiwyg.css';
+
+const autoListPlugin = createAutoListPlugin();
+
+const plugins = [
+  autoListPlugin,
+  createMarkdownPlugin()
+];
+
+class Wysiwyg extends Component {
+  componentWillMount() {
+    const {tasks: { taskMap }, taskGid, attributeName} = this.props,
+      attributeValue = taskMap[taskGid][attributeName],
+      content = attributeValue ? markdownToDraft(attributeValue, {
+        remarkableOptions: {
+          html: false,
+          preserveNewlines: true
+        }
+      }) : markdownToDraft('');
+
+    this.state = {
+      editMode: false,
+      editorState: EditorState.createWithContent(convertFromRaw(content))
+    };
+  }
+
+  editModeEnable = () => {
+    this.setState({
+      editMode: true
+    });
+  };
+
+  onChange = (editorState) => {
+    this.setState({
+      editorState
+    });
+  };
+
+  save = () => {
+    const {patchTask} = this.props,
+      markdown = draftToMarkdown(convertToRaw(this.state.editorState.getCurrentContent())),
+      payload = {gid: this.props.taskGid};
+
+    payload[this.props.attributeName] = markdown;
+
+    patchTask(payload);
+
+    this.setState({
+      editMode: false
+    });
+  }
+
+  render() {
+    const {tasks: {taskMap}} = this.props,
+      attributeValue = taskMap[this.props.taskGid][this.props.attributeName];
+
+    return (
+      <div>          
+        {
+          this.state.editMode && (
+            <div>
+              <div className='wysiwyg'>
+                <Editor
+                  editorState={this.state.editorState}
+                  onChange={this.onChange}
+                  plugins={plugins}
+                />
+              </div>
+              <button className='wysiwyg-save' 
+                onClick={this.save}>Save</button>
+            </div>
+          )
+        }
+        {
+          !this.state.editMode && (
+            <div>
+              <ReactMarkdown
+                source={attributeValue}
+                render={{Link: props => {
+                  if (props.href.startsWith('/')) {
+                    return <a href={props.href}>{props.children}</a>;
+                  }
+                  // If link to external site, open in new tab
+                  return <a href={props.href} target="_blank">{props.children}</a>;
+                }}} />
+              <button className='wysiwyg-edit' onClick={this.editModeEnable}>Edit</button>
+            </div>
+          )
+        }
+      </div>
+    );
+  }
+}
+
+export default connect(({tasks}) => ({tasks}), null)(Wysiwyg);