Option to make editor available during initial render of hook.

[ryanto]

This PR is a fix for #2282 that allows the user to opt into having the editor available during the first render. We're making it opt in because the Editor doesn't render on the server (it expects document to exist), so enabling this by default would crash server rendered apps.

[netlify]

✔️ Deploy Preview for tiptap-embed ready!

🔨 Explore the source changes: 0f76732

🔍 Inspect the deploy log: https://app.netlify.com/sites/tiptap-embed/deploys/61bbaa8166df7e000742e480

😎 Browse the preview: https://deploy-preview-2287--tiptap-embed.netlify.app

[vpontis]

This looks good to me! Nice @ryanto

[hanspagel]

Can’t we detect the Node environment, e.g. by checking for the presence of document?

[ryanto]

Can’t we detect the Node environment, e.g. by checking for the presence of document?

Issue is that the server render needs to match the first client side render. If the server render doesn't have document and renders no editor, but the client does have a document and does render an editor we'll end up with a mismatch and React will error.

I think the long term solution here is to make it so the HTML generated by the editor is renderable on the server... specifically you can take an editor's content and generate its HTML server side without setting up the content editable, events, or referencing browser APIs, but that seems like a bigger task.

This PR is just a stop gap to allow for an initial render on the client that has the editor.

I could also make a new hook like useClientSideEditor() that does this, and keep useEditor() unchanged. I do think it would be nice to provide some way for client side apps to have access to the editor on first render though, but I'm more than happy to follow your direction on how we do that!

[ryanto]

By the way, just wanted to add that I realize all of this is super confusing and throwing in options like availableOnFirstRender certainly doesn't simplify anything.

I have this hook locally in my app that I'm using as a stop gap to get client side initial renders of tiptap. When people run into issues like #2040 or #2182 we can direct them to that gist as a fix instead of adding options to useEditor.

[ryanto]

Also this is a great read on rehydration, client-server mismatch, and how useEffect helps control what's rendered on the server and initial client renders. https://www.joshwcomeau.com/react/the-perils-of-rehydration/

[philippkuehn]

Okay, sometimes you should just sleep on it. I think that an availableOnFirstRender option only complicates things. We should revert the last changes. A link to this gist should be enough for now. Thanks a lot for the input anyway 🙏