@nookuio/iframe 0.9.9 → 1.0.0-beta.0

package/dist/drag-drop/utils.mjs

@@ -0,0 +1,56 @@
+export function getElement(e, t) {
+  return document.querySelector(`[data-node-id="${e}"][data-node-path="${t}"]`);
+}
+export function getDropZones() {
+  return Array.from(document.querySelectorAll('[data-node-id]:not([data-node-id=""])'));
+}
+export function canAcceptDrop(e) {
+  return e.getAttribute("data-node-type") !== "text";
+}
+export function getElementAtPosition(e, t, l) {
+  let n = document.elementFromPoint(e, t);
+  if (!n) return null;
+  let u = n.getAttribute("data-node-path");
+  for (; n && u !== l; ) {
+    if (n = n.parentElement, !n) return null;
+    u = n.getAttribute("data-node-path");
+  }
+  return n;
+}
+export function calculateInsertIndex(e, t, l) {
+  const n = Array.from(e.children).filter((o) => o.hasAttribute("data-node-id"));
+  if (n.length === 0)
+    return { index: 0, before: !0 };
+  const u = e.getBoundingClientRect(), c = n.every((o, d) => {
+    if (d === 0) return !0;
+    const r = n[d - 1].getBoundingClientRect(), i = o.getBoundingClientRect();
+    return r.bottom <= i.top;
+  });
+  for (let o = 0; o < n.length; o++) {
+    const r = n[o].getBoundingClientRect();
+    if (c) {
+      const i = r.top + r.height / 2;
+      if (l < i)
+        return { index: o, before: !0 };
+    } else {
+      const i = r.left + r.width / 2;
+      if (t < i)
+        return { index: o, before: !0 };
+    }
+  }
+  return { index: n.length, before: !1 };
+}
+export function createDropIndicator(e = "2563EB") {
+  const t = document.createElement("div");
+  return t.className = "__nooku-drop-indicator", t.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+    background: #${e};
+    opacity: 0.5;
+    transition: all 0.15s ease;
+  `, t;
+}
+export function positionDropIndicator(e, t, l = "block") {
+  l === "block" ? (e.style.left = `${t.left}px`, e.style.top = `${t.top}px`, e.style.width = `${t.width}px`, e.style.height = "3px") : (e.style.left = `${t.left}px`, e.style.top = `${t.top}px`, e.style.width = "3px", e.style.height = `${t.height}px`);
+}

package/dist/editor.d.ts

@@ -2,10 +2,4 @@ import type { CoreIframeContext, CoreIframeEvents, EditorContext, EditorEvents }
 /**
  * This function should be called inside the editor
  */
-export declare function createEditorClient<IframeContext extends CoreIframeContext, IframeEvents extends CoreIframeEvents>(iframe: string | HTMLIFrameElement): { [K in keyof IframeContext]: IframeContext[K] extends (...args: any[]) => any ? (...args: Parameters<IframeContext[K]>) => Promise<Awaited<ReturnType<IframeContext[K]>>> : IframeContext[K] extends any[] ? Promise<IframeContext[K]> : IframeContext[K] extends object ? IframeContext[K] extends infer T ? { [K_2 in keyof T]: T[K_2] extends (...args: any[]) => any ? (...args: Parameters<T[K_2]>) => Promise<Awaited<ReturnType<T[K_2]>>> : T[K_2] extends any[] ? Promise<T[K_2]> : T[K_2] extends object ? T[K_2] extends infer T_1 ? { [K_3 in keyof T_1]: T_1[K_3] extends (...args: any[]) => any ? (...args: Parameters<T_1[K_3]>) => Promise<Awaited<ReturnType<T_1[K_3]>>> : T_1[K_3] extends any[] ? Promise<T_1[K_3]> : T_1[K_3] extends object ? T_1[K_3] extends infer T_2 ? { [K_4 in keyof T_2]: T_2[K_4] extends (...args: any[]) => any ? (...args: Parameters<T_2[K_4]>) => Promise<Awaited<ReturnType<T_2[K_4]>>> : T_2[K_4] extends any[] ? Promise<T_2[K_4]> : T_2[K_4] extends object ? T_2[K_4] extends infer T_3 ? { [K_5 in keyof T_3]: T_3[K_5] extends (...args: any[]) => any ? (...args: Parameters<T_3[K_5]>) => Promise<Awaited<ReturnType<T_3[K_5]>>> : T_3[K_5] extends any[] ? Promise<T_3[K_5]> : T_3[K_5] extends object ? T_3[K_5] extends infer T_4 ? { [K_6 in keyof T_4]: T_4[K_6] extends (...args: any[]) => any ? (...args: Parameters<T_4[K_6]>) => Promise<Awaited<ReturnType<T_4[K_6]>>> : T_4[K_6] extends any[] ? Promise<T_4[K_6]> : T_4[K_6] extends object ? T_4[K_6] extends infer T_5 ? { [K_7 in keyof T_5]: T_5[K_7] extends (...args: any[]) => any ? (...args: Parameters<T_5[K_7]>) => Promise<Awaited<ReturnType<T_5[K_7]>>> : T_5[K_7] extends any[] ? Promise<T_5[K_7]> : T_5[K_7] extends object ? T_5[K_7] extends infer T_6 ? { [K_8 in keyof T_6]: T_6[K_8] extends (...args: any[]) => any ? (...args: Parameters<T_6[K_8]>) => Promise<Awaited<ReturnType<T_6[K_8]>>> : T_6[K_8] extends any[] ? Promise<T_6[K_8]> : T_6[K_8] extends object ? T_6[K_8] extends infer T_7 ? { [K_9 in keyof T_7]: T_7[K_9] extends (...args: any[]) => any ? (...args: Parameters<T_7[K_9]>) => Promise<Awaited<ReturnType<T_7[K_9]>>> : T_7[K_9] extends any[] ? Promise<T_7[K_9]> : T_7[K_9] extends object ? T_7[K_9] extends infer T_8 ? { [K_10 in keyof T_8]: T_8[K_10] extends (...args: any[]) => any ? (...args: Parameters<T_8[K_10]>) => Promise<Awaited<ReturnType<T_8[K_10]>>> : T_8[K_10] extends any[] ? Promise<T_8[K_10]> : T_8[K_10] extends object ? T_8[K_10] extends infer T_9 ? { [K_11 in keyof T_9]: T_9[K_11] extends (...args: any[]) => any ? (...args: Parameters<T_9[K_11]>) => Promise<Awaited<ReturnType<T_9[K_11]>>> : T_9[K_11] extends any[] ? Promise<T_9[K_11]> : T_9[K_11] extends object ? /*elided*/ any : Promise<T_9[K_11]>; } : never : Promise<T_8[K_10]>; } : never : Promise<T_7[K_9]>; } : never : Promise<T_6[K_8]>; } : never : Promise<T_5[K_7]>; } : never : Promise<T_4[K_6]>; } : never : Promise<T_3[K_5]>; } : never : Promise<T_2[K_4]>; } : never : Promise<T_1[K_3]>; } : never : Promise<T[K_2]>; } : never : Promise<IframeContext[K]>; } & {
-    $context: EditorContext;
-    on: <E extends keyof IframeEvents>(eventName: E, listener: (...args: IframeEvents[E] extends infer T ? T extends IframeEvents[E] ? T extends (...args: infer A) => any ? A : never : never : never) => void) => void;
-    off: <E extends keyof IframeEvents>(eventName: E, listener: (...args: IframeEvents[E] extends infer T ? T extends IframeEvents[E] ? T extends (...args: infer A) => any ? A : never : never : never) => void) => void;
-    emit: <E extends never>(eventName: E, ...args: EditorEvents[E] extends infer T ? T extends EditorEvents[E] ? T extends (...args: infer A) => any ? A : never : never : never) => void;
-    removeAllListeners: () => void;
-};
+export declare function createEditorClient<IframeContext extends CoreIframeContext, IframeEvents extends CoreIframeEvents>(iframe: string | HTMLIFrameElement): import("@nookuio/rpc").ClientReturn<IframeContext, EditorContext, IframeEvents, EditorEvents>;

package/dist/editor.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createEditorClient = createEditorClient;
 var _constants = require("./constants");
-var _createClient = require("./createClient");
+var _rpc = require("@nookuio/rpc");
 var _telejson = require("telejson");
 function y(a) {
   const n = (0, _telejson.parse)(a, {
@@ -33,7 +33,7 @@ function createEditorClient(a) {
   function r() {
     return (!n || !n.isConnected) && (n = typeof a == "string" ? document.querySelector(`#${a}`) : a), n;
   }
