@blocknote/mantine 0.25.2 → 0.26.0

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1741855646305,"assets":[{"name":"blocknote-mantine.cjs","size":19856},{"name":"blocknote-mantine.cjs.map","size":309673}],"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":478,"chunks":["ec22802"]},{"name":"./src/comments/Comment.tsx","size":2000,"chunks":["ec22802"]},{"name":"./src/comments/Editor.tsx","size":960,"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":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":1458,"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":1742379518184,"assets":[{"name":"blocknote-mantine.cjs","size":20415},{"name":"blocknote-mantine.cjs.map","size":311787}],"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/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":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"]}]}

package/package.json

@@ -6,7 +6,7 @@
     "*.css"
   ],
   "license": "MPL-2.0",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "files": [
     "dist",
     "types",
@@ -50,8 +50,8 @@
     "clean": "rimraf dist && rimraf types"
   },
   "dependencies": {
-    "@blocknote/core": "^0.25.2",
-    "@blocknote/react": "^0.25.2",
+    "@blocknote/core": "^0.26.0",
+    "@blocknote/react": "^0.26.0",
     "@mantine/core": "^7.10.1",
     "@mantine/hooks": "^7.10.1",
     "@mantine/utils": "^6.0.21",
@@ -83,5 +83,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "8bb9bc6be7b7865ff3a6baffef1877ab079244e9"
+  "gitHead": "7d8c79c62c750db921208c373e6ae7b0c42f994c"
 }

package/src/comments/Card.tsx

@@ -1,18 +1,50 @@
-import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
-import { Card as MantineCard } from "@mantine/core";
-import { forwardRef } from "react";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps, mergeRefs } from "@blocknote/react";
+import {
+  Card as MantineCard,
+  Divider as MantineDivider,
+  Text as MantineText,
+} from "@mantine/core";
+import { forwardRef, useEffect, useRef } from "react";
 
 export const Card = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Card"]
 >((props, ref) => {
-  const { className, children, ...rest } = props;
+  const {
+    className,
+    children,
+    headerText,
+    selected,
+    onFocus,
+    onBlur,
+    tabIndex,
+    ...rest
+  } = props;
 
   assertEmpty(rest, false);
 
+  // Makes the card scroll into view when selected.
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (selected) {
+      scrollRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  }, [selected]);
+
   return (
-    <MantineCard w={350} p={"md"} className={className} ref={ref}>
+    <MantineCard
+      className={mergeCSSClasses(className, selected ? "selected" : "")}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      tabIndex={tabIndex}
+      ref={mergeRefs([ref, scrollRef])}>
+      {headerText && (
+        <MantineText className={"bn-header-text"}>{headerText}</MantineText>
+      )}
       {children}
     </MantineCard>
   );
@@ -27,8 +59,25 @@ export const CardSection = forwardRef<
   assertEmpty(rest, false);
 
   return (
-    <MantineCard.Section p={"md"} className={className} ref={ref}>
+    <MantineCard.Section className={className} ref={ref}>
       {children}
     </MantineCard.Section>
   );
 });
+
+export const ExpandSectionsPrompt = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Comments"]["ExpandSectionsPrompt"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  return (
+    <MantineDivider
+      className={className}
+      label={<MantineText>{children}</MantineText>}
+      ref={ref}
+    />
+  );
+});

package/src/comments/Comment.tsx

@@ -6,9 +6,12 @@ import { forwardRef } from "react";
 
 const AuthorInfo = forwardRef<
   HTMLDivElement,
