@blocknote/mantine 0.24.2 → 0.25.0

package/src/style.css

@@ -127,6 +127,14 @@
   padding: 0;
 }
 
+.bn-mantine .mantine-Tooltip-tooltip p:last-child {
+  white-space: pre-wrap;
+}
+
+.bn-mantine .mantine-Tooltip-tooltip p:first-child {
+  white-space: unset;
+}
+
 /* UI element styling */
 
 /* Select styling */
@@ -495,14 +503,15 @@
 
 /* Table Handle styling */
 .bn-mantine .bn-table-handle,
-.bn-mantine .bn-extend-button {
+.bn-mantine .bn-extend-button,
+.bn-mantine .bn-table-cell-handle {
   align-items: center;
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-small);
   box-shadow: var(--bn-shadow-light);
   color: var(--bn-colors-side-menu);
-  cursor: pointer;
+  cursor: grab;
   display: flex;
   height: fit-content;
   justify-content: center;
@@ -510,14 +519,23 @@
   padding: 0;
 }
 
+.bn-mantine .bn-table-cell-handle {
+  padding: 0 4px;
+}
+
 .bn-mantine .bn-table-handle svg {
   margin-inline: -4px;
 }
 
+.bn-mantine .bn-table-handle-not-draggable {
+  cursor: pointer;
+}
+
 .bn-mantine .bn-table-handle:hover,
 .bn-mantine .bn-table-handle-dragging,
 .bn-mantine .bn-extend-button:hover,
-.bn-mantine .bn-extend-button-editing {
+.bn-mantine .bn-extend-button-editing,
+.bn-mantine .bn-table-cell-handle:hover {
   background-color: var(--bn-colors-hovered-background);
 }
 
@@ -536,7 +554,8 @@
 }
 
 /* Drag Handle & Table Handle Menu styling */
-.bn-mantine .bn-drag-handle-menu {
+.bn-mantine .bn-drag-handle-menu,
+.bn-mantine .bn-table-handle-menu {
   overflow: visible;
 }
 
@@ -564,3 +583,135 @@
   display: flex;
   justify-content: space-between;
 }
