@base44-preview/vite-plugin 0.2.10-pr.14.fc846c0 → 0.2.11-pr.16.45158ce
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.
- package/dist/html-injections-plugin.d.ts +2 -1
- package/dist/html-injections-plugin.d.ts.map +1 -1
- package/dist/html-injections-plugin.js +13 -1
- package/dist/html-injections-plugin.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/injections/visual-edit-agent.d.ts +2 -0
- package/dist/injections/visual-edit-agent.d.ts.map +1 -0
- package/dist/injections/visual-edit-agent.js +476 -0
- package/dist/injections/visual-edit-agent.js.map +1 -0
- package/package.json +1 -1
- package/src/html-injections-plugin.ts +14 -0
- package/src/index.ts +3 -1
- package/src/injections/visual-edit-agent.ts +582 -0
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Plugin } from "vite";
|
|
2
|
-
export declare function htmlInjectionsPlugin({ hmrNotifier, navigationNotifier, }: {
|
|
2
|
+
export declare function htmlInjectionsPlugin({ hmrNotifier, navigationNotifier, visualEditAgent, }: {
|
|
3
3
|
hmrNotifier: boolean;
|
|
4
4
|
navigationNotifier: boolean;
|
|
5
|
+
visualEditAgent: boolean;
|
|
5
6
|
}): Plugin;
|
|
6
7
|
//# sourceMappingURL=html-injections-plugin.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"html-injections-plugin.d.ts","sourceRoot":"","sources":["../src/html-injections-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAEnC,wBAAgB,oBAAoB,CAAC,EACnC,WAAW,EACX,kBAAkB,
|
|
1
|
+
{"version":3,"file":"html-injections-plugin.d.ts","sourceRoot":"","sources":["../src/html-injections-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAEnC,wBAAgB,oBAAoB,CAAC,EACnC,WAAW,EACX,kBAAkB,EAClB,eAAe,GAChB,EAAE;IACD,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,eAAe,EAAE,OAAO,CAAC;CAC1B,GA4DM,MAAM,CACZ"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function htmlInjectionsPlugin({ hmrNotifier, navigationNotifier, }) {
|
|
1
|
+
export function htmlInjectionsPlugin({ hmrNotifier, navigationNotifier, visualEditAgent, }) {
|
|
2
2
|
return {
|
|
3
3
|
name: "html-injections",
|
|
4
4
|
apply: (config) => config.mode !== "production",
|
|
@@ -44,6 +44,18 @@ export function htmlInjectionsPlugin({ hmrNotifier, navigationNotifier, }) {
|
|
|
44
44
|
},
|
|
45
45
|
]
|
|
46
46
|
: []),
|
|
47
|
+
...(visualEditAgent
|
|
48
|
+
? [
|
|
49
|
+
{
|
|
50
|
+
tag: "script",
|
|
51
|
+
attrs: {
|
|
52
|
+
src: "/node_modules/@base44/vite-plugin/dist/injections/visual-edit-agent.js",
|
|
53
|
+
type: "module",
|
|
54
|
+
},
|
|
55
|
+
injectTo: "body",
|
|
56
|
+
},
|
|
57
|
+
]
|
|
58
|
+
: []),
|
|
47
59
|
];
|
|
48
60
|
},
|
|
49
61
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"html-injections-plugin.js","sourceRoot":"","sources":["../src/html-injections-plugin.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,oBAAoB,CAAC,EACnC,WAAW,EACX,kBAAkB,
|
|
1
|
+
{"version":3,"file":"html-injections-plugin.js","sourceRoot":"","sources":["../src/html-injections-plugin.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,oBAAoB,CAAC,EACnC,WAAW,EACX,kBAAkB,EAClB,eAAe,GAKhB;IACC,OAAO;QACL,IAAI,EAAE,iBAAiB;QACvB,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,YAAY;QAC/C,kBAAkB;YAChB,OAAO;gBACL;oBACE,GAAG,EAAE,QAAQ;oBACb,KAAK,EAAE;wBACL,GAAG,EAAE,gFAAgF;wBACrF,IAAI,EAAE,QAAQ;qBACf;oBACD,QAAQ,EAAE,MAAM;iBACjB;gBACD;oBACE,GAAG,EAAE,QAAQ;oBACb,KAAK,EAAE;wBACL,GAAG,EAAE,6EAA6E;wBAClF,IAAI,EAAE,QAAQ;qBACf;oBACD,QAAQ,EAAE,MAAM;iBACjB;gBACD,GAAG,CAAC,WAAW;oBACb,CAAC,CAAC;wBACE;4BACE,GAAG,EAAE,QAAQ;4BACb,KAAK,EAAE;gCACL,GAAG,EAAE,2EAA2E;gCAChF,IAAI,EAAE,QAAQ;6BACf;4BACD,QAAQ,EAAE,MAAM;yBACjB;qBACF;oBACH,CAAC,CAAC,EAAE,CAAC;gBACP,GAAG,CAAC,kBAAkB;oBACpB,CAAC,CAAC;wBACE;4BACE,GAAG,EAAE,QAAQ;4BACb,KAAK,EAAE;gCACL,GAAG,EAAE,0EAA0E;gCAC/E,IAAI,EAAE,QAAQ;6BACf;4BACD,QAAQ,EAAE,MAAM;yBACjB;qBACF;oBACH,CAAC,CAAC,EAAE,CAAC;gBACP,GAAG,CAAC,eAAe;oBACjB,CAAC,CAAC;wBACE;4BACE,GAAG,EAAE,QAAQ;4BACb,KAAK,EAAE;gCACL,GAAG,EAAE,wEAAwE;gCAC7E,IAAI,EAAE,QAAQ;6BACf;4BACD,QAAQ,EAAE,MAAM;yBACjB;qBACF;oBACH,CAAC,CAAC,EAAE,CAAC;aACR,CAAC;QACJ,CAAC;KACQ,CAAC;AACd,CAAC"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,MAAM,CAAC;AAS/C,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,IAAI,GAAE;IACJ,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,MAAM,CAAC;AAS/C,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,IAAI,GAAE;IACJ,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;CACtB,iBAqLP"}
|
package/dist/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { filterPackagesInProject } from "./utils.js";
|
|
|
5
5
|
import { htmlInjectionsPlugin } from "./html-injections-plugin.js";
|
|
6
6
|
const isRunningInSandbox = !!process.env.MODAL_SANDBOX_ID;
|
|
7
7
|
export default function vitePlugin(opts = {}) {
|
|
8
|
-
const { legacySDKImports = false, hmrNotifier = false, navigationNotifier = false, } = opts;
|
|
8
|
+
const { legacySDKImports = false, hmrNotifier = false, navigationNotifier = false, visualEditAgent = false, } = opts;
|
|
9
9
|
return [
|
|
10
10
|
{
|
|
11
11
|
name: "base44",
|
|
@@ -128,7 +128,7 @@ export default function vitePlugin(opts = {}) {
|
|
|
128
128
|
},
|
|
129
129
|
errorOverlayPlugin(),
|
|
130
130
|
visualEditPlugin(),
|
|
131
|
-
htmlInjectionsPlugin({ hmrNotifier, navigationNotifier }),
|
|
131
|
+
htmlInjectionsPlugin({ hmrNotifier, navigationNotifier, visualEditAgent }),
|
|
132
132
|
]
|
|
133
133
|
: []),
|
|
134
134
|
];
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,MAAM,kBAAkB,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"visual-edit-agent.d.ts","sourceRoot":"","sources":["../../src/injections/visual-edit-agent.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,476 @@
|
|
|
1
|
+
if (window.self !== window.top) {
|
|
2
|
+
// State variables (replacing React useState/useRef)
|
|
3
|
+
let isVisualEditMode = false;
|
|
4
|
+
let isPopoverDragging = false;
|
|
5
|
+
let isDropdownOpen = false;
|
|
6
|
+
let hoverOverlays = [];
|
|
7
|
+
let selectedOverlays = [];
|
|
8
|
+
let currentHighlightedElements = [];
|
|
9
|
+
let selectedElementId = null;
|
|
10
|
+
// Create overlay element
|
|
11
|
+
const createOverlay = (isSelected = false) => {
|
|
12
|
+
const overlay = document.createElement("div");
|
|
13
|
+
overlay.style.position = "absolute";
|
|
14
|
+
overlay.style.pointerEvents = "none";
|
|
15
|
+
overlay.style.transition = "all 0.1s ease-in-out";
|
|
16
|
+
overlay.style.zIndex = "9999";
|
|
17
|
+
if (isSelected) {
|
|
18
|
+
overlay.style.border = "2px solid #2563EB";
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
overlay.style.border = "2px solid #95a5fc";
|
|
22
|
+
overlay.style.backgroundColor = "rgba(99, 102, 241, 0.05)";
|
|
23
|
+
}
|
|
24
|
+
return overlay;
|
|
25
|
+
};
|
|
26
|
+
// Position overlay relative to element
|
|
27
|
+
const positionOverlay = (overlay, element, isSelected = false) => {
|
|
28
|
+
if (!element || !isVisualEditMode)
|
|
29
|
+
return;
|
|
30
|
+
const htmlElement = element;
|
|
31
|
+
// Force layout recalculation
|
|
32
|
+
void htmlElement.offsetWidth;
|
|
33
|
+
const rect = element.getBoundingClientRect();
|
|
34
|
+
overlay.style.top = `${rect.top + window.scrollY}px`;
|
|
35
|
+
overlay.style.left = `${rect.left + window.scrollX}px`;
|
|
36
|
+
overlay.style.width = `${rect.width}px`;
|
|
37
|
+
overlay.style.height = `${rect.height}px`;
|
|
38
|
+
// Check if label already exists in overlay
|
|
39
|
+
let label = overlay.querySelector("div");
|
|
40
|
+
if (!label) {
|
|
41
|
+
label = document.createElement("div");
|
|
42
|
+
label.textContent = element.tagName.toLowerCase();
|
|
43
|
+
label.style.position = "absolute";
|
|
44
|
+
label.style.top = "-27px";
|
|
45
|
+
label.style.left = "-2px";
|
|
46
|
+
label.style.padding = "2px 8px";
|
|
47
|
+
label.style.fontSize = "11px";
|
|
48
|
+
label.style.fontWeight = isSelected ? "500" : "400";
|
|
49
|
+
label.style.color = isSelected ? "#ffffff" : "#526cff";
|
|
50
|
+
label.style.backgroundColor = isSelected ? "#526cff" : "#DBEAFE";
|
|
51
|
+
label.style.borderRadius = "3px";
|
|
52
|
+
label.style.minWidth = "24px";
|
|
53
|
+
label.style.textAlign = "center";
|
|
54
|
+
overlay.appendChild(label);
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
// Find elements by ID - first try data-source-location, fallback to data-visual-selector-id
|
|
58
|
+
const findElementsById = (id) => {
|
|
59
|
+
if (!id)
|
|
60
|
+
return [];
|
|
61
|
+
const sourceElements = Array.from(document.querySelectorAll(`[data-source-location="${id}"]`));
|
|
62
|
+
if (sourceElements.length > 0) {
|
|
63
|
+
return sourceElements;
|
|
64
|
+
}
|
|
65
|
+
return Array.from(document.querySelectorAll(`[data-visual-selector-id="${id}"]`));
|
|
66
|
+
};
|
|
67
|
+
// Clear hover overlays
|
|
68
|
+
const clearHoverOverlays = () => {
|
|
69
|
+
hoverOverlays.forEach((overlay) => {
|
|
70
|
+
if (overlay && overlay.parentNode) {
|
|
71
|
+
overlay.remove();
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
hoverOverlays = [];
|
|
75
|
+
currentHighlightedElements = [];
|
|
76
|
+
};
|
|
77
|
+
// Handle mouse over event
|
|
78
|
+
const handleMouseOver = (e) => {
|
|
79
|
+
if (!isVisualEditMode || isPopoverDragging)
|
|
80
|
+
return;
|
|
81
|
+
const target = e.target;
|
|
82
|
+
// Prevent hover effects when a dropdown is open
|
|
83
|
+
if (isDropdownOpen) {
|
|
84
|
+
clearHoverOverlays();
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
// Prevent hover effects on SVG path elements
|
|
88
|
+
if (target.tagName.toLowerCase() === "path") {
|
|
89
|
+
clearHoverOverlays();
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
// Support both data-source-location and data-visual-selector-id
|
|
93
|
+
const element = target.closest("[data-source-location], [data-visual-selector-id]");
|
|
94
|
+
if (!element) {
|
|
95
|
+
clearHoverOverlays();
|
|
96
|
+
return;
|
|
97
|
+
}
|
|
98
|
+
// Prefer data-source-location, fallback to data-visual-selector-id
|
|
99
|
+
const htmlElement = element;
|
|
100
|
+
const selectorId = htmlElement.dataset.sourceLocation ||
|
|
101
|
+
htmlElement.dataset.visualSelectorId;
|
|
102
|
+
// Skip if this element is already selected
|
|
103
|
+
if (selectedElementId === selectorId) {
|
|
104
|
+
clearHoverOverlays();
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
// Find all elements with the same ID
|
|
108
|
+
const elements = findElementsById(selectorId || null);
|
|
109
|
+
// Clear previous hover overlays
|
|
110
|
+
clearHoverOverlays();
|
|
111
|
+
// Create overlays for all matching elements
|
|
112
|
+
elements.forEach((el) => {
|
|
113
|
+
const overlay = createOverlay(false);
|
|
114
|
+
document.body.appendChild(overlay);
|
|
115
|
+
hoverOverlays.push(overlay);
|
|
116
|
+
positionOverlay(overlay, el);
|
|
117
|
+
});
|
|
118
|
+
currentHighlightedElements = elements;
|
|
119
|
+
};
|
|
120
|
+
// Handle mouse out event
|
|
121
|
+
const handleMouseOut = () => {
|
|
122
|
+
if (isPopoverDragging)
|
|
123
|
+
return;
|
|
124
|
+
clearHoverOverlays();
|
|
125
|
+
};
|
|
126
|
+
// Handle element click
|
|
127
|
+
const handleElementClick = (e) => {
|
|
128
|
+
if (!isVisualEditMode)
|
|
129
|
+
return;
|
|
130
|
+
const target = e.target;
|
|
131
|
+
// Close dropdowns when clicking anywhere in iframe if a dropdown is open
|
|
132
|
+
if (isDropdownOpen) {
|
|
133
|
+
e.preventDefault();
|
|
134
|
+
e.stopPropagation();
|
|
135
|
+
e.stopImmediatePropagation();
|
|
136
|
+
window.parent.postMessage({ type: "close-dropdowns" }, "*");
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
// Prevent clicking on SVG path elements
|
|
140
|
+
if (target.tagName.toLowerCase() === "path") {
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
143
|
+
// Prevent default behavior immediately when in visual edit mode
|
|
144
|
+
e.preventDefault();
|
|
145
|
+
e.stopPropagation();
|
|
146
|
+
e.stopImmediatePropagation();
|
|
147
|
+
// Support both data-source-location and data-visual-selector-id
|
|
148
|
+
const element = target.closest("[data-source-location], [data-visual-selector-id]");
|
|
149
|
+
if (!element) {
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
const htmlElement = element;
|
|
153
|
+
const visualSelectorId = htmlElement.dataset.sourceLocation ||
|
|
154
|
+
htmlElement.dataset.visualSelectorId;
|
|
155
|
+
// Clear any existing selected overlays
|
|
156
|
+
selectedOverlays.forEach((overlay) => {
|
|
157
|
+
if (overlay && overlay.parentNode) {
|
|
158
|
+
overlay.remove();
|
|
159
|
+
}
|
|
160
|
+
});
|
|
161
|
+
selectedOverlays = [];
|
|
162
|
+
// Find all elements with the same ID
|
|
163
|
+
const elements = findElementsById(visualSelectorId || null);
|
|
164
|
+
// Create selected overlays for all matching elements
|
|
165
|
+
elements.forEach((el) => {
|
|
166
|
+
const overlay = createOverlay(true);
|
|
167
|
+
document.body.appendChild(overlay);
|
|
168
|
+
selectedOverlays.push(overlay);
|
|
169
|
+
positionOverlay(overlay, el, true);
|
|
170
|
+
});
|
|
171
|
+
selectedElementId = visualSelectorId || null;
|
|
172
|
+
// Clear hover overlays
|
|
173
|
+
clearHoverOverlays();
|
|
174
|
+
// Calculate element position for popover positioning
|
|
175
|
+
const rect = element.getBoundingClientRect();
|
|
176
|
+
const elementPosition = {
|
|
177
|
+
top: rect.top,
|
|
178
|
+
left: rect.left,
|
|
179
|
+
right: rect.right,
|
|
180
|
+
bottom: rect.bottom,
|
|
181
|
+
width: rect.width,
|
|
182
|
+
height: rect.height,
|
|
183
|
+
centerX: rect.left + rect.width / 2,
|
|
184
|
+
centerY: rect.top + rect.height / 2,
|
|
185
|
+
};
|
|
186
|
+
// Send message to parent window with element info including position
|
|
187
|
+
const svgElement = element;
|
|
188
|
+
const elementData = {
|
|
189
|
+
type: "element-selected",
|
|
190
|
+
tagName: element.tagName,
|
|
191
|
+
classes: svgElement.className?.baseVal ||
|
|
192
|
+
element.className ||
|
|
193
|
+
"",
|
|
194
|
+
visualSelectorId: visualSelectorId,
|
|
195
|
+
content: element.innerText,
|
|
196
|
+
dataSourceLocation: htmlElement.dataset.sourceLocation,
|
|
197
|
+
isDynamicContent: htmlElement.dataset.dynamicContent === "true",
|
|
198
|
+
linenumber: htmlElement.dataset.linenumber,
|
|
199
|
+
filename: htmlElement.dataset.filename,
|
|
200
|
+
position: elementPosition,
|
|
201
|
+
};
|
|
202
|
+
window.parent.postMessage(elementData, "*");
|
|
203
|
+
};
|
|
204
|
+
// Unselect the current element
|
|
205
|
+
const unselectElement = () => {
|
|
206
|
+
selectedOverlays.forEach((overlay) => {
|
|
207
|
+
if (overlay && overlay.parentNode) {
|
|
208
|
+
overlay.remove();
|
|
209
|
+
}
|
|
210
|
+
});
|
|
211
|
+
selectedOverlays = [];
|
|
212
|
+
selectedElementId = null;
|
|
213
|
+
};
|
|
214
|
+
// Update element classes by visual selector ID
|
|
215
|
+
// Note: Parent window is responsible for class merging (twMerge).
|
|
216
|
+
// This function receives the final computed class string.
|
|
217
|
+
const updateElementClasses = (visualSelectorId, classes) => {
|
|
218
|
+
const elements = findElementsById(visualSelectorId);
|
|
219
|
+
if (elements.length === 0) {
|
|
220
|
+
return;
|
|
221
|
+
}
|
|
222
|
+
// Update classes for all matching elements
|
|
223
|
+
elements.forEach((element) => {
|
|
224
|
+
element.className = classes;
|
|
225
|
+
});
|
|
226
|
+
// Use a small delay to allow the browser to recalculate layout before repositioning
|
|
227
|
+
setTimeout(() => {
|
|
228
|
+
// Reposition selected overlays
|
|
229
|
+
if (selectedElementId === visualSelectorId) {
|
|
230
|
+
selectedOverlays.forEach((overlay, index) => {
|
|
231
|
+
if (index < elements.length) {
|
|
232
|
+
positionOverlay(overlay, elements[index]);
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
}
|
|
236
|
+
// Reposition hover overlays if needed
|
|
237
|
+
if (currentHighlightedElements.length > 0) {
|
|
238
|
+
const hoveredElement = currentHighlightedElements[0];
|
|
239
|
+
const hoveredId = hoveredElement?.dataset?.visualSelectorId;
|
|
240
|
+
if (hoveredId === visualSelectorId) {
|
|
241
|
+
hoverOverlays.forEach((overlay, index) => {
|
|
242
|
+
if (index < currentHighlightedElements.length) {
|
|
243
|
+
positionOverlay(overlay, currentHighlightedElements[index]);
|
|
244
|
+
}
|
|
245
|
+
});
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
}, 50);
|
|
249
|
+
};
|
|
250
|
+
// Update element content by visual selector ID
|
|
251
|
+
const updateElementContent = (visualSelectorId, content) => {
|
|
252
|
+
const elements = findElementsById(visualSelectorId);
|
|
253
|
+
if (elements.length === 0) {
|
|
254
|
+
return;
|
|
255
|
+
}
|
|
256
|
+
elements.forEach((element) => {
|
|
257
|
+
element.innerText = content;
|
|
258
|
+
});
|
|
259
|
+
setTimeout(() => {
|
|
260
|
+
if (selectedElementId === visualSelectorId) {
|
|
261
|
+
selectedOverlays.forEach((overlay, index) => {
|
|
262
|
+
if (index < elements.length) {
|
|
263
|
+
positionOverlay(overlay, elements[index]);
|
|
264
|
+
}
|
|
265
|
+
});
|
|
266
|
+
}
|
|
267
|
+
}, 50);
|
|
268
|
+
};
|
|
269
|
+
// Toggle visual edit mode
|
|
270
|
+
const toggleVisualEditMode = (isEnabled) => {
|
|
271
|
+
isVisualEditMode = isEnabled;
|
|
272
|
+
if (!isEnabled) {
|
|
273
|
+
clearHoverOverlays();
|
|
274
|
+
selectedOverlays.forEach((overlay) => {
|
|
275
|
+
if (overlay && overlay.parentNode) {
|
|
276
|
+
overlay.remove();
|
|
277
|
+
}
|
|
278
|
+
});
|
|
279
|
+
selectedOverlays = [];
|
|
280
|
+
currentHighlightedElements = [];
|
|
281
|
+
selectedElementId = null;
|
|
282
|
+
document.body.style.cursor = "default";
|
|
283
|
+
document.removeEventListener("mouseover", handleMouseOver);
|
|
284
|
+
document.removeEventListener("mouseout", handleMouseOut);
|
|
285
|
+
document.removeEventListener("click", handleElementClick, true);
|
|
286
|
+
}
|
|
287
|
+
else {
|
|
288
|
+
document.body.style.cursor = "crosshair";
|
|
289
|
+
document.addEventListener("mouseover", handleMouseOver);
|
|
290
|
+
document.addEventListener("mouseout", handleMouseOut);
|
|
291
|
+
document.addEventListener("click", handleElementClick, true);
|
|
292
|
+
}
|
|
293
|
+
};
|
|
294
|
+
// Handle scroll events to update popover position
|
|
295
|
+
const handleScroll = () => {
|
|
296
|
+
if (selectedElementId) {
|
|
297
|
+
const elements = findElementsById(selectedElementId);
|
|
298
|
+
if (elements.length > 0) {
|
|
299
|
+
const element = elements[0];
|
|
300
|
+
const rect = element.getBoundingClientRect();
|
|
301
|
+
const viewportHeight = window.innerHeight;
|
|
302
|
+
const viewportWidth = window.innerWidth;
|
|
303
|
+
const isInViewport = rect.top < viewportHeight &&
|
|
304
|
+
rect.bottom > 0 &&
|
|
305
|
+
rect.left < viewportWidth &&
|
|
306
|
+
rect.right > 0;
|
|
307
|
+
const elementPosition = {
|
|
308
|
+
top: rect.top,
|
|
309
|
+
left: rect.left,
|
|
310
|
+
right: rect.right,
|
|
311
|
+
bottom: rect.bottom,
|
|
312
|
+
width: rect.width,
|
|
313
|
+
height: rect.height,
|
|
314
|
+
centerX: rect.left + rect.width / 2,
|
|
315
|
+
centerY: rect.top + rect.height / 2,
|
|
316
|
+
};
|
|
317
|
+
window.parent.postMessage({
|
|
318
|
+
type: "element-position-update",
|
|
319
|
+
position: elementPosition,
|
|
320
|
+
isInViewport: isInViewport,
|
|
321
|
+
visualSelectorId: selectedElementId,
|
|
322
|
+
}, "*");
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
};
|
|
326
|
+
// Handle messages from parent window
|
|
327
|
+
const handleMessage = (event) => {
|
|
328
|
+
const message = event.data;
|
|
329
|
+
switch (message.type) {
|
|
330
|
+
case "toggle-visual-edit-mode":
|
|
331
|
+
toggleVisualEditMode(message.data.enabled);
|
|
332
|
+
break;
|
|
333
|
+
case "update-classes":
|
|
334
|
+
if (message.data && message.data.classes !== undefined) {
|
|
335
|
+
updateElementClasses(message.data.visualSelectorId, message.data.classes);
|
|
336
|
+
}
|
|
337
|
+
else {
|
|
338
|
+
console.warn("[VisualEditAgent] Invalid update-classes message:", message);
|
|
339
|
+
}
|
|
340
|
+
break;
|
|
341
|
+
case "unselect-element":
|
|
342
|
+
unselectElement();
|
|
343
|
+
break;
|
|
344
|
+
case "refresh-page":
|
|
345
|
+
window.location.reload();
|
|
346
|
+
break;
|
|
347
|
+
case "update-content":
|
|
348
|
+
if (message.data && message.data.content !== undefined) {
|
|
349
|
+
updateElementContent(message.data.visualSelectorId, message.data.content);
|
|
350
|
+
}
|
|
351
|
+
else {
|
|
352
|
+
console.warn("[VisualEditAgent] Invalid update-content message:", message);
|
|
353
|
+
}
|
|
354
|
+
break;
|
|
355
|
+
case "request-element-position":
|
|
356
|
+
if (selectedElementId) {
|
|
357
|
+
const elements = findElementsById(selectedElementId);
|
|
358
|
+
if (elements.length > 0) {
|
|
359
|
+
const element = elements[0];
|
|
360
|
+
const rect = element.getBoundingClientRect();
|
|
361
|
+
const viewportHeight = window.innerHeight;
|
|
362
|
+
const viewportWidth = window.innerWidth;
|
|
363
|
+
const isInViewport = rect.top < viewportHeight &&
|
|
364
|
+
rect.bottom > 0 &&
|
|
365
|
+
rect.left < viewportWidth &&
|
|
366
|
+
rect.right > 0;
|
|
367
|
+
const elementPosition = {
|
|
368
|
+
top: rect.top,
|
|
369
|
+
left: rect.left,
|
|
370
|
+
right: rect.right,
|
|
371
|
+
bottom: rect.bottom,
|
|
372
|
+
width: rect.width,
|
|
373
|
+
height: rect.height,
|
|
374
|
+
centerX: rect.left + rect.width / 2,
|
|
375
|
+
centerY: rect.top + rect.height / 2,
|
|
376
|
+
};
|
|
377
|
+
window.parent.postMessage({
|
|
378
|
+
type: "element-position-update",
|
|
379
|
+
position: elementPosition,
|
|
380
|
+
isInViewport: isInViewport,
|
|
381
|
+
visualSelectorId: selectedElementId,
|
|
382
|
+
}, "*");
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
break;
|
|
386
|
+
case "popover-drag-state":
|
|
387
|
+
if (message.data && message.data.isDragging !== undefined) {
|
|
388
|
+
isPopoverDragging = message.data.isDragging;
|
|
389
|
+
if (message.data.isDragging) {
|
|
390
|
+
clearHoverOverlays();
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
break;
|
|
394
|
+
case "dropdown-state":
|
|
395
|
+
if (message.data && message.data.isOpen !== undefined) {
|
|
396
|
+
isDropdownOpen = message.data.isOpen;
|
|
397
|
+
if (message.data.isOpen) {
|
|
398
|
+
clearHoverOverlays();
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
break;
|
|
402
|
+
default:
|
|
403
|
+
break;
|
|
404
|
+
}
|
|
405
|
+
};
|
|
406
|
+
// Handle window resize to reposition overlays
|
|
407
|
+
const handleResize = () => {
|
|
408
|
+
if (selectedElementId) {
|
|
409
|
+
const elements = findElementsById(selectedElementId);
|
|
410
|
+
selectedOverlays.forEach((overlay, index) => {
|
|
411
|
+
if (index < elements.length) {
|
|
412
|
+
positionOverlay(overlay, elements[index]);
|
|
413
|
+
}
|
|
414
|
+
});
|
|
415
|
+
}
|
|
416
|
+
if (currentHighlightedElements.length > 0) {
|
|
417
|
+
hoverOverlays.forEach((overlay, index) => {
|
|
418
|
+
if (index < currentHighlightedElements.length) {
|
|
419
|
+
positionOverlay(overlay, currentHighlightedElements[index]);
|
|
420
|
+
}
|
|
421
|
+
});
|
|
422
|
+
}
|
|
423
|
+
};
|
|
424
|
+
// Initialize: Add IDs to elements that don't have them but have linenumbers
|
|
425
|
+
const elementsWithLineNumber = document.querySelectorAll("[data-linenumber]:not([data-visual-selector-id])");
|
|
426
|
+
elementsWithLineNumber.forEach((el, index) => {
|
|
427
|
+
const htmlEl = el;
|
|
428
|
+
const id = `visual-id-${htmlEl.dataset.filename}-${htmlEl.dataset.linenumber}-${index}`;
|
|
429
|
+
htmlEl.dataset.visualSelectorId = id;
|
|
430
|
+
});
|
|
431
|
+
// Create mutation observer to detect layout changes
|
|
432
|
+
const mutationObserver = new MutationObserver((mutations) => {
|
|
433
|
+
const needsUpdate = mutations.some((mutation) => {
|
|
434
|
+
const hasVisualId = (node) => {
|
|
435
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
436
|
+
const el = node;
|
|
437
|
+
if (el.dataset && el.dataset.visualSelectorId) {
|
|
438
|
+
return true;
|
|
439
|
+
}
|
|
440
|
+
for (let i = 0; i < el.children.length; i++) {
|
|
441
|
+
if (hasVisualId(el.children[i])) {
|
|
442
|
+
return true;
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
return false;
|
|
447
|
+
};
|
|
448
|
+
const isLayoutChange = mutation.type === "attributes" &&
|
|
449
|
+
(mutation.attributeName === "style" ||
|
|
450
|
+
mutation.attributeName === "class" ||
|
|
451
|
+
mutation.attributeName === "width" ||
|
|
452
|
+
mutation.attributeName === "height");
|
|
453
|
+
return isLayoutChange && hasVisualId(mutation.target);
|
|
454
|
+
});
|
|
455
|
+
if (needsUpdate) {
|
|
456
|
+
setTimeout(handleResize, 50);
|
|
457
|
+
}
|
|
458
|
+
});
|
|
459
|
+
// Set up event listeners
|
|
460
|
+
window.addEventListener("message", handleMessage);
|
|
461
|
+
window.addEventListener("scroll", handleScroll, true);
|
|
462
|
+
document.addEventListener("scroll", handleScroll, true);
|
|
463
|
+
window.addEventListener("resize", handleResize);
|
|
464
|
+
window.addEventListener("scroll", handleResize);
|
|
465
|
+
// Start observing DOM mutations
|
|
466
|
+
mutationObserver.observe(document.body, {
|
|
467
|
+
attributes: true,
|
|
468
|
+
childList: true,
|
|
469
|
+
subtree: true,
|
|
470
|
+
attributeFilter: ["style", "class", "width", "height"],
|
|
471
|
+
});
|
|
472
|
+
// Send ready message to parent
|
|
473
|
+
window.parent.postMessage({ type: "visual-edit-agent-ready" }, "*");
|
|
474
|
+
}
|
|
475
|
+
export {};
|
|
476
|
+
//# sourceMappingURL=visual-edit-agent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"visual-edit-agent.js","sourceRoot":"","sources":["../../src/injections/visual-edit-agent.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -3,9 +3,11 @@ import type { Plugin } from "vite";
|
|
|
3
3
|
export function htmlInjectionsPlugin({
|
|
4
4
|
hmrNotifier,
|
|
5
5
|
navigationNotifier,
|
|
6
|
+
visualEditAgent,
|
|
6
7
|
}: {
|
|
7
8
|
hmrNotifier: boolean;
|
|
8
9
|
navigationNotifier: boolean;
|
|
10
|
+
visualEditAgent: boolean;
|
|
9
11
|
}) {
|
|
10
12
|
return {
|
|
11
13
|
name: "html-injections",
|
|
@@ -52,6 +54,18 @@ export function htmlInjectionsPlugin({
|
|
|
52
54
|
},
|
|
53
55
|
]
|
|
54
56
|
: []),
|
|
57
|
+
...(visualEditAgent
|
|
58
|
+
? [
|
|
59
|
+
{
|
|
60
|
+
tag: "script",
|
|
61
|
+
attrs: {
|
|
62
|
+
src: "/node_modules/@base44/vite-plugin/dist/injections/visual-edit-agent.js",
|
|
63
|
+
type: "module",
|
|
64
|
+
},
|
|
65
|
+
injectTo: "body",
|
|
66
|
+
},
|
|
67
|
+
]
|
|
68
|
+
: []),
|
|
55
69
|
];
|
|
56
70
|
},
|
|
57
71
|
} as Plugin;
|
package/src/index.ts
CHANGED
|
@@ -12,12 +12,14 @@ export default function vitePlugin(
|
|
|
12
12
|
legacySDKImports?: boolean;
|
|
13
13
|
hmrNotifier?: boolean;
|
|
14
14
|
navigationNotifier?: boolean;
|
|
15
|
+
visualEditAgent?: boolean;
|
|
15
16
|
} = {}
|
|
16
17
|
) {
|
|
17
18
|
const {
|
|
18
19
|
legacySDKImports = false,
|
|
19
20
|
hmrNotifier = false,
|
|
20
21
|
navigationNotifier = false,
|
|
22
|
+
visualEditAgent = false,
|
|
21
23
|
} = opts;
|
|
22
24
|
|
|
23
25
|
return [
|
|
@@ -188,7 +190,7 @@ export default function vitePlugin(
|
|
|
188
190
|
} as Plugin,
|
|
189
191
|
errorOverlayPlugin(),
|
|
190
192
|
visualEditPlugin(),
|
|
191
|
-
htmlInjectionsPlugin({ hmrNotifier, navigationNotifier }),
|
|
193
|
+
htmlInjectionsPlugin({ hmrNotifier, navigationNotifier, visualEditAgent }),
|
|
192
194
|
]
|
|
193
195
|
: []),
|
|
194
196
|
];
|
|
@@ -0,0 +1,582 @@
|
|
|
1
|
+
if (window.self !== window.top) {
|
|
2
|
+
// State variables (replacing React useState/useRef)
|
|
3
|
+
let isVisualEditMode = false;
|
|
4
|
+
let isPopoverDragging = false;
|
|
5
|
+
let isDropdownOpen = false;
|
|
6
|
+
let hoverOverlays: HTMLDivElement[] = [];
|
|
7
|
+
let selectedOverlays: HTMLDivElement[] = [];
|
|
8
|
+
let currentHighlightedElements: Element[] = [];
|
|
9
|
+
let selectedElementId: string | null = null;
|
|
10
|
+
|
|
11
|
+
// Create overlay element
|
|
12
|
+
const createOverlay = (isSelected = false): HTMLDivElement => {
|
|
13
|
+
const overlay = document.createElement("div");
|
|
14
|
+
overlay.style.position = "absolute";
|
|
15
|
+
overlay.style.pointerEvents = "none";
|
|
16
|
+
overlay.style.transition = "all 0.1s ease-in-out";
|
|
17
|
+
overlay.style.zIndex = "9999";
|
|
18
|
+
|
|
19
|
+
if (isSelected) {
|
|
20
|
+
overlay.style.border = "2px solid #2563EB";
|
|
21
|
+
} else {
|
|
22
|
+
overlay.style.border = "2px solid #95a5fc";
|
|
23
|
+
overlay.style.backgroundColor = "rgba(99, 102, 241, 0.05)";
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return overlay;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
// Position overlay relative to element
|
|
30
|
+
const positionOverlay = (
|
|
31
|
+
overlay: HTMLDivElement,
|
|
32
|
+
element: Element,
|
|
33
|
+
isSelected = false
|
|
34
|
+
) => {
|
|
35
|
+
if (!element || !isVisualEditMode) return;
|
|
36
|
+
|
|
37
|
+
const htmlElement = element as HTMLElement;
|
|
38
|
+
// Force layout recalculation
|
|
39
|
+
void htmlElement.offsetWidth;
|
|
40
|
+
|
|
41
|
+
const rect = element.getBoundingClientRect();
|
|
42
|
+
overlay.style.top = `${rect.top + window.scrollY}px`;
|
|
43
|
+
overlay.style.left = `${rect.left + window.scrollX}px`;
|
|
44
|
+
overlay.style.width = `${rect.width}px`;
|
|
45
|
+
overlay.style.height = `${rect.height}px`;
|
|
46
|
+
|
|
47
|
+
// Check if label already exists in overlay
|
|
48
|
+
let label = overlay.querySelector("div") as HTMLDivElement | null;
|
|
49
|
+
|
|
50
|
+
if (!label) {
|
|
51
|
+
label = document.createElement("div");
|
|
52
|
+
label.textContent = element.tagName.toLowerCase();
|
|
53
|
+
label.style.position = "absolute";
|
|
54
|
+
label.style.top = "-27px";
|
|
55
|
+
label.style.left = "-2px";
|
|
56
|
+
label.style.padding = "2px 8px";
|
|
57
|
+
label.style.fontSize = "11px";
|
|
58
|
+
label.style.fontWeight = isSelected ? "500" : "400";
|
|
59
|
+
label.style.color = isSelected ? "#ffffff" : "#526cff";
|
|
60
|
+
label.style.backgroundColor = isSelected ? "#526cff" : "#DBEAFE";
|
|
61
|
+
label.style.borderRadius = "3px";
|
|
62
|
+
label.style.minWidth = "24px";
|
|
63
|
+
label.style.textAlign = "center";
|
|
64
|
+
overlay.appendChild(label);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
// Find elements by ID - first try data-source-location, fallback to data-visual-selector-id
|
|
69
|
+
const findElementsById = (id: string | null): Element[] => {
|
|
70
|
+
if (!id) return [];
|
|
71
|
+
const sourceElements = Array.from(
|
|
72
|
+
document.querySelectorAll(`[data-source-location="${id}"]`)
|
|
73
|
+
);
|
|
74
|
+
if (sourceElements.length > 0) {
|
|
75
|
+
return sourceElements;
|
|
76
|
+
}
|
|
77
|
+
return Array.from(
|
|
78
|
+
document.querySelectorAll(`[data-visual-selector-id="${id}"]`)
|
|
79
|
+
);
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
// Clear hover overlays
|
|
83
|
+
const clearHoverOverlays = () => {
|
|
84
|
+
hoverOverlays.forEach((overlay) => {
|
|
85
|
+
if (overlay && overlay.parentNode) {
|
|
86
|
+
overlay.remove();
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
hoverOverlays = [];
|
|
90
|
+
currentHighlightedElements = [];
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
// Handle mouse over event
|
|
94
|
+
const handleMouseOver = (e: MouseEvent) => {
|
|
95
|
+
if (!isVisualEditMode || isPopoverDragging) return;
|
|
96
|
+
|
|
97
|
+
const target = e.target as Element;
|
|
98
|
+
|
|
99
|
+
// Prevent hover effects when a dropdown is open
|
|
100
|
+
if (isDropdownOpen) {
|
|
101
|
+
clearHoverOverlays();
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Prevent hover effects on SVG path elements
|
|
106
|
+
if (target.tagName.toLowerCase() === "path") {
|
|
107
|
+
clearHoverOverlays();
|
|
108
|
+
return;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// Support both data-source-location and data-visual-selector-id
|
|
112
|
+
const element = target.closest(
|
|
113
|
+
"[data-source-location], [data-visual-selector-id]"
|
|
114
|
+
);
|
|
115
|
+
if (!element) {
|
|
116
|
+
clearHoverOverlays();
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// Prefer data-source-location, fallback to data-visual-selector-id
|
|
121
|
+
const htmlElement = element as HTMLElement;
|
|
122
|
+
const selectorId =
|
|
123
|
+
htmlElement.dataset.sourceLocation ||
|
|
124
|
+
htmlElement.dataset.visualSelectorId;
|
|
125
|
+
|
|
126
|
+
// Skip if this element is already selected
|
|
127
|
+
if (selectedElementId === selectorId) {
|
|
128
|
+
clearHoverOverlays();
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// Find all elements with the same ID
|
|
133
|
+
const elements = findElementsById(selectorId || null);
|
|
134
|
+
|
|
135
|
+
// Clear previous hover overlays
|
|
136
|
+
clearHoverOverlays();
|
|
137
|
+
|
|
138
|
+
// Create overlays for all matching elements
|
|
139
|
+
elements.forEach((el) => {
|
|
140
|
+
const overlay = createOverlay(false);
|
|
141
|
+
document.body.appendChild(overlay);
|
|
142
|
+
hoverOverlays.push(overlay);
|
|
143
|
+
positionOverlay(overlay, el);
|
|
144
|
+
});
|
|
145
|
+
|
|
146
|
+
currentHighlightedElements = elements;
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
// Handle mouse out event
|
|
150
|
+
const handleMouseOut = () => {
|
|
151
|
+
if (isPopoverDragging) return;
|
|
152
|
+
clearHoverOverlays();
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
// Handle element click
|
|
156
|
+
const handleElementClick = (e: MouseEvent) => {
|
|
157
|
+
if (!isVisualEditMode) return;
|
|
158
|
+
|
|
159
|
+
const target = e.target as Element;
|
|
160
|
+
|
|
161
|
+
// Close dropdowns when clicking anywhere in iframe if a dropdown is open
|
|
162
|
+
if (isDropdownOpen) {
|
|
163
|
+
e.preventDefault();
|
|
164
|
+
e.stopPropagation();
|
|
165
|
+
e.stopImmediatePropagation();
|
|
166
|
+
|
|
167
|
+
window.parent.postMessage({ type: "close-dropdowns" }, "*");
|
|
168
|
+
return;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
// Prevent clicking on SVG path elements
|
|
172
|
+
if (target.tagName.toLowerCase() === "path") {
|
|
173
|
+
return;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
// Prevent default behavior immediately when in visual edit mode
|
|
177
|
+
e.preventDefault();
|
|
178
|
+
e.stopPropagation();
|
|
179
|
+
e.stopImmediatePropagation();
|
|
180
|
+
|
|
181
|
+
// Support both data-source-location and data-visual-selector-id
|
|
182
|
+
const element = target.closest(
|
|
183
|
+
"[data-source-location], [data-visual-selector-id]"
|
|
184
|
+
);
|
|
185
|
+
if (!element) {
|
|
186
|
+
return;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
const htmlElement = element as HTMLElement;
|
|
190
|
+
const visualSelectorId =
|
|
191
|
+
htmlElement.dataset.sourceLocation ||
|
|
192
|
+
htmlElement.dataset.visualSelectorId;
|
|
193
|
+
|
|
194
|
+
// Clear any existing selected overlays
|
|
195
|
+
selectedOverlays.forEach((overlay) => {
|
|
196
|
+
if (overlay && overlay.parentNode) {
|
|
197
|
+
overlay.remove();
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
selectedOverlays = [];
|
|
201
|
+
|
|
202
|
+
// Find all elements with the same ID
|
|
203
|
+
const elements = findElementsById(visualSelectorId || null);
|
|
204
|
+
|
|
205
|
+
// Create selected overlays for all matching elements
|
|
206
|
+
elements.forEach((el) => {
|
|
207
|
+
const overlay = createOverlay(true);
|
|
208
|
+
document.body.appendChild(overlay);
|
|
209
|
+
selectedOverlays.push(overlay);
|
|
210
|
+
positionOverlay(overlay, el, true);
|
|
211
|
+
});
|
|
212
|
+
|
|
213
|
+
selectedElementId = visualSelectorId || null;
|
|
214
|
+
|
|
215
|
+
// Clear hover overlays
|
|
216
|
+
clearHoverOverlays();
|
|
217
|
+
|
|
218
|
+
// Calculate element position for popover positioning
|
|
219
|
+
const rect = element.getBoundingClientRect();
|
|
220
|
+
const elementPosition = {
|
|
221
|
+
top: rect.top,
|
|
222
|
+
left: rect.left,
|
|
223
|
+
right: rect.right,
|
|
224
|
+
bottom: rect.bottom,
|
|
225
|
+
width: rect.width,
|
|
226
|
+
height: rect.height,
|
|
227
|
+
centerX: rect.left + rect.width / 2,
|
|
228
|
+
centerY: rect.top + rect.height / 2,
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
// Send message to parent window with element info including position
|
|
232
|
+
const svgElement = element as SVGElement;
|
|
233
|
+
const elementData = {
|
|
234
|
+
type: "element-selected",
|
|
235
|
+
tagName: element.tagName,
|
|
236
|
+
classes:
|
|
237
|
+
(svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
|
|
238
|
+
element.className ||
|
|
239
|
+
"",
|
|
240
|
+
visualSelectorId: visualSelectorId,
|
|
241
|
+
content: (element as HTMLElement).innerText,
|
|
242
|
+
dataSourceLocation: htmlElement.dataset.sourceLocation,
|
|
243
|
+
isDynamicContent: htmlElement.dataset.dynamicContent === "true",
|
|
244
|
+
linenumber: htmlElement.dataset.linenumber,
|
|
245
|
+
filename: htmlElement.dataset.filename,
|
|
246
|
+
position: elementPosition,
|
|
247
|
+
};
|
|
248
|
+
window.parent.postMessage(elementData, "*");
|
|
249
|
+
};
|
|
250
|
+
|
|
251
|
+
// Unselect the current element
|
|
252
|
+
const unselectElement = () => {
|
|
253
|
+
selectedOverlays.forEach((overlay) => {
|
|
254
|
+
if (overlay && overlay.parentNode) {
|
|
255
|
+
overlay.remove();
|
|
256
|
+
}
|
|
257
|
+
});
|
|
258
|
+
selectedOverlays = [];
|
|
259
|
+
selectedElementId = null;
|
|
260
|
+
};
|
|
261
|
+
|
|
262
|
+
// Update element classes by visual selector ID
|
|
263
|
+
// Note: Parent window is responsible for class merging (twMerge).
|
|
264
|
+
// This function receives the final computed class string.
|
|
265
|
+
const updateElementClasses = (visualSelectorId: string, classes: string) => {
|
|
266
|
+
const elements = findElementsById(visualSelectorId);
|
|
267
|
+
|
|
268
|
+
if (elements.length === 0) {
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
// Update classes for all matching elements
|
|
273
|
+
elements.forEach((element) => {
|
|
274
|
+
(element as HTMLElement).className = classes;
|
|
275
|
+
});
|
|
276
|
+
|
|
277
|
+
// Use a small delay to allow the browser to recalculate layout before repositioning
|
|
278
|
+
setTimeout(() => {
|
|
279
|
+
// Reposition selected overlays
|
|
280
|
+
if (selectedElementId === visualSelectorId) {
|
|
281
|
+
selectedOverlays.forEach((overlay, index) => {
|
|
282
|
+
if (index < elements.length) {
|
|
283
|
+
positionOverlay(overlay, elements[index]!);
|
|
284
|
+
}
|
|
285
|
+
});
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
// Reposition hover overlays if needed
|
|
289
|
+
if (currentHighlightedElements.length > 0) {
|
|
290
|
+
const hoveredElement = currentHighlightedElements[0] as HTMLElement;
|
|
291
|
+
const hoveredId = hoveredElement?.dataset?.visualSelectorId;
|
|
292
|
+
if (hoveredId === visualSelectorId) {
|
|
293
|
+
hoverOverlays.forEach((overlay, index) => {
|
|
294
|
+
if (index < currentHighlightedElements.length) {
|
|
295
|
+
positionOverlay(overlay, currentHighlightedElements[index]!);
|
|
296
|
+
}
|
|
297
|
+
});
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
}, 50);
|
|
301
|
+
};
|
|
302
|
+
|
|
303
|
+
// Update element content by visual selector ID
|
|
304
|
+
const updateElementContent = (visualSelectorId: string, content: string) => {
|
|
305
|
+
const elements = findElementsById(visualSelectorId);
|
|
306
|
+
|
|
307
|
+
if (elements.length === 0) {
|
|
308
|
+
return;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
elements.forEach((element) => {
|
|
312
|
+
(element as HTMLElement).innerText = content;
|
|
313
|
+
});
|
|
314
|
+
|
|
315
|
+
setTimeout(() => {
|
|
316
|
+
if (selectedElementId === visualSelectorId) {
|
|
317
|
+
selectedOverlays.forEach((overlay, index) => {
|
|
318
|
+
if (index < elements.length) {
|
|
319
|
+
positionOverlay(overlay, elements[index]!);
|
|
320
|
+
}
|
|
321
|
+
});
|
|
322
|
+
}
|
|
323
|
+
}, 50);
|
|
324
|
+
};
|
|
325
|
+
|
|
326
|
+
// Toggle visual edit mode
|
|
327
|
+
const toggleVisualEditMode = (isEnabled: boolean) => {
|
|
328
|
+
isVisualEditMode = isEnabled;
|
|
329
|
+
|
|
330
|
+
if (!isEnabled) {
|
|
331
|
+
clearHoverOverlays();
|
|
332
|
+
|
|
333
|
+
selectedOverlays.forEach((overlay) => {
|
|
334
|
+
if (overlay && overlay.parentNode) {
|
|
335
|
+
overlay.remove();
|
|
336
|
+
}
|
|
337
|
+
});
|
|
338
|
+
selectedOverlays = [];
|
|
339
|
+
|
|
340
|
+
currentHighlightedElements = [];
|
|
341
|
+
selectedElementId = null;
|
|
342
|
+
document.body.style.cursor = "default";
|
|
343
|
+
|
|
344
|
+
document.removeEventListener("mouseover", handleMouseOver);
|
|
345
|
+
document.removeEventListener("mouseout", handleMouseOut);
|
|
346
|
+
document.removeEventListener("click", handleElementClick, true);
|
|
347
|
+
} else {
|
|
348
|
+
document.body.style.cursor = "crosshair";
|
|
349
|
+
document.addEventListener("mouseover", handleMouseOver);
|
|
350
|
+
document.addEventListener("mouseout", handleMouseOut);
|
|
351
|
+
document.addEventListener("click", handleElementClick, true);
|
|
352
|
+
}
|
|
353
|
+
};
|
|
354
|
+
|
|
355
|
+
// Handle scroll events to update popover position
|
|
356
|
+
const handleScroll = () => {
|
|
357
|
+
if (selectedElementId) {
|
|
358
|
+
const elements = findElementsById(selectedElementId);
|
|
359
|
+
if (elements.length > 0) {
|
|
360
|
+
const element = elements[0];
|
|
361
|
+
const rect = element!.getBoundingClientRect();
|
|
362
|
+
|
|
363
|
+
const viewportHeight = window.innerHeight;
|
|
364
|
+
const viewportWidth = window.innerWidth;
|
|
365
|
+
const isInViewport =
|
|
366
|
+
rect.top < viewportHeight &&
|
|
367
|
+
rect.bottom > 0 &&
|
|
368
|
+
rect.left < viewportWidth &&
|
|
369
|
+
rect.right > 0;
|
|
370
|
+
|
|
371
|
+
const elementPosition = {
|
|
372
|
+
top: rect.top,
|
|
373
|
+
left: rect.left,
|
|
374
|
+
right: rect.right,
|
|
375
|
+
bottom: rect.bottom,
|
|
376
|
+
width: rect.width,
|
|
377
|
+
height: rect.height,
|
|
378
|
+
centerX: rect.left + rect.width / 2,
|
|
379
|
+
centerY: rect.top + rect.height / 2,
|
|
380
|
+
};
|
|
381
|
+
|
|
382
|
+
window.parent.postMessage(
|
|
383
|
+
{
|
|
384
|
+
type: "element-position-update",
|
|
385
|
+
position: elementPosition,
|
|
386
|
+
isInViewport: isInViewport,
|
|
387
|
+
visualSelectorId: selectedElementId,
|
|
388
|
+
},
|
|
389
|
+
"*"
|
|
390
|
+
);
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
};
|
|
394
|
+
|
|
395
|
+
// Handle messages from parent window
|
|
396
|
+
const handleMessage = (event: MessageEvent) => {
|
|
397
|
+
const message = event.data;
|
|
398
|
+
|
|
399
|
+
switch (message.type) {
|
|
400
|
+
case "toggle-visual-edit-mode":
|
|
401
|
+
toggleVisualEditMode(message.data.enabled);
|
|
402
|
+
break;
|
|
403
|
+
|
|
404
|
+
case "update-classes":
|
|
405
|
+
if (message.data && message.data.classes !== undefined) {
|
|
406
|
+
updateElementClasses(
|
|
407
|
+
message.data.visualSelectorId,
|
|
408
|
+
message.data.classes
|
|
409
|
+
);
|
|
410
|
+
} else {
|
|
411
|
+
console.warn(
|
|
412
|
+
"[VisualEditAgent] Invalid update-classes message:",
|
|
413
|
+
message
|
|
414
|
+
);
|
|
415
|
+
}
|
|
416
|
+
break;
|
|
417
|
+
|
|
418
|
+
case "unselect-element":
|
|
419
|
+
unselectElement();
|
|
420
|
+
break;
|
|
421
|
+
|
|
422
|
+
case "refresh-page":
|
|
423
|
+
window.location.reload();
|
|
424
|
+
break;
|
|
425
|
+
|
|
426
|
+
case "update-content":
|
|
427
|
+
if (message.data && message.data.content !== undefined) {
|
|
428
|
+
updateElementContent(
|
|
429
|
+
message.data.visualSelectorId,
|
|
430
|
+
message.data.content
|
|
431
|
+
);
|
|
432
|
+
} else {
|
|
433
|
+
console.warn(
|
|
434
|
+
"[VisualEditAgent] Invalid update-content message:",
|
|
435
|
+
message
|
|
436
|
+
);
|
|
437
|
+
}
|
|
438
|
+
break;
|
|
439
|
+
|
|
440
|
+
case "request-element-position":
|
|
441
|
+
if (selectedElementId) {
|
|
442
|
+
const elements = findElementsById(selectedElementId);
|
|
443
|
+
if (elements.length > 0) {
|
|
444
|
+
const element = elements[0];
|
|
445
|
+
const rect = element!.getBoundingClientRect();
|
|
446
|
+
|
|
447
|
+
const viewportHeight = window.innerHeight;
|
|
448
|
+
const viewportWidth = window.innerWidth;
|
|
449
|
+
const isInViewport =
|
|
450
|
+
rect.top < viewportHeight &&
|
|
451
|
+
rect.bottom > 0 &&
|
|
452
|
+
rect.left < viewportWidth &&
|
|
453
|
+
rect.right > 0;
|
|
454
|
+
|
|
455
|
+
const elementPosition = {
|
|
456
|
+
top: rect.top,
|
|
457
|
+
left: rect.left,
|
|
458
|
+
right: rect.right,
|
|
459
|
+
bottom: rect.bottom,
|
|
460
|
+
width: rect.width,
|
|
461
|
+
height: rect.height,
|
|
462
|
+
centerX: rect.left + rect.width / 2,
|
|
463
|
+
centerY: rect.top + rect.height / 2,
|
|
464
|
+
};
|
|
465
|
+
|
|
466
|
+
window.parent.postMessage(
|
|
467
|
+
{
|
|
468
|
+
type: "element-position-update",
|
|
469
|
+
position: elementPosition,
|
|
470
|
+
isInViewport: isInViewport,
|
|
471
|
+
visualSelectorId: selectedElementId,
|
|
472
|
+
},
|
|
473
|
+
"*"
|
|
474
|
+
);
|
|
475
|
+
}
|
|
476
|
+
}
|
|
477
|
+
break;
|
|
478
|
+
|
|
479
|
+
case "popover-drag-state":
|
|
480
|
+
if (message.data && message.data.isDragging !== undefined) {
|
|
481
|
+
isPopoverDragging = message.data.isDragging;
|
|
482
|
+
if (message.data.isDragging) {
|
|
483
|
+
clearHoverOverlays();
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
break;
|
|
487
|
+
|
|
488
|
+
case "dropdown-state":
|
|
489
|
+
if (message.data && message.data.isOpen !== undefined) {
|
|
490
|
+
isDropdownOpen = message.data.isOpen;
|
|
491
|
+
if (message.data.isOpen) {
|
|
492
|
+
clearHoverOverlays();
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
break;
|
|
496
|
+
|
|
497
|
+
default:
|
|
498
|
+
break;
|
|
499
|
+
}
|
|
500
|
+
};
|
|
501
|
+
|
|
502
|
+
// Handle window resize to reposition overlays
|
|
503
|
+
const handleResize = () => {
|
|
504
|
+
if (selectedElementId) {
|
|
505
|
+
const elements = findElementsById(selectedElementId);
|
|
506
|
+
selectedOverlays.forEach((overlay, index) => {
|
|
507
|
+
if (index < elements.length) {
|
|
508
|
+
positionOverlay(overlay, elements[index]!);
|
|
509
|
+
}
|
|
510
|
+
});
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
if (currentHighlightedElements.length > 0) {
|
|
514
|
+
hoverOverlays.forEach((overlay, index) => {
|
|
515
|
+
if (index < currentHighlightedElements.length) {
|
|
516
|
+
positionOverlay(overlay, currentHighlightedElements[index]!);
|
|
517
|
+
}
|
|
518
|
+
});
|
|
519
|
+
}
|
|
520
|
+
};
|
|
521
|
+
|
|
522
|
+
// Initialize: Add IDs to elements that don't have them but have linenumbers
|
|
523
|
+
const elementsWithLineNumber = document.querySelectorAll(
|
|
524
|
+
"[data-linenumber]:not([data-visual-selector-id])"
|
|
525
|
+
);
|
|
526
|
+
elementsWithLineNumber.forEach((el, index) => {
|
|
527
|
+
const htmlEl = el as HTMLElement;
|
|
528
|
+
const id = `visual-id-${htmlEl.dataset.filename}-${htmlEl.dataset.linenumber}-${index}`;
|
|
529
|
+
htmlEl.dataset.visualSelectorId = id;
|
|
530
|
+
});
|
|
531
|
+
|
|
532
|
+
// Create mutation observer to detect layout changes
|
|
533
|
+
const mutationObserver = new MutationObserver((mutations) => {
|
|
534
|
+
const needsUpdate = mutations.some((mutation) => {
|
|
535
|
+
const hasVisualId = (node: Node): boolean => {
|
|
536
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
537
|
+
const el = node as HTMLElement;
|
|
538
|
+
if (el.dataset && el.dataset.visualSelectorId) {
|
|
539
|
+
return true;
|
|
540
|
+
}
|
|
541
|
+
for (let i = 0; i < el.children.length; i++) {
|
|
542
|
+
if (hasVisualId(el.children[i]!)) {
|
|
543
|
+
return true;
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
return false;
|
|
548
|
+
};
|
|
549
|
+
|
|
550
|
+
const isLayoutChange =
|
|
551
|
+
mutation.type === "attributes" &&
|
|
552
|
+
(mutation.attributeName === "style" ||
|
|
553
|
+
mutation.attributeName === "class" ||
|
|
554
|
+
mutation.attributeName === "width" ||
|
|
555
|
+
mutation.attributeName === "height");
|
|
556
|
+
|
|
557
|
+
return isLayoutChange && hasVisualId(mutation.target);
|
|
558
|
+
});
|
|
559
|
+
|
|
560
|
+
if (needsUpdate) {
|
|
561
|
+
setTimeout(handleResize, 50);
|
|
562
|
+
}
|
|
563
|
+
});
|
|
564
|
+
|
|
565
|
+
// Set up event listeners
|
|
566
|
+
window.addEventListener("message", handleMessage);
|
|
567
|
+
window.addEventListener("scroll", handleScroll, true);
|
|
568
|
+
document.addEventListener("scroll", handleScroll, true);
|
|
569
|
+
window.addEventListener("resize", handleResize);
|
|
570
|
+
window.addEventListener("scroll", handleResize);
|
|
571
|
+
|
|
572
|
+
// Start observing DOM mutations
|
|
573
|
+
mutationObserver.observe(document.body, {
|
|
574
|
+
attributes: true,
|
|
575
|
+
childList: true,
|
|
576
|
+
subtree: true,
|
|
577
|
+
attributeFilter: ["style", "class", "width", "height"],
|
|
578
|
+
});
|
|
579
|
+
|
|
580
|
+
// Send ready message to parent
|
|
581
|
+
window.parent.postMessage({ type: "visual-edit-agent-ready" }, "*");
|
|
582
|
+
}
|