feat: install draft.js

package.json

@@ -13,6 +13,7 @@
     "apollo-link-http": "^1.5.5",
     "apollo-link-state": "^0.4.2",
     "date-fns": "2.0.0-alpha.16",
+    "draft-js": "^0.10.5",
     "font-picker-react": "^2.0.5",
     "graphql": "^14.0.0",
     "graphql-tag": "^2.9.2",

src/modules/musician/components/text_editor.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Editor, EditorState} from 'draft-js';
+
+class TextEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {editorState: EditorState.createEmpty()};
+    this.onChange = (editorState) => this.setState({editorState});
+    this.setEditor = (editor) => {
+      this.editor = editor;
+    };
+    this.focusEditor = () => {
+      if (this.editor) {
+        this.editor.focus();
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.focusEditor();
+  }
+
+  render() {
+    return (
+      <div style={styles.editor} onClick={this.focusEditor}>
+        <Editor
+          ref={this.setEditor}
+          editorState={this.state.editorState}
+          onChange={this.onChange}
+        />
+      </div>
+    );
+  }
+}
+
+const styles = {
+  editor: {
+    border: '1px solid gray',
+    minHeight: '6em'
+  }
+};
+
+export default TextEditor;

src/modules/musician/forms/edit_sections_content.js

@@ -25,6 +25,7 @@ import { updateSectionContentMutation } from '../graphql/mutations';
 import DeleteSectionButton              from '../components/delete_section_button';
 import Alert                            from '../../../layouts/alert';
 import AddWidgetForm                    from '../../widgets/forms/add_widget_form';
+import TextEditor                       from '../components/text_editor';
 
 const EditSectionsContent = ({
   section: {
@@ -78,13 +79,7 @@ const EditSectionsContent = ({
       <EditSectionsContent.ContentBlock>
         {
           type === 'text'?
-            <TextField
-              name="content"
-              value={content}
-              onChange={handleChange}
-              label="page content"
-              multiline={true}
-            />
+            <TextEditor />
             :
             <p>in this section will be displaying your {type}</p>
         }

yarn.lock

@@ -2593,6 +2593,14 @@ dotenv@4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
 
+draft-js@^0.10.5:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.5.tgz#bfa9beb018fe0533dbb08d6675c371a6b08fa742"
+  dependencies:
+    fbjs "^0.8.15"
+    immutable "~3.7.4"
+    object-assign "^4.1.0"
+
 duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
@@ -3271,7 +3279,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.1, fbjs@^0.8.16, fbjs@^0.8.5:
+fbjs@^0.8.1, fbjs@^0.8.15, fbjs@^0.8.16, fbjs@^0.8.5:
   version "0.8.17"
   resolved "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   dependencies:
@@ -4023,6 +4031,10 @@ immutable-tuple@^0.4.9:
   version "0.4.9"
   resolved "https://registry.yarnpkg.com/immutable-tuple/-/immutable-tuple-0.4.9.tgz#473ebdd6c169c461913a454bf87ef8f601a20ff0"
 
+immutable@~3.7.4:
+  version "3.7.6"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
+
 import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"