From 3d726438fbea9209e84bc43a73b6c96835faac72 Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Sat, 2 Aug 2025 16:22:17 -0600 Subject: [PATCH] custom colors in dropdown --- .../api/buster_rest/users/queryRequests.ts | 2 +- .../report-playground/ReportPlayground.tsx | 24 ++++- .../ui/report/elements/DateNode.tsx | 5 +- .../elements/FontColorToolbarButton.tsx | 90 ++++++++----------- .../components/ui/report/plugins/font-kit.tsx | 10 ++- apps/web/src/lib/colors.ts | 4 + .../src/reports/report-elements.ts | 4 + 7 files changed, 78 insertions(+), 61 deletions(-) diff --git a/apps/web/src/api/buster_rest/users/queryRequests.ts b/apps/web/src/api/buster_rest/users/queryRequests.ts index ffa9d877a..80811ce54 100644 --- a/apps/web/src/api/buster_rest/users/queryRequests.ts +++ b/apps/web/src/api/buster_rest/users/queryRequests.ts @@ -26,7 +26,7 @@ export const useGetMyUserInfo = ( return useQuery({ ...userQueryKeys.userGetUserMyself, queryFn: getMyUserInfo, - enabled: false, //This is a server only query, + enabled: true, //This is a server only query, select: props?.select, ...props }); diff --git a/apps/web/src/app/test/report-playground/ReportPlayground.tsx b/apps/web/src/app/test/report-playground/ReportPlayground.tsx index 9b62a3e5b..e85e0767e 100644 --- a/apps/web/src/app/test/report-playground/ReportPlayground.tsx +++ b/apps/web/src/app/test/report-playground/ReportPlayground.tsx @@ -270,7 +270,29 @@ const value: ReportElements = [ url: '/docs' }, { - text: ' to discover more.' + fontSize: '20px', + text: 'to disc', + bold: true, + italic: true, + underline: true, + strikethrough: true + }, + { + text: 'asdfsdf', + fontSize: '20px', + bold: true, + italic: true, + underline: true, + strikethrough: true, + code: true + }, + { + fontSize: '20px', + bold: true, + italic: true, + underline: true, + strikethrough: true, + text: 'over more' } ], type: 'p', diff --git a/apps/web/src/components/ui/report/elements/DateNode.tsx b/apps/web/src/components/ui/report/elements/DateNode.tsx index ae2d44739..6e0449413 100644 --- a/apps/web/src/components/ui/report/elements/DateNode.tsx +++ b/apps/web/src/components/ui/report/elements/DateNode.tsx @@ -68,10 +68,7 @@ export function DateElement(props: PlateElementProps) { { - console.log(date); - return false; - }} + disabled={false} disableNavigation={false} onSelect={(date) => { if (!date) return; diff --git a/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx b/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx index 5cfcd17e2..de3d73a4b 100644 --- a/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx +++ b/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx @@ -16,17 +16,13 @@ import { DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; -import { - Tooltip, - TooltipBase, - TooltipContent, - TooltipProvider, - TooltipTrigger -} from '@/components/ui/tooltip'; +import { Tooltip } from '@/components/ui/tooltip'; import { cn } from '@/lib/utils'; import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar'; -import { THEME_RESET_STYLE } from '@/styles/theme-reset'; +import { useGetOrganizationUsers } from '@/api/buster_rest/organizations'; +import { useGetPalettes } from '@/context-hooks/usePalettes'; +import { isBrightColor } from '@/lib/colors'; export function FontColorToolbarButton({ children, @@ -37,6 +33,7 @@ export function FontColorToolbarButton({ tooltip?: string; } & DropdownMenuProps) { const editor = useEditorRef(); + const { organizationPalettes } = useGetPalettes(); const selectionDefined = useEditorSelector((editor) => !!editor.selection, []); @@ -45,6 +42,17 @@ export function FontColorToolbarButton({ const [selectedColor, setSelectedColor] = React.useState(); const [open, setOpen] = React.useState(false); + const customColors: TColor[] = React.useMemo(() => { + const dedupedColors = new Set(organizationPalettes.flatMap((palette) => palette.colors)); + return Array.from(dedupedColors).map((color) => { + return { + isBrightColor: isBrightColor(color), + name: color, + value: color + }; + }); + }, [organizationPalettes]); + const onToggle = React.useCallback( (value = !open) => { setOpen(value); @@ -93,6 +101,8 @@ export function FontColorToolbarButton({ } }, [color, selectionDefined]); + console.log(customColors, organizationPalettes); + return ( - + @@ -131,25 +141,29 @@ function PureColorPicker({ ...props }: React.ComponentProps<'div'> & { colors: TColor[]; - customColors: TColor[]; + customColors: TColor[] | undefined; clearColor: () => void; updateColor: (color: string) => void; updateCustomColor: (color: string) => void; color?: string; }) { + const hasCustomColors: boolean = !!customColors && customColors?.length > 0; + return (
- - - - + {hasCustomColors && ( + + + + )} + - { setValue(e.target.value); @@ -254,7 +268,7 @@ function ColorCustom({
- + */} ); @@ -772,31 +786,3 @@ export const DEFAULT_COLORS = [ value: '#4C1130' } ]; - -const DEFAULT_CUSTOM_COLORS = [ - { - isBrightColor: false, - name: 'dark orange 3', - value: '#783F04' - }, - { - isBrightColor: false, - name: 'dark grey 3', - value: '#666666' - }, - { - isBrightColor: false, - name: 'dark grey 2', - value: '#999999' - }, - { - isBrightColor: false, - name: 'light cornflower blue 1', - value: '#6C9EEB' - }, - { - isBrightColor: false, - name: 'dark magenta 3', - value: '#4C1130' - } -]; diff --git a/apps/web/src/components/ui/report/plugins/font-kit.tsx b/apps/web/src/components/ui/report/plugins/font-kit.tsx index fd638a477..b67866161 100644 --- a/apps/web/src/components/ui/report/plugins/font-kit.tsx +++ b/apps/web/src/components/ui/report/plugins/font-kit.tsx @@ -6,12 +6,15 @@ import { FontBackgroundColorPlugin, FontColorPlugin, FontFamilyPlugin, - FontSizePlugin + FontSizePlugin, + FontWeightPlugin } from '@platejs/basic-styles/react'; import { KEYS } from 'platejs'; const options = { - inject: { targetPlugins: [KEYS.p] } + inject: { + targetPlugins: [KEYS.p] + } } satisfies PlatePluginConfig; export const FontKit = [ @@ -25,5 +28,6 @@ export const FontKit = [ }), FontBackgroundColorPlugin.configure(options), FontSizePlugin.configure(options), - FontFamilyPlugin.configure(options) + FontFamilyPlugin.configure(options), + FontWeightPlugin.configure(options) ]; diff --git a/apps/web/src/lib/colors.ts b/apps/web/src/lib/colors.ts index 6d587ed8e..cb3612796 100644 --- a/apps/web/src/lib/colors.ts +++ b/apps/web/src/lib/colors.ts @@ -6,6 +6,10 @@ export const determineFontColorContrast = (color: string, threshold = TEXT_THRES return fontColorContrast(color, threshold); }; +export const isBrightColor = (color: string) => { + return determineFontColorContrast(color) === '#ffffff'; +}; + export const addOpacityToColor = (color: string, opacity: number): string => { if (opacity === 1) { return color; diff --git a/packages/server-shared/src/reports/report-elements.ts b/packages/server-shared/src/reports/report-elements.ts index e0fe1a5ce..185590c48 100644 --- a/packages/server-shared/src/reports/report-elements.ts +++ b/packages/server-shared/src/reports/report-elements.ts @@ -32,6 +32,10 @@ export const TextSchema = z kbd: z.boolean().optional(), strikethrough: z.boolean().optional(), code: z.boolean().optional(), + fontSize: z + .string() + .regex(/^(?:\d+px)$/) + .optional(), }) .merge(AttributesSchema);