@makeswift/runtime 0.8.8 → 0.8.9

package/dist/index.es.js

@@ -36,7 +36,7 @@ var __publicField = (obj, key, value) => {
 };
 var _c;
 import * as React from "react";
-import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useId, useCallback, useImperativeHandle, Component, Suspense } from "react";
+import { useEffect, createContext, useContext, useState, useMemo, useRef, Children, createElement, forwardRef, memo, useId, useCallback, useLayoutEffect, 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, i as isElementReference, M as MakeswiftComponentType, b as isPropControllersHandle, d as getComponentPropControllerDescriptors, e as getPropControllers, f as configureStore$1, h as copyElementTree, j as getBreakpoints, k as getDocument, l as getElementId, m as getIsPreview, n as getIsInBuilder, o as getReactComponent, p as getBuilderEditMode } from "./constants.es.js";
@@ -45,11 +45,11 @@ import { cache, cx } from "@emotion/css";
 import { serializeStyles } from "@emotion/serialize";
 import { registerStyles, insertStyles } from "@emotion/utils";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { S as ShapeControlType, L as ListControlType, T as Types, E as ElementID, B as Backgrounds, W as Width, f as ResponsiveIconRadioGroup, M as Margin, P as Padding, g as Border, h as BorderRadius, i as Shadows, G as GapY, j as GapX, k as ResponsiveSelect, l as ResponsiveNumber, m as Checkbox, n as Grid, o as TextInput, p as Link, q as ResponsiveColor, s as TextStyle, t as Images, N as Number$1, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, Q as StyleControlType, U as RichTextControlType, b as SlotControlType, X as LinkControlType, I as ImageControlType, C as ColorControlType, Y as BorderPropControllerFormat, Z as ShadowsPropControllerFormat, _ as BorderRadiusPropControllerFormat, $ as MarginPropControllerFormat, a0 as PaddingPropControllerFormat, a1 as WidthPropControllerFormat } from "./descriptors.es.js";
