@makeswift/runtime 0.8.7 → 0.8.9

package/dist/index.cjs.js

@@ -46,10 +46,10 @@ var serialize = require("@emotion/serialize");
 var utils = require("@emotion/utils");
 var jsxRuntime = require("react/jsx-runtime");
 var descriptors = require("./descriptors.cjs.js");
-require("slate");
+var slate = require("slate");
 var textInput = require("./text-input.cjs.js");
 var combobox = require("./combobox.cjs.js");
-require("slate-react");
+var slateReact = require("slate-react");
 var shim = require("use-sync-external-store/shim");
 var redux = require("redux");
 var thunk = require("redux-thunk");
@@ -59,6 +59,8 @@ var state_breakpoints = require("./state/breakpoints.cjs.js");
 var boxModels = require("./box-models.cjs.js");
 var ColorHelper = require("color");
 var scrollIntoView = require("scroll-into-view-if-needed");
+var isHotkey = require("is-hotkey");
+var slateHistory = require("slate-history");
 var reactDom = require("react-dom");
 var parse = require("html-react-parser");
 var Head = require("next/head");
@@ -99,6 +101,7 @@ var dynamic__default = /* @__PURE__ */ _interopDefaultLegacy(dynamic);
 var thunk__default = /* @__PURE__ */ _interopDefaultLegacy(thunk);
 var ColorHelper__default = /* @__PURE__ */ _interopDefaultLegacy(ColorHelper);
 var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
+var isHotkey__default = /* @__PURE__ */ _interopDefaultLegacy(isHotkey);
 var parse__default = /* @__PURE__ */ _interopDefaultLegacy(parse);
 var Head__default = /* @__PURE__ */ _interopDefaultLegacy(Head);
 var createEmotionServer__default = /* @__PURE__ */ _interopDefaultLegacy(createEmotionServer);
@@ -1161,7 +1164,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.7";
+const version = "0.8.9";
 async function handler(req, res, { apiKey }) {
   if (req.query.secret !== apiKey) {
     return res.status(401).json({ message: "Unauthorized" });
@@ -3153,24 +3156,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__ */ jsxRuntime.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
@@ -3190,6 +3175,116 @@ function pollBoxModel({
     onBoxModelChange(null);
   };
 }
+const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
+const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
+const defaultText = [{
+  type: descriptors.BlockType.Text,
+  children: [{
+    text: ""
+  }]
+}];
+function useRichTextV2(data, control) {
+  const [editor] = React.useState(() => slateHistory.withHistory(slateReact.withReact(slate.createEditor())));
+  const isPreservingFocus = React.useRef(false);
+  const editMode = useBuilderEditMode();
+  React.useEffect(() => {
+    if (control == null)
+      return;
+    const element = slateReact.ReactEditor.toDOMNode(editor, editor);
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => control.changeBoxModel(boxModel)
+    });
+  }, [editor, control]);
+  const renderElement = React.useCallback(({
+    attributes,
+    children,
+    element
+  }) => {
+    switch (element.type) {
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx("p", __spreadProps(__spreadValues({}, attributes), {
+          children
+        }));
+    }
+  }, []);
+  const renderLeaf = React.useCallback(({
+    attributes,
+    children
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", __spreadProps(__spreadValues({}, attributes), {
+      children
+    }));
+  }, []);
+  const initialValue = React.useMemo(() => data != null ? data : defaultText, [data]);
+  React.useEffect(() => {
+    if (editMode !== descriptors.BuilderEditMode.CONTENT) {
+      isPreservingFocus.current = false;
+      slateReact.ReactEditor.deselect(editor);
+    }
+  }, [editMode]);
+  React.useEffect(() => {
+    control == null ? void 0 : control.setEditor(editor);
+    control == null ? void 0 : control.setDefaultValue(defaultText);
+  }, [control, editor, defaultText]);
+  const handleFocus = React.useCallback(() => {
+    isPreservingFocus.current = true;
+    control == null ? void 0 : control.select();
+  }, [control]);
+  const handleKeyDown = React.useCallback((e) => {
+    if (isHotkey__default["default"]("mod+shift+z", e))
+      return slateHistory.HistoryEditor.redo(editor);
+    if (isHotkey__default["default"]("mod+z", e))
+      return slateHistory.HistoryEditor.undo(editor);
+    if (isHotkey__default["default"]("escape")(e)) {
+      isPreservingFocus.current = false;
+      slateReact.ReactEditor.blur(editor);
+      control == null ? void 0 : control.switchToBuildMode();
+    }
+  }, [control, editor]);
+  const handleBlur = React.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 = React.useCallback((value) => {
+    control == null ? void 0 : control.onChange(value);
+  }, [control]);
+  return /* @__PURE__ */ jsxRuntime.jsx(slateReact.Slate, {
+    editor,
+    onChange: handleOnChange,
+    value: initialValue,
+    children: /* @__PURE__ */ jsxRuntime.jsx(slateReact.Editable, {
+      renderLeaf,
+      renderElement,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      readOnly: editMode !== descriptors.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Slot.Placeholder, {
@@ -3426,6 +3521,12 @@ function ControlValue({
         parameters: [data, control],
         children: (value) => children(value)
       }, definition.type);
+    case descriptors.RichTextV2ControlType:
+      return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+        hook: useRichTextV2,
+        parameters: [data, control],
+        children: (value) => children(value)
+      }, definition.type);
     case descriptors.StyleControlType:
       return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
         hook: useFormattedStyle,
@@ -3471,7 +3572,7 @@ function PropsValue({
     return constants.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 textInput.CheckboxControlType:
       case textInput.NumberControlType:
@@ -3512,8 +3613,18 @@ function PropsValue({
           }))
         }, descriptor.type);
       }
-      case descriptors.SlotControlType: {
+      case descriptors.RichTextV2ControlType: {
         const control = (_c2 = propControllers == null ? void 0 : propControllers[propName]) != null ? _c2 : null;
+        return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
+          hook: useRichTextV2,
+          parameters: [props[propName], control],
+          children: (value) => renderFn(__spreadProps(__spreadValues({}, propsValue), {
+            [propName]: value
+          }))
+        }, descriptor.type);
+      }
+      case descriptors.SlotControlType: {
+        const control = (_d = propControllers == null ? void 0 : propControllers[propName]) != null ? _d : null;
         return /* @__PURE__ */ jsxRuntime.jsx(RenderHook, {
           hook: useSlot,
           parameters: [props[propName], control],
@@ -3697,11 +3808,11 @@ function isDomNodeHandle(value) {
 }
 class ReactRuntime {
   constructor({
-    unstable_breakpoints
+    breakpoints
   }) {
     __publicField(this, "store");
     this.store = constants.configureStore({
-      breakpoints: unstable_breakpoints ? state_breakpoints.parseBreakpointsInput(unstable_breakpoints) : void 0
+      breakpoints: breakpoints ? state_breakpoints.parseBreakpointsInput(breakpoints) : void 0
     });
     registerBuiltinComponents(this);
   }
@@ -4010,6 +4121,7 @@ exports.useFiles = useFiles;
 exports.useFormContext = useFormContext;
 exports.useIsInBuilder = useIsInBuilder;
 exports.useIsPreview = useIsPreview;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useMakeswiftClient = useMakeswiftClient;
 exports.usePageId = usePageId;
 exports.usePagePathnameSlice = usePagePathnameSlice;