TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.
https://www.blocknotejs.org/
Mozilla Public License 2.0
5.89k stars 381 forks source link

import "@blocknote/mantine/style.css" would pollute a mantine based project's styles #888

Closed fyepi closed 7 hours ago

fyepi commented 2 days ago

The mantine style sheet has some custom styles for button and tabs etc.

In my case, it would pollute the page, which unfortunately is based on Mantine, that hosts the editor.

I would suggest to add a parent class name to all selectors in style sheet to make sure the style only applies to block note editor.

github markdown css has this common parent in all styles.

https://github.com/sindresorhus/github-markdown-css

For example

.markdown-body a:hover {
  text-decoration: underline;
}

.markdown-body ::placeholder {
  color: var(--fgColor-muted);
  opacity: 1;
}

.markdown-body hr::before {
  display: table;
  content: "";
}

Thanks.