@makeswift/runtime 0.7.13 → 0.7.15

package/dist/index.es.js

@@ -968,7 +968,7 @@ function useCachedSite(siteId) {
   const site = useSyncExternalStore(client.subscribe, getSnapshot, getSnapshot);
   return site;
 }
-const version = "0.7.13";
+const version = "0.7.15";
 class Makeswift {
   constructor(apiKey, { apiOrigin = "https://api.makeswift.com" } = {}) {
     __publicField(this, "apiKey");
@@ -4150,5 +4150,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { getServerSideProps as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element$1 as E, DEVICES as F, findDeviceOverride as G, forwardNextDynamicRef as H, useIsPreview as I, useFiles as J, useSwatches as K, usePagePathnameSlice as L, useElementId as M, deepEqual as N, ElementImperativeHandle as O, PageProvider as P, storeContextDefaultValue as Q, RuntimeProvider as R, Shapes as S, StoreContext as T, MakeswiftProvider as U, useBuilderEditMode as V, useTypography as W, shallowMergeFallbacks as X, MakeswiftClient as Y, getStaticPaths as Z, getStaticProps as _, ReactRuntime as a, Page as a0, Makeswift as a1, PreviewModeScript as a2, Document$1 as a3, MakeswiftApiHandler as a4, 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, useMediaQuery as m, Page$1 as n, useStyle as o, responsiveWidth as p, responsiveTextStyle as q, responsiveStyle as r, colorToString as s, Sizes as t, useIsInBuilder as u, useFormContext as v, responsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
+export { getStaticProps as $, Alignments as A, useFile as B, Contrasts as C, DocumentReference as D, Element$1 as E, DEVICES as F, findDeviceOverride as G, forwardNextDynamicRef as H, useIsPreview as I, useFiles as J, useSwatches as K, usePagePathnameSlice as L, useElementId as M, deepEqual as N, ElementImperativeHandle as O, PageProvider as P, storeContextDefaultValue as Q, RuntimeProvider as R, Shapes as S, StoreContext as T, MakeswiftProvider as U, useBuilderEditMode as V, pollBoxModel as W, useTypography as X, shallowMergeFallbacks as Y, MakeswiftClient as Z, getStaticPaths as _, ReactRuntime as a, getServerSideProps as a0, Page as a1, Makeswift as a2, PreviewModeScript as a3, Document$1 as a4, MakeswiftApiHandler as a5, 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, useMediaQuery as m, Page$1 as n, useStyle as o, responsiveWidth as p, responsiveTextStyle as q, responsiveStyle as r, colorToString as s, Sizes as t, useIsInBuilder as u, useFormContext as v, responsiveGridItem as w, useTable as x, useMakeswiftClient as y, Provider as z };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es6.js

@@ -30,20 +30,19 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { useCallback, useState, useEffect, forwardRef, useImperativeHandle, useMemo } from "react";
-import { Element as Element$1, Text, Editor, Transforms, Path, Range, Point, Node, createEditor } from "slate";
+import { Element as Element$1, Editor, Path, Range, Point, Node, Transforms, Text, createEditor } from "slate";
 import { withReact, ReactEditor, Slate, Editable } from "slate-react";
 import { cx } from "@emotion/css";
 import { g as getBox } from "./box-models.es.js";
-import { au as TextType, av as BlockType, aw as InlineType, ar as richTextDTOtoDAO, aq as richTextDTOtoSelection, ax as BuilderEditMode } from "./rich-text.es.js";
-import { T as TypographyLeaf } from "./typography.es.js";
+import { au as BlockType, av as InlineType, ar as richTextDTOtoDAO, aq as richTextDTOtoSelection, ax as BuilderEditMode } from "./rich-text.es.js";
+import { L as Leaf } from "./leaf.es.js";
+import { o as useStyle, r as responsiveStyle, N as deepEqual, V as useBuilderEditMode, W as pollBoxModel } from "./index.es.js";
 import { jsx } from "react/jsx-runtime";
+import { L as Link } from "./index.es3.js";
+import isHotkey from "is-hotkey";
 import "use-sync-external-store/shim";
-import { o as useStyle, r as responsiveStyle, V as useBuilderEditMode } from "./index.es.js";
 import "@emotion/serialize";
 import "@emotion/utils";
-import { L as Link } from "./index.es3.js";
-import { c as compareRichTextDAO, a as compareRichTextSelection } from "./compare.es.js";
-import isHotkey from "is-hotkey";
 import "css-box-model";
 import "./actions.es.js";
 import "./introspection.es.js";
@@ -69,23 +68,6 @@ import "set-cookie-parser";
 import "uuid";
 import "corporate-ipsum";
 import "next/link";
-function Leaf(_a) {
-  var _b = _a, {
-    leaf
-  } = _b, props = __objRest(_b, [
-    "leaf"
-  ]);
-  switch (leaf.type) {
-    case TextType.Typography:
-      return /* @__PURE__ */ jsx(TypographyLeaf, __spreadValues({
-        leaf
-      }, props));
-    default:
-      return /* @__PURE__ */ jsx("span", __spreadProps(__spreadValues({}, props.attributes), {
-        children: props.children
-      }));
-  }
-}
 function BlockElement({
   element,
   attributes,
@@ -170,10 +152,10 @@ function BlockElement({
       }));
   }
 }
-function StyledLink(_c) {
-  var _d = _c, {
+function StyledLink(_a) {
+  var _b = _a, {
     className
-  } = _d, restOfProps = __objRest(_d, [
+  } = _b, restOfProps = __objRest(_b, [
     "className"
   ]);
   return /* @__PURE__ */ jsx(Link, __spreadProps(__spreadValues({}, restOfProps), {
@@ -207,10 +189,10 @@ function InlineElement({
       }));
   }
 }
-function Element(_e) {
-  var _f = _e, {
+function Element(_c) {
+  var _d = _c, {
     element
-  } = _f, props = __objRest(_f, [
+  } = _d, props = __objRest(_d, [
     "element"
   ]);
   switch (element.type) {
@@ -246,7 +228,7 @@ function useSyncWithBuilder(editor, text) {
     if (shouldCommit && text) {
       const nextValue = richTextDTOtoDAO(text);
       const nextSelection = richTextDTOtoSelection(text);
-      if (!compareRichTextDAO(editor.children, nextValue) || !compareRichTextSelection(editor.selection, nextSelection)) {
+      if (!deepEqual(editor.children, nextValue) || !deepEqual(editor.selection, nextSelection)) {
         editor.children = nextValue;
         editor.selection = nextSelection;
         editor.onChange();
@@ -265,15 +247,17 @@ function useSyncWithBuilder(editor, text) {
   }, [shouldCommit]);
   return useCallback(() => setShouldCommit(false), []);
 }
+const LIST_ITEM_CHILD_POSITION = 0;
+const LIST_ITEM_LIST_POSITION = 1;
 const ElementUtils = {
-  isConvertibleToListTextNode(node) {
-    return !this.isList(node) && !this.isListItem(node) && !this.isListItemChild(node) && !this.isText(node) && !this.isTypography(node);
+  isBlock(node) {
+    return Element$1.isElement(node) && (Element$1.isElementType(node, BlockType.Paragraph) || Element$1.isElementType(node, BlockType.Heading1) || Element$1.isElementType(node, BlockType.Heading2) || Element$1.isElementType(node, BlockType.Heading3) || Element$1.isElementType(node, BlockType.Heading3) || Element$1.isElementType(node, BlockType.Heading4) || Element$1.isElementType(node, BlockType.Heading5) || Element$1.isElementType(node, BlockType.Heading6) || Element$1.isElementType(node, BlockType.BlockQuote) || Element$1.isElementType(node, BlockType.UnorderedList) || Element$1.isElementType(node, BlockType.OrderedList) || Element$1.isElementType(node, BlockType.ListItem) || Element$1.isElementType(node, BlockType.ListItemChild));
   },
-  isText(node) {
-    return Element$1.isElementType(node, TextType.Text) || Text.isText(node);
+  isInline(node) {
+    return Element$1.isElement(node) && (Element$1.isElementType(node, InlineType.Link) || Element$1.isElementType(node, InlineType.Link) || Element$1.isElementType(node, InlineType.SubScript) || Element$1.isElementType(node, InlineType.SuperScript));
   },
-  isTypography(node) {
-    return Element$1.isElementType(node, TextType.Typography);
+  isConvertibleToListTextNode(node) {
+    return !this.isList(node) && !this.isListItem(node) && !this.isListItemChild(node);
   },
   isParagraph(node) {
     return Element$1.isElementType(node, BlockType.Paragraph);
@@ -288,7 +272,7 @@ const ElementUtils = {
     return Element$1.isElementType(node, BlockType.ListItemChild);
   },
   createText() {
-    return { text: "", type: TextType.Text };
+    return { text: "" };
   },
   createParagraph() {
     return {
@@ -312,36 +296,6 @@ const ElementUtils = {
     };
   }
 };
-function wrapList(editor, options = { type: BlockType.UnorderedList }) {
-  if (!editor.selection)
-    return;
-  const nonListEntries = Array.from(Editor.nodes(editor, {
-    at: editor.selection,
-    match: (node) => {
-      return Element$1.isElement(node) && ElementUtils.isConvertibleToListTextNode(node);
-    }
-  }));
-  const refs = nonListEntries.map(([_, path]) => Editor.pathRef(editor, path));
-  refs.forEach((ref) => {
-    const path = ref.current;
-    if (path) {
-      Editor.withoutNormalizing(editor, () => {
-        Transforms.setNodes(editor, { type: BlockType.ListItemChild }, {
-          at: path
-        });
-        Transforms.wrapNodes(editor, ElementUtils.createListItem(), {
-          at: path
-        });
-        Transforms.wrapNodes(editor, ElementUtils.createList(options.type), {
-          at: path
-        });
-      });
-    }
-    ref.unref();
-  });
-}
-const LIST_ITEM_CHILD_POSITION = 0;
-const LIST_ITEM_LIST_POSITION = 1;
 const EditorUtils = {
   getFirstAncestorList(editor, path) {
     const parentList = Editor.above(editor, {
@@ -384,58 +338,6 @@ function getSelectedListItems(editor) {
   const firstAncestorPath = (_b = (_a = EditorUtils.getFirstAncestorListItem(editor, start)) == null ? void 0 : _a[1]) != null ? _b : [];
   return Array.from(listItems).filter((node) => Path.isDescendant(start, node[1]) ? Path.equals(node[1], firstAncestorPath) : !Path.isAfter(start, node[1]));
 }
-function unwrapPath(editor, listItemPath) {
-  const parentList = EditorUtils.getFirstAncestorList(editor, listItemPath);
-  const listItemContainingParentList = EditorUtils.getFirstAncestorListItem(editor, listItemPath);
-  if (!parentList || listItemContainingParentList)
-    return;
-  Editor.withoutNormalizing(editor, () => {
-    const listItemTextPath = [...listItemPath, LIST_ITEM_CHILD_POSITION];
-    const listItemNestedListPath = [...listItemPath, LIST_ITEM_LIST_POSITION];
-    if (Node.has(editor, listItemNestedListPath)) {
-      Transforms.setNodes(editor, { type: parentList[0].type }, { at: listItemNestedListPath });
-      Transforms.liftNodes(editor, { at: listItemNestedListPath });
-      Transforms.liftNodes(editor, { at: Path.next(listItemPath) });
-    }
-    if (Node.has(editor, listItemTextPath)) {
-      Transforms.setNodes(editor, { type: BlockType.Paragraph }, {
-        at: listItemTextPath
-      });
-      Transforms.liftNodes(editor, { at: listItemTextPath });
-      Transforms.liftNodes(editor, { at: listItemPath });
-    }
-  });
-}
-function unwrapList(editor) {
-  if (!editor.selection)
-    return;
-  const listItems = getSelectedListItems(editor);
-  const subRoots = filterForSubtreeRoots(listItems);
-  const refs = subRoots.map(([_, path]) => Editor.pathRef(editor, path));
-  refs.forEach((ref) => {
-    if (ref.current) {
-      unwrapPath(editor, ref.current);
-    }
-    ref.unref();
-  });
-}
-function toggleList(editor, options = { type: BlockType.UnorderedList }) {
-  if (!editor.selection)
-    return;
-  const start = LocationUtils.getStartPath(editor.selection);
-  const ancestorPath = Path.ancestors(start).at(1);
-  if (!ancestorPath || !Node.has(editor, ancestorPath))
-    return;
-  const ancestor = Node.get(editor, ancestorPath);
-  if (!ElementUtils.isList(ancestor)) {
-    return wrapList(editor, { type: options.type });
-  }
-  if (ancestor.type === options.type) {
-    unwrapList(editor);
-  } else {
-    Transforms.setNodes(editor, { type: options.type }, { at: ancestorPath });
-  }
-}
 function indentPath(editor, path) {
   const parent = Node.parent(editor, path);
   if (!path || !Path.hasPrevious(path) || !ElementUtils.isList(parent))
@@ -509,6 +411,86 @@ function dedent(editor) {
     ref.unref();
   });
 }
+function unwrapPath(editor, listItemPath) {
+  const parentList = EditorUtils.getFirstAncestorList(editor, listItemPath);
+  const listItemContainingParentList = EditorUtils.getFirstAncestorListItem(editor, listItemPath);
+  if (!parentList || listItemContainingParentList)
+    return;
+  Editor.withoutNormalizing(editor, () => {
+    const listItemTextPath = [...listItemPath, LIST_ITEM_CHILD_POSITION];
+    const listItemNestedListPath = [...listItemPath, LIST_ITEM_LIST_POSITION];
+    if (Node.has(editor, listItemNestedListPath)) {
+      Transforms.setNodes(editor, { type: parentList[0].type }, { at: listItemNestedListPath });
+      Transforms.liftNodes(editor, { at: listItemNestedListPath });
+      Transforms.liftNodes(editor, { at: Path.next(listItemPath) });
+    }
+    if (Node.has(editor, listItemTextPath)) {
+      Transforms.setNodes(editor, { type: BlockType.Paragraph }, {
+        at: listItemTextPath
+      });
+      Transforms.liftNodes(editor, { at: listItemTextPath });
+      Transforms.liftNodes(editor, { at: listItemPath });
+    }
+  });
+}
+function unwrapList(editor) {
+  if (!editor.selection)
+    return;
+  const listItems = getSelectedListItems(editor);
+  const subRoots = filterForSubtreeRoots(listItems);
+  const refs = subRoots.map(([_, path]) => Editor.pathRef(editor, path));
+  refs.forEach((ref) => {
+    if (ref.current) {
+      unwrapPath(editor, ref.current);
+    }
+    ref.unref();
+  });
+}
+function wrapList(editor, options = { type: BlockType.UnorderedList }) {
+  if (!editor.selection)
+    return;
+  const nonListEntries = Array.from(Editor.nodes(editor, {
+    at: editor.selection,
+    match: (node) => {
+      return Element$1.isElement(node) && ElementUtils.isConvertibleToListTextNode(node);
+    }
+  }));
+  const refs = nonListEntries.map(([_, path]) => Editor.pathRef(editor, path));
+  refs.forEach((ref) => {
+    const path = ref.current;
+    if (path) {
+      Editor.withoutNormalizing(editor, () => {
+        Transforms.setNodes(editor, { type: BlockType.ListItemChild }, {
+          at: path
+        });
+        Transforms.wrapNodes(editor, ElementUtils.createListItem(), {
+          at: path
+        });
+        Transforms.wrapNodes(editor, ElementUtils.createList(options.type), {
+          at: path
+        });
+      });
+    }
+    ref.unref();
+  });
+}
+function toggleList(editor, options = { type: BlockType.UnorderedList }) {
+  if (!editor.selection)
+    return;
+  const start = LocationUtils.getStartPath(editor.selection);
+  const ancestorPath = Path.ancestors(start).at(1);
+  if (!ancestorPath || !Node.has(editor, ancestorPath))
+    return;
+  const ancestor = Node.get(editor, ancestorPath);
+  if (!ElementUtils.isList(ancestor)) {
+    return wrapList(editor, { type: options.type });
+  }
+  if (ancestor.type === options.type) {
+    unwrapList(editor);
+  } else {
+    Transforms.setNodes(editor, { type: options.type }, { at: ancestorPath });
+  }
+}
 const List = {
   unwrapList,
   wrapList,
@@ -575,6 +557,7 @@ function onKeyDown(e, editor) {
   }
 }
 function withList(editor) {
+  const { normalizeNode } = editor;
   editor.normalizeNode = (entry) => {
     const [normalizationNode, normalizationPath] = entry;
     if (ElementUtils.isListItem(normalizationNode)) {
@@ -594,18 +577,10 @@ function withList(editor) {
         return;
       }
     }
-    if (ElementUtils.isList(normalizationNode)) {
-      Array.from(Node.children(editor, normalizationPath)).forEach(([node, path]) => {
-        if (ElementUtils.isText(node)) {
-          Transforms.removeNodes(editor, { at: path });
-          return;
-        }
-      });
-    }
-    if (!ElementUtils.isText(normalizationNode) && !ElementUtils.isTypography(normalizationNode)) {
+    if (!Text.isText(normalizationNode)) {
       const mergeableChildren = Array.from(Node.children(editor, normalizationPath)).map((child, index, children) => {
         const potentialNodeToBeMerged = children.at(index + 1);
-        if (!potentialNodeToBeMerged || !ElementUtils.isList(potentialNodeToBeMerged[0]) || potentialNodeToBeMerged[0].type !== child[0].type) {
+        if (!potentialNodeToBeMerged || !ElementUtils.isList(potentialNodeToBeMerged[0]) || !ElementUtils.isList(child[0]) || potentialNodeToBeMerged[0].type !== child[0].type) {
           return null;
         }
         return [
@@ -636,13 +611,39 @@ function withList(editor) {
         return;
       }
     }
+    normalizeNode(entry);
+  };
+  return editor;
+}
+function withTypography(editor) {
+  const { normalizeNode } = editor;
+  editor.normalizeNode = (entry) => {
+    var _a, _b;
+    const [normalizationNode, normalizationPath] = entry;
+    if (Text.isText(normalizationNode) && ((_a = normalizationNode == null ? void 0 : normalizationNode.typography) == null ? void 0 : _a.id) == null && ((_b = normalizationNode == null ? void 0 : normalizationNode.typography) == null ? void 0 : _b.style.length) === 0) {
+      Transforms.unsetNodes(editor, "typography", { at: normalizationPath });
+      return;
+    }
+    normalizeNode(entry);
+  };
+  return editor;
+}
+function withBlock(editor) {
+  const { normalizeNode } = editor;
+  editor.normalizeNode = (entry) => {
+    var _a;
+    const [normalizationNode, normalizationPath] = entry;
+    if (ElementUtils.isBlock(normalizationNode) && ((_a = normalizationNode == null ? void 0 : normalizationNode.textAlign) == null ? void 0 : _a.length) == 0) {
+      Transforms.unsetNodes(editor, "textAlign", { at: normalizationPath });
+      return;
+    }
+    normalizeNode(entry);
   };
   return editor;
 }
 const defaultText = [{
   type: BlockType.Paragraph,
   children: [{
-    type: TextType.Text,
     text: ""
   }]
 }];
@@ -652,11 +653,20 @@ const EditableText = forwardRef(function EditableText2({
   width,
   margin
 }, ref) {
-  const [editor] = useState(() => withList(withReact(createEditor())));
+  const [editor] = useState(() => withBlock(withTypography(withList(withReact(createEditor())))));
   const delaySync = useSyncWithBuilder(editor, text);
   const editMode = useBuilderEditMode();
   const [propControllers, setPropControllers] = useState(null);
   const controller = propControllers == null ? void 0 : propControllers.text;
+  useEffect(() => {
+    if (controller == null)
+      return;
+    const element = ReactEditor.toDOMNode(editor, editor);
+    return pollBoxModel({
+      element,
+      onBoxModelChange: (boxModel) => controller.changeBoxModel(boxModel)
+    });
+  }, [editor, controller]);
   useImperativeHandle(ref, () => ({
     getDomNode() {
       return ReactEditor.toDOMNode(editor, editor);
@@ -693,7 +703,8 @@ const EditableText = forwardRef(function EditableText2({
       onKeyDown: handleKeyDown,
       onFocus: handleFocus,
       className: cx(width, margin),
-      readOnly: editMode === BuilderEditMode.INTERACT
+      readOnly: editMode === BuilderEditMode.INTERACT,
+      placeholder: "Write some text..."
     })
   });
 });