@blocknote/mantine 0.14.0 → 0.14.2

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1717710258234,"assets":[{"name":"blocknote-mantine.umd.cjs","size":29673},{"name":"blocknote-mantine.umd.cjs.map","size":351751}],"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":43104,"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":1402,"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":2464,"chunks":["ec22802"]}]}
+{"builtAt":1719257230545,"assets":[{"name":"blocknote-mantine.umd.cjs","size":30426},{"name":"blocknote-mantine.umd.cjs.map","size":354224}],"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":2547,"chunks":["ec22802"]}]}

package/package.json

@@ -6,7 +6,7 @@
     "*.css"
   ],
   "license": "MPL-2.0",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "files": [
     "dist",
     "types",
@@ -51,10 +51,10 @@
     "clean": "rimraf dist && rimraf types"
   },
   "dependencies": {
-    "@blocknote/core": "^0.14.0",
-    "@blocknote/react": "^0.14.0",
-    "@mantine/core": "^7.5.0",
-    "@mantine/hooks": "^7.5.0",
+    "@blocknote/core": "^0.14.2",
+    "@blocknote/react": "^0.14.2",
+    "@mantine/core": "^7.10.1",
+    "@mantine/hooks": "^7.10.1",
     "@mantine/utils": "^6.0.21",
     "react": "^18",
     "react-dom": "^18",
@@ -87,5 +87,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "51cf600ac354d1fe76c207ec5726c9cd365f06a3"
+  "gitHead": "edfb6e84dbcefc26feb5045bd9a6351b05aefdd8"
 }

package/src/index.tsx

