@nookuio/iframe 0.9.6 → 0.9.7

package/dist/editor.mjs

@@ -1,95 +1 @@
-import { EDITOR_SOURCE_NAME, IFRAME_SOURCE_NAME } from "./constants.mjs";
-import { createClient } from "./createClient.mjs";
-import { stringify, parse } from "telejson";
-function deserialize(data) {
-  const parsed = parse(data, { maxDepth: Infinity });
-  const senitizeRefs = (obj) => {
-    if (Array.isArray(obj)) {
-      obj.forEach((item, index) => {
-        obj[index] = senitizeRefs(item);
-      });
-    } else if (obj && typeof obj === "object") {
-      if (obj.hasOwnProperty("__v_isRef")) {
-        const newObj = {
-          ...obj,
-          __v_isRef: "true",
-          // converted to string
-          value: obj.hasOwnProperty("value") && obj.value !== void 0 ? obj.value : obj._value ?? obj._rawValue
-        };
-        return newObj;
-      } else {
-        Object.keys(obj).forEach((key) => {
-          obj[key] = senitizeRefs(obj[key]);
-        });
-      }
-    }
-    return obj;
-  };
-  const d = senitizeRefs(parsed);
-  return d;
-}
-export function createEditorClient(iframe) {
-  let iframeElement;
-  function getIframe() {
-    if (!iframeElement || !iframeElement.isConnected) {
-      iframeElement = typeof iframe === "string" ? document.querySelector(`#${iframe}`) : iframe;
-    }
-    return iframeElement;
-  }
-  const client = createClient(
-    {},
-    {
-      handle(handler) {
-        window.addEventListener("message", async (event) => {
-          if (typeof event.data !== "object") return;
-          if (event.data.source !== IFRAME_SOURCE_NAME || event.data.type === "event" || !event.data.request) return;
-          const iframe2 = getIframe();
-          if (!iframe2) return;
-          const response = await handler(event.data.request);
-          iframe2.contentWindow?.postMessage({ source: EDITOR_SOURCE_NAME, response }, "*");
-        });
-      },
-      async invoke(request) {
-        const iframe2 = getIframe();
-        if (!iframe2)
-          return {
-            type: "response",
-            id: request.id,
-            key: request.key,
-            result: void 0
-          };
-        return new Promise((resolve, reject) => {
-          const timeout = setTimeout(() => {
-            window.removeEventListener("message", messageHandler);
-            reject(new Error("Request timed out"));
-          }, 5e3);
-          function messageHandler(event) {
-            if (typeof event.data !== "object") return;
-            if (event.data.source !== IFRAME_SOURCE_NAME || !event.data.response) return;
-            if (event.data.response.id !== request.id) return;
-            clearTimeout(timeout);
-            window.removeEventListener("message", messageHandler);
-            resolve(event.data.response);
-          }
-          iframe2.contentWindow?.postMessage({ source: EDITOR_SOURCE_NAME, request }, "*");
-          window.addEventListener("message", messageHandler);
-        });
-      },
-      emit(request) {
-        const iframe2 = getIframe();
-        if (!iframe2) return;
-        iframe2.contentWindow?.postMessage({ source: EDITOR_SOURCE_NAME, type: "event", request }, "*");
-      },
-      handleEvent(handleRequest) {
-        window.addEventListener("message", (event) => {
-          if (typeof event.data !== "object") return;
-          if (event.data.source !== IFRAME_SOURCE_NAME || event.data.type !== "event" || !event.data.request) return;
-          handleRequest(event.data.request);
-        });
-      },
-      deserialize,
-      serialize: (v) => stringify(v, { maxDepth: Infinity })
-    }
-  );
-  return client;
-}
+import{EDITOR_SOURCE_NAME as f,IFRAME_SOURCE_NAME as u}from"./constants";import{createClient as E}from"./createClient";import{stringify as p,parse as l}from"telejson";function y(a){const n=l(a,{maxDepth:1/0}),r=e=>{if(Array.isArray(e))e.forEach((t,s)=>{e[s]=r(t)});else if(e&&typeof e=="object"){if(e.hasOwnProperty("__v_isRef"))return{...e,__v_isRef:"true",value:e.hasOwnProperty("value")&&e.value!==void 0?e.value:e._value??e._rawValue};Object.keys(e).forEach(t=>{e[t]=r(e[t])})}return e};return r(n)}export function createEditorClient(a){let n;function r(){return(!n||!n.isConnected)&&(n=typeof a=="string"?document.querySelector(`#${a}`):a),n}return E({},{handle(e){window.addEventListener("message",async t=>{if(typeof t.data!="object"||t.data.source!==u||t.data.type==="event"||!t.data.request)return;const s=r();if(!s)return;const o=await e(t.data.request);s.contentWindow?.postMessage({source:f,response:o},"*")})},async invoke(e){const t=r();return t?new Promise((s,o)=>{const c=setTimeout(()=>{window.removeEventListener("message",d),o(new Error("Request timed out"))},5e3);function d(i){typeof i.data=="object"&&(i.data.source!==u||!i.data.response||i.data.response.id===e.id&&(clearTimeout(c),window.removeEventListener("message",d),s(i.data.response)))}t.contentWindow?.postMessage({source:f,request:e},"*"),window.addEventListener("message",d)}):{type:"response",id:e.id,key:e.key,result:void 0}},emit(e){const t=r();t&&t.contentWindow?.postMessage({source:f,type:"event",request:e},"*")},handleEvent(e){window.addEventListener("message",t=>{typeof t.data=="object"&&(t.data.source!==u||t.data.type!=="event"||!t.data.request||e(t.data.request))})},deserialize:y,serialize:e=>p(e,{maxDepth:1/0})})}

