docs: Mantine update (#502)

* 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)

* Updated theming & styling docs

* @blocknote/core/style.css -> @blocknote/react/style.css in docs

* Example fix

* Added feedback

* Removed old comment

---------

Co-authored-by: yousefed <[email protected]>

Author: matthewlipski

README.md

@@ -35,7 +35,7 @@ Play with the editor @ [https://blocknote-main.vercel.app/](https://blocknote-ma
 
 ```typescript
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 function App() {
   const editor = useBlockNote({

packages/react/src/editor/BlockNoteTheme.ts

@@ -1,9 +1,9 @@
-export type CombinedColor = {
+export type CombinedColor = Partial<{
   text: string;
   background: string;
-};
+}>;
 
-export type ColorScheme = {
+export type ColorScheme = Partial<{
   editor: CombinedColor;
   menu: CombinedColor;
   tooltip: CombinedColor;
@@ -13,7 +13,7 @@ export type ColorScheme = {
   shadow: string;
   border: string;
   sideMenu: string;
-  highlights: {
+  highlights: Partial<{
     gray: CombinedColor;
     brown: CombinedColor;
     red: CombinedColor;
@@ -23,14 +23,14 @@ export type ColorScheme = {
     blue: CombinedColor;
     purple: CombinedColor;
     pink: CombinedColor;
-  };
-};
+  }>;
+}>;
 
-export type Theme = {
+export type Theme = Partial<{
   colors: ColorScheme;
   borderRadius: number;
   fontFamily: string;
-};
+}>;
 
 type NestedObject = { [key: string]: number | string | NestedObject };
 

packages/react/src/editor/styles.css

@@ -1,24 +1,18 @@
 @import url("@mantine/core/styles.css");
-/* TODO: Cannot resolve file? */
 @import url("@blocknote/core/style.css");
 
 /* Default theme params */
 .bn-container {
-    /* TODO: Do we want this? If yes, we should probably have a similar
-         shorthand in the Theme object */
-    --bn-colors-text: #3F3F3F;
-    --bn-colors-background: #FFFFFF;
-
-    --bn-colors-editor-text: var(--bn-colors-text);
-    --bn-colors-editor-background: var(--bn-colors-background);
-    --bn-colors-menu-text: var(--bn-colors-text);
-    --bn-colors-menu-background: var(--bn-colors-background);
-    --bn-colors-tooltip-text: var(--bn-colors-text);
+    --bn-colors-editor-text: #3F3F3F;
+    --bn-colors-editor-background: #FFFFFF;
+    --bn-colors-menu-text: #3F3F3F;
+    --bn-colors-menu-background: #FFFFFF;
+    --bn-colors-tooltip-text: #3F3F3F;
     --bn-colors-tooltip-background: #EFEFEF;
-    --bn-colors-hovered-text: var(--bn-colors-text);
+    --bn-colors-hovered-text: #3F3F3F;
     --bn-colors-hovered-background: #EFEFEF;
     --bn-colors-selected-text: #FFFFFF;
-    --bn-colors-selected-background: var(--bn-colors-text);
+    --bn-colors-selected-background: #3F3F3F;
     --bn-colors-disabled-text: #AFAFAF;
     --bn-colors-disabled-background: #EFEFEF;
 
@@ -58,10 +52,13 @@
 }
 
 .bn-container[data-color-scheme="dark"] {
-    --bn-colors-text: #CFCFCF;
-    --bn-colors-background: #1F1F1F;
-
+    --bn-colors-editor-text: #CFCFCF;
+    --bn-colors-editor-background: #1F1F1F;
+    --bn-colors-menu-text: #CFCFCF;
+    --bn-colors-menu-background: #1F1F1F;
+    --bn-colors-tooltip-text: #CFCFCF;
     --bn-colors-tooltip-background: #161616;
+    --bn-colors-hovered-text: #CFCFCF;
     --bn-colors-hovered-background: #161616;
     --bn-colors-selected-text: #CFCFCF;
     --bn-colors-selected-background: #0F0F0F;

packages/website/docs/docs/block-types.md

@@ -179,7 +179,7 @@ import {
   ReactSlashMenuItem,
   getDefaultReactSlashMenuItems,
 } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 import { RiText } from "react-icons/ri";
 
 export default function App() {

packages/website/docs/docs/blocks.md

@@ -23,7 +23,7 @@ We'll go through the full API later in this section, but let's start with a simp
 
 ```typescript
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 function App() {
   // Creates a new editor instance.
@@ -79,7 +79,7 @@ Now that we know how blocks are represented in code, let's take a look at the li
 import { useState } from "react";
 import { BlockNoteEditor, Block } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 export default function App() {
   // Stores the editor's contents as an array of Block objects.

packages/website/docs/docs/converting-blocks.md

@@ -54,7 +54,7 @@ The output is simplified as Markdown does not support all features of BlockNote
 import { useState } from "react";
 import { BlockNoteEditor } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 export default function App() {
   // Stores the editor's contents as Markdown.
@@ -124,7 +124,7 @@ Tries to create `Block` and `InlineNode` objects based on Markdown syntax, thoug
 import { useEffect, useState } from "react";
 import { BlockNoteEditor, Block } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 export default function App() {
   // Stores the current Markdown content.
@@ -207,7 +207,7 @@ To better conform to HTML standards, children of blocks which aren't list items
 import { useState } from "react";
 import { BlockNoteEditor } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 export default function App() {
   // Stores the editor's contents as HTML.
@@ -276,7 +276,7 @@ Tries to create `Block` objects out of any HTML block-level elements, and `Inlin
 import { useEffect, useState } from "react";
 import { BlockNoteEditor, Block } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 export default function App() {
   // Stores the current HTML content.

packages/website/docs/docs/cursor-selections.md

@@ -86,7 +86,7 @@ If you need a visualization for which block contains the text cursor, the demo b
 ```typescript-vue /App.tsx
 import { BlockNoteEditor, Block } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 export default function App() {
   // Creates a new editor instance.
@@ -173,7 +173,7 @@ If you need a visualization for which blocks the text cursor spans, the demo bel
 ```typescript-vue /App.tsx
 import { BlockNoteEditor, Block } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 export default function App() {
   // Creates a new editor instance.

packages/website/docs/docs/formatting-toolbar.md

@@ -42,7 +42,7 @@ import {
   useEditorContentChange,
   useEditorSelectionChange,
 } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 const CustomFormattingToolbar = (props: { editor: BlockNoteEditor }) => {
   // Tracks whether the text & background are both blue.

packages/website/docs/docs/image-toolbar.md

@@ -40,7 +40,7 @@ import {
   uploadToTmpFilesDotOrg_DEV_ONLY,
 } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 export default function App() {
   // Creates a new editor instance.

packages/website/docs/docs/introduction.md

@@ -48,7 +48,7 @@ See how to set up your own editor in the [Quickstart](/docs/quickstart). Here's
 ```typescript-vue /App.tsx
 import { BlockNoteEditor } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 export default function App() {
   // Creates a new editor instance.