Fix type of icon props in RTE (#3299)

vivid-planet · Jan 30, 2025 · 9006e05 · 9006e05
1 parent 9f9a362
commit 9006e05
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/packages/admin/admin-rte/src/core/Controls/ControlButton.tsx b/packages/admin/admin-rte/src/core/Controls/ControlButton.tsx
@@ -2,7 +2,7 @@ import { createComponentSlot, ThemedComponentBaseProps } from "@comet/admin";
 import { ComponentsOverrides } from "@mui/material";
 import { css, Theme, useThemeProps } from "@mui/material/styles";
 import { SvgIconProps } from "@mui/material/SvgIcon";
-import { MouseEvent, PropsWithChildren } from "react";
+import { ForwardRefExoticComponent, MouseEvent, PropsWithChildren, RefAttributes } from "react";
 
 import getRteTheme from "../utils/getRteTheme";
 
@@ -73,10 +73,10 @@ export interface IProps
     disabled?: boolean;
     selected?: boolean;
     onButtonClick?: (e: MouseEvent) => void;
-    icon?: (props: SvgIconProps) => JSX.Element | null;
+    icon?: ForwardRefExoticComponent<Omit<SvgIconProps, "ref"> & RefAttributes<SVGSVGElement>>;
 
     /** @deprecated use icon instead */
-    Icon?: (props: SvgIconProps) => JSX.Element | null;
+    Icon?: ForwardRefExoticComponent<Omit<SvgIconProps, "ref"> & RefAttributes<SVGSVGElement>>;
 }
 
 export function ControlButton(inProps: PropsWithChildren<IProps>) {

diff --git a/packages/admin/admin-rte/src/core/types.ts b/packages/admin/admin-rte/src/core/types.ts
@@ -1,6 +1,6 @@
 import { SvgIconProps } from "@mui/material/SvgIcon";
 import { DraftInlineStyleType, Editor, EditorState } from "draft-js";
-import { ComponentType, CSSProperties, MouseEvent, ReactNode, RefObject } from "react";
+import { ComponentType, CSSProperties, ForwardRefExoticComponent, MouseEvent, ReactNode, RefAttributes, RefObject } from "react";
 
 import { IRteOptions, SupportedThings } from "./Rte";
 
@@ -15,7 +15,7 @@ export interface IBlocktypeConfig {
     renderConfig?: DraftBlockRenderConfig; // visual appearance of the blocktype
     label?: string | ReactNode; // displayed in the dropdown
     group?: "dropdown" | "button"; // displays the element in the dropdown or as button
-    icon?: (props: SvgIconProps) => JSX.Element | null;
+    icon?: ForwardRefExoticComponent<Omit<SvgIconProps, "ref"> & RefAttributes<SVGSVGElement>>;
     supportedBy?: SupportedThings; // blocktype is active when this "supported thing" is active
 }
 
@@ -29,11 +29,11 @@ export interface IFeatureConfig<T extends string = string> {
     disabled?: boolean;
     selected?: boolean;
     onButtonClick?: (e: MouseEvent) => void;
-    icon?: (props: SvgIconProps) => JSX.Element | null;
+    icon?: ForwardRefExoticComponent<Omit<SvgIconProps, "ref"> & RefAttributes<SVGSVGElement>>;
     tooltipText?: ReactNode;
 
     /** @deprecated use icon instead */
-    Icon?: (props: SvgIconProps) => JSX.Element | null;
+    Icon?: ForwardRefExoticComponent<Omit<SvgIconProps, "ref"> & RefAttributes<SVGSVGElement>>;
 }
 
 type CustomInlineStyleType = "SUP" | "SUB" | string;
@@ -70,7 +70,7 @@ export interface ICustomBlockTypeMap_Deprecated {
 export interface CustomInlineStyles {
     [name: string]: {
         label: ReactNode;
-        icon?: (props: SvgIconProps) => JSX.Element | null;
+        icon?: ForwardRefExoticComponent<Omit<SvgIconProps, "ref"> & RefAttributes<SVGSVGElement>>;
         tooltipText?: ReactNode;
         style: CSSProperties;
     };