@blocknote/mantine 0.17.1 → 0.18.1

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1729263496039,"assets":[{"name":"blocknote-mantine.umd.cjs","size":31424},{"name":"blocknote-mantine.umd.cjs.map","size":359899}],"chunks":[{"id":"ec22802","entry":true,"initial":true,"files":["blocknote-mantine.umd.cjs"],"names":["index"]}],"modules":[{"name":"../../node_modules/react/jsx-runtime.js?commonjs-module","size":31,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.production.min.js?commonjs-exports","size":40,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.production.min.js","size":1200,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.development.js?commonjs-exports","size":37,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.development.js","size":43843,"chunks":["ec22802"]},{"name":"../../node_modules/react/jsx-runtime.js","size":225,"chunks":["ec22802"]},{"name":"./src/BlockNoteTheme.ts","size":2185,"chunks":["ec22802"]},{"name":"./src/form/TextInput.tsx","size":582,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconBase.mjs","size":4014,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/hi/index.mjs","size":744,"chunks":["ec22802"]},{"name":"./src/menu/Menu.tsx","size":4155,"chunks":["ec22802"]},{"name":"./src/panel/Panel.tsx","size":1057,"chunks":["ec22802"]},{"name":"./src/panel/PanelButton.tsx","size":352,"chunks":["ec22802"]},{"name":"./src/panel/PanelFileInput.tsx","size":374,"chunks":["ec22802"]},{"name":"./src/panel/PanelTab.tsx","size":216,"chunks":["ec22802"]},{"name":"./src/panel/PanelTextInput.tsx","size":399,"chunks":["ec22802"]},{"name":"./src/popover/Popover.tsx","size":759,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenu.tsx","size":316,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenuButton.tsx","size":787,"chunks":["ec22802"]},{"name":"./src/style.css","size":0,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx","size":368,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx","size":450,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx","size":862,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx","size":392,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenu.tsx","size":314,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuEmptyItem.tsx","size":352,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuItem.tsx","size":1871,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLabel.tsx","size":234,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLoader.tsx","size":290,"chunks":["ec22802"]},{"name":"./src/tableHandle/TableHandle.tsx","size":459,"chunks":["ec22802"]},{"name":"./src/toolbar/Toolbar.tsx","size":569,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarButton.tsx","size":2278,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarSelect.tsx","size":1841,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":3405,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":2710,"chunks":["ec22802"]}]}
+{"builtAt":1730290275063,"assets":[{"name":"blocknote-mantine.umd.cjs","size":17681},{"name":"blocknote-mantine.umd.cjs.map","size":297195}],"chunks":[{"id":"ec22802","entry":true,"initial":true,"files":["blocknote-mantine.umd.cjs"],"names":["index"]}],"modules":[{"name":"./src/BlockNoteTheme.ts","size":2185,"chunks":["ec22802"]},{"name":"./src/form/TextInput.tsx","size":575,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconBase.mjs","size":4014,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/hi/index.mjs","size":744,"chunks":["ec22802"]},{"name":"./src/menu/Menu.tsx","size":4057,"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":738,"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/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/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/tableHandle/TableHandle.tsx","size":452,"chunks":["ec22802"]},{"name":"./src/tableHandle/ExtendButton.tsx","size":333,"chunks":["ec22802"]},{"name":"./src/toolbar/Toolbar.tsx","size":562,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarButton.tsx","size":2229,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarSelect.tsx","size":1785,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":3405,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":2700,"chunks":["ec22802"]}]}

package/package.json

@@ -6,7 +6,7 @@
     "*.css"
   ],
   "license": "MPL-2.0",
-  "version": "0.17.1",
+  "version": "0.18.1",
   "files": [
     "dist",
     "types",
@@ -51,13 +51,11 @@
     "clean": "rimraf dist && rimraf types"
   },
   "dependencies": {
-    "@blocknote/core": "^0.17.1",
-    "@blocknote/react": "^0.17.1",
+    "@blocknote/core": "^0.18.0",
+    "@blocknote/react": "^0.18.1",
     "@mantine/core": "^7.10.1",
     "@mantine/hooks": "^7.10.1",
     "@mantine/utils": "^6.0.21",
-    "react": "^18",
-    "react-dom": "^18",
     "react-icons": "^5.2.1"
   },
   "devDependencies": {
@@ -74,8 +72,8 @@
     "vite-plugin-externalize-deps": "^0.8.0"
   },
   "peerDependencies": {
-    "react": "^18",
-    "react-dom": "^18"
+    "react": "^18.0 || ^19.0 || >= 19.0.0-rc",
+    "react-dom": "^18.0 || ^19.0 || >= 19.0.0-rc"
   },
   "eslintConfig": {
     "extends": [
@@ -86,5 +84,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "8867e6411d6e698e667b7ac22697bcf76f763937"
+  "gitHead": "c66118d464ef240c531aa6f9d49706ec6aaa49f8"
 }

package/src/index.tsx

@@ -47,6 +47,7 @@ import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem.js";
 import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel.js";
 import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader.js";
 import { TableHandle } from "./tableHandle/TableHandle.js";
+import { ExtendButton } from "./tableHandle/ExtendButton.js";
 import { Toolbar } from "./toolbar/Toolbar.js";
 import { ToolbarButton } from "./toolbar/ToolbarButton.js";
 import { ToolbarSelect } from "./toolbar/ToolbarSelect.js";
@@ -90,6 +91,7 @@ export const components: Components = {
   },
   TableHandle: {
     Root: TableHandle,
+    ExtendButton: ExtendButton,
   },
   Generic: {
     Form: {

package/src/style.css

@@ -396,7 +396,7 @@
 }
 
 .bn-mantine .bn-grid-suggestion-menu-empty-item,
-.bn-mantine .bn-grid-suggestion-menu-loader{
+.bn-mantine .bn-grid-suggestion-menu-loader {
   align-items: center;
   color: var(--bn-colors-menu-text);
   display: flex;
@@ -488,7 +488,8 @@
 }
 
 /* Table Handle styling */
-.bn-mantine .bn-table-handle {
+.bn-mantine .bn-table-handle,
+.bn-mantine .bn-extend-button {
   align-items: center;
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
@@ -508,10 +509,26 @@
 }
 
 .bn-mantine .bn-table-handle:hover,
-.bn-mantine .bn-table-handle-dragging {
+.bn-mantine .bn-table-handle-dragging,
+.bn-mantine .bn-extend-button:hover,
+.bn-mantine .bn-extend-button-editing {
   background-color: var(--bn-colors-hovered-background);
 }
 
+.bn-mantine .bn-extend-button-add-remove-columns {
+  height: 100%;
+  width: 18px;
+  margin-left: 4px;
+  cursor: col-resize;
+}
+
+.bn-mantine .bn-extend-button-add-remove-rows {
+  height: 18px;
+  width: 100%;
+  margin-top: 4px;
+  cursor: row-resize;
+}
+
 /* Drag Handle & Table Handle Menu styling */
 .bn-mantine .bn-drag-handle-menu {
   overflow: visible;

package/src/tableHandle/ExtendButton.tsx

@@ -0,0 +1,27 @@
+import { Button as MantineButton } from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const ExtendButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["TableHandle"]["ExtendButton"]
+>((props, ref) => {
+  const { children, className, onMouseDown, onClick, ...rest } = props;
+
+  // false, because rest props can be added by mantine when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
+  return (
+    <MantineButton
+      className={className}
+      ref={ref}
+      onMouseDown={onMouseDown}
+      onClick={onClick}
+      {...rest}>
+      {children}
+    </MantineButton>
+  );
+});

package/types/src/tableHandle/ExtendButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const ExtendButton: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    onClick: (e: import("react").MouseEvent<Element, MouseEvent>) => void;
+    onMouseDown: (e: import("react").MouseEvent<Element, MouseEvent>) => void;
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;