[WEB-5459] feat(codemods): add function declaration transformer with tests (#8137)

- Add jscodeshift-based codemod to convert arrow function components to function declarations
- Support React.FC, observer-wrapped, and forwardRef components
- Include comprehensive test suite covering edge cases
- Add npm script to run transformer across codebase
- Target only .tsx files in source directories, excluding node_modules and declaration files

* [WEB-5459] chore: updates after running codemod

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>

packages/editor/src/core/components/editors/document/collaborative-editor.tsx

@@ -14,7 +14,7 @@ import { DocumentEditorSideEffects } from "@/plane-editor/components/document-ed
 // types
 import type { EditorRefApi, ICollaborativeDocumentEditorProps } from "@/types";
 
-const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> = (props) => {
+function CollaborativeDocumentEditor(props: ICollaborativeDocumentEditorProps) {
   const {
     aiHandler,
     bubbleMenuEnabled = true,
@@ -105,13 +105,14 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
       />
     </>
   );
-};
+}
 
-const CollaborativeDocumentEditorWithRef = React.forwardRef<EditorRefApi, ICollaborativeDocumentEditorProps>(
-  (props, ref) => (
-    <CollaborativeDocumentEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />
-  )
-);
+const CollaborativeDocumentEditorWithRef = React.forwardRef(function CollaborativeDocumentEditorWithRef(
+  props: ICollaborativeDocumentEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return <CollaborativeDocumentEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />;
+});
 
 CollaborativeDocumentEditorWithRef.displayName = "CollaborativeDocumentEditorWithRef";
 

packages/editor/src/core/components/editors/document/editor.tsx

@@ -18,7 +18,7 @@ import { DocumentEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // types
 import type { EditorRefApi, IDocumentEditorProps } from "@/types";
 
-const DocumentEditor = (props: IDocumentEditorProps) => {
+function DocumentEditor(props: IDocumentEditorProps) {
   const {
     bubbleMenuEnabled = false,
     containerClassName,
@@ -99,11 +99,14 @@ const DocumentEditor = (props: IDocumentEditorProps) => {
       isTouchDevice={!!isTouchDevice}
     />
   );
-};
+}
 
-const DocumentEditorWithRef = forwardRef<EditorRefApi, IDocumentEditorProps>((props, ref) => (
-  <DocumentEditor {...props} forwardedRef={ref as MutableRefObject<EditorRefApi | null>} />
-));
+const DocumentEditorWithRef = forwardRef(function DocumentEditorWithRef(
+  props: IDocumentEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return <DocumentEditor {...props} forwardedRef={ref as MutableRefObject<EditorRefApi | null>} />;
+});
 
 DocumentEditorWithRef.displayName = "DocumentEditorWithRef";
 

packages/editor/src/core/components/editors/document/loader.tsx

@@ -6,7 +6,7 @@ type Props = {
   className?: string;
 };
 
-export const DocumentContentLoader = (props: Props) => {
+export function DocumentContentLoader(props: Props) {
   const { className } = props;
 
   return (
@@ -48,4 +48,4 @@ export const DocumentContentLoader = (props: Props) => {
       </Loader>
     </div>
   );
-};
+}

packages/editor/src/core/components/editors/document/page-renderer.tsx

@@ -23,7 +23,7 @@ type Props = {
   disabledExtensions: IEditorProps["disabledExtensions"];
 };
 
-export const PageRenderer = (props: Props) => {
+export function PageRenderer(props: Props) {
   const {
     aiHandler,
     bubbleMenuEnabled,
@@ -71,4 +71,4 @@ export const PageRenderer = (props: Props) => {
       )}
     </div>
   );
-};
+}

packages/editor/src/core/components/editors/editor-container.tsx

@@ -20,7 +20,7 @@ type Props = {
   isTouchDevice: boolean;
 };
 
-export const EditorContainer: FC<Props> = (props) => {
+export function EditorContainer(props: Props) {
   const { children, displayConfig, editor, editorContainerClassName, id, isTouchDevice } = props;
   // refs
   const containerRef = useRef<HTMLDivElement>(null);
@@ -100,4 +100,4 @@ export const EditorContainer: FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}

packages/editor/src/core/components/editors/editor-content.tsx

@@ -9,7 +9,7 @@ type Props = {
   tabIndex?: number;
 };
 
-export const EditorContentWrapper: FC<Props> = (props) => {
+export function EditorContentWrapper(props: Props) {
   const { editor, children, tabIndex, id } = props;
 
   return (
@@ -18,4 +18,4 @@ export const EditorContentWrapper: FC<Props> = (props) => {
       {children}
     </div>
   );
-};
+}

packages/editor/src/core/components/editors/editor-wrapper.tsx

@@ -16,7 +16,7 @@ type Props = IEditorProps & {
   extensions: Extensions;
 };
 
-export const EditorWrapper: React.FC<Props> = (props) => {
+export function EditorWrapper(props: Props) {
   const {
     children,
     containerClassName,
@@ -93,4 +93,4 @@ export const EditorWrapper: React.FC<Props> = (props) => {
       </div>
     </EditorContainer>
   );
-};
+}

packages/editor/src/core/components/editors/link-view-container.tsx

@@ -13,7 +13,7 @@ type Props = {
   containerRef: React.RefObject<HTMLDivElement>;
 };
 
-export const LinkViewContainer: FC<Props> = ({ editor, containerRef }) => {
+export function LinkViewContainer({ editor, containerRef }: Props) {
   const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
   const [isOpen, setIsOpen] = useState(false);
   const [virtualElement, setVirtualElement] = useState<Element | null>(null);
@@ -201,4 +201,4 @@ export const LinkViewContainer: FC<Props> = ({ editor, containerRef }) => {
       )}
     </>
   );
-};
+}

packages/editor/src/core/components/editors/lite-text/editor.tsx

@@ -6,7 +6,7 @@ import { EnterKeyExtension } from "@/extensions";
 // types
 import type { EditorRefApi, ILiteTextEditorProps } from "@/types";
 
-const LiteTextEditor: React.FC<ILiteTextEditorProps> = (props) => {
+function LiteTextEditor(props: ILiteTextEditorProps) {
   const { onEnterKeyPress, disabledExtensions, extensions: externalExtensions = [] } = props;
 
   const extensions = useMemo(() => {
@@ -20,11 +20,14 @@ const LiteTextEditor: React.FC<ILiteTextEditorProps> = (props) => {
   }, [externalExtensions, disabledExtensions, onEnterKeyPress]);
 
   return <EditorWrapper {...props} extensions={extensions} />;
-};
+}
 
-const LiteTextEditorWithRef = forwardRef<EditorRefApi, ILiteTextEditorProps>((props, ref) => (
-  <LiteTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />
-));
+const LiteTextEditorWithRef = forwardRef(function LiteTextEditorWithRef(
+  props: ILiteTextEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return <LiteTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />;
+});
 
 LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";
 

packages/editor/src/core/components/editors/rich-text/editor.tsx

@@ -9,7 +9,7 @@ import { RichTextEditorAdditionalExtensions } from "@/plane-editor/extensions/ri
 // types
 import type { EditorRefApi, IRichTextEditorProps } from "@/types";
 
-const RichTextEditor: React.FC<IRichTextEditorProps> = (props) => {
+function RichTextEditor(props: IRichTextEditorProps) {
   const {
     bubbleMenuEnabled = true,
     disabledExtensions,
@@ -54,11 +54,14 @@ const RichTextEditor: React.FC<IRichTextEditorProps> = (props) => {
       )}
     </EditorWrapper>
   );
-};
+}
 
-const RichTextEditorWithRef = forwardRef<EditorRefApi, IRichTextEditorProps>((props, ref) => (
-  <RichTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />
-));
+const RichTextEditorWithRef = forwardRef(function RichTextEditorWithRef(
+  props: IRichTextEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return <RichTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />;
+});
 
 RichTextEditorWithRef.displayName = "RichTextEditorWithRef";
 

packages/editor/src/core/components/links/link-edit-view.tsx

@@ -14,26 +14,28 @@ type InputViewProps = {
   autoFocus?: boolean;
 };
 
-const InputView = ({ label, value, placeholder, onChange, autoFocus }: InputViewProps) => (
-  <div className="flex flex-col gap-1">
-    <label className="inline-block font-semibold text-xs text-custom-text-400">{label}</label>
-    <input
-      placeholder={placeholder}
-      onClick={(e) => e.stopPropagation()}
-      className="w-[280px] outline-none bg-custom-background-90 text-custom-text-900 text-sm border border-custom-border-300 rounded-md p-2"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      autoFocus={autoFocus}
-    />
-  </div>
-);
+function InputView({ label, value, placeholder, onChange, autoFocus }: InputViewProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="inline-block font-semibold text-xs text-custom-text-400">{label}</label>
+      <input
+        placeholder={placeholder}
+        onClick={(e) => e.stopPropagation()}
+        className="w-[280px] outline-none bg-custom-background-90 text-custom-text-900 text-sm border border-custom-border-300 rounded-md p-2"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        autoFocus={autoFocus}
+      />
+    </div>
+  );
+}
 
 type LinkEditViewProps = {
   viewProps: LinkViewProps;
   switchView: (view: LinkViews) => void;
 };
 
-export const LinkEditView = ({ viewProps }: LinkEditViewProps) => {
+export function LinkEditView({ viewProps }: LinkEditViewProps) {
   const { editor, from, to, url: initialUrl, text: initialText, closeLinkView } = viewProps;
 
   // State
@@ -147,4 +149,4 @@ export const LinkEditView = ({ viewProps }: LinkEditViewProps) => {
       </div>
     </div>
   );
-};
+}

packages/editor/src/core/components/links/link-preview.tsx

@@ -2,13 +2,13 @@ import { Copy, GlobeIcon, Link2Off, PencilIcon } from "lucide-react";
 // components
 import type { LinkViewProps, LinkViews } from "@/components/links";
 
-export const LinkPreview = ({
+export function LinkPreview({
   viewProps,
   switchView,
 }: {
   viewProps: LinkViewProps;
   switchView: (view: LinkViews) => void;
-}) => {
+}) {
   const { editor, from, to, url } = viewProps;
 
   const removeLink = () => {
@@ -52,4 +52,4 @@ export const LinkPreview = ({
       </div>
     </div>
   );
-};
+}

packages/editor/src/core/components/links/link-view.tsx

@@ -16,7 +16,7 @@ export type LinkViewProps = {
   closeLinkView: () => void;
 };
 
-export const LinkView = (props: LinkViewProps & { style: CSSProperties }) => {
+export function LinkView(props: LinkViewProps & { style: CSSProperties }) {
   const [currentView, setCurrentView] = useState<LinkViews>(props.view ?? "LinkPreview");
   const [prevFrom, setPrevFrom] = useState(props.from);
 
@@ -37,4 +37,4 @@ export const LinkView = (props: LinkViewProps & { style: CSSProperties }) => {
       {currentView === "LinkEditView" && <LinkEditView viewProps={props} switchView={switchView} />}
     </>
   );
-};
+}

packages/editor/src/core/components/menus/ai-menu.tsx

@@ -10,7 +10,7 @@ type Props = {
   menu: TAIHandler["menu"];
 };
 
-export const AIFeaturesMenu: React.FC<Props> = (props) => {
+export function AIFeaturesMenu(props: Props) {
   const { menu } = props;
   // states
   const [isPopupVisible, setIsPopupVisible] = useState(false);
@@ -94,4 +94,4 @@ export const AIFeaturesMenu: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}

packages/editor/src/core/components/menus/block-menu.tsx

@@ -34,7 +34,7 @@ export type BlockMenuOption = {
   isDisabled?: boolean;
 };
 
-export const BlockMenu = (props: Props) => {
+export function BlockMenu(props: Props) {
   const { editor, workItemIdentifier } = props;
   const [isOpen, setIsOpen] = useState(false);
   const [isAnimatedIn, setIsAnimatedIn] = useState(false);
@@ -245,4 +245,4 @@ export const BlockMenu = (props: Props) => {
       </div>
     </FloatingPortal>
   );
-};
+}

packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx

@@ -14,7 +14,7 @@ type Props = {
   editorState: EditorStateType;
 };
 
-export const TextAlignmentSelector: React.FC<Props> = (props) => {
+export function TextAlignmentSelector(props: Props) {
   const { editor, editorState } = props;
   const menuItem = TextAlignItem(editor);
 
@@ -80,4 +80,4 @@ export const TextAlignmentSelector: React.FC<Props> = (props) => {
       ))}
     </div>
   );
-};
+}

packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx

@@ -17,7 +17,7 @@ type Props = {
   editorState: EditorStateType;
 };
 
-export const BubbleMenuColorSelector: FC<Props> = (props) => {
+export function BubbleMenuColorSelector(props: Props) {
   const { editor, editorState } = props;
   // floating ui
   const { options, getReferenceProps, getFloatingProps } = useFloatingMenu({});
@@ -111,4 +111,4 @@ export const BubbleMenuColorSelector: FC<Props> = (props) => {
       </section>
     </FloatingMenuRoot>
   );
-};
+}

packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx

@@ -16,7 +16,7 @@ type Props = {
   editor: Editor;
 };
 
-export const BubbleMenuLinkSelector: FC<Props> = (props) => {
+export function BubbleMenuLinkSelector(props: Props) {
   const { editor } = props;
   // states
   const [error, setError] = useState(false);
@@ -119,4 +119,4 @@ export const BubbleMenuLinkSelector: FC<Props> = (props) => {
       </div>
     </FloatingMenuRoot>
   );
-};
+}

packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx

@@ -30,7 +30,7 @@ type Props = {
   editor: Editor;
 };
 
-export const BubbleMenuNodeSelector: FC<Props> = (props) => {
+export function BubbleMenuNodeSelector(props: Props) {
   const { editor } = props;
   // floating ui
   const { options, getReferenceProps, getFloatingProps } = useFloatingMenu({});
@@ -102,4 +102,4 @@ export const BubbleMenuNodeSelector: FC<Props> = (props) => {
       </section>
     </FloatingMenuRoot>
   );
-};
+}

packages/editor/src/core/components/menus/bubble-menu/root.tsx

@@ -64,7 +64,7 @@ type Props = {
   editor: Editor;
 };
 
-export const EditorBubbleMenu: FC<Props> = (props) => {
+export function EditorBubbleMenu(props: Props) {
   const { editor } = props;
   // states
   const [isSelecting, setIsSelecting] = useState(false);
@@ -223,4 +223,4 @@ export const EditorBubbleMenu: FC<Props> = (props) => {
       )}
     </BubbleMenu>
   );
-};
+}

packages/editor/src/core/components/menus/floating-menu/root.tsx

@@ -14,7 +14,7 @@ type Props = {
   options: UseFloatingReturn;
 };
 
-export const FloatingMenuRoot: React.FC<Props> = (props) => {
+export function FloatingMenuRoot(props: Props) {
   const { children, classNames, getFloatingProps, getReferenceProps, menuButton, onClick, options } = props;
   // derived values
   const { refs, floatingStyles, context } = options;
@@ -58,4 +58,4 @@ export const FloatingMenuRoot: React.FC<Props> = (props) => {
       )}
     </>
   );
-};
+}

