FIX Make change tracking work again for inline editable blocks

client/src/components/ElementEditor/Element.js

@@ -10,7 +10,7 @@ import { inject } from 'lib/Injector';
 import i18n from 'i18n';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
-import { submit } from 'redux-form';
+import { submit, isDirty } from 'redux-form';
 import { loadElementFormStateName } from 'state/editor/loadElementFormStateName';
 import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
 import { publishBlockMutation } from 'state/editor/publishBlockMutation';
@@ -20,7 +20,8 @@ import { DragSource, DropTarget } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
 import { elementDragSource, isOverTop } from 'lib/dragHelpers';
 import * as toastsActions from 'state/toasts/ToastsActions';
-import { addFormChanged, removeFormChanged } from 'state/unsavedForms/UnsavedFormsActions';
+// import { addFormChanged, removeFormChanged } from 'state/unsavedForms/UnsavedFormsActions';
+import getFormState from 'lib/getFormState';
 
 export const ElementContext = createContext(null);
 
@@ -39,7 +40,7 @@ const Element = (props) => {
   const [doPublishElementAfterSave, setDoPublishElementAfterSave] = useState(false);
   const [ensureFormRendered, setEnsureFormRendered] = useState(false);
   const [formHasRendered, setFormHasRendered] = useState(false);
-  const [doDispatchAddFormChanged, setDoDispatchAddFormChanged] = useState(false);
+  // const [doDispatchAddFormChanged, setDoDispatchAddFormChanged] = useState(false);
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [publishBlock] = useMutation(publishBlockMutation);
 
@@ -92,12 +93,12 @@ const Element = (props) => {
     }
   }, [justClickedPublishButton, formHasRendered]);
 
-  useEffect(() => {
-    if (doDispatchAddFormChanged) {
-      setDoDispatchAddFormChanged(false);
-      props.dispatchAddFormChanged();
-    }
-  }, [doDispatchAddFormChanged]);
+  // useEffect(() => {
+  //   if (doDispatchAddFormChanged) {
+  //     setDoDispatchAddFormChanged(false);
+  //     props.dispatchAddFormChanged();
+  //   }
+  // }, [doDispatchAddFormChanged]);
 
   const getNoTitle = () => i18n.inject(
     i18n._t('ElementHeader.NOTITLE', 'Untitled {type} block'),
@@ -153,7 +154,7 @@ const Element = (props) => {
     // there are no hooks/callbacks available after this happens the input onchange handlers are fired
     Promise.all(refetchElementalArea())
       .then(() => {
-        setTimeout(() => props.dispatchRemoveFormChanged(), 250);
+        // setTimeout(() => props.dispatchRemoveFormChanged(), 250);
       });
   };
 
@@ -340,7 +341,7 @@ const Element = (props) => {
       // Ensure that formDirty remains truthy
       // Note we need to call props.dispatchAddFormChanged() on the next render rather than straight away
       // or it will get unset by code somewhere else, probably redux-form
-      setDoDispatchAddFormChanged(true);
+      // setDoDispatchAddFormChanged(true);
       // Don't accidentally auto publish the element once validation errors are fixed
       if (doPublishElementAfterSave) {
         setDoPublishElementAfterSave(false);
@@ -435,6 +436,7 @@ const Element = (props) => {
         broken={type.broken}
         onFormSchemaSubmitResponse={handleFormSchemaSubmitResponse}
         onFormInit={() => handleFormInit(activeTab)}
+        formDirty={formDirty}
       />
     </ElementContext.Provider>
   </div>);
@@ -462,7 +464,10 @@ function mapStateToProps(state, ownProps) {
 
   const tabSetName = tabSet && tabSet.id;
   const uniqueFieldId = `element.${elementName}__${tabSetName}`;
-  const formDirty = state.unsavedForms.find((unsaved) => unsaved.name === `element.${elementName}`);
+  // const formDirty = state.unsavedForms.find((unsaved) => unsaved.name === `element.${elementName}`);
+
+  const formName = loadElementFormStateName(ownProps.element.id);
+  const formDirty = isDirty(`element.${formName}`, getFormState)(state);
 
   // Find name of the active tab in the tab set
   // Only defined once an element form is expanded for the first time
@@ -490,16 +495,18 @@ function mapDispatchToProps(dispatch, ownProps) {
       // Perform a redux-form remote-submit
       dispatch(submit(`element.${elementName}`));
     },
-    dispatchAddFormChanged() {
-      // Ensures the form identifier is in unsavedForms in the global redux state
-      // This is used to derive the formDirty prop in mapStateToProps
-      dispatch(addFormChanged(`element.${elementName}`));
-    },
-    dispatchRemoveFormChanged() {
-      // Removes the form identifier from unsavedForms in the global redux store
-      // Opposite of beheaviour of dispatchAddFormChanged()
-      dispatch(removeFormChanged(`element.${elementName}`));
-    },
+    // dispatchAddFormChanged() {
+    //   console.log('changing');
+    //   // Ensures the form identifier is in unsavedForms in the global redux state
+    //   // This is used to derive the formDirty prop in mapStateToProps
+    //   // dispatch(addFormChanged(`element.${elementName}`));
+    // },
+    // dispatchRemoveFormChanged() {
+    //   console.log('unchanging');
+    //   // Removes the form identifier from unsavedForms in the global redux store
+    //   // Opposite of beheaviour of dispatchAddFormChanged()
+    //   // dispatch(removeFormChanged(`element.${elementName}`));
+    // },
     actions: {
       toasts: bindActionCreators(toastsActions, dispatch),
     },

client/src/components/ElementEditor/ElementEditor.js

@@ -68,6 +68,8 @@ class ElementEditor extends PureComponent {
 
   render() {
     const {
+      fieldName,
+      formState,
       ToolbarComponent,
       ListComponent,
       areaId,
@@ -104,6 +106,12 @@ class ElementEditor extends PureComponent {
           sharedObject={sharedObject}
         />
         <ElementDragPreview elementTypes={elementTypes} />
+        <input
+          name={fieldName}
+          type="hidden"
+          value={JSON.stringify(formState) || ''}
+          className="no-change-track"
+        />
       </div>
     );
   }