Can not acess the current reference to editor using onKeydown event (REACT)

[costaluu]

Hello, I don't know if this is a non-trivial thing however i've been searching for about 3 hours how to simply bind a keydown event and get the current text value of the editor.

I've tried on editorProps, editorProvider and tried to create a custom pm extension i still not able to get the current instance of the editor, the closest that i found was using the onTransaction method however I cannot tell if the user pressed Enter or not, I honestly don't know if this is a real problem or i'm just being a noob.

Here's some code:

const [taskTitle, setTaskTitle] = useState<string>("");

const editor = useEditor({
        onUpdate: ({ editor, transaction }) => {
            setTaskTitle(editor.getText());
        },
        onBlur: ({ editor }) => {
            editor.commands.clearContent();
        },
        extensions: [
            OneLiner,
            Text,
            Paragraph,
            ColorHighlighter,
            Placeholder.configure({
                placeholder: "Placeholder...",
                emptyEditorClass:
                    "cursor-text before:content-[attr(data-placeholder)] before:absolute before:top-2 before:left-2 before:text-mauve-11 before-pointer-events-none text-skin-secondary",
            }),
            Link.configure({
                HTMLAttributes: {
                    class: "text-skin-secondary underline hover:text-skin-base cursor-pointer",
                },
            }),
        ],
        editorProps: {
            attributes: {
                class: "no-outline input m-0 w-full rounded-md bg-skin-background p-2",
            },
            handleKeyDown: (view, event) => {
                console.log(taskTitle); // does not get the right value
            },
        },
    });

[rnystrom]

I know this is rather old but figured I'd answer for anyone else that runs into this.

taskTitle in the handleKeyDown function is captured the first time the editor is initialized. You're not using the deps array of useEditor, and you probably don't want to as that would re-instantiate the editor with every keystroke. I would track the value of the title in a ref (in addition to the state) and use the taskTitleRef.current value in the keydown callback.