fix: Fix font family bugs (#4184)

## Description

2 bugs are getting fixed here:

1. when opening fonts manager, we immediately set a value on blur, but
when font manager is open this should not be needed
2. when on blur and onhighlight (dropdown) value is set, its not being
parsed as css, so the entire stack: "Arial, Verdana, serif" becomes a
value in a stack {type: 'fontFamily', value: ['Arial, Verdana,serif']}
instead of {type: 'fontFamily', value: ['Arial', 'Verdana', 'serif']}

## Steps for reproduction

1. click button
3. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file

Author: kof

apps/builder/app/builder/features/style-panel/controls/font-family/font-family-control.tsx

@@ -55,6 +55,7 @@ export const FontFamilyControl = () => {
       value: label,
     }));
   }, [assetContainers]);
+  const [isFontManagerOpen, setIsFontMangerOpen] = useState(false);
 
   const itemValue = useMemo(() => {
     // Replacing the quotes just to make it look cleaner in the UI
@@ -67,6 +68,7 @@ export const FontFamilyControl = () => {
         suffix={
           <FloatingPanel
             title="Fonts"
+            onOpenChange={setIsFontMangerOpen}
             content={
               <FontsManager
                 value={value.type === "fontFamily" ? value : undefined}
@@ -83,9 +85,14 @@ export const FontFamilyControl = () => {
         items={items}
         itemToString={(item) => item?.label ?? item?.value ?? ""}
         onItemHighlight={(item) => {
-          const value = item === null ? itemValue : item.value;
+          if (item === null) {
+            setValue(parseCssValue("fontFamily", itemValue), {
+              isEphemeral: true,
+            });
+            return;
+          }
           setValue(
-            { type: "fontFamily", value: [value] },
+            { type: "fontFamily", value: [item.value] },
             { isEphemeral: true }
           );
         }}
@@ -98,10 +105,10 @@ export const FontFamilyControl = () => {
           setIntermediateValue(value);
         }}
         onBlur={() => {
-          setValue({
-            type: "fontFamily",
-            value: [itemValue],
-          });
+          if (isFontManagerOpen) {
+            return;
+          }
+          setValue(parseCssValue("fontFamily", itemValue));
         }}
         match={matchOrSuggestToCreate}
       />