@broadpaper/editor 0.3.0 → 0.4.0

package/dist/index.js

@@ -4527,6 +4527,23 @@ function SubFormList({ value, onChange, fields, itemLabel, summary, renderField
   );
 }
 
+// src/inspector/font-options.ts
+function fontOptions(theme, current) {
+  const first = (stack) => stack.split(",")[0].trim().replace(/^['"]|['"]$/g, "");
+  const options = [
+    { value: "$typography.headingFont", label: `Heading font (${first(theme.typography.headingFont)})` },
+    { value: "$typography.bodyFont", label: `Body font (${first(theme.typography.bodyFont)})` },
+    ...theme.typography.monoFont ? [{ value: "$typography.monoFont", label: `Mono font (${first(theme.typography.monoFont)})` }] : []
+  ];
+  for (const face of theme.fonts ?? []) {
+    if (!options.some((o) => o.value === face.family)) options.push({ value: face.family, label: face.family });
+  }
+  if (current && !options.some((o) => o.value === current)) {
+    options.push({ value: current, label: `${current.startsWith("$typography.") ? current.slice("$typography.".length) : current} (not in this theme)` });
+  }
+  return options;
+}
+
 // src/inspector/fields/FieldRenderer.tsx
 import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 function getPath(obj, path) {
@@ -4537,7 +4554,6 @@ function getPath(obj, path) {
   }
   return cur;
 }
-var COMMON_FONTS = ["Inter", "Roboto", "Open Sans", "Lato", "Source Sans 3", "Helvetica Neue", "Arial", "Georgia", "Times New Roman", "Merriweather", "Playfair Display", "Courier New", "JetBrains Mono"];
 function FieldRenderer({ field, value, onChange, ctx }) {
   const description = typeof field.description === "function" ? field.description(ctx.props) : field.description;
   const humanise = useTokenText(ctx.dataSources, ctx.scopeVars);
@@ -4665,13 +4681,7 @@ function coerce(v, options) {
   return match ? match.value : v;
 }
 function FontSelect({ value, onChange, theme }) {
-  const themeFonts = [
-    { value: "$typography.headingFont", label: `Heading font (${theme.typography.headingFont.split(",")[0]})` },
-    { value: "$typography.bodyFont", label: `Body font (${theme.typography.bodyFont.split(",")[0]})` },
-    ...theme.typography.monoFont ? [{ value: "$typography.monoFont", label: "Mono font" }] : []
-  ];
-  const fonts = [...(theme.fonts ?? []).map((f) => f.family), ...COMMON_FONTS].filter((f, i, a) => a.indexOf(f) === i);
-  return /* @__PURE__ */ jsx21(Select, { value, onChange, placeholder: "Default", options: [...themeFonts, ...fonts.map((f) => ({ value: f, label: f }))] });
+  return /* @__PURE__ */ jsx21(Select, { value, onChange, placeholder: "Default", options: fontOptions(theme, value) });
 }
 function CustomFieldHost({ field, value, onChange, ctx }) {
   const session = useSession();
@@ -4751,7 +4761,7 @@ function StyleGroups({ node, groups, theme, textStyles, setStyle, setFlow, allow
     allowOverrides && (has("textStyle") || has("typography") || has("alignment")) ? /* @__PURE__ */ jsx22(Section, { title: "Typography", actions: hasOverrides ? /* @__PURE__ */ jsx22(Button, { size: "sm", variant: "ghost", icon: "rotate-ccw", tooltip: "Reset style overrides", onClick: () => setStyle(null) }) : null, children: /* @__PURE__ */ jsxs21("div", { className: "bpe-prop-grid", children: [
       has("textStyle") ? /* @__PURE__ */ jsx22(Field, { label: "Text style", children: /* @__PURE__ */ jsx22(Select, { value: s.textStyle ?? "", onChange: (v) => setStyle({ textStyle: v || void 0 }), placeholder: "Block default", options: textStyles.map((t) => ({ value: t, label: textStyleLabel2(t) })) }) }) : null,
       has("typography") ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
-        /* @__PURE__ */ jsx22(Field, { label: "Font", children: /* @__PURE__ */ jsx22(Select, { value: s.fontFamily ?? "", onChange: (v) => setStyle({ fontFamily: v || void 0 }), placeholder: "Inherit", options: [{ value: "$typography.headingFont", label: "Heading font" }, { value: "$typography.bodyFont", label: "Body font" }, ...(theme.fonts ?? []).map((x) => ({ value: x.family, label: x.family })), ...["Inter", "Roboto", "Georgia", "Arial", "Times New Roman"].map((x) => ({ value: x, label: x }))] }) }),
+        /* @__PURE__ */ jsx22(Field, { label: "Font", children: /* @__PURE__ */ jsx22(Select, { value: s.fontFamily ?? "", onChange: (v) => setStyle({ fontFamily: v || void 0 }), placeholder: "Inherit", options: fontOptions(theme, s.fontFamily) }) }),
         /* @__PURE__ */ jsx22(Field, { label: "Size", children: /* @__PURE__ */ jsx22(NumberInput, { value: s.fontSize ?? null, onChange: (v) => setStyle({ fontSize: v ?? void 0 }), min: 4, max: 200, unit: "px", placeholder: "inherit" }) }),
         /* @__PURE__ */ jsx22(Field, { label: "Weight", children: /* @__PURE__ */ jsx22(Select, { value: s.fontWeight === void 0 ? "" : String(s.fontWeight), onChange: (v) => setStyle({ fontWeight: v ? Number(v) : void 0 }), placeholder: "Inherit", options: [300, 400, 500, 600, 700, 800].map((w) => ({ value: String(w), label: w === 400 ? "Regular" : w === 700 ? "Bold" : String(w) })) }) }),
         /* @__PURE__ */ jsx22(Field, { label: "Line height", children: /* @__PURE__ */ jsx22(NumberInput, { value: s.lineHeight ?? null, onChange: (v) => setStyle({ lineHeight: v ?? void 0 }), min: 0.6, max: 4, step: 0.05, placeholder: "inherit" }) }),
@@ -5003,7 +5013,7 @@ function TextStyleEditor({ id, style, onChange, onBack }) {
       /* @__PURE__ */ jsx24(Button, { size: "sm", variant: "ghost", icon: "chevron-right", style: { transform: "rotate(180deg)" }, onClick: onBack, tooltip: "Back" }),
       /* @__PURE__ */ jsx24("strong", { children: id })
     ] }),
-    /* @__PURE__ */ jsx24(Field, { label: "Font", children: /* @__PURE__ */ jsx24(Select, { value: style.fontFamily ?? "", onChange: (v) => onChange({ fontFamily: v || void 0 }), placeholder: "Theme body font", options: [{ value: "$typography.headingFont", label: "Theme heading font" }, { value: "$typography.bodyFont", label: "Theme body font" }, ...(theme.fonts ?? []).map((f) => ({ value: f.family, label: f.family }))] }) }),
+    /* @__PURE__ */ jsx24(Field, { label: "Font", children: /* @__PURE__ */ jsx24(Select, { value: style.fontFamily ?? "", onChange: (v) => onChange({ fontFamily: v || void 0 }), placeholder: "Theme body font", options: fontOptions(theme, style.fontFamily) }) }),
     /* @__PURE__ */ jsx24(Field, { label: "Size", children: /* @__PURE__ */ jsx24(NumberInput, { value: style.fontSize ?? null, onChange: (v) => onChange({ fontSize: v ?? void 0 }), min: 4, max: 120, unit: "px" }) }),
     /* @__PURE__ */ jsx24(Field, { label: "Weight", children: /* @__PURE__ */ jsx24(Select, { value: style.fontWeight === void 0 ? "" : String(style.fontWeight), onChange: (v) => onChange({ fontWeight: v ? Number(v) : void 0 }), placeholder: "Regular", options: [300, 400, 500, 600, 700, 800].map((w) => ({ value: String(w), label: String(w) })) }) }),
     /* @__PURE__ */ jsx24(Field, { label: "Line height", children: /* @__PURE__ */ jsx24(NumberInput, { value: style.lineHeight ?? null, onChange: (v) => onChange({ lineHeight: v ?? void 0 }), min: 0.8, max: 3, step: 0.05 }) }),