Can't run hooks in OnChangePlugin - autosave feature

[wickandpiper]

I'm trying to implement an auto-save feature in a Lexical React project. The logic is as follows: 1. user stops typing > 2. onChange handler will send a debounced Redux dispatch method which updates to my database with the latest editor state/content (code not illustrated below).

However, it appears this is not possible as I need to use a useDispatch Redux hook to accomplish this, and they aren't allowed with the LexicalOnChangePlugin. e.g. import {OnChangePlugin} from '@lexical/react/LexicalOnChangePlugin'

Implemented in my Lexical editor as follows:

<OnChangePlugin onChange={MyOnChangePlugin} />

And MyOnChangePlugin looks like:

export function MyOnChangePlugin (editorState) {

  // Error triggers on the following line
  const dispatch = useDispatch()

  editorState.read(() => {
    // Read the contents of the EditorState here.
    editorState => editorStateRef.current = editorState

    // Autosave code not complete yet
  })
  
}

I assume I may need to register a new command or listener as part of a new plugin, but I essentially would be recreating the LexicalOnChangePlugin - so I assume I will be in a catch 22 situation.

Any help or advice on this? Thanks in advance.

[wickandpiper]

Figured out a workaround for this in case it helps others. I changed the approach to creating a plugin that saves based on when someone stops typing, instead of trying to dovetail with onChangePlugin. I also do a equals check to see if the content is different from the current content. AutoSave plugin below:

export function AutoSave() {
  const [editor] = useLexicalComposerContext()

  const dispatch = useDispatch()
  const { currentNote } = useSelector(state => state.notes)
  const [saveState, setSaveState] = useState("saved")

  function debounce(callback, wait) {
    let timeout;
    return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(function () { callback.apply(this, args); }, wait);
    };
  }

  useEffect(() => {
    if (saveState === "saving") {
      updateDb(saveState, setSaveState)
    }
  },[saveState])

  const updateDb = useCallback((saveState,setSaveState) => {
    if (saveState === "saving") {
      const raw = editor.getEditorState()
      const json = JSON.stringify(raw)
      if (!equals(currentNote.content, json)) {
        dispatch(setNote({ id: currentNote.id, content: json})).then(() => { setSaveState("saved") })
      } else {
        setSaveState("saved")
      }
    }
  }, [saveState,setSaveState])
  
  window.addEventListener('keyup', debounce( () => {
    setSaveState("saving")
  }, 1500))

  const savingToDb = saveState === "saving"

  return(
    <Box sx={{ color: 'text.primary', typography: 'body2' }}>
      {savingToDb ? 'Saving' : <span>Last save was { currentNote && currentNote.updated && timeAgo.format(currentNote.updated.toDate()) }</span>}
    </Box>
  )
  
}

[alexluong]

Your issue is MyOnChangePlugin is not a React component but rather a function call. What you can do:

export function AutosavePlugin((): AutosavePluginProps) {
  const dispatch = useDispatch()

  const onChange = useDebounceCallback(
    (editorState: EditorState) => {
      // do your thing
      dispatch({})
    },
    1000,
    false
  );

  return <OnChangePlugin onChange={onChange} ignoreSelectionChange />;
}

export function MyEditor() {
  return (
    <LexicalComposer>
      <Editor />
      <AutosavePlugin />
    </LexicalComposer>
  )
}

[wickandpiper]

Ahh I see. Thanks a million