fontdue-js 2.18.3 → 2.19.0

package/dist/components/TypeTester/index.js

@@ -159,7 +159,8 @@ const TypeTester = _ref => {
         direction: props.direction,
         min: config.size.min,
         max: config.size.max,
-        autofitOnChange: config.autofitOnChange
+        autofitOnChange: config.autofitOnChange,
+        columns: config.columns
       }));
     }
     return /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/TypeTester/useTypeTesterStyler.d.ts

@@ -1,6 +1,11 @@
 import { EditorState } from 'draft-js';
 import { Alignment } from './types';
 import { VariableSettings } from '../../utils';
+export type ColumnsConfig = false | {
+    count: 'auto' | number;
+    width: string;
+    gap: string;
+};
 export interface UseTypeTesterStylerProps {
     autofit: boolean;
     autofitOnChange: boolean;
@@ -20,8 +25,9 @@ export interface UseTypeTesterStylerProps {
     contentEdited: boolean;
     alignment: Alignment;
     variableSettings: VariableSettings | null;
+    columns: ColumnsConfig;
 }
-declare const useTypeTesterStyler: ({ size, autofit, autofitOnChange, features, setSize, min, max, truncate, focused, lineHeight, letterSpacing, fontStyles, content, contentEdited, alignment, variableSettings, }: UseTypeTesterStylerProps) => {
+declare const useTypeTesterStyler: ({ size, autofit, autofitOnChange, features, setSize, min, max, truncate, focused, lineHeight, letterSpacing, fontStyles, content, contentEdited, alignment, variableSettings, columns, }: UseTypeTesterStylerProps) => {
     ref: import("react").RefObject<HTMLDivElement | null>;
     style: import("react").CSSProperties;
 };

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -42,7 +42,8 @@ const useTypeTesterStyler = _ref => {
     content,
     contentEdited,
     alignment,
-    variableSettings
+    variableSettings,
+    columns
   } = _ref;
   const ref = (0, _react.useRef)(null);
   const fontVariationSettings = variableSettings ? Object.keys(variableSettings).map(axis => `'${axis}' ${variableSettings[axis]}`).join(',') : undefined;
@@ -125,7 +126,12 @@ const useTypeTesterStyler = _ref => {
     marginLeft: alignment === 'right' ? -sideBuffer : 0,
     letterSpacing: `${letterSpacing}em`,
     fontVariationSettings,
-    textAlign: alignment
+    textAlign: alignment,
+    ...(columns && {
+      columnCount: columns.count,
+      columnWidth: columns.width,
+      columnGap: columns.gap
+    })
   };
   return {
     ref,

package/dist/corsError.d.ts

@@ -0,0 +1,5 @@
+export interface CorsError {
+    origin: string;
+    fontdueUrl: string;
+}
+export declare function handlePossibleCorsError(error: unknown, fetchUrl: string): boolean;

package/dist/corsError.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handlePossibleCorsError = handlePossibleCorsError;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+let detected = false;
+let navigating = false;
+if (typeof window !== 'undefined') {
+  window.addEventListener('beforeunload', () => {
+    navigating = true;
+  });
+}
+function isCrossOrigin(fetchUrl) {
+  try {
+    const url = new URL(fetchUrl, window.location.href);
+    return url.origin !== window.location.origin;
+  } catch {
+    return false;
+  }
+}
+function startPolling(fetchUrl) {
+  const interval = setInterval(async () => {
+    try {
+      await fetch(fetchUrl, {
+        method: 'POST',
+        credentials: 'include'
+      });
+      clearInterval(interval);
+      window.location.reload();
+    } catch {
+      // still blocked, keep polling
+    }
+  }, 3000);
+}
+function handlePossibleCorsError(error, fetchUrl) {
+  if (typeof window === 'undefined') return false;
+  if (!(error instanceof TypeError)) return false;
+  if (navigating) return false;
+  if (!isCrossOrigin(fetchUrl)) return false;
+  if (detected) return true;
+  detected = true;
+  const origin = window.location.origin;
+  console.error(`[Fontdue] Cross-origin request to ${fetchUrl} was blocked.\n\n` + `Your website (${origin}) is not listed as an allowed origin ` + `in your Fontdue CORS settings.\n\n` + `To fix this:\n` + `1. Log in to your Fontdue dashboard\n` + `2. Go to Settings \u2192 Security\n` + `3. Add "${origin}" to the "Cross-origin API access" field\n` + `4. Save \u2014 this page will reload automatically`);
+  Promise.resolve().then(() => _interopRequireWildcard(require('./components/CorsErrorModal'))).then(_ref => {
+    let {
+      renderCorsErrorModal
+    } = _ref;
+    renderCorsErrorModal(origin, fetchUrl);
+  });
+  startPolling(fetchUrl);
+  return true;
+}

package/dist/fontdue.css

@@ -448,6 +448,14 @@ div[data-component=TypeTesters] {
   flex: 0 1 250px;
   margin-right: 20px;
 }
+@media (max-width: 899px) {
+  .type-tester__toolbar .type-tester__variable-axes {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-gap: 5px;
+    width: 100%;
+  }
+}
 .type-tester__toolbar {
   display: flex;
   align-items: center;
@@ -457,6 +465,14 @@ div[data-component=TypeTesters] {
   z-index: 2;
   margin-top: 10px;
 }
+@media (max-width: 899px) {
+  .type-tester__toolbar {
+    flex-wrap: wrap;
+  }
+  .type-tester__toolbar .type-tester__select-button-wrapper {
+    margin-left: auto;
+  }
+}
 .type-tester__toolbar__price-text {
   margin: 0 20px;
   opacity: 0.5;
@@ -470,6 +486,13 @@ div[data-component=TypeTesters] {
 .type-tester__toolbar__tools:not(:last-child) {
   margin-right: 20px;
 }
+@media (max-width: 899px) {
+  .type-tester__toolbar__tools {
+    order: 1;
+    flex: 1 0 100%;
+    margin-top: 5px;
+  }
+}
 .type-tester[data-shy=hover] .type-tester__toolbar__tools, .type-tester[data-shy=focus] .type-tester__toolbar__tools {
   opacity: 0;
   pointer-events: none;
@@ -674,9 +697,7 @@ div[data-component=TypeTesters] {
 .type-tester__variable-axes__value {
   margin-left: 10px;
   margin-right: 16px;
-  width: 3em;
   text-align: right;
-  font-feature-settings: "tnum" 1;
 }
 .type-tester__variable-axes__name {
   white-space: nowrap;
@@ -847,6 +868,10 @@ div[data-component=TypeTesters] {
   --section_spacing: 60px;
 }
 
+.price {
+  font-variant-numeric: tabular-nums;
+}
+
 .character-viewer {
   --size: calc(var(--monitor-width) * 1 / 2);
   --half-gap: calc(var(--line-gap) / 2);
@@ -2068,11 +2093,44 @@ body[data-fontdue-store-modal=open] {
 }
 
 .store-modal__product-summary__container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.store-modal__product-summary__row {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
+.store-modal__product-summary__error {
+  font-size: 14px;
+  color: var(--error_text_color, #c00);
+  line-height: 1.4;
+}
+
+.store-modal__product-summary__error-button {
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: inherit;
+  text-align: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  text-transform: inherit;
+  text-decoration: underline;
+}
+.store-modal__product-summary__error-button:active, .store-modal__product-summary__error-button:focus {
+  outline: none;
+}
+.store-modal__product-summary__error-button:not(:disabled) {
+  cursor: pointer;
+}
+
 .store-modal__product-summary__add-to-cart-button {
   background: none;
   color: inherit;
@@ -2479,7 +2537,6 @@ body[data-fontdue-store-modal=open] {
 }
 .cart-item__price {
   margin-top: 20px;
-  font-variant-numeric: tabular-nums;
 }
 .cart-item:first-child .cart-item__price {
   margin-top: 0;
@@ -2564,6 +2621,7 @@ body[data-fontdue-store-modal=open] {
   text-transform: inherit;
   margin-left: 10px;
   margin-right: -3px;
+  vertical-align: middle;
 }
 .cart__remove-discount-button:active, .cart__remove-discount-button:focus {
   outline: none;

package/dist/relay/environment.js

@@ -8,6 +8,7 @@ exports.responseCache = exports.networkFetch = void 0;
 exports.useCurrentEnvironment = useCurrentEnvironment;
 var _react = require("react");
 var _relayRuntime = require("relay-runtime");
+var _corsError = require("../corsError");
 var _package = require("../../package.json");
 // @ts-ignore - JSON import
 
@@ -22,35 +23,48 @@ const CACHE_TTL = 10 * 1000; // 10 seconds, to resolve preloaded results
 function createNetworkFetch(options) {
   return async function networkFetch(request, variables) {
     const url = (FONTDUE_URL && `${FONTDUE_URL}/graphql`) ?? ((options === null || options === void 0 ? void 0 : options.url) ?? '') + '/graphql';
-    const resp = await fetch(url + `?queryName=${request.name}`, {
-      method: 'POST',
-      credentials: 'include',
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-        'fontdue-stripe-integration': STRIPE_INTEGRATION ?? ((options === null || options === void 0 ? void 0 : options.stripeIntegration) || 'dynamic'),
-        'fontdue-client-version': _package.version
-      },
-      body: JSON.stringify({
-        query: request.text,
-        variables
-      }),
-      // @ts-ignore
-      next: {
-        tags: ['graphql', `operation:${request.name}`]
+    let resp;
+    try {
+      resp = await fetch(url + `?queryName=${request.name}`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+          'fontdue-stripe-integration': STRIPE_INTEGRATION ?? ((options === null || options === void 0 ? void 0 : options.stripeIntegration) || 'dynamic'),
+          'fontdue-client-version': _package.version
+        },
+        body: JSON.stringify({
+          query: request.text,
+          variables
+        }),
+        // @ts-ignore
+        next: {
+          tags: ['graphql', `operation:${request.name}`]
+        }
+      });
+    } catch (error) {
+      if ((0, _corsError.handlePossibleCorsError)(error, url)) {
+        return {
+          data: undefined,
+          errors: [{
+            message: 'Cross-origin request blocked'
+          }]
+        };
       }
-    });
+      throw error;
+    }
     const json = await resp.json();
 
     // GraphQL returns exceptions (for example, a missing required variable) in the "errors"
     // property of the response. If any exceptions occurred when processing the request,
     // throw an error to indicate to the developer what went wrong.
     if (Array.isArray(json.errors)) {
-      var _json$errors;
+      var _json$errors, _error$extensions;
       const error = (_json$errors = json.errors) === null || _json$errors === void 0 ? void 0 : _json$errors[0];
       console.error('GraphQL Error:', {
         message: error.message,
-        code: error.code,
+        code: (_error$extensions = error.extensions) === null || _error$extensions === void 0 ? void 0 : _error$extensions.code,
         path: error.path
       });
     }