useEditor returning null

[Neesh774]

What’s the bug you are facing?

I'm trying to use useEditor, but it returns null at first, and then returns an Editor object. I create it and log the variable I set it to immediately, and it prints out null first, and then it prints out the Editor object. I am using create-react-app in React.

How can we reproduce the bug on our side?

1. Create a create-react-app project in React
2. Put the following code in App.js before the return statement:

const editorUse = useEditor({
    extensions: [StarterKit],
    content: JSON.parse(localStorage.getItem("text")) ?? "",
  });
  console.log(editorUse);

3. Run the project and check the console.

If the issue persists, it will print null first, and then the Editor object afterwards.

Can you provide a CodeSandbox?

Here you go

What did you expect to happen?

There shouldn't be a null, the Editor object should be the only thing being printed

Anything to add? (optional)

This issue makes it difficult when I want to use the editor object in other parts of my UI, like using its getText() method.

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

[philippkuehn]

This is intended because the editor instance is created after mounting your component (which is needed because tiptap needs access to the DOM).

tiptap/packages/react/src/useEditor.ts

Lines 15 to 31 in bc242fe

	useEffect(() => {
	const instance = new Editor(options)
	setEditor(instance)
	instance.on('transaction', () => {
	requestAnimationFrame(() => {
	requestAnimationFrame(() => {
	forceUpdate()
	})
	})
	})
	return () => {
	instance.destroy()
	}
	}, deps)

If you need the editor instance in your template you have to check if editor is not null. After mounting, your component should be re-rendered so this shouldn’t be an issue at all.

[ryanto]

I have a PR that makes sure the editor is available on the first render: #2282