feat: swap fontpicker combobox for fontpicker with image previews

Author: ae9is

packages/editor/package.json

@@ -55,6 +55,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable-tree": "^0.7.0",
+    "react-fontpicker-ts": "^0.2.1",
     "react-merge-refs": "^2.0.1",
     "react-sortablejs": "^6.1.4",
     "scroll-into-view-if-needed": "^3.0.10",

packages/editor/src/views/inspector/style/TextPane.tsx

@@ -22,6 +22,7 @@ import { InspectorTargetContext } from "../components/InspectorTargetContext";
 import { projectState } from "../../../state/ProjectState";
 import { InspectorComboBox } from "./inputs/InspectorComboBox";
 import googleFonts from "@uimix/foundation/src/fonts/GoogleFonts.json";
+import { InspectorFontPicker } from "./inputs/InspectorFontPicker";
 
 const googleFontOptions = googleFonts.items.map((item) => ({
   value: item.family,
@@ -79,12 +80,20 @@ export const TextPane: React.FC = observer(function TextPane() {
       />
       <InspectorTargetContext.Provider value={textSelectables}>
         <div className="flex flex-col gap-2">
+          {/* 
           <InspectorComboBox
             get={(s) => s.style.fontFamily}
             set={(s, value) => {
               s.style.fontFamily = value ?? "Inter";
             }}
             options={googleFontOptions}
+          /> */}
+          <InspectorFontPicker
+            get={(s) => s.style.fontFamily}
+            set={(s, value) => {
+              s.style.fontFamily = value ?? "Inter";
+            }}
+            options={googleFontOptions}
           />
           <div className="grid grid-cols-2 gap-2">
             <InspectorNumberInput

packages/editor/src/views/inspector/style/inputs/InspectorFontPicker.css

@@ -0,0 +1,96 @@
+/*
+ * You can customise fontpicker styling using these classes.
+ * This example makes the fontpicker align better with the project's combobox styling.
+ * Default styles commented out for reference below.
+ */
+.fontpicker {
+  border: unset;
+}
+.fontpicker {
+  border: unset;
+  background: unset;
+}
+.fontpicker__search {
+  background-color: #f5f5f5;
+}
+.fontpicker__popout {
+  border: 1px solid #e5e5e5;
+  border-radius: 0.25rem;
+  background: #f5f5f5;
+}
+.fontpicker__option {
+  background: unset;
+}
+.fontpicker__option.selected {
+  background: #d4d4d4;
+}
+.fontpicker__nomatches {
+  background: unset;
+}
+.fontpicker__preview {
+  -webkit-filter: unset;
+  filter: unset;
+}
+/*
+.fontpicker,
+.fontpicker * {
+  box-sizing: border-box;
+}
+.fontpicker {
+  border: 1px solid;
+  display: block;
+  position: relative;
+  background: #333;
+}
+.fontpicker__preview {
+  -webkit-filter: invert(100%);
+  filter: invert(100%);
+}
+.fontpicker__search {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  padding: 0 10px;
+  cursor: pointer;
+  font-size: 16px;
+  background-color: #555;
+}
+.fontpicker__search:focus {
+  cursor: text;
+  opacity: 1;
+}
+.fontpicker__popout {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  border: 1px solid;
+  max-height: calc(12em + 1px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: 2;
+  background: #555;
+  opacity: 0;
+  transform: scaleY(0.001);
+}
+.fontpicker__popout.fontpicker__active {
+  opacity: 1;
+  transform: scale(1);
+}
+.fontpicker__option {
+  background: #555;
+}
+.fontpicker__option.selected {
+  background: #6789ab;
+}
+.fontpicker__nomatches {
+  height: 2em;
+  line-height: 2em;
+  background: #555;
+  text-align: center;
+  color: #eee;
+}
+*/

packages/editor/src/views/inspector/style/inputs/InspectorFontPicker.tsx

@@ -0,0 +1,47 @@
+import { useContext } from "react";
+import { action } from "mobx";
+import { observer } from "mobx-react-lite";
+import { twMerge } from "tailwind-merge";
+import FontPicker from 'react-fontpicker-ts';
+import 'react-fontpicker-ts/dist/index.css';
+import { Mixed, sameOrMixed } from "@uimix/foundation/src/utils/Mixed";
+import { Selectable } from "@uimix/model/src/models";
+import { InspectorTargetContext } from "../../components/InspectorTargetContext";
+import { projectState } from "../../../../state/ProjectState";
+import { SelectOption } from "@uimix/foundation/src/components/Select";
+import './InspectorFontPicker.css';
+
+export const InspectorFontPicker = observer(function InspectorFontPicker({
+  className,
+  get,
+  set,
+  options,
+}: {
+  className?: string;
+  get: (selectable: Selectable) => string | undefined;
+  set: (selectable: Selectable, value?: string) => void;
+  options?: readonly SelectOption<string>[];
+}) {
+  const selectables = useContext(InspectorTargetContext);
+  const value = sameOrMixed(selectables.map((s) => get(s)));
+
+  return (
+    <FontPicker
+      className={twMerge(
+        `fontpicker 
+         relative
+         outline-0 w-full h-7 bg-macaron-uiBackground rounded
+         focus-within:ring-1 ring-inset ring-macaron-active text-macaron-text text-macaron-base`,
+        className
+      )}
+      googleFonts={options?.map((option: SelectOption<string>) => option.value)}
+      defaultValue={value === Mixed ? "Mixed" : undefined}
+      value={action((value: string) => {
+        for (const selectable of selectables) {
+          set(selectable, value);
+        }
+        projectState.undoManager.stopCapturing();
+      })}
+    />
+  );
+});