Skip to content

Commit c211412

Browse files
matthewlipskimatthewlipski
committed
Merge branch 'main' into new-releases
2 parents 5498743 + 9f4907e commit c211412

File tree

21 files changed

+1583
-1067
lines changed

21 files changed

+1583
-1067
lines changed

‎examples/editor/src/main.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import {
88
createBrowserRouter,
99
} from "react-router-dom";
1010

11+
import "./style.css";
1112
import { App } from "../examples/basic/App";
1213
import { ReactCustomBlocks } from "../examples/react-custom-blocks/App";
1314
import { ReactInlineContent } from "../examples/react-custom-inline-content/App";
1415
import { ReactStyles } from "../examples/react-custom-styles/App";
1516
import { CustomBlocks } from "../examples/vanilla-custom-blocks/App";
1617
import { InlineContent } from "../examples/vanilla-custom-inline-content/App";
17-
import "./style.css";
1818

1919
window.React = React;
2020

‎examples/editor/src/style.css

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
body {
2-
height: auto;
3-
}
1+
@import url("@mantine/core/styles.css");
42

53
.editor {
64
margin: 8px calc((100% - 731px) / 2) 0;

‎package-lock.json

+1,349-1,031
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
"remark-stringify": "^10.0.2",
8787
"unified": "^10.1.2",
8888
"uuid": "^8.3.2",
89-
"y-prosemirror": "1.0.20",
89+
"y-prosemirror": "1.2.1",
9090
"y-protocols": "^1.0.5",
9191
"yjs": "^13.6.1"
9292
},

‎packages/core/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts

+13
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
} from "../../schema";
55
import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers";
66
import { defaultProps } from "../defaultProps";
7+
import { handleEnter } from "../ListItemBlockContent/ListItemKeyboardShortcuts";
78

89
export const paragraphPropSchema = {
910
...defaultProps,
@@ -13,6 +14,18 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({
1314
name: "paragraph",
1415
content: "inline*",
1516
group: "blockContent",
17+
18+
addKeyboardShortcuts() {
19+
return {
20+
Enter: () => handleEnter(this.editor),
21+
"Mod-Alt-0": () =>
22+
this.editor.commands.BNUpdateBlock(this.editor.state.selection.anchor, {
23+
type: "paragraph",
24+
props: {},
25+
}),
26+
};
27+
},
28+
1629
parseHTML() {
1730
return [
1831
{ tag: "div[data-content-type=" + this.name + "]" },

‎packages/core/src/editor/BlockNoteEditor.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ import { HTMLToBlocks } from "../api/parsers/html/parseHTML";
2121
import { markdownToBlocks } from "../api/parsers/markdown/parseMarkdown";
2222
import {
2323
DefaultBlockSchema,
24+
DefaultInlineContentSchema,
25+
DefaultStyleSchema,
2426
defaultBlockSchema,
2527
defaultBlockSpecs,
26-
DefaultInlineContentSchema,
2728
defaultInlineContentSpecs,
28-
DefaultStyleSchema,
2929
defaultStyleSpecs,
3030
} from "../blocks/defaultBlocks";
3131
import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin";
@@ -45,17 +45,17 @@ import {
4545
BlockSchemaFromSpecs,
4646
BlockSchemaWithBlock,
4747
BlockSpecs,
48-
getBlockSchemaFromSpecs,
49-
getInlineContentSchemaFromSpecs,
50-
getStyleSchemaFromSpecs,
5148
InlineContentSchema,
5249
InlineContentSchemaFromSpecs,
5350
InlineContentSpecs,
5451
PartialBlock,
55-
Styles,
5652
StyleSchema,
5753
StyleSchemaFromSpecs,
5854
StyleSpecs,
55+
Styles,
56+
getBlockSchemaFromSpecs,
57+
getInlineContentSchemaFromSpecs,
58+
getStyleSchemaFromSpecs,
5959
} from "../schema";
6060
import { mergeCSSClasses } from "../util/browser";
6161
import { UnreachableCaseError } from "../util/typescript";
@@ -371,7 +371,7 @@ export class BlockNoteEditor<
371371
jsonNode.content[0].content[0].attrs.id = "initialBlockId";
372372

373373
cache = Node.fromJSON(schema, jsonNode);
374-
return ret;
374+
return cache;
375375
};
376376

377377
const root = schema.node(

‎packages/core/src/pm-nodes/BlockContainer.ts

-4
Original file line numberDiff line numberDiff line change
@@ -693,10 +693,6 @@ export const BlockContainer = Node.create<{
693693
this.editor.commands.liftListItem("blockContainer");
694694
return true;
695695
},
696-
"Mod-Alt-0": () =>
697-
this.editor.commands.BNCreateBlock(
698-
this.editor.state.selection.anchor + 2
699-
),
700696
};
701697
},
702698
});

‎packages/react/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@
5252
"dependencies": {
5353
"@blocknote/core": "^0.11.1",
5454
"@floating-ui/react": "^0.26.4",
55-
"@mantine/core": "^7.4.2",
56-
"@mantine/hooks": "7.4.2",
55+
"@mantine/core": "^7.5.0",
56+
"@mantine/hooks": "^7.5.0",
5757
"@mantine/utils": "^6.0.21",
5858
"@tiptap/core": "^2.0.3",
5959
"@tiptap/react": "^2.0.3",

‎packages/react/src/editor/BlockNoteView.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,9 @@ export function BlockNoteView<
8888
}, [systemColorScheme, editor.domElement, theme]);
8989

