[Bug] The style coverage is too broad

hunghg255 / reactjs-tiptap-editor

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for Reactjs

https://reactjs-tiptap-editor.vercel.app/

MIT License

45 stars 11 forks source link

[Bug] The style coverage is too broad #28

Closed condorheroblog closed 3 weeks ago

condorheroblog commented 3 weeks ago

@import "reactjs-tiptap-editor/style.css";

When I introduced the editor's style, my application had a little style confusion.

I checked the content of reactjs-tiptap-editor/style.css and found that it was affected by the preset style of tailwind.css. Here I want to extract a problem. The style of tailwind.css has too large an impact.

Maybe we should use CSS in JS solutions or manually manage class names, such as https://github.com/xyflow/xyflow/blob/9b768b2dae9f046c4c10772b267ad3116c3333a5/packages/react/package.json#L45

hunghg255 commented 3 weeks ago

@condorheroblog oke, I got it, I will refactor and add a prefix to the class.

condorheroblog commented 3 weeks ago

Which one do you like, CSS in JS or BEM😁

hunghg255 commented 3 weeks ago

Which one do you like, CSS in JS or BEM😁

ah. Im still use tailwindcss. but I add prefix class

hunghg255 commented 3 weeks ago

I updated and added the prefix class,

condorheroblog commented 3 weeks ago

Sorry, my problem is still not solved.

The reason is that tailwind.css will package a preset style - https://tailwindcss.com/docs/preflight#disabling-preflight, and the CSS in it is global.

I think reactjs-tiptap-editor, as a plugin, has no reason to change the user's global CSS style.

Also, the style names of tailwind.css are very simple, which is very likely to conflict with the user's type. It would be fine if all styles can have a prefix classname.

hunghg255 commented 3 weeks ago

@condorheroblog oke, let me try, yesterday I tried disabling preflight, and UI is like the 90s =)) I think because I do not add a prefix to the class yet

hunghg255 commented 3 weeks ago

@condorheroblog you can try install a new version, I hope it works as well

hunghg255 commented 3 weeks ago

Screenshot 2024-08-21 at 10 21 59

oh. =))) look this xD

condorheroblog commented 3 weeks ago

It looks weird, maybe we need to use https://www.radix-ui.com/themes/docs/components/button to replace the native button

hunghg255 commented 3 weeks ago

shadcn is using the native button. btw can you screenshot editor on your project, I want to see it look how maybe I will add a props resets CSS to load the reset CSS file or not, because the editor needs to reset CSS to it display with style from editor instead of use the global CSS of app

condorheroblog commented 3 weeks ago

It looks like that.