@makeswift/runtime 0.9.12 → 0.10.1

package/dist/index.es.js

@@ -38,10 +38,10 @@ import * as React from "react";
 import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useId, useCallback, useImperativeHandle, Component, Suspense } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import dynamic from "next/dynamic";
-import { a as createDocumentReference, g as getPropControllerDescriptors, b as isElementReference, e as getSwatchIds, f as getFileIds, h as getTypographyIds, j as getTableIds, k as getPageIds, l as getElementChildren, E as ElementID, B as Backgrounds, W as Width, m as ResponsiveIconRadioGroup, M as Margin, P as Padding, n as Border, o as BorderRadius, S as Shadows, G as GapY, p as GapX, q as ResponsiveSelect, r as ResponsiveNumber, s as Checkbox, t as Grid, u as TextInput, L as Link, v as ResponsiveColor, w as TextStyle, C as ComponentIcon, I as Images, N as Number$1, D as Date$1, F as Font, x as ResponsiveLength, y as TextArea, z as Table, A as TableFormFields, H as Image, J as ResponsiveOpacity, K as NavigationLinks, O as SocialLinks, Q as RichText, V as Video, U as useStyle, X as getBorderSwatchIds, Y as getBoxShadowsSwatchIds, Z as getResponsiveColorSwatchIds, _ as StyleControlProperty, $ as ImageControlValueFormat, a0 as isPropControllersHandle, a1 as isRichTextV1Data, a2 as isNonNullable$1, a3 as TypographyControlType, a4 as StyleControlType, a5 as RichTextV2ControlType, a6 as RichTextControlType, a7 as SlotControlType, a8 as StyleV2ControlType, a9 as ListControlType, aa as ShapeControlType, ab as LinkControlType, ac as ImageControlType, ad as ColorControlType, ae as getComponentPropControllerDescriptors, af as getPropControllers, ag as Types, ah as BorderPropControllerFormat, ai as ShadowsPropControllerFormat, aj as BorderRadiusPropControllerFormat, ak as MarginPropControllerFormat, al as PaddingPropControllerFormat, am as WidthPropControllerFormat, an as configureStore$1, ao as copyElementTree, ap as getBreakpoints, aq as parseLocalesInput, ar as getDocument, as as getElementId, at as getIsPreview, au as getIsInBuilder, av as getReactComponent, aw as getBuilderEditMode } from "./react-page.es.js";
+import { a as deepEqual, b as createDocumentReference, g as getPropControllerDescriptors, e as isElementReference, f as getDefaultLocale, h as getLocales, j as getSwatchIds, k as getFileIds, l as getTypographyIds, m as getTableIds, n as getPageIds, o as getElementChildren, E as ElementID, B as Backgrounds, W as Width, p as ResponsiveIconRadioGroup, M as Margin, P as Padding, q as Border, r as BorderRadius, S as Shadows, G as GapY, s as GapX, t as ResponsiveSelect, u as ResponsiveNumber, v as Checkbox, w as Grid, x as TextInput, L as Link$1, y as ResponsiveColor, z as TextStyle, C as ComponentIcon, I as Images, N as Number$1, D as Date$1, F as Font, A as ResponsiveLength, H as TextArea, J as Table, K as TableFormFields, O as Image, Q as ResponsiveOpacity, U as NavigationLinks, V as SocialLinks, X as RichText, Y as BlockType, Z as Video, _ as useStyle, $ as getBorderSwatchIds, a0 as getBoxShadowsSwatchIds, a1 as getResponsiveColorSwatchIds, a2 as StyleControlProperty, a3 as ImageControlValueFormat, a4 as isPropControllersHandle, a5 as isRichTextV1Data, a6 as isNonNullable$1, a7 as TypographyControlType, a8 as StyleControlType, a9 as RichTextV2ControlType, aa as RichTextControlType, ab as SlotControlType, ac as StyleV2ControlType, ad as ListControlType, ae as ShapeControlType, af as LinkControlType, ag as ImageControlType, ah as IconRadioGroupControlType, ai as ColorControlType, aj as SelectControlType, ak as getComponentPropControllerDescriptors, al as getPropControllers, am as Types, an as BorderPropControllerFormat, ao as ShadowsPropControllerFormat, ap as BorderRadiusPropControllerFormat, aq as MarginPropControllerFormat, ar as PaddingPropControllerFormat, as as WidthPropControllerFormat, at as configureStore$1, au as copyElementTree, av as getBreakpoints, aw as parseLocalesInput, ax as getElementId, ay as getReactComponent, az as getDocument, aA as getIsInBuilder, aB as getBuilderEditMode, aC as getIsPreview } from "./react-page.es.js";
 import { A as ActionTypes, o as apiResourceFulfilled, p as registerComponentEffect, q as registerReactComponentEffect, t as registerComponentHandleEffect, v as mountComponentEffect } from "./actions.es.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { I as IconRadioGroupControlType, S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
