[Bug]: useEditor initially returns null as of 2.2.2, breaking first-render usage

[jtmclucas13]

Which packages did you experience the bug in?

react

What Tiptap version are you using?

2.2.4

What’s the bug you are facing?

Immediately following the first render of a component using useEditor, I attempt to call editor.commands.focus() to give the user an autofocus UX. This worked in 2.1.12, but we recently upgraded to 2.2.4 where this autofocus behavior does not occur.

I've traced the culprit to version 2.2.2 of @tiptap/react , and useEditor returning null for that first render. Is there a workaround for consumers who expect the prior behavior of an always-available editor?

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

useEditor always returns an Editor instance.

Anything to add? (optional)

It appears as though this solution might fix the problem: #4579.

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. 💖

[C-Hess]

Would be fixed by #4579

[hjoelh]

thanks for raising, thought i was going mad

for anyone else seeing this, here is my workaround #4579 (comment)

[Aryan3212]

I think I've got a workaround for this. I needed to trigger a focus on a 2nd editor from my 1st editor. Successfully achieved this using refs.

We need to pass this ref into the innerRef prop of the EditorContent, then we can use that ref to check whether the editor exists and also do normal DOM manipulations with it.

export default function Editor({ onUpdate }: { onUpdate: Function }) {
  const customRef = useRef(null)
  const editor = useEditor({
    onUpdate: (e) => {
      onUpdate('body', e.editor.getJSON())
    },
    content: selectedNote?.body as Content
  })
  const titleEditor = useEditor({
    editorProps: {
      attributes: {
        class: 'h-[90%] prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none max-w-none',
      },
      handleKeyDown: (_, e) => {
        if (e.key === 'Enter') {
          console.log('focused', customRef.current.firstChild.focus())
          return true; // this is used to ignore the Enter keydown event, got it from ProseMirror docs
        }
      }
    },
    parseOptions: {
      preserveWhitespace: true,
    },
    autofocus: true,
  })
  return (<>
    <EditorContent editor={titleEditor}></EditorContent>
    <EditorContent className='h-full' editor={editor} innerRef={customRef}></EditorContent>
  </>
  )
}

[nperez0111]

Resolved with: #5161