feat: font family selection

src/components/puck/atoms/body.tsx

@@ -4,7 +4,7 @@ import { clsx } from "clsx";
 import { NumberOrDefault } from "../../editor/NumberOrDefaultField.tsx";
 
 // Define the variants for the body component
-const bodyVariants = cva("components text-body-fontSize", {
+const bodyVariants = cva("components text-body-fontSize font-body-fontFamily", {
   variants: {
     fontWeight: {
       default: "font-body-fontWeight",

src/components/puck/atoms/heading.tsx

@@ -32,12 +32,12 @@ const headingVariants = cva("components", {
       capitalize: "capitalize",
     },
     level: {
-      1: "font-heading1-fontWeight text-heading1-fontSize text-heading1-color",
-      2: "font-heading2-fontWeight text-heading2-fontSize text-heading2-color",
-      3: "font-heading3-fontWeight text-heading3-fontSize text-heading3-color",
-      4: "font-heading4-fontWeight text-heading4-fontSize text-heading4-color",
-      5: "font-heading5-fontWeight text-heading5-fontSize text-heading5-color",
-      6: "font-heading6-fontWeight text-heading6-fontSize text-heading6-color",
+      1: "font-heading1-fontWeight text-heading1-fontSize text-heading1-color font-heading1-fontFamily",
+      2: "font-heading2-fontWeight text-heading2-fontSize text-heading2-color font-heading2-fontFamily",
+      3: "font-heading3-fontWeight text-heading3-fontSize text-heading3-color font-heading3-fontFamily",
+      4: "font-heading4-fontWeight text-heading4-fontSize text-heading4-color font-heading4-fontFamily",
+      5: "font-heading5-fontWeight text-heading5-fontSize text-heading5-color font-heading5-fontFamily",
+      6: "font-heading6-fontWeight text-heading6-fontSize text-heading6-color font-heading6-fontFamily",
     },
   },
   defaultVariants: {

src/internal/puck/components/FontSelector.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { FieldLabel } from "@measured/puck";
+import { StyleSelectOption } from "../../../utils/themeResolver.ts";
+import "../ui/puck.css";
+import { ChevronDown } from "lucide-react";
+
+type FontSelectorProps = {
+  label: string;
+  options: StyleSelectOption[];
+  value: string;
+  onChange: (value: any) => void;
+};
+
+export const FontSelector = ({
+  label,
+  onChange,
+  value,
+  options,
+}: FontSelectorProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleFontChange = (font: string) => {
+    onChange(font);
+    setIsOpen(false);
+  };
+
+  const selectedFontLabel =
+    options.find((option) => option.value === value)?.label ?? "Choose a font";
+
+  return (
+    <FieldLabel label={label} icon={<ChevronDown size={16} />}>
+      <div style={{ position: "relative" }}>
+        <button
+          onClick={toggleDropdown}
+          className="font-select"
+          style={{ fontFamily: value }}
+        >
+          {selectedFontLabel}
+        </button>
+
+        {isOpen && (
+          <div className="font-select-dropdown">
+            {options.map((option) => (
+              <button
+                key={option.value}
+                value={option.value}
+                onClick={() => handleFontChange(option.value)}
+                style={{
+                  fontFamily: option.value,
+                  backgroundColor:
+                    option.value === value ? "var(--puck-color-grey-09)" : "",
+                }}
+                className="font-select-option"
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </FieldLabel>
+  );
+};

src/internal/puck/ui/puck.css

@@ -64,3 +64,56 @@
   padding: 0;
   border: none !important;
 }
+
+.font-select {
+  text-align: left;
+  width: 100%;
+  padding: 12px 15px;
+  font-size: 14px;
+  cursor: pointer;
+  background-color: var(--puck-color-white);
+  border: 1px solid var(--puck-color-grey-09);
+  border-radius: 4px;
+  transition: border-color 50ms ease-in;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>")
+    no-repeat;
+  background-size: 12px;
+  background-position: calc(100% - 12px) calc(50% + 3px);
+  background-repeat: no-repeat;
+}
+
+.font-select:hover,
+.font-select:focus {
+  background-color: var(--puck-color-azure-12);
+  border-color: var(--puck-color-grey-05);
+  transition: none;
+}
+
+.font-select-dropdown {
+  position: absolute;
+  z-index: 1;
+  background-color: var(--puck-color-white);
+  border: 1px solid var(--puck-color-grey-09);
+  border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.font-select-option {
+  text-align: left;
+  width: 100%;
+  padding: 8px 12px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.font-select-option:hover {
+  background-color: var(--puck-color-grey-09);
+}
+
+.font-select-option:active {
+  background-color: var(--puck-color-grey-09);
+}

src/internal/utils/constructThemePuckFields.test.ts

@@ -98,7 +98,7 @@ describe("constructThemePuckFields", () => {
         },
         family: {
           label: "Font Family",
-          type: "select",
+          type: "custom",
         },
       },
     });
@@ -114,7 +114,7 @@ describe("convertStyleToPuckField", () => {
       default: 0,
     };
 
-    const result = convertStyleToPuckField(numberStyle);
+    const result = convertStyleToPuckField(numberStyle, numberStyle.plugin);
 
     expect(result).toEqual({
       label: "Font Size",
@@ -124,6 +124,26 @@ describe("convertStyleToPuckField", () => {
 
   it("converts select style to select field", () => {
     const selectStyle: Style = {
+      label: "Underline",
+      type: "select",
+      plugin: "fontStyle",
+      default: "none",
+      options: [
+        { label: "Underline", value: "underline" },
+        { label: "None", value: "" },
+      ],
+    };
+    const result = convertStyleToPuckField(selectStyle, selectStyle.plugin);
+
+    expect(result).toEqual({
+      label: "Underline",
+      type: "select",
+      options: selectStyle.options,
+    });
+  });
+
+  it("converts fontFamily style to font select field", () => {
+    const fontFamilyStyle: Style = {
       label: "Font Family",
       type: "select",
       plugin: "fontFamily",
@@ -134,12 +154,15 @@ describe("convertStyleToPuckField", () => {
       ],
     };
 
-    const result = convertStyleToPuckField(selectStyle);
+    const result = convertStyleToPuckField(
+      fontFamilyStyle,
+      fontFamilyStyle.plugin
+    );
 
-    expect(result).toEqual({
+    expect(result).toMatchObject({
       label: "Font Family",
-      type: "select",
-      options: selectStyle.options,
+      type: "custom",
+      options: fontFamilyStyle.options,
     });
   });
 
@@ -151,7 +174,7 @@ describe("convertStyleToPuckField", () => {
       plugin: "colors",
     };
 
-    const result = convertStyleToPuckField(colorStyle);
+    const result = convertStyleToPuckField(colorStyle, colorStyle.plugin);
 
     expect(result).toMatchObject({
       label: "Main Color",

src/internal/utils/constructThemePuckFields.ts

@@ -7,6 +7,8 @@ import {
 import { CoreStyle, ThemeConfigSection } from "../../utils/themeResolver.ts";
 import { ColorSelector } from "../puck/components/ColorSelector.tsx";
 import { ThemeData } from "../types/themeData.ts";
+import { FontSelector } from "../puck/components/FontSelector.tsx";
+import { RenderProps } from "./renderEntityFields.tsx";
 
 // Converts a ThemeConfigSection into a Puck fields object
 export const constructThemePuckFields = (themeSection: ThemeConfigSection) => {
@@ -18,7 +20,7 @@ export const constructThemePuckFields = (themeSection: ThemeConfigSection) => {
 
   Object.entries(themeSection.styles).forEach(([styleKey, style]) => {
     if ("type" in style) {
-      const styleField = convertStyleToPuckField(style);
+      const styleField = convertStyleToPuckField(style, style.plugin);
       if (styleField) {
         field.objectFields[styleKey] = styleField;
       }
@@ -30,7 +32,8 @@ export const constructThemePuckFields = (themeSection: ThemeConfigSection) => {
       };
       for (const subkey in style.styles) {
         styleGroupFields.objectFields[subkey] = convertStyleToPuckField(
-          style.styles[subkey]
+          style.styles[subkey],
+          style.plugin
         );
       }
       field.objectFields[styleKey] = styleGroupFields;
@@ -40,19 +43,34 @@ export const constructThemePuckFields = (themeSection: ThemeConfigSection) => {
 };
 
 // Determines which Puck field type to use for a style
-export const convertStyleToPuckField = (style: CoreStyle) => {
+export const convertStyleToPuckField = (style: CoreStyle, plugin: string) => {
   switch (style.type) {
     case "number":
       return {
         label: style.label,
         type: "number",
       } as NumberField;
     case "select":
-      return {
-        label: style.label,
-        type: "select",
-        options: style.options,
-      } as SelectField;
+      if (plugin === "fontFamily") {
+        return {
+          label: style.label,
+          type: "custom",
+          options: style.options,
+          render: ({ onChange, value }: RenderProps) =>
+            FontSelector({
+              label: style.label,
+              options: style.options,
+              value,
+              onChange,
+            }),
+        } as CustomField;
+      } else {
+        return {
+          label: style.label,
+          type: "select",
+          options: style.options,
+        } as SelectField;
+      }
     case "color":
       return {
         label: style.label,

src/utils/applyTheme.test.ts

@@ -20,7 +20,8 @@ describe("buildCssOverridesStyle", () => {
     const result = applyTheme(document, themeConfig);
 
     expect(result).toBe(
-      '<style id="visual-editor-theme" type="text/css">.components{' +
+      defaultGoogleFontsLinkTags +
+        '<style id="visual-editor-theme" type="text/css">.components{' +
         "--colors-palette-text:red !important;" +
         "--colors-palette-primary-DEFAULT:hsl(0 68% 51%) !important;" +
         "--colors-palette-primary-foreground:hsl(0 0% 100%) !important;" +
@@ -52,7 +53,8 @@ describe("buildCssOverridesStyle", () => {
     const result = applyTheme(document, themeConfig);
 
     expect(result).toBe(
-      '<style id="visual-editor-theme" type="text/css">.components{' +
+      defaultGoogleFontsLinkTags +
+        '<style id="visual-editor-theme" type="text/css">.components{' +
         "--colors-palette-text:black !important;" +
         "--colors-palette-primary-DEFAULT:hsl(0 68% 51%) !important;" +
         "--colors-palette-primary-foreground:hsl(0 0% 100%) !important;" +
@@ -66,7 +68,8 @@ describe("buildCssOverridesStyle", () => {
     const result = applyTheme({} as Document, themeConfig);
 
     expect(result).toBe(
-      '<style id="visual-editor-theme" type="text/css">.components{' +
+      defaultGoogleFontsLinkTags +
+        '<style id="visual-editor-theme" type="text/css">.components{' +
         "--colors-palette-text:black !important;" +
         "--colors-palette-primary-DEFAULT:hsl(0 68% 51%) !important;" +
         "--colors-palette-primary-foreground:hsl(0 0% 100%) !important;" +
@@ -96,7 +99,8 @@ describe("buildCssOverridesStyle", () => {
     const result = applyTheme(document, themeConfig);
 
     expect(result).toBe(
-      '<style id="visual-editor-theme" type="text/css">.components{' +
+      defaultGoogleFontsLinkTags +
+        '<style id="visual-editor-theme" type="text/css">.components{' +
         "--colors-palette-text:black !important;" +
         "--colors-palette-primary-DEFAULT:hsl(0 68% 51%) !important;" +
         "--colors-palette-primary-foreground:hsl(0 0% 100%) !important;" +
@@ -153,3 +157,13 @@ const themeConfig: ThemeConfig = {
     },
   },
 };
+
+const defaultGoogleFontsLinkTags =
+  '<link rel="preconnect" href="https://fonts.googleapis.com">\n' +
+  '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\n' +
+  '<link href="https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400..900;1,400..900&family=Asap:ital,wght@0,100..900;1,100..900' +
+  "&family=Bitter:ital,wght@0,100..900;1,100..900&family=Cabin:ital,wght@0,400..700;1,400..700&family=Cinzel:[email protected]&family=EB+Garamond:ital,wght@0,400..800;1,400..800" +
+  "&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Inconsolata:[email protected]&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Lora:ital,wght@0,400..700;1,400..700" +
+  "&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900" +
+  "&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Flex:[email protected]&family=Roboto+Slab:[email protected]&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900" +
+  '&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Ubuntu+Sans:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">';

src/utils/applyTheme.ts

@@ -1,6 +1,7 @@
 import { ThemeData } from "../internal/types/themeData.ts";
 import { internalThemeResolver } from "../internal/utils/internalThemeResolver.ts";
 import { DevLogger } from "./devLogger.ts";
+import { googleFontLinkTags } from "./visualEditorFonts.ts";
 import { ThemeConfig } from "./themeResolver.ts";
 
 export type Document = {
@@ -36,7 +37,7 @@ export const applyTheme = (
   }
 
   if (Object.keys(themeConfig).length > 0) {
-    return `${base ?? ""}<style id="${THEME_STYLE_TAG_ID}" type="text/css">${internalApplyTheme(overrides, themeConfig)}</style>`;
+    return `${base ?? ""}${googleFontLinkTags}<style id="${THEME_STYLE_TAG_ID}" type="text/css">${internalApplyTheme(overrides, themeConfig)}</style>`;
   }
   return base ?? "";
 };

src/utils/index.ts

@@ -3,3 +3,4 @@ export { resolveVisualEditorData } from "./resolveVisualEditorData.ts";
 export { resolveYextEntityField } from "./resolveYextEntityField.ts";
 export { themeResolver, type ThemeConfig } from "./themeResolver.ts";
 export { yextCn } from "./yextCn.ts";
+export { visualEditorFonts } from "./visualEditorFonts.ts";