fix: Mantine styles

examples/editor/src/main.tsx

@@ -8,13 +8,13 @@ import {
   createBrowserRouter,
 } from "react-router-dom";
 
+import "./style.css";
 import { App } from "../examples/basic/App";
 import { ReactCustomBlocks } from "../examples/react-custom-blocks/App";
 import { ReactInlineContent } from "../examples/react-custom-inline-content/App";
 import { ReactStyles } from "../examples/react-custom-styles/App";
 import { CustomBlocks } from "../examples/vanilla-custom-blocks/App";
 import { InlineContent } from "../examples/vanilla-custom-inline-content/App";
-import "./style.css";
 
 window.React = React;
 

examples/editor/src/style.css

@@ -1,6 +1,4 @@
-body {
-  height: auto;
-}
+@import url("@mantine/core/styles.css");
 
 .editor {
   margin: 8px calc((100% - 731px) / 2) 0;

packages/core/package.json

@@ -86,7 +86,7 @@
     "remark-stringify": "^10.0.2",
     "unified": "^10.1.2",
     "uuid": "^8.3.2",
-    "y-prosemirror": "1.0.20",
+    "y-prosemirror": "1.2.1",
     "y-protocols": "^1.0.5",
     "yjs": "^13.6.1"
   },

packages/react/package.json