packages/editor/src/core/extensions/callout/block.tsx

@@ -19,7 +19,7 @@ export type CustomCalloutNodeViewProps = NodeViewProps & {
   updateAttributes: (attrs: Partial<TCalloutBlockAttributes>) => void;
 };
 
-export const CustomCalloutBlock: React.FC<CustomCalloutNodeViewProps> = (props) => {
+export function CustomCalloutBlock(props: CustomCalloutNodeViewProps) {
   const { editor, node, updateAttributes } = props;
   // states
   const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
@@ -55,4 +55,4 @@ export const CustomCalloutBlock: React.FC<CustomCalloutNodeViewProps> = (props)
       <NodeViewContent as="div" className="w-full break-words" />
     </NodeViewWrapper>
   );
-};
+}

packages/editor/src/core/extensions/callout/color-selector.tsx

@@ -12,7 +12,7 @@ type Props = {
   toggleDropdown: () => void;
 };
 
-export const CalloutBlockColorSelector: React.FC<Props> = (props) => {
+export function CalloutBlockColorSelector(props: Props) {
   const { disabled, isOpen, onSelect, toggleDropdown } = props;
 
   const handleColorSelect = (val: string | null) => {
@@ -73,4 +73,4 @@ export const CalloutBlockColorSelector: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}

packages/editor/src/core/extensions/callout/logo-selector.tsx

@@ -15,7 +15,7 @@ type Props = {
   updateAttributes: (attrs: Partial<TCalloutBlockAttributes>) => void;
 };
 
-export const CalloutBlockLogoSelector: React.FC<Props> = (props) => {
+export function CalloutBlockLogoSelector(props: Props) {
   const { blockAttributes, disabled, handleOpen, isOpen, updateAttributes } = props;
 
   const logoValue: TLogoProps = {
@@ -93,4 +93,4 @@ export const CalloutBlockLogoSelector: React.FC<Props> = (props) => {
       />
     </div>
   );
-};
+}

packages/editor/src/core/extensions/code/code-block-node-view.tsx

@@ -19,7 +19,7 @@ type Props = {
   node: ProseMirrorNode;
 };
 
-export const CodeBlockComponent: React.FC<Props> = ({ node }) => {
+export function CodeBlockComponent({ node }: Props) {
   const [copied, setCopied] = useState(false);
 
   const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -60,4 +60,4 @@ export const CodeBlockComponent: React.FC<Props> = ({ node }) => {
       </pre>
     </NodeViewWrapper>
   );
-};
+}

packages/editor/src/core/extensions/custom-image/components/block.tsx

@@ -20,7 +20,7 @@ type CustomImageBlockProps = CustomImageNodeViewProps & {
   downloadSrc: string | undefined;
 };
 
-export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
+export function CustomImageBlock(props: CustomImageBlockProps) {
   // props
   const {
     editor,
@@ -339,4 +339,4 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       </div>
     </div>
   );
-};
+}

packages/editor/src/core/extensions/custom-image/components/node-view.tsx

@@ -16,7 +16,7 @@ export type CustomImageNodeViewProps = Omit<NodeViewProps, "extension" | "update
   updateAttributes: (attrs: Partial<TCustomImageAttributes>) => void;
 };
 
-export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) => {
+export function CustomImageNodeView(props: CustomImageNodeViewProps) {
   const { editor, extension, node, updateAttributes } = props;
   const { src: imgNodeSrc, status } = node.attrs;
 
@@ -147,4 +147,4 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
       </div>
     </NodeViewWrapper>
   );
-};
+}

packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx

@@ -14,7 +14,7 @@ type Props = {
   toggleToolbarViewStatus: (val: boolean) => void;
 };
 
-export const ImageAlignmentAction: React.FC<Props> = (props) => {
+export function ImageAlignmentAction(props: Props) {
   const { activeAlignment, handleChange, isTouchDevice, toggleToolbarViewStatus } = props;
   // states
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -61,4 +61,4 @@ export const ImageAlignmentAction: React.FC<Props> = (props) => {
       )}
     </div>
   );
-};
+}

packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx

@@ -6,7 +6,7 @@ type Props = {
   src: string;
 };
 
-export const ImageDownloadAction: React.FC<Props> = (props) => {
+export function ImageDownloadAction(props: Props) {
   const { src } = props;
 
   return (
@@ -21,4 +21,4 @@ export const ImageDownloadAction: React.FC<Props> = (props) => {
       </button>
     </Tooltip>
   );
-};
+}

packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx

@@ -20,7 +20,7 @@ type Props = {
   width: string;
 };
 
-const ImageFullScreenModalWithoutPortal = (props: Props) => {
+function ImageFullScreenModalWithoutPortal(props: Props) {
   const { aspectRatio, isFullScreenEnabled, isTouchDevice, downloadSrc, src, toggleFullScreenMode, width } = props;
   // refs
   const dragStart = useRef({ x: 0, y: 0 });
@@ -289,9 +289,9 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
       </div>
     </div>
   );
-};
+}
 
