shadcn fixes

examples/vanilla-js/react-vanilla-custom-inline-content/App.tsx

@@ -19,7 +19,6 @@ const mention = createInlineContentSpec(
   },
   {
     render: (inlineContent) => {
-      console.log("render", inlineContent);
       const mention = document.createElement("span");
       mention.textContent = `@${inlineContent.props.user}`;
 

packages/shadcn/package.json

@@ -55,6 +55,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

packages/shadcn/src/components/ui/toggle.tsx

@@ -0,0 +1,43 @@
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

packages/shadcn/src/menu/Menu.tsx

@@ -4,6 +4,7 @@ import {
   MenuProps,
   MenuTriggerProps,
 } from "@blocknote/react";
+import { ChevronRight } from "lucide-react";
 import React from "react";
 import {
   DropdownMenu,
@@ -76,7 +77,12 @@ export const MenuItem = React.forwardRef((props: MenuItemProps, ref) => {
     );
   }
 
-  return <DropdownMenuItem {...rest} ref={ref} />;
+  return (
+    <DropdownMenuItem {...rest} ref={ref}>
+      {props.children}
+      {props.expandArrow && <ChevronRight className="ml-auto h-4 w-4" />}
+    </DropdownMenuItem>
+  );
 });
 
 export const MenuDivider = DropdownMenuSeparator;

packages/shadcn/src/style.css

@@ -66,6 +66,9 @@
   }
 }
 
+[data-radix-popper-content-wrapper] {
+  z-index: 99999 !important;
+}
 /* @layer base {
   * {
     @apply border-border;

packages/shadcn/src/toolbar/Toolbar.tsx

@@ -8,6 +8,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../components/ui/select";
+import { Toggle } from "../components/ui/toggle";
 import {
   Tooltip,
   TooltipContent,
@@ -38,23 +39,40 @@ export const ToolbarButton = React.forwardRef(
       children,
       mainTooltip,
       secondaryTooltip,
+      isSelected,
+      onClick,
       ...rest
     } = props;
 
-    // TODO: rest.isSelected?
+    const trigger =
+      props.isSelected === undefined ? (
+        <Button
+          variant="ghost"
+          size="icon"
+          disabled={isDisabled}
+          onClick={onClick}
+          ref={ref}
+          {...rest}>
+          {icon}
+          {children}
+        </Button>
+      ) : (
+        <Toggle
+          onPressedChange={onClick}
+          pressed={isSelected}
+          disabled={isDisabled}
+          ref={ref}
+          data-state={isSelected ? "on" : "off"}
+          data-disabled={isDisabled}
+          {...rest}>
+          {props.icon}
+          {props.children}
+        </Toggle>
+      );
+
     return (
       <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            disabled={isDisabled}
-            ref={ref}
-            {...rest}>
-            {icon}
-            {children}
-          </Button>
-        </TooltipTrigger>
+        <TooltipTrigger asChild>{trigger}</TooltipTrigger>
         <TooltipContent>{mainTooltip}</TooltipContent>
         {/* TODO: secondary tooltip */}
       </Tooltip>
@@ -63,16 +81,29 @@ export const ToolbarButton = React.forwardRef(
 );
 
 export const ToolbarSelect = (props: ToolbarSelectProps) => {
-  // TODO
+  const selectedItem = props.items.filter((p) => p.isSelected)[0];
+
+  if (!selectedItem) {
+    return null;
+  }
+
   return (
     <Select>
       <SelectTrigger className="w-[180px]">
-        <SelectValue placeholder="Theme" />
+        <SelectValue placeholder={selectedItem.text} />
       </SelectTrigger>
-      <SelectContent className={cn("bn-ui-container", props.className)}>
-        <SelectItem value="light">Light</SelectItem>
-        <SelectItem value="dark">Dark</SelectItem>
-        <SelectItem value="system">System</SelectItem>
+      <SelectContent className={cn("bn-ui-container")}>
+        {props.items.map((item) => (
+          // TODO: item.icon
+          <SelectItem
+            disabled={item.isDisabled}
+            key={item.text}
+            value={item.text}
+            onClick={() => item.onClick?.()}>
+            {item.text}
+            {item.icon}
+          </SelectItem>
+        ))}
       </SelectContent>
     </Select>
   );