Merge pull request silverstripe#654 from creative-commoners/pulls/1/p…

…ersistant-form-state

NEW Form state & schema persists across form remounting

client/src/components/HtmlEditorField/HtmlEditorField.js

@@ -46,17 +46,8 @@ class HtmlEditorField extends TextField {
     return <Script url={this.props.data.editorjs} onLoad={this.handleReady} />;
   }
 
-  /**
-   * Renders the rich text editor (TinyMCE)
-   * Happens only after the dependency script has been loaded
-   */
-  renderRichTextEditor() {
-    const config = JSON.parse(this.props.data.attributes['data-config']);
-    return super.render(config);
-  }
-
   render() {
-    return (this.state.isReady) ? this.renderRichTextEditor() : this.renderDependencyScript();
+    return (this.state.isReady) ? super.render() : this.renderDependencyScript();
   }
 
   /**
@@ -74,6 +65,21 @@ class HtmlEditorField extends TextField {
       $(document).triggerHandler(mountEvent);
     }
   }
+
+  componentWillUnmount() {
+    if (this.state.isReady) {
+      const { document, jQuery: $ } = window;
+      const unmountEvent = $.Event('EntwineElementsRemoved');
+      const editorElement = document.getElementById(this.getInputProps().id);
+      unmountEvent.targets = [editorElement];
+      // Ensure that redux knows of the latest changes before the editor is destroyed.
+      // This is pretty awful because TinyMCE triggers jQuery events which aren't picked up
+      // by the react components. We also can't manufacture an event with the right target
+      // without actually dispatching the event, and by then it's too late.
+      super.handleChange({ target: editorElement });
+      $(document).triggerHandler(unmountEvent);
+    }
+  }
 }
 
 export { HtmlEditorField as Component };

client/src/containers/Form/Form.js

@@ -25,4 +25,5 @@ const InjectedForm = inject(
 
 export default reduxForm({
   getFormState,
+  destroyOnUnmount: false,
 })(InjectedForm);

client/src/containers/FormBuilderLoader/FormBuilderLoader.js

@@ -43,7 +43,11 @@ class FormBuilderLoader extends Component {
   }
 
   componentDidMount() {
-    this.fetch();
+    const { schema, refetchSchemaOnMount } = this.props;
+
+    if (refetchSchemaOnMount || !schema) {
+      this.fetch();
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -430,12 +434,17 @@ FormBuilderLoader.propTypes = Object.assign({}, basePropTypes, {
   identifier: PropTypes.string.isRequired,
   schemaUrl: PropTypes.string.isRequired,
   schema: schemaPropType,
+  refetchSchemaOnMount: PropTypes.bool.isRequired,
   form: PropTypes.string,
   submitting: PropTypes.bool,
   onFetchingSchema: PropTypes.func,
   loadingComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
 });
 
+FormBuilderLoader.defaultProps = {
+  refetchSchemaOnMount: true,
+};
+
 function mapStateToProps(state, ownProps) {
   const schema = state.form.formSchemas[ownProps.schemaUrl];
   const identifier = createFormIdentifierFromProps({ ...ownProps, schema });

package.json

@@ -82,7 +82,7 @@
     "react-select": "^1.0.0-rc.5",
     "reactstrap": "^5.0.0-beta",
     "redux": "https://registry.npmjs.org/redux/-/redux-3.0.5.tgz",
-    "redux-form": "^6.0.2",
+    "redux-form": "^6.8.0",
     "redux-thunk": "^2.1.0",
     "resize-observer-polyfill": "^1.5.0",
     "toposort": "^1.0.3",

yarn.lock

@@ -8418,9 +8418,9 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
-redux-form@^6.0.2:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.7.0.tgz#9fb0769e76f14febf1dd7686e02c4ab2d6f953aa"
+redux-form@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-6.8.0.tgz#ff1b590b59f987d7e3ff080d752f7120bfe42af3"
   dependencies:
     deep-equal "^1.0.1"
     es6-error "^4.0.0"
@@ -8429,7 +8429,7 @@ redux-form@^6.0.2:
     is-promise "^2.1.0"
     lodash "^4.17.3"
     lodash-es "^4.17.3"
-    prop-types "^15.5.6"
+    prop-types "^15.5.9"
 
 redux-thunk@^2.1.0:
   version "2.2.0"