refactor: Removed use-prefers-color-scheme dependency

packages/mantine/package.json

@@ -58,8 +58,7 @@
     "@mantine/utils": "^6.0.21",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.2.1",
-    "use-prefers-color-scheme": "^1.1.3"
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

packages/mantine/src/index.tsx

@@ -9,10 +9,10 @@ import {
   Components,
   ComponentsContext,
   useBlockNoteContext,
+  usePrefersColorScheme,
 } from "@blocknote/react";
 import { MantineProvider } from "@mantine/core";
 import { ComponentProps, useCallback } from "react";
-import { usePrefersColorScheme } from "use-prefers-color-scheme";
 
 import {
   Theme,

packages/react/package.json

@@ -58,8 +58,7 @@
     "lodash.merge": "^4.6.2",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.2.1",
-    "use-prefers-color-scheme": "^1.1.3"
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/lodash.foreach": "^4.5.9",

packages/react/src/editor/BlockNoteView.tsx

@@ -15,9 +15,9 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { usePrefersColorScheme } from "use-prefers-color-scheme";
 import { useEditorChange } from "../hooks/useEditorChange";
 import { useEditorSelectionChange } from "../hooks/useEditorSelectionChange";
+import { usePrefersColorScheme } from "../hooks/usePrefersColorScheme";
 import { BlockNoteContext, useBlockNoteContext } from "./BlockNoteContext";
 import {
   BlockNoteDefaultUI,

packages/react/src/hooks/usePrefersColorScheme.ts

@@ -0,0 +1,79 @@
+// This code is taken from the `use-prefers-color-scheme` repo:
+// https://github.com/rfoel/use-prefers-color-scheme/blob/v1.0.0/src/index.ts
+// The code is copied instead of being imported as the package seems to cause
+// issues when used in a NextJS project.
+import { useEffect, useState } from "react";
+
+const darkQuery = window.matchMedia?.("(prefers-color-scheme: dark)");
+
+const lightQuery = window.matchMedia?.("(prefers-color-scheme: light)");
+
+export const usePrefersColorScheme = () => {
+  const isDark = darkQuery?.matches;
+  const isLight = lightQuery?.matches;
+
+  const [preferredColorSchema, setPreferredColorSchema] = useState<
+    "dark" | "light" | "no-preference"
+  >(isDark ? "dark" : isLight ? "light" : "no-preference");
+
+  useEffect(() => {
+    if (isDark) {
+      setPreferredColorSchema("dark");
+    } else if (isLight) {
+      setPreferredColorSchema("light");
+    } else {
+      setPreferredColorSchema("no-preference");
+    }
+  }, [isDark, isLight]);
+
+  useEffect(() => {
+    if (typeof darkQuery?.addEventListener === "function") {
+      // In modern browsers MediaQueryList should subclass EventTarget
+      // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList
+
+      const darkListener = ({ matches }: MediaQueryListEvent) =>
+        matches && setPreferredColorSchema("dark");
+      const lightListener = ({ matches }: MediaQueryListEvent) =>
+        matches && setPreferredColorSchema("light");
+
+      darkQuery?.addEventListener("change", darkListener);
+      lightQuery?.addEventListener("change", lightListener);
+
+      return () => {
+        darkQuery?.removeEventListener("change", darkListener);
+        lightQuery?.removeEventListener("change", lightListener);
+      };
+    } else {
+      // In some early implementations MediaQueryList existed, but did not
+      // subclass EventTarget
+
+      // Closing over isDark here would cause it to not update when
+      // `darkQuery.matches` changes
+      const listener = () =>
+        setPreferredColorSchema(
+          darkQuery.matches
+            ? "dark"
+            : lightQuery.matches
+            ? "light"
+            : "no-preference"
+        );
+
+      // This is two state updates if a user changes from dark to light, but
+      // both state updates will be consistent and should be batched by React,
+      // resulting in only one re-render
+      darkQuery?.addEventListener("change", listener);
+      lightQuery?.addEventListener("change", listener);
+
+      return () => {
+        darkQuery?.removeEventListener("change", listener);
+        lightQuery?.removeEventListener("change", listener);
+      };
+    }
+  }, []);
+
+  if (typeof window.matchMedia !== "function") {
+    return preferredColorSchema;
+  }
+
+  return preferredColorSchema;
+};

packages/react/src/index.ts

@@ -74,6 +74,7 @@ export * from "./hooks/useEditorChange";
 export * from "./hooks/useEditorContentOrSelectionChange";
 export * from "./hooks/useEditorForceUpdate";
 export * from "./hooks/useEditorSelectionChange";
+export * from "./hooks/usePrefersColorScheme";
 export * from "./hooks/useSelectedBlocks";
 
 export * from "./schema/ReactBlockSpec";