-export const ImageFullScreenModal: React.FC<Props> = (props) => {
+export function ImageFullScreenModal(props: Props) {
   let modal = <ImageFullScreenModalWithoutPortal {...props} />;
   const portal = document.querySelector("#editor-portal");
   if (portal) {
@@ -303,4 +303,4 @@ export const ImageFullScreenModal: React.FC<Props> = (props) => {
     }
   }
   return modal;
-};
+}

packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx

@@ -17,7 +17,7 @@ type Props = {
   toggleToolbarViewStatus: (val: boolean) => void;
 };
 
-export const ImageFullScreenActionRoot: React.FC<Props> = (props) => {
+export function ImageFullScreenActionRoot(props: Props) {
   const { image, isTouchDevice, toggleToolbarViewStatus } = props;
   // states
   const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(false);
@@ -55,4 +55,4 @@ export const ImageFullScreenActionRoot: React.FC<Props> = (props) => {
       </Tooltip>
     </>
   );
-};
+}

packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx

@@ -20,7 +20,7 @@ type Props = {
   width: string;
 };
 
-export const ImageToolbarRoot: React.FC<Props> = (props) => {
+export function ImageToolbarRoot(props: Props) {
   const { alignment, editor, downloadSrc, handleAlignmentChange, isTouchDevice } = props;
   // states
   const [shouldShowToolbar, setShouldShowToolbar] = useState(false);
@@ -54,4 +54,4 @@ export const ImageToolbarRoot: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}

packages/editor/src/core/extensions/custom-image/components/upload-status.tsx

@@ -7,7 +7,7 @@ type Props = {
   nodeId: string;
 };
 
-export const ImageUploadStatus: React.FC<Props> = (props) => {
+export function ImageUploadStatus(props: Props) {
   const { editor, nodeId } = props;
   // Displayed status that will animate smoothly
   const [displayStatus, setDisplayStatus] = useState(0);
@@ -57,4 +57,4 @@ export const ImageUploadStatus: React.FC<Props> = (props) => {
       {displayStatus}%
     </div>
   );
-};
+}

packages/editor/src/core/extensions/custom-image/components/uploader.tsx

@@ -23,7 +23,7 @@ type CustomImageUploaderProps = CustomImageNodeViewProps & {
   setIsUploaded: (isUploaded: boolean) => void;
 };
 
-export const CustomImageUploader = (props: CustomImageUploaderProps) => {
+export function CustomImageUploader(props: CustomImageUploaderProps) {
   const {
     editor,
     extension,
@@ -247,4 +247,4 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
       />
     </div>
   );
-};
+}

packages/editor/src/core/extensions/custom-image/extension.tsx

@@ -20,7 +20,7 @@ type Props = {
   isEditable: boolean;
 };
 
-export const CustomImageExtension = (props: Props) => {
+export function CustomImageExtension(props: Props) {
   const { fileHandler, isEditable } = props;
   // derived values
   const { getAssetSrc, getAssetDownloadSrc, restore: restoreImageFn } = fileHandler;
@@ -125,4 +125,4 @@ export const CustomImageExtension = (props: Props) => {
       ));
     },
   });
