Draft-js: Auto Saving with Draft.js and Redux

[dave4506]

Hi!

I have recently came across draft.js and love it! I just have one small little speed bump. I want to build an auto save like google doc. I was thinking whenever onChange is triggered, I store a raw content state and send it up to the server. But doing so hits performance pretty hard and seems inefficient. How can I get incremental saves? Should I just use a setInterval()? I'm sure there is a smarter way to do this...

[sophiebits]

I would probably "debounce" the callback so that changes get saved after the user stops typing for, say, 3 seconds. What sort of smarter logic would you want?

[dave4506]

I remember watching the draft.js video and the person talked about how the undo and redo was able to throw out intermediate states in the stack and only keep the important ones. Is there a way I can tap into this logic and trigger saves at these increments?

[dave4506]

Hey So I am currently using the debounce callback. I just have a small issue. I need to still store the editor state in the component. So in my on change function i have
()=>{debounce(this.save,3000)();this.setState({...});}
the problem is if the onChange is triggered twice, the debounce would wait 3s and trigger twice. Instead of once. What am I doing wrong?

[dave4506]

Closing Issue, I looked up how debounce works and placed it in the state so the scope is consistent. Thanks @spicyj!

[oyeanuj]

@dave4506 Could you share your solution please? Did you also try the strategy mentioned in your second comment above?

[dave4506]

Hey! I simply used the debounce method. I didn't look into the second method as the debounce is already effective and can't find what I was talking about in the docs.I pulled off the debounce by...
this.state = {saveEditorState:debounce(this.save,3000)} and within the onChange function that is called, i have it execute this.state.saveEditorState(params).

[hadynz]

Whilst the debounce will surely ensure that a save endpoint is not spammed... the issue that I am seeing is that the editor's onChange event is triggered for many non-editing scenarios that I would like to ignore. For example, as the cursor location changes, the onChange method will trigger a save.

Is there a way to ignore selection changes in triggering onChange?

[hadynz]

Just found an answer for my above question by @hellendag in https://github.com/facebook/draft-js/issues/233#issuecomment-201702255:

onChange(editorState) {
  if (editorState.getCurrentContent() !== this.state.editorState.getCurrentContent()) {
    // content has changed
  }
  if (editorState.getSelection() !== this.state.editorState.getSelection()) {
    // selection has changed
  }
}

[oyeanuj]

@hadynz @dave4506 How do you get the incremental saves in your solutions? Or did you save the whole editor state every time?