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 (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild>
<DropdownMenuTrigger>
<ToolbarButton pressed={open} tooltip="Align" isDropdown>
<IconValue />
</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 { Editor } from '../Editor';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
export interface TComment {
id: string;
@ -334,6 +335,7 @@ function CommentMoreDropdown(props: {
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-48"
style={DEFAULT_THEME_STYLE}
onCloseAutoFocus={(e) => {
if (selectedEditCommentRef.current) {
onCloseAutoFocus?.();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -17,6 +17,7 @@ import {
} from '@/components/ui/dropdown-menu';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
export function MoreToolbarButton(props: DropdownMenuProps) {
const editor = useEditorRef();
@ -24,7 +25,7 @@ export function MoreToolbarButton(props: DropdownMenuProps) {
return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild>
<DropdownMenuTrigger>
<ToolbarButton pressed={open} tooltip="Insert">
<Dots />
</ToolbarButton>
@ -32,7 +33,8 @@ export function MoreToolbarButton(props: DropdownMenuProps) {
<DropdownMenuContent
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>
<DropdownMenuItem
onSelect={() => {

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

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

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

@ -45,6 +45,7 @@ import {
import { cn } from '@/lib/utils';
import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
export function TableToolbarButton(props: DropdownMenuProps) {
const tableSelected = useEditorSelector(
@ -58,13 +59,16 @@ export function TableToolbarButton(props: DropdownMenuProps) {
return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild>
<DropdownMenuTrigger>
<ToolbarButton pressed={open} tooltip="Table" isDropdown>
<Table />
</ToolbarButton>
</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>
<DropdownMenuSub>
<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 { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar';
import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
const turnIntoItems = [
{
@ -137,7 +138,7 @@ export function TurnIntoToolbarButton(props: DropdownMenuProps) {
return (
<DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
<DropdownMenuTrigger asChild>
<DropdownMenuTrigger>
<ToolbarButton className="min-w-[125px]" pressed={open} tooltip="Turn into" isDropdown>
{selectedItem.label}
</ToolbarButton>
@ -145,6 +146,7 @@ export function TurnIntoToolbarButton(props: DropdownMenuProps) {
<DropdownMenuContent
className="ignore-click-outside/toolbar min-w-0"
style={DEFAULT_THEME_STYLE}
onCloseAutoFocus={(e) => {
e.preventDefault();
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()
.extendTransforms(({ editor, type }) => ({
format: () => {
console.log('format', editor, type);
editor.tf.normalize({ force: true });
}
}))
// Define editor.api.doc.format()
.extendApi(({ editor, type }) => ({
save: async () => {
console.log('save', editor, type);
// Save the document
// 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 }> = ({
children,
tooltip