+import { T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
 import { C as ComboboxControlType } from "./combobox.es.js";
 import "slate";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
@@ -67,6 +67,9 @@ import { parse as parse$1 } from "set-cookie-parser";
 import { M as MakeswiftComponentType } from "./constants.es.js";
 import { v4 } from "uuid";
 import ipsum from "corporate-ipsum";
+import "is-hotkey";
+import "slate-react";
+import NextLink from "next/link";
 const SCRIPT_TAG = "script";
 function BodySnippet({
   code,
@@ -111,43 +114,6 @@ function BodySnippet({
   }, [code, cleanup]);
   return null;
 }
-function is(x, y) {
-  if (x === y)
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  return x !== x && y !== y;
-}
-const { hasOwnProperty: hasOwnProperty$1 } = Object.prototype;
-const shallowEqual = (a, b) => {
-  if (is(a, b))
-    return true;
-  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
-    return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length)
-    return false;
-  for (let i = 0; i < keysA.length; i += 1) {
-    if (!hasOwnProperty$1.call(b, keysA[i]) || !is(a[keysA[i]], b[keysA[i]]))
-      return false;
-  }
-  return true;
-};
-const { hasOwnProperty } = Object.prototype;
-const deepEqual = (a, b) => {
-  if (shallowEqual(a, b))
-    return true;
-  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null)
-    return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length)
-    return false;
-  for (let i = 0; i < keysA.length; i += 1) {
-    if (!hasOwnProperty.call(b, keysA[i]) || !deepEqual(a[keysA[i]], b[keysA[i]]))
-      return false;
-  }
-  return true;
-};
 function getInitialState(serializedState = {
   Swatch: [],
   File: [],
@@ -1087,12 +1053,19 @@ Received "${apiKey}" instead.`);
     preview: previewOverride = false,
     unstable_locale
   } = {}) {
-    var _a;
+    var _a, _b;
     const isUsingVersioning = this.siteVersion != null;
     const siteVersion = (_a = this.siteVersion) != null ? _a : previewOverride ? MakeswiftSiteVersion.Working : MakeswiftSiteVersion.Live;
+    const defaultLocale = (_b = getDefaultLocale(this.runtime.store.getState())) == null ? void 0 : _b.toString();
+    const locale = unstable_locale === defaultLocale ? null : unstable_locale;
     const searchParams = new URLSearchParams();
-    if (unstable_locale)
-      searchParams.set("locale", unstable_locale);
+    if (locale) {
+      const locales = getLocales(this.runtime.store.getState()).map((locale2) => locale2.toString());
+      if (!locales.includes(locale)) {
+        throw new Error(`Locale "${locale}" is not included in the locales: ${locales}. Please add the locale to the locales on the ReactRuntime.`);
+      }
+      searchParams.set("locale", locale);
+    }
     const response = await this.fetch(`/${isUsingVersioning ? "v3" : "v2"}/pages/${encodeURIComponent(pathname)}/document?${searchParams.toString()}`, {
       headers: { "Makeswift-Site-Version": siteVersion }
     });
@@ -1103,7 +1076,7 @@ Received "${apiKey}" instead.`);
       throw new Error(`Failed to get page snapshot with error: "${response.statusText}"`);
     }
     const document2 = await response.json();
