@blocknote/mantine 0.30.1 → 0.31.1

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1747749777429,"assets":[{"name":"blocknote-mantine.cjs","size":20384},{"name":"blocknote-mantine.cjs.map","size":312332}],"chunks":[{"id":"ec22802","entry":true,"initial":true,"files":["blocknote-mantine.cjs"],"names":["blocknote-mantine"]}],"modules":[{"name":"./src/BlockNoteTheme.ts","size":2185,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarButton.tsx","size":2674,"chunks":["ec22802"]},{"name":"./src/badge/Badge.tsx","size":1437,"chunks":["ec22802"]},{"name":"./src/comments/Card.tsx","size":1403,"chunks":["ec22802"]},{"name":"./src/comments/Comment.tsx","size":2082,"chunks":["ec22802"]},{"name":"./src/comments/Editor.tsx","size":965,"chunks":["ec22802"]},{"name":"./src/form/TextInput.tsx","size":575,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/lib/iconBase.mjs","size":4003,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/hi/index.mjs","size":720,"chunks":["ec22802"]},{"name":"./src/menu/Menu.tsx","size":4095,"chunks":["ec22802"]},{"name":"./src/menu/Button.tsx","size":765,"chunks":["ec22802"]},{"name":"./src/panel/Panel.tsx","size":1015,"chunks":["ec22802"]},{"name":"./src/panel/PanelButton.tsx","size":345,"chunks":["ec22802"]},{"name":"./src/panel/PanelFileInput.tsx","size":367,"chunks":["ec22802"]},{"name":"./src/panel/PanelTab.tsx","size":209,"chunks":["ec22802"]},{"name":"./src/panel/PanelTextInput.tsx","size":392,"chunks":["ec22802"]},{"name":"./src/popover/Popover.tsx","size":679,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenu.tsx","size":309,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenuButton.tsx","size":773,"chunks":["ec22802"]},{"name":"./src/style.css","size":0,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenu.tsx","size":307,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuEmptyItem.tsx","size":338,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuItem.tsx","size":1822,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLabel.tsx","size":227,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLoader.tsx","size":283,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx","size":361,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx","size":436,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx","size":855,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx","size":385,"chunks":["ec22802"]},{"name":"./src/tableHandle/ExtendButton.tsx","size":333,"chunks":["ec22802"]},{"name":"./src/tableHandle/TableHandle.tsx","size":452,"chunks":["ec22802"]},{"name":"./src/toolbar/Toolbar.tsx","size":666,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarSelect.tsx","size":1785,"chunks":["ec22802"]},{"name":"./src/components.tsx","size":1540,"chunks":["ec22802"]},{"name":"./src/BlockNoteView.tsx","size":1638,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":2023,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":0,"chunks":["ec22802"]}]}
+{"builtAt":1747989984386,"assets":[{"name":"blocknote-mantine.cjs","size":20586},{"name":"blocknote-mantine.cjs.map","size":312750}],"chunks":[{"id":"ec22802","entry":true,"initial":true,"files":["blocknote-mantine.cjs"],"names":["blocknote-mantine"]}],"modules":[{"name":"./src/BlockNoteTheme.ts","size":2185,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarButton.tsx","size":2674,"chunks":["ec22802"]},{"name":"./src/badge/Badge.tsx","size":1437,"chunks":["ec22802"]},{"name":"./src/comments/Card.tsx","size":1403,"chunks":["ec22802"]},{"name":"./src/comments/Comment.tsx","size":2082,"chunks":["ec22802"]},{"name":"./src/comments/Editor.tsx","size":965,"chunks":["ec22802"]},{"name":"./src/form/TextInput.tsx","size":805,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/lib/iconBase.mjs","size":4003,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/hi/index.mjs","size":720,"chunks":["ec22802"]},{"name":"./src/menu/Menu.tsx","size":4095,"chunks":["ec22802"]},{"name":"./src/menu/Button.tsx","size":765,"chunks":["ec22802"]},{"name":"./src/panel/Panel.tsx","size":1015,"chunks":["ec22802"]},{"name":"./src/panel/PanelButton.tsx","size":345,"chunks":["ec22802"]},{"name":"./src/panel/PanelFileInput.tsx","size":367,"chunks":["ec22802"]},{"name":"./src/panel/PanelTab.tsx","size":209,"chunks":["ec22802"]},{"name":"./src/panel/PanelTextInput.tsx","size":392,"chunks":["ec22802"]},{"name":"./src/popover/Popover.tsx","size":679,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenu.tsx","size":309,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenuButton.tsx","size":773,"chunks":["ec22802"]},{"name":"./src/style.css","size":0,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenu.tsx","size":307,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuEmptyItem.tsx","size":338,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuItem.tsx","size":1911,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLabel.tsx","size":227,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLoader.tsx","size":233,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx","size":361,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx","size":436,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx","size":855,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx","size":385,"chunks":["ec22802"]},{"name":"./src/tableHandle/ExtendButton.tsx","size":333,"chunks":["ec22802"]},{"name":"./src/tableHandle/TableHandle.tsx","size":452,"chunks":["ec22802"]},{"name":"./src/toolbar/Toolbar.tsx","size":666,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarSelect.tsx","size":1785,"chunks":["ec22802"]},{"name":"./src/components.tsx","size":1540,"chunks":["ec22802"]},{"name":"./src/BlockNoteView.tsx","size":1638,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":2023,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":0,"chunks":["ec22802"]}]}

package/package.json

@@ -11,7 +11,7 @@
     "directory": "packages/mantine"
   },
   "license": "MPL-2.0",
-  "version": "0.30.1",
+  "version": "0.31.1",
   "files": [
     "dist",
     "types",
@@ -49,8 +49,8 @@
     }
   },
   "dependencies": {
-    "@blocknote/core": "0.30.1",
-    "@blocknote/react": "0.30.1",
+    "@blocknote/core": "0.31.1",
+    "@blocknote/react": "0.31.1",
     "@mantine/core": "^7.10.1",
     "@mantine/hooks": "^7.10.1",
     "@mantine/utils": "^6.0.21",
@@ -74,7 +74,7 @@
   },
   "eslintConfig": {
     "extends": [
-      "../../.eslintrc.js"
+      "../../.eslintrc.json"
     ]
   },
   "scripts": {

package/src/form/TextInput.tsx

@@ -1,6 +1,6 @@
 import { TextInput as MantineTextInput } from "@mantine/core";
 
-import { assertEmpty } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -12,13 +12,17 @@ export const TextInput = forwardRef<
     className,
     name,
     label,
+    variant,
     icon,
     value,
     autoFocus,
     placeholder,
+    disabled,
     onKeyDown,
     onChange,
     onSubmit,
+    autoComplete,
+    rightSection,
     ...rest
   } = props;
 
@@ -27,7 +31,10 @@ export const TextInput = forwardRef<
   return (
     <MantineTextInput
       size={"xs"}
-      className={className}
+      className={mergeCSSClasses(
+        className || "",
+        variant === "large" ? "bn-mt-input-large" : ""
+      )}
       ref={ref}
       name={name}
       label={label}
@@ -35,10 +42,13 @@ export const TextInput = forwardRef<
       value={value}
       autoFocus={autoFocus}
       data-autofocus={autoFocus ? "true" : undefined}
+      rightSection={rightSection}
       placeholder={placeholder}
+      disabled={disabled}
       onKeyDown={onKeyDown}
       onChange={onChange}
       onSubmit={onSubmit}
+      autoComplete={autoComplete}
     />
   );
 });

package/src/style.css

@@ -118,6 +118,12 @@
   height: 32px;
 }
 