-};
+}

packages/editor/src/core/extensions/emoji/components/emojis-list.tsx

@@ -21,7 +21,10 @@ export type EmojisListDropdownProps = SuggestionProps<EmojiItem, { name: string
   forceOpen?: boolean;
 };
 
-export const EmojisListDropdown = forwardRef<EmojiListRef, EmojisListDropdownProps>((props, ref) => {
+export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
+  props: EmojisListDropdownProps,
+  ref: React.ForwardedRef<EmojiListRef>
+) {
   const { items, command, query, onClose, forceOpen = false } = props;
   // states
   const [selectedIndex, setSelectedIndex] = useState<number>(0);

packages/editor/src/core/extensions/image/extension.tsx

@@ -24,7 +24,7 @@ type Props = {
   fileHandler: TFileHandler;
 };
 
-export const ImageExtension = (props: Props) => {
+export function ImageExtension(props: Props) {
   const { fileHandler } = props;
   // derived values
   const { getAssetSrc } = fileHandler;
@@ -61,4 +61,4 @@ export const ImageExtension = (props: Props) => {
       ));
     },
   });
-};
+}

packages/editor/src/core/extensions/mentions/extension.tsx

@@ -9,7 +9,7 @@ import { MentionNodeView } from "./mention-node-view";
 // utils
 import { renderMentionsDropdown } from "./utils";
 