package/dist/iframe.js

@@ -7,244 +7,170 @@ exports.createVueIframeClient = createVueIframeClient;
 var _constants = require("./constants");
 var _createClient = require("./createClient");
 var _telejson = require("telejson");
-function getSelector(path, id) {
-  return `[data-node-id="${id}"][data-node-path="${path}"]`;
+function b(c, l) {
+  return `[data-node-id="${l}"][data-node-path="${c}"]`;
 }
-function getElementStyles(selector, withPadding) {
-  const elements = document.querySelectorAll(selector);
-  if (!elements?.length) return;
-  const styles = Array.from(elements).map(element => {
-    const clientRect = element.getBoundingClientRect();
-    const position = {
-      width: clientRect.width,
-      height: clientRect.height,
-      top: clientRect.top,
-      left: clientRect.left
-    };
-    if (!withPadding) return position;
-    const computedStyle = window.getComputedStyle(element) ?? {};
+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
+      };
+    if (!l) return g;
+    const m = window.getComputedStyle(f) ?? {};
     return {
-      ...position,
+      ...g,
       padding: {
-        top: computedStyle.paddingTop,
-        right: computedStyle.paddingRight,
-        bottom: computedStyle.paddingBottom,
-        left: computedStyle.paddingLeft
+        top: m.paddingTop,
+        right: m.paddingRight,
+        bottom: m.paddingBottom,
+        left: m.paddingLeft
       }
     };
   });
-  if (!styles?.length) return;
-  return styles.length === 1 ? styles[0] : styles;
+  if (d?.length) return d.length === 1 ? d[0] : d;
 }
