From a5cf36af43fb5ffa50381e9bfa389008bca17d4a Mon Sep 17 00:00:00 2001 From: yousefed Date: Tue, 26 Mar 2024 17:23:21 +0100 Subject: [PATCH] shadcn fixes --- .../App.tsx | 1 - package-lock.json | 26 +++++++ packages/shadcn/package.json | 1 + packages/shadcn/src/components/ui/toggle.tsx | 43 ++++++++++++ packages/shadcn/src/menu/Menu.tsx | 8 ++- packages/shadcn/src/style.css | 3 + packages/shadcn/src/toolbar/Toolbar.tsx | 67 ++++++++++++++----- 7 files changed, 129 insertions(+), 20 deletions(-) create mode 100644 packages/shadcn/src/components/ui/toggle.tsx diff --git a/examples/vanilla-js/react-vanilla-custom-inline-content/App.tsx b/examples/vanilla-js/react-vanilla-custom-inline-content/App.tsx index 3fab5faea..a090f2aa0 100644 --- a/examples/vanilla-js/react-vanilla-custom-inline-content/App.tsx +++ b/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}`; diff --git a/package-lock.json b/package-lock.json index 7b78477e5..11a6ece4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5429,6 +5429,31 @@ } } }, + "node_modules/@radix-ui/react-toggle": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz", + "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-tooltip": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz", @@ -23094,6 +23119,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", diff --git a/packages/shadcn/package.json b/packages/shadcn/package.json index f31ec85a0..21c9a0d73 100644 --- a/packages/shadcn/package.json +++ b/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", diff --git a/packages/shadcn/src/components/ui/toggle.tsx b/packages/shadcn/src/components/ui/toggle.tsx new file mode 100644 index 000000000..d19a9fdb1 --- /dev/null +++ b/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, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, variant, size, ...props }, ref) => ( + +)); + +Toggle.displayName = TogglePrimitive.Root.displayName; + +export { Toggle, toggleVariants }; diff --git a/packages/shadcn/src/menu/Menu.tsx b/packages/shadcn/src/menu/Menu.tsx index 485e32174..1d4a61270 100644 --- a/packages/shadcn/src/menu/Menu.tsx +++ b/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 ; + return ( + + {props.children} + {props.expandArrow && } + + ); }); export const MenuDivider = DropdownMenuSeparator; diff --git a/packages/shadcn/src/style.css b/packages/shadcn/src/style.css index 0882cd399..399ec8a90 100644 --- a/packages/shadcn/src/style.css +++ b/packages/shadcn/src/style.css @@ -66,6 +66,9 @@ } } +[data-radix-popper-content-wrapper] { + z-index: 99999 !important; +} /* @layer base { * { @apply border-border; diff --git a/packages/shadcn/src/toolbar/Toolbar.tsx b/packages/shadcn/src/toolbar/Toolbar.tsx index e74393582..141dbdb7c 100644 --- a/packages/shadcn/src/toolbar/Toolbar.tsx +++ b/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 ? ( + + ) : ( + + {props.icon} + {props.children} + + ); + return ( - - - + {trigger} {mainTooltip} {/* TODO: secondary 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 ( );