fix: ShadCN color styles button & form components (#696)

* Added ShadCN color styles button & form components * refactor: UI libs CSS+API refactor (#698) * Cleaned up component context API * WIP * Refactored CSS & ShadCN API * Fixed Ariakit component props * Fixed Mantine component props * Fixed ShadCN component props * Cleanup * Misc fixes * - Added remaining components to context - Re-added refs to all relevant components - Refactored ShadCN context - Simplified how class names are set in `react` package - Added prefixes to all UI specific class names - Fixed remaining select/menu/popover overflow issues - Fixed examples - Fixed build * Changed ShadCN suggestion menu to use Card * Small fix * Fixed linting * Fixed `BlockNoteViewRaw` typing * Misc fixes * Misc fixes * Fixed unit tests * Fixed Mantine sub menus * Misc UI fixes * Misc changes * fix import * fix tablehandles performance issue / max call stack * Fixed PW tests * Small fix * Added ShadCN/Ariakit tests * fix draghandles * add vercel rewrites * improve shadcn setup * Fixed remaining Ariakit/ShadCN/Mantine styles * extract strings from react package * extract all strings * clean i18n setup * fix build * Fixed dark mode for Ariakit/ShadCN * Misc fixes --------- Co-authored-by: yousefed <[email protected]> --------- Co-authored-by: yousefed <[email protected]>
TypeCellOS · Apr 30, 2024 · 5b559b1 · 5b559b1
1 parent 4b2f0d0
commit 5b559b1
Show file tree

Hide file tree

Showing 293 changed files with 6,660 additions and 2,791 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -24,6 +24,7 @@ module.exports = {
       },
     },
   },
