init rich test editor for project

[arvados-workbench2.git] / src / components / text-field / text-field.tsx

diff --git a/src/components/text-field/text-field.tsx b/src/components/text-field/text-field.tsx
index b5671dbb08c962b8bae3458738fdf634b57bc382..beea2ba3360fa51d796f58693706073142900617 100644 (file)
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import { WrappedFieldProps } from 'redux-form';
 import { ArvadosTheme } from '~/common/custom-theme';
 import { TextField as MaterialTextField, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import RichTextEditor from 'react-rte';
 
 type CssRules = 'textField';
 
@@ -27,3 +28,32 @@ export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyl
         fullWidth={true}
         {...props.input}
     />);
+
+
+interface RichEditorTextFieldData {
+    label?: string;
+}
+
+type RichEditorTextFieldProps = RichEditorTextFieldData & WrappedFieldProps & WithStyles<CssRules>;
+
+export const RichEditorTextField = withStyles(styles)(
+    class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
+        state = {
+            value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
+        };
+
+        onChange = (value: any) => {
+            this.setState({ value });
+            this.props.input.onChange(value.toString('html'));
+        }
+
+        render() {
+            return (
+                <RichTextEditor 
+                    value={this.state.value}
+                    onChange={this.onChange}
+                    placeholder={this.props.label} />
+            );
+        }
+    }
+);
\ No newline at end of file