-export const CustomMentionExtension = (props: TMentionHandler) => {
+export function CustomMentionExtension(props: TMentionHandler) {
   const { searchCallback, renderComponent, getMentionedEntityDetails } = props;
   return CustomMentionExtensionConfig.extend({
     addOptions(this) {
@@ -32,4 +32,4 @@ export const CustomMentionExtension = (props: TMentionHandler) => {
       }),
     },
   });
-};
+}

packages/editor/src/core/extensions/mentions/mention-node-view.tsx

@@ -12,7 +12,7 @@ export type MentionNodeViewProps = NodeViewProps & {
   };
 };
 
-export const MentionNodeView: React.FC<MentionNodeViewProps> = (props) => {
+export function MentionNodeView(props: MentionNodeViewProps) {
   const {
     extension,
     node: { attrs },
@@ -26,4 +26,4 @@ export const MentionNodeView: React.FC<MentionNodeViewProps> = (props) => {
       })}
     </NodeViewWrapper>
   );
-};
+}

packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx

@@ -17,7 +17,7 @@ export type MentionsListDropdownProps = SuggestionProps<TMentionSection, TMentio
     onClose: () => void;
   };
 
-export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps, ref) => {
+export const MentionsListDropdown = forwardRef(function MentionsListDropdown(props: MentionsListDropdownProps, ref) {
   const { command, query, searchCallback, onClose } = props;
   // states
   const [sections, setSections] = useState<TMentionSection[]>([]);

packages/editor/src/core/extensions/slash-commands/command-items-list.tsx

@@ -233,6 +233,7 @@ export const getSlashCommandFilteredSections =
                 title: color.label,
                 description: "Change text color",
                 searchTerms: ["color", "text", color.label],
+
                 icon: (
                   <ALargeSmall
                     className="size-3.5"
@@ -241,6 +242,7 @@ export const getSlashCommandFilteredSections =
                     }}
                   />
                 ),
+
                 command: ({ editor, range }) => toggleTextColor(color.key, editor, range),
               }) as ISlashCommandItem
           ),
@@ -273,10 +275,12 @@ export const getSlashCommandFilteredSections =
                 description: "Change background color",
                 searchTerms: ["color", "bg", "background", color.label],
                 icon: <ALargeSmall className="size-3.5" />,
+
                 iconContainerStyle: {
                   borderRadius: "4px",
                   backgroundColor: color.backgroundColor,
                 },
+
                 command: ({ editor, range }) => toggleBackgroundColor(color.key, editor, range),
               }) as ISlashCommandItem
           ),

packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx

@@ -40,7 +40,7 @@ const highlightMatch = (text: string, query: string): React.ReactNode => {
   return text;
 };
 
-export const CommandMenuItem: React.FC<Props> = (props) => {
+export function CommandMenuItem(props: Props) {
   const { isSelected, item, itemIndex, onClick, onMouseEnter, sectionIndex, query } = props;
 
   return (
@@ -63,4 +63,4 @@ export const CommandMenuItem: React.FC<Props> = (props) => {
       {item.badge}
     </button>
   );
-};
+}

packages/editor/src/core/extensions/slash-commands/command-menu.tsx

@@ -15,7 +15,7 @@ export type SlashCommandsMenuProps = SuggestionProps<TSlashCommandSection, ISlas
   onClose: () => void;
 };
 
-export const SlashCommandsMenu = forwardRef((props: SlashCommandsMenuProps, ref) => {
+export const SlashCommandsMenu = forwardRef(function SlashCommandsMenu(props: SlashCommandsMenuProps, ref) {
   const { items: sections, command, query, onClose } = props;
   // states
   const [selectedIndex, setSelectedIndex] = useState({

packages/editor/src/core/extensions/slash-commands/root.tsx

@@ -121,9 +121,10 @@ export type TExtensionProps = Pick<IEditorProps, "disabledExtensions" | "flagged
   additionalOptions?: TSlashCommandAdditionalOption[];
 };
 
-export const SlashCommands = (props: TExtensionProps) =>
-  Command.configure({
+export function SlashCommands(props: TExtensionProps) {
+  return Command.configure({
     suggestion: {
       items: getSlashCommandFilteredSections(props),
     },
   });
+}

packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx

@@ -35,7 +35,7 @@ const handleBackgroundColorChange = (editor: Editor, color: string | null) => {
 //     .run();
 // };
 
-export const TableDragHandleDropdownColorSelector: React.FC<Props> = (props) => {
+export function TableDragHandleDropdownColorSelector(props: Props) {
   const { editor, onSelect } = props;
 
   return (
@@ -115,4 +115,4 @@ export const TableDragHandleDropdownColorSelector: React.FC<Props> = (props) =>
       </Disclosure.Panel>
     </Disclosure>
   );
-};
+}

packages/editor/src/core/extensions/table/plugins/drag-handles/column/drag-handle.tsx

@@ -45,7 +45,7 @@ export type ColumnDragHandleProps = {
   editor: Editor;
 };
 
-export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
+export function ColumnDragHandle(props: ColumnDragHandleProps) {
   const { col, editor } = props;
   // states
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -222,4 +222,4 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
       )}
     </>
   );
-};
+}

packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx

@@ -62,7 +62,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const ColumnOptionsDropdown: React.FC<Props> = (props) => {
+export function ColumnOptionsDropdown(props: Props) {
   const { editor, onClose } = props;
 
   return (
@@ -100,4 +100,4 @@ export const ColumnOptionsDropdown: React.FC<Props> = (props) => {
       ))}
     </>
   );
-};
+}

packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx

@@ -45,7 +45,7 @@ export type RowDragHandleProps = {
   row: number;
 };
 
-export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
+export function RowDragHandle(props: RowDragHandleProps) {
   const { editor, row } = props;
   // states
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -221,4 +221,4 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
       )}
     </>
   );
-};
+}

packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx

@@ -62,7 +62,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const RowOptionsDropdown: React.FC<Props> = (props) => {
+export function RowOptionsDropdown(props: Props) {
   const { editor, onClose } = props;
 
   return (
@@ -100,4 +100,4 @@ export const RowOptionsDropdown: React.FC<Props> = (props) => {
       ))}
     </>
   );
-};
+}

packages/editor/src/core/extensions/work-item-embed/extension.tsx

@@ -15,8 +15,8 @@ type Props = {
   }) => React.ReactNode;
 };
 
-export const WorkItemEmbedExtension = (props: Props) =>
-  WorkItemEmbedExtensionConfig.extend({
+export function WorkItemEmbedExtension(props: Props) {
+  return WorkItemEmbedExtensionConfig.extend({
     addNodeView() {
       return ReactNodeViewRenderer((issueProps: NodeViewProps) => (
         <NodeViewWrapper>
@@ -29,3 +29,4 @@ export const WorkItemEmbedExtension = (props: Props) =>
       ));
     },
   });
+}