@supernovaio/prototyping-tooling 0.9.5-alpha.1 → 0.9.5-alpha.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnnotationOverlay.d.ts","sourceRoot":"","sources":["../../../src/client/annotation/AnnotationOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAEhE,OAAO,KAAK,EAAkB,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AA6B1G;;;GAGG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,cAAc,CAA8B;IACpD,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,oBAAoB,CAAuB;IACnD,OAAO,CAAC,IAAI,CAA6B;IAEzC,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,UAAU,CAAI;IACtB,OAAO,CAAC,eAAe,CAA2B;IAClD,OAAO,CAAC,eAAe,CAAQ;IAC/B,OAAO,CAAC,oBAAoB,CAAsB;IAClD,OAAO,CAAC,wBAAwB,CAAqE;IACrG,OAAO,CAAC,kBAAkB,CAA2B;IAErD,OAAO,CAAC,cAAc,CAAsB;IAC5C,OAAO,CAAC,oBAAoB,CAAoB;gBAEpC,SAAS,EAAE,eAAe;IAOtC,mFAAmF;IACnF,QAAQ,IAAI,IAAI;IAUhB,0DAA0D;IAC1D,UAAU,IAAI,IAAI;IAalB,wGAAwG;IACxG,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI;IAQrC,6FAA6F;IAC7F,iBAAiB,CAAC,YAAY,EAAE,MAAM,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,GAAG,IAAI;IAiBxF,oFAAoF;IACpF,gBAAgB,IAAI,IAAI;IA2BxB,OAAO,CAAC,6BAA6B;IAQrC,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,sBAAsB;IAqD9B,6CAA6C;IAC7C,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI;IASrC,oDAAoD;IACpD,aAAa,IAAI,IAAI;IAKrB,4DAA4D;IAC5D,WAAW,CAAC,WAAW,EAAE,qBAAqB,EAAE,GAAG,IAAI;IAqBvD,OAAO,CAAC,cAAc,CAAQ;IAE9B,0DAA0D;IAC1D,aAAa,IAAI,IAAI;IAIrB,+CAA+C;IAC/C,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAQzC,2FAA2F;IAC3F,OAAO,CAAC,aAAa,CAsBpB;IAID,OAAO,CAAC,oBAAoB;IAkB5B,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,gBAAgB;IAgBxB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,sBAAsB;IAe9B,OAAO,CAAC,2BAA2B;IAOnC,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,iBAAiB;IA4BzB,wFAAwF;IACxF,OAAO,CAAC,4BAA4B;IAKpC,OAAO,CAAC,yBAAyB;IAUjC,mFAAmF;IACnF,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,gBAAgB;IA4BxB,OAAO,CAAC,oBAAoB;
|
|
1
|
+
{"version":3,"file":"AnnotationOverlay.d.ts","sourceRoot":"","sources":["../../../src/client/annotation/AnnotationOverlay.ts"],"names":[],"mappings":"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"}
|
package/dist/client.js
CHANGED
|
@@ -38,42 +38,42 @@ function H(r) {
|
|
|
38
38
|
}
|
|
39
39
|
return e;
|
|
40
40
|
}
|
|
41
|
-
function
|
|
41
|
+
function T(r) {
|
|
42
42
|
return r.length === 1 && r[0].startsWith("*[@id=") ? `//${r[0]}` : "/" + r.join("/");
|
|
43
43
|
}
|
|
44
44
|
const u = { FunctionComponent: 0, ClassComponent: 1, IndeterminateComponent: 2, HostRoot: 3, HostPortal: 4, HostComponent: 5, HostText: 6, Fragment: 7, Mode: 8, ContextConsumer: 9, ContextProvider: 10, ForwardRef: 11, Profiler: 12, SuspenseComponent: 13, MemoComponent: 14, SimpleMemoComponent: 15, LazyComponent: 16, IncompleteClassComponent: 17, DehydratedFragment: 18, SuspenseListComponent: 19, ScopeComponent: 21, OffscreenComponent: 22, LegacyHiddenComponent: 23, CacheComponent: 24, TracingMarkerComponent: 25, HostHoistable: 26, HostSingleton: 27, IncompleteFunctionComponent: 28, Throw: 29, ViewTransitionComponent: 30, ActivityComponent: 31 }, K = /* @__PURE__ */ new Set(["Component", "PureComponent", "Fragment", "Suspense", "Profiler", "StrictMode", "Routes", "Route", "Outlet", "Root", "ErrorBoundaryHandler", "HotReload", "Hot"]), J = [/Boundary$/, /BoundaryHandler$/, /Provider$/, /Consumer$/, /^(Inner|Outer)/, /Router$/, /^Client(Page|Segment|Root)/, /^Server(Root|Component|Render)/, /^RSC/, /Context$/, /^Hot(Reload)?$/, /^(Dev|React)(Overlay|Tools|Root)/, /Overlay$/, /Handler$/, /^With[A-Z]/, /Wrapper$/, /^Root$/];
|
|
45
|
-
let
|
|
46
|
-
function
|
|
45
|
+
let b = null;
|
|
46
|
+
function x(r) {
|
|
47
47
|
const e = (t) => t.some((n) => n.startsWith("__reactFiber$") || n.startsWith("__reactInternalInstance$") || n.startsWith("__reactProps$"));
|
|
48
48
|
return e(Object.keys(r)) || e(Object.getOwnPropertyNames(r));
|
|
49
49
|
}
|
|
50
50
|
function q() {
|
|
51
|
-
if (
|
|
51
|
+
if (b !== null) return b;
|
|
52
52
|
if (typeof document > "u") return !1;
|
|
53
|
-
if (document.body &&
|
|
54
|
-
return c("client", "Detected React on document.body"),
|
|
53
|
+
if (document.body && x(document.body))
|
|
54
|
+
return c("client", "Detected React on document.body"), b = !0, !0;
|
|
55
55
|
for (const e of Y) {
|
|
56
56
|
const t = document.querySelector(e);
|
|
57
57
|
if (t) {
|
|
58
|
-
if (
|
|
59
|
-
return c("client", "Detected React on", e),
|
|
58
|
+
if (x(t))
|
|
59
|
+
return c("client", "Detected React on", e), b = !0, !0;
|
|
60
60
|
for (const n of t.children)
|
|
61
|
-
if (
|
|
62
|
-
return c("client", "Detected React on child of", e),
|
|
61
|
+
if (x(n))
|
|
62
|
+
return c("client", "Detected React on child of", e), b = !0, !0;
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
if (document.body) {
|
|
66
66
|
for (const e of document.body.children)
|
|
67
|
-
if (
|
|
68
|
-
return c("client", "Detected React on body child:", e.tagName),
|
|
67
|
+
if (x(e))
|
|
68
|
+
return c("client", "Detected React on body child:", e.tagName), b = !0, !0;
|
|
69
69
|
}
|
|
70
70
|
const r = document.querySelectorAll("*");
|
|
71
71
|
for (const e of r) {
|
|
72
|
-
if (
|
|
73
|
-
return c("client", "Detected React on deep scan:", e.tagName),
|
|
72
|
+
if (x(e))
|
|
73
|
+
return c("client", "Detected React on deep scan:", e.tagName), b = !0, !0;
|
|
74
74
|
if (r.length > U) break;
|
|
75
75
|
}
|
|
76
|
-
return c("client", "React NOT detected on page"),
|
|
76
|
+
return c("client", "React NOT detected on page"), b = !1, !1;
|
|
77
77
|
}
|
|
78
78
|
function Z(r) {
|
|
79
79
|
const e = Object.keys(r);
|
|
@@ -149,14 +149,14 @@ function ne(r, e = $, t = X) {
|
|
|
149
149
|
return n.length === 0 ? { path: null, components: [] } : { path: n.slice().reverse().map((i) => `<${i}>`).join(" "), components: n };
|
|
150
150
|
}
|
|
151
151
|
let S = null, E = null;
|
|
152
|
-
function
|
|
152
|
+
function N(r, e, t, n = "solid") {
|
|
153
153
|
const o = document.createElement("div");
|
|
154
154
|
return Object.assign(o.style, { position: "fixed", left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px`, border: `1px ${n} ${e}`, backgroundColor: t, pointerEvents: "none", zIndex: C.HOVER_OVERLAY, borderRadius: "2px" }), o;
|
|
155
155
|
}
|
|
156
156
|
function oe(r) {
|
|
157
157
|
L();
|
|
158
158
|
const e = r.getBoundingClientRect();
|
|
159
|
-
S =
|
|
159
|
+
S = N(e, v.SELECT_OVERLAY_BORDER, v.SELECT_OVERLAY_BG), S.className = "forge-overlay", document.body.appendChild(S);
|
|
160
160
|
}
|
|
161
161
|
function L() {
|
|
162
162
|
S && (S.remove(), S = null);
|
|
@@ -208,7 +208,7 @@ class D {
|
|
|
208
208
|
if (this.accumulationId !== e) {
|
|
209
209
|
this.accumulationId = e, this.accumulationElements = [], this.clearAnnotationHighlights();
|
|
210
210
|
for (const n of t) {
|
|
211
|
-
const o = { xpath:
|
|
211
|
+
const o = { xpath: T(n.xpath), forgeId: n.forgeId, forgeIdIndex: n.forgeIdIndex }, i = this.resolveLocator(o);
|
|
212
212
|
i && this.accumulationElements.push(i);
|
|
213
213
|
}
|
|
214
214
|
this.refreshAccumulationHighlights(), this.hoverSuppressed = !1, c("annotation", `Entered accumulation mode for ${e} with ${this.accumulationElements.length} elements`);
|
|
@@ -236,7 +236,7 @@ class D {
|
|
|
236
236
|
const o = document.querySelectorAll(`[data-forge-id="${t}"]`);
|
|
237
237
|
o.length > 1 && (n = Array.from(o).indexOf(e));
|
|
238
238
|
}
|
|
239
|
-
return { xpath:
|
|
239
|
+
return { xpath: T(H(e)), forgeId: t, forgeIdIndex: n };
|
|
240
240
|
}
|
|
241
241
|
elementToInfo(e) {
|
|
242
242
|
return { elementTag: e.tagName.toLowerCase(), xpath: H(e), componentName: e.getAttribute("data-component") || void 0, componentPath: this.getComponentPath(e) || void 0, forgeId: e.getAttribute("data-forge-id") || void 0, forgeIdIndex: this.resolveForgeIdIndex(e), sourcePos: e.getAttribute("data-source-pos") || void 0 };
|
|
@@ -255,7 +255,7 @@ class D {
|
|
|
255
255
|
return;
|
|
256
256
|
}
|
|
257
257
|
const n = e[e.length - 1].getBoundingClientRect(), o = n.left + n.width / 2, i = n.bottom, s = e.map((g) => this.elementToInfo(g)), a = e.map((g) => this.elementToLocator(g)), l = this.getAnchorRect(a), h = o - 2, d = i - M - 2, m = l && l.width > 0 && l.height > 0 ? { x: (h - l.left) / l.width, y: (d - l.top) / l.height } : { x: 0, y: 0 }, p = s[0];
|
|
258
|
-
this.messenger.send({ type: "ACCUMULATION_UPDATED", annotation: { id: this.accumulationId, dotX: o, dotY: i, anchorOffset: m, mode: e.length > 1 ? "multi" : "single", elements: s, xpaths: s.map((g) =>
|
|
258
|
+
this.messenger.send({ type: "ACCUMULATION_UPDATED", annotation: { id: this.accumulationId, dotX: o, dotY: i, anchorOffset: m, mode: e.length > 1 ? "multi" : "single", elements: s, xpaths: s.map((g) => T(g.xpath)), elementTag: p.elementTag, componentName: p.componentName, componentPath: p.componentPath, forgeId: p.forgeId, sourcePos: p.sourcePos }, origin: O });
|
|
259
259
|
}
|
|
260
260
|
removeDot(e) {
|
|
261
261
|
const t = this.dots.get(e);
|
|
@@ -267,7 +267,7 @@ class D {
|
|
|
267
267
|
restoreDots(e) {
|
|
268
268
|
this.removeAllDots();
|
|
269
269
|
for (const t of e) {
|
|
270
|
-
const n = t.elements.map((i) => ({ xpath:
|
|
270
|
+
const n = t.elements.map((i) => ({ xpath: T(i.xpath), forgeId: i.forgeId, forgeIdIndex: i.forgeIdIndex })), o = this.getAnchorRect(n);
|
|
271
271
|
if (o && t.anchorOffset && o.width > 0 && o.height > 0) {
|
|
272
272
|
const i = { rx: t.anchorOffset.x, ry: t.anchorOffset.y }, s = o.left + i.rx * o.width, a = o.top + i.ry * o.height;
|
|
273
273
|
this.createDotAtPosition(s, a, t.mode, t.id, t.order, n, i);
|
|
@@ -309,7 +309,7 @@ class D {
|
|
|
309
309
|
showHoverOverlay(e, t, n) {
|
|
310
310
|
this.hoverOverlay && (this.hoverOverlay.remove(), this.hoverOverlay = null), this.lastHoveredElement = e;
|
|
311
311
|
const o = e.getBoundingClientRect(), i = t === v.ANNOTATION_MULTI ? v.ANNOTATION_MULTI_BG : v.ANNOTATION_SINGLE_BG;
|
|
312
|
-
this.hoverOverlay =
|
|
312
|
+
this.hoverOverlay = N(o, t, i, "solid"), this.hoverOverlay.style.transition = "all 0.05s ease", this.hoverOverlay.className = "forge-annotation-hover", document.body.appendChild(this.hoverOverlay), this.showComponentTooltip(n || e, o);
|
|
313
313
|
}
|
|
314
314
|
removeHoverOverlay() {
|
|
315
315
|
this.hoverOverlay && (this.hoverOverlay.remove(), this.hoverOverlay = null), this.lastHoveredElement = null, this.removeComponentTooltip();
|
|
@@ -354,12 +354,12 @@ class D {
|
|
|
354
354
|
if (i) {
|
|
355
355
|
const s = i.getBoundingClientRect();
|
|
356
356
|
n.push(s);
|
|
357
|
-
const a =
|
|
357
|
+
const a = N(s, v.ANNOTATION_SINGLE, v.ANNOTATION_SINGLE_BG, "solid");
|
|
358
358
|
a.className = "forge-annotation-highlight", document.body.appendChild(a), this.annotationHighlights.push(a);
|
|
359
359
|
}
|
|
360
360
|
}
|
|
361
361
|
if (t && n.length > 1) {
|
|
362
|
-
const o = Math.min(...n.map((d) => d.left)), i = Math.min(...n.map((d) => d.top)), s = Math.max(...n.map((d) => d.right)), a = Math.max(...n.map((d) => d.bottom)), l = new DOMRect(o, i, s - o, a - i), h =
|
|
362
|
+
const o = Math.min(...n.map((d) => d.left)), i = Math.min(...n.map((d) => d.top)), s = Math.max(...n.map((d) => d.right)), a = Math.max(...n.map((d) => d.bottom)), l = new DOMRect(o, i, s - o, a - i), h = N(l, v.ANNOTATION_SINGLE, "transparent", "dashed");
|
|
363
363
|
h.className = "forge-annotation-bounding-rect", document.body.appendChild(h), this.annotationHighlights.push(h);
|
|
364
364
|
}
|
|
365
365
|
}
|
|
@@ -404,7 +404,7 @@ class D {
|
|
|
404
404
|
const n = this.getComponentPath(e);
|
|
405
405
|
if (!n) return;
|
|
406
406
|
const o = document.createElement("div");
|
|
407
|
-
Object.assign(o.style, { position: "fixed", zIndex: C.TOOLTIP, backgroundColor: "rgba(
|
|
407
|
+
Object.assign(o.style, { position: "fixed", zIndex: C.TOOLTIP, backgroundColor: "rgb(238, 248, 255)", color: "rgba(26, 88, 208, 1)", border: "1px solid rgba(86, 153, 255, 0.3)", padding: "4px", borderRadius: "5px", fontSize: "12px", fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", whiteSpace: "nowrap", pointerEvents: "none", boxShadow: "0 2px 8px rgba(0,0,0,0.3)", transition: "opacity 0.1s ease" }), o.textContent = n.map((l) => `<${l}>`).join(" "), o.className = "forge-annotation-component-tooltip", document.body.appendChild(o);
|
|
408
408
|
const i = o.getBoundingClientRect();
|
|
409
409
|
let s = t.left + t.width / 2 - i.width / 2, a = t.top - i.height - 6;
|
|
410
410
|
s < 4 && (s = 4), s + i.width > window.innerWidth - 4 && (s = window.innerWidth - i.width - 4), a < 4 && (a = t.bottom + 6), o.style.left = `${s}px`, o.style.top = `${a}px`, this.componentTooltip = o;
|
|
@@ -421,7 +421,7 @@ class D {
|
|
|
421
421
|
showDragHighlights(e) {
|
|
422
422
|
this.clearDragHighlights();
|
|
423
423
|
for (const t of e) {
|
|
424
|
-
const n = t.getBoundingClientRect(), o =
|
|
424
|
+
const n = t.getBoundingClientRect(), o = N(n, v.ANNOTATION_MULTI, v.ANNOTATION_MULTI_BG, "solid");
|
|
425
425
|
o.className = "forge-annotation-drag-highlight", document.body.appendChild(o), this.dragHighlights.push(o);
|
|
426
426
|
}
|
|
427
427
|
}
|
|
@@ -435,7 +435,7 @@ class D {
|
|
|
435
435
|
}
|
|
436
436
|
createDotAtPosition(e, t, n, o, i, s, a) {
|
|
437
437
|
const l = document.createElement("div");
|
|
438
|
-
Object.assign(l.style, { position: "fixed", left: `${e}px`, top: `${t}px`, minWidth: `${B}px`, height: `${M}px`, borderRadius: "50% 50% 50% 0", backgroundColor: "#FFFFFF", border: "1px solid #1A58D0", cursor: "pointer", zIndex: C.ANNOTATION_DOT, transition: "transform 0.15s ease", display: this.markersVisible ? "flex" : "none", alignItems: "center", justifyContent: "center", padding: "0 4px", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", fontSize: "11px", fontWeight: "700", color: "#1A58D0", lineHeight: "1", userSelect: "none" }), l.textContent = String(i), l.className = "forge-annotation-dot", l.dataset.annotationId = o, l.addEventListener("mouseenter", () => {
|
|
438
|
+
Object.assign(l.style, { position: "fixed", left: `${e}px`, top: `${t}px`, minWidth: `${B}px`, height: `${M}px`, borderRadius: "50% 50% 50% 0", backgroundColor: "#FFFFFF", border: "1px solid #1A58D0", cursor: "pointer", zIndex: C.ANNOTATION_DOT, transition: "transform 0.15s ease", display: this.markersVisible ? "flex" : "none", alignItems: "center", justifyContent: "center", padding: "0 4px", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", fontSize: "11px", fontWeight: "700", color: "#1A58D0", lineHeight: "1", userSelect: "none", boxShadow: "0px 1px 3px -1px rgba(9, 18, 42, 0.06), 0px 1px 3px -3px rgba(9, 18, 42, 0.1)" }), l.textContent = String(i), l.className = "forge-annotation-dot", l.dataset.annotationId = o, l.addEventListener("mouseenter", () => {
|
|
439
439
|
l.style.transform = "scale(1.05)", this.removeHoverOverlay();
|
|
440
440
|
}), l.addEventListener("mouseleave", () => {
|
|
441
441
|
l.style.transform = "scale(1)";
|
|
@@ -593,9 +593,9 @@ class D {
|
|
|
593
593
|
createAnnotationFromElements(e, t, n, o, i) {
|
|
594
594
|
const s = i || ae();
|
|
595
595
|
this.hoverSuppressed = !0, this.removeHoverOverlay();
|
|
596
|
-
const a = e.map((f) => this.elementToInfo(f)), l = a.map((f) => ({ xpath:
|
|
596
|
+
const a = e.map((f) => this.elementToInfo(f)), l = a.map((f) => ({ xpath: T(f.xpath), forgeId: f.forgeId, forgeIdIndex: f.forgeIdIndex })), h = this.getAnchorRect(l), d = n - 2, m = o - M - 2, p = h && h.width > 0 && h.height > 0 ? { x: (d - h.left) / h.width, y: (m - h.top) / h.height } : { x: 0, y: 0 };
|
|
597
597
|
this.pendingAnnotations.set(s, { dotX: n, dotY: o, mode: t, locators: l }), this.clearDragHighlights(), this.highlightLocators(l, t === "multi");
|
|
598
|
-
const g = a[0], y = { id: s, dotX: n, dotY: o, anchorOffset: p, mode: t, elements: a, xpaths: a.map((f) =>
|
|
598
|
+
const g = a[0], y = { id: s, dotX: n, dotY: o, anchorOffset: p, mode: t, elements: a, xpaths: a.map((f) => T(f.xpath)), elementTag: g.elementTag, componentName: g.componentName, componentPath: g.componentPath, forgeId: g.forgeId, sourcePos: g.sourcePos };
|
|
599
599
|
c("annotation", "Annotation created (pending):", y), this.messenger.send({ type: "ANNOTATION_CREATED", annotation: y, origin: O });
|
|
600
600
|
}
|
|
601
601
|
handleDocumentLeave = () => {
|
|
@@ -637,7 +637,7 @@ class le {
|
|
|
637
637
|
return o;
|
|
638
638
|
}
|
|
639
639
|
handleSelectModeClick(e) {
|
|
640
|
-
const t =
|
|
640
|
+
const t = T(H(e));
|
|
641
641
|
c("client", "Element clicked, XPath:", t), this.messenger.send({ type: "XPATH_REPORT", xpath: t, origin: O }), this.messenger.send({ type: "SELECT_MODE_DISABLED", origin: O });
|
|
642
642
|
}
|
|
643
643
|
handleMouseOver = (e) => {
|
|
@@ -751,7 +751,7 @@ class ge {
|
|
|
751
751
|
}
|
|
752
752
|
const n = this.selectController.findTopmostElementWithSameId(e), o = n.getAttribute("data-component"), i = n.getAttribute("data-source-pos"), s = o || n.tagName.toLowerCase();
|
|
753
753
|
this.clearSelection(), this.selectedElement = n, this.applyHighlight(n);
|
|
754
|
-
const a = n.textContent?.trim() || "", l = n.tagName.toLowerCase(), h =
|
|
754
|
+
const a = n.textContent?.trim() || "", l = n.tagName.toLowerCase(), h = T(H(n)), d = this.componentRegistry.getEditableProps(s), m = this.extractPropValues(n, d);
|
|
755
755
|
c("client", "Element selected in design mode:", { forgeId: t, sourcePos: i, text: a, type: l, componentName: s, editableProps: d, propValues: m }), this.messenger.send({ type: "ELEMENT_SELECTED", forgeId: t, sourcePos: i || void 0, text: a, elementType: l, xpath: h, componentName: s, editableProps: d, propValues: m, origin: O });
|
|
756
756
|
}
|
|
757
757
|
updateText(e, t) {
|
package/package.json
CHANGED