@blocknote/mantine 0.24.2 → 0.25.0

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1740756865139,"assets":[{"name":"blocknote-mantine.umd.cjs","size":17083},{"name":"blocknote-mantine.umd.cjs.map","size":295762}],"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":4215,"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/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/ExtendButton.tsx","size":333,"chunks":["ec22802"]},{"name":"./src/tableHandle/TableHandle.tsx","size":452,"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/components.tsx","size":1311,"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":1741102176573,"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"]}]}

package/package.json

@@ -6,7 +6,7 @@
     "*.css"
   ],
   "license": "MPL-2.0",
-  "version": "0.24.2",
+  "version": "0.25.0",
   "files": [
     "dist",
     "types",
@@ -29,13 +29,13 @@
   "type": "module",
   "source": "src/index.tsx",
   "types": "./types/src/index.d.ts",
-  "main": "./dist/blocknote-mantine.umd.cjs",
+  "main": "./dist/blocknote-mantine.cjs",
   "module": "./dist/blocknote-mantine.js",
   "exports": {
     ".": {
       "types": "./types/src/index.d.ts",
       "import": "./dist/blocknote-mantine.js",
-      "require": "./dist/blocknote-mantine.umd.cjs"
+      "require": "./dist/blocknote-mantine.cjs"
     },
     "./style.css": {
       "import": "./dist/style.css",
@@ -50,8 +50,8 @@
     "clean": "rimraf dist && rimraf types"
   },
   "dependencies": {
-    "@blocknote/core": "^0.24.2",
-    "@blocknote/react": "^0.24.2",
+    "@blocknote/core": "^0.25.0",
+    "@blocknote/react": "^0.25.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": "129f51b459753139ee0a4c441b4479f83fd7314d"
+  "gitHead": "2e7e03a8e9ccdb4a169c7436d48205e04021db97"
 }

package/src/badge/Badge.tsx

@@ -0,0 +1,87 @@
+import {
+  Chip as MantineChip,
+  Group as MantineGroup,
+  Tooltip as MantineTooltip,
+} from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { MouseEvent, forwardRef, useState } from "react";
+
+import { TooltipContent } from "../toolbar/ToolbarButton.js";
+
+export const Badge = forwardRef<
+  HTMLInputElement,
+  ComponentProps["Generic"]["Badge"]["Root"]
+>((props, ref) => {
+  const {
+    className,
+    text,
+    icon,
+    isSelected,
+    mainTooltip,
+    secondaryTooltip,
+    onClick,
+    onMouseEnter,
+    ...rest
+  } = props;
+
+  // false, because rest props can be added by mantine when chip is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
+  const [hideTooltip, setHideTooltip] = useState(false);
+
+  const badge = (
+    <MantineChip
+      className={className}
+      checked={isSelected === true}
+      wrapperProps={{
+        onMouseEnter,
+        onMouseLeave: () => setHideTooltip(false),
+        onClick: (event: MouseEvent) => {
+          setHideTooltip(true);
+          onClick?.(event);
+        },
+      }}
+      variant={"light"}
+      icon={null}
+      ref={ref}>
+      <span>{icon}</span>
+      <span>{text}</span>
+    </MantineChip>
+  );
+
+  if (!mainTooltip || hideTooltip) {
+    return badge;
+  }
+
+  return (
+    <MantineTooltip
+      refProp="rootRef"
+      withinPortal={false}
+      label={
+        <TooltipContent
+          mainTooltip={mainTooltip}
+          secondaryTooltip={secondaryTooltip}
+        />
+      }>
+      {badge}
+    </MantineTooltip>
+  );
+});
+
+export const BadgeGroup = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Badge"]["Group"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <MantineGroup className={className} ref={ref}>
+      {children}
+    </MantineGroup>
+  );
+});

package/src/comments/Card.tsx

@@ -0,0 +1,34 @@
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { Card as MantineCard } from "@mantine/core";
+import { forwardRef } from "react";
+
+export const Card = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Comments"]["Card"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  return (
+    <MantineCard w={350} p={"md"} className={className} ref={ref}>
+      {children}
+    </MantineCard>
+  );
+});
+
+export const CardSection = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Comments"]["CardSection"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  return (
+    <MantineCard.Section p={"md"} className={className} ref={ref}>
+      {children}
+    </MantineCard.Section>
+  );
+});

package/src/comments/Comment.tsx

