Merge pull request #12 from commutatus/fix-save

fix: Component not updating while typing
commutatus · Sep 1, 2023 · 7eb3912 · 7eb3912
2 parents 9cddc13 + 58cbfe8
commit 7eb3912
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@commutatus/cm-page-builder",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Page builder package like notion",
   "main": "lib/page/index.js",
   "files": [

diff --git a/src/components/AddComponent.js b/src/components/AddComponent.js
@@ -167,8 +167,18 @@ class AddComponent extends React.Component {
     }
   }
 
+  debouncedSave = _.debounce((id, e, emitOnly = false) => {
+    this.props.updateComponent({id, newState: {content: e.target.innerHTML}, emitOnly});
+  }, 300);
+
   handleInput = (e) => {
+    e.persist();
     this.setState({ showActionBtn: e.target.innerHTML === '' && !e.target.value })
+
+    // Same as onBlur
+    if(this.props.data.componentType !== 'Embed') {
+      this.debouncedSave(this.props.id, e, true)
+    }
   }
 
   // handles the focus and set the cursor to right position.

diff --git a/src/redux/reducers/appDataReducers.js b/src/redux/reducers/appDataReducers.js
@@ -236,9 +236,9 @@ function updateComponentTypeState(state, data) {
 }
 
 function updateComponentState(state, data) {
-  let { componentData } = state;
-  let { newState, id } = data;
-  componentData = componentData.map((component) => {
+  const { componentData } = state;
+  let { newState, id, emitOnly } = data;
+  const newComponentData = componentData.map((component) => {
     if (component.id === id) {
       return {
         ...component,
@@ -250,7 +250,7 @@ function updateComponentState(state, data) {
     }
   });
   emitUpdate({ id, ...newState }, "update");
-  return { componentData };
+  return emitOnly ? state : { componentData: newComponentData};
 }
 
 function removeComponentFromState(state, data) {