[Bug]: Keyboard Handlers have stale state in React

[adamjerickson]

Which packages did you experience the bug in?

react

What Tiptap version are you using?

"@tiptap/core": "^2.0.0", "@tiptap/extension-mention": "^2.0.4", "@tiptap/extension-placeholder": "^2.0.4", "@tiptap/pm": "^2.0.4", "@tiptap/react": "^2.0.4", "@tiptap/starter-kit": "^2.0.4", "@tiptap/suggestion": "^2.0.4",

What’s the bug you are facing?

Similar to (and called out at the end of) Bug 2403, the React state is stale when using keyboard handlers.

See the codesandbox link for example.

I am trying to submit the content of the editor on press of the Enter key. This seems like a very common use case, but it's taken me a long time even to find the referenced bug and now create a sandbox to show that it also doesn't work properly.

Anyway, go to the sandbox, you'll see two examples, one that uses the editorProps.handleKeyDown and one that creates an extension and uses addKeyuboardShortcuts. In box examples, you'll see in the console that the key is pressed, but the content that is logged is stale.

Initially it will log blank/undefined. It is really hard to tell exactly when it does refresh, but if you edit enough, or change focus, or even edit the code, you'll eventually get it to log the placeholder content plus some of the things you typed.

What browser are you using?

Chrome

Code example

https://codesandbox.io/s/gracious-dirac-pwvvql?file=/src/App.tsx

What did you expect to happen?

When using TipTap with React, you should be able to add a keyboard shortcut that properly interacts with state so that you can submit the content of the editor on press of a key (Enter in this case).

Anything to add? (optional)

Here is a loom video: https://www.loom.com/share/909b8874d7464ba78858cc73d08617d2

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