Skip to content

Commit c70ee4d

Browse files
matthewlipskimatthewlipski
authored
fix: Mantine styles (#553)
* Updated Mantine and package-lock * Added Mantine global styles reset * Made Mantine global styles not get imported * Fixed CSS import order * Updated test & snapshots * Implemented PR feedback * Implemented PR feedback
1 parent b6c5ce2 commit c70ee4d

File tree

12 files changed

+1514
-1041
lines changed

12 files changed

+1514
-1041
lines changed

‎examples/editor/src/main.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import {
88
createBrowserRouter,
99
} from "react-router-dom";
1010

11+
import "./style.css";
1112
import { App } from "../examples/basic/App";
1213
import { ReactCustomBlocks } from "../examples/react-custom-blocks/App";
1314
import { ReactInlineContent } from "../examples/react-custom-inline-content/App";
1415
import { ReactStyles } from "../examples/react-custom-styles/App";
1516
import { CustomBlocks } from "../examples/vanilla-custom-blocks/App";
1617
import { InlineContent } from "../examples/vanilla-custom-inline-content/App";
17-
import "./style.css";
1818

1919
window.React = React;
2020

‎examples/editor/src/style.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
body {
2-
height: auto;
3-
}
1+
@import url("@mantine/core/styles.css");
42

53
.editor {
64
margin: 8px calc((100% - 731px) / 2) 0;

‎package-lock.json

Lines changed: 1349 additions & 1031 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
"remark-stringify": "^10.0.2",
8787
"unified": "^10.1.2",
8888
"uuid": "^8.3.2",
89-
"y-prosemirror": "1.0.20",
89+
"y-prosemirror": "1.2.1",
9090
"y-protocols": "^1.0.5",
9191
"yjs": "^13.6.1"
9292
},

‎packages/react/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@
5252
"dependencies": {
5353
"@blocknote/core": "^0.11.1",
5454
"@floating-ui/react": "^0.26.4",
55-
"@mantine/core": "^7.4.2",
56-
"@mantine/hooks": "7.4.2",
55+
"@mantine/core": "^7.5.0",
56+
"@mantine/hooks": "^7.5.0",
5757
"@mantine/utils": "^6.0.21",
5858
"@tiptap/core": "^2.0.3",
5959
"@tiptap/react": "^2.0.3",

‎packages/react/src/editor/BlockNoteView.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,9 @@ export function BlockNoteView<
8888
}, [systemColorScheme, editor.domElement, theme]);
8989

