Fix jumpy action buttons in the editor panel #40
Conversation
Andarist
force-pushed
the
fix/jumpy-action-buttons
branch
from
1f89a83
to
a59c7e0
Compare
| <ClassNames> | ||
| {({ css }) => ( | ||
| <Editor | ||
| wrapperClassName={css` |
There was a problem hiding this comment.
shouldn't wrapperClassName be an actual class name?
There was a problem hiding this comment.
And it is. That's why I've introduced <ClassNames/> here - this is a special component that provides a css that actually injects a class name eagerly to the CSSOM and returns it:
https://github.com/emotion-js/emotion/blob/dcc72d06ace804330fd285a76c8574f3a89001f9/packages/react/src/class-names.js#L113
This is not the same css as the one that can be imported from @emotion/react. Since we are using Chakra right now I've chosen this solution to stick as much as possible to a single styling solution, instead of mixing both Chakra/Emotion and plain CSS/SCSS
There was a problem hiding this comment.
I suppose it'd be easier for theming if we go with this solution. in that case, all we need to tweak is the main Chakra theme + some manual work in the canvas
There was a problem hiding this comment.
But I admit the API here is confusing.
There was a problem hiding this comment.
I agree that the API is confusing and is one of the main complaints that we receive for Emotion. It is designed like that for a reason though: render prop can actually render something and, by default, during SSR we render <style/> elements inline. This makes SSR of Emotion working out of the box, no special setup etc is required to make it work. We know that not everyone is SSRing but exposing a hook-based API that would not solve all the problems has always seemed less than ideal for us.
Usually, this is not that big of a problem in codebases because it's not as common to need access to the actual class name, it's mainly when integrating with external libraries that accept class names in different props than the actual className prop (which is the case here, we need to pass this to the wrapperClassName prop). And those external components can usually just be isolated in the codebase so we don't have to use <ClassNames/> component too much.
There is a chance that React 18 will bring some new kind of an API, specific to CSS injection so maybe we'll be able to get rid of this in Emotion in the future. Time will tell though.
There is also a chance that we'll be able to remove this in our codebase if this gets merged in: suren-atoyan/monaco-react#269
When booting the Monaco editor space was not reserved for it so actions buttons were jumping to the bottom~ when it has finally rendered itself. This PR prevents this effect and buttons render immediately in their final positions.
Pre
Post