-    const { cacheData, localizedResourcesMap } = await this.introspect(document2.data, previewOverride, unstable_locale);
+    const { cacheData, localizedResourcesMap } = await this.introspect(document2.data, previewOverride, locale != null ? locale : void 0);
     const apiOrigin = this.apiOrigin.href;
     const preview = siteVersion === MakeswiftSiteVersion.Working;
     return {
@@ -1112,7 +1085,7 @@ Received "${apiKey}" instead.`);
       apiOrigin,
       preview,
       localizedResourcesMap,
-      locale: unstable_locale != null ? unstable_locale : null
+      locale: locale != null ? locale : null
     };
   }
   async getSwatch(swatchId) {
@@ -1206,7 +1179,7 @@ async function fonts(_req, res, { getFonts } = {}) {
   const fonts2 = (_a = await (getFonts == null ? void 0 : getFonts())) != null ? _a : [];
   return res.json(fonts2);
 }
-const version = "0.9.12";
+const version = "0.10.1";
 async function handler(req, res, { apiKey, unstable_siteVersions }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -1346,7 +1319,7 @@ Read more about dynamic catch-all routes here: https://nextjs.org/docs/routing/d
       return client.getGlobalElement(m.params.id).then(handleResource);
     }
     if (m = matches("/localized-global-elements/:globalElementId/:locale")) {
-      return client.getLocalizedGlobalElement(m.params.globalElementId, m.params.locale).then(handleResource);
+      return client.getLocalizedGlobalElement(m.params.globalElementId, m.params.locale).then((resource) => resource === null ? res.json({ message: "Not Found" }) : res.json(resource));
     }
     if (m = matches("/page-pathname-slices/:id")) {
       return client.getPagePathnameSlice(m.params.id).then(handleResource);
@@ -1479,7 +1452,8 @@ const Page = memo(({
   const client = useMemo(() => new MakeswiftClient({
     uri: new URL("graphql", snapshot.apiOrigin).href,
     cacheData: snapshot.cacheData,
-    localizedResourcesMap: snapshot.localizedResourcesMap
+    localizedResourcesMap: snapshot.localizedResourcesMap,
+    locale: snapshot.locale ? new Intl.Locale(snapshot.locale) : void 0
   }), [snapshot]);
   const rootElements = /* @__PURE__ */ new Map([[snapshot.document.id, snapshot.document.data]]);
   snapshot.document.localizedPages.forEach((localizedPage) => {
@@ -1653,7 +1627,7 @@ function registerComponent$b(runtime) {
     props: {
       id: ElementID(),
       children: TextInput({ placeholder: "Button text" }),
-      link: Link({
+      link: Link$1({
         defaultValue: {
           type: "OPEN_PAGE",
           payload: {
@@ -1978,7 +1952,7 @@ function registerComponent$6(runtime) {
       id: ElementID(),
       tableId: Table(),
       fields: TableFormFields(),
-      submitLink: Link((props) => ({
+      submitLink: Link$1((props) => ({
         label: "Redirect to",
         options: [
           { value: "OPEN_PAGE", label: "Open page" },
@@ -2103,7 +2077,7 @@ function registerComponent$5(runtime) {
       id: ElementID(),
       file: Image(),
       altText: TextInput({ label: "Alt text" }),
-      link: Link({ label: "On click" }),
+      link: Link$1({ label: "On click" }),
       width: Width(),
       margin: Margin({ format: Margin.Format.ClassName }),
       padding: Padding({ format: Padding.Format.ClassName }),
@@ -2151,7 +2125,7 @@ function registerComponent$4(runtime) {
         label: "Logo alt text",
         hidden: props.showLogo === false
       })),
-      logoLink: Link((props) => ({
+      logoLink: Link$1((props) => ({
         label: "Logo on click",
         hidden: props.showLogo === false
       })),
@@ -2360,58 +2334,247 @@ function registerComponent$2(runtime) {
     }
   });
 }
+function useSwatch(swatchId) {
+  const client = useMakeswiftClient();
+  const readSwatch = () => swatchId == null ? null : client.readSwatch(swatchId);
+  const swatch = useSyncExternalStore(client.subscribe, readSwatch, readSwatch);
+  useEffect(() => {
+    if (swatchId != null)
+      client.fetchSwatch(swatchId).catch(console.error);
+  }, [client, swatchId]);
+  return swatch;
+}
+function useSwatches(swatchIds) {
+  const client = useMakeswiftClient();
+  const lastSnapshot = useRef();
+  function getSnapshot() {
+    const swatches2 = swatchIds.map((swatchId) => client.readSwatch(swatchId));
+    if (lastSnapshot.current != null && lastSnapshot.current.length === swatches2.length && lastSnapshot.current.every((swatch, idx) => swatches2[idx] === swatch)) {
+      return lastSnapshot.current;
+    }
+    return lastSnapshot.current = swatches2;
+  }
+  const swatches = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
+  useEffect(() => {
+    Promise.all(swatchIds.map((swatchId) => client.fetchSwatch(swatchId))).catch(console.error);
+  }, [client, swatchIds]);
+  return swatches;
+}
+function useFile(fileId) {
+  const client = useMakeswiftClient();
+  const readFile = () => fileId == null ? null : client.readFile(fileId);
+  const file = useSyncExternalStore(client.subscribe, readFile, readFile);
+  useEffect(() => {
+    if (fileId != null)
+      client.fetchFile(fileId);
+  }, [client, fileId]);
+  return file;
+}
+function useFiles(fileIds) {
+  const client = useMakeswiftClient();
+  const lastSnapshot = useRef();
+  function getSnapshot() {
+    const files2 = fileIds.map((fileId) => client.readFile(fileId));
+    if (lastSnapshot.current != null && lastSnapshot.current.length === files2.length && lastSnapshot.current.every((file, idx) => files2[idx] === file)) {
+      return lastSnapshot.current;
+    }
+    return lastSnapshot.current = files2;
+  }
+  const files = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
+  useEffect(() => {
+    Promise.all(fileIds.map((fileId) => client.fetchFile(fileId))).catch(console.error);
+  }, [client, fileIds]);
+  return files;
+}
+function useTypography(typographyId) {
+  const client = useMakeswiftClient();
+  const readTypography = () => typographyId == null ? null : client.readTypography(typographyId);
+  const typography = useSyncExternalStore(client.subscribe, readTypography, readTypography);
+  useEffect(() => {
+    if (typographyId != null)
+      client.fetchTypography(typographyId).catch(console.error);
+  }, [client, typographyId]);
+  return typography;
+}
+function useGlobalElement(globalElementId) {
+  const client = useMakeswiftClient();
+  const readGlobalElement = () => globalElementId == null ? null : client.readGlobalElement(globalElementId);
+  const globalElement = useSyncExternalStore(client.subscribe, readGlobalElement, readGlobalElement);
+  useEffect(() => {
+    if (globalElementId != null)
+      client.fetchGlobalElement(globalElementId).catch(console.error);
+  }, [client, globalElementId]);
+  return globalElement;
+}
+function useLocalizedGlobalElement(globalElementId) {
+  const client = useMakeswiftClient();
+  const readLocalizedGlobalElement = () => globalElementId == null ? null : client.readLocalizedGlobalElement(globalElementId);
+  const localizedGlobalElement = useSyncExternalStore(client.subscribe, readLocalizedGlobalElement, readLocalizedGlobalElement);
+  useEffect(() => {
+    if (globalElementId != null) {
+      client.fetchLocalizedGlobalElement(globalElementId).catch(console.error);
+    }
+  }, [client, globalElementId]);
+  return localizedGlobalElement;
+}
+function usePagePathnameSlice(pageId) {
+  const client = useMakeswiftClient();
+  const readPagePathnameSlice = () => pageId == null ? null : client.readPagePathnameSlice(pageId);
+  const pagePathnameSlice = useSyncExternalStore(client.subscribe, readPagePathnameSlice, readPagePathnameSlice);
+  useEffect(() => {
+    if (pageId != null)
+      client.fetchPagePathnameSlice(pageId).catch(console.error);
+  }, [client, pageId]);
+  return pagePathnameSlice;
+}
+function useTable(tableId) {
+  const client = useMakeswiftClient();
+  const readTable = () => tableId == null ? null : client.readTable(tableId);
+  const table = useSyncExternalStore(client.subscribe, readTable, readTable);
+  useEffect(() => {
+    if (tableId != null)
+      client.fetchTable(tableId).catch(console.error);
+  }, [client, tableId]);
+  return table;
+}
+const Link = forwardRef(function Link2(_e, ref) {
+  var _f = _e, {
+    link,
+    onClick = () => {
+    }
+  } = _f, restOfProps = __objRest(_f, [
+    "link",
+    "onClick"
+  ]);
+  var _a;
+  const pageId = link && link.type === "OPEN_PAGE" ? link.payload.pageId : null;
+  const page = usePagePathnameSlice(pageId != null ? pageId : null);
+  const elementKey = (link == null ? void 0 : link.type) === "SCROLL_TO_ELEMENT" ? (_a = link.payload.elementIdConfig) == null ? void 0 : _a.elementKey : null;
+  const elementId = useElementId(elementKey);
+  let useNextLink;
+  let href;
+  let target;
+  let block;
+  if (link) {
+    switch (link.type) {
+      case "OPEN_PAGE": {
+        if (page) {
+          useNextLink = true;
+          href = `/${page.pathname}`;
+        }
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "OPEN_URL": {
+        useNextLink = true;
+        href = link.payload.url;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "SEND_EMAIL": {
+        useNextLink = false;
+        const {
+          to,
+          subject = "",
+          body = ""
+        } = link.payload;
+        if (to != null)
+          href = `mailto:${to}?subject=${subject}&body=${body}`;
+        break;
+      }
+      case "CALL_PHONE": {
+        useNextLink = false;
+        href = `tel:${link.payload.phoneNumber}`;
+        break;
+      }
+      case "SCROLL_TO_ELEMENT": {
+        useNextLink = false;
+        href = `#${elementId != null ? elementId : ""}`;
+        block = link.payload.block;
+        break;
+      }
+      default:
+        throw new RangeError(`Invalid link type "${link.type}."`);
+    }
+  }
+  function handleClick(event) {
+    onClick(event);
+    if (event.defaultPrevented)
+      return;
+    if (event.currentTarget.isContentEditable)
+      return event.preventDefault();
+    if (link && link.type === "SCROLL_TO_ELEMENT") {
+      let hash;
+      try {
+        if (href != null)
+          hash = new URL(`http://www.example.com/${href}`).hash;
+      } catch (error) {
+        console.error(`Link received invalid href: ${href}`, error);
+      }
+      if (href != null && hash != null && href === hash) {
+        event.preventDefault();
+        const view = event.view;
+        scrollIntoView(view.document.querySelector(hash), {
+          behavior: "smooth",
+          block
+        });
+        if (view.location.hash !== hash)
+          view.history.pushState({}, "", hash);
+      }
+    }
+  }
+  if (useNextLink && href != null) {
+    return /* @__PURE__ */ jsx(NextLink, __spreadProps(__spreadValues({}, restOfProps), {
+      ref,
+      target,
+      onClick: handleClick,
+      href,
+      legacyBehavior: false
+    }));
+  }
+  return /* @__PURE__ */ jsx("a", __spreadProps(__spreadValues({}, restOfProps), {
+    ref,
+    href,
+    target,
+    onClick: handleClick
+  }));
+});
 function registerComponent$1(runtime) {
   return runtime.registerComponent(forwardNextDynamicRef((patch) => dynamic(() => patch(import("./Text.es.js")))), {
     type: MakeswiftComponentType.Text,
     label: "Text",
     props: {
       id: ElementID(),
-      text: RichText(() => ({
-        preset: {
-          document: {
-            object: "document",
-            nodes: [
+      text: RichText({
+        unstable_defaultValue: [
+          {
+            type: BlockType.Default,
+            children: [
               {
-                object: "block",
-                type: "paragraph",
-                nodes: [
-                  {
-                    object: "text",
-                    text: ipsum(3),
-                    marks: [
+                text: ipsum(3),
+                typography: {
+                  style: [
+                    {
+                      deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
+                      value: {
+                        fontWeight: 400,
+                        fontSize: { value: 18, unit: "px" },
+                        lineHeight: 1.5
+                      }
+                    },
+                    ...runtime.getBreakpoints().some(({ id }) => id === DefaultBreakpointID.Mobile) ? [
                       {
-                        object: "mark",
-                        type: "typography",
-                        data: {
-                          value: {
-                            id: null,
-                            style: [
-                              {
-                                deviceId: getBaseBreakpoint(runtime.getBreakpoints()).id,
-                                value: {
-                                  fontWeight: 400,
-                                  fontSize: { value: 18, unit: "px" },
-                                  lineHeight: 1.5
-                                }
-                              },
-                              ...runtime.getBreakpoints().some(({ id }) => id === DefaultBreakpointID.Mobile) ? [
-                                {
-                                  deviceId: DefaultBreakpointID.Mobile,
-                                  value: { fontSize: { value: 16, unit: "px" } }
-                                }
-                              ] : []
-                            ]
-                          }
-                        }
+                        deviceId: DefaultBreakpointID.Mobile,
+                        value: { fontSize: { value: 16, unit: "px" } }
                       }
-                    ]
-                  }
-                ]
+                    ] : []
+                  ]
+                }
               }
             ]
           }
-        }
-      })),
+        ]
+      }),
       width: Width({
         format: Width.Format.ClassName,
         preset: [
@@ -2540,111 +2703,8 @@ const FallbackComponent = forwardRef(function FallbackComponent2({
 function isNonNullable(value) {
   return value != null;
 }
-function useSwatch(swatchId) {
-  const client = useMakeswiftClient();
-  const readSwatch = () => swatchId == null ? null : client.readSwatch(swatchId);
-  const swatch = useSyncExternalStore(client.subscribe, readSwatch, readSwatch);
-  useEffect(() => {
-    if (swatchId != null)
-      client.fetchSwatch(swatchId).catch(console.error);
-  }, [client, swatchId]);
-  return swatch;
-}
-function useSwatches(swatchIds) {
-  const client = useMakeswiftClient();
-  const lastSnapshot = useRef();
-  function getSnapshot() {
-    const swatches2 = swatchIds.map((swatchId) => client.readSwatch(swatchId));
-    if (lastSnapshot.current != null && lastSnapshot.current.length === swatches2.length && lastSnapshot.current.every((swatch, idx) => swatches2[idx] === swatch)) {
-      return lastSnapshot.current;
-    }
-    return lastSnapshot.current = swatches2;
-  }
-  const swatches = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
-  useEffect(() => {
-    Promise.all(swatchIds.map((swatchId) => client.fetchSwatch(swatchId))).catch(console.error);
-  }, [client, swatchIds]);
-  return swatches;
-}
-function useFile(fileId) {
-  const client = useMakeswiftClient();
-  const readFile = () => fileId == null ? null : client.readFile(fileId);
-  const file = useSyncExternalStore(client.subscribe, readFile, readFile);
-  useEffect(() => {
-    if (fileId != null)
-      client.fetchFile(fileId);
-  }, [client, fileId]);
-  return file;
-}
-function useFiles(fileIds) {
-  const client = useMakeswiftClient();
-  const lastSnapshot = useRef();
-  function getSnapshot() {
-    const files2 = fileIds.map((fileId) => client.readFile(fileId));
-    if (lastSnapshot.current != null && lastSnapshot.current.length === files2.length && lastSnapshot.current.every((file, idx) => files2[idx] === file)) {
-      return lastSnapshot.current;
-    }
-    return lastSnapshot.current = files2;
-  }
-  const files = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
-  useEffect(() => {
-    Promise.all(fileIds.map((fileId) => client.fetchFile(fileId))).catch(console.error);
-  }, [client, fileIds]);
-  return files;
-}
-function useTypography(typographyId) {
-  const client = useMakeswiftClient();
-  const readTypography = () => typographyId == null ? null : client.readTypography(typographyId);
-  const typography = useSyncExternalStore(client.subscribe, readTypography, readTypography);
-  useEffect(() => {
-    if (typographyId != null)
-      client.fetchTypography(typographyId).catch(console.error);
-  }, [client, typographyId]);
-  return typography;
-}
-function useGlobalElement(globalElementId) {
-  const client = useMakeswiftClient();
-  const readGlobalElement = () => globalElementId == null ? null : client.readGlobalElement(globalElementId);
-  const globalElement = useSyncExternalStore(client.subscribe, readGlobalElement, readGlobalElement);
-  useEffect(() => {
-    if (globalElementId != null)
-      client.fetchGlobalElement(globalElementId).catch(console.error);
-  }, [client, globalElementId]);
-  return globalElement;
-}
-function useLocalizedGlobalElement(globalElementId) {
-  const client = useMakeswiftClient();
-  const readLocalizedGlobalElement = () => globalElementId == null ? null : client.readLocalizedGlobalElement(globalElementId);
-  const localizedGlobalElement = useSyncExternalStore(client.subscribe, readLocalizedGlobalElement, readLocalizedGlobalElement);
-  useEffect(() => {
-    if (globalElementId != null) {
-      client.fetchLocalizedGlobalElement(globalElementId).catch(console.error);
-    }
-  }, [client, globalElementId]);
-  return localizedGlobalElement;
-}
-function usePagePathnameSlice(pageId) {
-  const client = useMakeswiftClient();
-  const readPagePathnameSlice = () => pageId == null ? null : client.readPagePathnameSlice(pageId);
-  const pagePathnameSlice = useSyncExternalStore(client.subscribe, readPagePathnameSlice, readPagePathnameSlice);
-  useEffect(() => {
-    if (pageId != null)
-      client.fetchPagePathnameSlice(pageId).catch(console.error);
-  }, [client, pageId]);
-  return pagePathnameSlice;
-}
-function useTable(tableId) {
-  const client = useMakeswiftClient();
-  const readTable = () => tableId == null ? null : client.readTable(tableId);
-  const table = useSyncExternalStore(client.subscribe, readTable, readTable);
-  useEffect(() => {
-    if (tableId != null)
-      client.fetchTable(tableId).catch(console.error);
-  }, [client, tableId]);
-  return table;
-}
-function mapSideColor(swatches, _e) {
-  var _f = _e, { color } = _f, restOfSide = __objRest(_f, ["color"]);
+function mapSideColor(swatches, _g) {
+  var _h = _g, { color } = _h, restOfSide = __objRest(_h, ["color"]);
   return __spreadProps(__spreadValues({}, restOfSide), {
     color: color && {
       alpha: color.alpha,
@@ -3176,7 +3236,8 @@ function ListControlValue({
 function useNumber(numberControlData, controlDefinition) {
   return numberControlData != null ? numberControlData : controlDefinition.config.defaultValue;
 }
-const Text = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es8.js"))));
+const EditableText$1 = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es7.js"))));
+const ReadOnlyText$1 = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./ReadOnlyText.es.js"))));
 function useRichText(data, control) {
   const textCallbackRef = useCallback((handle) => {
     var _a;
@@ -3185,12 +3246,16 @@ function useRichText(data, control) {
         text: control
       });
   }, [control]);
-  return /* @__PURE__ */ jsx(Text, {
+  const isPreview = useIsPreview();
+  return isPreview ? /* @__PURE__ */ jsx(EditableText$1, {
+    text: data,
+    ref: textCallbackRef
+  }) : /* @__PURE__ */ jsx(ReadOnlyText$1, {
     text: data,
     ref: textCallbackRef
   });
 }
-const EditableText = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es9.js"))));
+const EditableText = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./index.es8.js"))));
 const ReadOnlyText = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./ReadOnlyTextV2.es.js"))));
 const ReadOnlyTextV1 = forwardNextDynamicRef((patch) => dynamic(() => patch(import("./ReadOnlyText.es.js"))));
 function useRichTextV2(data, definition, control) {
@@ -3264,13 +3329,13 @@ function useSlot(data, control) {
     }, element.key))
   });
 }
-function Slot(_g) {
-  var _h = _g, {
+function Slot(_i) {
+  var _j = _i, {
     as,
     control,
     children,
     className
-  } = _h, restOfProps = __objRest(_h, [
+  } = _j, restOfProps = __objRest(_j, [
     "as",
     "control",
     "children",
@@ -3299,15 +3364,15 @@ function Slot(_g) {
 }
 Slot.Placeholder = SlotPlaceholder;
 Slot.Item = SlotItem;
-function SlotItem(_i) {
-  var _j = _i, {
+function SlotItem(_k) {
+  var _l = _k, {
     as,
     control,
     grid,
     index,
     children,
     className
-  } = _j, restOfProps = __objRest(_j, [
+  } = _l, restOfProps = __objRest(_l, [
     "as",
     "control",
     "grid",
@@ -4021,10 +4086,10 @@ registerBuiltinComponents(ReactRuntime);
 const StoreContext = createContext(ReactRuntime.store);
 const PreviewProvider = dynamic(() => import("./PreviewProvider.es.js"));
 const LiveProvider = dynamic(() => import("./LiveProvider.es.js"));
-function RuntimeProvider(_k) {
-  var _l = _k, {
+function RuntimeProvider(_m) {
+  var _n = _m, {
     preview
-  } = _l, props = __objRest(_l, [
+  } = _n, props = __objRest(_n, [
     "preview"
   ]);
   return preview ? /* @__PURE__ */ jsx(PreviewProvider, __spreadValues({}, props)) : /* @__PURE__ */ jsx(LiveProvider, __spreadValues({}, props));
@@ -4227,5 +4292,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { Page as $, Alignments as A, forwardNextDynamicRef as B, Contrasts as C, DocumentReference as D, Element$1 as E, useIsPreview as F, isNonNullable as G, useFiles as H, useSwatches as I, usePagePathnameSlice as J, useElementId as K, shallowEqual as L, deepEqual as M, ElementImperativeHandle as N, StoreContext as O, PageProvider as P, MakeswiftProvider as Q, RuntimeProvider as R, Shapes as S, ControlValue as T, useBuilderEditMode as U, pollBoxModel as V, useEnhancedTypography as W, useTypographyClassName as X, getStaticPaths as Y, getStaticProps as Z, getServerSideProps as _, ReactRuntime as a, Makeswift as a0, PreviewModeScript as a1, Document$1 as a2, MakeswiftApiHandler as a3, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, Page$1 as m, useResponsiveStyle as n, useResponsiveWidth as o, useResponsiveTextStyle as p, colorToString as q, useBreakpoints as r, Sizes as s, useFormContext as t, useIsInBuilder as u, useResponsiveGridItem as v, useTable as w, useMakeswiftClient as x, Provider as y, useFile as z };
+export { forwardNextDynamicRef as $, Alignments as A, isNonNullable as B, Contrasts as C, DocumentReference as D, Element$1 as E, useFiles as F, useSwatches as G, ElementImperativeHandle as H, StoreContext as I, useEnhancedTypography as J, useTypographyClassName as K, Link as L, MakeswiftProvider as M, useBuilderEditMode as N, pollBoxModel as O, PageProvider as P, ControlValue as Q, RuntimeProvider as R, Shapes as S, getStaticPaths as T, getStaticProps as U, getServerSideProps as V, Page as W, Makeswift as X, PreviewModeScript as Y, Document$1 as Z, MakeswiftApiHandler as _, ReactRuntime as a, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useBoxShadow as k, useResponsiveColor as l, Page$1 as m, useResponsiveStyle as n, useResponsiveWidth as o, useResponsiveTextStyle as p, colorToString as q, useBreakpoints as r, Sizes as s, useFormContext as t, useIsInBuilder as u, useResponsiveGridItem as v, useTable as w, useMakeswiftClient as x, Provider as y, useFile as z };
 //# sourceMappingURL=index.es.js.map