@blocknote/mantine 0.14.1 → 0.14.3

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1718240408085,"assets":[{"name":"blocknote-mantine.umd.cjs","size":30368},{"name":"blocknote-mantine.umd.cjs.map","size":354058}],"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":2464,"chunks":["ec22802"]}]}
+{"builtAt":1720006030036,"assets":[{"name":"blocknote-mantine.umd.cjs","size":30426},{"name":"blocknote-mantine.umd.cjs.map","size":354229}],"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":2552,"chunks":["ec22802"]}]}

package/package.json

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

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,
@@ -7,7 +12,7 @@ import {
 } from "@blocknote/react";
 import { MantineProvider } from "@mantine/core";
 import { ComponentProps, useCallback } from "react";
-import usePrefersColorScheme from "use-prefers-color-scheme";
+import { usePrefersColorScheme } from "use-prefers-color-scheme";
 
 import {
   Theme,
@@ -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 {
+.bn-mantine .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 {
+.bn-mantine .mantine-FileInput-input {
   align-items: center;
   background-color: var(--bn-colors-menu-background);
   border: none;
@@ -18,25 +18,27 @@
   color: var(--bn-colors-menu-text);
   display: flex;
   flex-direction: row;
+  font-family: var(--bn-font-family);
   justify-content: center;
 }
 
-.bn-container .mantine-FileInput-input:hover {
+.bn-mantine .mantine-FileInput-input:hover {
   background-color: var(--bn-colors-hovered-background);
 }
 
-.bn-container .mantine-FileInput-wrapper {
+.bn-mantine .mantine-FileInput-wrapper {
   border: solid var(--bn-colors-border) 1px;
   border-radius: 4px;
 }
 
-.bn-container .mantine-InputPlaceholder-placeholder {
+.bn-mantine .mantine-InputPlaceholder-placeholder {
   color: var(--bn-colors-menu-text);
+  font-family: var(--bn-font-family);
   font-weight: 600;
 }
 
 /* Mantine Menu component base styles */
-.bn-container .mantine-Menu-dropdown {
+.bn-mantine .mantine-Menu-dropdown {
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-medium);
@@ -47,27 +49,27 @@
   overflow: auto;
 }
 
-.bn-container .mantine-Menu-label {
+.bn-mantine .mantine-Menu-label {
   background-color: var(--bn-colors-menu-background);
   color: var(--bn-colors-menu-text);
 }
 
-.bn-container .mantine-Menu-item {
+.bn-mantine .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 {
+.bn-mantine .mantine-Menu-item[aria-selected="true"],
+.bn-mantine .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 {
+.bn-mantine .mantine-Popover-dropdown {
   background-color: transparent;
   border: none;
   border-radius: 0;
@@ -76,47 +78,48 @@
 }
 
 /* Mantine Tabs component base styles */
-.bn-container .mantine-Tabs-root {
+.bn-mantine .mantine-Tabs-root {
   width: 100%;
   background-color: var(--bn-colors-menu-background);
 }
 
-.bn-container .mantine-Tabs-list:before {
+.bn-mantine .mantine-Tabs-list:before {
   border-color: var(--bn-colors-hovered-background);
 }
 
-.bn-container .mantine-Tabs-tab {
+.bn-mantine .mantine-Tabs-tab {
   color: var(--bn-colors-menu-text);
   border-color: var(--bn-colors-hovered-background);
 }
 
-.bn-container .mantine-Tabs-tab:hover {
+.bn-mantine .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 {
+.bn-mantine .mantine-Tabs-tab[data-active],
+.bn-mantine .mantine-Tabs-tab[data-active]:hover {
   border-color: var(--bn-colors-menu-text);
   color: var(--bn-colors-menu-text);
 }
 
-.bn-container .mantine-Tabs-panel {
+.bn-mantine .mantine-Tabs-panel {
   padding: 8px;
 }
 
 /* Mantine TextInput component base styles */
-.bn-container .mantine-TextInput-input {
+.bn-mantine .mantine-TextInput-input {
   background-color: var(--bn-colors-menu-background);
   border: solid var(--bn-colors-border) 1px;
   border-radius: 4px;
   color: var(--bn-colors-menu-text);
+  font-family: var(--bn-font-family);
   height: 32px;
 }
 
 /* Mantine Tooltip component base styles */
-.bn-container .mantine-Tooltip-tooltip {
+.bn-mantine .mantine-Tooltip-tooltip {
   background-color: transparent;
   border: none;
   border-radius: 0;
@@ -127,12 +130,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 +146,7 @@
   width: fit-content;
 }
 
-.bn-toolbar:empty {
+.bn-mantine .bn-toolbar:empty {
   display: none;
 }
 
@@ -185,7 +188,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 +238,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 +248,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 +256,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 +292,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 +303,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);
 }
 
@@ -346,21 +349,21 @@
   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;
 }
@@ -386,7 +389,7 @@
   width: 22px;
 }
 
-.bn-side-menu > [draggable="true"] {
+.bn-mantine .bn-side-menu > [draggable="true"] {
   display: flex;
 }
 
@@ -397,7 +400,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);
@@ -406,7 +409,7 @@
   width: 500px;
 }
 
-.bn-panel .bn-tab-panel {
+.bn-mantine .bn-panel .bn-tab-panel {
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -432,12 +435,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);
@@ -452,22 +455,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);
@@ -478,7 +481,7 @@
 }
 
 /* Additional menu styles */
-.bn-tick-space {
+.bn-mantine .bn-tick-space {
   padding: 0;
   width: 20px;
 }