search

rennzhang / codemirror-editor-vue3

CodeMirror component for Vue3
https://rennzhang.github.io/codemirror-editor-vue3
MIT License
202 stars 41 forks source link

JS style injection doesn't work well with web components or customisation #17

Closed Buroni closed 2 years ago

Buroni commented 2 years ago

Describe the bug

Hi, firstly thanks for the useful library!

The lib seems to use a function styleInject which injects some CSS into the document head using JS. This has presented a problem for me in two ways:

I'd suggest allowing the user to add the Codemirror CSS themselves, rather than baking the CSS into the JS library, as this would improve flexibility of the library. Although even just removing the !important flags would be helpful.

Validations

rennzhang commented 2 years ago

Sorry, there is really a lack of considerations here. There are some styles of modifications in the single market. It is really necessary. This library already has a certain amount of download. It is not appropriate to delete the style of the automatic injection head.

Maybe I can provide a method or attribute to turn it off?In this way, you can still manually import style.

Buroni commented 2 years ago

Thanks for your reply @RennCheung. Yes, providing an option to turn off the automatic style injection would be great.

rennzhang commented 2 years ago

I am currently considering using the 'original-style' property to remove all style changes to 'CodeMirror' itself, but not to remove some style changes to the library, such as width, height, border, etc., example:

image

This is a code that is relatively small in existing code(The principle is controlled by CSS :not selector), and can control each component separately.

And I remove all !Important, if you have better suggestions to provide me, I will post a test version.

rennzhang commented 2 years ago

https://www.npmjs.com/package/codemirror-editor-vue3/v/2.1.0-beta

Buroni commented 2 years ago

Thanks @RennCheung that seems like a good solution