@@ -52,8 +52,8 @@
   "dependencies": {
     "@blocknote/core": "^0.11.1",
     "@floating-ui/react": "^0.26.4",
-    "@mantine/core": "^7.4.2",
-    "@mantine/hooks": "7.4.2",
+    "@mantine/core": "^7.5.0",
+    "@mantine/hooks": "^7.5.0",
     "@mantine/utils": "^6.0.21",
     "@tiptap/core": "^2.0.3",
     "@tiptap/react": "^2.0.3",

packages/react/src/editor/BlockNoteView.tsx

@@ -88,7 +88,9 @@ export function BlockNoteView<
   }, [systemColorScheme, editor.domElement, theme]);
 
   return (
-    <MantineProvider theme={mantineTheme}>
+    // `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">
       <EditorContent
         editor={editor._tiptapEditor}
         className={mergeCSSClasses("bn-container", className || "")}

packages/react/src/editor/mantineStyles.css

@@ -0,0 +1,138 @@
+/* Based on https://github.com/orgs/mantinedev/discussions/5685 */
+
+/* We need all the Mantine styles except the global styles, so unfortunately our
+ only option is to import all the component styles separately. Could consider
+ importing only styles for components used in BlockNote in the future. */
+/* Files list: https://mantine.dev/styles/css-files-list/ */
+@import url("@mantine/core/styles/ScrollArea.css");
+@import url("@mantine/core/styles/UnstyledButton.css");
+@import url("@mantine/core/styles/VisuallyHidden.css");
+@import url("@mantine/core/styles/Paper.css");
+@import url("@mantine/core/styles/Popover.css");
+@import url("@mantine/core/styles/CloseButton.css");
+@import url("@mantine/core/styles/Group.css");
+@import url("@mantine/core/styles/Loader.css");
+@import url("@mantine/core/styles/Overlay.css");
+@import url("@mantine/core/styles/ModalBase.css");
+@import url("@mantine/core/styles/Input.css");
+@import url("@mantine/core/styles/Flex.css");
+
+@import url("@mantine/core/styles/Accordion.css");
+@import url("@mantine/core/styles/ActionIcon.css");
+@import url("@mantine/core/styles/Affix.css");
+@import url("@mantine/core/styles/Alert.css");
+@import url("@mantine/core/styles/Anchor.css");
+@import url("@mantine/core/styles/AspectRatio.css");
+@import url("@mantine/core/styles/AppShell.css");
+@import url("@mantine/core/styles/Avatar.css");
+@import url("@mantine/core/styles/Badge.css");
+@import url("@mantine/core/styles/BackgroundImage.css");
+@import url("@mantine/core/styles/Blockquote.css");
+@import url("@mantine/core/styles/Breadcrumbs.css");
+@import url("@mantine/core/styles/Button.css");
+@import url("@mantine/core/styles/Burger.css");
+@import url("@mantine/core/styles/Card.css");
+@import url("@mantine/core/styles/Center.css");
+@import url("@mantine/core/styles/Checkbox.css");
+@import url("@mantine/core/styles/Chip.css");
+@import url("@mantine/core/styles/Code.css");
+@import url("@mantine/core/styles/ColorInput.css");
+@import url("@mantine/core/styles/ColorPicker.css");
+@import url("@mantine/core/styles/ColorSwatch.css");
+@import url("@mantine/core/styles/Combobox.css");
+@import url("@mantine/core/styles/Container.css");
+@import url("@mantine/core/styles/Dialog.css");
+@import url("@mantine/core/styles/Divider.css");
+@import url("@mantine/core/styles/Drawer.css");
+@import url("@mantine/core/styles/Fieldset.css");
+@import url("@mantine/core/styles/Grid.css");
+@import url("@mantine/core/styles/Image.css");
+@import url("@mantine/core/styles/Indicator.css");
+@import url("@mantine/core/styles/InlineInput.css");
+@import url("@mantine/core/styles/Kbd.css");
+@import url("@mantine/core/styles/List.css");
+@import url("@mantine/core/styles/LoadingOverlay.css");
+@import url("@mantine/core/styles/Mark.css");
+@import url("@mantine/core/styles/Menu.css");
+@import url("@mantine/core/styles/Modal.css");
+@import url("@mantine/core/styles/NavLink.css");
+@import url("@mantine/core/styles/Notification.css");
+@import url("@mantine/core/styles/NumberInput.css");
+@import url("@mantine/core/styles/Pagination.css");
+@import url("@mantine/core/styles/Pill.css");
+@import url("@mantine/core/styles/PasswordInput.css");
+@import url("@mantine/core/styles/PillsInput.css");
+@import url("@mantine/core/styles/PinInput.css");
+@import url("@mantine/core/styles/Progress.css");
+@import url("@mantine/core/styles/Radio.css");
+@import url("@mantine/core/styles/Rating.css");
+@import url("@mantine/core/styles/RingProgress.css");
+@import url("@mantine/core/styles/SegmentedControl.css");
+@import url("@mantine/core/styles/SimpleGrid.css");
+@import url("@mantine/core/styles/Skeleton.css");
+@import url("@mantine/core/styles/Slider.css");
+@import url("@mantine/core/styles/Spoiler.css");
+@import url("@mantine/core/styles/Stack.css");
+@import url("@mantine/core/styles/Stepper.css");
+@import url("@mantine/core/styles/Switch.css");
+@import url("@mantine/core/styles/Table.css");
+@import url("@mantine/core/styles/Tabs.css");
+@import url("@mantine/core/styles/Text.css");
+@import url("@mantine/core/styles/ThemeIcon.css");
+@import url("@mantine/core/styles/Timeline.css");
+@import url("@mantine/core/styles/Title.css");
+@import url("@mantine/core/styles/Tooltip.css");
+@import url("@mantine/core/styles/TypographyStylesProvider.css");
+
+/* Mantine global styles, scoped to bn-container */
+/* Based on @mantine/core/styles/global.css
+ (src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css)
+ but with styles set on `body` and `html` instead set on `bn-container`, as
+ well as other minor changes. */
+.bn-container *, .bn-container :after, .bn-container :before {
+    box-sizing: border-box
+}
+
+.bn-container button,
+.bn-container select {
+    text-transform: none
+}
+
+@media screen and (max-device-width: 500px) {
+    .bn-container {
+        -webkit-text-size-adjust: 100%
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .bn-container [data-respect-reduced-motion] [data-reduce-motion] {
+        animation: none;
+        transition: none
+    }
+}
+
+.bn-container [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-container [data-mantine-color-scheme=light] .mantine-light-hidden {
+    display: none
+}
+
+.bn-container .mantine-focus-auto:focus-visible {
+    outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
+    outline-offset: calc(.125rem * var(--mantine-scale))
+}
+
+.bn-container .mantine-focus-always:focus {
+    outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
+    outline-offset: calc(.125rem * var(--mantine-scale))
+}
+
+.bn-container .mantine-focus-never:focus {
+    outline: none
+}
+
+.bn-container .mantine-active:active {
+    transform: translateY(calc(.0625rem * var(--mantine-scale)))
+}
+
+.bn-container[dir=rtl] .mantine-rotate-rtl {
+    transform: rotate(180deg)
+}

packages/react/src/editor/styles.css

@@ -1,4 +1,4 @@
-@import url("@mantine/core/styles.css");
+@import url("./mantineStyles.css");
 @import url("@blocknote/core/style.css");
 
 /* Default theme params */
@@ -242,54 +242,71 @@
 [data-text-color="gray"] {
     color: var(--bn-colors-highlights-gray-text);
 }
+
 [data-text-color="brown"] {
     color: var(--bn-colors-highlights-brown-text);
 }
+
 [data-text-color="red"] {
     color: var(--bn-colors-highlights-red-text);
 }
+
 [data-text-color="orange"] {
     color: var(--bn-colors-highlights-orange-text);
 }
+
 [data-text-color="yellow"] {
     color: var(--bn-colors-highlights-yellow-text);
 }
+
 [data-text-color="green"] {
     color: var(--bn-colors-highlights-green-text);
 }
+
 [data-text-color="blue"] {
     color: var(--bn-colors-highlights-blue-text);
 }
+
 [data-text-color="purple"] {
     color: var(--bn-colors-highlights-purple-text);
 }
+
 [data-text-color="pink"] {
     color: var(--bn-colors-highlights-pink-text);
 }
+
 [data-background-color="gray"] {
     background-color: var(--bn-colors-highlights-gray-background);
 }
+
 [data-background-color="brown"] {
     background-color: var(--bn-colors-highlights-brown-background);
 }
+
 [data-background-color="red"] {
     background-color: var(--bn-colors-highlights-red-background);
 }
+
 [data-background-color="orange"] {
     background-color: var(--bn-colors-highlights-orange-background);
 }
+
 [data-background-color="yellow"] {
     background-color: var(--bn-colors-highlights-yellow-background);
 }
+
 [data-background-color="green"] {
     background-color: var(--bn-colors-highlights-green-background);
 }
+
 [data-background-color="blue"] {
     background-color: var(--bn-colors-highlights-blue-background);
 }
+
 [data-background-color="purple"] {
     background-color: var(--bn-colors-highlights-purple-background);
 }
+
 [data-background-color="pink"] {
     background-color: var(--bn-colors-highlights-pink-background);
 }

tests/src/utils/mouse.ts

@@ -25,7 +25,7 @@ async function getElementCenterCoords(_page: Page, element: Locator) {
 
 export async function moveMouseOverElement(page: Page, element: Locator) {
   const boundingBox = (await element.boundingBox())!;
-  const coords = { x: boundingBox.x, y: boundingBox.y };
+  const coords = { x: boundingBox.x + 1, y: boundingBox.y + 1 };
   await page.mouse.move(coords.x, coords.y, { steps: 5 });
 }