@nookuio/iframe 0.9.9 → 1.0.0-beta.1

package/dist/drag-drop/utils.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.calculateInsertIndex = calculateInsertIndex;
+exports.canAcceptDrop = canAcceptDrop;
+exports.createDropIndicator = createDropIndicator;
+exports.getDropZones = getDropZones;
+exports.getElement = getElement;
+exports.getElementAtPosition = getElementAtPosition;
+exports.getParentContainer = getParentContainer;
+exports.positionDropIndicator = positionDropIndicator;
+function getElement(t, e) {
+  return document.querySelector(`[data-node-id="${t}"][data-node-path="${e}"]`);
+}
+function getDropZones() {
+  return Array.from(document.querySelectorAll('[data-node-id]:not([data-node-id=""])'));
+}
+function canAcceptDrop(t) {
+  return t.getAttribute("data-node-type") !== "text";
+}
+function getElementAtPosition(t, e, i) {
+  let o = document.elementFromPoint(t, e);
+  if (!o) return null;
+  let r = o.getAttribute("data-node-path");
+  for (; o && r !== i;) {
+    if (o = o.parentElement, !o) return null;
+    r = o.getAttribute("data-node-path");
+  }
+  return o;
+}
+function calculateInsertIndex(t, e, i, o) {
+  const r = Array.from(t.children).filter(n => n.hasAttribute("data-node-id") && n !== o && !n.classList.contains("__nooku-drag-clone"));
+  if (r.length === 0) return {
+    index: 0,
+    before: !0,
+    layout: "block"
+  };
+  const s = r.every((n, d) => {
+      if (d === 0) return !0;
+      const l = r[d - 1].getBoundingClientRect(),
+        u = n.getBoundingClientRect();
+      return Math.abs(l.bottom - u.top) < 10;
+    }),
+    a = s ? "block" : "inline";
+  for (let n = 0; n < r.length; n++) {
+    const l = r[n].getBoundingClientRect();
+    if (s) {
+      const u = l.top + l.height / 2;
+      if (i < u) return {
+        index: n,
+        before: !0,
+        layout: a
+      };
+    } else {
+      const u = l.left + l.width / 2;
+      if (e < u) return {
+        index: n,
+        before: !0,
+        layout: a
+      };
+    }
+  }
+  return {
+    index: r.length,
+    before: !1,
+    layout: a
+  };
+}
+function createDropIndicator(t = "2563EB") {
+  const e = document.createElement("div");
+  return e.className = "__nooku-drop-indicator", e.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+    background: #${t};
+    border-radius: 2px;
+    transition: all 0.1s ease-out;
+    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
+  `, e;
+}
+function positionDropIndicator(t, e, i = "block") {
+  i === "block" ? (t.style.left = `${e.left}px`, t.style.top = `${e.top}px`, t.style.width = `${e.width}px`, t.style.height = "2px") : (t.style.left = `${e.left}px`, t.style.top = `${e.top}px`, t.style.width = "2px", t.style.height = `${e.height}px`);
+}
+function getParentContainer(t) {
+  let e = t.parentElement;
+  for (; e;) {
+    if (e.hasAttribute("data-node-id") && canAcceptDrop(e)) return e;
+    e = e.parentElement;
+  }
+  return null;
+}

package/dist/drag-drop/utils.mjs

@@ -0,0 +1,68 @@
+export function getElement(t, e) {
+  return document.querySelector(`[data-node-id="${t}"][data-node-path="${e}"]`);
+}
+export function getDropZones() {
+  return Array.from(document.querySelectorAll('[data-node-id]:not([data-node-id=""])'));
+}
+export function canAcceptDrop(t) {
+  return t.getAttribute("data-node-type") !== "text";
+}
+export function getElementAtPosition(t, e, i) {
+  let o = document.elementFromPoint(t, e);
+  if (!o) return null;
+  let r = o.getAttribute("data-node-path");
+  for (; o && r !== i; ) {
+    if (o = o.parentElement, !o) return null;
+    r = o.getAttribute("data-node-path");
+  }
+  return o;
+}
+export function calculateInsertIndex(t, e, i, o) {
+  const r = Array.from(t.children).filter(
+    (n) => n.hasAttribute("data-node-id") && n !== o && !n.classList.contains("__nooku-drag-clone")
+  );
+  if (r.length === 0)
+    return { index: 0, before: !0, layout: "block" };
+  const s = r.every((n, d) => {
+    if (d === 0) return !0;
+    const l = r[d - 1].getBoundingClientRect(), u = n.getBoundingClientRect();
+    return Math.abs(l.bottom - u.top) < 10;
+  }), a = s ? "block" : "inline";
+  for (let n = 0; n < r.length; n++) {
+    const l = r[n].getBoundingClientRect();
+    if (s) {
+      const u = l.top + l.height / 2;
+      if (i < u)
+        return { index: n, before: !0, layout: a };
+    } else {
+      const u = l.left + l.width / 2;
+      if (e < u)
+        return { index: n, before: !0, layout: a };
+    }
+  }
+  return { index: r.length, before: !1, layout: a };
+}
+export function createDropIndicator(t = "2563EB") {
+  const e = document.createElement("div");
+  return e.className = "__nooku-drop-indicator", e.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+    background: #${t};
+    border-radius: 2px;
+    transition: all 0.1s ease-out;
+    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
+  `, e;
+}
+export function positionDropIndicator(t, e, i = "block") {
+  i === "block" ? (t.style.left = `${e.left}px`, t.style.top = `${e.top}px`, t.style.width = `${e.width}px`, t.style.height = "2px") : (t.style.left = `${e.left}px`, t.style.top = `${e.top}px`, t.style.width = "2px", t.style.height = `${e.height}px`);
+}
+export function getParentContainer(t) {
+  let e = t.parentElement;
+  for (; e; ) {
+    if (e.hasAttribute("data-node-id") && canAcceptDrop(e))
+      return e;
+    e = e.parentElement;
+  }
+  return null;
+}

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;
 }