@makeswift/runtime 0.7.6 → 0.7.8

package/dist/rich-text.es.js

@@ -21,7 +21,10 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+const import_meta = {};
 import { A as ActionTypes } from "./actions.es.js";
+import { Transforms, Editor } from "slate";
+import { ReactEditor } from "slate-react";
 const BuilderEditMode = {
   BUILD: "build",
   CONTENT: "content",
@@ -115,6 +118,122 @@ function copyStyleData(value, context) {
   }
   return __spreadProps(__spreadValues({}, value), { border: copyResponsiveBorder(value.border) });
 }
+if (import_meta.vitest) {
+  const { describe, test, expect } = import_meta.vitest;
+  describe.concurrent("style copy", () => {
+    test("colors are replaced", () => {
+      const value = {
+        width: [
+          {
+            value: {
+              unit: "px",
+              value: 100
+            },
+            deviceId: "desktop"
+          }
+        ],
+        border: [
+          {
+            value: {
+              borderTop: {
+                color: {
+                  alpha: 1,
+                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
+                },
+                style: "solid",
+                width: 9
+              },
+              borderLeft: {
+                color: {
+                  alpha: 1,
+                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
+                },
+                style: "solid",
+                width: 9
+              },
+              borderRight: {
+                color: {
+                  alpha: 1,
+                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
+                },
+                style: "solid",
+                width: 9
+              },
+              borderBottom: {
+                color: {
+                  alpha: 1,
+                  swatchId: "U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA=="
+                },
+                style: "solid",
+                width: 9
+              }
+            },
+            deviceId: "desktop"
+          }
+        ],
+        textStyle: [
+          {
+            value: {
+              fontSize: {
+                unit: "px",
+                value: 46
+              },
+              fontStyle: [],
+              fontFamily: "Oswald",
+              fontWeight: 400,
+              letterSpacing: 5.2,
+              textTransform: []
+            },
+            deviceId: "desktop"
+          }
+        ],
+        borderRadius: [
+          {
+            value: {
+              borderTopLeftRadius: {
+                unit: "px",
+                value: 4
+              },
+              borderTopRightRadius: {
+                unit: "px",
+                value: 4
+              },
+              borderBottomLeftRadius: {
+                unit: "px",
+                value: 4
+              },
+              borderBottomRightRadius: {
+                unit: "px",
+                value: 4
+              }
+            },
+            deviceId: "desktop"
+          }
+        ]
+      };
+      const expected = JSON.parse(JSON.stringify(value).replaceAll("U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA==", "testing"));
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map([
+          ["U3dhdGNoOmJjMDkwZWJjLTZkZDUtNDY1NS1hMDY0LTg3ZDAxM2U4YTFhNA==", "testing"]
+        ]),
+        fileIds: /* @__PURE__ */ new Map(),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copyStyleData(value, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
 const Types = {
   Backgrounds: "Backgrounds",
   Border: "Border",
@@ -200,10 +319,10 @@ function Image$1(options = {}) {
 function Images(options = {}) {
   return { type: Types.Images, options };
 }
-function Link(options = {}) {
+function Link$1(options = {}) {
   return { type: Types.Link, options };
 }
-function List(options) {
+function List$1(options) {
   return { type: Types.List, options };
 }
 const MarginPropControllerFormat = {
@@ -257,7 +376,7 @@ function Shadows(options = {}) {
   return { type: Types.Shadows, options };
 }
 Shadows.Format = ShadowsPropControllerFormat;
-function Shape(options) {
+function Shape$1(options) {
   return { type: Types.Shape, options };
 }
 function SocialLinks(options = {}) {
@@ -309,8 +428,8 @@ var descriptors = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
   Grid,
   Image: Image$1,
   Images,
-  Link,
-  List,
+  Link: Link$1,
+  List: List$1,
   MarginPropControllerFormat,
   Margin,
   NavigationLinks,
@@ -326,7 +445,7 @@ var descriptors = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePro
   RichText: RichText$1,
   ShadowsPropControllerFormat,
   Shadows,
-  Shape,
+  Shape: Shape$1,
   SocialLinks,
   Table,
   TableFormFields,
@@ -353,6 +472,84 @@ function copyImageData(value, context) {
     return value;
   return (_a = context.replacementContext.fileIds.get(value)) != null ? _a : value;
 }
+if (import_meta.vitest) {
+  const { describe, test, expect } = import_meta.vitest;
+  describe.concurrent("image copy", () => {
+    test("image is replaced by a one in replacement context", () => {
+      const data = "file-id";
+      const expected = "testing";
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map(),
+        fileIds: /* @__PURE__ */ new Map([["file-id", "testing"]]),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copyImageData(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
+const LinkControlType = "makeswift::controls::link";
+function Link(config = {}) {
+  return { type: LinkControlType, config };
+}
+function copyLinkData(value, context) {
+  var _a;
+  if (value == null)
+    return value;
+  if (value.type === "OPEN_PAGE") {
+    const pageId = value.payload.pageId;
+    if (pageId != null) {
+      return __spreadProps(__spreadValues({}, value), {
+        payload: __spreadProps(__spreadValues({}, value.payload), {
+          pageId: (_a = context.replacementContext.pageIds.get(pageId)) != null ? _a : pageId
+        })
+      });
+    }
+  }
+  return value;
+}
+if (import_meta.vitest) {
+  const { describe, test, expect } = import_meta.vitest;
+  describe.concurrent("link", () => {
+    test("page id is replaced by one in replacement context", () => {
+      const data = {
+        type: "OPEN_PAGE",
+        payload: {
+          pageId: "UGFnZTpmNTdmMjQ2MS0wMGY3LTQzZWUtYmIwOS03ODdiNTUyYzUyYWQ=",
+          openInNewTab: false
+        }
+      };
+      const expected = JSON.parse(JSON.stringify(data).replace("UGFnZTpmNTdmMjQ2MS0wMGY3LTQzZWUtYmIwOS03ODdiNTUyYzUyYWQ=", "testing"));
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map([["UGFnZTpmNTdmMjQ2MS0wMGY3LTQzZWUtYmIwOS03ODdiNTUyYzUyYWQ=", "testing"]]),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        fileIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copyLinkData(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
 const RichTextPropControllerMessageType = {
   CHANGE_BUILDER_EDIT_MODE: "CHANGE_BUILDER_EDIT_MODE",
   INITIALIZE_EDITOR: "INITIALIZE_EDITOR",
@@ -379,19 +576,24 @@ class RichTextPropController extends PropController {
     __publicField(this, "editor", null);
   }
   recv(message) {
-    var _a, _b;
+    if (!this.editor)
+      return;
     switch (message.type) {
       case RichTextPropControllerMessageType.CHANGE_BUILDER_EDIT_MODE: {
         switch (message.editMode) {
           case BuilderEditMode.BUILD:
           case BuilderEditMode.INTERACT:
-            (_a = this.editor) == null ? void 0 : _a.deselect().blur();
-            break;
+            ReactEditor.deselect(this.editor);
+            ReactEditor.blur(this.editor);
         }
         break;
       }
       case RichTextPropControllerMessageType.FOCUS: {
-        (_b = this.editor) == null ? void 0 : _b.focus().moveToRangeOfDocument();
+        ReactEditor.focus(this.editor);
+        Transforms.select(this.editor, {
+          anchor: Editor.start(this.editor, []),
+          focus: Editor.end(this.editor, [])
+        });
         break;
       }
     }
@@ -400,14 +602,18 @@ class RichTextPropController extends PropController {
     this.editor = editor;
     this.send({
       type: RichTextPropControllerMessageType.INITIALIZE_EDITOR,
-      value: editor.value.toJSON({ preserveSelection: false })
-    });
-  }
-  onChange(change) {
-    this.send({
-      type: RichTextPropControllerMessageType.CHANGE_EDITOR_VALUE,
-      value: change.value.toJSON({ preserveSelection: true })
+      value: richTextDAOToDTO(editor.children, editor.selection)
     });
+    const _onChange = editor.onChange;
+    this.editor.onChange = (options) => {
+      _onChange(options);
+      if ((options == null ? void 0 : options.operation) != null) {
+        this.send({
+          type: RichTextPropControllerMessageType.CHANGE_EDITOR_VALUE,
+          value: richTextDAOToDTO(editor.children, editor.selection)
+        });
+      }
+    };
   }
   focus() {
     this.send({ type: RichTextPropControllerMessageType.FOCUS });
@@ -449,10 +655,108 @@ function createPropController(descriptor, send) {
       return new SlotControl(send);
     case RichTextControlType:
       return new RichTextControl(send);
+    case ListControlType:
+      return new ListControl(send, descriptor);
+    case ShapeControlType:
+      return new ShapeControl(send, descriptor);
     default:
       return new DefaultPropController(send);
   }
 }
+const ListControlType = "makeswift::controls::list";
+function List(config) {
+  return { type: ListControlType, config };
+}
+const ListControlMessageType = {
+  LIST_CONTROL_ITEM_CONTROL_MESSAGE: "makeswift::controls::list::message::item-control-message"
+};
+class ListControl extends PropController {
+  constructor(send, descriptor) {
+    super(send);
+    __publicField(this, "controls");
+    __publicField(this, "descriptor");
+    __publicField(this, "send");
+    __publicField(this, "setItemsControl", (value) => {
+      const controls = /* @__PURE__ */ new Map();
+      if (value == null)
+        return;
+      const shouldUpdate = () => {
+        if (value.length !== this.controls.size)
+          return true;
+        if (!value.every(({ id }) => this.controls.has(id)))
+          return true;
+        return false;
+      };
+      if (!shouldUpdate())
+        return this.controls;
+      value.forEach((item) => {
+        const control = createPropController(this.descriptor.config.type, (message) => this.send({
+          type: ListControlMessageType.LIST_CONTROL_ITEM_CONTROL_MESSAGE,
+          payload: { message, itemId: item.id }
+        }));
+        controls.set(item.id, control);
+      });
+      this.controls = controls;
+      return this.controls;
+    });
+    this.descriptor = descriptor;
+    this.send = send;
+    this.controls = /* @__PURE__ */ new Map();
+  }
+  recv() {
+  }
+}
+function copyListData(definition, value, context) {
+  if (value == null)
+    return value;
+  return value && value.map((item) => __spreadProps(__spreadValues({}, item), {
+    value: copy(definition.config.type, item.value, context)
+  }));
+}
+const ShapeControlType = "makeswift::controls::shape";
+function Shape(config) {
+  return { type: ShapeControlType, config };
+}
+const ShapeControlMessageType = {
+  SHAPE_CONTROL_CHILD_CONTROL_MESSAGE: "makeswift::controls::shape::message::child-control-message"
+};
+class ShapeControl extends PropController {
+  constructor(send, descriptor) {
+    super(send);
+    __publicField(this, "controls");
+    __publicField(this, "descriptor");
+    __publicField(this, "send");
+    __publicField(this, "setControls", () => {
+      const controls = /* @__PURE__ */ new Map();
+      const children = this.descriptor.config.type;
+      Object.keys(children).forEach((key) => {
+        const control = createPropController(children[key], (message) => this.send({
+          type: ShapeControlMessageType.SHAPE_CONTROL_CHILD_CONTROL_MESSAGE,
+          payload: { message, key }
+        }));
+        controls.set(key, control);
+      });
+      this.controls = controls;
+      return this.controls;
+    });
+    this.descriptor = descriptor;
+    this.send = send;
+    this.controls = /* @__PURE__ */ new Map();
+    this.setControls();
+  }
+  recv() {
+  }
+}
+function copyShapeData(definition, value, context) {
+  if (value == null)
+    return value;
+  const newValue = {};
+  for (const [key, itemDefinition] of Object.entries(definition.config.type)) {
+    const prop = value[key];
+    newValue[key] = copy(itemDefinition, prop, context);
+  }
+  return newValue;
+}
 const SlotControlType = "makeswift::controls::slot";
 function Slot() {
   return { type: SlotControlType };
@@ -478,6 +782,1034 @@ function copySlotData(value, context) {
     elements: value.elements.map((element) => context.copyElement(element))
   });
 }
+function copy$e(value, context) {
+  if (value == null)
+    return value;
+  return value.map((override) => __spreadProps(__spreadValues({}, override), {
+    value: override.value.map((backgroundItem) => {
+      var _a, _b;
+      switch (backgroundItem.type) {
+        case "color":
+          return __spreadProps(__spreadValues({}, backgroundItem), {
+            payload: backgroundItem.payload === null ? null : __spreadProps(__spreadValues({}, backgroundItem.payload), {
+              swatchId: (_a = context.replacementContext.swatchIds.get(backgroundItem.payload.swatchId)) != null ? _a : backgroundItem.payload.swatchId
+            })
+          });
+        case "gradient":
+          return __spreadProps(__spreadValues({}, backgroundItem), {
+            payload: __spreadProps(__spreadValues({}, backgroundItem.payload), {
+              stops: backgroundItem.payload.stops.map((stop) => {
+                var _a2;
+                return __spreadProps(__spreadValues({}, stop), {
+                  color: stop.color == null ? null : __spreadProps(__spreadValues({}, stop.color), {
+                    swatchId: (_a2 = context.replacementContext.swatchIds.get(stop.color.swatchId)) != null ? _a2 : stop.color.swatchId
+                  })
+                });
+              })
+            })
+          });
+        case "image":
+          return __spreadProps(__spreadValues({}, backgroundItem), {
+            payload: __spreadProps(__spreadValues({}, backgroundItem.payload), {
+              imageId: (_b = context.replacementContext.fileIds.get(backgroundItem.payload.imageId)) != null ? _b : backgroundItem.payload.imageId
+            })
+          });
+        default:
+          return backgroundItem;
+      }
+    })
+  }));
+}
+function copy$d(value, context) {
+  if (value == null)
+    return void 0;
+  return __spreadProps(__spreadValues({}, value), {
+    elements: value.elements.map((element) => context.copyElement(element))
+  });
+}
+function copy$c(value, context) {
+  var _a, _b;
+  if (value == null)
+    return value;
+  switch (value.type) {
+    case "OPEN_PAGE": {
+      const pageId = value.payload.pageId;
+      if (pageId == null)
+        return value;
+      return __spreadProps(__spreadValues({}, value), {
+        payload: __spreadProps(__spreadValues({}, value.payload), {
+          pageId: (_a = context.replacementContext.pageIds.get(pageId)) != null ? _a : pageId
+        })
+      });
+    }
+    case "SCROLL_TO_ELEMENT": {
+      const elementIdConfig = value.payload.elementIdConfig;
+      if (elementIdConfig == null)
+        return value;
+      return __spreadProps(__spreadValues({}, value), {
+        payload: __spreadProps(__spreadValues({}, value.payload), {
+          elementIdConfig: __spreadProps(__spreadValues({}, elementIdConfig), {
+            elementKey: (_b = context.replacementContext.elementKeys.get(elementIdConfig.elementKey)) != null ? _b : elementIdConfig.elementKey
+          })
+        })
+      });
+    }
+    default:
+      return value;
+  }
+}
+function copy$b(value, context) {
+  if (value == null)
+    return value;
+  return value.map(copyNavigationLinksPanelItem);
+  function copyNavigationLinksPanelItem(item) {
+    switch (item.type) {
+      case "button":
+      case "dropdown": {
+        const { color, link } = item.payload;
+        return __spreadProps(__spreadValues({}, item), {
+          payload: __spreadProps(__spreadValues({}, item.payload), {
+            link: link != null ? copy$c(link, context) : void 0,
+            color: color != null ? color.map((override) => {
+              var _a;
+              return __spreadProps(__spreadValues({}, override), {
+                value: __spreadProps(__spreadValues({}, override.value), {
+                  swatchId: (_a = context.replacementContext.swatchIds.get(override.value.swatchId)) != null ? _a : override.value.swatchId
+                })
+              });
+            }) : void 0
+          })
+        });
+      }
+      default:
+        return item;
+    }
+  }
+}
+if (import_meta.vitest) {
+  const { describe, test, expect } = import_meta.vitest;
+  describe.concurrent("navigation-links copy", () => {
+    test("replace page id from replacement context", () => {
+      const data = [
+        {
+          id: "e1cf2d04-012a-4481-832a-7b4dda62195e",
+          type: "button",
+          payload: {
+            link: {
+              type: "OPEN_PAGE",
+              payload: {
+                pageId: "UGFnZTo2OGMzODZhNC1jYzRkLTQzMzUtYWZiMi05MDdhZGRkYzQ3YTM=",
+                openInNewTab: true
+              }
+            },
+            label: "Fellow Page"
+          }
+        }
+      ];
+      const expected = JSON.parse(JSON.stringify(data).replace("UGFnZTo2OGMzODZhNC1jYzRkLTQzMzUtYWZiMi05MDdhZGRkYzQ3YTM=", "testing"));
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map(),
+        fileIds: /* @__PURE__ */ new Map(),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map([["UGFnZTo2OGMzODZhNC1jYzRkLTQzMzUtYWZiMi05MDdhZGRkYzQ3YTM=", "testing"]]),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copy$b(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
+function copy$a(value, context) {
+  if (value == null)
+    return value;
+  return value.map((override) => __spreadProps(__spreadValues({}, override), { value: override.value.map(copyShadowItem) }));
+  function copyShadowItem(item) {
+    var _a;
+    const { color } = item.payload;
+    if (color == null)
+      return item;
+    return __spreadProps(__spreadValues({}, item), {
+      payload: __spreadProps(__spreadValues({}, item.payload), {
+        color: __spreadProps(__spreadValues({}, color), {
+          swatchId: (_a = context.replacementContext.swatchIds.get(color.swatchId)) != null ? _a : color.swatchId
+        })
+      })
+    });
+  }
+}
+if (import_meta.vitest) {
+  const { describe, test, expect } = import_meta.vitest;
+  describe.concurrent("shadow copy", () => {
+    test("replaces the swatch id", () => {
+      const data = [
+        {
+          value: [
+            {
+              id: "8575efe6-4d04-4361-b593-e559537c4c3c",
+              payload: {
+                color: {
+                  alpha: 1,
+                  swatchId: "U3dhdGNoOjgwMmNmZGMyLTc5ZDgtNDkyNy1hMDUwLWE1NmM1M2EzYzE0Mg=="
+                },
+                offsetX: -5,
+                offsetY: 8.7,
+                blurRadius: 17,
+                spreadRadius: 16
+              }
+            }
+          ],
+          deviceId: "desktop"
+        }
+      ];
+      const expected = JSON.parse(JSON.stringify(data).replace("U3dhdGNoOjgwMmNmZGMyLTc5ZDgtNDkyNy1hMDUwLWE1NmM1M2EzYzE0Mg==", "testing"));
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map([
+          ["U3dhdGNoOjgwMmNmZGMyLTc5ZDgtNDkyNy1hMDUwLWE1NmM1M2EzYzE0Mg==", "testing"]
+        ]),
+        fileIds: /* @__PURE__ */ new Map(),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copy$a(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
+function copy$9(value, context) {
+  var _a;
+  if (value == null)
+    return value;
+  return (_a = context.replacementContext.fileIds.get(value)) != null ? _a : value;
+}
+if (import_meta.vitest) {
+  const { describe, test, expect } = import_meta.vitest;
+  describe.concurrent("image copy", () => {
+    test("image is replaced by a one in replacement context", () => {
+      const data = "file-id";
+      const expected = JSON.parse(JSON.stringify(data).replace("file-id", "testing"));
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map(),
+        fileIds: /* @__PURE__ */ new Map([["file-id", "testing"]]),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copy$9(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
+function copy$8(value, context) {
+  if (value == null)
+    return value;
+  return value.map(copyImagesPanelItem);
+  function copyImagesPanelItem(imagesPanelItem) {
+    var _a;
+    const { file } = imagesPanelItem.props;
+    if (file == null)
+      return imagesPanelItem;
+    return __spreadProps(__spreadValues({}, imagesPanelItem), {
+      props: __spreadProps(__spreadValues({}, imagesPanelItem.props), {
+        file: (_a = context.replacementContext.fileIds.get(file)) != null ? _a : file
+      })
+    });
+  }
+}
+if (import_meta.vitest) {
+  const { describe, test, expect } = import_meta.vitest;
+  describe.concurrent("images copy", () => {
+    test("images are replaced by ones in replacement context", () => {
+      const data = [
+        {
+          key: "0ae80f8f-9d4a-43bc-ae7c-007164a19d22",
+          props: {
+            file: "RmlsZTo5ZmU3ZGUzMi1jY2E0LTRkMjktOWVlMC1jNTI2NDYxY2I1YjM="
+          }
+        },
+        {
+          key: "161674c3-8710-4fd6-90e6-6096c4e9bb88",
+          props: {
+            file: "RmlsZTo5ZmU3ZGUzMi1jY2E0LTRkMjktOWVlMC1jNTI2NDYxY2I1YjM="
+          }
+        }
+      ];
+      const expected = JSON.parse(JSON.stringify(data).replaceAll("RmlsZTo5ZmU3ZGUzMi1jY2E0LTRkMjktOWVlMC1jNTI2NDYxY2I1YjM=", "testing"));
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map(),
+        fileIds: /* @__PURE__ */ new Map([["RmlsZTo5ZmU3ZGUzMi1jY2E0LTRkMjktOWVlMC1jNTI2NDYxY2I1YjM=", "testing"]]),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copy$8(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
+function copy$7(value, context) {
+  if (value == null)
+    return value;
+  return value.map((override) => __spreadProps(__spreadValues({}, override), { value: copyColorValue(override.value) }));
+  function copyColorValue(colorValue) {
+    var _a;
+    return __spreadProps(__spreadValues({}, colorValue), {
+      swatchId: (_a = context.replacementContext.swatchIds.get(colorValue.swatchId)) != null ? _a : colorValue.swatchId
+    });
+  }
+}
+function copy$6(value, context) {
+  if (value == null)
+    return value;
+  return __spreadProps(__spreadValues({}, value), { fields: value.fields.map(copyFormFieldsPanelItem) });
+  function copyFormFieldsPanelItem(item) {
+    var _a;
+    return __spreadProps(__spreadValues({}, item), {
+      tableColumnId: (_a = context.replacementContext.tableColumnIds.get(item.tableColumnId)) != null ? _a : item.tableColumnId
+    });
+  }
+}
+if (import_meta.vitest) {
+  const { describe, test, expect } = import_meta.vitest;
+  describe.concurrent("table form fields copy", () => {
+    test("replaces the table column id", () => {
+      const data = {
+        grid: [
+          {
+            value: {
+              count: 12,
+              spans: [[12], [12]]
+            },
+            deviceId: "desktop"
+          }
+        ],
+        fields: [
+          {
+            id: "8c4b3dcb-d9d2-4199-9a66-c35aa39248f0",
+            label: "hello",
+            required: true,
+            tableColumnId: "U2luZ2xlTGluZVRleHRUYWJsZUNvbHVtbjphMzQ0Yzk3ZC04MTQ0LTRmMzctYjU2My1hODE5OTQ5OGMyYWI="
+          }
+        ]
+      };
+      const expected = JSON.parse(JSON.stringify(data).replace("U2luZ2xlTGluZVRleHRUYWJsZUNvbHVtbjphMzQ0Yzk3ZC04MTQ0LTRmMzctYjU2My1hODE5OTQ5OGMyYWI=", "testing"));
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map(),
+        fileIds: /* @__PURE__ */ new Map(),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map([
+          [
+            "U2luZ2xlTGluZVRleHRUYWJsZUNvbHVtbjphMzQ0Yzk3ZC04MTQ0LTRmMzctYjU2My1hODE5OTQ5OGMyYWI=",
+            "testing"
+          ]
+        ]),
+        pageIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copy$6(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
+function copy$5(value, context) {
+  var _a;
+  if (value == null)
+    return value;
+  return (_a = context.replacementContext.tableIds.get(value)) != null ? _a : value;
+}
+if (import_meta.vitest) {
+  const { describe, test, expect } = import_meta.vitest;
+  describe.concurrent("table copy", () => {
+    test("replaces the table id", () => {
+      const data = "VGFibGU6MTM5NDhlYzMtMjgwNS00Nzk0LTliNzctNDJkN2RhNmQxZWEy";
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map(),
+        fileIds: /* @__PURE__ */ new Map(),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map([
+          ["VGFibGU6MTM5NDhlYzMtMjgwNS00Nzk0LTliNzctNDJkN2RhNmQxZWEy", "testing"]
+        ]),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copy$5(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatch("testing");
+    });
+  });
+}
+function copy$4(value, context) {
+  if (value == null)
+    return value;
+  return value.map((override) => __spreadProps(__spreadValues({}, override), { value: copyBorderValue(override.value) }));
+  function copyBorderValue({ borderTop, borderRight, borderBottom, borderLeft }) {
+    return {
+      borderTop: borderTop && copyBorderSide(borderTop),
+      borderRight: borderRight && copyBorderSide(borderRight),
+      borderBottom: borderBottom && copyBorderSide(borderBottom),
+      borderLeft: borderLeft && copyBorderSide(borderLeft)
+    };
+  }
+  function copyBorderSide(borderSide) {
+    var _a;
+    const { color } = borderSide;
+    if (color == null)
+      return borderSide;
+    return __spreadProps(__spreadValues({}, borderSide), {
+      color: __spreadProps(__spreadValues({}, color), {
+        swatchId: (_a = context.replacementContext.swatchIds.get(color.swatchId)) != null ? _a : color.swatchId
+      })
+    });
+  }
+}
+if (import_meta.vitest) {
+  const { describe, test, expect } = import_meta.vitest;
+  describe.concurrent("border copy", () => {
+    test("replaces the swatch id", () => {
+      const data = [
+        {
+          value: {
+            borderTop: {
+              color: {
+                alpha: 1,
+                swatchId: "U3dhdGNoOjgwMmNmZGMyLTc5ZDgtNDkyNy1hMDUwLWE1NmM1M2EzYzE0Mg=="
+              },
+              style: "solid",
+              width: 5
+            },
+            borderLeft: {
+              color: {
+                alpha: 1,
+                swatchId: "U3dhdGNoOjgwMmNmZGMyLTc5ZDgtNDkyNy1hMDUwLWE1NmM1M2EzYzE0Mg=="
+              },
+              style: "solid",
+              width: 5
+            },
+            borderRight: {
+              color: {
+                alpha: 1,
+                swatchId: "U3dhdGNoOjgwMmNmZGMyLTc5ZDgtNDkyNy1hMDUwLWE1NmM1M2EzYzE0Mg=="
+              },
+              style: "solid",
+              width: 5
+            },
+            borderBottom: {
+              color: {
+                alpha: 1,
+                swatchId: "U3dhdGNoOjgwMmNmZGMyLTc5ZDgtNDkyNy1hMDUwLWE1NmM1M2EzYzE0Mg=="
+              },
+              style: "solid",
+              width: 5
+            }
+          },
+          deviceId: "desktop"
+        }
+      ];
+      const expected = [
+        {
+          value: {
+            borderTop: {
+              color: {
+                alpha: 1,
+                swatchId: "testing"
+              },
+              style: "solid",
+              width: 5
+            },
+            borderLeft: {
+              color: {
+                alpha: 1,
+                swatchId: "testing"
+              },
+              style: "solid",
+              width: 5
+            },
+            borderRight: {
+              color: {
+                alpha: 1,
+                swatchId: "testing"
+              },
+              style: "solid",
+              width: 5
+            },
+            borderBottom: {
+              color: {
+                alpha: 1,
+                swatchId: "testing"
+              },
+              style: "solid",
+              width: 5
+            }
+          },
+          deviceId: "desktop"
+        }
+      ];
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map([
+          ["U3dhdGNoOjgwMmNmZGMyLTc5ZDgtNDkyNy1hMDUwLWE1NmM1M2EzYzE0Mg==", "testing"]
+        ]),
+        fileIds: /* @__PURE__ */ new Map(),
+        typographyIds: /* @__PURE__ */ new Map(),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copy$4(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
+function copy$3(value, context) {
+  if (value == null)
+    return value;
+  return __spreadProps(__spreadValues({}, value), { document: value.document ? copyNode(value.document) : value.document });
+  function copyNode(node) {
+    var _a;
+    switch (node.object) {
+      case "document":
+      case "block":
+      case "inline":
+        return copyInline(node);
+      case "text":
+        return __spreadProps(__spreadValues({}, node), { marks: (_a = node.marks) == null ? void 0 : _a.map(copyMark) });
+      default:
+        return node;
+    }
+  }
+  function copyInline(inline) {
+    var _a, _b;
+    switch (inline.type) {
+      case "link":
+        return __spreadProps(__spreadValues({}, inline), {
+          nodes: (_a = inline.nodes) == null ? void 0 : _a.map(copyNode),
+          data: inline.data ? copyLinkData2(inline.data) : inline.data
+        });
+      default:
+        return __spreadProps(__spreadValues({}, inline), { nodes: (_b = inline.nodes) == null ? void 0 : _b.map(copyNode) });
+    }
+  }
+  function copyLinkData2(data) {
+    var _a, _b;
+    switch (data.type) {
+      case "OPEN_PAGE": {
+        const pageId = data.payload.pageId;
+        if (pageId == null)
+          return data;
+        return __spreadProps(__spreadValues({}, data), {
+          payload: __spreadProps(__spreadValues({}, data.payload), {
+            pageId: (_a = context.replacementContext.pageIds.get(pageId)) != null ? _a : data.payload.pageId
+          })
+        });
+      }
+      case "SCROLL_TO_ELEMENT": {
+        const elementIdConfig = data.payload.elementIdConfig;
+        if (elementIdConfig == null)
+          return data;
+        return __spreadProps(__spreadValues({}, data), {
+          payload: __spreadProps(__spreadValues({}, data.payload), {
+            elementIdConfig: __spreadProps(__spreadValues({}, elementIdConfig), {
+              elementKey: (_b = context.replacementContext.elementKeys.get(elementIdConfig.elementKey)) != null ? _b : elementIdConfig.elementKey
+            })
+          })
+        });
+      }
+      default:
+        return data;
+    }
+  }
+  function copyMark(mark) {
+    var _a, _b, _c, _d;
+    switch (mark.type) {
+      case "typography": {
+        const typographyId = (_a = mark.data) == null ? void 0 : _a.value.id;
+        return __spreadProps(__spreadValues({}, mark), {
+          data: __spreadProps(__spreadValues({}, mark.data), {
+            value: __spreadProps(__spreadValues({}, (_b = mark.data) == null ? void 0 : _b.value), {
+              id: (_c = context.replacementContext.typographyIds.get(typographyId)) != null ? _c : typographyId,
+              style: (_d = mark.data) == null ? void 0 : _d.value.style.map((override) => {
+                var _a2, _b2, _c2;
+                return __spreadProps(__spreadValues({}, override), {
+                  value: __spreadProps(__spreadValues({}, override.value), {
+                    color: override.value.color == null ? override.value.color : __spreadProps(__spreadValues({}, override.value.color), {
+                      swatchId: (_c2 = context.replacementContext.swatchIds.get((_a2 = override.value.color) == null ? void 0 : _a2.swatchId)) != null ? _c2 : (_b2 = override.value.color) == null ? void 0 : _b2.swatchId
+                    })
+                  })
+                });
+              })
+            })
+          })
+        });
+      }
+      default:
+        return mark;
+    }
+  }
+}
+if (import_meta.vitest) {
+  const { describe, test, expect } = import_meta.vitest;
+  describe.concurrent("rich text copy", () => {
+    test("replaces the swatch id", () => {
+      const data = {
+        object: "value",
+        document: {
+          data: {},
+          nodes: [
+            {
+              data: {},
+              type: "paragraph",
+              nodes: [
+                {
+                  text: "Hello world",
+                  marks: [
+                    {
+                      data: {
+                        value: {
+                          id: "VHlwb2dyYXBoeTo5ODE1NWY0Ni1mNmQzLTQ1M2YtODk5OC02ZWY5NzJhNTBlY2U=",
+                          style: [
+                            {
+                              value: {
+                                color: {
+                                  alpha: 1,
+                                  swatchId: "U3dhdGNoOjgwMmNmZGMyLTc5ZDgtNDkyNy1hMDUwLWE1NmM1M2EzYzE0Mg=="
+                                },
+                                fontSize: {
+                                  unit: "px",
+                                  value: 23
+                                },
+                                lineHeight: 2.5,
+                                strikethrough: true
+                              },
+                              deviceId: "desktop"
+                            }
+                          ]
+                        }
+                      },
+                      type: "typography",
+                      object: "mark"
+                    }
+                  ],
+                  object: "text"
+                }
+              ],
+              object: "block"
+            }
+          ],
+          object: "document"
+        },
+        selection: {
+          focus: {
+            path: [0, 0],
+            object: "point",
+            offset: 0
+          },
+          anchor: {
+            path: [0, 0],
+            object: "point",
+            offset: 0
+          },
+          object: "selection",
+          isFocused: false
+        }
+      };
+      const expected = JSON.parse(JSON.stringify(data).replace("U3dhdGNoOjgwMmNmZGMyLTc5ZDgtNDkyNy1hMDUwLWE1NmM1M2EzYzE0Mg==", "swatch-testing").replace("VHlwb2dyYXBoeTo5ODE1NWY0Ni1mNmQzLTQ1M2YtODk5OC02ZWY5NzJhNTBlY2U=", "typography-testing"));
+      const replacementContext = {
+        elementHtmlIds: /* @__PURE__ */ new Set(),
+        elementKeys: /* @__PURE__ */ new Map(),
+        swatchIds: /* @__PURE__ */ new Map([
+          ["U3dhdGNoOjgwMmNmZGMyLTc5ZDgtNDkyNy1hMDUwLWE1NmM1M2EzYzE0Mg==", "swatch-testing"]
+        ]),
+        fileIds: /* @__PURE__ */ new Map(),
+        typographyIds: /* @__PURE__ */ new Map([
+          [
+            "VHlwb2dyYXBoeTo5ODE1NWY0Ni1mNmQzLTQ1M2YtODk5OC02ZWY5NzJhNTBlY2U=",
+            "typography-testing"
+          ]
+        ]),
+        tableIds: /* @__PURE__ */ new Map(),
+        tableColumnIds: /* @__PURE__ */ new Map(),
+        pageIds: /* @__PURE__ */ new Map(),
+        globalElementIds: /* @__PURE__ */ new Map(),
+        globalElementData: /* @__PURE__ */ new Map()
+      };
+      const result = copy$3(data, {
+        replacementContext,
+        copyElement: (node) => node
+      });
+      expect(result).toMatchObject(expected);
+    });
+  });
+}
+function copy$2(value, context) {
+  if (value == null)
+    return value;
+  if (context.replacementContext.elementHtmlIds.has(value))
+    return void 0;
+  context.replacementContext.elementHtmlIds.add(value);
+  return value;
+}
+function copy$1(descriptor, value, context) {
+  switch (descriptor.type) {
+    case "Backgrounds":
+      return copy$e(value, context);
+    case "Grid":
+      return copy$d(value, context);
+    case "NavigationLinks":
+      return copy$b(value, context);
+    case "Link":
+      return copy$c(value, context);
+    case "Shadows":
+      return copy$a(value, context);
+    case "Image":
+      return copy$9(value, context);
+    case "Images":
+      return copy$8(value, context);
+    case "ResponsiveColor":
+      return copy$7(value, context);
+    case "TableFormFields":
+      return copy$6(value, context);
+    case "Table":
+      return copy$5(value, context);
+    case "Border":
+      return copy$4(value, context);
+    case "RichText":
+      return copy$3(value, context);
+    case "ElementID":
+      return copy$2(value, context);
+    default:
+      return value;
+  }
+}
+function copyElementReference(value, context) {
+  return context.replacementContext.globalElementIds.get(value) || value;
+}
+function copy(definition, value, context) {
+  switch (definition.type) {
+    case Types.Backgrounds:
+    case Types.Grid:
+    case Types.NavigationLinks:
+    case Types.Link:
+    case Types.Shadows:
+    case Types.Image:
+    case Types.Images:
+    case Types.ResponsiveColor:
+    case Types.TableFormFields:
+    case Types.Table:
+    case Types.Border:
+    case Types.RichText:
+    case Types.ElementID:
+      return copy$1(definition, value, context);
+    case ColorControlType:
+      return copyColorData(value, context);
+    case ImageControlType:
+      return copyImageData(value, context);
+    case LinkControlType:
+      return copyLinkData(value, context);
+    case ShapeControlType:
+      return copyShapeData(definition, value, context);
+    case ListControlType:
+      return copyListData(definition, value, context);
+    case StyleControlType:
+      return copyStyleData(value, context);
+    case SlotControlType:
+      return copySlotData(value, context);
+    default:
+      return value;
+  }
+}
+const ObjectType = {
+  Value: "value",
+  Text: "text",
+  Inline: "inline",
+  Block: "block",
+  Document: "document",
+  Leaf: "leaf",
+  Selection: "selection",
+  Mark: "mark",
+  Range: "range",
+  Decoration: "decoration",
+  Annotation: "annotation",
+  Point: "point",
+  Operation: "operation"
+};
+const TextType = {
+  Typography: "typography",
+  Text: "text"
+};
+const BlockType = {
+  Paragraph: "paragraph",
+  Heading1: "heading-one",
+  Heading2: "heading-two",
+  Heading3: "heading-three",
+  Heading4: "heading-four",
+  Heading5: "heading-five",
+  Heading6: "heading-six",
+  BlockQuote: "blockquote",
+  UnorderedList: "unordered-list",
+  OrderedList: "ordered-list",
+  ListItem: "list-item",
+  ListItemChild: "list-item-child"
+};
+const InlineType = {
+  Code: "code",
+  SuperScript: "superscript",
+  SubScript: "subscript",
+  Link: "link"
+};
+function toTextDAO(node) {
+  var _a, _b, _c, _d;
+  const typographyMark = (_a = node.marks) == null ? void 0 : _a.find((mark) => mark.type === TextType.Typography);
+  if (typographyMark) {
+    return [
+      {
+        text: (_b = node.text) != null ? _b : "",
+        type: TextType.Typography,
+        typography: (_c = typographyMark.data) == null ? void 0 : _c.value
+      }
+    ];
+  }
+  return [
+    {
+      type: TextType.Text,
+      text: (_d = node.text) != null ? _d : ""
+    }
+  ];
+}
+function toInlineDAO(node) {
+  var _a, _b, _c, _d;
+  switch (node.type) {
+    case InlineType.Link:
+      return [
+        {
+          children: (_b = (_a = node.nodes) == null ? void 0 : _a.flatMap(toInlineOrTextDAO)) != null ? _b : [],
+          [node.type]: node.data,
+          type: node.type
+        }
+      ];
+    case InlineType.Code:
+    case InlineType.SubScript:
+    case InlineType.SuperScript:
+      return [
+        {
+          children: (_d = (_c = node.nodes) == null ? void 0 : _c.flatMap(toInlineOrTextDAO)) != null ? _d : [],
+          type: node.type
+        }
+      ];
+    default:
+      return [];
+  }
+}
+function toInlineOrTextDAO(node) {
+  switch (node.object) {
+    case ObjectType.Inline:
+      return toInlineDAO(node);
+    case ObjectType.Text:
+      return toTextDAO(node);
+    default:
+      return [];
+  }
+}
+function toNodeDAO(node) {
+  var _a, _b;
+  switch (node.object) {
+    case ObjectType.Inline:
+    case ObjectType.Text:
+      return toInlineOrTextDAO(node);
+    case ObjectType.Block:
+      return [
+        {
+          type: node.type,
+          textAlign: (node == null ? void 0 : node.data) && "textAlign" in node.data ? node == null ? void 0 : node.data.textAlign : void 0,
+          children: (_b = (_a = node.nodes) == null ? void 0 : _a.flatMap(toNodeDAO)) != null ? _b : []
+        }
+      ];
+    default:
+      return [];
+  }
+}
+function richTextDTOtoSelection(data) {
+  var _a, _b, _c, _d;
+  if (((_b = (_a = data.selection) == null ? void 0 : _a.anchor) == null ? void 0 : _b.offset) != null && data.selection.anchor.path != null && ((_d = (_c = data.selection) == null ? void 0 : _c.focus) == null ? void 0 : _d.offset) != null && data.selection.focus.path != null)
+    return {
+      anchor: {
+        offset: data.selection.anchor.offset,
+        path: data.selection.anchor.path
+      },
+      focus: {
+        offset: data.selection.focus.offset,
+        path: data.selection.focus.path
+      }
+    };
+  return null;
+}
+function richTextDTOtoDAO(data) {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = data.document) == null ? void 0 : _a.nodes) == null ? void 0 : _b.flatMap(toNodeDAO)) != null ? _c : [];
+}
+function toInlineOrTextDTO(node) {
+  switch (node.type) {
+    case TextType.Typography:
+      return [
+        {
+          object: "text",
+          text: node.text,
+          marks: [
+            {
+              data: {
+                value: node.typography
+              },
+              type: "typography",
+              object: "mark"
+            }
+          ]
+        }
+      ];
+    case TextType.Text:
+      return [
+        {
+          text: node.text,
+          object: "text",
+          marks: []
+        }
+      ];
+    case InlineType.Link:
+      return [
+        {
+          object: ObjectType.Inline,
+          nodes: node.children.flatMap(toInlineOrTextDTO),
+          type: node.type,
+          data: node.link
+        }
+      ];
+    case InlineType.Code:
+    case InlineType.SubScript:
+    case InlineType.SuperScript:
+      return [
+        {
+          object: "inline",
+          nodes: node.children.flatMap(toInlineOrTextDTO),
+          type: node.type,
+          data: {}
+        }
+      ];
+  }
+}
+function toNodeDTO(node) {
+  var _a, _b;
+  switch (node.type) {
+    case TextType.Typography:
+    case TextType.Text:
+    case InlineType.Link:
+    case InlineType.Code:
+    case InlineType.SubScript:
+    case InlineType.SuperScript:
+      return toInlineOrTextDTO(node);
+    case BlockType.Heading1:
+    case BlockType.Heading2:
+    case BlockType.Heading3:
+    case BlockType.BlockQuote:
+    case BlockType.Paragraph:
+    case BlockType.OrderedList:
+    case BlockType.UnorderedList:
+    case BlockType.ListItem:
+    case BlockType.ListItemChild:
+      return [
+        {
+          type: node.type,
+          data: node.textAlign ? {
+            textAlign: node.textAlign
+          } : {},
+          object: "block",
+          nodes: (_b = (_a = node.children) == null ? void 0 : _a.flatMap(toNodeDTO)) != null ? _b : []
+        }
+      ];
+    default:
+      return [];
+  }
+}
+function toSelectionDTO(selection) {
+  if (selection == null)
+    return void 0;
+  return {
+    isFocused: false,
+    marks: void 0,
+    object: "selection",
+    anchor: {
+      offset: selection.anchor.offset,
+      path: selection.anchor.path,
+      object: "point"
+    },
+    focus: {
+      offset: selection.focus.offset,
+      path: selection.focus.path,
+      object: "point"
+    }
+  };
+}
+function richTextDAOToDTO(children, selection) {
+  return {
+    document: {
+      data: void 0,
+      nodes: children.flatMap(toNodeDTO),
+      object: "document"
+    },
+    object: "value",
+    selection: toSelectionDTO(selection),
+    annotations: void 0,
+    data: void 0
+  };
+}
 const RichTextControlType = "makeswift::controls::rich-text";
 function RichText() {
   return { type: RichTextControlType };
@@ -498,18 +1830,24 @@ class RichTextControl extends PropController {
     __publicField(this, "editor", null);
   }
   recv(message) {
-    var _a, _b;
+    if (!this.editor)
+      return;
     switch (message.type) {
       case RichTextControlMessageType.CHANGE_BUILDER_EDIT_MODE: {
         switch (message.editMode) {
           case BuilderEditMode.BUILD:
-            (_a = this.editor) == null ? void 0 : _a.deselect().blur();
-            break;
+          case BuilderEditMode.INTERACT:
+            ReactEditor.deselect(this.editor);
+            ReactEditor.blur(this.editor);
         }
         break;
       }
       case RichTextControlMessageType.FOCUS: {
-        (_b = this.editor) == null ? void 0 : _b.focus().moveToRangeOfDocument();
+        ReactEditor.focus(this.editor);
+        Transforms.select(this.editor, {
+          anchor: Editor.start(this.editor, []),
+          focus: Editor.end(this.editor, [])
+        });
         break;
       }
     }
@@ -518,14 +1856,18 @@ class RichTextControl extends PropController {
     this.editor = editor;
     this.send({
       type: RichTextControlMessageType.INITIALIZE_EDITOR,
-      value: editor.value.toJSON({ preserveSelection: false })
-    });
-  }
-  onChange(change) {
-    this.send({
-      type: RichTextControlMessageType.CHANGE_EDITOR_VALUE,
-      value: change.value.toJSON({ preserveSelection: true })
+      value: richTextDAOToDTO(editor.children, editor.selection)
     });
+    const _onChange = editor.onChange;
+    this.editor.onChange = (options) => {
+      _onChange(options);
+      if ((options == null ? void 0 : options.operation) != null) {
+        this.send({
+          type: RichTextControlMessageType.CHANGE_EDITOR_VALUE,
+          value: richTextDAOToDTO(editor.children, editor.selection)
+        });
+      }
+    };
   }
   focus() {
     this.send({ type: RichTextControlMessageType.FOCUS });
@@ -543,5 +1885,5 @@ class RichTextControl extends PropController {
     this.send({ type: RichTextControlMessageType.CHANGE_BOX_MODEL, payload: { boxModel } });
   }
 }
-export { WidthPropControllerFormat as $, ResponsiveOpacity as A, Backgrounds as B, ColorControlType as C, Date as D, ElementID as E, Font as F, GapY as G, NavigationLinks as H, ImageControlType as I, SocialLinks as J, RichText$1 as K, Link as L, Margin as M, Number as N, StyleControlProperty as O, Padding as P, ImageControlValueFormat as Q, RichTextPropControllerMessageType as R, SlotControlType as S, Types as T, BorderPropControllerFormat as U, Video as V, Width as W, ShadowsPropControllerFormat as X, BorderRadiusPropControllerFormat as Y, MarginPropControllerFormat as Z, PaddingPropControllerFormat as _, StyleControlType as a, RichTextControlType as a0, Color as a1, Image as a2, Slot as a3, SlotControlMessageType as a4, SlotControl as a5, Style as a6, RichText as a7, RichTextControlMessageType as a8, RichTextControl as a9, BuilderEditMode as aa, createPropController as ab, copyStyleData as b, copySlotData as c, copyImageData as d, copyColorData as e, descriptors as f, TableFormFieldsMessageType as g, ResponsiveIconRadioGroup as h, Border as i, BorderRadius as j, Shadows as k, GapX as l, ResponsiveSelect as m, ResponsiveNumber as n, Checkbox as o, Grid as p, TextInput as q, reducer as r, ResponsiveColor as s, TextStyle as t, Images as u, ResponsiveLength as v, TextArea as w, Table as x, TableFormFields as y, Image$1 as z };
+export { WidthPropControllerFormat as $, NavigationLinks as A, Backgrounds as B, ColorControlType as C, Date as D, ElementID as E, Font as F, GapY as G, SocialLinks as H, ImageControlType as I, RichText$1 as J, StyleControlProperty as K, ListControlType as L, Margin as M, Number as N, ImageControlValueFormat as O, Padding as P, LinkControlType as Q, RichTextPropControllerMessageType as R, SlotControlType as S, Types as T, BorderPropControllerFormat as U, Video as V, Width as W, ShadowsPropControllerFormat as X, BorderRadiusPropControllerFormat as Y, MarginPropControllerFormat as Z, PaddingPropControllerFormat as _, copy as a, RichTextControlType as a0, StyleControlType as a1, Color as a2, copyColorData as a3, Image as a4, copyImageData as a5, Link as a6, copyLinkData as a7, List as a8, ListControlMessageType as a9, ListControl as aa, copyListData as ab, Shape as ac, ShapeControlMessageType as ad, ShapeControl as ae, copyShapeData as af, Slot as ag, SlotControlMessageType as ah, SlotControl as ai, copySlotData as aj, Style as ak, copyStyleData as al, ObjectType as am, RichText as an, RichTextControlMessageType as ao, RichTextControl as ap, richTextDTOtoSelection as aq, richTextDTOtoDAO as ar, toSelectionDTO as as, richTextDAOToDTO as at, TextType as au, BlockType as av, InlineType as aw, BuilderEditMode as ax, createPropController as ay, TableFormFieldsMessageType as b, copyElementReference as c, descriptors as d, ShapeControlType as e, ResponsiveIconRadioGroup as f, Border as g, BorderRadius as h, Shadows as i, GapX as j, ResponsiveSelect as k, ResponsiveNumber as l, Checkbox as m, Grid as n, TextInput as o, Link$1 as p, ResponsiveColor as q, reducer as r, TextStyle as s, Images as t, ResponsiveLength as u, TextArea as v, Table as w, TableFormFields as x, Image$1 as y, ResponsiveOpacity as z };
 //# sourceMappingURL=rich-text.es.js.map