Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tooltip fixes

This commit is contained in:
Nate Kelley 2025-08-01 22:36:32 -06:00
parent 63112231a7
commit 9a4561e953
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
16 changed files with 48 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx
View File

@ -56,7 +56,7 @@ export function AlignToolbarButton(props: DropdownMenuProps) {
return ( return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarButton pressed={open} tooltip="Align" isDropdown> <ToolbarButton pressed={open} tooltip="Align" isDropdown>
<IconValue /> <IconValue />
</ToolbarButton> </ToolbarButton>

2
apps/web/src/components/ui/report/elements/Comment.tsx
View File

@ -32,6 +32,7 @@ import { type TDiscussion, discussionPlugin } from '../plugins/discussion-kit';
import { EditorContainer } from '../EditorContainer'; import { EditorContainer } from '../EditorContainer';
import { Editor } from '../Editor'; import { Editor } from '../Editor';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
export interface TComment { export interface TComment {
id: string; id: string;
@ -334,6 +335,7 @@ function CommentMoreDropdown(props: {
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
className="w-48" className="w-48"
style={DEFAULT_THEME_STYLE}
onCloseAutoFocus={(e) => { onCloseAutoFocus={(e) => {
if (selectedEditCommentRef.current) { if (selectedEditCommentRef.current) {
onCloseAutoFocus?.(); onCloseAutoFocus?.();

13
apps/web/src/components/ui/report/elements/ExportToolbarButton.tsx
View File

@ -19,6 +19,7 @@ import {
import { EditorStatic } from './EditorStatic'; import { EditorStatic } from './EditorStatic';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar'; import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { useBusterNotifications } from '@/context/BusterNotifications'; import { useBusterNotifications } from '@/context/BusterNotifications';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) { export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
const editor = useEditorRef(); const editor = useEditorRef();
@ -187,15 +188,13 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
return ( return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<div> <ToolbarButton pressed={open} tooltip="Export" isDropdown>
<ToolbarButton pressed={open} tooltip="Export" isDropdown> {children}
{children} </ToolbarButton>
</ToolbarButton>
</div>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="swagger" align="start"> <DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem onSelect={exportToHtml}>Export as HTML</DropdownMenuItem> <DropdownMenuItem onSelect={exportToHtml}>Export as HTML</DropdownMenuItem>
<DropdownMenuItem onSelect={exportToPdf}>Export as PDF</DropdownMenuItem> <DropdownMenuItem onSelect={exportToPdf}>Export as PDF</DropdownMenuItem>

5
apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx
View File

@ -26,6 +26,7 @@ import {
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar'; import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
export function FontColorToolbarButton({ export function FontColorToolbarButton({
children, children,
@ -99,13 +100,13 @@ export function FontColorToolbarButton({
setOpen(value); setOpen(value);
}} }}
modal={false}> modal={false}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarButton pressed={open} tooltip={tooltip}> <ToolbarButton pressed={open} tooltip={tooltip}>
{children} {children}
</ToolbarButton> </ToolbarButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start"> <DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
<ColorPicker <ColorPicker
color={selectedColor || color} color={selectedColor || color}
clearColor={clearColor} clearColor={clearColor}

5
apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx
View File

@ -19,6 +19,7 @@ import {
} from '@/components/ui/dropdown-menu'; } from '@/components/ui/dropdown-menu';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar'; import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
type ImportType = 'html' | 'markdown'; type ImportType = 'html' | 'markdown';
@ -69,7 +70,7 @@ export function ImportToolbarButton(props: DropdownMenuProps) {
return ( return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarButton pressed={open} tooltip="Import" isDropdown> <ToolbarButton pressed={open} tooltip="Import" isDropdown>
<div className="size-4"> <div className="size-4">
<ArrowUpToLine /> <ArrowUpToLine />
@ -77,7 +78,7 @@ export function ImportToolbarButton(props: DropdownMenuProps) {
</ToolbarButton> </ToolbarButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start"> <DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem <DropdownMenuItem
onSelect={() => { onSelect={() => {

2
apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx
View File

@ -215,7 +215,7 @@ export function InsertToolbarButton(props: DropdownMenuProps) {
return ( return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarButton pressed={open} tooltip="Insert" isDropdown> <ToolbarButton pressed={open} tooltip="Insert" isDropdown>
<Plus /> <Plus />
</ToolbarButton> </ToolbarButton>

2
apps/web/src/components/ui/report/elements/LineHeightToolbarButton.tsx
View File

@ -33,7 +33,7 @@ export function LineHeightToolbarButton(props: DropdownMenuProps) {
return ( return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarButton pressed={open} tooltip="Line height" isDropdown> <ToolbarButton pressed={open} tooltip="Line height" isDropdown>
<div className="size-4"> <div className="size-4">
<TextTool2 /> <TextTool2 />

7
apps/web/src/components/ui/report/elements/ListToolbarButton.tsx
View File

@ -21,6 +21,7 @@ import {
ToolbarSplitButtonPrimary, ToolbarSplitButtonPrimary,
ToolbarSplitButtonSecondary ToolbarSplitButtonSecondary
} from '@/components/ui/toolbar/Toolbar'; } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
export function BulletedListToolbarButton() { export function BulletedListToolbarButton() {
const editor = useEditorRef(); const editor = useEditorRef();
@ -47,11 +48,11 @@ export function BulletedListToolbarButton() {
</ToolbarSplitButtonPrimary> </ToolbarSplitButtonPrimary>
<DropdownMenu open={open} onOpenChange={setOpen} modal={false}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarSplitButtonSecondary /> <ToolbarSplitButtonSecondary />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="start" alignOffset={-32}> <DropdownMenuContent align="start" alignOffset={-32} style={DEFAULT_THEME_STYLE}>
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem <DropdownMenuItem
onClick={() => onClick={() =>
@ -125,7 +126,7 @@ export function NumberedListToolbarButton() {
</ToolbarSplitButtonPrimary> </ToolbarSplitButtonPrimary>
<DropdownMenu open={open} onOpenChange={setOpen} modal={false}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarSplitButtonSecondary /> <ToolbarSplitButtonSecondary />
</DropdownMenuTrigger> </DropdownMenuTrigger>

9
apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx
View File

@ -35,6 +35,7 @@ import {
ToolbarSplitButtonPrimary, ToolbarSplitButtonPrimary,
ToolbarSplitButtonSecondary ToolbarSplitButtonSecondary
} from '@/components/ui/toolbar/Toolbar'; } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
const MEDIA_CONFIG: Record< const MEDIA_CONFIG: Record<
string, string,
@ -121,11 +122,15 @@ export function MediaToolbarButton({
<ToolbarSplitButtonPrimary>{currentConfig.icon}</ToolbarSplitButtonPrimary> <ToolbarSplitButtonPrimary>{currentConfig.icon}</ToolbarSplitButtonPrimary>
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarSplitButtonSecondary /> <ToolbarSplitButtonSecondary />
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent onClick={(e) => e.stopPropagation()} align="start" alignOffset={-32}> <DropdownMenuContent
onClick={(e) => e.stopPropagation()}
align="start"
alignOffset={-32}
style={DEFAULT_THEME_STYLE}>
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem onSelect={() => openFilePicker()}> <DropdownMenuItem onSelect={() => openFilePicker()}>
{currentConfig.icon} {currentConfig.icon}

5
apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx
View File

@ -16,6 +16,7 @@ import {
} from '@/components/ui/dropdown-menu'; } from '@/components/ui/dropdown-menu';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar'; import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
export function ModeToolbarButton(props: DropdownMenuProps) { export function ModeToolbarButton(props: DropdownMenuProps) {
const editor = useEditorRef(); const editor = useEditorRef();
@ -47,14 +48,14 @@ export function ModeToolbarButton(props: DropdownMenuProps) {
return ( return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarButton pressed={open} tooltip="Editing mode" isDropdown> <ToolbarButton pressed={open} tooltip="Editing mode" isDropdown>
{item[value].icon} {item[value].icon}
<span className="hidden lg:inline">{item[value].label}</span> <span className="hidden lg:inline">{item[value].label}</span>
</ToolbarButton> </ToolbarButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="min-w-[180px]" align="start"> <DropdownMenuContent className="min-w-[180px]" align="start" style={DEFAULT_THEME_STYLE}>
<DropdownMenuRadioGroup <DropdownMenuRadioGroup
value={value} value={value}
onValueChange={(newValue) => { onValueChange={(newValue) => {

6
apps/web/src/components/ui/report/elements/MoreToolbarButton.tsx
View File

@ -17,6 +17,7 @@ import {
} from '@/components/ui/dropdown-menu'; } from '@/components/ui/dropdown-menu';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar'; import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
export function MoreToolbarButton(props: DropdownMenuProps) { export function MoreToolbarButton(props: DropdownMenuProps) {
const editor = useEditorRef(); const editor = useEditorRef();
@ -24,7 +25,7 @@ export function MoreToolbarButton(props: DropdownMenuProps) {
return ( return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarButton pressed={open} tooltip="Insert"> <ToolbarButton pressed={open} tooltip="Insert">
<Dots /> <Dots />
</ToolbarButton> </ToolbarButton>
@ -32,7 +33,8 @@ export function MoreToolbarButton(props: DropdownMenuProps) {
<DropdownMenuContent <DropdownMenuContent
className="ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto" className="ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto"
align="start"> align="start"
style={DEFAULT_THEME_STYLE}>
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuItem <DropdownMenuItem
onSelect={() => { onSelect={() => {

6
apps/web/src/components/ui/report/elements/TableNode/TableNode.tsx
View File

@ -100,6 +100,7 @@ import {
ToolbarGroup, ToolbarGroup,
ToolbarMenuGroup ToolbarMenuGroup
} from '@/components/ui/toolbar/Toolbar'; } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../../ThemeWrapper/themes';
export const TableElement = withHOC( export const TableElement = withHOC(
TableProvider, TableProvider,
function TableElement({ children, ...props }: PlateElementProps<TTableElement>) { function TableElement({ children, ...props }: PlateElementProps<TTableElement>) {
@ -180,7 +181,7 @@ function TableFloatingToolbar({ children, ...props }: React.ComponentProps<typeo
)} )}
<DropdownMenu modal={false}> <DropdownMenu modal={false}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarButton tooltip="Cell borders"> <ToolbarButton tooltip="Cell borders">
<Grid2X2 /> <Grid2X2 />
</ToolbarButton> </ToolbarButton>
@ -280,6 +281,7 @@ function TableBordersDropdownMenuContent(
return ( return (
<DropdownMenuContent <DropdownMenuContent
className="min-w-[220px]" className="min-w-[220px]"
style={DEFAULT_THEME_STYLE}
onCloseAutoFocus={(e) => { onCloseAutoFocus={(e) => {
e.preventDefault(); e.preventDefault();
editor.tf.focus(); editor.tf.focus();
@ -357,7 +359,7 @@ function ColorDropdownMenu({ children, tooltip }: { children: React.ReactNode; t
return ( return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarButton tooltip={tooltip}>{children}</ToolbarButton> <ToolbarButton tooltip={tooltip}>{children}</ToolbarButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>

8
apps/web/src/components/ui/report/elements/TableToolbarButton.tsx
View File

@ -45,6 +45,7 @@ import {
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar'; import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
export function TableToolbarButton(props: DropdownMenuProps) { export function TableToolbarButton(props: DropdownMenuProps) {
const tableSelected = useEditorSelector( const tableSelected = useEditorSelector(
@ -58,13 +59,16 @@ export function TableToolbarButton(props: DropdownMenuProps) {
return ( return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarButton pressed={open} tooltip="Table" isDropdown> <ToolbarButton pressed={open} tooltip="Table" isDropdown>
<Table /> <Table />
</ToolbarButton> </ToolbarButton>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="flex w-[180px] min-w-0 flex-col" align="start"> <DropdownMenuContent
className="flex w-[180px] min-w-0 flex-col"
align="start"
style={DEFAULT_THEME_STYLE}>
<DropdownMenuGroup> <DropdownMenuGroup>
<DropdownMenuSub> <DropdownMenuSub>
<DropdownMenuSubTrigger className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50"> <DropdownMenuSubTrigger className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50">

4
apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx
View File

@ -35,6 +35,7 @@ import {
import { getBlockType, setBlockType } from './transforms'; import { getBlockType, setBlockType } from './transforms';
import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar'; import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
const turnIntoItems = [ const turnIntoItems = [
{ {
@ -137,7 +138,7 @@ export function TurnIntoToolbarButton(props: DropdownMenuProps) {
return ( return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}> <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger>
<ToolbarButton className="min-w-[125px]" pressed={open} tooltip="Turn into" isDropdown> <ToolbarButton className="min-w-[125px]" pressed={open} tooltip="Turn into" isDropdown>
{selectedItem.label} {selectedItem.label}
</ToolbarButton> </ToolbarButton>
@ -145,6 +146,7 @@ export function TurnIntoToolbarButton(props: DropdownMenuProps) {
<DropdownMenuContent <DropdownMenuContent
className="ignore-click-outside/toolbar min-w-0" className="ignore-click-outside/toolbar min-w-0"
style={DEFAULT_THEME_STYLE}
onCloseAutoFocus={(e) => { onCloseAutoFocus={(e) => {
e.preventDefault(); e.preventDefault();
editor.tf.focus(); editor.tf.focus();

2
apps/web/src/components/ui/report/plugins/test-plugin.tsx
View File

@ -7,14 +7,12 @@ export const MyTestPlugin = createPlatePlugin({
// Define editor.tf.doc.format() // Define editor.tf.doc.format()
.extendTransforms(({ editor, type }) => ({ .extendTransforms(({ editor, type }) => ({
format: () => { format: () => {
console.log('format', editor, type);
editor.tf.normalize({ force: true }); editor.tf.normalize({ force: true });
} }
})) }))
// Define editor.api.doc.format() // Define editor.api.doc.format()
.extendApi(({ editor, type }) => ({ .extendApi(({ editor, type }) => ({
save: async () => { save: async () => {
console.log('save', editor, type);
// Save the document // Save the document
// await fetch(...); // await fetch(...);
} }

7
apps/web/src/components/ui/toolbar/Toolbar.tsx
View File

@ -268,13 +268,6 @@ export const ToolbarMenuGroup = ({
); );
}; };
type TooltipProps<T extends React.ElementType> = {
tooltip?: React.ReactNode;
tooltipContentProps?: Omit<React.ComponentPropsWithoutRef<typeof TooltipContent>, 'children'>;
tooltipProps?: Omit<React.ComponentPropsWithoutRef<typeof Tooltip>, 'children'>;
tooltipTriggerProps?: React.ComponentPropsWithoutRef<typeof TooltipTrigger>;
} & React.ComponentProps<T>;
const WithTooltip: React.FC<{ children: React.ReactNode; tooltip?: React.ReactNode }> = ({ const WithTooltip: React.FC<{ children: React.ReactNode; tooltip?: React.ReactNode }> = ({
children, children,
tooltip tooltip