Editor is being rendered with setTimeout (async)

[ondrejsevcik]

What’s the bug you are facing?

The Editor is being rendered asynchronously. Here on this line, the initialization is set after timeout (which makes it asynchronous).

tiptap/packages/core/src/Editor.ts

Line 98 in 4851fc5

window.setTimeout(() => {

This makes it hard to use TipTap with other libraries that work with clientHeight (e.g. react-window).

Which browser was this experienced in? Are any special extensions installed?

All browsers.

How can we reproduce the bug on our side?

Yes, please see attached codesandbox.

Can you provide a CodeSandbox?

Here's a codesandbox demo demonstrating the problem - there is height calculated immediately after rendering and one after 1ms timeout.

https://codesandbox.io/s/cranky-feather-9tf083?file=/src/App.js

What did you expect to happen?

I would expect that TipTap is initialized and rendered synchronously.

Anything to add? (optional)

No response

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

[josephp27]

having this issue too. has there been a fix for this?

[bdbch]

Not yet.

Feel free to find a solution for this - I'll try to find some time to take a quick look into it next week but I don't think there will be a quick fix since I suspect Prosemirror rendering the content after processing the input and updating the state + view which will always delay the first render.

I'm not 100% sure how react-window works exactly, but can you look for resize changes via the ResizeObserver and let react-window know when the editor size changes?

What exactly changes with react-window when you enter a new line into your editor by the way? Wouldn't this cause errors since the height of the dom element would change after react-window calculates the virtualization heights?

[ondrejsevcik]

react-window knows how to handle resizing of items. This is not a problem on it's own.

It's a problem in certain scenarios. We have a scenario where we need to render comments in a list (using react-window) and scroll to the end of the list. But once it scrolls to the bottom, the list grows since the content is rendered asynchronously. We had to add tweak to do this after timeout to take into account that TipTap is being rendered async.

[github-actions]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[bdbch]

bump

[github-actions]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[C-Hess]

I might try a crack at this. We're coming across the same issue with virtual scrolling libraries reliant on the height of the element being defined at mount if possible.

[ondrejsevcik]

This could be reopened. It is still relevant issue.

[kibertoad]

bump