@blocknote/mantine 0.14.6 → 0.15.0

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1720035573115,"assets":[{"name":"blocknote-mantine.umd.cjs","size":30335},{"name":"blocknote-mantine.umd.cjs.map","size":354186}],"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":44073,"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/suggestionMenu/SuggestionMenu.tsx","size":314,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuEmptyItem.tsx","size":352,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuItem.tsx","size":1806,"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/style.css","size":17,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":3405,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":2536,"chunks":["ec22802"]}]}
+{"builtAt":1721046970849,"assets":[{"name":"blocknote-mantine.umd.cjs","size":31449},{"name":"blocknote-mantine.umd.cjs.map","size":359785}],"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":44073,"chunks":["ec22802"]},{"name":"../../node_modules/react/jsx-runtime.js","size":225,"chunks":["ec22802"]},{"name":"./src/BlockNoteTheme.ts","size":2185,"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":792,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx","size":392,"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/suggestionMenu/SuggestionMenu.tsx","size":314,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuEmptyItem.tsx","size":352,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuItem.tsx","size":1806,"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/form/TextInput.tsx","size":582,"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/style.css","size":17,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":3405,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":2710,"chunks":["ec22802"]}]}

package/package.json

@@ -6,7 +6,7 @@
     "*.css"
   ],
   "license": "MPL-2.0",
-  "version": "0.14.6",
+  "version": "0.15.0",
   "files": [
     "dist",
     "types",
@@ -51,8 +51,8 @@
     "clean": "rimraf dist && rimraf types"
   },
   "dependencies": {
-    "@blocknote/core": "^0.14.5",
-    "@blocknote/react": "^0.14.6",
+    "@blocknote/core": "^0.15.0",
+    "@blocknote/react": "^0.15.0",
     "@mantine/core": "^7.10.1",
     "@mantine/hooks": "^7.10.1",
     "@mantine/utils": "^6.0.21",
@@ -86,5 +86,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "6e2a3326c56573a35039433fcee7c0d63bb5ef64"
+  "gitHead": "acd5683d0b1dca70013e16ce360ebc9fd6f50716"
 }

package/src/index.tsx

@@ -19,7 +19,10 @@ import {
   applyBlockNoteCSSVariablesFromTheme,
   removeBlockNoteCSSVariables,
 } from "./BlockNoteTheme";