9090
return (
91-
<MantineProvider theme={mantineTheme}>
91+
// `cssVariablesSelector` scopes Mantine CSS variables to only the editor,
92+
// as proposed here: https://github.com/orgs/mantinedev/discussions/5685
93+
<MantineProvider theme={mantineTheme} cssVariablesSelector=".bn-container">
9294
<EditorContent
9395
editor={editor._tiptapEditor}
9496
className={mergeCSSClasses("bn-container", className || "")}

‎packages/react/src/editor/mantineStyles.css

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/* Based on https://github.com/orgs/mantinedev/discussions/5685 */
2+
3+
/* We need all the Mantine styles except the global styles, so unfortunately our
4+
only option is to import all the component styles separately. Could consider
5+
importing only styles for components used in BlockNote in the future. */
6+
/* Files list: https://mantine.dev/styles/css-files-list/ */
7+
@import url("@mantine/core/styles/ScrollArea.css");
8+
@import url("@mantine/core/styles/UnstyledButton.css");
9+
@import url("@mantine/core/styles/VisuallyHidden.css");
10+
@import url("@mantine/core/styles/Paper.css");
11+
@import url("@mantine/core/styles/Popover.css");
12+
@import url("@mantine/core/styles/CloseButton.css");
13+
@import url("@mantine/core/styles/Group.css");
14+
@import url("@mantine/core/styles/Loader.css");
15+
@import url("@mantine/core/styles/Overlay.css");
16+
@import url("@mantine/core/styles/ModalBase.css");
17+
@import url("@mantine/core/styles/Input.css");
18+
@import url("@mantine/core/styles/Flex.css");
19+
20+
@import url("@mantine/core/styles/Accordion.css");
21+
@import url("@mantine/core/styles/ActionIcon.css");
22+
@import url("@mantine/core/styles/Affix.css");
23+
@import url("@mantine/core/styles/Alert.css");
24+
@import url("@mantine/core/styles/Anchor.css");
25+
@import url("@mantine/core/styles/AspectRatio.css");
26+
@import url("@mantine/core/styles/AppShell.css");
27+
@import url("@mantine/core/styles/Avatar.css");
28+
@import url("@mantine/core/styles/Badge.css");
29+
@import url("@mantine/core/styles/BackgroundImage.css");
30+
@import url("@mantine/core/styles/Blockquote.css");
31+
@import url("@mantine/core/styles/Breadcrumbs.css");
32+
@import url("@mantine/core/styles/Button.css");
33+
@import url("@mantine/core/styles/Burger.css");
34+
@import url("@mantine/core/styles/Card.css");
35+
@import url("@mantine/core/styles/Center.css");
36+
@import url("@mantine/core/styles/Checkbox.css");
37+
@import url("@mantine/core/styles/Chip.css");
38+
@import url("@mantine/core/styles/Code.css");
39+
@import url("@mantine/core/styles/ColorInput.css");
40+
@import url("@mantine/core/styles/ColorPicker.css");
41+
@import url("@mantine/core/styles/ColorSwatch.css");
42+
@import url("@mantine/core/styles/Combobox.css");
43+
@import url("@mantine/core/styles/Container.css");
44+
@import url("@mantine/core/styles/Dialog.css");
45+
@import url("@mantine/core/styles/Divider.css");
46+
@import url("@mantine/core/styles/Drawer.css");
47+
@import url("@mantine/core/styles/Fieldset.css");
48+
@import url("@mantine/core/styles/Grid.css");
49+
@import url("@mantine/core/styles/Image.css");
50+
@import url("@mantine/core/styles/Indicator.css");
51+
@import url("@mantine/core/styles/InlineInput.css");
52+
@import url("@mantine/core/styles/Kbd.css");
53+
@import url("@mantine/core/styles/List.css");
54+
@import url("@mantine/core/styles/LoadingOverlay.css");
55+
@import url("@mantine/core/styles/Mark.css");
56+
@import url("@mantine/core/styles/Menu.css");
57+
@import url("@mantine/core/styles/Modal.css");
58+
@import url("@mantine/core/styles/NavLink.css");
59+
@import url("@mantine/core/styles/Notification.css");
60+
@import url("@mantine/core/styles/NumberInput.css");
61+
@import url("@mantine/core/styles/Pagination.css");
62+
@import url("@mantine/core/styles/Pill.css");
63+
@import url("@mantine/core/styles/PasswordInput.css");
64+
@import url("@mantine/core/styles/PillsInput.css");
65+
@import url("@mantine/core/styles/PinInput.css");
66+
@import url("@mantine/core/styles/Progress.css");
67+
@import url("@mantine/core/styles/Radio.css");
68+
@import url("@mantine/core/styles/Rating.css");
69+
@import url("@mantine/core/styles/RingProgress.css");
70+
@import url("@mantine/core/styles/SegmentedControl.css");
71+
@import url("@mantine/core/styles/SimpleGrid.css");
72+
@import url("@mantine/core/styles/Skeleton.css");
73+
@import url("@mantine/core/styles/Slider.css");
74+
@import url("@mantine/core/styles/Spoiler.css");
75+
@import url("@mantine/core/styles/Stack.css");
76+
@import url("@mantine/core/styles/Stepper.css");
77+
@import url("@mantine/core/styles/Switch.css");
78+
@import url("@mantine/core/styles/Table.css");
79+
@import url("@mantine/core/styles/Tabs.css");
80+
@import url("@mantine/core/styles/Text.css");
81+
@import url("@mantine/core/styles/ThemeIcon.css");
82+
@import url("@mantine/core/styles/Timeline.css");
83+
@import url("@mantine/core/styles/Title.css");
84+
@import url("@mantine/core/styles/Tooltip.css");
85+
@import url("@mantine/core/styles/TypographyStylesProvider.css");
86+
87+
/* Mantine global styles, scoped to bn-container */
88+
/* Based on @mantine/core/styles/global.css
89+
(src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css)
90+
but with styles set on `body` and `html` instead set on `bn-container`, as
91+
well as other minor changes. */
92+
.bn-container *, .bn-container :after, .bn-container :before {
93+
box-sizing: border-box
94+
}
95+
96+
.bn-container button,
97+
.bn-container select {
98+
text-transform: none
99+
}
100+
101+
@media screen and (max-device-width: 500px) {
102+
.bn-container {
103+
-webkit-text-size-adjust: 100%
104+
}
105+
}
106+
107+
@media (prefers-reduced-motion: reduce) {
108+
.bn-container [data-respect-reduced-motion] [data-reduce-motion] {
109+
animation: none;
110+
transition: none
111+
}
112+
}
113+
114+
.bn-container [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-container [data-mantine-color-scheme=light] .mantine-light-hidden {
115+
display: none
116+
}
117+
118+
.bn-container .mantine-focus-auto:focus-visible {
119+
outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
120+
outline-offset: calc(.125rem * var(--mantine-scale))
121+
}
122+
123+
.bn-container .mantine-focus-always:focus {
124+
outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
125+
outline-offset: calc(.125rem * var(--mantine-scale))
126+
}
127+
128+
.bn-container .mantine-focus-never:focus {
129+
outline: none
130+
}
131+
132+
.bn-container .mantine-active:active {
133+
transform: translateY(calc(.0625rem * var(--mantine-scale)))
134+
}
135+
136+
.bn-container[dir=rtl] .mantine-rotate-rtl {
137+
transform: rotate(180deg)
138+
}

‎packages/react/src/editor/styles.css

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url("@mantine/core/styles.css");
1+
@import url("./mantineStyles.css");
22
@import url("@blocknote/core/style.css");
33

44
/* Default theme params */
@@ -242,54 +242,71 @@
242242
[data-text-color="gray"] {
243243
color: var(--bn-colors-highlights-gray-text);
244244
}
245+
245246
[data-text-color="brown"] {
246247
color: var(--bn-colors-highlights-brown-text);
247248
}
249+
248250
[data-text-color="red"] {
249251
color: var(--bn-colors-highlights-red-text);
250252
}
253+
251254
[data-text-color="orange"] {
252255
color: var(--bn-colors-highlights-orange-text);
253256
}
257+
254258
[data-text-color="yellow"] {
255259
color: var(--bn-colors-highlights-yellow-text);
256260
}
261+
257262
[data-text-color="green"] {
258263
color: var(--bn-colors-highlights-green-text);
259264
}
265+
260266
[data-text-color="blue"] {
261267
color: var(--bn-colors-highlights-blue-text);
262268
}
269+
263270
[data-text-color="purple"] {
264271
color: var(--bn-colors-highlights-purple-text);
265272
}
273+
266274
[data-text-color="pink"] {
267275
color: var(--bn-colors-highlights-pink-text);
268276
}
277+
269278
[data-background-color="gray"] {
270279
background-color: var(--bn-colors-highlights-gray-background);
271280
}
281+
272282
[data-background-color="brown"] {
273283
background-color: var(--bn-colors-highlights-brown-background);
274284
}
285+
275286
[data-background-color="red"] {
276287
background-color: var(--bn-colors-highlights-red-background);
277288
}
289+
278290
[data-background-color="orange"] {
279291
background-color: var(--bn-colors-highlights-orange-background);
280292
}
293+
281294
[data-background-color="yellow"] {
282295
background-color: var(--bn-colors-highlights-yellow-background);
283296
}
297+
284298
[data-background-color="green"] {
285299
background-color: var(--bn-colors-highlights-green-background);
286300
}
301+
287302
[data-background-color="blue"] {
288303
background-color: var(--bn-colors-highlights-blue-background);
289304
}
305+
290306
[data-background-color="purple"] {
291307
background-color: var(--bn-colors-highlights-purple-background);
292308
}
309+
293310
[data-background-color="pink"] {
294311
background-color: var(--bn-colors-highlights-pink-background);
295312
}

‎tests/src/end-to-end/slashmenu/slashmenu.test.ts-snapshots/slash-menu-end-product-webkit-linux.png

6 Bytes
Loading

‎tests/src/end-to-end/theming/theming.test.ts-snapshots/dark-drag-handle-menu-webkit-linux.png

191 Bytes
Loading

0 commit comments

Comments
 (0)