Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Mantine styles #553

Merged
merged 7 commits into from
Feb 1, 2024
Merged

fix: Mantine styles #553

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8ffc225
Updated Mantine and package-lock
matthewlipski Jan 31, 2024
5b0cbb0
Added Mantine global styles reset
matthewlipski Jan 31, 2024
c09edec
Made Mantine global styles not get imported
matthewlipski Jan 31, 2024
28919f6
Fixed CSS import order
matthewlipski Jan 31, 2024
6694b94
Updated test & snapshots
matthewlipski Jan 31, 2024
d670886
Implemented PR feedback
matthewlipski Feb 1, 2024
fa3bbe4
Implemented PR feedback
matthewlipski Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
"@blocknote/core": "^0.11.1",
"@floating-ui/react": "^0.26.4",
"@mantine/core": "^7.5.0",
"@mantine/hooks": "7.5.0",
"@mantine/hooks": "^7.5.0",
"@mantine/utils": "^6.0.21",
"@tiptap/core": "^2.0.3",
"@tiptap/react": "^2.0.3",
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/editor/BlockNoteView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,8 @@ export function BlockNoteView<
}, [systemColorScheme, editor.domElement, theme]);

return (
// `cssVariablesSelector` scopes Mantine CSS variables to only the editor,
// as proposed here: https://github.com/orgs/mantinedev/discussions/5685
<MantineProvider theme={mantineTheme} cssVariablesSelector=".bn-container">
matthewlipski marked this conversation as resolved.
Show resolved Hide resolved
<EditorContent
editor={editor._tiptapEditor}
Expand Down
7 changes: 7 additions & 0 deletions packages/react/src/editor/mantineStyles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/* Based on https://github.com/orgs/mantinedev/discussions/5685 */

/* We need all the Mantine styles except the global styles, so unfortunately our
matthewlipski marked this conversation as resolved.
Show resolved Hide resolved
only option is to import all the component styles separately. Could consider
importing only styles for components used in BlockNote in the future. */
@import url("@mantine/core/styles/ScrollArea.css");
matthewlipski marked this conversation as resolved.
Show resolved Hide resolved
@import url("@mantine/core/styles/UnstyledButton.css");
@import url("@mantine/core/styles/VisuallyHidden.css");
Expand Down Expand Up @@ -79,6 +84,8 @@
@import url("@mantine/core/styles/TypographyStylesProvider.css");

/* Mantine global styles, scoped to bn-container */
/* Based on @mantine/core/styles/global.css but with styles set on `body` and
matthewlipski marked this conversation as resolved.
Show resolved Hide resolved
`html` instead set on `bn-container`, as well as other minor changes. */
.bn-container *, .bn-container :after, .bn-container :before {
box-sizing: border-box
}
Expand Down
Loading