pass ref straight through

This commit is contained in:
Nate Kelley 2025-07-28 22:38:32 -06:00
parent fe7a2b3e5b
commit d323df1f0f
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
4 changed files with 41 additions and 33 deletions

View File

@ -8,7 +8,7 @@ import { cva } from 'class-variance-authority';
import { type PlateElementProps, usePluginOption } from 'platejs/react';
export const blockSelectionVariants = cva(
'pointer-events-none absolute inset-0 z-1 bg-brand/[.13] transition-opacity',
'pointer-events-none absolute inset-0 z-1 bg-brand/5 transition-opacity',
{
defaultVariants: {
active: true

View File

@ -175,7 +175,7 @@ export function BlockSuggestionCard({
<div className="flex flex-col gap-2">
{suggestionText2Array(suggestion.newText!).map((text, index) => (
<React.Fragment key={index}>
<div key={index} className="text-brand/80 flex items-start gap-2">
<div key={index} className="text-brand/60 flex items-start gap-2">
<span className="text-sm">with:</span>
<span className="text-sm">{text || 'line breaks'}</span>
</div>

View File

@ -46,7 +46,7 @@ function Cursor({
key={i}
className={cn(
'pointer-events-none absolute z-10',
id === 'selection' && 'bg-brand/25',
id === 'selection' && 'bg-brand/15',
id === 'selection' && isCursor && 'bg-primary'
)}
style={{

View File

@ -13,20 +13,23 @@ import {
DropdownMenuSeparator
} from '@/components/ui/dropdown-menu';
import { Separator } from '@/components/ui/separator';
import { Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
import { TooltipBase, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
export function Toolbar({
className,
...props
}: React.ComponentProps<typeof ToolbarPrimitive.Root>) {
export const Toolbar = React.forwardRef<
HTMLDivElement,
React.ComponentProps<typeof ToolbarPrimitive.Root>
>(function Toolbar({ className, ...props }, ref) {
return (
<ToolbarPrimitive.Root
ref={ref}
className={cn('relative flex items-center select-none', className)}
{...props}
/>
);
}
});
Toolbar.displayName = 'Toolbar';
export function ToolbarToggleGroup({
className,
@ -266,40 +269,45 @@ export function ToolbarGroup({ children, className }: React.ComponentProps<'div'
type TooltipProps<T extends React.ElementType> = {
tooltip?: React.ReactNode;
tooltipContentProps?: Omit<React.ComponentPropsWithoutRef<typeof TooltipContent>, 'children'>;
tooltipProps?: Omit<React.ComponentPropsWithoutRef<typeof Tooltip>, 'children'>;
tooltipProps?: Omit<React.ComponentPropsWithoutRef<typeof TooltipBase>, 'children'>;
tooltipTriggerProps?: React.ComponentPropsWithoutRef<typeof TooltipTrigger>;
} & React.ComponentProps<T>;
function withTooltip<T extends React.ElementType>(Component: T) {
return function ExtendComponent({
tooltip,
tooltipContentProps,
tooltipProps,
tooltipTriggerProps,
...props
}: TooltipProps<T>) {
const [mounted, setMounted] = React.useState(false);
const ExtendComponent = React.forwardRef<any, TooltipProps<T>>(
({ tooltip, tooltipContentProps, tooltipProps, tooltipTriggerProps, ...props }, ref) => {
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
React.useEffect(() => {
setMounted(true);
}, []);
const component = <Component {...(props as React.ComponentProps<T>)} />;
const componentProps = {
...props,
ref
};
if (tooltip && mounted) {
return (
<Tooltip {...tooltipProps}>
<TooltipTrigger asChild {...tooltipTriggerProps}>
{component}
</TooltipTrigger>
const component = React.createElement(Component, componentProps);
<TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>
</Tooltip>
);
if (tooltip && mounted) {
return (
<TooltipBase {...tooltipProps}>
<TooltipTrigger asChild {...tooltipTriggerProps}>
{component}
</TooltipTrigger>
<TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>
</TooltipBase>
);
}
return component;
}
);
return component;
};
ExtendComponent.displayName = `withTooltip`;
return ExtendComponent;
}
function TooltipContent({