@makeswift/runtime 0.7.7 → 0.7.9

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",
@@ -353,6 +472,32 @@ 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 };
@@ -373,6 +518,38 @@ function copyLinkData(value, context) {
   }
   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",
@@ -399,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;
       }
     }
@@ -420,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 });
@@ -700,6 +886,47 @@ function copy$b(value, context) {
     }
   }
 }
+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;
@@ -718,12 +945,85 @@ function copy$a(value, context) {
     });
   }
 }
+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;
@@ -740,6 +1040,45 @@ function copy$8(value, context) {
     });
   }
 }
+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;
@@ -762,12 +1101,88 @@ function copy$6(value, context) {
     });
   }
 }
+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;
@@ -792,6 +1207,110 @@ function copy$4(value, context) {
     });
   }
 }
+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;
@@ -878,6 +1397,100 @@ function copy$3(value, context) {
     }
   }
 }
+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;
@@ -955,6 +1568,248 @@ function copy(definition, value, context) {
       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 };
@@ -975,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;
       }
     }
@@ -995,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 });
@@ -1020,5 +1885,5 @@ class RichTextControl extends PropController {
     this.send({ type: RichTextControlMessageType.CHANGE_BOX_MODEL, payload: { boxModel } });
   }
 }
-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, RichText as am, RichTextControlMessageType as an, RichTextControl as ao, BuilderEditMode as ap, createPropController as aq, 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 };
+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