-  return (0, _createClient.createClient)({}, {
+  return (0, _rpc.createClient)({}, {
     handle(e) {
       window.addEventListener("message", async t => {
         if (typeof t.data != "object" || t.data.source !== _constants.IFRAME_SOURCE_NAME || t.data.type === "event" || !t.data.request) return;

package/dist/editor.mjs

@@ -1,5 +1,5 @@
 import { EDITOR_SOURCE_NAME as f, IFRAME_SOURCE_NAME as u } from "./constants.mjs";
-import { createClient as E } from "./createClient.mjs";
+import { createClient as E } from "@nookuio/rpc";
 import { stringify as p, parse as l } from "telejson";
 function y(a) {
   const n = l(a, { maxDepth: 1 / 0 }), r = (e) => {

package/dist/iframe.d.ts

@@ -1,4 +1,4 @@
-import type { CoreIframeContext, EditorEvents, VueIframeContext, VueIframeEvents } from './types';
+import type { CoreIframeContext, EditorContext, EditorEvents, VueIframeContext, VueIframeEvents } from './types';
 /**
  * This function should be called inside the iframe
  */
@@ -9,10 +9,4 @@ export declare function createVueIframeClient(vueCtx: Omit<VueIframeContext, key
      * @default false
      */
     disableDefaultConsole?: boolean;
-}): {} & {
-    $context: VueIframeContext;
-    on: <E extends never>(eventName: E, listener: (...args: EditorEvents[E] extends infer T ? T extends EditorEvents[E] ? T extends (...args: infer A) => any ? A : never : never : never) => void) => void;
-    off: <E extends never>(eventName: E, listener: (...args: EditorEvents[E] extends infer T ? T extends EditorEvents[E] ? T extends (...args: infer A) => any ? A : never : never : never) => void) => void;
-    emit: <E extends keyof VueIframeEvents>(eventName: E, ...args: VueIframeEvents[E] extends infer T ? T extends VueIframeEvents[E] ? T extends (...args: infer A) => any ? A : never : never : never) => void;
-    removeAllListeners: () => void;
-};
+}): import("@nookuio/rpc").ClientReturn<EditorContext, VueIframeContext, EditorEvents, VueIframeEvents>;

package/dist/iframe.js

@@ -5,93 +5,103 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createVueIframeClient = createVueIframeClient;
 var _constants = require("./constants");
-var _createClient = require("./createClient");
+var _rpc = require("@nookuio/rpc");
 var _telejson = require("telejson");
-function b(c, l) {
-  return `[data-node-id="${l}"][data-node-path="${c}"]`;
+var _dragDropManager = require("./drag-drop/dragDropManager");
+function p(m, l) {
+  return `[data-node-id="${l}"][data-node-path="${m}"]`;
 }
-function h(c, l) {
-  const s = document.querySelectorAll(c);
-  if (!s?.length) return;
-  const d = Array.from(s).map(f => {
-    const u = f.getBoundingClientRect(),
+function h(m, l) {
+  const d = document.querySelectorAll(m);
+  if (!d?.length) return;
+  const r = Array.from(d).map(f => {
+    const c = f.getBoundingClientRect(),
       g = {
-        width: u.width,
-        height: u.height,
-        top: u.top,
-        left: u.left
+        width: c.width,
+        height: c.height,
+        top: c.top,
+        left: c.left
       };
     if (!l) return g;
-    const m = window.getComputedStyle(f) ?? {};
+    const u = window.getComputedStyle(f) ?? {};
     return {
       ...g,
       padding: {
-        top: m.paddingTop,
-        right: m.paddingRight,
-        bottom: m.paddingBottom,
-        left: m.paddingLeft
+        top: u.paddingTop,
+        right: u.paddingRight,
+        bottom: u.paddingBottom,
+        left: u.paddingLeft
       }
     };
   });
-  if (d?.length) return d.length === 1 ? d[0] : d;
+  if (r?.length) return r.length === 1 ? r[0] : r;
 }
-function createVueIframeClient(c, l) {
-  const s = (0, _createClient.createClient)({
-      ...c,
+function createVueIframeClient(m, l) {
+  const d = new _dragDropManager.DragDropManager();
+  d.setCallbacks({
+    onDragStart: e => {
+      r.emit("drag-start", e);
+    },
+    onDragEnd: e => {
+      r.emit("drag-end", e);
+    }
+  });
+  const r = (0, _rpc.createClient)({
+      ...m,
       async editText({
         path: e,
         id: t
       }) {
         if (!e || t === void 0) return;
-        const i = b(e, t),
-          n = document.querySelector(i);
+        const a = p(e, t),
+          n = document.querySelector(a);
         if (!n) return;
         n.style.outline = "none", n.setAttribute("spellcheck", "false"), n.setAttribute("contenteditable", "true");
-        const o = a => {
-            const E = a.target;
+        const o = i => {
+            const E = i.target;
             if (!E) return;
             const y = E.innerText;
-            n.removeAttribute("contenteditable"), s.emit("text-update", {
+            n.removeAttribute("contenteditable"), r.emit("text-update", {
               path: e,
               id: t,
               content: y
-            }), n.removeEventListener("blur", o), n.removeEventListener("keydown", r), n.blur();
+            }), n.removeEventListener("blur", o), n.removeEventListener("keydown", s), n.blur();
           },
-          r = a => {
-            a.key === "Enter" && (a.stopPropagation(), a.preventDefault(), o(a));
+          s = i => {
+            i.key === "Enter" && (i.stopPropagation(), i.preventDefault(), o(i));
           };
-        n.addEventListener("keydown", r), n.addEventListener("blur", o), n.focus();
+        n.addEventListener("keydown", s), n.addEventListener("blur", o), n.focus();
       },
       async getHoveredElement({
         path: e,
         id: t,
-        x: i,
+        x: a,
         y: n
       }) {
-        if (e) if (i !== void 0 && n !== void 0) {
-          let o = document.elementFromPoint(i, n);
+        if (e) if (a !== void 0 && n !== void 0) {
+          let o = document.elementFromPoint(a, n);
           if (!o) return;
-          let r = o.getAttribute("data-node-path");
-          if (r !== e) {
+          let s = o.getAttribute("data-node-path");
+          if (s !== e) {
             if (!o.parentElement) return;
-            for (; o.parentElement && r !== e;) o = o.parentElement, r = o.getAttribute("data-node-path");
+            for (; o.parentElement && s !== e;) o = o.parentElement, s = o.getAttribute("data-node-path");
           }
-          const a = o.getAttribute("data-node-id");
-          if (!a) return;
-          const E = b(e, a),
+          const i = o.getAttribute("data-node-id");
+          if (!i) return;
+          const E = p(e, i),
             y = h(E, !1);
           return y ? {
-            id: a,
+            id: i,
             path: e,
             data: y
           } : void 0;
         } else {
-          const o = b(e, t),
-            r = h(o, !1);
-          return r ? {
+          const o = p(e, t),
+            s = h(o, !1);
+          return s ? {
             id: t,
             path: e,
-            data: r
+            data: s
           } : void 0;
         }
       },
@@ -102,35 +112,51 @@ function createVueIframeClient(c, l) {
         path: e,
         id: t
       }) {
-        const i = b(e, t),
-          n = h(i, !0);
+        const a = p(e, t),
+          n = h(a, !0);
         if (n) return {
           path: e,
           id: t,
           data: n
         };
       },
-      toggleTheme(e) {
-        e === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark")) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"));
+      setTheme(e) {
+        const t = document.querySelector("body");
+        e === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark"), t && (t.classList.remove("light"), t.classList.add("dark"))) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"), t && (t.classList.remove("dark"), t.classList.add("light")));
+      },
+      async startDrag(e) {
+        return d.startDrag(e);
+      },
+      async updateDragPosition(e) {
+        return d.updateDragPosition(e);
+      },
+      async endDrag(e) {
+        return d.endDrag(e);
+      },
+      async getDropZones(e) {
+        return d.getDropZones(e);
+      },
+      async highlightDropZone(e) {
+        return d.highlightDropZone(e);
       }
     }, {
       handle(e) {
         window.addEventListener("message", async t => {
           if (typeof t.data != "object" || t.data.source !== _constants.EDITOR_SOURCE_NAME || t.data.type === "event" || !t.data.request) return;
-          const i = await e(t.data.request);
+          const a = await e(t.data.request);
           window.parent.postMessage({
             source: _constants.IFRAME_SOURCE_NAME,
-            response: i
+            response: a
           }, "*");
         });
       },
       invoke(e) {
-        return new Promise((t, i) => {
+        return new Promise((t, a) => {
           const n = setTimeout(() => {
-            window.removeEventListener("message", o), i(new Error("Request timed out"));
+            window.removeEventListener("message", o), a(new Error("Request timed out"));
           }, 5e3);
-          function o(r) {
-            typeof r.data == "object" && (r.data.source !== _constants.EDITOR_SOURCE_NAME || !r.data.response || r.data.response.id === e.id && (clearTimeout(n), window.removeEventListener("message", o), t(r.data.response)));
+          function o(s) {
+            typeof s.data == "object" && (s.data.source !== _constants.EDITOR_SOURCE_NAME || !s.data.response || s.data.response.id === e.id && (clearTimeout(n), window.removeEventListener("message", o), t(s.data.response)));
           }
           window.parent.postMessage({
             source: _constants.IFRAME_SOURCE_NAME,
@@ -155,22 +181,22 @@ function createVueIframeClient(c, l) {
         maxDepth: 1 / 0
       })
     }),
-    d = l?.disableDefaultConsole ? void 0 : console.log.bind(console),
-    f = l?.disableDefaultConsole ? void 0 : console.warn.bind(console),
-    u = l?.disableDefaultConsole ? void 0 : console.error.bind(console),
-    g = l?.disableDefaultConsole ? void 0 : console.info.bind(console);
+    f = l?.disableDefaultConsole ? void 0 : console.log.bind(console),
+    c = l?.disableDefaultConsole ? void 0 : console.warn.bind(console),
+    g = l?.disableDefaultConsole ? void 0 : console.error.bind(console),
+    u = l?.disableDefaultConsole ? void 0 : console.info.bind(console);
   return console.log = (...e) => {
-    s.emit("console", "log", e), d?.(...e);
+    r.emit("console", "log", e), f?.(...e);
   }, console.warn = (...e) => {
-    f?.(...e);
+    c?.(...e);
   }, console.error = (...e) => {
-    s.emit("console", "error", e), u?.(...e);
+    r.emit("console", "error", e), g?.(...e);
   }, console.info = (...e) => {
-    s.emit("console", "info", e), g?.(...e);
-  }, window.addEventListener("resize", async () => s.emit("resize", await s.$context.getPageHeight())), new MutationObserver(async () => s.emit("resize", await s.$context.getPageHeight())).observe(document.body, {
+    r.emit("console", "info", e), u?.(...e);
+  }, window.addEventListener("resize", async () => r.emit("resize", await r.$context.getPageHeight())), new MutationObserver(async () => r.emit("resize", await r.$context.getPageHeight())).observe(document.body, {
     childList: !0,
     subtree: !0,
     attributes: !0,
     characterData: !0
-  }), s.emit("ready"), s;
+  }), r.emit("ready"), r;
 }

package/dist/iframe.mjs

@@ -1,78 +1,88 @@
-import { EDITOR_SOURCE_NAME as p, IFRAME_SOURCE_NAME as w } from "./constants.mjs";
-import { createClient as C } from "./createClient.mjs";
-import { stringify as v, parse as L } from "telejson";
-function b(c, l) {
-  return `[data-node-id="${l}"][data-node-path="${c}"]`;
+import { EDITOR_SOURCE_NAME as b, IFRAME_SOURCE_NAME as w } from "./constants.mjs";
+import { createClient as C } from "@nookuio/rpc";
+import { stringify as D, parse as v } from "telejson";
+import { DragDropManager as L } from "./drag-drop/dragDropManager.mjs";
+function p(m, l) {
+  return `[data-node-id="${l}"][data-node-path="${m}"]`;
 }
-function h(c, l) {
-  const s = document.querySelectorAll(c);
-  if (!s?.length) return;
-  const d = Array.from(s).map((f) => {
-    const u = f.getBoundingClientRect(), g = {
-      width: u.width,
-      height: u.height,
-      top: u.top,
-      left: u.left
+function h(m, l) {
+  const d = document.querySelectorAll(m);
+  if (!d?.length) return;
+  const r = Array.from(d).map((f) => {
+    const c = f.getBoundingClientRect(), g = {
+      width: c.width,
+      height: c.height,
+      top: c.top,
+      left: c.left
     };
     if (!l) return g;
-    const m = window.getComputedStyle(f) ?? {};
+    const u = window.getComputedStyle(f) ?? {};
     return {
       ...g,
       padding: {
-        top: m.paddingTop,
-        right: m.paddingRight,
-        bottom: m.paddingBottom,
-        left: m.paddingLeft
+        top: u.paddingTop,
+        right: u.paddingRight,
+        bottom: u.paddingBottom,
+        left: u.paddingLeft
       }
     };
   });
-  if (d?.length)
-    return d.length === 1 ? d[0] : d;
+  if (r?.length)
+    return r.length === 1 ? r[0] : r;
 }
-export function createVueIframeClient(c, l) {
-  const s = C(
+export function createVueIframeClient(m, l) {
+  const d = new L();
+  d.setCallbacks({
+    onDragStart: (e) => {
+      r.emit("drag-start", e);
+    },
+    onDragEnd: (e) => {
+      r.emit("drag-end", e);
+    }
+  });
+  const r = C(
     {
-      ...c,
+      ...m,
       async editText({ path: e, id: t }) {
         if (!e || t === void 0) return;
-        const i = b(e, t), n = document.querySelector(i);
+        const a = p(e, t), n = document.querySelector(a);
         if (!n) return;
         n.style.outline = "none", n.setAttribute("spellcheck", "false"), n.setAttribute("contenteditable", "true");
-        const o = (a) => {
-          const E = a.target;
+        const o = (i) => {
+          const E = i.target;
           if (!E) return;
           const y = E.innerText;
-          n.removeAttribute("contenteditable"), s.emit("text-update", { path: e, id: t, content: y }), n.removeEventListener("blur", o), n.removeEventListener("keydown", r), n.blur();
-        }, r = (a) => {
-          a.key === "Enter" && (a.stopPropagation(), a.preventDefault(), o(a));
+          n.removeAttribute("contenteditable"), r.emit("text-update", { path: e, id: t, content: y }), n.removeEventListener("blur", o), n.removeEventListener("keydown", s), n.blur();
+        }, s = (i) => {
+          i.key === "Enter" && (i.stopPropagation(), i.preventDefault(), o(i));
         };
-        n.addEventListener("keydown", r), n.addEventListener("blur", o), n.focus();
+        n.addEventListener("keydown", s), n.addEventListener("blur", o), n.focus();
       },
-      async getHoveredElement({ path: e, id: t, x: i, y: n }) {
+      async getHoveredElement({ path: e, id: t, x: a, y: n }) {
         if (e)
-          if (i !== void 0 && n !== void 0) {
-            let o = document.elementFromPoint(i, n);
+          if (a !== void 0 && n !== void 0) {
+            let o = document.elementFromPoint(a, n);
             if (!o) return;
-            let r = o.getAttribute("data-node-path");
-            if (r !== e) {
+            let s = o.getAttribute("data-node-path");
+            if (s !== e) {
               if (!o.parentElement) return;
-              for (; o.parentElement && r !== e; )
-                o = o.parentElement, r = o.getAttribute("data-node-path");
+              for (; o.parentElement && s !== e; )
+                o = o.parentElement, s = o.getAttribute("data-node-path");
             }
-            const a = o.getAttribute("data-node-id");
-            if (!a) return;
-            const E = b(e, a), y = h(E, !1);
+            const i = o.getAttribute("data-node-id");
+            if (!i) return;
+            const E = p(e, i), y = h(E, !1);
             return y ? {
-              id: a,
+              id: i,
               path: e,
               data: y
             } : void 0;
           } else {
-            const o = b(e, t), r = h(o, !1);
-            return r ? {
+            const o = p(e, t), s = h(o, !1);
+            return s ? {
               id: t,
               path: e,
-              data: r
+              data: s
             } : void 0;
           }
       },
@@ -80,7 +90,7 @@ export function createVueIframeClient(c, l) {
         return document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
       },
       async getSelectedElement({ path: e, id: t }) {
-        const i = b(e, t), n = h(i, !0);
+        const a = p(e, t), n = h(a, !0);
         if (n)
           return {
             path: e,
@@ -88,8 +98,25 @@ export function createVueIframeClient(c, l) {
             data: n
           };
       },
-      toggleTheme(e) {
-        e === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark")) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"));
+      setTheme(e) {
+        const t = document.querySelector("body");
+        e === "dark" ? (document.documentElement.classList.remove("light"), document.documentElement.classList.add("dark"), t && (t.classList.remove("light"), t.classList.add("dark"))) : (document.documentElement.classList.remove("dark"), document.documentElement.classList.add("light"), t && (t.classList.remove("dark"), t.classList.add("light")));
+      },
+      // Drag and drop methods
+      async startDrag(e) {
+        return d.startDrag(e);
+      },
+      async updateDragPosition(e) {
+        return d.updateDragPosition(e);
+      },
+      async endDrag(e) {
+        return d.endDrag(e);
+      },
+      async getDropZones(e) {
+        return d.getDropZones(e);
+      },
+      async highlightDropZone(e) {
+        return d.highlightDropZone(e);
       }
       // updateElementClass({ className, id, path }) {
       //   const selector = getSelector(path, id);
@@ -117,18 +144,18 @@ export function createVueIframeClient(c, l) {
     {
       handle(e) {
         window.addEventListener("message", async (t) => {
-          if (typeof t.data != "object" || t.data.source !== p || t.data.type === "event" || !t.data.request) return;
-          const i = await e(t.data.request);
-          window.parent.postMessage({ source: w, response: i }, "*");
+          if (typeof t.data != "object" || t.data.source !== b || t.data.type === "event" || !t.data.request) return;
+          const a = await e(t.data.request);
+          window.parent.postMessage({ source: w, response: a }, "*");
         });
       },
       invoke(e) {
-        return new Promise((t, i) => {
+        return new Promise((t, a) => {
           const n = setTimeout(() => {
-            window.removeEventListener("message", o), i(new Error("Request timed out"));
+            window.removeEventListener("message", o), a(new Error("Request timed out"));
           }, 5e3);
-          function o(r) {
-            typeof r.data == "object" && (r.data.source !== p || !r.data.response || r.data.response.id === e.id && (clearTimeout(n), window.removeEventListener("message", o), t(r.data.response)));
+          function o(s) {
+            typeof s.data == "object" && (s.data.source !== b || !s.data.response || s.data.response.id === e.id && (clearTimeout(n), window.removeEventListener("message", o), t(s.data.response)));
           }
           window.parent.postMessage({ source: w, request: e }, "*"), window.addEventListener("message", o);
         });
@@ -138,23 +165,23 @@ export function createVueIframeClient(c, l) {
       },
       handleEvent(e) {
         window.addEventListener("message", (t) => {
-          typeof t.data == "object" && (t.data.source !== p || t.data.type !== "event" || !t.data.request || e(t.data.request));
+          typeof t.data == "object" && (t.data.source !== b || t.data.type !== "event" || !t.data.request || e(t.data.request));
         });
       },
-      deserialize: (e) => L(e),
-      serialize: (e) => v(e, { maxDepth: 1 / 0 })
+      deserialize: (e) => v(e),
+      serialize: (e) => D(e, { maxDepth: 1 / 0 })
     }
-  ), d = l?.disableDefaultConsole ? void 0 : console.log.bind(console), f = l?.disableDefaultConsole ? void 0 : console.warn.bind(console), u = l?.disableDefaultConsole ? void 0 : console.error.bind(console), g = l?.disableDefaultConsole ? void 0 : console.info.bind(console);
+  ), f = l?.disableDefaultConsole ? void 0 : console.log.bind(console), c = l?.disableDefaultConsole ? void 0 : console.warn.bind(console), g = l?.disableDefaultConsole ? void 0 : console.error.bind(console), u = l?.disableDefaultConsole ? void 0 : console.info.bind(console);
   return console.log = (...e) => {
-    s.emit("console", "log", e), d?.(...e);
+    r.emit("console", "log", e), f?.(...e);
   }, console.warn = (...e) => {
-    f?.(...e);
+    c?.(...e);
   }, console.error = (...e) => {
-    s.emit("console", "error", e), u?.(...e);
+    r.emit("console", "error", e), g?.(...e);
   }, console.info = (...e) => {
-    s.emit("console", "info", e), g?.(...e);
-  }, window.addEventListener("resize", async () => s.emit("resize", await s.$context.getPageHeight())), new MutationObserver(
-    async () => s.emit("resize", await s.$context.getPageHeight())
+    r.emit("console", "info", e), u?.(...e);
+  }, window.addEventListener("resize", async () => r.emit("resize", await r.$context.getPageHeight())), new MutationObserver(
+    async () => r.emit("resize", await r.$context.getPageHeight())
   ).observe(document.body, {
     childList: !0,
     // observe direct children additions/removals
@@ -164,5 +191,5 @@ export function createVueIframeClient(c, l) {
     // observe attribute changes (like style, class)
     characterData: !0
     // observe text changes
-  }), s.emit("ready"), s;
+  }), r.emit("ready"), r;
 }

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from './constants';
 export * from './types';
 export * from './iframe';
 export * from './editor';
+export * from './drag-drop';

package/dist/index.js

@@ -46,4 +46,15 @@ Object.keys(_editor).forEach(function (key) {
       return _editor[key];
     }
   });
+});
+var _dragDrop = require("./drag-drop");
+Object.keys(_dragDrop).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dragDrop[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dragDrop[key];
+    }
+  });
 });

package/dist/index.mjs

@@ -2,3 +2,4 @@ export * from "./constants.mjs";
 export * from "./types.mjs";
 export * from "./iframe.mjs";
 export * from "./editor.mjs";
+export * from "./drag-drop/index.mjs";