add saving text

src/components/formula/Formula.ts

@@ -26,12 +26,16 @@ export class Formula extends ExcelComponent {
 
     this.formulaInput = this.$root.find('#formula-input');
 
-    this.$on('table:input', text => {
+    // this.$on('table:input', text => {
-      this.formulaInput.text = text;
+    //   this.formulaInput.text = text;
-    });
+    // });
     this.$on('table:select-cell', text => {
       this.formulaInput.text = text;
     });
+
+    this.$subscribe(state => {
+      this.formulaInput.text = state.currentText;
+    });
   }
 
   onInput(event: Event) {

src/components/table/Table.ts

@@ -37,6 +37,7 @@ export class Table extends ExcelComponent {
 
     this.$on('formula:input', (data) => {
       this.selection.current.text = data;
+      this.updateCurrentTextInStore(data);
     });
 
     this.$on('formula:enter-press', () => {
@@ -46,8 +47,12 @@ export class Table extends ExcelComponent {
     // this.$subscribe(state => {
     //   console.log('State in Table', state);
     // });
+    this.initTable();
+  }
 
+  initTable() {
     this.initTableSize();
+    this.initTableContent();
   }
 
   initTableSize() {
@@ -66,6 +71,13 @@ export class Table extends ExcelComponent {
     });
   }
 
+  initTableContent() {
+    const tableContent = this.store.getState().dataState;
+    Object.keys(tableContent).forEach(cellId => {
+      this.$root.find(`[data-id="${cellId}"]`).text = tableContent[cellId] || '';
+    });
+  }
+
   emitSelectCallback() {
     this.$emit('table:select-cell', this.selection.current.text);
   }
@@ -73,13 +85,19 @@ export class Table extends ExcelComponent {
   async resizeTable(event: MouseEvent) {
     try {
       const resizeData = await resizeHandler(this.$root, event);
-      console.log('Resize data', resizeData);
       this.$dispatch(actions.tableResize({ resizeData }));
     } catch (e) {
       console.warn('Resize error', e.message);
     }
   }
 
+  updateCurrentTextInStore(text: string) {
+    this.$dispatch(actions.changeText({
+      text,
+      id: this.selection.current.data.id,
+    }));
+  }
+
   onMousedown(event: MouseEvent) {
     selectHandler(event, this.selection, this.emitSelectCallback.bind(this));
     this.resizeTable(event);
@@ -90,7 +108,6 @@ export class Table extends ExcelComponent {
   }
 
   onInput(event: InputEvent) {
-    const inputText = (event.target as HTMLElement).textContent.trim();
+    this.updateCurrentTextInStore((event.target as HTMLElement).textContent.trim());
-    this.$emit('table:input', inputText);
   }
 }

src/core/createStore.ts

@@ -6,6 +6,8 @@ import { storage } from './utils';
 const initialState: StateType = {
   colState: {},
   rowState: {},
+  dataState: {},
+  currentText: '',
   ...storage('excel-state'),
 };
 

src/redux/actions.ts

@@ -1,4 +1,4 @@
-import { TABLE_RESIZE } from './constants';
+import { CHANGE_TEXT, TABLE_RESIZE } from './constants';
 
 export function tableResize(resizeData: any) {
   return {
@@ -6,3 +6,10 @@ export function tableResize(resizeData: any) {
     ...resizeData,
   };
 }
+
+export function changeText(data: { text: string, id: string }) {
+  return {
+    type: CHANGE_TEXT,
+    data,
+  };
+}

src/redux/constants.ts

@@ -1 +1,2 @@
 export const TABLE_RESIZE = 'TABLE_RESIZE';
+export const CHANGE_TEXT = 'CHANGE_TEXT';

src/redux/rootReducer.ts

@@ -1,4 +1,4 @@
-import { TABLE_RESIZE } from './constants';
+import { CHANGE_TEXT, TABLE_RESIZE } from './constants';
 import { ActionType, StateType } from './types';
 
 export function rootReducer(state: StateType, action: ActionType) {
@@ -12,6 +12,14 @@ export function rootReducer(state: StateType, action: ActionType) {
       return { ...state, ...newState };
     }
 
+    case CHANGE_TEXT: {
+      const newState: StateType = state.dataState || {};
+
+      newState[action.data.id] = action.data.text;
+
+      return { ...state, currentText: action?.data?.text, dataState: newState };
+    }
+
     default: return state;
   }
 }