+  ignorePatterns: ["**/ui/*"],
   rules: {
     curly: 1,
     "import/no-extraneous-dependencies": [

diff --git a/docs/components/pages/landing/hero/DemoEditor.tsx b/docs/components/pages/landing/hero/DemoEditor.tsx
@@ -1,7 +1,8 @@
 import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
-import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 import { useCallback, useMemo, useState } from "react";
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";

diff --git a/docs/package.json b/docs/package.json
@@ -11,6 +11,9 @@
   "dependencies": {
     "@blocknote/core": "^0.12.1",
     "@blocknote/react": "^0.12.2",
+    "@blocknote/ariakit": "^0.12.2",
+    "@blocknote/mantine": "^0.12.2",
+    "@blocknote/shadcn": "^0.12.2",
     "@headlessui/react": "^1.7.18",
     "@mantine/core": "^7.5.0",
     "@next/bundle-analyzer": "^14.1.0",

diff --git a/docs/pages/docs/quickstart.mdx b/docs/pages/docs/quickstart.mdx
@@ -17,7 +17,7 @@ Getting started with BlockNote is quick and easy. Install the required packages
 To install BlockNote with [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), run:
 
 ```console
-npm install @blocknote/core @blocknote/react
+npm install @blocknote/core @blocknote/react @blocknote/mantine
 ```
 
 ## Creating an Editor
@@ -26,7 +26,7 @@ With the `useCreateBlockNote` hook, we can create a new editor instance, then us
 
 <Example name="basic/minimal" />
 
-We also import `@blocknote/react/style.css` to add default styling for the editor and the `Inter` font that BlockNote exports (optional).
+We also import `@blocknote/mantine/style.css` to add default styling for the editor and the `Inter` font that BlockNote exports (optional).
 
 <Callout type="warning" emoji={""}>
   <strong>Next.js usage (or other server-side React frameworks)</strong>

diff --git a/examples/01-basic/01-minimal/App.tsx b/examples/01-basic/01-minimal/App.tsx
@@ -1,17 +1,11 @@
 import "@blocknote/core/fonts/inter.css";
 import { useCreateBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
-
 import { BlockNoteView } from "@blocknote/mantine";
-// import { BlockNoteView } from "@blocknote/ariakit";
-// import { BlockNoteView } from "@blocknote/shadcn";
+import "@blocknote/mantine/style.css";
 
 export default function App() {
   // Creates a new editor instance.
-  const editor = useCreateBlockNote({
-    uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
-  });
+  const editor = useCreateBlockNote();
 
   // Renders the editor instance using a React component.
   return <BlockNoteView editor={editor} />;

diff --git a/examples/01-basic/01-minimal/package.json b/examples/01-basic/01-minimal/package.json
@@ -11,8 +11,11 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@blocknote/core": "^0.12.0",
-    "@blocknote/react": "^0.12.0",
+    "@blocknote/core": "^0.12.1",
+    "@blocknote/react": "^0.12.2",
+    "@blocknote/ariakit": "^0.12.2",
+    "@blocknote/mantine": "^0.12.2",
+    "@blocknote/shadcn": "^0.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/01-basic/02-block-objects/App.tsx b/examples/01-basic/02-block-objects/App.tsx
@@ -1,7 +1,8 @@
 import { Block } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
-import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 import { useState } from "react";
 
 import "./styles.css";

diff --git a/examples/01-basic/02-block-objects/package.json b/examples/01-basic/02-block-objects/package.json
@@ -11,8 +11,11 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@blocknote/core": "^0.12.0",
-    "@blocknote/react": "^0.12.0",
+    "@blocknote/core": "^0.12.1",
+    "@blocknote/react": "^0.12.2",
+    "@blocknote/ariakit": "^0.12.2",
+    "@blocknote/mantine": "^0.12.2",
+    "@blocknote/shadcn": "^0.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/01-basic/03-all-blocks/App.tsx b/examples/01-basic/03-all-blocks/App.tsx
@@ -1,6 +1,7 @@
 import "@blocknote/core/fonts/inter.css";
-import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 
 export default function App() {
   // Creates a new editor instance.

diff --git a/examples/01-basic/03-all-blocks/package.json b/examples/01-basic/03-all-blocks/package.json
@@ -11,8 +11,11 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@blocknote/core": "^0.12.0",
-    "@blocknote/react": "^0.12.0",
+    "@blocknote/core": "^0.12.1",
+    "@blocknote/react": "^0.12.2",
+    "@blocknote/ariakit": "^0.12.2",
+    "@blocknote/mantine": "^0.12.2",
+    "@blocknote/shadcn": "^0.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/01-basic/04-selection-blocks/App.tsx b/examples/01-basic/04-selection-blocks/App.tsx
@@ -1,7 +1,8 @@
 import { Block } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
-import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 import { useState } from "react";
 
 import "./styles.css";

diff --git a/examples/01-basic/04-selection-blocks/package.json b/examples/01-basic/04-selection-blocks/package.json
@@ -11,8 +11,11 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@blocknote/core": "^0.12.0",
-    "@blocknote/react": "^0.12.0",
+    "@blocknote/core": "^0.12.1",
+    "@blocknote/react": "^0.12.2",
+    "@blocknote/ariakit": "^0.12.2",
+    "@blocknote/mantine": "^0.12.2",
+    "@blocknote/shadcn": "^0.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/01-basic/05-block-manipulation/App.tsx b/examples/01-basic/05-block-manipulation/App.tsx
@@ -1,6 +1,7 @@
 import "@blocknote/core/fonts/inter.css";
-import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 
 import "./styles.css";
 

diff --git a/examples/01-basic/05-block-manipulation/package.json b/examples/01-basic/05-block-manipulation/package.json
@@ -11,8 +11,11 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@blocknote/core": "^0.12.0",
-    "@blocknote/react": "^0.12.0",
+    "@blocknote/core": "^0.12.1",
+    "@blocknote/react": "^0.12.2",
+    "@blocknote/ariakit": "^0.12.2",
+    "@blocknote/mantine": "^0.12.2",
+    "@blocknote/shadcn": "^0.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/01-basic/06-file-uploading/App.tsx b/examples/01-basic/06-file-uploading/App.tsx
@@ -1,6 +1,7 @@
 import "@blocknote/core/fonts/inter.css";
-import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 
 // Uploads a file to tmpfiles.org and returns the URL to the uploaded file.
 async function uploadFile(file: File) {

diff --git a/examples/01-basic/06-file-uploading/package.json b/examples/01-basic/06-file-uploading/package.json
@@ -11,8 +11,11 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@blocknote/core": "^0.12.0",
-    "@blocknote/react": "^0.12.0",
+    "@blocknote/core": "^0.12.1",
+    "@blocknote/react": "^0.12.2",
+    "@blocknote/ariakit": "^0.12.2",
+    "@blocknote/mantine": "^0.12.2",
+    "@blocknote/shadcn": "^0.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/01-basic/07-saving-loading/App.tsx b/examples/01-basic/07-saving-loading/App.tsx
@@ -1,7 +1,7 @@
 import { Block, BlockNoteEditor, PartialBlock } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
-import { BlockNoteView } from "@blocknote/react";
-import "@blocknote/react/style.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 import { useEffect, useMemo, useState } from "react";
 
 async function saveToStorage(jsonBlocks: Block[]) {

diff --git a/examples/01-basic/07-saving-loading/package.json b/examples/01-basic/07-saving-loading/package.json
@@ -11,8 +11,11 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@blocknote/core": "^0.12.0",
-    "@blocknote/react": "^0.12.0",
+    "@blocknote/core": "^0.12.1",
+    "@blocknote/react": "^0.12.2",
+    "@blocknote/ariakit": "^0.12.2",
+    "@blocknote/mantine": "^0.12.2",
+    "@blocknote/shadcn": "^0.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/01-basic/08-shadcn/App.tsx b/examples/01-basic/08-shadcn/App.tsx
@@ -1,12 +1,22 @@
 import "@blocknote/core/fonts/inter.css";
 import { useCreateBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
 import { BlockNoteView } from "@blocknote/shadcn";
+import "@blocknote/shadcn/style.css";
 
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote();
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
+  return (
+    <BlockNoteView
+      editor={editor}
+      shadCNComponents={
+        {
+          // Pass modified ShadCN components from your project here.
+          // Otherwise, the default ShadCN components will be used.
+        }
+      }
+    />
+  );
 }
diff --git a/examples/01-basic/08-shadcn/README.md b/examples/01-basic/08-shadcn/README.md
@@ -1,6 +1,6 @@
-# Basic Setup TODO
+# Use with ShadCN
 
-This example shows the minimal code required to set up a BlockNote editor in React.
+This example shows how you can integrate BlockNote with ShadCN, replacing the default Mantine UI with ShadCN components.
 
 **Relevant Docs:**
 

diff --git a/examples/01-basic/08-shadcn/index.html b/examples/01-basic/08-shadcn/index.html
@@ -5,7 +5,7 @@
     </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Basic Setup TODO</title>
+    <title>Use with ShadCN</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/examples/01-basic/08-shadcn/package.json b/examples/01-basic/08-shadcn/package.json
@@ -11,8 +11,11 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@blocknote/core": "^0.12.0",
-    "@blocknote/react": "^0.12.0",
+    "@blocknote/core": "^0.12.1",
+    "@blocknote/react": "^0.12.2",
+    "@blocknote/ariakit": "^0.12.2",
+    "@blocknote/mantine": "^0.12.2",
+    "@blocknote/shadcn": "^0.12.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/examples/01-basic/09-ariakit/.bnexample.json b/examples/01-basic/09-ariakit/.bnexample.json
@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "matthewlipski",
+  "tags": ["Basic"]
+}
diff --git a/examples/01-basic/09-ariakit/App.tsx b/examples/01-basic/09-ariakit/App.tsx
@@ -0,0 +1,12 @@
+import "@blocknote/core/fonts/inter.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/ariakit";
+import "@blocknote/ariakit/style.css";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote();
+
+  // Renders the editor instance using a React component.
+  return <BlockNoteView editor={editor} />;
+}
diff --git a/examples/01-basic/09-ariakit/README.md b/examples/01-basic/09-ariakit/README.md
@@ -0,0 +1,7 @@
+# Use with Ariakit
+
+This example shows how you can integrate BlockNote with Ariakit, replacing the default Mantine UI with Ariakit components.
+
+**Relevant Docs:**
+
+- [Editor Setup](/docs/editor-basics/setup)
diff --git a/examples/01-basic/09-ariakit/index.html b/examples/01-basic/09-ariakit/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Use with Ariakit</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/shadcn/src/main.tsx → examples/01-basic/09-ariakit/main.tsx b/packages/shadcn/src/main.tsx → examples/01-basic/09-ariakit/main.tsx
@@ -1,14 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
 import React from "react";
 import { createRoot } from "react-dom/client";
+import App from "./App";
 
-import { Button } from "./components/ui/button";
-import "./style.css";
 const root = createRoot(document.getElementById("root")!);
 root.render(
   <React.StrictMode>
-    <Button variant="ghost" size="icon">
-      {/* <Archive className="h-4 w-4" /> */}
-      hello
-    </Button>
+    <App />
   </React.StrictMode>
 );
diff --git a/examples/01-basic/09-ariakit/package.json b/examples/01-basic/09-ariakit/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@blocknote/example-ariakit",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.0",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "^0.12.1",
+    "@blocknote/react": "^0.12.2",
+    "@blocknote/ariakit": "^0.12.2",
+    "@blocknote/mantine": "^0.12.2",
+    "@blocknote/shadcn": "^0.12.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}