-import "slate";
+import { S as ShapeControlType, L as ListControlType, T as Types, E as ElementID, B as Backgrounds, W as Width, f as ResponsiveIconRadioGroup, M as Margin, P as Padding, g as Border, h as BorderRadius, i as Shadows, G as GapY, j as GapX, k as ResponsiveSelect, l as ResponsiveNumber, m as Checkbox, n as Grid, o as TextInput, p as Link, q as ResponsiveColor, s as TextStyle, t as Images, N as Number$1, D as Date$1, F as Font, u as ResponsiveLength, v as TextArea, w as Table, x as TableFormFields, y as Image, z as ResponsiveOpacity, A as NavigationLinks, H as SocialLinks, J as RichText, V as Video, K as StyleControlProperty, O as ImageControlValueFormat, Q as BlockType, U as BuilderEditMode, X as StyleControlType, Y as RichTextV2ControlType, Z as RichTextControlType, b as SlotControlType, _ as LinkControlType, I as ImageControlType, C as ColorControlType, $ as BorderPropControllerFormat, a0 as ShadowsPropControllerFormat, a1 as BorderRadiusPropControllerFormat, a2 as MarginPropControllerFormat, a3 as PaddingPropControllerFormat, a4 as WidthPropControllerFormat } from "./descriptors.es.js";
+import { createEditor } from "slate";
 import { S as SelectControlType, 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-react";
+import { withReact, ReactEditor, Slate, Editable } from "slate-react";
 import { useSyncExternalStore } from "use-sync-external-store/shim";
 import { createStore, applyMiddleware } from "redux";
 import thunk from "redux-thunk";
@@ -59,6 +59,8 @@ import { getBaseBreakpoint, findBreakpointOverride, DefaultBreakpointID, join, g
 import { g as getBox, i as isMeasurable, m as measure } from "./box-models.es.js";
 import ColorHelper from "color";
 import scrollIntoView from "scroll-into-view-if-needed";
+import isHotkey from "is-hotkey";
+import { withHistory, HistoryEditor } from "slate-history";
 import { findDOMNode } from "react-dom";
 import parse from "html-react-parser";
 import Head from "next/head";
@@ -1127,7 +1129,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.8.8";
+const version = "0.8.9";
 async function handler(req, res, { apiKey }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -3091,24 +3093,6 @@ function useRichText(data, control) {
     ref: textCallbackRef
   });
 }
-function useSelectControlValue(data, definition) {
-  return data != null ? data : definition == null ? void 0 : definition.config.defaultValue;
-}
-function ShapeControlValue({
-  definition,
-  data,
-  children,
-  control
-}) {
-  return Object.entries(definition.config.type).reduceRight((renderFn, [key, controlDefinition]) => (shapeControlValue) => /* @__PURE__ */ jsx(ControlValue, {
-    definition: controlDefinition,
-    data: data == null ? void 0 : data[key],
-    control: control == null ? void 0 : control.controls.get(key),
-    children: (value) => renderFn(__spreadProps(__spreadValues({}, shapeControlValue), {
-      [key]: value
-    }))
-  }), children)({});
-}
 function pollBoxModel({
   element,
   onBoxModelChange
@@ -3128,6 +3112,116 @@ function pollBoxModel({
     onBoxModelChange(null);
   };
 }
+const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
+const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
+const defaultText = [{
+  type: BlockType.Text,
+  children: [{
+    text: ""
+  }]
+}];
+function useRichTextV2(data, control) {
+  const [editor] = useState(() => withHistory(withReact(createEditor())));
+  const isPreservingFocus = useRef(false);
+  const editMode = useBuilderEditMode();
+  useEffect(() => {
+    if (control == null)
+      return;
+    const element = ReactEditor.toDOMNode(editor, editor);
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeBoxModel(boxModel)
+    });
+  }, [editor, control]);
+  const renderElement = useCallback(({
+    attributes,
+    children,
+    element
+  }) => {
+    switch (element.type) {
+      default:
+        return /* @__PURE__ */ jsx("p", __spreadProps(__spreadValues({}, attributes), {
+          children
+        }));
+    }
+  }, []);
+  const renderLeaf = useCallback(({
+    attributes,
+    children
+  }) => {
+    return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, attributes), {
+      children
+    }));
+  }, []);
+  const initialValue = useMemo(() => data != null ? data : defaultText, [data]);
+  useEffect(() => {
+    if (editMode !== BuilderEditMode.CONTENT) {
+      isPreservingFocus.current = false;
+      ReactEditor.deselect(editor);
+    }
+  }, [editMode]);
+  useEffect(() => {
+    control == null ? void 0 : control.setEditor(editor);
+    control == null ? void 0 : control.setDefaultValue(defaultText);
+  }, [control, editor, defaultText]);
+  const handleFocus = useCallback(() => {
+    isPreservingFocus.current = true;
+    control == null ? void 0 : control.select();
+  }, [control]);
+  const handleKeyDown = useCallback((e) => {
+    if (isHotkey("mod+shift+z", e))
+      return HistoryEditor.redo(editor);
+    if (isHotkey("mod+z", e))
+      return HistoryEditor.undo(editor);
+    if (isHotkey("escape")(e)) {
+      isPreservingFocus.current = false;
+      ReactEditor.blur(editor);
+      control == null ? void 0 : control.switchToBuildMode();
+    }
+  }, [control, editor]);
+  const handleBlur = useCallback((e) => {
+    var _a;
+    if (e.relatedTarget == null)
+      return;
+    if (((_a = e.relatedTarget) == null ? void 0 : _a.getAttribute("contenteditable")) === "true")
+      isPreservingFocus.current = false;
+  }, []);
+  const handleOnChange = useCallback((value) => {
+    control == null ? void 0 : control.onChange(value);
+  }, [control]);
+  return /* @__PURE__ */ jsx(Slate, {
+    editor,
+    onChange: handleOnChange,
+    value: initialValue,
+    children: /* @__PURE__ */ jsx(Editable, {
+      renderLeaf,
+      renderElement,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      readOnly: editMode !== BuilderEditMode.CONTENT,
+      placeholder: "Write some text..."
+    })
+  });
+}
+function useSelectControlValue(data, definition) {
+  return data != null ? data : definition == null ? void 0 : definition.config.defaultValue;
+}
+function ShapeControlValue({
+  definition,
+  data,
+  children,
+  control
+}) {
+  return Object.entries(definition.config.type).reduceRight((renderFn, [key, controlDefinition]) => (shapeControlValue) => /* @__PURE__ */ jsx(ControlValue, {
+    definition: controlDefinition,
+    data: data == null ? void 0 : data[key],
+    control: control == null ? void 0 : control.controls.get(key),
+    children: (value) => renderFn(__spreadProps(__spreadValues({}, shapeControlValue), {
+      [key]: value
+    }))
+  }), children)({});
+}
 function useSlot(data, control) {
   if (data == null || data.elements.length === 0) {
     return /* @__PURE__ */ jsx(Slot.Placeholder, {
@@ -3364,6 +3458,12 @@ function ControlValue({
         parameters: [data, control],
         children: (value) => children(value)
       }, definition.type);
+    case RichTextV2ControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useRichTextV2,
+        parameters: [data, control],
+        children: (value) => children(value)
+      }, definition.type);
     case StyleControlType:
       return /* @__PURE__ */ jsx(RenderHook, {
         hook: useFormattedStyle,
@@ -3409,7 +3509,7 @@ function PropsValue({
     return getPropControllers(state, documentKey, element.key);
   });
   return Object.entries(propControllerDescriptorsRef.current).reduceRight((renderFn, [propName, descriptor]) => (propsValue) => {
-    var _a2, _b, _c2;
+    var _a2, _b, _c2, _d;
     switch (descriptor.type) {
       case CheckboxControlType:
       case NumberControlType:
@@ -3450,8 +3550,18 @@ function PropsValue({
           }))
         }, descriptor.type);
       }
-      case SlotControlType: {
+      case RichTextV2ControlType: {
         const control = (_c2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _c2 : null;
+        return /* @__PURE__ */ jsx(RenderHook, {
+          hook: useRichTextV2,
+          parameters: [props[propName], control],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      }
+      case SlotControlType: {
+        const control = (_d = propControllers == null ? void 0 : propControllers[propName]) != null ? _d : null;
         return /* @__PURE__ */ jsx(RenderHook, {
           hook: useSlot,
           parameters: [props[propName], control],
@@ -3901,5 +4011,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { Document$1 as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element$1 as E, forwardNextDynamicRef as F, useIsPreview as G, useFiles as H, useSwatches as I, usePagePathnameSlice as J, useElementId as K, deepEqual as L, ElementImperativeHandle as M, StoreContext as N, MakeswiftProvider as O, PageProvider as P, useBuilderEditMode as Q, RuntimeProvider as R, Shapes as S, pollBoxModel as T, useTypography as U, getStaticPaths as V, getStaticProps as W, getServerSideProps as X, Page as Y, Makeswift as Z, PreviewModeScript as _, ReactRuntime as a, MakeswiftApiHandler as a0, 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, useStyle as n, useResponsiveStyle as o, useResponsiveWidth as p, useResponsiveTextStyle as q, colorToString as r, useBreakpoints as s, Sizes as t, useIsInBuilder as u, useFormContext as v, useResponsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
+export { PreviewModeScript as $, Provider as A, Alignments as B, Contrasts as C, DocumentReference as D, Element$1 as E, useFile as F, forwardNextDynamicRef as G, useIsPreview as H, useFiles as I, useSwatches as J, usePagePathnameSlice as K, useElementId as L, deepEqual as M, ElementImperativeHandle as N, StoreContext as O, PageProvider as P, MakeswiftProvider as Q, RuntimeProvider as R, Shapes as S, useBuilderEditMode as T, pollBoxModel as U, useTypography as V, getStaticPaths as W, getStaticProps as X, getServerSideProps as Y, Page as Z, Makeswift as _, ReactRuntime as a, Document$1 as a0, MakeswiftApiHandler as a1, 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, useStyle as n, useResponsiveStyle as o, useResponsiveWidth as p, useResponsiveTextStyle as q, colorToString as r, useBreakpoints as s, useIsomorphicLayoutEffect as t, useIsInBuilder as u, Sizes as v, useFormContext as w, useResponsiveGridItem as x, useTable as y, useMakeswiftClient as z };
 //# sourceMappingURL=index.es.js.map