-  Pick<ComponentProps["Comments"]["Comment"], "authorInfo" | "timeString">
+  Pick<
+    ComponentProps["Comments"]["Comment"],
+    "authorInfo" | "timeString" | "edited"
+  >
 >((props, _ref) => {
-  const { authorInfo, timeString, ...rest } = props;
+  const { authorInfo, timeString, edited, ...rest } = props;
 
   assertEmpty(rest, false);
 
@@ -37,7 +40,7 @@ const AuthorInfo = forwardRef<
       <Text fz="sm" fw={"bold"}>
         {authorInfo.username}
         <Text fz="xs" c="dimmed" span ml={"xs"}>
-          {timeString}
+          {timeString} {edited && "(edited)"}
         </Text>
       </Text>
     </Group>
@@ -53,6 +56,7 @@ export const Comment = forwardRef<
     showActions,
     authorInfo,
     timeString,
+    edited,
     actions,
     children,
     ...rest

package/src/comments/Editor.tsx

@@ -12,13 +12,14 @@ export const Editor = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Editor"]
 >((props, ref) => {
-  const { className, onFocus, onBlur, editor, editable, ...rest } = props;
+  const { className, autoFocus, onFocus, onBlur, editor, editable, ...rest } =
+    props;
 
   assertEmpty(rest, false);
 
   return (
     <BlockNoteView
-      autoFocus={true}
+      autoFocus={autoFocus}
       className={className}
       editor={props.editor}
       sideMenu={false}

package/src/components.tsx

@@ -1,6 +1,6 @@
 import { Components } from "@blocknote/react";
 import { Badge, BadgeGroup } from "./badge/Badge.js";
-import { Card, CardSection } from "./comments/Card.js";
+import { Card, CardSection, ExpandSectionsPrompt } from "./comments/Card.js";
 import { Comment } from "./comments/Comment.js";
 import { Editor } from "./comments/Editor.js";
 import { TextInput } from "./form/TextInput.js";
@@ -59,6 +59,7 @@ export const components: Components = {
   LinkToolbar: {
     Root: Toolbar,
     Button: ToolbarButton,
+    Select: ToolbarSelect,
   },
   SideMenu: {
     Root: SideMenu,
@@ -101,6 +102,7 @@ export const components: Components = {
     Toolbar: {
       Root: Toolbar,
       Button: ToolbarButton,
+      Select: ToolbarSelect,
     },
   },
   Comments: {
@@ -108,5 +110,6 @@ export const components: Components = {
     Editor,
     Card,
     CardSection,
+    ExpandSectionsPrompt,
   },
 };

package/src/style.css

@@ -256,8 +256,7 @@
   max-height: 100%;
   position: relative;
   box-shadow: var(--mantine-shadow-md);
-  border: calc(0.0625rem * var(--mantine-scale)) solid
-    var(--mantine-color-gray-2);
+  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-2);
   border-radius: var(--mantine-radius-default);
   padding: 4px;
 }
@@ -577,8 +576,8 @@
 }
 
 .bn-mt-sub-menu-item
-  > .mantine-Menu-itemLabel
-  > div:not(.mantine-Menu-dropdown) {
+> .mantine-Menu-itemLabel
+> div:not(.mantine-Menu-dropdown) {
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -591,13 +590,30 @@
   border-radius: var(--bn-border-radius-medium);
   box-shadow: var(--bn-shadow-medium);
   color: var(--bn-colors-menu-text);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 350px;
   overflow: visible;
 }
 
-.bn-mantine .bn-thread-comments {
-  border-bottom: var(--bn-border);
+.bn-mantine .bn-threads-sidebar .bn-thread {
+  box-shadow: none;
+}
+
+.bn-mantine .bn-thread:not(.selected) {
+  cursor: pointer;
+}
+
+.bn-mantine .bn-thread-comments,
+.bn-mantine .bn-thread-composer {
   display: flex;
   flex-direction: column;
+  margin: 0;
+  padding: 0;
+}
+
+.bn-mantine .bn-thread-comments {
   gap: 1rem;
 }
 
@@ -615,6 +631,12 @@
   color: var(--bn-colors-menu-text);
 }
 
+.bn-mantine .bn-thread .bn-header-text,
+.bn-mantine .bn-thread-comment .bn-resolved-text {
+  font-size: 0.8rem;
+  font-style: italic;
+}
+
 .bn-mantine .bn-comment-actions-wrapper {
   width: 100%;
   display: flex;
@@ -692,18 +714,18 @@
 }
 
 .bn-mantine
-  .bn-badge
-  .mantine-Chip-label
-  > span:not(.mantine-Chip-iconWrapper) {
+.bn-badge
+.mantine-Chip-label
+> span:not(.mantine-Chip-iconWrapper) {
   display: inline-flex;
   gap: 4px;
 }
 
 .bn-mantine
-  .bn-badge
-  .mantine-Chip-label
-  > span:not(.mantine-Chip-iconWrapper)
-  > span {
+.bn-badge
+.mantine-Chip-label
+> span:not(.mantine-Chip-iconWrapper)
+> span {
   align-items: center;
   display: inline-flex;
   justify-content: center;

package/types/src/comments/Card.d.ts

@@ -1,9 +1,18 @@
 /// <reference types="react" />
 export declare const Card: import("react").ForwardRefExoticComponent<{
     className?: string | undefined;
+    headerText?: string | undefined;
+    selected?: boolean | undefined;
+    onFocus?: ((event: import("react").FocusEvent<Element, Element>) => void) | undefined;
+    onBlur?: ((event: import("react").FocusEvent<Element, Element>) => void) | undefined;
+    tabIndex?: number | undefined;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export declare const CardSection: import("react").ForwardRefExoticComponent<{
     className?: string | undefined;
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ExpandSectionsPrompt: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/comments/Comment.d.ts

@@ -4,6 +4,7 @@ export declare const Comment: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
     authorInfo: "loading" | import("@blocknote/core/types/src/comments").User;
     timeString: string;
+    edited: boolean;
     actions?: import("react").ReactNode;
     showActions?: boolean | "hover" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/comments/Editor.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export declare const Editor: import("react").ForwardRefExoticComponent<{
     className?: string | undefined;
+    autoFocus?: boolean | undefined;
     editable: boolean;
     editor: import("@blocknote/core").BlockNoteEditor<any, any, any>;
     onFocus?: (() => void) | undefined;