search

BuhayovA / react-notion-wysiwyg

Notion-style WYSIWYG editor
https://www.npmjs.com/package/react-notion-wysiwyg
MIT License
2 stars 0 forks source link

Editor overriding root CSS styles of webpage #4

Open urielbitton opened 1 month ago

urielbitton commented 1 month ago

Describe the bug The notion editor is overriding my CSS styles. When I visit a page on my website which has the Editor component, all my custom CSS styles are overriden.

To Reproduce Steps to reproduce the behavior:

  1. Import Editor component in either read or write mode
  2. On that same page (and also by going to other pages afterwards) the styles for elements like H1s H2s and other HTML elements like buttons, etc.
  3. All those elements will have their styles overridden. Its a lot of !important to add, too many to be viable.

Expected behavior The Editor component should not override any styles. The styling should be scoped to a more specific CSS id/class.

Possible Solution

Scope the styles to a container id/class like "#notion-editor"

Screenshots Description is self-explanatory.

Additional context none

Your Environment

urielbitton commented 4 weeks ago

@BuhayovA any ETA on this?

Appreciate it !

BuhayovA commented 3 weeks ago

@BuhayovA any ETA on this?

Appreciate it !

Hi! Thank you very much for reaching out. I haven't had the time to actively work on this library over the past couple of months, but I hope to get back to it soon. I'll try to look into your issue as soon as possible. I sincerely appreciate it.

BuhayovA commented 3 weeks ago

Describe the bug The notion editor is overriding my CSS styles. When I visit a page on my website which has the Editor component, all my custom CSS styles are overriden.

To Reproduce Steps to reproduce the behavior:

  1. Import Editor component in either read or write mode
  2. On that same page (and also by going to other pages afterwards) the styles for elements like H1s H2s and other HTML elements like buttons, etc.
  3. All those elements will have their styles overridden. Its a lot of !important to add, too many to be viable.

Expected behavior The Editor component should not override any styles. The styling should be scoped to a more specific CSS id/class.

Possible Solution

Scope the styles to a container id/class like "#notion-editor"

Screenshots Description is self-explanatory.

Additional context none

Your Environment

  • Next.js: 14.2.5
  • React: 18
  • react-notion-wysiwyg 0.1.13
  • Browser: chrome
  • Version: latest
  • Operating System: MacOS Sequoia:
  • Other relevant information:

Do you use TailwindCSS in your project?