snapshot of https://github.com/excalidraw/excalidraw.git (master, 2026-09-16; blobs > 131072B omitted)

packages/excalidraw/components/FontPicker/FontPicker.scss

@@ -0,0 +1,20 @@
+@use "../../css/variables.module" as *;
+
+.excalidraw {
+  .FontPicker__container {
+    display: grid;
+    grid-template-columns: calc(1rem + 3 * var(--default-button-size)) 1rem 1fr; // calc ~ 2 gaps + 4 buttons
+    align-items: center;
+
+    @include isMobile {
+      max-width: calc(
+        2rem + 4 * var(--default-button-size)
+      ); // 4 gaps + 4 buttons
+    }
+
+    &--compact {
+      display: block;
+      grid-template-columns: none;
+    }
+  }
+}

packages/excalidraw/components/FontPicker/FontPicker.test.tsx

@@ -0,0 +1,31 @@
+import { KEYS } from "@excalidraw/common";
+
+import { Excalidraw } from "../..";
+import { Keyboard } from "../../tests/helpers/ui";
+import { act, render } from "../../tests/test-utils";
+
+describe("FontPicker", () => {
+  it("should be able to open font picker", async () => {
+    (global as any).ResizeObserver =
+      (global as any).ResizeObserver ||
+      class ResizeObserver {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+
+    const { queryByTestId } = await render(
+      <Excalidraw handleKeyboardGlobally={true} />,
+    );
+
+    Keyboard.keyPress(KEYS.T);
+
+    const fontPickerTrigger = queryByTestId("font-family-show-fonts");
+
+    expect(fontPickerTrigger).not.toBeNull();
+
+    act(() => {
+      fontPickerTrigger!.click();
+    });
+  });
+});

packages/excalidraw/components/FontPicker/FontPicker.tsx

@@ -0,0 +1,130 @@
+import { Popover } from "radix-ui";
+import clsx from "clsx";
+import React, { useCallback, useMemo } from "react";
+
+import { FONT_FAMILY } from "@excalidraw/common";
+
+import type { FontFamilyValues } from "@excalidraw/element/types";
+
+import { t } from "../../i18n";
+import { RadioSelection } from "../RadioSelection";
+import { ButtonSeparator } from "../ButtonSeparator";
+import {
+  FontFamilyCodeIcon,
+  FontFamilyNormalIcon,
+  FreedrawIcon,
+} from "../icons";
+
+import { FontPickerList } from "./FontPickerList";
+import { FontPickerTrigger } from "./FontPickerTrigger";
+
+import "./FontPicker.scss";
+
+export const DEFAULT_FONTS = [
+  {
+    value: FONT_FAMILY.Excalifont,
+    icon: FreedrawIcon,
+    text: t("labels.handDrawn"),
+    testId: "font-family-hand-drawn",
+  },
+  {
+    value: FONT_FAMILY.Nunito,
+    icon: FontFamilyNormalIcon,
+    text: t("labels.normal"),
+    testId: "font-family-normal",
+  },
+  {
+    value: FONT_FAMILY["Comic Shanns"],
+    icon: FontFamilyCodeIcon,
+    text: t("labels.code"),
+    testId: "font-family-code",
+  },
+];
+
+const defaultFontFamilies = new Set(DEFAULT_FONTS.map((x) => x.value));
+
+export const isDefaultFont = (fontFamily: number | null) => {
+  if (!fontFamily) {
+    return false;
+  }
+
+  return defaultFontFamilies.has(fontFamily);
+};
+
+interface FontPickerProps {
+  isOpened: boolean;
+  selectedFontFamily: FontFamilyValues | null;
+  hoveredFontFamily: FontFamilyValues | null;
+  onSelect: (fontFamily: FontFamilyValues) => void;
+  onHover: (fontFamily: FontFamilyValues) => void;
+  onLeave: () => void;
+  onPopupChange: (open: boolean) => void;
+  compactMode?: boolean;
+}
+
+export const FontPicker = React.memo(
+  ({
+    isOpened,
+    selectedFontFamily,
+    hoveredFontFamily,
+    onSelect,
+    onHover,
+    onLeave,
+    onPopupChange,
+    compactMode = false,
+  }: FontPickerProps) => {
+    const defaultFonts = useMemo(() => DEFAULT_FONTS, []);
+    const onSelectCallback = useCallback(
+      (value: number | false) => {
+        if (value) {
+          onSelect(value);
+        }
+      },
+      [onSelect],
+    );
+
+    return (
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={clsx("FontPicker__container", {
+          "FontPicker__container--compact": compactMode,
+        })}
+      >
+        {!compactMode && (
+          <div className="buttonList">
+            <RadioSelection<FontFamilyValues | false>
+              type="button"
+              options={defaultFonts}
+              value={selectedFontFamily}
+              onClick={onSelectCallback}
+            />
+          </div>
+        )}
+        {!compactMode && <ButtonSeparator />}
+        <Popover.Root open={isOpened} onOpenChange={onPopupChange}>
+          <FontPickerTrigger
+            selectedFontFamily={selectedFontFamily}
+            isOpened={isOpened}
+            compactMode={compactMode}
+          />
+          {isOpened && (
+            <FontPickerList
+              selectedFontFamily={selectedFontFamily}
+              hoveredFontFamily={hoveredFontFamily}
+              onSelect={onSelectCallback}
+              onHover={onHover}
+              onLeave={onLeave}
+              onOpen={() => onPopupChange(true)}
+              onClose={() => onPopupChange(false)}
+            />
+          )}
+        </Popover.Root>
+      </div>
+    );
+  },
+  (prev, next) =>
+    prev.isOpened === next.isOpened &&
+    prev.selectedFontFamily === next.selectedFontFamily &&
+    prev.hoveredFontFamily === next.hoveredFontFamily,
+);

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -0,0 +1,413 @@
+import React, {
+  useMemo,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  type KeyboardEventHandler,
+} from "react";
+
+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 {
+  useApp,
+  useAppProps,
+  useExcalidrawContainer,
+  useStylesPanelMode,
+} from "../App";
+import { PropertiesPopover } from "../PropertiesPopover";
+import { QuickSearch } from "../QuickSearch";
+import { ScrollableList } from "../ScrollableList";
+import DropdownMenuGroup from "../dropdownMenu/DropdownMenuGroup";
+import {
+  DropDownMenuItemBadgeType,
+  DropDownMenuItemBadge,
+} from "../dropdownMenu/DropdownMenuItem";
+import MenuItemContent from "../dropdownMenu/DropdownMenuItemContent";
+import { getDropdownMenuItemClassName } from "../dropdownMenu/common";
+import {
+  FontFamilyCodeIcon,
+  FontFamilyHeadingIcon,
+  FontFamilyNormalIcon,
+  FreedrawIcon,
+} from "../icons";
+
+import { fontPickerKeyHandler } from "./keyboardNavHandlers";
+
+import type { JSX } from "react";
+import type { ExcalidrawFontFace } from "../../fonts/ExcalidrawFontFace";
+
+export interface FontDescriptor {
+  value: number;
+  icon: JSX.Element;
+  text: string;
+  deprecated?: true;
+  badge?: {
+    type: ValueOf<typeof DropDownMenuItemBadgeType>;
+    placeholder: string;
+  };
+}
+
+interface FontPickerListProps {
+  selectedFontFamily: FontFamilyValues | null;
+  hoveredFontFamily: FontFamilyValues | null;
+  onSelect: (value: number) => void;
+  onHover: (value: number) => void;
+  onLeave: () => void;
+  onOpen: () => void;
+  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;
+  }
+};
+
+const getFontFamilyLabel = (
+  fontFamily: FontFamilyValues,
+  fontFaces: ExcalidrawFontFace[],
+) =>
+  // prefer our config as the browser resolved names may be wrapped in quotes and such
+  Object.entries(FONT_FAMILY).find(([, id]) => id === fontFamily)?.[0] ??
+  fontFaces[0]?.fontFace?.family ??
+  "Unknown";
+
+export const FontPickerList = React.memo(
+  ({
+    selectedFontFamily,
+    hoveredFontFamily,
+    onSelect,
+    onHover,
+    onLeave,
+    onOpen,
+    onClose,
+  }: FontPickerListProps) => {
+    const { container } = useExcalidrawContainer();
+    const app = useApp();
+    const { fonts } = app;
+    const { showDeprecatedFonts } = useAppProps();
+    const stylesPanelMode = useStylesPanelMode();
+
+    const [searchTerm, setSearchTerm] = useState("");
+    const inputRef = useRef<HTMLInputElement>(null);
+    const allFonts = useMemo(
+      () =>
+        Array.from(Fonts.registered.entries())
+          .filter(
+            ([_, { metadata }]) => !metadata.private && !metadata.fallback,
+          )
+          .map(([familyId, { metadata, fontFaces }]) => {
+            const fontDescriptor = {
+              value: familyId,
+              icon: getFontFamilyIcon(familyId),
+              text: getFontFamilyLabel(familyId, fontFaces),
+            };
+
+            if (metadata.deprecated) {
+              Object.assign(fontDescriptor, {
+                deprecated: metadata.deprecated,
+                badge: {
+                  type: DropDownMenuItemBadgeType.RED,
+                  placeholder: t("fontList.badge.old"),
+                },
+              });
+            }
+
+            return fontDescriptor as FontDescriptor;
+          })
+          .sort((a, b) =>
+            a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1,
+          ),
+      [],
+    );
+
+    const sceneFamilies = useMemo(
+      () => new Set(fonts.getSceneFamilies()),
+      // cache per selected font family, so hover re-render won't mess it up
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [selectedFontFamily],
+    );
+
+    const sceneFonts = useMemo(
+      () => allFonts.filter((font) => sceneFamilies.has(font.value)), // always show all the fonts in the scene, even those that were deprecated
+      [allFonts, sceneFamilies],
+    );
+
+    const availableFonts = useMemo(
+      () =>
+        allFonts.filter(
+          (font) =>
+            !sceneFamilies.has(font.value) &&
+            (showDeprecatedFonts || !font.deprecated), // skip deprecated fonts
+        ),
+      [allFonts, sceneFamilies, showDeprecatedFonts],
+    );
+
+    const filteredFonts = useMemo(
+      () =>
+        arrayToList(
+          [...sceneFonts, ...availableFonts].filter((font) =>
+            font.text?.toLowerCase().includes(searchTerm),
+          ),
+        ),
+      [sceneFonts, availableFonts, searchTerm],
+    );
+
+    const hoveredFont = useMemo(() => {
+      let font;
+
+      if (hoveredFontFamily) {
+        font = filteredFonts.find((font) => font.value === hoveredFontFamily);
+      } else if (selectedFontFamily) {
+        font = filteredFonts.find((font) => font.value === selectedFontFamily);
+      }
+
+      if (!font && searchTerm) {
+        if (filteredFonts[0]?.value) {
+          // hover first element on search
+          onHover(filteredFonts[0].value);
+        } else {
+          // re-render cache on no results
+          onLeave();
+        }
+      }
+
+      return font;
+    }, [
+      hoveredFontFamily,
+      selectedFontFamily,
+      searchTerm,
+      filteredFonts,
+      onHover,
+      onLeave,
+    ]);
+
+    // Create a wrapped onSelect function that preserves caret position
+    const wrappedOnSelect = useCallback(
+      (fontFamily: FontFamilyValues) => {
+        // Save caret position before font selection if editing text
+        let savedSelection: { start: number; end: number } | null = null;
+        if (app.state.editingTextElement) {
+          const textEditor = document.querySelector(
+            ".excalidraw-wysiwyg",
+          ) as HTMLTextAreaElement;
+          if (textEditor) {
+            savedSelection = {
+              start: textEditor.selectionStart,
+              end: textEditor.selectionEnd,
+            };
+          }
+        }
+
+        onSelect(fontFamily);
+
+        // Restore caret position after font selection if editing text
+        if (app.state.editingTextElement && savedSelection) {
+          setTimeout(() => {
+            const textEditor = document.querySelector(
+              ".excalidraw-wysiwyg",
+            ) as HTMLTextAreaElement;
+            if (textEditor && savedSelection) {
+              textEditor.focus();
+              textEditor.selectionStart = savedSelection.start;
+              textEditor.selectionEnd = savedSelection.end;
+            }
+          }, 0);
+        }
+      },
+      [onSelect, app.state.editingTextElement],
+    );
+
+    const onKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
+      (event) => {
+        const handled = fontPickerKeyHandler({
+          event,
+          inputRef,
+          hoveredFont,
+          filteredFonts,
+          onSelect: wrappedOnSelect,
+          onHover,
+          onClose,
+        });
+
+        if (handled) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+      },
+      [hoveredFont, filteredFonts, wrappedOnSelect, onHover, onClose],
+    );
+
+    useEffect(() => {
+      onOpen();
+
+      return () => {
+        onClose();
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const sceneFilteredFonts = useMemo(
+      () => filteredFonts.filter((font) => sceneFamilies.has(font.value)),
+      [filteredFonts, sceneFamilies],
+    );
+
+    const availableFilteredFonts = useMemo(
+      () => filteredFonts.filter((font) => !sceneFamilies.has(font.value)),
+      [filteredFonts, sceneFamilies],
+    );
+
+    const FontPickerListItem = ({
+      font,
+      order,
+    }: {
+      font: FontDescriptor;
+      order: number;
+    }) => {
+      const ref = useRef<HTMLButtonElement>(null);
+      const isHovered = font.value === hoveredFont?.value;
+      const isSelected = font.value === selectedFontFamily;
+
+      useEffect(() => {
+        if (!isHovered) {
+          return;
+        }
+        if (order === 0) {
+          // scroll into the first item differently, so it's visible what is above (i.e. group title)
+          ref.current?.scrollIntoView?.({ block: "end" });
+        } else {
+          ref.current?.scrollIntoView?.({ block: "nearest" });
+        }
+      }, [isHovered, order]);
+
+      return (
+        <button
+          ref={ref}
+          type="button"
+          value={font.value}
+          className={getDropdownMenuItemClassName("", isSelected, isHovered)}
+          title={font.text}
+          // allow to tab between search and selected font
+          tabIndex={isSelected ? 0 : -1}
+          onClick={(e) => {
+            wrappedOnSelect(Number(e.currentTarget.value));
+          }}
+          onMouseMove={() => {
+            if (hoveredFont?.value !== font.value) {
+              onHover(font.value);
+            }
+          }}
+        >
+          <MenuItemContent
+            icon={font.icon}
+            badge={
+              font.badge && (
+                <DropDownMenuItemBadge type={font.badge.type}>
+                  {font.badge.placeholder}
+                </DropDownMenuItemBadge>
+              )
+            }
+            textStyle={{
+              fontFamily: getFontFamilyString({ fontFamily: font.value }),
+            }}
+          >
+            {font.text}
+          </MenuItemContent>
+        </button>
+      );
+    };
+
+    const groups = [];
+
+    if (sceneFilteredFonts.length) {
+      groups.push(
+        <DropdownMenuGroup title={t("fontList.sceneFonts")} key="group_1">
+          {sceneFilteredFonts.map((font, index) => (
+            <FontPickerListItem key={font.value} font={font} order={index} />
+          ))}
+        </DropdownMenuGroup>,
+      );
+    }
+
+    if (availableFilteredFonts.length) {
+      groups.push(
+        <DropdownMenuGroup title={t("fontList.availableFonts")} key="group_2">
+          {availableFilteredFonts.map((font, index) => (
+            <FontPickerListItem
+              key={font.value}
+              font={font}
+              order={index + sceneFilteredFonts.length}
+            />
+          ))}
+        </DropdownMenuGroup>,
+      );
+    }
+
+    return (
+      <PropertiesPopover
+        className="properties-content"
+        container={container}
+        style={{ width: "15rem" }}
+        onClose={() => {
+          onClose();
+
+          // Refocus text editor when font picker closes if we were editing text
+          if (app.state.editingTextElement) {
+            setTimeout(() => {
+              const textEditor = document.querySelector(
+                ".excalidraw-wysiwyg",
+              ) as HTMLTextAreaElement;
+              if (textEditor) {
+                textEditor.focus();
+              }
+            }, 0);
+          }
+        }}
+        onPointerLeave={onLeave}
+        onKeyDown={onKeyDown}
+        preventAutoFocusOnTouch={!!app.state.editingTextElement}
+      >
+        {stylesPanelMode === "full" && (
+          <QuickSearch
+            ref={inputRef}
+            placeholder={t("quickSearch.placeholder")}
+            onChange={debounce(setSearchTerm, 20)}
+          />
+        )}
+        <ScrollableList
+          className="dropdown-menu fonts manual-hover"
+          placeholder={t("fontList.empty")}
+        >
+          {groups.length ? groups : null}
+        </ScrollableList>
+      </PropertiesPopover>
+    );
+  },
+  (prev, next) =>
+    prev.selectedFontFamily === next.selectedFontFamily &&
+    prev.hoveredFontFamily === next.hoveredFontFamily,
+);

packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx

@@ -0,0 +1,59 @@
+import { Popover } from "radix-ui";
+
+import { MOBILE_ACTION_BUTTON_BG } from "@excalidraw/common";
+
+import type { FontFamilyValues } from "@excalidraw/element/types";
+
+import { t } from "../../i18n";
+import { IconButton } from "../IconButton";
+import { TextIcon } from "../icons";
+
+import { useExcalidrawSetAppState } from "../App";
+
+interface FontPickerTriggerProps {
+  selectedFontFamily: FontFamilyValues | null;
+  isOpened?: boolean;
+  compactMode?: boolean;
+}
+
+export const FontPickerTrigger = ({
+  selectedFontFamily,
+  isOpened = false,
+  compactMode = false,
+}: FontPickerTriggerProps) => {
+  const setAppState = useExcalidrawSetAppState();
+
+  const compactStyle = compactMode
+    ? {
+        ...MOBILE_ACTION_BUTTON_BG,
+        width: "2rem",
+        height: "2rem",
+      }
+    : {};
+
+  return (
+    <Popover.Trigger asChild>
+      <div data-openpopup="fontFamily" className="properties-trigger">
+        <IconButton
+          type="toggle"
+          icon={TextIcon}
+          title={t("labels.showFonts")}
+          aria-label={t("labels.showFonts")}
+          className="standalone properties-trigger"
+          data-testid="font-family-show-fonts"
+          checked={isOpened}
+          onSelect={() => {
+            setAppState((appState) => ({
+              openPopup:
+                appState.openPopup === "fontFamily" ? null : appState.openPopup,
+            }));
+          }}
+          style={{
+            border: "none",
+            ...compactStyle,
+          }}
+        />
+      </div>
+    </Popover.Trigger>
+  );
+};

packages/excalidraw/components/FontPicker/keyboardNavHandlers.ts

@@ -0,0 +1,68 @@
+import { KEYS } from "@excalidraw/common";
+
+import type { Node } from "@excalidraw/common";
+
+import { type FontDescriptor } from "./FontPickerList";
+
+interface FontPickerKeyNavHandlerProps {
+  event: React.KeyboardEvent<HTMLDivElement>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  hoveredFont: Node<FontDescriptor> | undefined;
+  filteredFonts: Node<FontDescriptor>[];
+  onClose: () => void;
+  onSelect: (value: number) => void;
+  onHover: (value: number) => void;
+}
+
+export const fontPickerKeyHandler = ({
+  event,
+  inputRef,
+  hoveredFont,
+  filteredFonts,
+  onClose,
+  onSelect,
+  onHover,
+}: FontPickerKeyNavHandlerProps) => {
+  if (
+    !event[KEYS.CTRL_OR_CMD] &&
+    event.shiftKey &&
+    event.key.toLowerCase() === KEYS.F
+  ) {
+    // refocus input on the popup trigger shortcut
+    inputRef.current?.focus();
+    return true;
+  }
+
+  if (event.key === KEYS.ESCAPE) {
+    onClose();
+    return true;
+  }
+
+  if (event.key === KEYS.ENTER) {
+    if (hoveredFont?.value) {
+      onSelect(hoveredFont.value);
+    }
+
+    return true;
+  }
+
+  if (event.key === KEYS.ARROW_DOWN) {
+    if (hoveredFont?.next) {
+      onHover(hoveredFont.next.value);
+    } else if (filteredFonts[0]?.value) {
+      onHover(filteredFonts[0].value);
+    }
+
+    return true;
+  }
+
+  if (event.key === KEYS.ARROW_UP) {
+    if (hoveredFont?.prev) {
+      onHover(hoveredFont.prev.value);
+    } else if (filteredFonts[filteredFonts.length - 1]?.value) {
+      onHover(filteredFonts[filteredFonts.length - 1].value);
+    }
+
+    return true;
+  }
+};