uiwjs / react-textarea-code-editor

A simple code editor with syntax highlighting.
https://uiwjs.github.io/react-textarea-code-editor/
MIT License
476 stars 22 forks source link

Is `font-family: inherit;` in `.w-tc-editor` required? #147

Open ronny1020 opened 1 year ago

ronny1020 commented 1 year ago

Thank you for your hard work.

I am using this library with Tailwind. However, after adding the font-mono class, it is not working in the library. The reason for this is that the class .w-tc-editor is set to font-family: inherit;, which overrides the font-mono setting. This could happen to any custom class.

Although I can use inline styles or !important to fix this issue, I believe that using a class to provide the style is better practice. Furthermore, even without any font settings, the element would still inherit the style.

jaywcjlove commented 1 year ago

The component uses overlapping textarea and pre elements to implement code highlighting. If the fonts are inconsistent, it may cause shadowing issues.

@ronny1020

ronny1020 commented 1 year ago

Thanks for your reply. I understand that the code is currently using overlapping. However, I think it should work adequately only to add the font-family: inherit to the textarea and the pre-element since they share the same parent.