add-page-down-widget

hypha/static_src/src/app/src/common/components/PageDownWidget/index.js

+import * as React from "react";
+import PropTypes from 'prop-types';
+import  TinyMCE  from '../TinyMCE';
+import  "./index.scss";
+
+const PageDownWidget = props => {
+  let tmp = document.createElement("DIV");
+  tmp.innerHTML = props.value;
+  return <div >
+        <TinyMCE 
+        label={props.label}
+        name={props.name}
+        onChange={props.onChange}
+        value={props.value}
+        id={props.id}
+        init={props.init}
+        required={props.required}
+        helperProps={props.helperProps}
+        />
+   
+        { tmp.textContent.length !== 0 &&
+    <div className="preview" dangerouslySetInnerHTML={{__html: props.value}}>
+      
+    </div>}
+  </div>
+
+}
+PageDownWidget.propTypes = {
+  id: PropTypes.string,
+  init: PropTypes.object,
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  onChange: PropTypes.func,
+  value: PropTypes.node,
+  helperProps: PropTypes.object,
+  name: PropTypes.string,
+  
+}
+
+PageDownWidget.displayName = 'PageDownWidget';
+export default PageDownWidget;

hypha/static_src/src/app/src/common/components/PageDownWidget/index.scss

+.preview{
+    width : '100%';
+    background-color : #e7f2f6;
+    padding-left: 3px;
+}
\ No newline at end of file

hypha/static_src/src/app/src/common/components/TinyMCE/index.js

@@ -18,8 +18,8 @@ const TinyMCE = props => {
         ...(props.init),
         menubar: false
       }}
-      onChange={e => props.onChange(props.name, e.level.content)}
       id={props.name}
+      onEditorChange = {content => props.onChange(props.name, content)}
     />
   </div>
 }

hypha/static_src/src/app/src/common/containers/FormContainer/components/FormField/index.js

@@ -8,6 +8,7 @@ import ScoredAnswerWidget from "@common/components/ScoredAnswerWidget";
 import LoadHTML from "@common/components/LoadHTML";
 import Textarea from "@common/components/Textarea";
 import CheckBox from "@common/components/CheckBox";
+import PageDownWidget from "@common/components/PageDownWidget";
 import PropTypes from 'prop-types';
 
 
@@ -139,6 +140,18 @@ class FormField extends React.Component {
           return <LoadHTML 
             text={kwargs.text}
           />;
+
+        case "PagedownWidget":
+          return <PageDownWidget 
+              label={kwargs.label}
+              name={fieldProps.name}
+              onChange={this.onChange}
+              value={value}
+              id={fieldProps.name}
+              init={widget.mce_attrs}
+              required={kwargs.required}
+              helperProps={this.getHelperprops()}
+          />
       
         default:
           return <div>Unknown field type {this.getType()}</div>