Skip to content

Commit 5b559b1

Browse files
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]>
1 parent 4b2f0d0 commit 5b559b1

File tree

293 files changed

+6660
-2791
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

293 files changed

+6660
-2791
lines changed

.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ module.exports = {
2424
},
2525
},
2626
},
27+
ignorePatterns: ["**/ui/*"],
2728
rules: {
2829
curly: 1,
2930
"import/no-extraneous-dependencies": [

docs/components/pages/landing/hero/DemoEditor.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
22
import "@blocknote/core/fonts/inter.css";
3-
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
4-
import "@blocknote/react/style.css";
3+
import { useCreateBlockNote } from "@blocknote/react";
4+
import { BlockNoteView } from "@blocknote/mantine";
5+
import "@blocknote/mantine/style.css";
56
import { useCallback, useMemo, useState } from "react";
67
import YPartyKitProvider from "y-partykit/provider";
78
import * as Y from "yjs";

docs/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@
1111
"dependencies": {
1212
"@blocknote/core": "^0.12.1",
1313
"@blocknote/react": "^0.12.2",
14+
"@blocknote/ariakit": "^0.12.2",
15+
"@blocknote/mantine": "^0.12.2",
16+
"@blocknote/shadcn": "^0.12.2",
1417
"@headlessui/react": "^1.7.18",
1518
"@mantine/core": "^7.5.0",
1619
"@next/bundle-analyzer": "^14.1.0",

docs/pages/docs/quickstart.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Getting started with BlockNote is quick and easy. Install the required packages
1717
To install BlockNote with [NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), run:
1818

1919
```console
20-
npm install @blocknote/core @blocknote/react
20+
npm install @blocknote/core @blocknote/react @blocknote/mantine
2121
```
2222

2323
## Creating an Editor
@@ -26,7 +26,7 @@ With the `useCreateBlockNote` hook, we can create a new editor instance, then us
2626

2727
<Example name="basic/minimal" />
2828

29-
We also import `@blocknote/react/style.css` to add default styling for the editor and the `Inter` font that BlockNote exports (optional).
29+
We also import `@blocknote/mantine/style.css` to add default styling for the editor and the `Inter` font that BlockNote exports (optional).
3030

3131
<Callout type="warning" emoji={""}>
3232
<strong>Next.js usage (or other server-side React frameworks)</strong>

examples/01-basic/01-minimal/App.tsx

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
import "@blocknote/core/fonts/inter.css";
22
import { useCreateBlockNote } from "@blocknote/react";
3-
import "@blocknote/react/style.css";
4-
import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
5-
63
import { BlockNoteView } from "@blocknote/mantine";
7-
// import { BlockNoteView } from "@blocknote/ariakit";
8-
// import { BlockNoteView } from "@blocknote/shadcn";
4+
import "@blocknote/mantine/style.css";
95

106
export default function App() {
117
// Creates a new editor instance.
12-
const editor = useCreateBlockNote({
13-
uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
14-
});
8+
const editor = useCreateBlockNote();
159

1610
// Renders the editor instance using a React component.
1711
return <BlockNoteView editor={editor} />;

examples/01-basic/01-minimal/package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@
1111
"lint": "eslint . --max-warnings 0"
1212
},
1313
"dependencies": {
14-
"@blocknote/core": "^0.12.0",
15-
"@blocknote/react": "^0.12.0",
14+
"@blocknote/core": "^0.12.1",
15+
"@blocknote/react": "^0.12.2",
16+
"@blocknote/ariakit": "^0.12.2",
17+
"@blocknote/mantine": "^0.12.2",
18+
"@blocknote/shadcn": "^0.12.2",
1619
"react": "^18.2.0",
1720
"react-dom": "^18.2.0"
1821
},

examples/01-basic/02-block-objects/App.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { Block } from "@blocknote/core";
22
import "@blocknote/core/fonts/inter.css";
3-
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
4-
import "@blocknote/react/style.css";
3+
import { useCreateBlockNote } from "@blocknote/react";
4+
import { BlockNoteView } from "@blocknote/mantine";
5+
import "@blocknote/mantine/style.css";
56
import { useState } from "react";
67

78
import "./styles.css";

examples/01-basic/02-block-objects/package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@
1111
"lint": "eslint . --max-warnings 0"
1212
},
1313
"dependencies": {
14-
"@blocknote/core": "^0.12.0",
15-
"@blocknote/react": "^0.12.0",
14+
"@blocknote/core": "^0.12.1",
15+
"@blocknote/react": "^0.12.2",
16+
"@blocknote/ariakit": "^0.12.2",
17+
"@blocknote/mantine": "^0.12.2",
18+
"@blocknote/shadcn": "^0.12.2",
1619
"react": "^18.2.0",
1720
"react-dom": "^18.2.0"
1821
},

examples/01-basic/03-all-blocks/App.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import "@blocknote/core/fonts/inter.css";
2-
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
3-
import "@blocknote/react/style.css";
2+
import { useCreateBlockNote } from "@blocknote/react";
3+
import { BlockNoteView } from "@blocknote/mantine";
4+
import "@blocknote/mantine/style.css";
45

56
export default function App() {
67
// Creates a new editor instance.

examples/01-basic/03-all-blocks/package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@
1111
"lint": "eslint . --max-warnings 0"
1212
},
1313
"dependencies": {
14-
"@blocknote/core": "^0.12.0",
15-
"@blocknote/react": "^0.12.0",
14+
"@blocknote/core": "^0.12.1",
15+
"@blocknote/react": "^0.12.2",
16+
"@blocknote/ariakit": "^0.12.2",
17+
"@blocknote/mantine": "^0.12.2",
18+
"@blocknote/shadcn": "^0.12.2",
1619
"react": "^18.2.0",
1720
"react-dom": "^18.2.0"
1821
},

0 commit comments

Comments
 (0)