@blocknote/shadcn 0.24.2 → 0.25.0

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "../../lib/utils";
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/components.ts

@@ -10,6 +10,7 @@ import {
   MenuLabel,
   MenuTrigger,
 } from "./menu/Menu.js";
+import { MenuButton } from "./menu/Button.js";
 import { Panel } from "./panel/Panel.js";
 import { PanelTab } from "./panel/PanelTab.js";
 import { PanelTextInput } from "./panel/PanelTextInput.js";
@@ -26,6 +27,10 @@ import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader.js";
 import { ExtendButton } from "./tableHandle/ExtendButton.js";
 import { TableHandle } from "./tableHandle/TableHandle.js";
 import { Toolbar, ToolbarButton, ToolbarSelect } from "./toolbar/Toolbar.js";
+import { Card, CardSection } from "./comments/Card.js";
+import { Comment } from "./comments/Comment.js";
+import { Editor } from "./comments/Editor.js";
+import { Badge, BadgeGroup } from "./badge/Badge.js";
 
 import { PanelButton } from "./panel/PanelButton.js";
 import { PanelFileInput } from "./panel/PanelFileInput.js";
@@ -71,7 +76,17 @@ export const components: Components = {
     Root: TableHandle,
     ExtendButton: ExtendButton,
   },
+  Comments: {
+    Comment: Comment,
+    Editor: Editor,
+    Card: Card,
+    CardSection: CardSection,
+  },
   Generic: {
+    Badge: {
+      Root: Badge,
+      Group: BadgeGroup,
+    },
     Toolbar: {
       Root: Toolbar,
       Button: ToolbarButton,
@@ -87,6 +102,7 @@ export const components: Components = {
       Divider: MenuDivider,
       Label: MenuLabel,
       Item: MenuItem,
+      Button: MenuButton,
     },
     Popover: {
       Root: Popover,

package/src/menu/Button.tsx

@@ -0,0 +1,45 @@
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+import { cn } from "../lib/utils.js";
+import { useShadCNComponentsContext } from "../ShadCNComponentsContext.js";
+
+export const MenuButton = 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 ariakit when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.Button.Button
+      variant={"ghost"}
+      className={cn(className, "bn-text-gray-400")}
+      ref={ref}
+      aria-label={label}
+      onClick={onClick}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      draggable={draggable}
+      {...rest}>
+      {icon}
+      {children}
+    </ShadCNComponents.Button.Button>
+  );
+});

package/src/menu/Menu.tsx

@@ -56,7 +56,9 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
     );
   } else {
     return (
-      <ShadCNComponents.DropdownMenu.DropdownMenu onOpenChange={onOpenChange}>
+      <ShadCNComponents.DropdownMenu.DropdownMenu
+        modal={false}
+        onOpenChange={onOpenChange}>
         {children}
       </ShadCNComponents.DropdownMenu.DropdownMenu>
     );
@@ -147,7 +149,7 @@ export const MenuItem = forwardRef<
   if (checked !== undefined) {
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenuCheckboxItem
-        className={cn(className, "bn-gap-1")}
+        className={cn(className, "bn-gap-1", checked ? "" : "bn-px-2")}
         ref={ref}
         checked={checked}
         onClick={onClick}

package/src/style.css

@@ -173,3 +173,13 @@
   overflow-x: auto;
   max-width: 100vw;
 }
+
+.bn-shadcn .bn-comment-actions-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bn-shadcn .bn-table-cell-handle {
+  padding: 0 4px;
+  height: 12px;
+}

package/src/toolbar/Toolbar.tsx

@@ -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);
 
@@ -21,7 +28,8 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
         <div
           className={cn(
             className,
-            "bn-flex bn-gap-1 bn-p-1 bn-bg-popover bn-text-popover-foreground bn-border bn-rounded-lg bn-shadow-md"
+            "bn-flex bn-gap-1 bn-p-1 bn-bg-popover bn-text-popover-foreground bn-border bn-rounded-lg bn-shadow-md bn-h-fit",
+            variant === "action-toolbar" ? "bn-w-fit" : ""
           )}
           ref={ref}
           onMouseEnter={onMouseEnter}
@@ -48,6 +56,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
       isDisabled,
       onClick,
       label,
+      variant,
       ...rest
     } = props;
 