@@ -1,4 +1,9 @@
-import { BlockSchema, InlineContentSchema, StyleSchema } from "@blocknote/core";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  mergeCSSClasses,
+  StyleSchema,
+} from "@blocknote/core";
 import {
   BlockNoteViewRaw,
   Components,
@@ -122,7 +127,7 @@ export const BlockNoteView = <
         };
   }
 ) => {
-  const { theme, ...rest } = props;
+  const { className, theme, ...rest } = props;
 
   const existingContext = useBlockNoteContext();
   const systemColorScheme = usePrefersColorScheme();
@@ -160,12 +165,13 @@ export const BlockNoteView = <
       {/* as proposed here:  https://github.com/orgs/mantinedev/discussions/5685 */}
       <MantineProvider
         theme={mantineTheme}
-        cssVariablesSelector=".bn-container"
+        cssVariablesSelector=".bn-mantine"
         // This gets the element to set `data-mantine-color-scheme` on. Since we
         // don't need this attribute (we use our own theming API), we return
         // undefined here.
         getRootElement={() => undefined}>
         <BlockNoteViewRaw
+          className={mergeCSSClasses("bn-mantine", className || "")}
           theme={typeof theme === "object" ? undefined : theme}
           {...rest}
           ref={ref}

package/src/mantineStyles.css

@@ -89,50 +89,50 @@
  (src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css)
  but with styles set on `body` and `html` instead set on `bn-container`, as
  well as other minor changes. */
-.bn-container *, .bn-container :after, .bn-container :before {
+.bn-mantine *, .bn-mantine :after, .bn-mantine :before {
     box-sizing: border-box
 }
 
-.bn-container button,
-.bn-container select {
+.bn-mantine button,
+.bn-mantine select {
     text-transform: none
 }
 
 @media screen and (max-device-width: 500px) {
-    .bn-container {
+    .bn-mantine {
         -webkit-text-size-adjust: 100%
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .bn-container [data-respect-reduced-motion] [data-reduce-motion] {
+    .bn-mantine [data-respect-reduced-motion] [data-reduce-motion] {
         animation: none;
         transition: none
     }
 }
 
-.bn-container [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-container [data-mantine-color-scheme=light] .mantine-light-hidden {
+.bn-mantine [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-mantine [data-mantine-color-scheme=light] .mantine-light-hidden {
     display: none
 }
 
-.bn-container .mantine-focus-auto:focus-visible {
+.bn-mantine .mantine-focus-auto:focus-visible {
     outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
     outline-offset: calc(.125rem * var(--mantine-scale))
 }
 
-.bn-container .mantine-focus-always:focus {
+.bn-mantine .mantine-focus-always:focus {
     outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
     outline-offset: calc(.125rem * var(--mantine-scale))
 }
 
-.bn-container .mantine-focus-never:focus {
+.bn-mantine .mantine-focus-never:focus {
     outline: none
 }
 
-.bn-container .mantine-active:active {
+.bn-mantine .mantine-active:active {
     transform: translateY(calc(.0625rem * var(--mantine-scale)))
 }
 
-.bn-container[dir=rtl] .mantine-rotate-rtl {
+.bn-mantine[dir=rtl] .mantine-rotate-rtl {
     transform: rotate(180deg)
 }

package/src/style.css

@@ -4,13 +4,13 @@
 /* Mantine base styles*/
 
 /* Mantine Badge component base styles */
-.bn-container .mantine-Badge-root {
+.mantine-Badge-root {
   background-color: var(--bn-colors-tooltip-background);
   color: var(--bn-colors-tooltip-text);
 }
 
 /* Mantine FileInput component base styles */
-.bn-container .mantine-FileInput-input {
+.mantine-FileInput-input {
   align-items: center;
   background-color: var(--bn-colors-menu-background);
   border: none;
@@ -21,22 +21,22 @@
   justify-content: center;
 }
 
-.bn-container .mantine-FileInput-input:hover {
+.mantine-FileInput-input:hover {
   background-color: var(--bn-colors-hovered-background);
 }
 
-.bn-container .mantine-FileInput-wrapper {
+.mantine-FileInput-wrapper {
   border: solid var(--bn-colors-border) 1px;
   border-radius: 4px;
 }
 
-.bn-container .mantine-InputPlaceholder-placeholder {
+.mantine-InputPlaceholder-placeholder {
   color: var(--bn-colors-menu-text);
   font-weight: 600;
 }
 
 /* Mantine Menu component base styles */
-.bn-container .mantine-Menu-dropdown {
+.mantine-Menu-dropdown {
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-medium);
@@ -47,27 +47,27 @@
   overflow: auto;
 }
 
-.bn-container .mantine-Menu-label {
+.mantine-Menu-label {
   background-color: var(--bn-colors-menu-background);
   color: var(--bn-colors-menu-text);
 }
 
-.bn-container .mantine-Menu-item {
+.mantine-Menu-item {
   background-color: var(--bn-colors-menu-background);
   border: none;
   border-radius: var(--bn-border-radius-small);
   color: var(--bn-colors-menu-text);
 }
 
-.bn-container .mantine-Menu-item[aria-selected="true"],
-.bn-container .mantine-Menu-item:hover {
+.mantine-Menu-item[aria-selected="true"],
+.mantine-Menu-item:hover {
   background-color: var(--bn-colors-hovered-background);
   border: none;
   color: var(--bn-colors-hovered-text);
 }
 
 /* Mantine Popover component base styles */
-.bn-container .mantine-Popover-dropdown {
+.mantine-Popover-dropdown {
   background-color: transparent;
   border: none;
   border-radius: 0;
@@ -76,38 +76,38 @@
 }
 
 /* Mantine Tabs component base styles */
-.bn-container .mantine-Tabs-root {
+.mantine-Tabs-root {
   width: 100%;
   background-color: var(--bn-colors-menu-background);
 }
 
-.bn-container .mantine-Tabs-list:before {
+.mantine-Tabs-list:before {
   border-color: var(--bn-colors-hovered-background);
 }
 
-.bn-container .mantine-Tabs-tab {
+.mantine-Tabs-tab {
   color: var(--bn-colors-menu-text);
   border-color: var(--bn-colors-hovered-background);
 }
 
-.bn-container .mantine-Tabs-tab:hover {
+.mantine-Tabs-tab:hover {
   background-color: var(--bn-colors-hovered-background);
   border-color: var(--bn-colors-hovered-background);
   color: var(--bn-colors-hovered-text);
 }
 
-.bn-container .mantine-Tabs-tab[data-active],
-.bn-container .mantine-Tabs-tab[data-active]:hover {
+.mantine-Tabs-tab[data-active],
+.mantine-Tabs-tab[data-active]:hover {
   border-color: var(--bn-colors-menu-text);
   color: var(--bn-colors-menu-text);
 }
 
-.bn-container .mantine-Tabs-panel {
+.mantine-Tabs-panel {
   padding: 8px;
 }
 
 /* Mantine TextInput component base styles */
-.bn-container .mantine-TextInput-input {
+.mantine-TextInput-input {
   background-color: var(--bn-colors-menu-background);
   border: solid var(--bn-colors-border) 1px;
   border-radius: 4px;
@@ -116,7 +116,7 @@
 }
 
 /* Mantine Tooltip component base styles */
-.bn-container .mantine-Tooltip-tooltip {
+.mantine-Tooltip-tooltip {
   background-color: transparent;
   border: none;
   border-radius: 0;
@@ -127,12 +127,12 @@
 /* UI element styling */
 
 /* Select styling */
-.bn-select {
+.bn-mantine .bn-select {
   overflow: auto;
 }
 
 /* Toolbar styling */
-.bn-toolbar {
+.bn-mantine .bn-toolbar {
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-medium);
@@ -143,7 +143,7 @@
   width: fit-content;
 }
 
-.bn-toolbar:empty {
+.bn-mantine .bn-toolbar:empty {
   display: none;
 }
 
@@ -185,7 +185,7 @@
   background-color: var(--bn-colors-hovered-background);
 }
 
-.bn-container .bn-form-popover {
+.bn-mantine .bn-form-popover {
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-medium);
@@ -235,7 +235,7 @@
 /* Unfortunately necessary, as we can't use a Menu.Dropdown component on its
  own. */
 /* https://github.com/mantinedev/mantine/blob/e3e3bb834de1f2f75a27dbc757dc0a2fc6a6cba8/packages/%40mantine/core/src/components/Menu/Menu.module.css */
-.bn-suggestion-menu {
+.bn-mantine .bn-suggestion-menu {
   max-height: 100%;
   position: relative;
   box-shadow: var(--mantine-shadow-md);
@@ -245,7 +245,7 @@
   padding: 4px;
 }
 
-.bn-suggestion-menu-label {
+.bn-mantine .bn-suggestion-menu-label {
   color: var(--mantine-color-dimmed);
   font-weight: 500;
   font-size: var(--mantine-font-size-xs);
@@ -253,7 +253,7 @@
   cursor: default;
 }
 
-.bn-suggestion-menu-item {
+.bn-mantine .bn-suggestion-menu-item {
   font-size: var(--mantine-font-size-sm);
   width: 100%;
   padding: calc(var(--mantine-spacing-xs) / 1.5) var(--mantine-spacing-sm);
@@ -289,7 +289,7 @@
   }
 }
 
-.bn-suggestion-menu {
+.bn-mantine .bn-suggestion-menu {
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-medium);
@@ -300,13 +300,13 @@
   padding: 2px;
 }
 
-.bn-suggestion-menu-item {
+.bn-mantine .bn-suggestion-menu-item {
   cursor: pointer;
   height: 52px;
 }
 
-.bn-suggestion-menu-item[aria-selected="true"],
-.bn-suggestion-menu-item:hover {
+.bn-mantine .bn-suggestion-menu-item[aria-selected="true"],
+.bn-mantine .bn-suggestion-menu-item:hover {
   background-color: var(--bn-colors-hovered-background);
 }
 
@@ -322,7 +322,6 @@
 
 .bn-mt-suggestion-menu-item-body {
   align-items: stretch;
-  color: var(--bn-colors-menu-text);
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -331,6 +330,7 @@
 }
 
 .bn-mt-suggestion-menu-item-title {
+  color: var(--bn-colors-menu-text);
   line-height: 20px;
   font-weight: 500;
   font-size: 14px;
@@ -339,27 +339,28 @@
 }
 
 .bn-mt-suggestion-menu-item-subtitle {
+  color: var(--bn-colors-menu-text);
   line-height: 16px;
   font-size: 10px;
   margin: 0;
   padding: 0;
 }
 
-.bn-suggestion-menu-label {
+.bn-mantine .bn-suggestion-menu-label {
   color: var(--bn-colors-hovered-text);
 }
 
-.bn-suggestion-menu-loader {
+.bn-mantine .bn-suggestion-menu-loader {
   height: 20px;
   width: 100%;
 }
 
-.bn-suggestion-menu-loader span {
+.bn-mantine .bn-suggestion-menu-loader span {
   background-color: var(--bn-colors-side-menu);
 }
 
 /* Side Menu styling */
-.bn-side-menu {
+.bn-mantine .bn-side-menu {
   background-color: transparent;
   overflow: visible;
 }
@@ -385,7 +386,7 @@
   width: 22px;
 }
 
-.bn-side-menu > [draggable="true"] {
+.bn-mantine .bn-side-menu > [draggable="true"] {
   display: flex;
 }
 
@@ -396,7 +397,7 @@
 }
 
 /* Image Panel styling*/
-.bn-panel {
+.bn-mantine .bn-panel {
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-medium);
@@ -405,7 +406,7 @@
   width: 500px;
 }
 
-.bn-panel .bn-tab-panel {
+.bn-mantine .bn-panel .bn-tab-panel {
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -431,12 +432,12 @@
   background-color: var(--bn-colors-hovered-background);
 }
 
-.bn-panel.mantine-Text-root {
+.bn-panel .mantine-Text-root {
   text-align: center;
 }
 
 /* Table Handle styling */
-.bn-table-handle {
+.bn-mantine .bn-table-handle {
   align-items: center;
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
@@ -451,22 +452,22 @@
   padding: 0;
 }
 
-.bn-table-handle svg {
+.bn-mantine .bn-table-handle svg {
   margin-inline: -4px;
 }
 
-.bn-table-handle:hover,
-.bn-table-handle-dragging {
+.bn-mantine .bn-table-handle:hover,
+.bn-mantine .bn-table-handle-dragging {
   background-color: var(--bn-colors-hovered-background);
 }
 
 /* Drag Handle & Table Handle Menu styling */
-.bn-container .bn-drag-handle-menu {
+.bn-mantine .bn-drag-handle-menu {
   overflow: visible;
 }
 
 /* Tooltip styling */
-.bn-tooltip {
+.bn-mantine .bn-tooltip {
   background-color: var(--bn-colors-tooltip-background);
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-medium);
@@ -477,7 +478,7 @@
 }
 
 /* Additional menu styles */
-.bn-tick-space {
+.bn-mantine .bn-tick-space {
   padding: 0;
   width: 20px;
 }

package/src/suggestionMenu/SuggestionMenuEmptyItem.tsx

@@ -14,7 +14,7 @@ export const SuggestionMenuEmptyItem = forwardRef<
 
   return (
     <MantineGroup className={className} ref={ref}>
-      <MantineGroup className="bn-mt-suggestion-menu-item-label">
+      <MantineGroup className="bn-mt-suggestion-menu-item-title">
         {children}
       </MantineGroup>
     </MantineGroup>

package/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -4,10 +4,11 @@ import {
   Stack as MantineStack,
   Text as MantineText,
 } from "@mantine/core";
+import { mergeRefs } from "@mantine/hooks";
 
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
-import { forwardRef } from "react";
+import { ComponentProps, elementOverflow } from "@blocknote/react";
+import { forwardRef, useEffect, useRef } from "react";
 
 export const SuggestionMenuItem = forwardRef<
   HTMLDivElement,
@@ -17,11 +18,27 @@ export const SuggestionMenuItem = forwardRef<
 
   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 (
     <MantineGroup
       gap={0}
       className={className}
-      ref={ref}
+      ref={mergeRefs(ref, itemRef)}
       id={id}
       role="option"
       onClick={onClick}