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 <yousefdardiry@gmail.com>
TypeCellOS · Jan 9, 2024 · 509470b · 509470b · vercel · Jan 9, 2024
1 parent 2f0bada
commit 509470b
Show file tree

Hide file tree

Showing 23 changed files with 265 additions and 197 deletions.
diff --git a/README.md b/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({

diff --git a/packages/react/src/editor/BlockNoteTheme.ts b/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 };
 

diff --git a/packages/react/src/editor/styles.css b/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;

diff --git a/packages/website/docs/docs/block-types.md b/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() {

diff --git a/packages/website/docs/docs/blocks.md b/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.

diff --git a/packages/website/docs/docs/converting-blocks.md b/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.

diff --git a/packages/website/docs/docs/cursor-selections.md b/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.

diff --git a/packages/website/docs/docs/formatting-toolbar.md b/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.

diff --git a/packages/website/docs/docs/image-toolbar.md b/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.

diff --git a/packages/website/docs/docs/introduction.md b/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.

diff --git a/packages/website/docs/docs/nextjs.md b/packages/website/docs/docs/nextjs.md
@@ -15,7 +15,7 @@ Make sure to use BlockNote in a [Client Component](https://nextjs.org/docs/getti
 "use client"; // this registers <Editor> as a Client Component
 import { BlockNoteEditor } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 // Our <Editor> component we can reuse later
 export default function Editor() {

diff --git a/packages/website/docs/docs/quickstart.md b/packages/website/docs/docs/quickstart.md
@@ -33,7 +33,7 @@ BlockNote is meant for use with React, so creating an editor in an existing Reac
 ```typescript
 import { BlockNoteEditor } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 function App() {
   // Creates a new editor instance.
@@ -59,7 +59,7 @@ Taking the same code, the live preview below turns it into a super simple, worki
 ```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.

diff --git a/packages/website/docs/docs/real-time-collaboration.md b/packages/website/docs/docs/real-time-collaboration.md
@@ -81,7 +81,7 @@ import { BlockNoteEditor } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 const doc = new Y.Doc();
 const provider = new YPartyKitProvider(
@@ -122,7 +122,7 @@ import { BlockNoteEditor } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 const doc = new Y.Doc();
 const provider = new YPartyKitProvider(

diff --git a/packages/website/docs/docs/side-menu.md b/packages/website/docs/docs/side-menu.md
@@ -45,7 +45,7 @@ import {
   SlashMenuPositioner,
   useBlockNote,
 } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 import { MdDelete } from "react-icons/md";
 
 const CustomSideMenu = (props: SideMenuProps) => (
@@ -108,7 +108,7 @@ import {
   SlashMenuPositioner,
   useBlockNote,
 } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 const CustomDragHandleMenu = (props: {
   editor: BlockNoteEditor;

diff --git a/packages/website/docs/docs/slash-menu.md b/packages/website/docs/docs/slash-menu.md
@@ -34,7 +34,7 @@ import {
   ReactSlashMenuItem,
   useBlockNote,
 } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 import { HiOutlineGlobeAlt } from "react-icons/hi";
 
 // Command to insert "Hello World" in bold in a new block below.
@@ -102,7 +102,7 @@ import {
   ReactSlashMenuItem,
   useBlockNote
 } from "@blocknote/react";
-import "@blocknote/core/style.css";
+import "@blocknote/react/style.css";
 
 function App() {
   const newSlashMenuItems: ReactSlashMenuItem[] =