refactor: separate elements logic into a standalone package (#9285)

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -7,10 +7,19 @@ import React, {
   type KeyboardEventHandler,
 } from "react";
 
-import { type FontFamilyValues } from "../../element/types";
+import { type FontFamilyValues } from "@excalidraw/element/types";
+
+import {
+  arrayToList,
+  debounce,
+  FONT_FAMILY,
+  getFontFamilyString,
+} from "@excalidraw/common";
+
+import type { ValueOf } from "@excalidraw/common/utility-types";
+
 import { Fonts } from "../../fonts";
 import { t } from "../../i18n";
-import { arrayToList, debounce, getFontFamilyString } from "../../utils";
 import { useApp, useAppProps, useExcalidrawContainer } from "../App";
 import { PropertiesPopover } from "../PropertiesPopover";
 import { QuickSearch } from "../QuickSearch";
@@ -20,11 +29,15 @@ import DropdownMenuItem, {
   DropDownMenuItemBadgeType,
   DropDownMenuItemBadge,
 } from "../dropdownMenu/DropdownMenuItem";
-import { FontFamilyNormalIcon } from "../icons";
+import {
+  FontFamilyCodeIcon,
+  FontFamilyHeadingIcon,
+  FontFamilyNormalIcon,
+  FreedrawIcon,
+} from "../icons";
 
 import { fontPickerKeyHandler } from "./keyboardNavHandlers";
 
-import type { ValueOf } from "../../utility-types";
 import type { JSX } from "react";
 
 export interface FontDescriptor {
@@ -48,6 +61,24 @@ interface FontPickerListProps {
   onClose: () => void;
 }
 
+const getFontFamilyIcon = (fontFamily: FontFamilyValues): JSX.Element => {
+  switch (fontFamily) {
+    case FONT_FAMILY.Excalifont:
+    case FONT_FAMILY.Virgil:
+      return FreedrawIcon;
+    case FONT_FAMILY.Nunito:
+    case FONT_FAMILY.Helvetica:
+      return FontFamilyNormalIcon;
+    case FONT_FAMILY["Lilita One"]:
+      return FontFamilyHeadingIcon;
+    case FONT_FAMILY["Comic Shanns"]:
+    case FONT_FAMILY.Cascadia:
+      return FontFamilyCodeIcon;
+    default:
+      return FontFamilyNormalIcon;
+  }
+};
+
 export const FontPickerList = React.memo(
   ({
     selectedFontFamily,
@@ -73,7 +104,7 @@ export const FontPickerList = React.memo(
           .map(([familyId, { metadata, fontFaces }]) => {
             const fontDescriptor = {
               value: familyId,
-              icon: metadata.icon ?? FontFamilyNormalIcon,
+              icon: getFontFamilyIcon(familyId),
               text: fontFaces[0]?.fontFace?.family ?? "Unknown",
             };