+
+/* Comment styling */
+.bn-mantine .bn-thread {
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  box-shadow: var(--bn-shadow-medium);
+  color: var(--bn-colors-menu-text);
+  overflow: visible;
+}
+
+.bn-mantine .bn-thread-comments {
+  border-bottom: var(--bn-border);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.bn-mantine .bn-thread-comment {
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.bn-mantine .bn-thread-comment > .mantine-Group-root {
+  gap: 12px;
+}
+
+.bn-mantine .bn-thread-comment p {
+  color: var(--bn-colors-menu-text);
+}
+
+.bn-mantine .bn-comment-actions-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Comment action toolbar styling */
+.bn-mantine .bn-action-toolbar {
+  align-self: flex-end;
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  gap: 0;
+  padding: 2px;
+}
+
+.bn-action-toolbar .mantine-Button-root,
+.bn-action-toolbar .mantine-ActionIcon-root {
+  background-color: var(--bn-colors-menu-background);
+  border: none;
+  border-radius: var(--bn-border-radius-small);
+  color: var(--bn-colors-menu-text);
+}
+
+.bn-action-toolbar .mantine-Button-root:hover,
+.bn-action-toolbar .mantine-ActionIcon-root:hover {
+  background-color: var(--bn-colors-hovered-background);
+  border: none;
+  color: var(--bn-colors-hovered-text);
+}
+
+.bn-action-toolbar .mantine-Button-root[data-selected],
+.bn-action-toolbar .mantine-ActionIcon-root[data-selected] {
+  background-color: var(--bn-colors-selected-background);
+  border: none;
+  color: var(--bn-colors-selected-text);
+}
+
+.bn-action-toolbar .mantine-Button-root[data-disabled],
+.bn-action-toolbar .mantine-ActionIcon-root[data-disabled] {
+  background-color: var(--bn-colors-disabled-background);
+  border: none;
+  color: var(--bn-colors-disabled-text);
+}
+
+.bn-mantine .bn-action-toolbar .mantine-Menu-itemLabel {
+  font-size: 12px;
+}
+
+/* Badge styling */
+.bn-mantine .bn-badge-group {
+  display: flex;
+  gap: 4px;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.bn-mantine .bn-badge {
+  flex-grow: 0;
+}
+
+.bn-mantine .bn-badge .mantine-Chip-label {
+  padding: 0 8px;
+}
+
+.bn-mantine .bn-badge .mantine-Chip-label:not([data-checked="true"]) {
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  color: var(--bn-colors-menu-text);
+}
+
+.bn-mantine .bn-badge .mantine-Chip-label:hover {
+  border: 1px solid var(--mantine-primary-color-filled-hover);
+  color: var(--mantine-primary-color-filled-hover);
+}
+
+.bn-mantine
+  .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 {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+
+/* We need to get rid of the checked icon - you can set the icon prop to an
+empty element (<></>), but even so Mantine leaves extra space for the icon, so
+we just don't display it in CSS instead. */
+.bn-mantine .bn-badge .mantine-Chip-iconWrapper {
+  display: none;
+}

package/src/toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { Group as MantineGroup } from "@mantine/core";
+import { Flex } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -10,7 +10,14 @@ type ToolbarProps = ComponentProps["FormattingToolbar"]["Root"] &
 
 export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
   (props, ref) => {
-    const { className, children, onMouseEnter, onMouseLeave, ...rest } = props;
+    const {
+      className,
+      children,
+      onMouseEnter,
+      onMouseLeave,
+      variant,
+      ...rest
+    } = props;
 
     assertEmpty(rest);
 
@@ -22,15 +29,16 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
     const combinedRef = mergeRefs(ref, focusRef, trapRef);
 
     return (
-      <MantineGroup
+      <Flex
         className={className}
         ref={combinedRef}
         role="toolbar"
         // TODO: aria-label
         onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}>
+        onMouseLeave={onMouseLeave}
+        gap={variant === "action-toolbar" ? 2 : undefined}>
         {children}
-      </MantineGroup>
+      </Flex>
     );
   }
 );

package/src/toolbar/ToolbarButton.tsx

@@ -8,16 +8,20 @@ import {
 
 import { assertEmpty, isSafari } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 
 export const TooltipContent = (props: {
   mainTooltip: string;
   secondaryTooltip?: string;
 }) => (
   <MantineStack gap={0} className={"bn-tooltip"}>
-    <MantineText size={"sm"}>{props.mainTooltip}</MantineText>
+    <MantineText size={"sm"} lineClamp={5}>
+      {props.mainTooltip}
+    </MantineText>
     {props.secondaryTooltip && (
-      <MantineText size={"xs"}>{props.secondaryTooltip}</MantineText>
+      <MantineText size={"xs"} lineClamp={5}>
+        {props.secondaryTooltip}
+      </MantineText>
     )}
   </MantineStack>
 );
@@ -40,6 +44,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
       isDisabled,
       onClick,
       label,
+      variant,
       ...rest
     } = props;
 
@@ -47,8 +52,84 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
     // assertEmpty in this case is only used at typescript level, not runtime level
     assertEmpty(rest, false);
 
+    const [hideTooltip, setHideTooltip] = useState(false);
+
+    const button = children ? (
+      <MantineButton
+        aria-label={label}
+        className={className}
+        // Needed as Safari doesn't focus button elements on mouse down
+        // unlike other browsers.
+        onMouseDown={(e) => {
+          if (isSafari()) {
+            (e.currentTarget as HTMLButtonElement).focus();
+          }
+        }}
+        onClick={(event) => {
+          setHideTooltip(true);
+          onClick?.(event);
+        }}
+        // Mantine Menu.Target elements block mouseleave events for some reason,
+        // but pointerleave events work fine.
+        onPointerLeave={() => setHideTooltip(false)}
+        aria-pressed={isSelected}
+        data-selected={isSelected || undefined}
+        data-test={
+          mainTooltip
+            ? mainTooltip.slice(0, 1).toLowerCase() +
+              mainTooltip.replace(/\s+/g, "").slice(1)
+            : undefined
+        }
+        size={variant === "compact" ? "compact-xs" : "xs"}
+        disabled={isDisabled || false}
+        ref={ref}
+        {...rest}>
+        {children}
+      </MantineButton>
+    ) : (
+      <MantineActionIcon
+        className={className}
+        aria-label={label}
+        // Needed as Safari doesn't focus button elements on mouse down
+        // unlike other browsers.
+        onMouseDown={(e) => {
+          if (isSafari()) {
+            (e.currentTarget as HTMLButtonElement).focus();
+          }
+        }}
+        onClick={(event) => {
+          // We manually hide the tooltip onclick, because the click event
+          // might open a popover which would then show both the tooltip and the popover
+          // this is similar to default behavior of shadcn / radix
+          setHideTooltip(true);
+          onClick?.(event);
+        }}
+        // Mantine Menu.Target elements block mouseleave events for some reason,
+        // but pointerleave events work fine.
+        onPointerLeave={() => setHideTooltip(false)}
+        aria-pressed={isSelected}
+        data-selected={isSelected || undefined}
+        data-test={
+          mainTooltip
+            ? mainTooltip.slice(0, 1).toLowerCase() +
+              mainTooltip.replace(/\s+/g, "").slice(1)
+            : undefined
+        }
+        size={variant === "compact" ? 20 : 30}
+        disabled={isDisabled || false}
+        ref={ref}
+        {...rest}>
+        {icon}
+      </MantineActionIcon>
+    );
+
+    if (!mainTooltip) {
+      return button;
+    }
+
     return (
       <MantineTooltip
+        disabled={hideTooltip}
         withinPortal={false}
         label={
           <TooltipContent
@@ -56,56 +137,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
             secondaryTooltip={secondaryTooltip}
           />
         }>
-        {/*Creates an ActionIcon instead of a Button if only an icon is provided as content.*/}
-        {children ? (
-          <MantineButton
-            aria-label={label}
-            className={className}
-            // Needed as Safari doesn't focus button elements on mouse down
-            // unlike other browsers.
-            onMouseDown={(e) => {
-              if (isSafari()) {
-                (e.currentTarget as HTMLButtonElement).focus();
-              }
-            }}
-            onClick={onClick}
-            aria-pressed={isSelected}
-            data-selected={isSelected || undefined}
-            data-test={
-              mainTooltip.slice(0, 1).toLowerCase() +
-              mainTooltip.replace(/\s+/g, "").slice(1)
-            }
-            size={"xs"}
-            disabled={isDisabled || false}
-            ref={ref}
-            {...rest}>
-            {children}
-          </MantineButton>
-        ) : (
-          <MantineActionIcon
-            className={className}
-            aria-label={label}
-            // Needed as Safari doesn't focus button elements on mouse down
-            // unlike other browsers.
-            onMouseDown={(e) => {
-              if (isSafari()) {
-                (e.currentTarget as HTMLButtonElement).focus();
-              }
-            }}
-            onClick={onClick}
-            aria-pressed={isSelected}
-            data-selected={isSelected || undefined}
-            data-test={
-              mainTooltip.slice(0, 1).toLowerCase() +
-              mainTooltip.replace(/\s+/g, "").slice(1)
-            }
-            size={30}
-            disabled={isDisabled || false}
-            ref={ref}
-            {...rest}>
-            {icon}
-          </MantineActionIcon>
-        )}
+        {button}
       </MantineTooltip>
     );
   }

package/types/src/badge/Badge.d.ts

@@ -0,0 +1,15 @@
+import { MouseEvent } from "react";
+export declare const Badge: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    text: string;
+    icon?: import("react").ReactNode;
+    isSelected?: boolean | undefined;
+    mainTooltip?: string | undefined;
+    secondaryTooltip?: string | undefined;
+    onClick?: ((event: MouseEvent<Element, globalThis.MouseEvent>) => void) | undefined;
+    onMouseEnter?: (() => void) | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export declare const BadgeGroup: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Card: import("react").ForwardRefExoticComponent<{
+    className?: string | 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>>;

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

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Editor: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    editable: boolean;
+    editor: import("@blocknote/core").BlockNoteEditor<any, any, any>;
+    onFocus?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/menu/Button.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const Button: import("react").ForwardRefExoticComponent<({
+    className?: string | undefined;
+    onClick?: ((e: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    icon?: import("react").ReactNode;
+    onDragStart?: ((e: import("react").DragEvent<Element>) => void) | undefined;
+    onDragEnd?: ((e: import("react").DragEvent<Element>) => void) | undefined;
+    draggable?: boolean | undefined;
+} & ({
+    children: import("react").ReactNode;
+    label?: string | undefined;
+} | {
+    children?: undefined;
+    label: string;
+})) & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/toolbar/Toolbar.d.ts

@@ -4,4 +4,5 @@ export declare const Toolbar: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
     onMouseEnter?: (() => void) | undefined;
     onMouseLeave?: (() => void) | undefined;
+    variant?: "default" | "action-toolbar" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/toolbar/ToolbarButton.d.ts

@@ -8,12 +8,13 @@ export declare const TooltipContent: (props: {
  */
 export declare const ToolbarButton: import("react").ForwardRefExoticComponent<({
     className?: string | undefined;
-    mainTooltip: string;
+    mainTooltip?: string | undefined;
     secondaryTooltip?: string | undefined;
     icon?: import("react").ReactNode;
     onClick?: ((e: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
     isSelected?: boolean | undefined;
     isDisabled?: boolean | undefined;
+    variant?: "default" | "compact" | undefined;
 } & ({
     children: import("react").ReactNode;
     label?: string | undefined;