@@ -60,8 +69,12 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
     const trigger =
       isSelected === undefined ? (
         <ShadCNComponents.Button.Button
-          className={className}
+          className={cn(
+            className,
+            variant === "compact" ? "bn-h-6 bn-min-w-6 bn-p-0" : ""
+          )}
           variant="ghost"
+          size={variant === "compact" ? "sm" : "default"}
           disabled={isDisabled}
           onClick={onClick}
           ref={ref}
@@ -74,8 +87,10 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         <ShadCNComponents.Toggle.Toggle
           className={cn(
             className,
-            "data-[state=open]:bg-accent data-[state=closed]:text-accent-foreground"
+            "data-[state=open]:bg-accent data-[state=closed]:text-accent-foreground",
+            variant === "compact" ? "bn-h-6 bn-min-w-6 bn-p-0" : ""
           )}
+          size={variant === "compact" ? "sm" : "default"}
           aria-label={label}
           onClick={onClick}
           pressed={isSelected}
@@ -95,7 +110,9 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
           {trigger}
         </ShadCNComponents.Tooltip.TooltipTrigger>
         <ShadCNComponents.Tooltip.TooltipContent
-          className={"bn-flex bn-flex-col bn-items-center"}>
+          className={
+            "bn-flex bn-flex-col bn-items-center bn-whitespace-pre-wrap"
+          }>
           <span>{mainTooltip}</span>
           {secondaryTooltip && <span>{secondaryTooltip}</span>}
         </ShadCNComponents.Tooltip.TooltipContent>

package/types/src/ShadCNComponentsContext.d.ts

@@ -1,6 +1,12 @@
 /// <reference types="react" />
 import { Badge as ShadCNBadge } from "./components/ui/badge.js";
+import { Skeleton as ShadCNSkeleton } from "./components/ui/skeleton.js";
 export declare const ShadCNDefaultComponents: {
+    Avatar: {
+        Avatar: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-avatar").AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        AvatarFallback: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-avatar").AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        AvatarImage: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-avatar").AvatarImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+    };
     Badge: {
         Badge: typeof ShadCNBadge;
     };
@@ -50,6 +56,9 @@ export declare const ShadCNDefaultComponents: {
         SelectTrigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-select").SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
         SelectValue: import("react").ForwardRefExoticComponent<import("@radix-ui/react-select").SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
     };
+    Skeleton: {
+        Skeleton: typeof ShadCNSkeleton;
+    };
     Tabs: {
         Tabs: import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & import("react").RefAttributes<HTMLDivElement>>;
         TabsContent: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -71,6 +80,11 @@ export declare const ShadCNDefaultComponents: {
 };
 export type ShadCNComponents = typeof ShadCNDefaultComponents;
 export declare const ShadCNComponentsContext: import("react").Context<{
+    Avatar: {
+        Avatar: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-avatar").AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        AvatarFallback: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-avatar").AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        AvatarImage: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-avatar").AvatarImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+    };
     Badge: {
         Badge: typeof ShadCNBadge;
     };
@@ -120,6 +134,9 @@ export declare const ShadCNComponentsContext: import("react").Context<{
         SelectTrigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-select").SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
         SelectValue: import("react").ForwardRefExoticComponent<import("@radix-ui/react-select").SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
     };
+    Skeleton: {
+        Skeleton: typeof ShadCNSkeleton;
+    };
     Tabs: {
         Tabs: import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & import("react").RefAttributes<HTMLDivElement>>;
         TabsContent: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -140,6 +157,11 @@ export declare const ShadCNComponentsContext: import("react").Context<{
     };
 } | undefined>;
 export declare function useShadCNComponentsContext(): {
+    Avatar: {
+        Avatar: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-avatar").AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        AvatarFallback: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-avatar").AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+        AvatarImage: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-avatar").AvatarImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+    };
     Badge: {
         Badge: typeof ShadCNBadge;
     };
@@ -189,6 +211,9 @@ export declare function useShadCNComponentsContext(): {
         SelectTrigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-select").SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
         SelectValue: import("react").ForwardRefExoticComponent<import("@radix-ui/react-select").SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
     };
+    Skeleton: {
+        Skeleton: typeof ShadCNSkeleton;
+    };
     Tabs: {
         Tabs: import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & import("react").RefAttributes<HTMLDivElement>>;
         TabsContent: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,15 @@
+/// <reference types="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: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    onMouseEnter?: (() => void) | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+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/index.js").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/components/ui/avatar.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarImage, AvatarFallback };

package/types/src/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "link" | "ghost" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/types/src/components/ui/skeleton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const MenuButton: 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,15 +4,17 @@ 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>>;
 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;