@nookuio/iframe 0.9.6 → 0.9.7

package/dist/iframe.mjs

@@ -1,222 +1 @@
-import { EDITOR_SOURCE_NAME, IFRAME_SOURCE_NAME } from "./constants.mjs";
-import { createClient } from "./createClient.mjs";
-import { stringify, parse } from "telejson";
-function getSelector(path, id) {
-  return `[data-node-id="${id}"][data-node-path="${path}"]`;
-}
-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) ?? {};
-    return {
-      ...position,
-      padding: {
-        top: computedStyle.paddingTop,
-        right: computedStyle.paddingRight,
-        bottom: computedStyle.paddingBottom,
-        left: computedStyle.paddingLeft
-      }
-    };
-  });
-  if (!styles?.length) return;
-  return styles.length === 1 ? styles[0] : styles;
-}
-export function createVueIframeClient(vueCtx, options) {
-  const client = 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");
-            }
-          }
-          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() {
-        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 !== EDITOR_SOURCE_NAME || event.data.type === "event" || !event.data.request) return;
-          const response = await handler(event.data.request);
-          window.parent.postMessage({ source: 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 !== 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);
-          }
-          window.parent.postMessage({ source: IFRAME_SOURCE_NAME, request }, "*");
-          window.addEventListener("message", messageHandler);
-        });
-      },
-      emit(request) {
-        window.parent.postMessage({ source: IFRAME_SOURCE_NAME, type: "event", request }, "*");
-      },
-      handleEvent(handleRequest) {
-        window.addEventListener("message", (event) => {
-          if (typeof event.data !== "object") return;
-          if (event.data.source !== EDITOR_SOURCE_NAME || event.data.type !== "event" || !event.data.request) return;
-          handleRequest(event.data.request);
-        });
-      },
-      deserialize: (v) => parse(v),
-      serialize: (v) => 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;
-}
+import{EDITOR_SOURCE_NAME as p,IFRAME_SOURCE_NAME as w}from"./constants";import{createClient as C}from"./createClient";import{stringify as v,parse as L}from"telejson";function b(c,l){return`[data-node-id="${l}"][data-node-path="${c}"]`}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{...g,padding:{top:m.paddingTop,right:m.paddingRight,bottom:m.paddingBottom,left:m.paddingLeft}}});if(d?.length)return d.length===1?d[0]:d}export function createVueIframeClient(c,l){const s=C({...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}},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"))}},{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},"*")})},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!==p||!r.data.response||r.data.response.id===e.id&&(clearTimeout(n),window.removeEventListener("message",o),t(r.data.response)))}window.parent.postMessage({source:w,request:e},"*"),window.addEventListener("message",o)})},emit(e){window.parent.postMessage({source:w,type:"event",request:e},"*")},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))})},deserialize:e=>L(e),serialize:e=>v(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}

package/dist/index.mjs

@@ -1,4 +1 @@
-export * from "./constants.mjs";
-export * from "./types.mjs";
-export * from "./iframe.mjs";
-export * from "./editor.mjs";
+export*from"./constants";export*from"./types";export*from"./iframe";export*from"./editor";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nookuio/iframe",
   "description": "",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {