Moving font metadata into common

packages/common/src/font-metadata.ts

@@ -5,15 +5,6 @@ import type {
   FontFamilyValues,
 } from "@excalidraw/element/types";
 
-import {
-  FreedrawIcon,
-  FontFamilyNormalIcon,
-  FontFamilyHeadingIcon,
-  FontFamilyCodeIcon,
-} from "../components/icons";
-
-import type { JSX } from "react";
-
 /**
  * Encapsulates font metrics with additional font metadata.
  * */
@@ -29,8 +20,6 @@ export interface FontMetadata {
     /** harcoded unitless line-height, https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971 */
     lineHeight: number;
   };
-  /** element to be displayed as an icon  */
-  icon?: JSX.Element;
   /** flag to indicate a deprecated font */
   deprecated?: true;
   /** flag to indicate a server-side only font */
@@ -49,7 +38,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -374,
       lineHeight: 1.25,
     },
-    icon: FreedrawIcon,
   },
   [FONT_FAMILY.Nunito]: {
     metrics: {
@@ -58,7 +46,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -353,
       lineHeight: 1.35,
     },
-    icon: FontFamilyNormalIcon,
   },
   [FONT_FAMILY["Lilita One"]]: {
     metrics: {
@@ -67,7 +54,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -220,
       lineHeight: 1.15,
     },
-    icon: FontFamilyHeadingIcon,
   },
   [FONT_FAMILY["Comic Shanns"]]: {
     metrics: {
@@ -76,7 +62,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -250,
       lineHeight: 1.25,
     },
-    icon: FontFamilyCodeIcon,
   },
   [FONT_FAMILY.Virgil]: {
     metrics: {
@@ -85,7 +70,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -374,
       lineHeight: 1.25,
     },
-    icon: FreedrawIcon,
     deprecated: true,
   },
   [FONT_FAMILY.Helvetica]: {
@@ -95,7 +79,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -471,
       lineHeight: 1.15,
     },
-    icon: FontFamilyNormalIcon,
     deprecated: true,
     local: true,
   },
@@ -106,7 +89,6 @@ export const FONT_METADATA: Record<number, FontMetadata> = {
       descender: -480,
       lineHeight: 1.2,
     },
