Have a problem:
I use Tldraw editor in my project, and have “full screen” mode for it. When user has the editor full-screened, he draws or removes some shapes and quits full screen mode.
Fullscreen mode implemented using ReactDOM.createPortal and styles like “position: fixed”
Tldraw editor has event listener that handles all the changes, which after that sets some states.
First of all I notice that without using react portal everything seems fine.
The problem I have:
- User enters fullscreen mode
- User removes something using eraser tool, the state in parent component updates, (console.log(editor.getCurrentPageShapes()) here works like it has to, and displays correct data, an empty data structure)
- Quits fullscreen mode (editor now renders again without portal, state is used to set data to editor)
- Doesn’t see any changes. There are still those shapes that were here before erasing
Drawing works correct in both modes, all the changes save correctly. That’s why I’m not sure the problem is in state saving. It seems like either Tldraw considers erasing as something else (handleChange is just state saving, and according to console.log it should work as expected), or react portal creates some restrictions.