chore: Mantine update (#479)

* Updated Mantine & moved theming to CSS * Added `package-lock.json` * Fixed test selectors * Changed styles to not use nesting * add react/style.css * Styling fixes and updated test screenshots * Removed redundant stylesheet * Implemented PR feedback * Small color fix * Implemented PR feedback * Implemented PR feedback * Implemented PR feedback * Implemented PR feedback * Implemented PR feedback * Added `.bn-container` prefix to all BlockNote styles (fixes CSS rule specificity issues caused by prev commit) * feat: Replace Tippy with Floating UI (#501) * Replaced Tippy with Floating UI * Fixed minor bugs and styling inconsistencies * try fix lock * Implemented PR feedback * update package lock * fix package lock * fix tests --------- Co-authored-by: yousefed <yousefdardiry@gmail.com> --------- Co-authored-by: yousefed <yousefdardiry@gmail.com>
TypeCellOS · Jan 8, 2024 · 2f0bada · 2f0bada · vercel · Jan 8, 2024
1 parent ff3051f
commit 2f0bada
Show file tree

Hide file tree

Showing 73 changed files with 11,414 additions and 12,755 deletions.
diff --git a/examples/editor/examples/basic/App.tsx b/examples/editor/examples/basic/App.tsx
@@ -1,6 +1,6 @@
 import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
-import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import "@blocknote/react/style.css";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 

diff --git a/examples/editor/examples/collaboration/App.tsx b/examples/editor/examples/collaboration/App.tsx
@@ -1,6 +1,6 @@
 import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
-import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import "@blocknote/react/style.css";
 
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";

diff --git a/examples/editor/examples/react-custom-blocks/App.tsx b/examples/editor/examples/react-custom-blocks/App.tsx
@@ -1,10 +1,10 @@
 import { defaultBlockSpecs, defaultProps } from "@blocknote/core";
-import "@blocknote/core/style.css";
 import {
   BlockNoteView,
   createReactBlockSpec,
   useBlockNote,
 } from "@blocknote/react";
+import "@blocknote/react/style.css";
 import "../vanilla-custom-blocks/style.css";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };

diff --git a/examples/editor/examples/react-custom-inline-content/App.tsx b/examples/editor/examples/react-custom-inline-content/App.tsx
@@ -1,10 +1,10 @@
 import { defaultInlineContentSpecs } from "@blocknote/core";
-import "@blocknote/core/style.css";
 import {
   BlockNoteView,
   createReactInlineContentSpec,
   useBlockNote,
 } from "@blocknote/react";
+import "@blocknote/react/style.css";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 

diff --git a/examples/editor/examples/react-custom-styles/App.tsx b/examples/editor/examples/react-custom-styles/App.tsx
@@ -4,7 +4,6 @@ import {
   DefaultInlineContentSchema,
   defaultStyleSpecs,
 } from "@blocknote/core";
-import "@blocknote/core/style.css";
 import {
   BlockNoteView,
   createReactStyleSpec,
@@ -14,6 +13,7 @@ import {
   useActiveStyles,
   useBlockNote,
 } from "@blocknote/react";
+import "@blocknote/react/style.css";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 

diff --git a/examples/editor/examples/vanilla-custom-blocks/App.tsx b/examples/editor/examples/vanilla-custom-blocks/App.tsx
@@ -3,8 +3,8 @@ import {
   defaultBlockSpecs,
   defaultProps,
 } from "@blocknote/core";
-import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import "@blocknote/react/style.css";
 import "./style.css";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };

diff --git a/examples/editor/examples/vanilla-custom-inline-content/App.tsx b/examples/editor/examples/vanilla-custom-inline-content/App.tsx
@@ -2,8 +2,8 @@ import {
   createInlineContentSpec,
   defaultInlineContentSpecs,
 } from "@blocknote/core";
-import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import "@blocknote/react/style.css";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 

diff --git a/examples/editor/examples/vanilla-custom-styles/App.tsx b/examples/editor/examples/vanilla-custom-styles/App.tsx
@@ -5,7 +5,6 @@ import {
   DefaultInlineContentSchema,
   defaultStyleSpecs,
 } from "@blocknote/core";
-import "@blocknote/core/style.css";
 import {
   BlockNoteView,
   FormattingToolbarPositioner,
@@ -14,6 +13,7 @@ import {
   useActiveStyles,
   useBlockNote,
 } from "@blocknote/react";
+import "@blocknote/react/style.css";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 

diff --git a/examples/editor/package.json b/examples/editor/package.json
@@ -12,7 +12,7 @@
   "dependencies": {
     "@blocknote/core": "^0.10.1",
     "@blocknote/react": "^0.10.1",
-    "@mantine/core": "^5.6.1",
+    "@mantine/core": "^7.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",

diff --git a/examples/editor/src/App.css b/examples/editor/src/App.css
diff --git a/examples/editor/src/main.tsx b/examples/editor/src/main.tsx
@@ -1,4 +1,4 @@
-import { AppShell, Navbar, ScrollArea } from "@mantine/core";
+import { AppShell, MantineProvider, ScrollArea } from "@mantine/core";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import {
@@ -66,15 +66,23 @@ function Root() {
   //   // "root:hover": { background: "blue" },
   // });
   return (
-    <AppShell
-      padding={0}
-      navbar={
-        window.location.search.includes("hideMenu") ? undefined : (
-          <Navbar
-            width={{ base: 300 }}
-            style={{ background: "#f7f7f5" }}
-            p="xs">
-            <Navbar.Section grow component={ScrollArea} mx="-xs" px="xs">
+    <MantineProvider>
+      <AppShell
+        padding={0}
+        //   header={<Header height={60} p="xs">
+        //   {/* Header content */}
+        // </Header>}
+        styles={() => ({
+          main: {
+            backgroundColor: "white",
+            // theme.colorScheme === "dark"
+            //   ? theme.colors.dark[8]
+            //   : theme.colors.gray[0],
+          },
+        })}>
+        {window.location.search.includes("hideMenu") ? undefined : (
+          <AppShell.Navbar w={{ base: 300 }} p="xs">
+            <AppShell.Section grow component={ScrollArea} mx="-xs" px="xs">
               {editors.map((editor, i) => (
                 <div key={i}>
                   <Link to={editor.path}>{editor.title}</Link>
@@ -95,24 +103,12 @@ function Root() {
               // icon={<IconGauge size={16} stroke={1.5} />}
               // rightSection={<IconChevronRight size={12} stroke={1.5} />}
             /> */}
-            </Navbar.Section>
-          </Navbar>
-        )
-      }
-      header={<></>}
-      //   header={<Header height={60} p="xs">
-      //   {/* Header content */}
-      // </Header>}
-      styles={(theme) => ({
-        main: {
-          backgroundColor: "white",
-          // theme.colorScheme === "dark"
-          //   ? theme.colors.dark[8]
-          //   : theme.colors.gray[0],
-        },
-      })}>
-      <Outlet />
-    </AppShell>
+            </AppShell.Section>
+          </AppShell.Navbar>
+        )}
+        <Outlet />
+      </AppShell>
+    </MantineProvider>
   );
 }
 const router = createBrowserRouter([

diff --git a/examples/editor/src/style.css b/examples/editor/src/style.css
@@ -1,14 +1,11 @@
-.editor {
-  margin: 0 calc((100% - 731px) / 2);
-  margin-top: 8px;
-  /* height: 100%; */
+body {
+  height: auto;
 }
 
-body {
-  margin: 0;
+.editor {
+  margin: 8px calc((100% - 731px) / 2) 0;
 }
 
-/* .root {
-  height: 100%;
-  width: 100%;
-} */
+.mantine-AppShell-navbar {
+  background-color: #f7f7f5;
+}