Add more redacted fonts

public/fonts.css

@@ -13,7 +13,19 @@
 }
 
 @font-face {
-  font-family: "Redacted";
+  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;
 }
@@ -27,4 +39,5 @@
 @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,
@@ -30,12 +30,11 @@ import {
   TextAlignCenterIcon,
   TextAlignLeftIcon,
   TextAlignRightIcon,
-  FontFamilyWireframeIcon,
 } from "../components/icons";
 import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
-  FONT_FAMILY,
+  //FONT_FAMILY,
 } from "../constants";
 import {
   getNonDeletedElements,
@@ -49,7 +48,7 @@ import {
   ExcalidrawElement,
   ExcalidrawLinearElement,
   ExcalidrawTextElement,
-  FontFamilyValues,
+  //FontFamilyValues,
   TextAlign,
 } from "../element/types";
 import { getLanguage, t } from "../i18n";
@@ -63,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[],
@@ -507,56 +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} />,
-      },
+    //   },
-      {
+    // ];
-        value: FONT_FAMILY.REDACTED,
-        text: t("labels.wireframe"),
-        icon: <FontFamilyWireframeIcon theme={appState.theme} />,
-      },
-      {
-        value: FONT_FAMILY.SCRIBBLE,
-        text: t("labels.wireframe"),
-        icon: <FontFamilyWireframeIcon theme={appState.theme} />,
-      },
-      {
-        value: FONT_FAMILY.BLOKK,
-        text: t("labels.wireframe"),
-        icon: <FontFamilyWireframeIcon 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/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/constants.ts

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