mirror of https://github.com/buster-so/buster.git
pass ref straight through
This commit is contained in:
parent
fe7a2b3e5b
commit
d323df1f0f
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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={{
|
||||
|
|
|
@ -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({
|
||||
|
|
Loading…
Reference in New Issue