9090
return (
91-
<MantineProvider theme={mantineTheme}>
91+
// `cssVariablesSelector` scopes Mantine CSS variables to only the editor,
92+
// as proposed here: https://github.com/orgs/mantinedev/discussions/5685
93+
<MantineProvider theme={mantineTheme} cssVariablesSelector=".bn-container">
9294
<EditorContent
9395
editor={editor._tiptapEditor}
9496
className={mergeCSSClasses("bn-container", className || "")}

‎packages/react/src/editor/mantineStyles.css

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/* Based on https://github.com/orgs/mantinedev/discussions/5685 */
2+
3+
/* We need all the Mantine styles except the global styles, so unfortunately our
4+
only option is to import all the component styles separately. Could consider
5+
importing only styles for components used in BlockNote in the future. */
6+
/* Files list: https://mantine.dev/styles/css-files-list/ */
7+
@import url("@mantine/core/styles/ScrollArea.css");
8+
@import url("@mantine/core/styles/UnstyledButton.css");
9+
@import url("@mantine/core/styles/VisuallyHidden.css");
10+
@import url("@mantine/core/styles/Paper.css");
11+
@import url("@mantine/core/styles/Popover.css");
12+
@import url("@mantine/core/styles/CloseButton.css");
13+
@import url("@mantine/core/styles/Group.css");
14+
@import url("@mantine/core/styles/Loader.css");
15+
@import url("@mantine/core/styles/Overlay.css");
16+
@import url("@mantine/core/styles/ModalBase.css");
17+
@import url("@mantine/core/styles/Input.css");
18+
@import url("@mantine/core/styles/Flex.css");
19+
20+
@import url("@mantine/core/styles/Accordion.css");
21+
@import url("@mantine/core/styles/ActionIcon.css");
22+
@import url("@mantine/core/styles/Affix.css");
23+
@import url("@mantine/core/styles/Alert.css");
24+
@import url("@mantine/core/styles/Anchor.css");
25+
@import url("@mantine/core/styles/AspectRatio.css");
26+
@import url("@mantine/core/styles/AppShell.css");
27+
@import url("@mantine/core/styles/Avatar.css");
28+
@import url("@mantine/core/styles/Badge.css");
29+
@import url("@mantine/core/styles/BackgroundImage.css");
30+
@import url("@mantine/core/styles/Blockquote.css");
31+
@import url("@mantine/core/styles/Breadcrumbs.css");
32+
@import url("@mantine/core/styles/Button.css");
33+
@import url("@mantine/core/styles/Burger.css");
34+
@import url("@mantine/core/styles/Card.css");
35+
@import url("@mantine/core/styles/Center.css");
36+
@import url("@mantine/core/styles/Checkbox.css");
37+
@import url("@mantine/core/styles/Chip.css");
38+
@import url("@mantine/core/styles/Code.css");
39+
@import url("@mantine/core/styles/ColorInput.css");
40+
@import url("@mantine/core/styles/ColorPicker.css");
41+
@import url("@mantine/core/styles/ColorSwatch.css");
42+
@import url("@mantine/core/styles/Combobox.css");
43+
@import url("@mantine/core/styles/Container.css");
44+
@import url("@mantine/core/styles/Dialog.css");
45+
@import url("@mantine/core/styles/Divider.css");
46+
@import url("@mantine/core/styles/Drawer.css");
47+
@import url("@mantine/core/styles/Fieldset.css");
48+
@import url("@mantine/core/styles/Grid.css");
49+
@import url("@mantine/core/styles/Image.css");
50+
@import url("@mantine/core/styles/Indicator.css");
51+
@import url("@mantine/core/styles/InlineInput.css");
52+
@import url("@mantine/core/styles/Kbd.css");
53+
@import url("@mantine/core/styles/List.css");
54+
@import url("@mantine/core/styles/LoadingOverlay.css");
55+
@import url("@mantine/core/styles/Mark.css");
56+
@import url("@mantine/core/styles/Menu.css");
57+
@import url("@mantine/core/styles/Modal.css");
58+
@import url("@mantine/core/styles/NavLink.css");
59+
@import url("@mantine/core/styles/Notification.css");
60+
@import url("@mantine/core/styles/NumberInput.css");
61+
@import url("@mantine/core/styles/Pagination.css");
62+
@import url("@mantine/core/styles/Pill.css");
63+
@import url("@mantine/core/styles/PasswordInput.css");
64+
@import url("@mantine/core/styles/PillsInput.css");
65+
@import url("@mantine/core/styles/PinInput.css");
66+
@import url("@mantine/core/styles/Progress.css");
67+
@import url("@mantine/core/styles/Radio.css");
68+
@import url("@mantine/core/styles/Rating.css");
69+
@import url("@mantine/core/styles/RingProgress.css");
70+
@import url("@mantine/core/styles/SegmentedControl.css");
71+
@import url("@mantine/core/styles/SimpleGrid.css");
72+
@import url("@mantine/core/styles/Skeleton.css");
73+
@import url("@mantine/core/styles/Slider.css");
74+
@import url("@mantine/core/styles/Spoiler.css");
75+
@import url("@mantine/core/styles/Stack.css");
76+
@import url("@mantine/core/styles/Stepper.css");
77+
@import url("@mantine/core/styles/Switch.css");
78+
@import url("@mantine/core/styles/Table.css");
79+
@import url("@mantine/core/styles/Tabs.css");
80+
@import url("@mantine/core/styles/Text.css");
81+
@import url("@mantine/core/styles/ThemeIcon.css");
82+
@import url("@mantine/core/styles/Timeline.css");
83+
@import url("@mantine/core/styles/Title.css");
84+
@import url("@mantine/core/styles/Tooltip.css");
85+
@import url("@mantine/core/styles/TypographyStylesProvider.css");
86+
87+
/* Mantine global styles, scoped to bn-container */
88+
/* Based on @mantine/core/styles/global.css
89+
(src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css)
90+
but with styles set on `body` and `html` instead set on `bn-container`, as
91+
well as other minor changes. */
92+
.bn-container *, .bn-container :after, .bn-container :before {
93+
box-sizing: border-box
94+
}
95+
96+
.bn-container button,
97+
.bn-container select {
98+
text-transform: none
99+
}
100+
101+
@media screen and (max-device-width: 500px) {
102+
.bn-container {
103+
-webkit-text-size-adjust: 100%
104+
}
105+
}
106+
107+
@media (prefers-reduced-motion: reduce) {
108+
.bn-container [data-respect-reduced-motion] [data-reduce-motion] {
109+
animation: none;
110+
transition: none
111+
}
112+
}
113+
114+
.bn-container [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-container [data-mantine-color-scheme=light] .mantine-light-hidden {
115+
display: none
116+
}
117+
118+
.bn-container .mantine-focus-auto:focus-visible {
119+
outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
120+
outline-offset: calc(.125rem * var(--mantine-scale))
121+
}
122+
123+
.bn-container .mantine-focus-always:focus {
124+
outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
125+
outline-offset: calc(.125rem * var(--mantine-scale))
126+
}
127+
128+
.bn-container .mantine-focus-never:focus {
129+
outline: none
130+
}
131+
132+
.bn-container .mantine-active:active {
133+
transform: translateY(calc(.0625rem * var(--mantine-scale)))
134+
}
135+
136+
.bn-container[dir=rtl] .mantine-rotate-rtl {
137+
transform: rotate(180deg)
138+
}

‎packages/react/src/editor/styles.css

+18-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url("@mantine/core/styles.css");
1+
@import url("./mantineStyles.css");
22
@import url("@blocknote/core/style.css");
33

44
/* Default theme params */
@@ -242,54 +242,71 @@
242242
[data-text-color="gray"] {
243243
color: var(--bn-colors-highlights-gray-text);
244244
}
245+
245246
[data-text-color="brown"] {
246247
color: var(--bn-colors-highlights-brown-text);
247248
}
249+
248250
[data-text-color="red"] {
249251
color: var(--bn-colors-highlights-red-text);
250252
}
253+
251254
[data-text-color="orange"] {
252255
color: var(--bn-colors-highlights-orange-text);
253256
}
257+
254258
[data-text-color="yellow"] {
255259
color: var(--bn-colors-highlights-yellow-text);
256260
}
261+
257262
[data-text-color="green"] {
258263
color: var(--bn-colors-highlights-green-text);
259264
}
265+
260266
[data-text-color="blue"] {
261267
color: var(--bn-colors-highlights-blue-text);
262268
}
269+
263270
[data-text-color="purple"] {
264271
color: var(--bn-colors-highlights-purple-text);
265272
}
273+
266274
[data-text-color="pink"] {
267275
color: var(--bn-colors-highlights-pink-text);
268276
}
277+
269278
[data-background-color="gray"] {
270279
background-color: var(--bn-colors-highlights-gray-background);
271280
}
281+
272282
[data-background-color="brown"] {
273283
background-color: var(--bn-colors-highlights-brown-background);
274284
}
285+
275286
[data-background-color="red"] {
276287
background-color: var(--bn-colors-highlights-red-background);
277288
}
289+
278290
[data-background-color="orange"] {
279291
background-color: var(--bn-colors-highlights-orange-background);
280292
}
293+
281294
[data-background-color="yellow"] {
282295
background-color: var(--bn-colors-highlights-yellow-background);
283296
}
297+
284298
[data-background-color="green"] {
285299
background-color: var(--bn-colors-highlights-green-background);
286300
}
301+
287302
[data-background-color="blue"] {
288303
background-color: var(--bn-colors-highlights-blue-background);
289304
}
305+
290306
[data-background-color="purple"] {
291307
background-color: var(--bn-colors-highlights-purple-background);
292308
}
309+
293310
[data-background-color="pink"] {
294311
background-color: var(--bn-colors-highlights-pink-background);
295312
}

‎packages/website/docs/.vitepress/theme/components/Examples/BlockNote/ReactBlockNote.module.css

+21
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,24 @@
22
background: transparent !important;
33
height: 500px;
44
}
5+
6+
/* From Vitepress base styles, to overwrite Mantine globals */
7+
body {
8+
margin: 0;
9+
width: 100%;
10+
min-width: 320px;
11+
min-height: 100vh;
12+
line-height: 24px;
13+
font-family: var(--vp-font-family-base);
14+
font-size: 16px;
15+
font-weight: 400;
16+
color: var(--vp-c-text-1);
17+
background-color: var(--vp-c-bg);
18+
direction: ltr;
19+
font-synthesis: style;
20+
text-rendering: optimizeLegibility;
21+
-webkit-font-smoothing: antialiased;
22+
-moz-osx-font-smoothing: grayscale;
23+
}
24+
25+

‎packages/website/docs/demoUtils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,5 @@ export const getStyles = (isDark: Ref<boolean>): string => `body {
1414
-webkit-tap-highlight-color: transparent;
1515
-webkit-touch-callout: none;
1616
17-
background-color: ${isDark ? "#151515" : "white"};
17+
background-color: ${isDark ? "#151515" : "white"} !important;
1818
}`;

0 commit comments

Comments
 (0)