@@ -0,0 +1,91 @@
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps, mergeRefs } from "@blocknote/react";
+import { Avatar, Group, Skeleton, Text } from "@mantine/core";
+import { useFocusWithin, useHover } from "@mantine/hooks";
+import { forwardRef } from "react";
+
+const AuthorInfo = forwardRef<
+  HTMLDivElement,
+  Pick<ComponentProps["Comments"]["Comment"], "authorInfo" | "timeString">
+>((props, _ref) => {
+  const { authorInfo, timeString, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  if (authorInfo === "loading") {
+    return (
+      <Group>
+        <Skeleton height={24} width={24} />
+        <div>
+          <Skeleton height={12} width={100} />
+        </div>
+      </Group>
+    );
+  }
+
+  return (
+    <Group>
+      <Avatar
+        src={authorInfo.avatarUrl}
+        alt={authorInfo.username}
+        radius="xl"
+        size="sm"
+        // name={authorInfo.username} TODO: upgrade mantine?
+        color="initials"
+      />
+
+      <Text fz="sm" fw={"bold"}>
+        {authorInfo.username}
+        <Text fz="xs" c="dimmed" span ml={"xs"}>
+          {timeString}
+        </Text>
+      </Text>
+    </Group>
+  );
+});
+
+export const Comment = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Comments"]["Comment"]
+>((props, ref) => {
+  const {
+    className,
+    showActions,
+    authorInfo,
+    timeString,
+    actions,
+    children,
+    ...rest
+  } = props;
+
+  const { hovered, ref: hoverRef } = useHover();
+  const { focused, ref: focusRef } = useFocusWithin();
+  const mergedRef = mergeRefs([ref, hoverRef]);
+  assertEmpty(rest, false);
+
+  const doShowActions =
+    actions &&
+    (showActions === true ||
+      showActions === undefined ||
+      (showActions === "hover" && hovered) ||
+      focused);
+
+  return (
+    <Group pos="relative" ref={mergedRef} className={className}>
+      {doShowActions ? (
+        <Group
+          ref={focusRef}
+          style={{
+            position: "absolute",
+            right: 0,
+            top: 0,
+            zIndex: 10,
+          }}>
+          {actions}
+        </Group>
+      ) : null}
+      <AuthorInfo {...props} />
+      {children}
+    </Group>
+  );
+});

package/src/comments/Editor.tsx

@@ -0,0 +1,47 @@
+import { assertEmpty } from "@blocknote/core";
+import {
+  ComponentProps,
+  FormattingToolbar,
+  FormattingToolbarController,
+  getFormattingToolbarItems,
+} from "@blocknote/react";
+import { forwardRef } from "react";
+import { BlockNoteView } from "../BlockNoteView.js";
+
+export const Editor = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Comments"]["Editor"]
+>((props, ref) => {
+  const { className, onFocus, onBlur, editor, editable, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  return (
+    <BlockNoteView
+      autoFocus={true}
+      className={className}
+      editor={props.editor}
+      sideMenu={false}
+      slashMenu={false}
+      tableHandles={false}
+      filePanel={false}
+      formattingToolbar={false}
+      editable={editable}
+      ref={ref}
+      onFocus={onFocus}
+      onBlur={onBlur}>
+      <FormattingToolbarController
+        formattingToolbar={CustomFormattingToolbar}
+      />
+    </BlockNoteView>
+  );
+});
+
+const CustomFormattingToolbar = () => {
+  const items = getFormattingToolbarItems([]).filter(
+    (el) => el.key !== "nestBlockButton" && el.key !== "unnestBlockButton"
+  );
+  return (
+    <FormattingToolbar blockTypeSelectItems={[]}>{items}</FormattingToolbar>
+  );
+};

package/src/components.tsx

@@ -1,5 +1,8 @@
 import { Components } from "@blocknote/react";
-
+import { Badge, BadgeGroup } from "./badge/Badge.js";
+import { Card, CardSection } from "./comments/Card.js";
+import { Comment } from "./comments/Comment.js";
+import { Editor } from "./comments/Editor.js";
 import { TextInput } from "./form/TextInput.js";
 import {
   Menu,
@@ -9,6 +12,7 @@ import {
   MenuLabel,
   MenuTrigger,
 } from "./menu/Menu.js";
+import { Button } from "./menu/Button.js";
 import { Panel } from "./panel/Panel.js";
 import { PanelButton } from "./panel/PanelButton.js";
 import { PanelFileInput } from "./panel/PanelFileInput.js";
@@ -18,15 +22,15 @@ import { Popover, PopoverContent, PopoverTrigger } from "./popover/Popover.js";
 import { SideMenu } from "./sideMenu/SideMenu.js";
 import { SideMenuButton } from "./sideMenu/SideMenuButton.js";
 import "./style.css";
-import { GridSuggestionMenu } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.js";
-import { GridSuggestionMenuEmptyItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.js";
-import { GridSuggestionMenuItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.js";
-import { GridSuggestionMenuLoader } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.js";
 import { SuggestionMenu } from "./suggestionMenu/SuggestionMenu.js";
 import { SuggestionMenuEmptyItem } from "./suggestionMenu/SuggestionMenuEmptyItem.js";
 import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem.js";
 import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel.js";
 import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader.js";
+import { GridSuggestionMenu } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.js";
+import { GridSuggestionMenuEmptyItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.js";
+import { GridSuggestionMenuItem } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.js";
+import { GridSuggestionMenuLoader } from "./suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.js";
 import { ExtendButton } from "./tableHandle/ExtendButton.js";
 import { TableHandle } from "./tableHandle/TableHandle.js";
 import { Toolbar } from "./toolbar/Toolbar.js";
@@ -72,9 +76,9 @@ export const components: Components = {
     ExtendButton: ExtendButton,
   },
   Generic: {
-    Toolbar: {
-      Root: Toolbar,
-      Button: ToolbarButton,
+    Badge: {
+      Root: Badge,
+      Group: BadgeGroup,
     },
     Form: {
       Root: (props) => <div>{props.children}</div>,
@@ -87,11 +91,22 @@ export const components: Components = {
       Divider: MenuDivider,
       Label: MenuLabel,
       Item: MenuItem,
+      Button: Button,
     },
     Popover: {
       Root: Popover,
       Trigger: PopoverTrigger,
       Content: PopoverContent,
     },
+    Toolbar: {
+      Root: Toolbar,
+      Button: ToolbarButton,
+    },
+  },
+  Comments: {
+    Comment,
+    Editor,
+    Card,
+    CardSection,
   },
 };

package/src/menu/Button.tsx

@@ -0,0 +1,60 @@
+import {
+  ActionIcon as MantineActionIcon,
+  Button as MantineButton,
+} from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["Generic"]["Menu"]["Button"]
+>((props, ref) => {
+  const {
+    className,
+    children,
+    icon,
+    onClick,
+    onDragEnd,
+    onDragStart,
+    draggable,
+    label,
+    ...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);
+
+  if (icon) {
+    return (
+      <MantineActionIcon
+        size={24}
+        className={className}
+        ref={ref}
+        onClick={onClick}
+        onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
+        draggable={draggable}
+        aria-label={label}
+        {...rest}>
+        {icon}
+      </MantineActionIcon>
+    );
+  }
+
+  return (
+    <MantineButton
+      className={className}
+      ref={ref}
+      onClick={onClick}
+      onDragEnd={onDragEnd}
+      onDragStart={onDragStart}
+      draggable={draggable}
+      aria-label={label}
+      {...rest}>
+      {children}
+    </MantineButton>
+  );
+});

package/src/menu/Menu.tsx

@@ -125,8 +125,7 @@ const SubMenu = forwardRef<
           middlewares={{ flip: true, shift: true, inline: false, size: true }}
           trigger={"hover"}
           opened={opened}
-          onClose={() => onOpenChange?.(false)}
-          onOpen={() => onOpenChange?.(true)}
+          onChange={onOpenChange}
           position={position}>
           {children}
         </MantineMenu>
@@ -148,8 +147,7 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
     <MantineMenu
       withinPortal={false}
       middlewares={{ flip: true, shift: true, inline: false, size: true }}
-      onClose={() => onOpenChange?.(false)}
-      onOpen={() => onOpenChange?.(true)}
+      onChange={onOpenChange}
       position={position}>
       {children}
     </MantineMenu>

package/src/popover/Popover.tsx

@@ -11,7 +11,7 @@ import { forwardRef } from "react";
 export const Popover = (
   props: ComponentProps["Generic"]["Popover"]["Root"]
 ) => {
-  const { children, opened, position, ...rest } = props;
+  const { opened, position, children, ...rest } = props;
 
   assertEmpty(rest);