+.bn-mantine .bn-mt-input-large .mantine-TextInput-input {
+  border: none;
+  font-size: 14px;
+  height: 52px;
+}
+
 /* Mantine Tooltip component base styles */
 .bn-mantine .mantine-Tooltip-tooltip {
   background-color: transparent;
@@ -324,6 +330,12 @@
   height: 52px;
 }
 
+.bn-mantine .bn-suggestion-menu-item-small {
+  height: fit-content;
+  /* Made to match with labels */
+  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm);
+}
+
 .bn-mantine .bn-suggestion-menu-item[aria-selected="true"],
 .bn-mantine .bn-suggestion-menu-item:hover {
   background-color: var(--bn-colors-hovered-background);
@@ -339,6 +351,19 @@
   padding: 8px;
 }
 
+.bn-suggestion-menu-item-small
+  .bn-mt-suggestion-menu-item-section[data-position="left"] {
+  background-color: transparent;
+  padding: 0;
+}
+
+.bn-suggestion-menu-item-small
+  .bn-mt-suggestion-menu-item-section[data-position="left"]
+  svg {
+  height: 14px;
+  width: 14px;
+}
+
 .bn-mt-suggestion-menu-item-body {
   align-items: stretch;
   display: flex;
@@ -357,6 +382,10 @@
   padding: 0;
 }
 
+.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-title {
+  font-size: 12px;
+}
+
 .bn-mt-suggestion-menu-item-subtitle {
   color: var(--bn-colors-menu-text);
   line-height: 16px;
@@ -365,6 +394,10 @@
   padding: 0;
 }
 
