Basic draftjs implementation for text creation

package.json

@@ -23,6 +23,8 @@
   "dependencies": {
     "@psychobolt/react-paperjs": "0.0.56",
     "@psychobolt/react-paperjs-editor": "0.0.10",
+    "draft-js": "^0.11.5",
+    "draft-js-export-html": "^1.4.1",
     "paper": "^0.12.4"
   },
   "peerDependencies": {

src/AnnotationCreation.js

@@ -6,9 +6,9 @@ import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
 import RectangleIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CircleIcon from '@material-ui/icons/RadioButtonUnchecked';
 import PolygonIcon from '@material-ui/icons/Timeline';
-import TextField from '@material-ui/core/TextField';
 import { v4 as uuid } from 'uuid';
 import AnnotationDrawing from './AnnotationDrawing';
+import TextEditor from './TextEditor';
 import WebAnnotation from './WebAnnotation';
 /** */
 class AnnotationCreation extends Component {
@@ -58,8 +58,8 @@ class AnnotationCreation extends Component {
   }
 
   /** */
-  updateBody(e) {
-    this.setState({ annoBody: e.target.value });
+  updateBody(annoBody) {
+    this.setState({ annoBody });
   }
 
   /** */
@@ -72,7 +72,7 @@ class AnnotationCreation extends Component {
   /** */
   render() {
     const { parentactions, windowId } = this.props;
-    const { activeTool, annoBody } = this.state;
+    const { activeTool } = this.state;
     return (
       <div>
         { activeTool && (
@@ -100,11 +100,8 @@ class AnnotationCreation extends Component {
               <PolygonIcon />
             </ToggleButton>
           </ToggleButtonGroup>
-          <TextField
-            multiline
-            rows={6}
-            value={annoBody}
-            onChange={this.updateBody}
+          <TextEditor
+            updateAnnotationBody={this.updateBody}
           />
           <Button onClick={parentactions.closeCompanionWindow}>
             Cancel

src/TextEditor.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Editor, EditorState, RichUtils } from 'draft-js';
+import ToggleButton from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import BoldIcon from '@material-ui/icons/FormatBold';
+import ItalicIcon from '@material-ui/icons/FormatItalic';
+import { stateToHTML } from 'draft-js-export-html';
+
+/** */
+class TextEditor extends Component {
+  /** */
+  constructor(props) {
+    super(props);
+    this.state = { editorState: EditorState.createEmpty() };
+    this.onChange = this.onChange.bind(this);
+    this.handleKeyCommand = this.handleKeyCommand.bind(this);
+    this.handleFormating = this.handleFormating.bind(this);
+  }
+
+  /** */
+  onChange(editorState) {
+    const { updateAnnotationBody } = this.props;
+    this.setState({ editorState });
+    console.log(this.props);
+    if (updateAnnotationBody) {
+      const options = {
+        inlineStyles: {
+          BOLD: { element: 'b' },
+          ITALIC: { element: 'i' },
+        },
+      };
+      updateAnnotationBody(stateToHTML(editorState.getCurrentContent(), options).toString());
+    }
+  }
+
+  /** */
+  handleFormating(e, newFormat) {
+    const { editorState } = this.state;
+    this.onChange(RichUtils.toggleInlineStyle(editorState, newFormat));
+  }
+
+  /** */
+  handleKeyCommand(command, editorState) {
+    const newState = RichUtils.handleKeyCommand(editorState, command);
+    if (newState) {
+      this.onChange(newState);
+      return 'handled';
+    }
+    return 'not-handled';
+  }
+
+  /** */
+  render() {
+    const { editorState } = this.state;
+    const currentStyle = editorState.getCurrentInlineStyle();
+    return (
+      <div>
+        <ToggleButtonGroup
+          size="small"
+          value={currentStyle.toArray()}
+        >
+          <ToggleButton
+            onClick={this.handleFormating}
+            value="BOLD"
+          >
+            <BoldIcon />
+          </ToggleButton>
+          <ToggleButton
+            onClick={this.handleFormating}
+            value="ITALIC"
+          >
+            <ItalicIcon />
+          </ToggleButton>
+        </ToggleButtonGroup>
+        <Editor
+          editorState={editorState}
+          handleKeyCommand={this.handleKeyCommand}
+          onChange={this.onChange}
+        />
+      </div>
+    );
+  }
+}
+
+TextEditor.propTypes = {
+  updateAnnotationBody: PropTypes.func,
+};
+
+TextEditor.defaultProps = {
+  updateAnnotationBody: () => {},
+};
+
+export default TextEditor;