-function createVueIframeClient(vueCtx, options) {
-  const client = (0, _createClient.createClient)({
-    ...vueCtx,
-    async editText({
-      path,
-      id
-    }) {
-      if (!path || id === void 0) return;
-      const selector = getSelector(path, id);
-      const element = document.querySelector(selector);
-      if (!element) return;
-      element.style.outline = "none";
-      element.setAttribute("spellcheck", "false");
-      element.setAttribute("contenteditable", "true");
-      const blurEvtHandler = event => {
-        const elm = event.target;
-        if (!elm) return;
-        const content = elm.innerText;
-        element.removeAttribute("contenteditable");
-        client.emit("text-update", {
-          path,
-          id,
-          content
-        });
-        element.removeEventListener("blur", blurEvtHandler);
-        element.removeEventListener("keydown", keyDownEvtHandler);
-        element.blur();
-      };
-      const keyDownEvtHandler = event => {
-        if (event.key === "Enter") {
-          event.stopPropagation();
-          event.preventDefault();
-          blurEvtHandler(event);
-        }
-      };
-      element.addEventListener("keydown", keyDownEvtHandler);
-      element.addEventListener("blur", blurEvtHandler);
-      element.focus();
-    },
-    async getHoveredElement({
-      path,
-      id,
-      x,
-      y
-    }) {
-      if (!path) return;
-      if (x !== void 0 && y !== void 0) {
-        let element = document.elementFromPoint(x, y);
-        if (!element) return;
-        let elementPath = element.getAttribute("data-node-path");
-        if (elementPath !== path) {
-          if (!element.parentElement) return;
-          while (element.parentElement && elementPath !== path) {
-            element = element.parentElement;
-            elementPath = element.getAttribute("data-node-path");
+function createVueIframeClient(c, l) {
+  const s = (0, _createClient.createClient)({
+      ...c,
+      async editText({
+        path: e,
+        id: t
+      }) {
+        if (!e || t === void 0) return;
+        const i = b(e, t),
+          n = document.querySelector(i);
+        if (!n) return;
+        n.style.outline = "none", n.setAttribute("spellcheck", "false"), n.setAttribute("contenteditable", "true");
+        const o = a => {
+            const E = a.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.addEventListener("keydown", r), n.addEventListener("blur", o), n.focus();
+      },
+      async getHoveredElement({
+        path: e,
+        id: t,
+        x: i,
+        y: n
+      }) {
+        if (e) if (i !== void 0 && n !== void 0) {
+          let o = document.elementFromPoint(i, n);
+          if (!o) return;
+          let r = o.getAttribute("data-node-path");
+          if (r !== e) {
+            if (!o.parentElement) return;
+            for (; o.parentElement && r !== e;) o = o.parentElement, r = o.getAttribute("data-node-path");
           }
+          const a = o.getAttribute("data-node-id");
+          if (!a) return;
+          const E = b(e, a),
+            y = h(E, !1);
+          return y ? {
+            id: a,
+            path: e,
+            data: y
+          } : void 0;
+        } else {
+          const o = b(e, t),
+            r = h(o, !1);
+          return r ? {
+            id: t,
+            path: e,
+            data: r
+          } : void 0;
         }
-        const elementId = element.getAttribute("data-node-id");
-        if (!elementId) return;
-        const selector = getSelector(path, elementId);
-        const styles = getElementStyles(selector, false);
-        if (!styles) return;
-        return {
-          id: elementId,
-          path,
-          data: styles
-        };
-      } else {
-        const selector = getSelector(path, id);
-        const styles = getElementStyles(selector, false);
-        if (!styles) return;
-        return {
-          id,
-          path,
-          data: styles
+      },
+      async getPageHeight() {
+        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);
+        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"));
       }
-    },
-    async getPageHeight() {
-      const height = document.body.scrollHeight > 0 ? document.body.scrollHeight : document.documentElement.scrollHeight;
-      return height;
-    },
-    async getSelectedElement({
-      path,
-      id
-    }) {
-      const selector = getSelector(path, id);
-      const styles = getElementStyles(selector, true);
-      if (!styles) return;
-      return {
-        path,
-        id,
-        data: styles
-      };
-    },
-    toggleTheme(theme) {
-      if (theme === "dark") {
-        document.documentElement.classList.remove("light");
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-        document.documentElement.classList.add("light");
-      }
-    }
-    // updateElementClass({ className, id, path }) {
-    //   const selector = getSelector(path, id);
-    //   const elements = document.querySelectorAll(selector);
-    //   if (!elements?.length) return;
-    //   elements.forEach((elm) => (elm.className = className));
-    // },
-    // updateElementAttribute({ attribute, value, id, path }) {
-    //   const selector = getSelector(path, id);
-    //   const elements = document.querySelectorAll(selector);
-    //   if (!elements?.length) return;
-    //   elements.forEach((elm) => elm.setAttribute(attribute, value));
-    // },
-    // duplicateElement({ id, path }) {
-    //   const selector = getSelector(path, id);
-    //   const elements = document.querySelectorAll(selector);
-    //   if (!elements?.length) return;
-    //   elements.forEach((elm) => {
-    //     const clone = elm.cloneNode(true) as HTMLElement;
-    //     clone.setAttribute('data-node-id', String(Number(clone.getAttribute('data-node-id')!) + 1));
-    //     elm.parentElement?.insertBefore(clone, elm.nextSibling);
-    //   });
-    // }
-  }, {
-    handle(handler) {
-      window.addEventListener("message", async event => {
-        if (typeof event.data !== "object") return;
-        if (event.data.source !== _constants.EDITOR_SOURCE_NAME || event.data.type === "event" || !event.data.request) return;
-        const response = await handler(event.data.request);
-        window.parent.postMessage({
-          source: _constants.IFRAME_SOURCE_NAME,
-          response
-        }, "*");
-      });
-    },
-    invoke(request) {
-      return new Promise((resolve, reject) => {
-        const timeout = setTimeout(() => {
-          window.removeEventListener("message", messageHandler);
-          reject(new Error("Request timed out"));
-        }, 5e3);
-        function messageHandler(event) {
-          if (typeof event.data !== "object") return;
-          if (event.data.source !== _constants.EDITOR_SOURCE_NAME || !event.data.response) return;
-          if (event.data.response.id !== request.id) return;
-          clearTimeout(timeout);
-          window.removeEventListener("message", messageHandler);
-          resolve(event.data.response);
-        }
+    }, {
+      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);
+          window.parent.postMessage({
+            source: _constants.IFRAME_SOURCE_NAME,
+            response: i
+          }, "*");
+        });
+      },
+      invoke(e) {
+        return new Promise((t, i) => {
+          const n = setTimeout(() => {
+            window.removeEventListener("message", o), i(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)));
+          }
+          window.parent.postMessage({
+            source: _constants.IFRAME_SOURCE_NAME,
+            request: e
+          }, "*"), window.addEventListener("message", o);
+        });
+      },
+      emit(e) {
         window.parent.postMessage({
           source: _constants.IFRAME_SOURCE_NAME,
-          request
+          type: "event",
+          request: e
         }, "*");
-        window.addEventListener("message", messageHandler);
-      });
-    },
-    emit(request) {
-      window.parent.postMessage({
-        source: _constants.IFRAME_SOURCE_NAME,
-        type: "event",
-        request
-      }, "*");
-    },
-    handleEvent(handleRequest) {
-      window.addEventListener("message", event => {
-        if (typeof event.data !== "object") return;
-        if (event.data.source !== _constants.EDITOR_SOURCE_NAME || event.data.type !== "event" || !event.data.request) return;
-        handleRequest(event.data.request);
-      });
-    },
-    deserialize: v => (0, _telejson.parse)(v),
-    serialize: v => (0, _telejson.stringify)(v, {
-      maxDepth: Infinity
-    })
-  });
-  const defaultConsoleLog = options?.disableDefaultConsole ? void 0 : console.log.bind(console);
-  const defaultConsoleWarn = options?.disableDefaultConsole ? void 0 : console.warn.bind(console);
-  const defaultConsoleError = options?.disableDefaultConsole ? void 0 : console.error.bind(console);
-  const defaultConsoleInfo = options?.disableDefaultConsole ? void 0 : console.info.bind(console);
-  console.log = (...args) => {
-    client.emit("console", "log", args);
-    defaultConsoleLog?.(...args);
-  };
-  console.warn = (...args) => {
-    defaultConsoleWarn?.(...args);
-  };
-  console.error = (...args) => {
-    client.emit("console", "error", args);
-    defaultConsoleError?.(...args);
-  };
-  console.info = (...args) => {
-    client.emit("console", "info", args);
-    defaultConsoleInfo?.(...args);
-  };
-  window.addEventListener("resize", async () => client.emit("resize", await client.$context.getPageHeight()));
-  const mutationObserver = new MutationObserver(async () => client.emit("resize", await client.$context.getPageHeight()));
-  mutationObserver.observe(document.body, {
-    childList: true,
-    // observe direct children additions/removals
-    subtree: true,
-    // observe all descendants
-    attributes: true,
-    // observe attribute changes (like style, class)
-    characterData: true
-    // observe text changes
-  });
-  client.emit("ready");
-  return client;
+      },
+      handleEvent(e) {
+        window.addEventListener("message", t => {
+          typeof t.data == "object" && (t.data.source !== _constants.EDITOR_SOURCE_NAME || t.data.type !== "event" || !t.data.request || e(t.data.request));
+        });
+      },
+      deserialize: e => (0, _telejson.parse)(e),
+      serialize: e => (0, _telejson.stringify)(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);
+  return console.log = (...e) => {
+    s.emit("console", "log", e), d?.(...e);
+  }, console.warn = (...e) => {
+    f?.(...e);
+  }, console.error = (...e) => {
+    s.emit("console", "error", e), u?.(...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, {
+    childList: !0,
+    subtree: !0,
+    attributes: !0,
+    characterData: !0
+  }), s.emit("ready"), s;
 }