search

e-chan1007 / nuxt-monaco-editor

Integrate monaco-editor with Nuxt
https://e-chan1007.github.io/nuxt-monaco-editor
MIT License
119 stars 15 forks source link

Blank load #17

Closed TheProcedural closed 1 year ago

TheProcedural commented 1 year ago

The editor is completely blank, and there are no errors anywhere.

image

TheProcedural commented 1 year ago

The problem seems to be CSS, by manually editing the CSS I managed to make it visible. The question is why is the CSS messed up in the first place?

TheProcedural commented 1 year ago

Some of my custom CSS was creating the issue. I will close the issue now.

TheProcedural commented 1 year ago

Sorry to bother you reopening the issue again, the CSS thing was just a coincidence. After further testing I've realised that; If I place MonacoEditor in a page it always works, no problem, but if a place it within another component it always fails. I can kinda force it to work by forcing re-render of the component using hot-reloading, basically just moving MonacoEditor from an html element to another and hitting save.

By default not working when inside another component: image

Works after triggering Hot reloading: image

e-chan1007 commented 1 year ago

Did you set the width and height for <MonacoEditor> itself?

With monaco-editor, you have to set them for the container element (and then its size will be calculated correctly). If you remove style="height: 100%" on the playground, it looks almost the same as you say.

If this has nothing to do with your problem, could you please show me a minimal reproduction?

TheProcedural commented 1 year ago

Yes, I have, and I've actually tried setting it in many different ways. Also, that wouldn't explain why it only fails in this very specific scenario I explained above, basically being too nested.

TheProcedural commented 1 year ago

For now I'm using this absurd workaround:

image

image

e-chan1007 commented 1 year ago

This situation looks very strange to me... Nothing seems to be wrong as far as I can see. I thought that the editor was loaded when the parent element was too small (or hidden) and I tried to reproduce it. However, I couldn't find such a problem. Since you set the height independently of the parent(I think h-24 sets its size to 6rem (96px) when using Tailwind CSS), it should work regardless of the size of the parent. I'd like to know more details to investigate this issue.

Also, does :options="{ automaticLayout: true }" solve this problem?

TheProcedural commented 1 year ago

Yes, "automaticLayout: true" did indeed solve the problem. What you say make sense and I also confirmed it, the parent element was not yet loaded, that also explains why my absurd workaround worked.

Thanks for your help!