custom colors in dropdown

apps/web/src/api/buster_rest/users/queryRequests.ts

@@ -26,7 +26,7 @@ export const useGetMyUserInfo = <TData = UserResponse>(
   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
   });

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',

apps/web/src/components/ui/report/elements/DateNode.tsx

@@ -68,10 +68,7 @@ export function DateElement(props: PlateElementProps<TDateElement>) {
         <PopoverContent className="w-auto p-0">
           <Calendar
             selected={new Date(element.date as string)}
-            disabled={(date) => {
-              console.log(date);
-              return false;
-            }}
+            disabled={false}
             disableNavigation={false}
             onSelect={(date) => {
               if (!date) return;

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<string>();
   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 (
     <DropdownMenu
       open={open}
@@ -106,12 +116,12 @@ export function FontColorToolbarButton({
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="start" style={THEME_RESET_STYLE}>
+      <DropdownMenuContent align="start">
         <ColorPicker
           color={selectedColor || color}
           clearColor={clearColor}
           colors={DEFAULT_COLORS}
-          customColors={DEFAULT_CUSTOM_COLORS}
+          customColors={customColors}
           updateColor={updateColorAndClose}
           updateCustomColor={updateColor}
         />
@@ -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 (
     <div className={cn('flex flex-col', className)} {...props}>
-      <ToolbarMenuGroup label="Custom Colors">
-        <ColorCustom
-          color={color}
-          className="px-2"
-          colors={colors}
-          customColors={customColors}
-          updateColor={updateColor}
-          updateCustomColor={updateCustomColor}
-        />
-      </ToolbarMenuGroup>
-      <ToolbarMenuGroup label="Default Colors">
+      {hasCustomColors && (
+        <ToolbarMenuGroup label="Organization colors">
+          <ColorCustom
+            color={color}
+            className="px-2"
+            colors={colors}
+            customColors={customColors || []}
+            updateColor={updateColor}
+            updateCustomColor={updateCustomColor}
+          />
+        </ToolbarMenuGroup>
+      )}
+      <ToolbarMenuGroup label="Default colors">
         <ColorDropdownMenuItems
           color={color}
           className="px-2"
@@ -232,7 +246,7 @@ function ColorCustom({
   return (
     <div className={cn('relative flex flex-col gap-4', className)} {...props}>
       <ColorDropdownMenuItems color={color} colors={computedColors} updateColor={updateColor}>
-        <ColorInput
+        {/* <ColorInput
           value={value}
           onChange={(e) => {
             setValue(e.target.value);
@@ -254,7 +268,7 @@ function ColorCustom({
               <Plus />
             </div>
           </DropdownMenuItem>
-        </ColorInput>
+        </ColorInput> */}
       </ColorDropdownMenuItems>
     </div>
   );
@@ -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'
-  }
-];

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)
 ];

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;

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);