+.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-subtitle {
+  display: none;
+}
+
 .bn-mantine .bn-suggestion-menu-label {
   color: var(--bn-colors-hovered-text);
 }
@@ -732,6 +765,30 @@
   justify-content: center;
 }
 
+/* Combobox styling */
+.bn-mantine .bn-combobox-input,
+.bn-mantine .bn-combobox-items:not(:empty) {
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  box-shadow: var(--bn-shadow-medium);
+  color: var(--bn-colors-menu-text);
+  gap: 4px;
+  min-width: 145px;
+  padding: 2px;
+}
+
+.bn-mantine .bn-combobox-input .bn-combobox-icon,
+.bn-mantine .bn-combobox-input .bn-combobox-right-section {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.bn-mantine .bn-combobox-input .bn-combobox-error {
+  color: var(--bn-colors-highlights-red-background);
+}
+
 /* We need to get rid of the checked icon - you can set the icon prop to an
 empty element (<></>), but even so Mantine leaves extra space for the icon, so
 we just don't display it in CSS instead. */

package/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -27,7 +27,7 @@ export const SuggestionMenuItem = forwardRef<
 
     const overflow = elementOverflow(
       itemRef.current,
-      document.querySelector(".bn-suggestion-menu")!,
+      document.querySelector(".bn-suggestion-menu, #ai-suggestion-menu")!, // TODO
     );
 
     if (overflow === "top") {
@@ -44,6 +44,7 @@ export const SuggestionMenuItem = forwardRef<
       ref={mergeRefs(ref, itemRef)}
       id={id}
       role="option"
+      onMouseDown={(event) => event.preventDefault()}
       onClick={onClick}
       aria-selected={isSelected || undefined}
     >

package/src/suggestionMenu/SuggestionMenuLoader.tsx

@@ -8,13 +8,11 @@ export const SuggestionMenuLoader = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Loader"]
 >((props, ref) => {
-  const {
-    className,
-    children, // unused, using "dots" instead
-    ...rest
-  } = props;
+  const { className, ...rest } = props;
 
   assertEmpty(rest);
 
-  return <MantineLoader className={className} type="dots" ref={ref} />;
+  return (
+    <MantineLoader className={className} type="dots" size={16} ref={ref} />
+  );
 });

package/src/toolbar/Toolbar.tsx

@@ -5,8 +5,7 @@ import { ComponentProps } from "@blocknote/react";
 import { mergeRefs, useFocusTrap, useFocusWithin } from "@mantine/hooks";
 import { forwardRef } from "react";
 
-type ToolbarProps = ComponentProps["FormattingToolbar"]["Root"] &
-  ComponentProps["LinkToolbar"]["Root"];
+type ToolbarProps = ComponentProps["Generic"]["Toolbar"]["Root"];
 
 export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
   (props, ref) => {

package/src/toolbar/ToolbarButton.tsx

@@ -26,8 +26,7 @@ export const TooltipContent = (props: {
   </MantineStack>
 );
 
-type ToolbarButtonProps = ComponentProps["FormattingToolbar"]["Button"] &
-  ComponentProps["LinkToolbar"]["Button"];
+type ToolbarButtonProps = ComponentProps["Generic"]["Toolbar"]["Button"];
 
 /**
  * Helper for basic buttons that show in the formatting toolbar.

package/types/src/form/TextInput.d.ts

@@ -2,11 +2,15 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<{
     className?: string;
     name: string;
     label?: string;
+    variant?: "default" | "large";
     icon: import("react").ReactNode;
+    rightSection?: import("react").ReactNode;
     autoFocus?: boolean;
-    placeholder: string;
+    placeholder?: string;
+    disabled?: boolean;
     value: string;
     onKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
     onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
     onSubmit?: () => void;
+    autoComplete?: import("react").HTMLInputAutoCompleteAttribute;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/types/src/suggestionMenu/SuggestionMenuItem.d.ts

@@ -3,5 +3,5 @@ export declare const SuggestionMenuItem: import("react").ForwardRefExoticCompone
     id: string;
     isSelected: boolean;
     onClick: () => void;
-    item: import("@blocknote/react").DefaultReactSuggestionItem;
+    item: Omit<import("@blocknote/react").DefaultReactSuggestionItem, "onItemClick">;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuLoader.d.ts

@@ -1,4 +1,3 @@
 export declare const SuggestionMenuLoader: import("react").ForwardRefExoticComponent<{
     className?: string;
-    children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;