Getting access to the editor from outside the React component?

[neongreen]

I have a React component wrapping the editor, and I want it to have methods that interact with the editor, e.g. clearContent in this example:

let Tiptap = forwardRef((props: { content: string }, ref) => {
  const editor = useEditor({
    extensions = ...,
    content: props.content,
  })
  const editorRef = useRef(editor)
  useImperativeHandle(ref, () => ({
    clearContent: () => {
      editorRef.current?.commands.clearContent()
    }
  }))
  return (
    <EditorContent editor={editor} />
  )
})
Tiptap.displayName = 'Tiptap'

export { Tiptap }

However, editorRef is always empty inside the clearContent method.

What am I doing wrong?

[neongreen]

Apparently useEditor returns null at first and later it doesn't.

This is how I fixed it:

export type TiptapMethods = {
  clearContent: () => void
}

let Tiptap = forwardRef((props: { content: string }, ref: React.ForwardedRef<TiptapMethods>) => {
  const editor = useEditor({
    extensions,
    content: props.content,
  })
  const editorRef: React.MutableRefObject<Editor | null> = useRef(null)
  useImperativeHandle(ref, () => ({
    clearContent: () => {
      console.log('clearContent')
      console.log(editorRef)
      editorRef.current?.commands.clearContent()
    }
  }))
  if (!editor) return null
  editorRef.current = editor
  return (
    <EditorContent editor={editor} />
  )
})
Tiptap.displayName = 'Tiptap'

export { Tiptap }

[philippkuehn]

Yes it’s because the editor is only available after mounting.