How to save the editor's content with delay?

[amirhhashemi]

I want to save the editor's content in a database as I type something, but I don't want to save the content for every single character change, it puts too much pressure on the server. I would rather save it when the editor remains untouched for about 2 seconds.
I would do this in React like this:

const Editor = () => {
    const [content, setContent] = useState("");
    useEffect(() => {
        const timer = setTimeout(() => {
            // save 
        }, 2000)
        return () => {
            clearTimeout(timer)
        }
    }, [content])
}

But I can't find a way to do this in tiptap. maybe I can store the last time that I saved the content in a place? and do the same logic as react in the onUpdate method.

[amirhhashemi]

This works for me:

import { useDebounce } from 'use-debounce';

const Editor = () => {
  // create editor instance and other stuff
  const [debouncedEditor] = useDebounce(editor?.state.doc.content, 2000);

  useEffect(() => {
    if (debouncedEditor) {
      // save
    }
  }, [debouncedEditor]);
}

[Iischeese]

I know I'm a bit late but when I try this I get an error saying:

⨯ TypeError: (0 , use_debounce__WEBPACK_IMPORTED_MODULE_8__.default) is not a function or its return value is not iterable
    at TipTap (./components/dashboard/TipTap.jsx:56:87)
digest: "3125453241"
  44 |
  45 |   // create editor instance and other stuff
> 46 |   const [debouncedEditor] = useDebounce(editor?.state.doc.content, 2000);
     |                                         ^
  47 |
  48 |   useEffect(() => {
  49 |     if (debouncedEditor) {
 GET /test 500 in 118ms

No clue what I'm doing wrong. Thanks in advance!

[nperez0111]

editor has to be an editor instance (like the result of useEditor)

I would also not recommend getting the JSON like that, you can use the getJSON instance method. So all you would need is:

const editor = useEditor({ extensions, onUpdate: ()=> {
debounce(editor.getJSON());
} })

[Iischeese]

I feel like an idiot

import {useDebounce} from "use-debounce";

vs

import useDebounce from "use-debounce";

I almost gave up thanks!

[PROMCz11]

Hey, I have a different question, how do you guys manage saving the updated document to your server? do you only patch the changes or replace the whole document each time? TipTap doesn't output ID'ed nodes so it's not easy to detect changes and only update those on the server

[Dari4sho]

Hey @PROMCz11 - just tackled this and left the same answer in another discussion, I hope you don't mind me copy pasting it:

I just implemented this for an app and made it work using yjs by using the Collaboration extension. It is useful for this use case even if you don't want / need collaboration features.

It needs a bit of work to make it run seamlessly, but then you have a mechanism that only sends a few bytes over the wire per update - instead of the whole document.

How it roughly works - instead of (or additionally to) storing the page contents as raw HTML or JSON in your database, you store a binary snapshot of a yjs document (I store it in a BYTEA column in Postgres).

On fresh page load, I send the binary data (as a Buffer) to the frontend for a local working copy.
On the frontend, I merge this Buffer with a fresh ydoc instance (const ydoc = new Y.Doc() and Y.applyUpdate(ydoc, new Uint8Array(serverBuffer))).

You register an update listener on the ydoc (ydoc.on('update', (update) => { ... })) and you send the update to the server as binary data (converted to a Buffer for transmission).
On the server you do the same. You create a fresh ydoc, get the yjs buffer from the database - merge it into the ydoc - merge the update (both with Y.applyUpdate), encode the full state again (with Y.encodeStateAsUpdate(ydoc)), and store it back in the database.

This way, you only send around the update of a few bytes and always have the full document on the server / database.

As mentioned, this needs a bit of work and testing around it and adds some complexity.

• For example, to implement debouncing, I had to create an updateQueue array that each update (from ydoc.on('update', ...)) gets pushed to and ultimately merged in the debounced action (Y.mergeUpdates(updateQueue)) before sending it to the server - including cleaning it up after each debounced transmission.
• I recommend registering some beforeunload & component unmount mechanism and using the keepalive flag for fetch operations so you make sure that updates get sent immediately when a user refreshes or changes pages so you reduce the chance of data loss.

It took me about 1 day to implement it including research, trial and error, and testing.
Bonus point: if you ever want to implement collaboration, this way you'd have a good base to make it work as you're already using yjs.

[PROMCz11]

Thank you I will look into this