-import { TextInput } from "./form/TextInput";
+import { GridSuggestionMenu } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenu";
+import { GridSuggestionMenuEmptyItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem";
+import { GridSuggestionMenuItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem";
+import { GridSuggestionMenuLoader } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader";
 import {
   Menu,
   MenuDivider,
@@ -42,10 +45,10 @@ import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem";
 import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel";
 import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader";
 import { TableHandle } from "./tableHandle/TableHandle";
+import { TextInput } from "./form/TextInput";
 import { Toolbar } from "./toolbar/Toolbar";
 import { ToolbarButton } from "./toolbar/ToolbarButton";
 import { ToolbarSelect } from "./toolbar/ToolbarSelect";
-
 import "./style.css";
 
 export * from "./BlockNoteTheme";
@@ -64,6 +67,12 @@ export const components: Components = {
     TabPanel: PanelTab,
     TextInput: PanelTextInput,
   },
+  GridSuggestionMenu: {
+    Root: GridSuggestionMenu,
+    Item: GridSuggestionMenuItem,
+    EmptyItem: GridSuggestionMenuEmptyItem,
+    Loader: GridSuggestionMenuLoader,
+  },
   LinkToolbar: {
     Root: Toolbar,
     Button: ToolbarButton,

package/src/style.css

@@ -299,6 +299,7 @@
   box-shadow: var(--bn-shadow-medium);
   box-sizing: border-box;
   color: var(--bn-colors-menu-text);
+  height: fit-content;
   overflow-y: auto;
   padding: 2px;
 }
@@ -362,6 +363,52 @@
   background-color: var(--bn-colors-side-menu);
 }
 
+.bn-mantine .bn-grid-suggestion-menu {
+  background: var(--bn-colors-menu-background);
+  border-radius: var(--bn-border-radius-large);
+  box-shadow: var(--bn-shadow-medium);
+  display: grid;
+  gap: 7px;
+  height: fit-content;
+  justify-items: center;
+  max-height: min(500px, 100%);
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.bn-mantine .bn-grid-suggestion-menu-item {
+  align-items: center;
+  border-radius: var(--bn-border-radius-large);
+  cursor: pointer;
+  display: flex;
+  font-size: 24px;
+  height: 32px;
+  justify-content: center;
+  margin: 2px;
+  padding: 4px;
+  width: 32px;
+}
+
+.bn-mantine .bn-grid-suggestion-menu-item[aria-selected="true"],
+.bn-mantine .bn-grid-suggestion-menu-item:hover {
+  background-color: var(--bn-colors-hovered-background);
+}
+
+.bn-mantine .bn-grid-suggestion-menu-empty-item,
+.bn-mantine .bn-grid-suggestion-menu-loader{
+  align-items: center;
+  color: var(--bn-colors-menu-text);
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  height: 32px;
+  justify-content: center;
+}
+
+.bn-mantine .bn-grid-suggestion-menu-loader span {
+  background-color: var(--bn-colors-side-menu);
+}
+
 /* Side Menu styling */
 .bn-mantine .bn-side-menu {
   background-color: transparent;

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx

@@ -0,0 +1,23 @@
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const GridSuggestionMenu = forwardRef<
+  HTMLDivElement,
+  ComponentProps["GridSuggestionMenu"]["Root"]
+>((props, ref) => {
+  const { className, children, id, columns, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div
+      className={className}
+      style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` } as any}
+      ref={ref}
+      id={id}
+      role="grid">
+      {children}
+    </div>
+  );
+});

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx

@@ -0,0 +1,25 @@
+import { Group as MantineGroup } from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const GridSuggestionMenuEmptyItem = forwardRef<
+  HTMLDivElement,
+  ComponentProps["GridSuggestionMenu"]["EmptyItem"]
+>((props, ref) => {
+  const { className, children, columns, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <MantineGroup
+      className={className}
+      style={{ gridColumn: `1 / ${columns + 1}` }}
+      ref={ref}>
+      <MantineGroup className="bn-mt-suggestion-menu-item-title">
+        {children}
+      </MantineGroup>
+    </MantineGroup>
+  );
+});

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx

@@ -0,0 +1,42 @@
+import { mergeRefs } from "@mantine/hooks";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps, elementOverflow } from "@blocknote/react";
+import { forwardRef, useEffect, useRef } from "react";
+
+export const GridSuggestionMenuItem = forwardRef<
+  HTMLDivElement,
+  ComponentProps["GridSuggestionMenu"]["Item"]
+>((props, ref) => {
+  const { className, isSelected, onClick, item, id, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!itemRef.current || !isSelected) {
+      return;
+    }
+
+    const overflow = elementOverflow(itemRef.current);
+
+    if (overflow === "top") {
+      itemRef.current.scrollIntoView(true);
+    } else if (overflow === "bottom") {
+      itemRef.current.scrollIntoView(false);
+    }
+  }, [isSelected]);
+
+  return (
+    <div
+      className={className}
+      ref={mergeRefs(ref, itemRef)}
+      id={id}
+      role="option"
+      onClick={onClick}
+      aria-selected={isSelected || undefined}>
+      {item.icon}
+    </div>
+  );
+});

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx

@@ -0,0 +1,28 @@
+import { Loader as MantineLoader } from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const GridSuggestionMenuLoader = forwardRef<
+  HTMLDivElement,
+  ComponentProps["GridSuggestionMenu"]["Loader"]
+>((props, ref) => {
+  const {
+    className,
+    children, // unused, using "dots" instead
+    columns,
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <MantineLoader
+      className={className}
+      style={{ gridColumn: `1 / ${columns + 1}` }}
+      type="dots"
+      ref={ref}
+    />
+  );
+});

package/types/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const GridSuggestionMenu: import("react").ForwardRefExoticComponent<{
+    id: string;
+    columns: number;
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const GridSuggestionMenuEmptyItem: import("react").ForwardRefExoticComponent<{
+    columns: number;
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const GridSuggestionMenuItem: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    id: string;
+    isSelected: boolean;
+    onClick: () => void;
+    item: import("@blocknote/react").DefaultReactGridSuggestionItem;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const GridSuggestionMenuLoader: import("react").ForwardRefExoticComponent<{
+    columns: number;
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;