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!