@nookuio/iframe 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/iframe.js +55 -42
  2. package/dist/iframe.mjs +54 -42
  3. package/dist/types.d.ts +11 -0
  4. package/package.json +1 -1
package/dist/iframe.js CHANGED
@@ -7,19 +7,19 @@ exports.createVueIframeClient = createVueIframeClient;
7
7
  var _constants = require("./constants");
8
8
  var _rpc = require("@nookuio/rpc");
9
9
  var _telejson = require("telejson");
10
- function u(c, a) {
10
+ function m(c, a) {
11
11
  return `[data-node-id="${a}"][data-node-path="${c}"]`;
12
12
  }
13
- function y(c, a) {
13
+ function g(c, a) {
14
14
  const n = document.querySelectorAll(c);
15
15
  if (!n?.length) return;
16
16
  const t = Array.from(n).map(d => {
17
- const o = d.getBoundingClientRect(),
17
+ const r = d.getBoundingClientRect(),
18
18
  s = {
19
- width: o.width,
20
- height: o.height,
21
- top: o.top,
22
- left: o.left
19
+ width: r.width,
20
+ height: r.height,
21
+ top: r.top,
22
+ left: r.left
23
23
  };
24
24
  if (!a) return s;
25
25
  const i = window.getComputedStyle(d) ?? {};
@@ -45,33 +45,33 @@ function C(c) {
45
45
  id: t
46
46
  }) {
47
47
  if (!n || t === void 0) return;
48
- const d = u(n, t),
49
- o = document.querySelector(d);
50
- if (!o) return;
51
- o.style.outline = "none", o.setAttribute("spellcheck", "false"), o.setAttribute("contenteditable", "true");
48
+ const d = m(n, t),
49
+ r = document.querySelector(d);
50
+ if (!r) return;
51
+ r.style.outline = "none", r.setAttribute("spellcheck", "false"), r.setAttribute("contenteditable", "true");
52
52
  const s = l => {
53
53
  const e = l.target;
54
54
  if (!e) return;
55
- const r = e.innerText;
56
- o.removeAttribute("contenteditable"), c?.onTextUpdate?.({
55
+ const o = e.innerText;
56
+ r.removeAttribute("contenteditable"), c?.onTextUpdate?.({
57
57
  path: n,
58
58
  id: t,
59
- content: r
60
- }), o.removeEventListener("blur", s), o.removeEventListener("keydown", i), o.blur();
59
+ content: o
60
+ }), r.removeEventListener("blur", s), r.removeEventListener("keydown", i), r.blur();
61
61
  },
62
62
  i = l => {
63
63
  l.key === "Enter" && (l.stopPropagation(), l.preventDefault(), s(l));
64
64
  };
65
- o.addEventListener("keydown", i), o.addEventListener("blur", s), o.focus();
65
+ r.addEventListener("keydown", i), r.addEventListener("blur", s), r.focus();
66
66
  },
67
67
  async getHoveredElement({
68
68
  path: n,
69
69
  id: t,
70
70
  x: d,
71
- y: o
71
+ y: r
72
72
  }) {
73
- if (n) if (d !== void 0 && o !== void 0) {
74
- let s = document.elementFromPoint(d, o);
73
+ if (n) if (d !== void 0 && r !== void 0) {
74
+ let s = document.elementFromPoint(d, r);
75
75
  if (!s) return;
76
76
  let i = s.getAttribute("data-node-path");
77
77
  if (i !== n) {
@@ -80,16 +80,16 @@ function C(c) {
80
80
  }
81
81
  const l = s.getAttribute("data-node-id");
82
82
  if (!l) return;
83
- const e = u(n, l),
84
- r = y(e, !1);
85
- return r ? {
83
+ const e = m(n, l),
84
+ o = g(e, !1);
85
+ return o ? {
86
86
  id: l,
87
87
  path: n,
88
- data: r
88
+ data: o
89
89
  } : void 0;
90
90
  } else {
91
- const s = u(n, t),
92
- i = y(s, !1);
91
+ const s = m(n, t),
92
+ i = g(s, !1);
93
93
  return i ? {
94
94
  id: t,
95
95
  path: n,
@@ -102,12 +102,12 @@ function C(c) {
102
102
  path: n,
103
103
  id: t
104
104
  }) {
105
- const d = u(n, t),
106
- o = y(d, !0);
107
- if (o) return {
105
+ const d = m(n, t),
106
+ r = g(d, !0);
107
+ if (r) return {
108
108
  path: n,
109
109
  id: t,
110
- data: o
110
+ data: r
111
111
  };
112
112
  },
113
113
  setTheme(n) {
@@ -123,8 +123,21 @@ function createVueIframeClient(c, a) {
123
123
  const n = new Map();
124
124
  window.addEventListener("message", async e => {
125
125
  if (typeof e.data != "object" || e.data.source !== _constants.EDITOR_SOURCE_NAME || e.data.type === "event" || !e.data.response) return;
126
- const r = n.get(e.data.response.id);
127
- r && (n.delete(e.data.response.id), r(e.data.response));
126
+ const o = n.get(e.data.response.id);
127
+ o && (n.delete(e.data.response.id), o(e.data.response));
128
+ }), window.addEventListener("keydown", e => {
129
+ if (!t) return;
130
+ const o = document.activeElement,
131
+ u = o?.isContentEditable || o?.tagName === "INPUT" || o?.tagName === "TEXTAREA";
132
+ t.emit("keydown", {
133
+ key: e.key,
134
+ ctrlKey: e.ctrlKey,
135
+ shiftKey: e.shiftKey,
136
+ altKey: e.altKey,
137
+ metaKey: e.metaKey,
138
+ repeat: e.repeat,
139
+ inputFocused: u
140
+ });
128
141
  });
129
142
  const t = (0, _rpc.createClient)({
130
143
  ...C({
@@ -134,20 +147,20 @@ function createVueIframeClient(c, a) {
134
147
  ...c
135
148
  }, {
136
149
  handle(e) {
137
- window.addEventListener("message", async r => {
138
- if (typeof r.data != "object" || r.data.source !== _constants.EDITOR_SOURCE_NAME || r.data.type === "event" || !r.data.request) return;
139
- const m = await e(r.data.request);
150
+ window.addEventListener("message", async o => {
151
+ if (typeof o.data != "object" || o.data.source !== _constants.EDITOR_SOURCE_NAME || o.data.type === "event" || !o.data.request) return;
152
+ const u = await e(o.data.request);
140
153
  window.parent.postMessage({
141
154
  source: _constants.IFRAME_SOURCE_NAME,
142
- response: m
155
+ response: u
143
156
  }, "*");
144
157
  });
145
158
  },
146
159
  invoke(e) {
147
- return new Promise((r, m) => {
148
- const E = setTimeout(() => m(new Error("Request timed out")), 5e3);
160
+ return new Promise((o, u) => {
161
+ const E = setTimeout(() => u(new Error("Request timed out")), 5e3);
149
162
  n.set(e.id, p => {
150
- clearTimeout(E), r(p);
163
+ clearTimeout(E), o(p);
151
164
  }), window.parent.postMessage({
152
165
  source: _constants.IFRAME_SOURCE_NAME,
153
166
  request: e
@@ -162,8 +175,8 @@ function createVueIframeClient(c, a) {
162
175
  }, "*");
163
176
  },
164
177
  handleEvent(e) {
165
- window.addEventListener("message", r => {
166
- typeof r.data == "object" && (r.data.source !== _constants.EDITOR_SOURCE_NAME || r.data.type !== "event" || !r.data.request || e(r.data.request));
178
+ window.addEventListener("message", o => {
179
+ typeof o.data == "object" && (o.data.source !== _constants.EDITOR_SOURCE_NAME || o.data.type !== "event" || !o.data.request || e(o.data.request));
167
180
  });
168
181
  },
169
182
  destroy() {
@@ -176,13 +189,13 @@ function createVueIframeClient(c, a) {
176
189
  timeout: 5e3
177
190
  }),
178
191
  d = a?.disableDefaultConsole ? void 0 : console.log.bind(console),
179
- o = a?.disableDefaultConsole ? void 0 : console.warn.bind(console),
192
+ r = a?.disableDefaultConsole ? void 0 : console.warn.bind(console),
180
193
  s = a?.disableDefaultConsole ? void 0 : console.error.bind(console),
181
194
  i = a?.disableDefaultConsole ? void 0 : console.info.bind(console);
182
195
  return console.log = (...e) => {
183
196
  t.emit("console", "log", e), d?.(...e);
184
197
  }, console.warn = (...e) => {
185
- o?.(...e);
198
+ r?.(...e);
186
199
  }, console.error = (...e) => {
187
200
  t.emit("console", "error", e), s?.(...e);
188
201
  }, console.info = (...e) => {
package/dist/iframe.mjs CHANGED
@@ -1,18 +1,18 @@
1
- import { EDITOR_SOURCE_NAME as f, IFRAME_SOURCE_NAME as g } from "./constants.mjs";
1
+ import { EDITOR_SOURCE_NAME as f, IFRAME_SOURCE_NAME as y } from "./constants.mjs";
2
2
  import { createClient as b } from "@nookuio/rpc";
3
- import { stringify as h, parse as w } from "telejson";
4
- function u(c, a) {
3
+ import { stringify as w, parse as h } from "telejson";
4
+ function m(c, a) {
5
5
  return `[data-node-id="${a}"][data-node-path="${c}"]`;
6
6
  }
7
- function y(c, a) {
7
+ function g(c, a) {
8
8
  const n = document.querySelectorAll(c);
9
9
  if (!n?.length) return;
10
10
  const t = Array.from(n).map((d) => {
11
- const o = d.getBoundingClientRect(), s = {
12
- width: o.width,
13
- height: o.height,
14
- top: o.top,
15
- left: o.left
11
+ const r = d.getBoundingClientRect(), s = {
12
+ width: r.width,
13
+ height: r.height,
14
+ top: r.top,
15
+ left: r.left
16
16
  };
17
17
  if (!a) return s;
18
18
  const i = window.getComputedStyle(d) ?? {};
@@ -36,23 +36,23 @@ function C(c) {
36
36
  return {
37
37
  async editText({ path: n, id: t }) {
38
38
  if (!n || t === void 0) return;
39
- const d = u(n, t), o = document.querySelector(d);
40
- if (!o) return;
41
- o.style.outline = "none", o.setAttribute("spellcheck", "false"), o.setAttribute("contenteditable", "true");
39
+ const d = m(n, t), r = document.querySelector(d);
40
+ if (!r) return;
41
+ r.style.outline = "none", r.setAttribute("spellcheck", "false"), r.setAttribute("contenteditable", "true");
42
42
  const s = (l) => {
43
43
  const e = l.target;
44
44
  if (!e) return;
45
- const r = e.innerText;
46
- o.removeAttribute("contenteditable"), c?.onTextUpdate?.({ path: n, id: t, content: r }), o.removeEventListener("blur", s), o.removeEventListener("keydown", i), o.blur();
45
+ const o = e.innerText;
46
+ r.removeAttribute("contenteditable"), c?.onTextUpdate?.({ path: n, id: t, content: o }), r.removeEventListener("blur", s), r.removeEventListener("keydown", i), r.blur();
47
47
  }, i = (l) => {
48
48
  l.key === "Enter" && (l.stopPropagation(), l.preventDefault(), s(l));
49
49
  };
50
- o.addEventListener("keydown", i), o.addEventListener("blur", s), o.focus();
50
+ r.addEventListener("keydown", i), r.addEventListener("blur", s), r.focus();
51
51
  },
52
- async getHoveredElement({ path: n, id: t, x: d, y: o }) {
52
+ async getHoveredElement({ path: n, id: t, x: d, y: r }) {
53
53
  if (n)
54
- if (d !== void 0 && o !== void 0) {
55
- let s = document.elementFromPoint(d, o);
54
+ if (d !== void 0 && r !== void 0) {
55
+ let s = document.elementFromPoint(d, r);
56
56
  if (!s) return;
57
57
  let i = s.getAttribute("data-node-path");
58
58
  if (i !== n) {
@@ -62,14 +62,14 @@ function C(c) {
62
62
  }
63
63
  const l = s.getAttribute("data-node-id");
64
64
  if (!l) return;
65
- const e = u(n, l), r = y(e, !1);
66
- return r ? {
65
+ const e = m(n, l), o = g(e, !1);
66
+ return o ? {
67
67
  id: l,
68
68
  path: n,
69
- data: r
69
+ data: o
70
70
  } : void 0;
71
71
  } else {
72
- const s = u(n, t), i = y(s, !1);
72
+ const s = m(n, t), i = g(s, !1);
73
73
  return i ? {
74
74
  id: t,
75
75
  path: n,
@@ -79,12 +79,12 @@ function C(c) {
79
79
  },
80
80
  getPageHeight: a,
81
81
  async getSelectedElement({ path: n, id: t }) {
82
- const d = u(n, t), o = y(d, !0);
83
- if (o)
82
+ const d = m(n, t), r = g(d, !0);
83
+ if (r)
84
84
  return {
85
85
  path: n,
86
86
  id: t,
87
- data: o
87
+ data: r
88
88
  };
89
89
  },
90
90
  setTheme(n) {
@@ -122,8 +122,20 @@ export function createVueIframeClient(c, a) {
122
122
  const n = /* @__PURE__ */ new Map();
123
123
  window.addEventListener("message", async (e) => {
124
124
  if (typeof e.data != "object" || e.data.source !== f || e.data.type === "event" || !e.data.response) return;
125
- const r = n.get(e.data.response.id);
126
- r && (n.delete(e.data.response.id), r(e.data.response));
125
+ const o = n.get(e.data.response.id);
126
+ o && (n.delete(e.data.response.id), o(e.data.response));
127
+ }), window.addEventListener("keydown", (e) => {
128
+ if (!t) return;
129
+ const o = document.activeElement, u = o?.isContentEditable || o?.tagName === "INPUT" || o?.tagName === "TEXTAREA";
130
+ t.emit("keydown", {
131
+ key: e.key,
132
+ ctrlKey: e.ctrlKey,
133
+ shiftKey: e.shiftKey,
134
+ altKey: e.altKey,
135
+ metaKey: e.metaKey,
136
+ repeat: e.repeat,
137
+ inputFocused: u
138
+ });
127
139
  });
128
140
  const t = b(
129
141
  {
@@ -135,40 +147,40 @@ export function createVueIframeClient(c, a) {
135
147
  },
136
148
  {
137
149
  handle(e) {
138
- window.addEventListener("message", async (r) => {
139
- if (typeof r.data != "object" || r.data.source !== f || r.data.type === "event" || !r.data.request) return;
140
- const m = await e(r.data.request);
141
- window.parent.postMessage({ source: g, response: m }, "*");
150
+ window.addEventListener("message", async (o) => {
151
+ if (typeof o.data != "object" || o.data.source !== f || o.data.type === "event" || !o.data.request) return;
152
+ const u = await e(o.data.request);
153
+ window.parent.postMessage({ source: y, response: u }, "*");
142
154
  });
143
155
  },
144
156
  invoke(e) {
145
- return new Promise((r, m) => {
146
- const E = setTimeout(() => m(new Error("Request timed out")), 5e3);
157
+ return new Promise((o, u) => {
158
+ const E = setTimeout(() => u(new Error("Request timed out")), 5e3);
147
159
  n.set(e.id, (p) => {
148
- clearTimeout(E), r(p);
149
- }), window.parent.postMessage({ source: g, request: e }, "*");
160
+ clearTimeout(E), o(p);
161
+ }), window.parent.postMessage({ source: y, request: e }, "*");
150
162
  });
151
163
  },
152
164
  emit(e) {
153
- window.parent.postMessage({ source: g, type: "event", request: e }, "*");
165
+ window.parent.postMessage({ source: y, type: "event", request: e }, "*");
154
166
  },
155
167
  handleEvent(e) {
156
- window.addEventListener("message", (r) => {
157
- typeof r.data == "object" && (r.data.source !== f || r.data.type !== "event" || !r.data.request || e(r.data.request));
168
+ window.addEventListener("message", (o) => {
169
+ typeof o.data == "object" && (o.data.source !== f || o.data.type !== "event" || !o.data.request || e(o.data.request));
158
170
  });
159
171
  },
160
172
  destroy() {
161
173
  n.clear();
162
174
  },
163
- deserialize: (e) => w(e),
164
- serialize: (e) => h(e, { maxDepth: 1 / 0 }),
175
+ deserialize: (e) => h(e),
176
+ serialize: (e) => w(e, { maxDepth: 1 / 0 }),
165
177
  timeout: 5e3
166
178
  }
167
- ), 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);
179
+ ), 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);
168
180
  return console.log = (...e) => {
169
181
  t.emit("console", "log", e), d?.(...e);
170
182
  }, console.warn = (...e) => {
171
- o?.(...e);
183
+ r?.(...e);
172
184
  }, console.error = (...e) => {
173
185
  t.emit("console", "error", e), s?.(...e);
174
186
  }, console.info = (...e) => {
package/dist/types.d.ts CHANGED
@@ -53,6 +53,17 @@ export interface CoreIframeEvents extends RpcEvents {
53
53
  id: string;
54
54
  content: string;
55
55
  }) => void;
56
+ 'exit-preview-mode': () => void;
57
+ keydown: (event: {
58
+ key: string;
59
+ ctrlKey: boolean;
60
+ shiftKey: boolean;
61
+ altKey: boolean;
62
+ metaKey: boolean;
63
+ repeat: boolean;
64
+ /** Is `true` if the focused element is an input, textarea, or contenteditable element */
65
+ inputFocused: boolean;
66
+ }) => void;
56
67
  }
57
68
  export interface VueIframeContext extends Omit<CoreIframeContext, 'updateCode'> {
58
69
  navigateTo: (to: string) => void;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nookuio/iframe",
3
3
  "description": "",
4
- "version": "1.0.2",
4
+ "version": "1.0.3",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
7
7
  "exports": {