Autosave

[horacioh]

is this something do you think is useful?

I made a silly example of it: https://codesandbox.io/s/slate-autosave-example-w1qru

cc @zbeyens

P.S.: sorry for all the issues I'm creating 😅. I'm working on my app and I'm really invested in this plugins, I'm suggesting things I'm using and I find them useful to others. hope is ok!

[zbeyens]

Nice one! As of props I see at least these: value, storageKey: string of the value in the storage, storage (default: localStorage, to allow using the asynchronous localForage), saveDelay: number, saveBeforeUnload: boolean, onSave where we can save to our own back-end 😀.

I would not save after every change, it can have a big performance impact (especially with localStorage). Popular editors save when the user stop writing for a certain delay (saveDelay). Then, if enabled, we can use window.onbeforeunload if the window is closed before saveDelay. So basically the initial value of the editor will be the value stored in the local storage and every other change is local (using useState)

Hey you can create tens or hundreds of issues I would be amazed! It's more than welcome 😀
Also working on an app but the slate part is in stand-by. Will push all its future plugins here 🙂

[horacioh]

perfect!!

ok I will work on the API, the example was a quick proove of concept :)
thanks for the support!

[JesseLiii]

Hi, were there any updates on this feature?

[zbeyens]

Not planned yet.

[JesseLiii]

Although I don't have the time to make this a plugin, I did create an autosave solution that saves to a server after 5 seconds of no-editing, and also before window.unload if anyone stumbles on this thread and needs it.

[trancethehuman]

I'm interested

[wasauce]

@JesseLiii interested in this if you are open to sharing!

[12joan]

Here's the autosave solution I'm using in my app https://untitlednote.xyz/. I've found it to be very reliable and I've encountered no instances of accidental data loss in production. MIT license applies.

https://github.com/12joan/untitled-note/blob/9b9aad3fe2f45f2fe9c6c04cc51fc830066aeed5/client/lib/editor/useDebouncedSyncDocument.ts

Summary of the relevant files:

• useDebouncedSyncDocument
  • Provides debounced setter functions for the body and title that delegate to useSyncDocument
  • Keeps track of an isDirty flag, which is true if a debounced setter is pending OR useSyncDocument is still processing an update
  • Prevents beforeunload if isDirty is true
• useSyncDocument
  • Stores a local workingDocument state that is updated using updateDocument
  • Knows how to merge "server-driven data" returned from an update request with the local document
  • When the local document is modified, enqueues a promise using useEnqueuedPromises to update it on the server
  • Displays a message if an update request is failing
• useEnqueuedPromises
  • Provides an enqueuePromise function
  • If enqueuePromise is called and no promise is currently in progress, it starts the promise immediately
  • If enqueuePromise is called and a promise is currently in flight, it waits until the first promise has finished before starting the second
  • Only one pending promise can be enqueued at a time. If Promise A is in flight and Promise B is already enqueued, calling enqueuePromise with Promise C will replace Promise B, since Promise C contains more recent data. Promise C will be called once Promise A finishes; Promise B will be skipped.
  • Retries failed promises infinitely unless another promise is enqueued

[wasauce]

Thanks very much! This is really helpful.