fix changing font when editing text

public/fonts.css

@@ -11,3 +11,33 @@
   src: url("Cascadia.woff2");
   font-display: swap;
 }
+
+@font-face {
+  font-family: "REDACTED_REGULAR";
+  src: url("redacted-regular.woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "REDACTED_SCRIPT_BOLD";
+  src: url("redacted-script-bold.woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "REDACTED_SCRIPT_REGULAR";
+  src: url("redacted-script-regular.woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Scribble";
+  src: url("scribble-webfont.woff2");
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Blokk";
+  src: url("BLOKKNeue-Regular.woff2");
+  font-display: swap;
+}

src/actions/actionProperties.tsx

@@ -13,9 +13,9 @@ import {
   FillCrossHatchIcon,
   FillHachureIcon,
   FillSolidIcon,
-  FontFamilyCodeIcon,
+  // FontFamilyCodeIcon,
-  FontFamilyHandDrawnIcon,
+  // FontFamilyHandDrawnIcon,
-  FontFamilyNormalIcon,
+  // FontFamilyNormalIcon,
   FontSizeExtraLargeIcon,
   FontSizeLargeIcon,
   FontSizeMediumIcon,
@@ -34,7 +34,7 @@ import {
 import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
-  FONT_FAMILY,
+  //FONT_FAMILY,
 } from "../constants";
 import {
   getNonDeletedElements,
@@ -48,7 +48,7 @@ import {
   ExcalidrawElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
-  FontFamilyValues,
+  //FontFamilyValues,
   TextAlign,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
@@ -62,6 +62,7 @@ import {
 } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
 import { register } from "./register";
+import FontsList from "../components/FontList";
 
 const changeProperty = (
   elements: readonly ExcalidrawElement[],
@@ -506,41 +507,43 @@ export const actionChangeFontFamily = register({
     };
   },
   PanelComponent: ({ elements, appState, updateData }) => {
-    const options: {
+    // const options: {
-      value: FontFamilyValues;
+    //   value: FontFamilyValues;
-      text: string;
+    //   text: string;
-      icon: JSX.Element;
+    //   icon: JSX.Element;
-    }[] = [
+    // }[] = [
-      {
+    //   {
-        value: FONT_FAMILY.Virgil,
+    //     value: FONT_FAMILY.Virgil,
-        text: t("labels.handDrawn"),
+    //     text: t("labels.handDrawn"),
-        icon: <FontFamilyHandDrawnIcon theme={appState.theme} />,
+    //     icon: <FontFamilyHandDrawnIcon theme={appState.theme} />,
-      },
+    //   },
-      {
+    //   {
-        value: FONT_FAMILY.Helvetica,
+    //     value: FONT_FAMILY.Helvetica,
-        text: t("labels.normal"),
+    //     text: t("labels.normal"),
-        icon: <FontFamilyNormalIcon theme={appState.theme} />,
+    //     icon: <FontFamilyNormalIcon theme={appState.theme} />,
-      },
+    //   },
-      {
+    //   {
-        value: FONT_FAMILY.Cascadia,
+    //     value: FONT_FAMILY.Cascadia,
-        text: t("labels.code"),
+    //     text: t("labels.code"),
-        icon: <FontFamilyCodeIcon theme={appState.theme} />,
+    //     icon: <FontFamilyCodeIcon theme={appState.theme} />,
-      },
+    //   },
-    ];
+    // ];
 
     return (
       <fieldset>
         <legend>{t("labels.fontFamily")}</legend>
-        <ButtonIconSelect<FontFamilyValues | false>
+        <FontsList
-          group="font-family"
+          onChange={(val) => {
-          options={options}
+            updateData(val);
-          value={getFormValue(
+          }}
+          currentFontFamily={
+            getFormValue(
               elements,
               appState,
               (element) => isTextElement(element) && element.fontFamily,
               appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
-          )}
+            ) || DEFAULT_FONT_FAMILY
-          onChange={(value) => updateData(value)}
+          }
         />
       </fieldset>
     );

src/components/App.tsx

@@ -1919,6 +1919,10 @@ class App extends React.Component<AppProps, AppState> {
         this.setState({
           draggingElement: null,
           editingElement: null,
+          selectedElementIds: {
+            ...this.state.selectedElementIds,
+            [element.id]: true,
+          },
         });
         if (this.state.elementLocked) {
           setCursorForShape(this.canvas, this.state.elementType);

src/components/FontList.tsx

@@ -0,0 +1,53 @@
+import { FONT_FAMILY } from "../constants";
+import { FontFamilyValues } from "../element/types";
+
+const FontsList = ({
+  onChange,
+  currentFontFamily,
+}: {
+  onChange: (val: FontFamilyValues) => void;
+  currentFontFamily: FontFamilyValues;
+}) => {
+  return (
+    <select
+      className="dropdown-select"
+      onChange={(event) => {
+        onChange(Number(event.target.value));
+      }}
+      value={currentFontFamily}
+    >
+      <option key="virgil" value={FONT_FAMILY.Virgil}>
+        Hand-Drawn
+      </option>
+      <option key="helvetica" value={FONT_FAMILY.Helvetica}>
+        Normal
+      </option>
+      <option key="cascadia" value={FONT_FAMILY.Cascadia}>
+        code
+      </option>
+      <option key="redacted-regular" value={FONT_FAMILY.REDACTED_REGULAR}>
+        Redacted Regular
+      </option>
+      <option
+        key="redacted-script-regular"
+        value={FONT_FAMILY.REDACTED_SCRIPT_REGULAR}
+      >
+        Redacted Script
+      </option>
+      <option
+        key="redacted-script-bold"
+        value={FONT_FAMILY.REDACTED_SCRIPT_BOLD}
+      >
+        Redacted Script BOLD
+      </option>
+      <option key="Scribble" value={FONT_FAMILY.SCRIBBLE}>
+        Scribble
+      </option>
+      <option key="Blokk" value={FONT_FAMILY.BLOKK}>
+        Blokk
+      </option>
+    </select>
+  );
+};
+
+export default FontsList;

src/components/LayerUI.tsx

@@ -725,6 +725,7 @@ const LayerUI = ({
         >
           {renderCustomFooter?.(false, appState)}
         </div>
+
         <div
           className={clsx(
             "layer-ui__wrapper__footer-right zen-mode-transition",

src/components/icons.tsx

@@ -847,6 +847,18 @@ export const FontFamilyCodeIcon = React.memo(({ theme }: { theme: Theme }) =>
   ),
 );
 
+export const FontFamilyWireframeIcon = React.memo(
+  ({ theme }: { theme: Theme }) =>
+    createIcon(
+      <>
+        <path
+          fill={iconFillColor(theme)}
+          d="M448 75.2v361.7c0 24.3-19 43.2-43.2 43.2H43.2C19.3 480 0 461.4 0 436.8V75.2C0 51.1 18.8 32 43.2 32h361.7c24 0 43.1 18.8 43.1 43.2zm-37.3 361.6V75.2c0-3-2.6-5.8-5.8-5.8h-9.3L285.3 144 224 94.1 162.8 144 52.5 69.3h-9.3c-3.2 0-5.8 2.8-5.8 5.8v361.7c0 3 2.6 5.8 5.8 5.8h361.7c3.2.1 5.8-2.7 5.8-5.8zM150.2 186v37H76.7v-37h73.5zm0 74.4v37.3H76.7v-37.3h73.5zm11.1-147.3l54-43.7H96.8l64.5 43.7zm210 72.9v37h-196v-37h196zm0 74.4v37.3h-196v-37.3h196zm-84.6-147.3l64.5-43.7H232.8l53.9 43.7zM371.3 335v37.3h-99.4V335h99.4z"
+        ></path>
+      </>,
+    ),
+);
+
 export const TextAlignLeftIcon = React.memo(({ theme }: { theme: Theme }) =>
   createIcon(
     <path

src/constants.ts

@@ -68,6 +68,11 @@ export const FONT_FAMILY = {
   Virgil: 1,
   Helvetica: 2,
   Cascadia: 3,
+  REDACTED_REGULAR: 4,
+  REDACTED_SCRIPT_REGULAR: 5,
+  REDACTED_SCRIPT_BOLD: 6,
+  SCRIBBLE: 7,
+  BLOKK: 8,
 };
 
 export const THEME = {

src/element/textWysiwyg.tsx

@@ -319,7 +319,9 @@ export const textWysiwyg = ({
 
   // prevent blur when changing properties from the menu
   const onPointerDown = (event: MouseEvent) => {
-    if (
+    if (event.target instanceof HTMLSelectElement) {
+      handleSubmit();
+    } else if (
       (event.target instanceof HTMLElement ||
         event.target instanceof SVGElement) &&
       event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&

src/locales/en.json

@@ -50,6 +50,7 @@
     "handDrawn": "Hand-drawn",
     "normal": "Normal",
     "code": "Code",
+    "wireframe": "Wireframe",
     "small": "Small",
     "medium": "Medium",
     "large": "Large",