-    icon: FontFamilyCodeIcon,
     deprecated: true,
   },
   [FONT_FAMILY["Liberation Sans"]]: {

packages/common/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./binary-heap";
 export * from "./colors";
 export * from "./constants";
+export * from "./font-metadata";
 export * from "./keys";
 export * from "./points";
 export * from "./promise-pool";

packages/element/src/newElement.ts

@@ -8,15 +8,13 @@ import {
   VERTICAL_ALIGN,
   randomInteger,
   randomId,
-  getNewGroupIdsForDuplication,
   arrayToMap,
   getFontString,
   getUpdatedTimestamp,
   isTestEnv,
+  getLineHeight
 } from "@excalidraw/common";
 
-import { getLineHeight } from "@excalidraw/excalidraw/fonts/FontMetadata";
-
 import type { Radians } from "@excalidraw/math";
 
 import type { AppState } from "@excalidraw/excalidraw/types";
@@ -32,6 +30,7 @@ import { bumpVersion, newElementWith } from "./mutateElement";
 import { getBoundTextMaxWidth } from "./textElement";
 import { normalizeText, measureText } from "./textMeasurements";
 import { wrapText } from "./textWrapping";
+import { getNewGroupIdsForDuplication } from "./groups";
 
 import { getElementAbsoluteCoords } from ".";
 

packages/element/src/renderElement.ts

@@ -13,6 +13,7 @@ import {
   distance,
   getFontString,
   isRTL,
+  getVerticalOffset,
 } from "@excalidraw/common";
 import { getElementAbsoluteCoords } from "@excalidraw/element/bounds";
 import { getUncroppedImageElement } from "@excalidraw/element/cropElement";
@@ -38,8 +39,6 @@ import {
 import { getContainingFrame } from "@excalidraw/element/frame";
 import { getCornerRadius } from "@excalidraw/element/shapes";
 
-// TODO_SEP: consider separating
-import { getVerticalOffset } from "@excalidraw/excalidraw/fonts/FontMetadata";
 
 import type {
   ExcalidrawElement,

packages/excalidraw/actions/actionProperties.tsx

@@ -19,6 +19,7 @@ import {
   getFontFamilyString,
   getShortcutKey,
   tupleToCoors,
+  getLineHeight,
 } from "@excalidraw/common";
 
 import {
@@ -121,7 +122,6 @@ import {
 } from "../components/icons";
 
 import { Fonts } from "../fonts";
-import { getLineHeight } from "../fonts/FontMetadata";
 import { getLanguage, t } from "../i18n";
 import {
   canHaveArrowheads,

packages/excalidraw/actions/actionStyles.ts

@@ -4,6 +4,7 @@ import {
   DEFAULT_TEXT_ALIGN,
   CODES,
   KEYS,
+  getLineHeight,
 } from "@excalidraw/common";
 
 import {
@@ -28,7 +29,6 @@ import type { ExcalidrawTextElement } from "@excalidraw/element/types";
 
 import { paintIcon } from "../components/icons";
 
-import { getLineHeight } from "../fonts/FontMetadata";
 import { t } from "../i18n";
 import { getSelectedElements } from "../scene";
 import { CaptureUpdateAction } from "../store";

packages/excalidraw/components/App.tsx

@@ -72,6 +72,7 @@ import {
   normalizeLink,
   toValidURL,
   getGridPoint,
+  getLineHeight,
   type EXPORT_IMAGE_TYPES,
 } from "@excalidraw/common";
 
@@ -424,7 +425,6 @@ import {
 } from "../components/hyperlink/Hyperlink";
 
 import { Fonts } from "../fonts";
-import { getLineHeight } from "../fonts/FontMetadata";
 import { editorJotaiStore } from "../editor-jotai";
 import { ImageSceneDataError } from "../errors";
 import {

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -9,7 +9,12 @@ import React, {
 
 import { type FontFamilyValues } from "@excalidraw/element/types";
 
-import { arrayToList, debounce, getFontFamilyString } from "@excalidraw/common";
+import {
+  arrayToList,
+  debounce,
+  FONT_FAMILY,
+  getFontFamilyString,
+} from "@excalidraw/common";
 
 import type { ValueOf } from "@excalidraw/common/utility-types";
 
@@ -24,7 +29,12 @@ import DropdownMenuItem, {
   DropDownMenuItemBadgeType,
   DropDownMenuItemBadge,
 } from "../dropdownMenu/DropdownMenuItem";
-import { FontFamilyNormalIcon } from "../icons";
+import {
+  FontFamilyCodeIcon,
+  FontFamilyHeadingIcon,
+  FontFamilyNormalIcon,
+  FreedrawIcon,
+} from "../icons";
 
 import { fontPickerKeyHandler } from "./keyboardNavHandlers";
 
@@ -51,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,
@@ -76,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",
             };
 

packages/excalidraw/data/restore.ts

@@ -16,6 +16,7 @@ import {
   arrayToMap,
   getSizeFromPoints,
   normalizeLink,
+  getLineHeight,
 } from "@excalidraw/common";
 import {
   getNonDeletedElements,
@@ -65,7 +66,6 @@ import type { MarkOptional, Mutable } from "@excalidraw/common/utility-types";
 
 import { getDefaultAppState } from "../appState";
 
-import { getLineHeight } from "../fonts/FontMetadata";
 import {
   getNormalizedGridSize,
   getNormalizedGridStep,

packages/excalidraw/data/transform.ts

@@ -13,6 +13,7 @@ import {
   getFontString,
   isDevEnv,
   toBrandedType,
+  getLineHeight,
 } from "@excalidraw/common";
 import {
   getCommonBounds,
@@ -61,8 +62,6 @@ import type {
 
 import type { MarkOptional } from "@excalidraw/common/utility-types";
 
-import { getLineHeight } from "../fonts/FontMetadata";
-
 export type ValidLinearElement = {
   type: "arrow" | "line";
   x: number;

packages/excalidraw/fonts/Emoji/index.ts

@@ -1,4 +1,5 @@
-import { LOCAL_FONT_PROTOCOL } from "../FontMetadata";
+import { LOCAL_FONT_PROTOCOL } from "@excalidraw/common";
+
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
 export const EmojiFontFaces: ExcalidrawFontFaceDescriptor[] = [

packages/excalidraw/fonts/ExcalidrawFontFace.ts

@@ -1,9 +1,7 @@
-import { promiseTry } from "@excalidraw/common";
+import { promiseTry, LOCAL_FONT_PROTOCOL } from "@excalidraw/common";
 
 import { subsetWoff2GlyphsByCodepoints } from "../subset/subset-main";
 
-import { LOCAL_FONT_PROTOCOL } from "./FontMetadata";
-
 type DataURL = string;
 
 export class ExcalidrawFontFace {

packages/excalidraw/fonts/Fonts.ts

@@ -10,7 +10,13 @@ import { getContainerElement } from "@excalidraw/element/textElement";
 import { charWidth } from "@excalidraw/element/textMeasurements";
 import { containsCJK } from "@excalidraw/element/textWrapping";
 
-import { getFontString, PromisePool, promiseTry } from "@excalidraw/common";
+import {
+  FONT_METADATA,
+  type FontMetadata,
+  getFontString,
+  PromisePool,
+  promiseTry,
+} from "@excalidraw/common";
 
 import { ShapeCache } from "@excalidraw/element/ShapeCache";
 
@@ -26,7 +32,6 @@ import { ComicShannsFontFaces } from "./ComicShanns";
 import { EmojiFontFaces } from "./Emoji";
 import { ExcalidrawFontFace } from "./ExcalidrawFontFace";
 import { ExcalifontFontFaces } from "./Excalifont";
-import { FONT_METADATA, type FontMetadata } from "./FontMetadata";
 import { HelveticaFontFaces } from "./Helvetica";
 import { LiberationFontFaces } from "./Liberation";
 import { LilitaFontFaces } from "./Lilita";

packages/excalidraw/fonts/Helvetica/index.ts

@@ -1,4 +1,5 @@
-import { LOCAL_FONT_PROTOCOL } from "../FontMetadata";
+import { LOCAL_FONT_PROTOCOL } from "@excalidraw/common";
+
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
 export const HelveticaFontFaces: ExcalidrawFontFaceDescriptor[] = [

packages/excalidraw/fonts/Lilita/index.ts

@@ -1,4 +1,5 @@
-import { GOOGLE_FONTS_RANGES } from "../FontMetadata";
+import { GOOGLE_FONTS_RANGES } from "@excalidraw/common";
+
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
 import LilitaLatinExt from "./Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2";

packages/excalidraw/fonts/Nunito/index.ts

@@ -1,4 +1,5 @@
-import { GOOGLE_FONTS_RANGES } from "../FontMetadata";
+import { GOOGLE_FONTS_RANGES } from "@excalidraw/common";
+
 import { type ExcalidrawFontFaceDescriptor } from "../Fonts";
 
 import Cyrilic from "./Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2";

packages/excalidraw/renderer/staticSvgScene.ts

@@ -6,6 +6,7 @@ import {
   getFontFamilyString,
   isRTL,
   isTestEnv,
+  getVerticalOffset,
 } from "@excalidraw/common";
 import { normalizeLink, toValidURL } from "@excalidraw/common";
 import { getElementAbsoluteCoords, hashString } from "@excalidraw/element";
@@ -44,8 +45,6 @@ import type {
   NonDeletedExcalidrawElement,
 } from "@excalidraw/element/types";
 
-import { getVerticalOffset } from "../fonts/FontMetadata";
-
 import type { RenderableElementsMap, SVGRenderConfig } from "../scene/types";
 import type { AppState, BinaryFiles } from "../types";
 import type { Drawable } from "roughjs/bin/core";

packages/excalidraw/tests/clipboard.test.tsx

@@ -5,11 +5,10 @@ import { getElementBounds } from "@excalidraw/element";
 
 import { getLineHeightInPx } from "@excalidraw/element/textMeasurements";
 
-import { KEYS, arrayToMap } from "@excalidraw/common";
+import { KEYS, arrayToMap, getLineHeight } from "@excalidraw/common";
 
 import { createPasteEvent, serializeAsClipboardJSON } from "../clipboard";
 
-import { getLineHeight } from "../fonts/FontMetadata";
 import { Excalidraw } from "../index";
 
 import { API } from "./helpers/api";