@nookuio/iframe 1.0.2 → 1.0.4

package/dist/iframe.js

@@ -7,19 +7,19 @@ exports.createVueIframeClient = createVueIframeClient;
 var _constants = require("./constants");
 var _rpc = require("@nookuio/rpc");
 var _telejson = require("telejson");
-function u(c, a) {
+function m(c, a) {
   return `[data-node-id="${a}"][data-node-path="${c}"]`;
 }
-function y(c, a) {
+function g(c, a) {
   const n = document.querySelectorAll(c);
   if (!n?.length) return;
   const t = Array.from(n).map(d => {
-    const o = d.getBoundingClientRect(),
+    const r = d.getBoundingClientRect(),
       s = {
-        width: o.width,
-        height: o.height,
-        top: o.top,
-        left: o.left
+        width: r.width,
+        height: r.height,
+        top: r.top,
+        left: r.left
       };
     if (!a) return s;
     const i = window.getComputedStyle(d) ?? {};
@@ -45,33 +45,33 @@ function C(c) {
       id: t
     }) {
       if (!n || t === void 0) return;
-      const d = u(n, t),
-        o = document.querySelector(d);
-      if (!o) return;
-      o.style.outline = "none", o.setAttribute("spellcheck", "false"), o.setAttribute("contenteditable", "true");
+      const d = m(n, t),
+        r = document.querySelector(d);
+      if (!r) return;
+      r.style.outline = "none", r.setAttribute("spellcheck", "false"), r.setAttribute("contenteditable", "true");
       const s = l => {
           const e = l.target;
           if (!e) return;
-          const r = e.innerText;
-          o.removeAttribute("contenteditable"), c?.onTextUpdate?.({
+          const o = e.innerText;
+          r.removeAttribute("contenteditable"), c?.onTextUpdate?.({
             path: n,
             id: t,
-            content: r
-          }), o.removeEventListener("blur", s), o.removeEventListener("keydown", i), o.blur();
+            content: o
+          }), r.removeEventListener("blur", s), r.removeEventListener("keydown", i), r.blur();
         },
         i = l => {
           l.key === "Enter" && (l.stopPropagation(), l.preventDefault(), s(l));
         };
-      o.addEventListener("keydown", i), o.addEventListener("blur", s), o.focus();
+      r.addEventListener("keydown", i), r.addEventListener("blur", s), r.focus();
     },
     async getHoveredElement({
       path: n,
       id: t,
       x: d,
-      y: o
+      y: r
     }) {
-      if (n) if (d !== void 0 && o !== void 0) {
-        let s = document.elementFromPoint(d, o);
+      if (n) if (d !== void 0 && r !== void 0) {
+        let s = document.elementFromPoint(d, r);
         if (!s) return;
         let i = s.getAttribute("data-node-path");
         if (i !== n) {
@@ -80,16 +80,16 @@ function C(c) {
         }
         const l = s.getAttribute("data-node-id");
         if (!l) return;
-        const e = u(n, l),
-          r = y(e, !1);
-        return r ? {
+        const e = m(n, l),
+          o = g(e, !1);
+        return o ? {
           id: l,
           path: n,
-          data: r
+          data: o
         } : void 0;
       } else {
-        const s = u(n, t),
-          i = y(s, !1);
+        const s = m(n, t),
+          i = g(s, !1);
         return i ? {
           id: t,
           path: n,
@@ -97,17 +97,19 @@ function C(c) {
         } : void 0;
       }
     },
-    getPageHeight: a,
+    async getPageHeight() {
+      return await a();
+    },
     async getSelectedElement({
       path: n,
       id: t
     }) {
-      const d = u(n, t),
-        o = y(d, !0);
-      if (o) return {
+      const d = m(n, t),
+        r = g(d, !0);
+      if (r) return {
         path: n,
         id: t,
-        data: o
+        data: r
       };
     },
     setTheme(n) {
@@ -123,8 +125,21 @@ function createVueIframeClient(c, a) {
   const n = new Map();
   window.addEventListener("message", async e => {
     if (typeof e.data != "object" || e.data.source !== _constants.EDITOR_SOURCE_NAME || e.data.type === "event" || !e.data.response) return;
-    const r = n.get(e.data.response.id);
-    r && (n.delete(e.data.response.id), r(e.data.response));
+    const o = n.get(e.data.response.id);
+    o && (n.delete(e.data.response.id), o(e.data.response));
+  }), window.addEventListener("keydown", e => {
+    if (!t) return;
+    const o = document.activeElement,
+      u = o?.isContentEditable || o?.tagName === "INPUT" || o?.tagName === "TEXTAREA";
+    t.emit("keydown", {
+      key: e.key,
+      ctrlKey: e.ctrlKey,
+      shiftKey: e.shiftKey,
+      altKey: e.altKey,
+      metaKey: e.metaKey,
+      repeat: e.repeat,
+      inputFocused: u
+    });
   });
   const t = (0, _rpc.createClient)({
       ...C({
@@ -134,20 +149,20 @@ function createVueIframeClient(c, a) {
       ...c
     }, {
       handle(e) {
-        window.addEventListener("message", async r => {
-          if (typeof r.data != "object" || r.data.source !== _constants.EDITOR_SOURCE_NAME || r.data.type === "event" || !r.data.request) return;
-          const m = await e(r.data.request);
+        window.addEventListener("message", async o => {
+          if (typeof o.data != "object" || o.data.source !== _constants.EDITOR_SOURCE_NAME || o.data.type === "event" || !o.data.request) return;
+          const u = await e(o.data.request);
           window.parent.postMessage({
             source: _constants.IFRAME_SOURCE_NAME,
-            response: m
+            response: u
           }, "*");
         });
       },
       invoke(e) {
-        return new Promise((r, m) => {
-          const E = setTimeout(() => m(new Error("Request timed out")), 5e3);
+        return new Promise((o, u) => {
+          const E = setTimeout(() => u(new Error("Request timed out")), 5e3);
           n.set(e.id, p => {
-            clearTimeout(E), r(p);
+            clearTimeout(E), o(p);
           }), window.parent.postMessage({
             source: _constants.IFRAME_SOURCE_NAME,
             request: e
@@ -162,8 +177,8 @@ function createVueIframeClient(c, a) {
         }, "*");
       },
       handleEvent(e) {
-        window.addEventListener("message", r => {
-          typeof r.data == "object" && (r.data.source !== _constants.EDITOR_SOURCE_NAME || r.data.type !== "event" || !r.data.request || e(r.data.request));
+        window.addEventListener("message", o => {
+          typeof o.data == "object" && (o.data.source !== _constants.EDITOR_SOURCE_NAME || o.data.type !== "event" || !o.data.request || e(o.data.request));
         });
       },
       destroy() {
@@ -176,13 +191,13 @@ function createVueIframeClient(c, a) {
       timeout: 5e3
     }),
     d = a?.disableDefaultConsole ? void 0 : console.log.bind(console),
-    o = a?.disableDefaultConsole ? void 0 : console.warn.bind(console),
+    r = a?.disableDefaultConsole ? void 0 : console.warn.bind(console),
     s = a?.disableDefaultConsole ? void 0 : console.error.bind(console),
     i = a?.disableDefaultConsole ? void 0 : console.info.bind(console);
   return console.log = (...e) => {
     t.emit("console", "log", e), d?.(...e);
   }, console.warn = (...e) => {
-    o?.(...e);
+    r?.(...e);
   }, console.error = (...e) => {
     t.emit("console", "error", e), s?.(...e);
   }, console.info = (...e) => {

package/dist/iframe.mjs

@@ -1,18 +1,18 @@
-import { EDITOR_SOURCE_NAME as f, IFRAME_SOURCE_NAME as g } from "./constants.mjs";
+import { EDITOR_SOURCE_NAME as f, IFRAME_SOURCE_NAME as y } from "./constants.mjs";
 import { createClient as b } from "@nookuio/rpc";
-import { stringify as h, parse as w } from "telejson";
-function u(c, a) {
+import { stringify as w, parse as h } from "telejson";
+function m(c, a) {
   return `[data-node-id="${a}"][data-node-path="${c}"]`;
 }
-function y(c, a) {
+function g(c, a) {
   const n = document.querySelectorAll(c);
   if (!n?.length) return;
   const t = Array.from(n).map((d) => {
-    const o = d.getBoundingClientRect(), s = {
-      width: o.width,
-      height: o.height,
-      top: o.top,
-      left: o.left
+    const r = d.getBoundingClientRect(), s = {
+      width: r.width,
+      height: r.height,
+      top: r.top,
+      left: r.left
     };
     if (!a) return s;
     const i = window.getComputedStyle(d) ?? {};
@@ -36,23 +36,23 @@ function C(c) {
   return {
     async editText({ path: n, id: t }) {
       if (!n || t === void 0) return;
-      const d = u(n, t), o = document.querySelector(d);
-      if (!o) return;
-      o.style.outline = "none", o.setAttribute("spellcheck", "false"), o.setAttribute("contenteditable", "true");
+      const d = m(n, t), r = document.querySelector(d);
+      if (!r) return;
+      r.style.outline = "none", r.setAttribute("spellcheck", "false"), r.setAttribute("contenteditable", "true");
       const s = (l) => {
         const e = l.target;
         if (!e) return;
-        const r = e.innerText;
-        o.removeAttribute("contenteditable"), c?.onTextUpdate?.({ path: n, id: t, content: r }), o.removeEventListener("blur", s), o.removeEventListener("keydown", i), o.blur();
+        const o = e.innerText;
+        r.removeAttribute("contenteditable"), c?.onTextUpdate?.({ path: n, id: t, content: o }), r.removeEventListener("blur", s), r.removeEventListener("keydown", i), r.blur();
       }, i = (l) => {
         l.key === "Enter" && (l.stopPropagation(), l.preventDefault(), s(l));
       };
-      o.addEventListener("keydown", i), o.addEventListener("blur", s), o.focus();
+      r.addEventListener("keydown", i), r.addEventListener("blur", s), r.focus();
     },
-    async getHoveredElement({ path: n, id: t, x: d, y: o }) {
+    async getHoveredElement({ path: n, id: t, x: d, y: r }) {
       if (n)
-        if (d !== void 0 && o !== void 0) {
-          let s = document.elementFromPoint(d, o);
+        if (d !== void 0 && r !== void 0) {
+          let s = document.elementFromPoint(d, r);
           if (!s) return;
           let i = s.getAttribute("data-node-path");
           if (i !== n) {
@@ -62,14 +62,14 @@ function C(c) {
           }
           const l = s.getAttribute("data-node-id");
           if (!l) return;
-          const e = u(n, l), r = y(e, !1);
-          return r ? {
+          const e = m(n, l), o = g(e, !1);
+          return o ? {
             id: l,
             path: n,
-            data: r
+            data: o
           } : void 0;
         } else {
-          const s = u(n, t), i = y(s, !1);
+          const s = m(n, t), i = g(s, !1);
           return i ? {
             id: t,
             path: n,
@@ -77,14 +77,16 @@ function C(c) {
           } : void 0;
         }
     },
-    getPageHeight: a,
+    async getPageHeight() {
+      return await a();
+    },
     async getSelectedElement({ path: n, id: t }) {
-      const d = u(n, t), o = y(d, !0);
-      if (o)
+      const d = m(n, t), r = g(d, !0);
+      if (r)
         return {
           path: n,
           id: t,
-          data: o
+          data: r
         };
     },
     setTheme(n) {
@@ -122,8 +124,20 @@ export function createVueIframeClient(c, a) {
   const n = /* @__PURE__ */ new Map();
   window.addEventListener("message", async (e) => {
     if (typeof e.data != "object" || e.data.source !== f || e.data.type === "event" || !e.data.response) return;
-    const r = n.get(e.data.response.id);
-    r && (n.delete(e.data.response.id), r(e.data.response));
+    const o = n.get(e.data.response.id);
+    o && (n.delete(e.data.response.id), o(e.data.response));
+  }), window.addEventListener("keydown", (e) => {
+    if (!t) return;
+    const o = document.activeElement, u = o?.isContentEditable || o?.tagName === "INPUT" || o?.tagName === "TEXTAREA";
+    t.emit("keydown", {
+      key: e.key,
+      ctrlKey: e.ctrlKey,
+      shiftKey: e.shiftKey,
+      altKey: e.altKey,
+      metaKey: e.metaKey,
+      repeat: e.repeat,
+      inputFocused: u
+    });
   });
   const t = b(
     {
@@ -135,40 +149,40 @@ export function createVueIframeClient(c, a) {
     },
     {
       handle(e) {
-        window.addEventListener("message", async (r) => {
-          if (typeof r.data != "object" || r.data.source !== f || r.data.type === "event" || !r.data.request) return;
-          const m = await e(r.data.request);
-          window.parent.postMessage({ source: g, response: m }, "*");
+        window.addEventListener("message", async (o) => {
+          if (typeof o.data != "object" || o.data.source !== f || o.data.type === "event" || !o.data.request) return;
+          const u = await e(o.data.request);
+          window.parent.postMessage({ source: y, response: u }, "*");
         });
       },
       invoke(e) {
-        return new Promise((r, m) => {
-          const E = setTimeout(() => m(new Error("Request timed out")), 5e3);
+        return new Promise((o, u) => {
+          const E = setTimeout(() => u(new Error("Request timed out")), 5e3);
           n.set(e.id, (p) => {
-            clearTimeout(E), r(p);
-          }), window.parent.postMessage({ source: g, request: e }, "*");
+            clearTimeout(E), o(p);
+          }), window.parent.postMessage({ source: y, request: e }, "*");
         });
       },
       emit(e) {
-        window.parent.postMessage({ source: g, type: "event", request: e }, "*");
+        window.parent.postMessage({ source: y, type: "event", request: e }, "*");
       },
       handleEvent(e) {
-        window.addEventListener("message", (r) => {
-          typeof r.data == "object" && (r.data.source !== f || r.data.type !== "event" || !r.data.request || e(r.data.request));
+        window.addEventListener("message", (o) => {
+          typeof o.data == "object" && (o.data.source !== f || o.data.type !== "event" || !o.data.request || e(o.data.request));
         });
       },
       destroy() {
         n.clear();
       },
-      deserialize: (e) => w(e),
-      serialize: (e) => h(e, { maxDepth: 1 / 0 }),
+      deserialize: (e) => h(e),
+      serialize: (e) => w(e, { maxDepth: 1 / 0 }),
       timeout: 5e3
     }
-  ), d = a?.disableDefaultConsole ? void 0 : console.log.bind(console), o = a?.disableDefaultConsole ? void 0 : console.warn.bind(console), s = a?.disableDefaultConsole ? void 0 : console.error.bind(console), i = a?.disableDefaultConsole ? void 0 : console.info.bind(console);
+  ), d = a?.disableDefaultConsole ? void 0 : console.log.bind(console), r = a?.disableDefaultConsole ? void 0 : console.warn.bind(console), s = a?.disableDefaultConsole ? void 0 : console.error.bind(console), i = a?.disableDefaultConsole ? void 0 : console.info.bind(console);
   return console.log = (...e) => {
     t.emit("console", "log", e), d?.(...e);
   }, console.warn = (...e) => {
-    o?.(...e);
+    r?.(...e);
   }, console.error = (...e) => {
     t.emit("console", "error", e), s?.(...e);
   }, console.info = (...e) => {

package/dist/types.d.ts

@@ -53,6 +53,16 @@ export interface CoreIframeEvents extends RpcEvents {
         id: string;
         content: string;
     }) => void;
+    keydown: (event: {
+        key: string;
+        ctrlKey: boolean;
+        shiftKey: boolean;
+        altKey: boolean;
+        metaKey: boolean;
+        repeat: boolean;
+        /** Is `true` if the focused element is an input, textarea, or contenteditable element */
+        inputFocused: boolean;
+    }) => void;
 }
 export interface VueIframeContext extends Omit<CoreIframeContext, 'updateCode'> {
     navigateTo: (to: string) => void;

package/package.json

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