@sirendesign/markup 1.0.24 → 1.0.25
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/index.esm.js +183 -380
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +279 -476
- package/dist/index.js.map +1 -1
- package/dist/markup-widget.esm.js +227 -245
- package/dist/markup-widget.esm.js.map +1 -1
- package/dist/markup-widget.js +226 -244
- package/dist/markup-widget.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
5
|
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
-
var
|
|
7
|
+
var React = require('react');
|
|
8
8
|
var reactDom = require('react-dom');
|
|
9
9
|
|
|
10
10
|
const createStoreImpl = (createState) => {
|
|
@@ -44,85 +44,10 @@ function getDefaultExportFromCjs (x) {
|
|
|
44
44
|
|
|
45
45
|
var withSelector = {exports: {}};
|
|
46
46
|
|
|
47
|
-
var
|
|
47
|
+
var withSelector_development = {};
|
|
48
48
|
|
|
49
49
|
var shim = {exports: {}};
|
|
50
50
|
|
|
51
|
-
var useSyncExternalStoreShim_production = {};
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* @license React
|
|
55
|
-
* use-sync-external-store-shim.production.js
|
|
56
|
-
*
|
|
57
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
58
|
-
*
|
|
59
|
-
* This source code is licensed under the MIT license found in the
|
|
60
|
-
* LICENSE file in the root directory of this source tree.
|
|
61
|
-
*/
|
|
62
|
-
|
|
63
|
-
var hasRequiredUseSyncExternalStoreShim_production;
|
|
64
|
-
|
|
65
|
-
function requireUseSyncExternalStoreShim_production () {
|
|
66
|
-
if (hasRequiredUseSyncExternalStoreShim_production) return useSyncExternalStoreShim_production;
|
|
67
|
-
hasRequiredUseSyncExternalStoreShim_production = 1;
|
|
68
|
-
var React = require$$0;
|
|
69
|
-
function is(x, y) {
|
|
70
|
-
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
71
|
-
}
|
|
72
|
-
var objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
73
|
-
useState = React.useState,
|
|
74
|
-
useEffect = React.useEffect,
|
|
75
|
-
useLayoutEffect = React.useLayoutEffect,
|
|
76
|
-
useDebugValue = React.useDebugValue;
|
|
77
|
-
function useSyncExternalStore$2(subscribe, getSnapshot) {
|
|
78
|
-
var value = getSnapshot(),
|
|
79
|
-
_useState = useState({ inst: { value: value, getSnapshot: getSnapshot } }),
|
|
80
|
-
inst = _useState[0].inst,
|
|
81
|
-
forceUpdate = _useState[1];
|
|
82
|
-
useLayoutEffect(
|
|
83
|
-
function () {
|
|
84
|
-
inst.value = value;
|
|
85
|
-
inst.getSnapshot = getSnapshot;
|
|
86
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
87
|
-
},
|
|
88
|
-
[subscribe, value, getSnapshot]
|
|
89
|
-
);
|
|
90
|
-
useEffect(
|
|
91
|
-
function () {
|
|
92
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
93
|
-
return subscribe(function () {
|
|
94
|
-
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
95
|
-
});
|
|
96
|
-
},
|
|
97
|
-
[subscribe]
|
|
98
|
-
);
|
|
99
|
-
useDebugValue(value);
|
|
100
|
-
return value;
|
|
101
|
-
}
|
|
102
|
-
function checkIfSnapshotChanged(inst) {
|
|
103
|
-
var latestGetSnapshot = inst.getSnapshot;
|
|
104
|
-
inst = inst.value;
|
|
105
|
-
try {
|
|
106
|
-
var nextValue = latestGetSnapshot();
|
|
107
|
-
return !objectIs(inst, nextValue);
|
|
108
|
-
} catch (error) {
|
|
109
|
-
return true;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
function useSyncExternalStore$1(subscribe, getSnapshot) {
|
|
113
|
-
return getSnapshot();
|
|
114
|
-
}
|
|
115
|
-
var shim =
|
|
116
|
-
"undefined" === typeof window ||
|
|
117
|
-
"undefined" === typeof window.document ||
|
|
118
|
-
"undefined" === typeof window.document.createElement
|
|
119
|
-
? useSyncExternalStore$1
|
|
120
|
-
: useSyncExternalStore$2;
|
|
121
|
-
useSyncExternalStoreShim_production.useSyncExternalStore =
|
|
122
|
-
void 0 !== React.useSyncExternalStore ? React.useSyncExternalStore : shim;
|
|
123
|
-
return useSyncExternalStoreShim_production;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
51
|
var useSyncExternalStoreShim_development = {};
|
|
127
52
|
|
|
128
53
|
/**
|
|
@@ -134,206 +59,95 @@ var useSyncExternalStoreShim_development = {};
|
|
|
134
59
|
* This source code is licensed under the MIT license found in the
|
|
135
60
|
* LICENSE file in the root directory of this source tree.
|
|
136
61
|
*/
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
})();
|
|
227
|
-
return useSyncExternalStoreShim_development;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
var hasRequiredShim;
|
|
231
|
-
|
|
232
|
-
function requireShim () {
|
|
233
|
-
if (hasRequiredShim) return shim.exports;
|
|
234
|
-
hasRequiredShim = 1;
|
|
235
|
-
|
|
236
|
-
if (process.env.NODE_ENV === 'production') {
|
|
237
|
-
shim.exports = requireUseSyncExternalStoreShim_production();
|
|
238
|
-
} else {
|
|
239
|
-
shim.exports = requireUseSyncExternalStoreShim_development();
|
|
240
|
-
}
|
|
241
|
-
return shim.exports;
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
/**
|
|
245
|
-
* @license React
|
|
246
|
-
* use-sync-external-store-shim/with-selector.production.js
|
|
247
|
-
*
|
|
248
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
249
|
-
*
|
|
250
|
-
* This source code is licensed under the MIT license found in the
|
|
251
|
-
* LICENSE file in the root directory of this source tree.
|
|
252
|
-
*/
|
|
253
|
-
|
|
254
|
-
var hasRequiredWithSelector_production;
|
|
255
|
-
|
|
256
|
-
function requireWithSelector_production () {
|
|
257
|
-
if (hasRequiredWithSelector_production) return withSelector_production;
|
|
258
|
-
hasRequiredWithSelector_production = 1;
|
|
259
|
-
var React = require$$0,
|
|
260
|
-
shim = requireShim();
|
|
261
|
-
function is(x, y) {
|
|
262
|
-
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
263
|
-
}
|
|
264
|
-
var objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
265
|
-
useSyncExternalStore = shim.useSyncExternalStore,
|
|
266
|
-
useRef = React.useRef,
|
|
267
|
-
useEffect = React.useEffect,
|
|
268
|
-
useMemo = React.useMemo,
|
|
269
|
-
useDebugValue = React.useDebugValue;
|
|
270
|
-
withSelector_production.useSyncExternalStoreWithSelector = function (
|
|
271
|
-
subscribe,
|
|
272
|
-
getSnapshot,
|
|
273
|
-
getServerSnapshot,
|
|
274
|
-
selector,
|
|
275
|
-
isEqual
|
|
276
|
-
) {
|
|
277
|
-
var instRef = useRef(null);
|
|
278
|
-
if (null === instRef.current) {
|
|
279
|
-
var inst = { hasValue: false, value: null };
|
|
280
|
-
instRef.current = inst;
|
|
281
|
-
} else inst = instRef.current;
|
|
282
|
-
instRef = useMemo(
|
|
283
|
-
function () {
|
|
284
|
-
function memoizedSelector(nextSnapshot) {
|
|
285
|
-
if (!hasMemo) {
|
|
286
|
-
hasMemo = true;
|
|
287
|
-
memoizedSnapshot = nextSnapshot;
|
|
288
|
-
nextSnapshot = selector(nextSnapshot);
|
|
289
|
-
if (void 0 !== isEqual && inst.hasValue) {
|
|
290
|
-
var currentSelection = inst.value;
|
|
291
|
-
if (isEqual(currentSelection, nextSnapshot))
|
|
292
|
-
return (memoizedSelection = currentSelection);
|
|
293
|
-
}
|
|
294
|
-
return (memoizedSelection = nextSnapshot);
|
|
295
|
-
}
|
|
296
|
-
currentSelection = memoizedSelection;
|
|
297
|
-
if (objectIs(memoizedSnapshot, nextSnapshot)) return currentSelection;
|
|
298
|
-
var nextSelection = selector(nextSnapshot);
|
|
299
|
-
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
|
|
300
|
-
return (memoizedSnapshot = nextSnapshot), currentSelection;
|
|
301
|
-
memoizedSnapshot = nextSnapshot;
|
|
302
|
-
return (memoizedSelection = nextSelection);
|
|
303
|
-
}
|
|
304
|
-
var hasMemo = false,
|
|
305
|
-
memoizedSnapshot,
|
|
306
|
-
memoizedSelection,
|
|
307
|
-
maybeGetServerSnapshot =
|
|
308
|
-
void 0 === getServerSnapshot ? null : getServerSnapshot;
|
|
309
|
-
return [
|
|
310
|
-
function () {
|
|
311
|
-
return memoizedSelector(getSnapshot());
|
|
312
|
-
},
|
|
313
|
-
null === maybeGetServerSnapshot
|
|
314
|
-
? void 0
|
|
315
|
-
: function () {
|
|
316
|
-
return memoizedSelector(maybeGetServerSnapshot());
|
|
317
|
-
}
|
|
318
|
-
];
|
|
319
|
-
},
|
|
320
|
-
[getSnapshot, getServerSnapshot, selector, isEqual]
|
|
321
|
-
);
|
|
322
|
-
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
|
|
323
|
-
useEffect(
|
|
324
|
-
function () {
|
|
325
|
-
inst.hasValue = true;
|
|
326
|
-
inst.value = value;
|
|
327
|
-
},
|
|
328
|
-
[value]
|
|
329
|
-
);
|
|
330
|
-
useDebugValue(value);
|
|
331
|
-
return value;
|
|
332
|
-
};
|
|
333
|
-
return withSelector_production;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
var withSelector_development = {};
|
|
62
|
+
((function () {
|
|
63
|
+
function is(x, y) {
|
|
64
|
+
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
65
|
+
}
|
|
66
|
+
function useSyncExternalStore$2(subscribe, getSnapshot) {
|
|
67
|
+
didWarnOld18Alpha ||
|
|
68
|
+
void 0 === React$1.startTransition ||
|
|
69
|
+
((didWarnOld18Alpha = true),
|
|
70
|
+
console.error(
|
|
71
|
+
"You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
|
|
72
|
+
));
|
|
73
|
+
var value = getSnapshot();
|
|
74
|
+
if (!didWarnUncachedGetSnapshot) {
|
|
75
|
+
var cachedValue = getSnapshot();
|
|
76
|
+
objectIs(value, cachedValue) ||
|
|
77
|
+
(console.error(
|
|
78
|
+
"The result of getSnapshot should be cached to avoid an infinite loop"
|
|
79
|
+
),
|
|
80
|
+
(didWarnUncachedGetSnapshot = true));
|
|
81
|
+
}
|
|
82
|
+
cachedValue = useState({
|
|
83
|
+
inst: { value: value, getSnapshot: getSnapshot }
|
|
84
|
+
});
|
|
85
|
+
var inst = cachedValue[0].inst,
|
|
86
|
+
forceUpdate = cachedValue[1];
|
|
87
|
+
useLayoutEffect(
|
|
88
|
+
function () {
|
|
89
|
+
inst.value = value;
|
|
90
|
+
inst.getSnapshot = getSnapshot;
|
|
91
|
+
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
92
|
+
},
|
|
93
|
+
[subscribe, value, getSnapshot]
|
|
94
|
+
);
|
|
95
|
+
useEffect(
|
|
96
|
+
function () {
|
|
97
|
+
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
98
|
+
return subscribe(function () {
|
|
99
|
+
checkIfSnapshotChanged(inst) && forceUpdate({ inst: inst });
|
|
100
|
+
});
|
|
101
|
+
},
|
|
102
|
+
[subscribe]
|
|
103
|
+
);
|
|
104
|
+
useDebugValue(value);
|
|
105
|
+
return value;
|
|
106
|
+
}
|
|
107
|
+
function checkIfSnapshotChanged(inst) {
|
|
108
|
+
var latestGetSnapshot = inst.getSnapshot;
|
|
109
|
+
inst = inst.value;
|
|
110
|
+
try {
|
|
111
|
+
var nextValue = latestGetSnapshot();
|
|
112
|
+
return !objectIs(inst, nextValue);
|
|
113
|
+
} catch (error) {
|
|
114
|
+
return true;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
function useSyncExternalStore$1(subscribe, getSnapshot) {
|
|
118
|
+
return getSnapshot();
|
|
119
|
+
}
|
|
120
|
+
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
121
|
+
"function" ===
|
|
122
|
+
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
|
|
123
|
+
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
|
|
124
|
+
var React$1 = React,
|
|
125
|
+
objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
126
|
+
useState = React$1.useState,
|
|
127
|
+
useEffect = React$1.useEffect,
|
|
128
|
+
useLayoutEffect = React$1.useLayoutEffect,
|
|
129
|
+
useDebugValue = React$1.useDebugValue,
|
|
130
|
+
didWarnOld18Alpha = false,
|
|
131
|
+
didWarnUncachedGetSnapshot = false,
|
|
132
|
+
shim =
|
|
133
|
+
"undefined" === typeof window ||
|
|
134
|
+
"undefined" === typeof window.document ||
|
|
135
|
+
"undefined" === typeof window.document.createElement
|
|
136
|
+
? useSyncExternalStore$1
|
|
137
|
+
: useSyncExternalStore$2;
|
|
138
|
+
useSyncExternalStoreShim_development.useSyncExternalStore =
|
|
139
|
+
void 0 !== React$1.useSyncExternalStore ? React$1.useSyncExternalStore : shim;
|
|
140
|
+
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
141
|
+
"function" ===
|
|
142
|
+
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
|
|
143
|
+
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
|
|
144
|
+
}))();
|
|
145
|
+
|
|
146
|
+
{
|
|
147
|
+
shim.exports = useSyncExternalStoreShim_development;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
var shimExports = shim.exports;
|
|
337
151
|
|
|
338
152
|
/**
|
|
339
153
|
* @license React
|
|
@@ -344,111 +158,100 @@ var withSelector_development = {};
|
|
|
344
158
|
* This source code is licensed under the MIT license found in the
|
|
345
159
|
* LICENSE file in the root directory of this source tree.
|
|
346
160
|
*/
|
|
161
|
+
((function () {
|
|
162
|
+
function is(x, y) {
|
|
163
|
+
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
164
|
+
}
|
|
165
|
+
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
166
|
+
"function" ===
|
|
167
|
+
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
|
|
168
|
+
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
|
|
169
|
+
var React$1 = React,
|
|
170
|
+
shim = shimExports,
|
|
171
|
+
objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
172
|
+
useSyncExternalStore = shim.useSyncExternalStore,
|
|
173
|
+
useRef = React$1.useRef,
|
|
174
|
+
useEffect = React$1.useEffect,
|
|
175
|
+
useMemo = React$1.useMemo,
|
|
176
|
+
useDebugValue = React$1.useDebugValue;
|
|
177
|
+
withSelector_development.useSyncExternalStoreWithSelector = function (
|
|
178
|
+
subscribe,
|
|
179
|
+
getSnapshot,
|
|
180
|
+
getServerSnapshot,
|
|
181
|
+
selector,
|
|
182
|
+
isEqual
|
|
183
|
+
) {
|
|
184
|
+
var instRef = useRef(null);
|
|
185
|
+
if (null === instRef.current) {
|
|
186
|
+
var inst = { hasValue: false, value: null };
|
|
187
|
+
instRef.current = inst;
|
|
188
|
+
} else inst = instRef.current;
|
|
189
|
+
instRef = useMemo(
|
|
190
|
+
function () {
|
|
191
|
+
function memoizedSelector(nextSnapshot) {
|
|
192
|
+
if (!hasMemo) {
|
|
193
|
+
hasMemo = true;
|
|
194
|
+
memoizedSnapshot = nextSnapshot;
|
|
195
|
+
nextSnapshot = selector(nextSnapshot);
|
|
196
|
+
if (void 0 !== isEqual && inst.hasValue) {
|
|
197
|
+
var currentSelection = inst.value;
|
|
198
|
+
if (isEqual(currentSelection, nextSnapshot))
|
|
199
|
+
return (memoizedSelection = currentSelection);
|
|
200
|
+
}
|
|
201
|
+
return (memoizedSelection = nextSnapshot);
|
|
202
|
+
}
|
|
203
|
+
currentSelection = memoizedSelection;
|
|
204
|
+
if (objectIs(memoizedSnapshot, nextSnapshot))
|
|
205
|
+
return currentSelection;
|
|
206
|
+
var nextSelection = selector(nextSnapshot);
|
|
207
|
+
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
|
|
208
|
+
return (memoizedSnapshot = nextSnapshot), currentSelection;
|
|
209
|
+
memoizedSnapshot = nextSnapshot;
|
|
210
|
+
return (memoizedSelection = nextSelection);
|
|
211
|
+
}
|
|
212
|
+
var hasMemo = false,
|
|
213
|
+
memoizedSnapshot,
|
|
214
|
+
memoizedSelection,
|
|
215
|
+
maybeGetServerSnapshot =
|
|
216
|
+
void 0 === getServerSnapshot ? null : getServerSnapshot;
|
|
217
|
+
return [
|
|
218
|
+
function () {
|
|
219
|
+
return memoizedSelector(getSnapshot());
|
|
220
|
+
},
|
|
221
|
+
null === maybeGetServerSnapshot
|
|
222
|
+
? void 0
|
|
223
|
+
: function () {
|
|
224
|
+
return memoizedSelector(maybeGetServerSnapshot());
|
|
225
|
+
}
|
|
226
|
+
];
|
|
227
|
+
},
|
|
228
|
+
[getSnapshot, getServerSnapshot, selector, isEqual]
|
|
229
|
+
);
|
|
230
|
+
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
|
|
231
|
+
useEffect(
|
|
232
|
+
function () {
|
|
233
|
+
inst.hasValue = true;
|
|
234
|
+
inst.value = value;
|
|
235
|
+
},
|
|
236
|
+
[value]
|
|
237
|
+
);
|
|
238
|
+
useDebugValue(value);
|
|
239
|
+
return value;
|
|
240
|
+
};
|
|
241
|
+
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
242
|
+
"function" ===
|
|
243
|
+
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
|
|
244
|
+
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
|
|
245
|
+
}))();
|
|
347
246
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
function requireWithSelector_development () {
|
|
351
|
-
if (hasRequiredWithSelector_development) return withSelector_development;
|
|
352
|
-
hasRequiredWithSelector_development = 1;
|
|
353
|
-
"production" !== process.env.NODE_ENV &&
|
|
354
|
-
(function () {
|
|
355
|
-
function is(x, y) {
|
|
356
|
-
return (x === y && (0 !== x || 1 / x === 1 / y)) || (x !== x && y !== y);
|
|
357
|
-
}
|
|
358
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
359
|
-
"function" ===
|
|
360
|
-
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
|
|
361
|
-
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
|
|
362
|
-
var React = require$$0,
|
|
363
|
-
shim = requireShim(),
|
|
364
|
-
objectIs = "function" === typeof Object.is ? Object.is : is,
|
|
365
|
-
useSyncExternalStore = shim.useSyncExternalStore,
|
|
366
|
-
useRef = React.useRef,
|
|
367
|
-
useEffect = React.useEffect,
|
|
368
|
-
useMemo = React.useMemo,
|
|
369
|
-
useDebugValue = React.useDebugValue;
|
|
370
|
-
withSelector_development.useSyncExternalStoreWithSelector = function (
|
|
371
|
-
subscribe,
|
|
372
|
-
getSnapshot,
|
|
373
|
-
getServerSnapshot,
|
|
374
|
-
selector,
|
|
375
|
-
isEqual
|
|
376
|
-
) {
|
|
377
|
-
var instRef = useRef(null);
|
|
378
|
-
if (null === instRef.current) {
|
|
379
|
-
var inst = { hasValue: false, value: null };
|
|
380
|
-
instRef.current = inst;
|
|
381
|
-
} else inst = instRef.current;
|
|
382
|
-
instRef = useMemo(
|
|
383
|
-
function () {
|
|
384
|
-
function memoizedSelector(nextSnapshot) {
|
|
385
|
-
if (!hasMemo) {
|
|
386
|
-
hasMemo = true;
|
|
387
|
-
memoizedSnapshot = nextSnapshot;
|
|
388
|
-
nextSnapshot = selector(nextSnapshot);
|
|
389
|
-
if (void 0 !== isEqual && inst.hasValue) {
|
|
390
|
-
var currentSelection = inst.value;
|
|
391
|
-
if (isEqual(currentSelection, nextSnapshot))
|
|
392
|
-
return (memoizedSelection = currentSelection);
|
|
393
|
-
}
|
|
394
|
-
return (memoizedSelection = nextSnapshot);
|
|
395
|
-
}
|
|
396
|
-
currentSelection = memoizedSelection;
|
|
397
|
-
if (objectIs(memoizedSnapshot, nextSnapshot))
|
|
398
|
-
return currentSelection;
|
|
399
|
-
var nextSelection = selector(nextSnapshot);
|
|
400
|
-
if (void 0 !== isEqual && isEqual(currentSelection, nextSelection))
|
|
401
|
-
return (memoizedSnapshot = nextSnapshot), currentSelection;
|
|
402
|
-
memoizedSnapshot = nextSnapshot;
|
|
403
|
-
return (memoizedSelection = nextSelection);
|
|
404
|
-
}
|
|
405
|
-
var hasMemo = false,
|
|
406
|
-
memoizedSnapshot,
|
|
407
|
-
memoizedSelection,
|
|
408
|
-
maybeGetServerSnapshot =
|
|
409
|
-
void 0 === getServerSnapshot ? null : getServerSnapshot;
|
|
410
|
-
return [
|
|
411
|
-
function () {
|
|
412
|
-
return memoizedSelector(getSnapshot());
|
|
413
|
-
},
|
|
414
|
-
null === maybeGetServerSnapshot
|
|
415
|
-
? void 0
|
|
416
|
-
: function () {
|
|
417
|
-
return memoizedSelector(maybeGetServerSnapshot());
|
|
418
|
-
}
|
|
419
|
-
];
|
|
420
|
-
},
|
|
421
|
-
[getSnapshot, getServerSnapshot, selector, isEqual]
|
|
422
|
-
);
|
|
423
|
-
var value = useSyncExternalStore(subscribe, instRef[0], instRef[1]);
|
|
424
|
-
useEffect(
|
|
425
|
-
function () {
|
|
426
|
-
inst.hasValue = true;
|
|
427
|
-
inst.value = value;
|
|
428
|
-
},
|
|
429
|
-
[value]
|
|
430
|
-
);
|
|
431
|
-
useDebugValue(value);
|
|
432
|
-
return value;
|
|
433
|
-
};
|
|
434
|
-
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
|
|
435
|
-
"function" ===
|
|
436
|
-
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
|
|
437
|
-
__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
|
|
438
|
-
})();
|
|
439
|
-
return withSelector_development;
|
|
440
|
-
}
|
|
441
|
-
|
|
442
|
-
if (process.env.NODE_ENV === 'production') {
|
|
443
|
-
withSelector.exports = requireWithSelector_production();
|
|
444
|
-
} else {
|
|
445
|
-
withSelector.exports = requireWithSelector_development();
|
|
247
|
+
{
|
|
248
|
+
withSelector.exports = withSelector_development;
|
|
446
249
|
}
|
|
447
250
|
|
|
448
251
|
var withSelectorExports = withSelector.exports;
|
|
449
252
|
var useSyncExternalStoreExports = /*@__PURE__*/getDefaultExportFromCjs(withSelectorExports);
|
|
450
253
|
|
|
451
|
-
const { useDebugValue } =
|
|
254
|
+
const { useDebugValue } = React;
|
|
452
255
|
const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
|
|
453
256
|
let didWarnAboutEqualityFn = false;
|
|
454
257
|
const identity = (arg) => arg;
|
|
@@ -17105,19 +16908,19 @@ const colors = [
|
|
|
17105
16908
|
];
|
|
17106
16909
|
const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
17107
16910
|
var _a, _b;
|
|
17108
|
-
const canvasRef =
|
|
17109
|
-
const containerRef =
|
|
17110
|
-
const [activeTool, setActiveTool] =
|
|
17111
|
-
const [activeColor, setActiveColor] =
|
|
17112
|
-
const [isDrawing, setIsDrawing] =
|
|
17113
|
-
const [currentPath, setCurrentPath] =
|
|
17114
|
-
const [annotations, setAnnotations] =
|
|
17115
|
-
const [imageLoaded, setImageLoaded] =
|
|
17116
|
-
const [startPoint, setStartPoint] =
|
|
17117
|
-
const [textInput, setTextInput] =
|
|
17118
|
-
const [textPosition, setTextPosition] =
|
|
17119
|
-
const imgRef =
|
|
17120
|
-
|
|
16911
|
+
const canvasRef = React.useRef(null);
|
|
16912
|
+
const containerRef = React.useRef(null);
|
|
16913
|
+
const [activeTool, setActiveTool] = React.useState('pen');
|
|
16914
|
+
const [activeColor, setActiveColor] = React.useState('#EF4444');
|
|
16915
|
+
const [isDrawing, setIsDrawing] = React.useState(false);
|
|
16916
|
+
const [currentPath, setCurrentPath] = React.useState([]);
|
|
16917
|
+
const [annotations, setAnnotations] = React.useState([]);
|
|
16918
|
+
const [imageLoaded, setImageLoaded] = React.useState(false);
|
|
16919
|
+
const [startPoint, setStartPoint] = React.useState(null);
|
|
16920
|
+
const [textInput, setTextInput] = React.useState('');
|
|
16921
|
+
const [textPosition, setTextPosition] = React.useState(null);
|
|
16922
|
+
const imgRef = React.useRef(null);
|
|
16923
|
+
React.useEffect(() => {
|
|
17121
16924
|
const img = new Image();
|
|
17122
16925
|
img.onload = () => {
|
|
17123
16926
|
imgRef.current = img;
|
|
@@ -17125,7 +16928,7 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
|
17125
16928
|
};
|
|
17126
16929
|
img.src = screenshot;
|
|
17127
16930
|
}, [screenshot]);
|
|
17128
|
-
|
|
16931
|
+
React.useEffect(() => {
|
|
17129
16932
|
if (!imageLoaded || !canvasRef.current || !imgRef.current)
|
|
17130
16933
|
return;
|
|
17131
16934
|
const canvas = canvasRef.current;
|
|
@@ -17152,7 +16955,7 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
|
17152
16955
|
canvas.height = height;
|
|
17153
16956
|
redrawCanvas(ctx, width, height);
|
|
17154
16957
|
}, [imageLoaded, annotations]);
|
|
17155
|
-
const redrawCanvas =
|
|
16958
|
+
const redrawCanvas = React.useCallback((ctx, width, height) => {
|
|
17156
16959
|
if (!imgRef.current)
|
|
17157
16960
|
return;
|
|
17158
16961
|
ctx.clearRect(0, 0, width, height);
|
|
@@ -17405,27 +17208,27 @@ const AnnotationOverlay = ({ screenshot, onComplete, onCancel, }) => {
|
|
|
17405
17208
|
const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastClickedElement, lastClickedText, }) => {
|
|
17406
17209
|
var _a, _b;
|
|
17407
17210
|
const { config, currentScreenshot, setCurrentScreenshot, annotations, setAnnotations, clearAnnotations, setIsCapturing, isCapturing, currentUser, setIsOpen, } = useMarkupStore();
|
|
17408
|
-
const [title, setTitle] =
|
|
17409
|
-
const [description, setDescription] =
|
|
17410
|
-
const [priority, setPriority] =
|
|
17411
|
-
const [feedbackType, setFeedbackType] =
|
|
17412
|
-
const [currentCopy, setCurrentCopy] =
|
|
17413
|
-
const [newCopy, setNewCopy] =
|
|
17414
|
-
const [designMockup, setDesignMockup] =
|
|
17415
|
-
const [selectedTags, setSelectedTags] =
|
|
17416
|
-
const [isAnnotating, setIsAnnotating] =
|
|
17417
|
-
const [isSubmitting, setIsSubmitting] =
|
|
17418
|
-
const [annotatedScreenshot, setAnnotatedScreenshot] =
|
|
17211
|
+
const [title, setTitle] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.title) || "");
|
|
17212
|
+
const [description, setDescription] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.description) || "");
|
|
17213
|
+
const [priority, setPriority] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.priority) || "medium");
|
|
17214
|
+
const [feedbackType, setFeedbackType] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.type) || "general");
|
|
17215
|
+
const [currentCopy, setCurrentCopy] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.currentCopy) || "");
|
|
17216
|
+
const [newCopy, setNewCopy] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.newCopy) || "");
|
|
17217
|
+
const [designMockup, setDesignMockup] = React.useState(initialData === null || initialData === void 0 ? void 0 : initialData.designMockup);
|
|
17218
|
+
const [selectedTags, setSelectedTags] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.tags) || []);
|
|
17219
|
+
const [isAnnotating, setIsAnnotating] = React.useState(false);
|
|
17220
|
+
const [isSubmitting, setIsSubmitting] = React.useState(false);
|
|
17221
|
+
const [annotatedScreenshot, setAnnotatedScreenshot] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.screenshot) || null);
|
|
17419
17222
|
// Screen recording states
|
|
17420
|
-
const [isRecording, setIsRecording] =
|
|
17421
|
-
const [recordedVideo, setRecordedVideo] =
|
|
17422
|
-
const [recordedBlob, setRecordedBlob] =
|
|
17423
|
-
const [isUploadingVideo, setIsUploadingVideo] =
|
|
17424
|
-
const [mediaRecorder, setMediaRecorder] =
|
|
17425
|
-
const [recordingStream, setRecordingStream] =
|
|
17223
|
+
const [isRecording, setIsRecording] = React.useState(false);
|
|
17224
|
+
const [recordedVideo, setRecordedVideo] = React.useState(initialData === null || initialData === void 0 ? void 0 : initialData.screenRecording);
|
|
17225
|
+
const [recordedBlob, setRecordedBlob] = React.useState(null);
|
|
17226
|
+
const [isUploadingVideo, setIsUploadingVideo] = React.useState(false);
|
|
17227
|
+
const [mediaRecorder, setMediaRecorder] = React.useState(null);
|
|
17228
|
+
const [recordingStream, setRecordingStream] = React.useState(null);
|
|
17426
17229
|
// Pin placement states
|
|
17427
|
-
const [isPlacingPin, setIsPlacingPin] =
|
|
17428
|
-
const [pinPosition, setPinPosition] =
|
|
17230
|
+
const [isPlacingPin, setIsPlacingPin] = React.useState(false);
|
|
17231
|
+
const [pinPosition, setPinPosition] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.pinLocation)
|
|
17429
17232
|
? {
|
|
17430
17233
|
x: initialData.pinLocation.x,
|
|
17431
17234
|
y: initialData.pinLocation.y,
|
|
@@ -17434,18 +17237,18 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17434
17237
|
}
|
|
17435
17238
|
: null);
|
|
17436
17239
|
// Image change states
|
|
17437
|
-
const [isSelectingImage, setIsSelectingImage] =
|
|
17438
|
-
const [originalImageSrc, setOriginalImageSrc] =
|
|
17439
|
-
const [originalImageBackground, setOriginalImageBackground] =
|
|
17440
|
-
const [replacementImageUrl, setReplacementImageUrl] =
|
|
17240
|
+
const [isSelectingImage, setIsSelectingImage] = React.useState(false);
|
|
17241
|
+
const [originalImageSrc, setOriginalImageSrc] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.originalImageSrc) || "");
|
|
17242
|
+
const [originalImageBackground, setOriginalImageBackground] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.originalImageBackground) || "");
|
|
17243
|
+
const [replacementImageUrl, setReplacementImageUrl] = React.useState((initialData === null || initialData === void 0 ? void 0 : initialData.replacementImageUrl) || "");
|
|
17441
17244
|
// Load initial annotations into store if editing
|
|
17442
|
-
|
|
17245
|
+
React.useEffect(() => {
|
|
17443
17246
|
if (initialData === null || initialData === void 0 ? void 0 : initialData.annotations) {
|
|
17444
17247
|
setAnnotations(initialData.annotations);
|
|
17445
17248
|
}
|
|
17446
17249
|
}, [initialData, setAnnotations]);
|
|
17447
17250
|
// Handle pin placement mode
|
|
17448
|
-
|
|
17251
|
+
React.useEffect(() => {
|
|
17449
17252
|
if (!isPlacingPin)
|
|
17450
17253
|
return;
|
|
17451
17254
|
// Close widget during pin placement
|
|
@@ -17471,7 +17274,7 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17471
17274
|
};
|
|
17472
17275
|
}, [isPlacingPin, setIsOpen]);
|
|
17473
17276
|
// Handle image selection mode for image-change type
|
|
17474
|
-
|
|
17277
|
+
React.useEffect(() => {
|
|
17475
17278
|
if (!isSelectingImage)
|
|
17476
17279
|
return;
|
|
17477
17280
|
// Close widget during image selection
|
|
@@ -17543,7 +17346,7 @@ const FeedbackForm = ({ onSubmit, onCancel, initialData, getSessionEvents, lastC
|
|
|
17543
17346
|
};
|
|
17544
17347
|
}, [isSelectingImage, setIsOpen]);
|
|
17545
17348
|
// Auto-capture selected text when component mounts (only if creating new)
|
|
17546
|
-
|
|
17349
|
+
React.useEffect(() => {
|
|
17547
17350
|
var _a;
|
|
17548
17351
|
if (initialData)
|
|
17549
17352
|
return;
|
|
@@ -17858,9 +17661,9 @@ const statusColors = {
|
|
|
17858
17661
|
};
|
|
17859
17662
|
const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
|
|
17860
17663
|
const { config } = useMarkupStore();
|
|
17861
|
-
const [statusFilter, setStatusFilter] =
|
|
17862
|
-
const [sortBy, setSortBy] =
|
|
17863
|
-
const filteredAndSortedItems =
|
|
17664
|
+
const [statusFilter, setStatusFilter] = React.useState("all");
|
|
17665
|
+
const [sortBy, setSortBy] = React.useState("newest");
|
|
17666
|
+
const filteredAndSortedItems = React.useMemo(() => {
|
|
17864
17667
|
let items = [...feedbackItems];
|
|
17865
17668
|
// Filter by status
|
|
17866
17669
|
if (statusFilter !== "all") {
|
|
@@ -17891,7 +17694,7 @@ const FeedbackList = ({ feedbackItems, onSelectFeedback, }) => {
|
|
|
17891
17694
|
return items;
|
|
17892
17695
|
}, [feedbackItems, statusFilter, sortBy]);
|
|
17893
17696
|
// Group items by page URL
|
|
17894
|
-
const groupedByPage =
|
|
17697
|
+
const groupedByPage = React.useMemo(() => {
|
|
17895
17698
|
const groups = new Map();
|
|
17896
17699
|
filteredAndSortedItems.forEach((item) => {
|
|
17897
17700
|
var _a;
|
|
@@ -40152,19 +39955,19 @@ const priorityColors = {
|
|
|
40152
39955
|
const FeedbackDetail = ({ feedback: initialFeedback, onBack, onDelete, onUpdate, }) => {
|
|
40153
39956
|
var _a, _b, _c;
|
|
40154
39957
|
const { config, updateFeedback: updateFeedback$1, currentUser } = useMarkupStore();
|
|
40155
|
-
const [feedback, setFeedback] =
|
|
40156
|
-
const [newComment, setNewComment] =
|
|
40157
|
-
const [isAddingComment, setIsAddingComment] =
|
|
40158
|
-
const [showFullScreenshot, setShowFullScreenshot] =
|
|
40159
|
-
const [copied, setCopied] =
|
|
40160
|
-
const [isEditing, setIsEditing] =
|
|
40161
|
-
const [showDeleteConfirm, setShowDeleteConfirm] =
|
|
39958
|
+
const [feedback, setFeedback] = React.useState(initialFeedback);
|
|
39959
|
+
const [newComment, setNewComment] = React.useState("");
|
|
39960
|
+
const [isAddingComment, setIsAddingComment] = React.useState(false);
|
|
39961
|
+
const [showFullScreenshot, setShowFullScreenshot] = React.useState(false);
|
|
39962
|
+
const [copied, setCopied] = React.useState(false);
|
|
39963
|
+
const [isEditing, setIsEditing] = React.useState(false);
|
|
39964
|
+
const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
|
|
40162
39965
|
// Feature 2 & 5 states
|
|
40163
|
-
const [showReplay, setShowReplay] =
|
|
40164
|
-
const [showOverlay, setShowOverlay] =
|
|
40165
|
-
const [overlayOpacity, setOverlayOpacity] =
|
|
39966
|
+
const [showReplay, setShowReplay] = React.useState(false);
|
|
39967
|
+
const [showOverlay, setShowOverlay] = React.useState(false);
|
|
39968
|
+
const [overlayOpacity, setOverlayOpacity] = React.useState(50);
|
|
40166
39969
|
// Parse session actions
|
|
40167
|
-
const sessionActions =
|
|
39970
|
+
const sessionActions = React.useMemo(() => {
|
|
40168
39971
|
if (!feedback.sessionEvents)
|
|
40169
39972
|
return null;
|
|
40170
39973
|
try {
|
|
@@ -40427,11 +40230,11 @@ const getCurrentUser = () => {
|
|
|
40427
40230
|
};
|
|
40428
40231
|
|
|
40429
40232
|
const AuthForm = ({ onSuccess }) => {
|
|
40430
|
-
const [mode, setMode] =
|
|
40431
|
-
const [email, setEmail] =
|
|
40432
|
-
const [password, setPassword] =
|
|
40433
|
-
const [error, setError] =
|
|
40434
|
-
const [loading, setLoading] =
|
|
40233
|
+
const [mode, setMode] = React.useState("login");
|
|
40234
|
+
const [email, setEmail] = React.useState("");
|
|
40235
|
+
const [password, setPassword] = React.useState("");
|
|
40236
|
+
const [error, setError] = React.useState(null);
|
|
40237
|
+
const [loading, setLoading] = React.useState(false);
|
|
40435
40238
|
const handleSubmit = async (e) => {
|
|
40436
40239
|
e.preventDefault();
|
|
40437
40240
|
setError(null);
|
|
@@ -40476,8 +40279,8 @@ const VIEWPORT_PRESETS = [
|
|
|
40476
40279
|
];
|
|
40477
40280
|
const ViewportControls = () => {
|
|
40478
40281
|
const { viewportMode, setViewportMode, isOpen: isWidgetOpen } = useMarkupStore();
|
|
40479
|
-
const [isExpanded, setIsExpanded] =
|
|
40480
|
-
const dropdownRef =
|
|
40282
|
+
const [isExpanded, setIsExpanded] = React.useState(false);
|
|
40283
|
+
const dropdownRef = React.useRef(null);
|
|
40481
40284
|
const handlePresetClick = (preset) => {
|
|
40482
40285
|
setViewportMode({ width: preset.width, height: preset.height });
|
|
40483
40286
|
setIsExpanded(false);
|
|
@@ -40490,7 +40293,7 @@ const ViewportControls = () => {
|
|
|
40490
40293
|
return (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.width) === preset.width && (viewportMode === null || viewportMode === void 0 ? void 0 : viewportMode.height) === preset.height;
|
|
40491
40294
|
};
|
|
40492
40295
|
// Close dropdown on outside click
|
|
40493
|
-
|
|
40296
|
+
React.useEffect(() => {
|
|
40494
40297
|
if (!isExpanded)
|
|
40495
40298
|
return;
|
|
40496
40299
|
const handleClickOutside = (event) => {
|
|
@@ -40502,7 +40305,7 @@ const ViewportControls = () => {
|
|
|
40502
40305
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
40503
40306
|
}, [isExpanded]);
|
|
40504
40307
|
// Handle ESC key to close dropdown or reset viewport
|
|
40505
|
-
|
|
40308
|
+
React.useEffect(() => {
|
|
40506
40309
|
const handleKeyDown = (event) => {
|
|
40507
40310
|
if (event.key === 'Escape') {
|
|
40508
40311
|
if (isExpanded) {
|
|
@@ -40532,8 +40335,8 @@ const ViewportControls = () => {
|
|
|
40532
40335
|
|
|
40533
40336
|
const FeedbackPins = ({ onPinClick }) => {
|
|
40534
40337
|
const { feedbackItems, showPins } = useMarkupStore();
|
|
40535
|
-
const [docSize, setDocSize] =
|
|
40536
|
-
|
|
40338
|
+
const [docSize, setDocSize] = React.useState({ width: 0, height: 0 });
|
|
40339
|
+
React.useEffect(() => {
|
|
40537
40340
|
const measure = () => {
|
|
40538
40341
|
const root = document.documentElement;
|
|
40539
40342
|
const body = document.body;
|
|
@@ -40556,7 +40359,7 @@ const FeedbackPins = ({ onPinClick }) => {
|
|
|
40556
40359
|
};
|
|
40557
40360
|
}, []);
|
|
40558
40361
|
// Filter pins for current page URL
|
|
40559
|
-
const currentPagePins =
|
|
40362
|
+
const currentPagePins = React.useMemo(() => {
|
|
40560
40363
|
const currentUrl = window.location.href;
|
|
40561
40364
|
return feedbackItems.filter(item => {
|
|
40562
40365
|
var _a;
|
|
@@ -40626,7 +40429,7 @@ const useFirebaseSync = () => {
|
|
|
40626
40429
|
const setFeedbackItems = useMarkupStore((state) => state.setFeedbackItems);
|
|
40627
40430
|
const isAuthenticated = useMarkupStore((state) => state.isAuthenticated);
|
|
40628
40431
|
// Auth state listener
|
|
40629
|
-
|
|
40432
|
+
React.useEffect(() => {
|
|
40630
40433
|
// Check if Firebase is initialized by checking if any apps exist
|
|
40631
40434
|
if (getApps().length === 0) {
|
|
40632
40435
|
console.warn('Firebase not initialized. Call initFirebase() at app root or authentication will be disabled.');
|
|
@@ -40677,7 +40480,7 @@ const useFirebaseSync = () => {
|
|
|
40677
40480
|
};
|
|
40678
40481
|
}, [setCurrentUser, setIsAuthenticated]);
|
|
40679
40482
|
// Feedback subscription listener
|
|
40680
|
-
|
|
40483
|
+
React.useEffect(() => {
|
|
40681
40484
|
console.log('🔄 Feedback subscription effect running...', {
|
|
40682
40485
|
firebaseApps: getApps().length,
|
|
40683
40486
|
projectId: config.projectId,
|
|
@@ -40714,9 +40517,9 @@ const useFirebaseSync = () => {
|
|
|
40714
40517
|
};
|
|
40715
40518
|
|
|
40716
40519
|
const useSessionRecording = () => {
|
|
40717
|
-
const actionsRef =
|
|
40520
|
+
const actionsRef = React.useRef([]);
|
|
40718
40521
|
const maxActions = 50; // Keep last 50 actions
|
|
40719
|
-
|
|
40522
|
+
React.useEffect(() => {
|
|
40720
40523
|
if (typeof window === 'undefined')
|
|
40721
40524
|
return;
|
|
40722
40525
|
const recordAction = (action) => {
|
|
@@ -40801,13 +40604,13 @@ const useSessionRecording = () => {
|
|
|
40801
40604
|
clearTimeout(scrollTimeout);
|
|
40802
40605
|
};
|
|
40803
40606
|
}, []);
|
|
40804
|
-
const getSessionEvents =
|
|
40607
|
+
const getSessionEvents = React.useCallback(() => {
|
|
40805
40608
|
if (actionsRef.current.length === 0) {
|
|
40806
40609
|
return undefined;
|
|
40807
40610
|
}
|
|
40808
40611
|
return JSON.stringify(actionsRef.current);
|
|
40809
40612
|
}, []);
|
|
40810
|
-
const clearSession =
|
|
40613
|
+
const clearSession = React.useCallback(() => {
|
|
40811
40614
|
actionsRef.current = [];
|
|
40812
40615
|
}, []);
|
|
40813
40616
|
return {
|
|
@@ -40819,7 +40622,7 @@ const useSessionRecording = () => {
|
|
|
40819
40622
|
const MarkupWidget = ({ config: userConfig, }) => {
|
|
40820
40623
|
var _a;
|
|
40821
40624
|
// Initialize Firebase synchronously on first render only
|
|
40822
|
-
const initRef =
|
|
40625
|
+
const initRef = React.useRef(false);
|
|
40823
40626
|
if (!initRef.current && (userConfig === null || userConfig === void 0 ? void 0 : userConfig.firebaseConfig) && getApps().length === 0) {
|
|
40824
40627
|
try {
|
|
40825
40628
|
initializeFirebase(userConfig.firebaseConfig);
|
|
@@ -40836,9 +40639,9 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
40836
40639
|
// Initialize Session Recording (Feature 2)
|
|
40837
40640
|
const { getSessionEvents } = useSessionRecording();
|
|
40838
40641
|
// Track last clicked element for component detection (Feature 4)
|
|
40839
|
-
const lastClickedElementRef =
|
|
40840
|
-
const [lastClickedText, setLastClickedText] =
|
|
40841
|
-
|
|
40642
|
+
const lastClickedElementRef = React.useRef(null);
|
|
40643
|
+
const [lastClickedText, setLastClickedText] = React.useState('');
|
|
40644
|
+
React.useEffect(() => {
|
|
40842
40645
|
const handleClick = (e) => {
|
|
40843
40646
|
var _a;
|
|
40844
40647
|
// Store the clicked element (but ignore clicks on the widget itself)
|
|
@@ -40873,7 +40676,7 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
40873
40676
|
return () => document.removeEventListener('click', handleClick, true);
|
|
40874
40677
|
}, []);
|
|
40875
40678
|
// Apply viewport mode styling to document (like browser dev tools)
|
|
40876
|
-
|
|
40679
|
+
React.useEffect(() => {
|
|
40877
40680
|
if (viewportMode) {
|
|
40878
40681
|
const root = document.documentElement;
|
|
40879
40682
|
const body = document.body;
|
|
@@ -40900,12 +40703,12 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
40900
40703
|
};
|
|
40901
40704
|
}
|
|
40902
40705
|
}, [viewportMode]);
|
|
40903
|
-
|
|
40706
|
+
React.useEffect(() => {
|
|
40904
40707
|
if (userConfig) {
|
|
40905
40708
|
setConfig(userConfig);
|
|
40906
40709
|
}
|
|
40907
40710
|
}, [userConfig, setConfig]);
|
|
40908
|
-
|
|
40711
|
+
React.useEffect(() => {
|
|
40909
40712
|
const handleKeyDown = (e) => {
|
|
40910
40713
|
const shortcut = config.shortcut || "ctrl+shift+m";
|
|
40911
40714
|
const keys = shortcut.split("+").map((k) => k.trim().toLowerCase());
|
|
@@ -40924,7 +40727,7 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
40924
40727
|
document.addEventListener("keydown", handleKeyDown);
|
|
40925
40728
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
40926
40729
|
}, [config.shortcut, isOpen, setIsOpen]);
|
|
40927
|
-
const handleToggle =
|
|
40730
|
+
const handleToggle = React.useCallback(() => {
|
|
40928
40731
|
if (!isOpen) {
|
|
40929
40732
|
setIsOpen(true);
|
|
40930
40733
|
}
|
|
@@ -40934,7 +40737,7 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
40934
40737
|
setActiveTab("create");
|
|
40935
40738
|
}
|
|
40936
40739
|
}, [isOpen, setIsOpen, setSelectedFeedback, setActiveTab]);
|
|
40937
|
-
const handleSubmitFeedback =
|
|
40740
|
+
const handleSubmitFeedback = React.useCallback(async (feedback) => {
|
|
40938
40741
|
try {
|
|
40939
40742
|
const currentUser = getCurrentUser();
|
|
40940
40743
|
console.log("Submitting feedback:", {
|
|
@@ -40962,11 +40765,11 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
40962
40765
|
}
|
|
40963
40766
|
setActiveTab("list");
|
|
40964
40767
|
}, [addFeedbackItem, setActiveTab, config.projectId]);
|
|
40965
|
-
const handleCancel =
|
|
40768
|
+
const handleCancel = React.useCallback(() => {
|
|
40966
40769
|
reset();
|
|
40967
40770
|
setIsOpen(false);
|
|
40968
40771
|
}, [reset, setIsOpen]);
|
|
40969
|
-
const handleSelectFeedback =
|
|
40772
|
+
const handleSelectFeedback = React.useCallback((feedback) => {
|
|
40970
40773
|
setSelectedFeedback(feedback);
|
|
40971
40774
|
// Scroll to pin location
|
|
40972
40775
|
if (feedback.pinLocation) {
|
|
@@ -40988,7 +40791,7 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
40988
40791
|
});
|
|
40989
40792
|
}
|
|
40990
40793
|
}, [setSelectedFeedback]);
|
|
40991
|
-
const handlePinClick =
|
|
40794
|
+
const handlePinClick = React.useCallback((feedback) => {
|
|
40992
40795
|
setIsOpen(true);
|
|
40993
40796
|
setActiveTab("list");
|
|
40994
40797
|
setSelectedFeedback(feedback);
|
|
@@ -41012,11 +40815,11 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
41012
40815
|
});
|
|
41013
40816
|
}
|
|
41014
40817
|
}, [setIsOpen, setActiveTab, setSelectedFeedback]);
|
|
41015
|
-
const handleBackFromDetail =
|
|
40818
|
+
const handleBackFromDetail = React.useCallback(() => {
|
|
41016
40819
|
setSelectedFeedback(null);
|
|
41017
40820
|
setViewportMode(null);
|
|
41018
40821
|
}, [setSelectedFeedback, setViewportMode]);
|
|
41019
|
-
const handleLogout =
|
|
40822
|
+
const handleLogout = React.useCallback(async () => {
|
|
41020
40823
|
try {
|
|
41021
40824
|
await logOut();
|
|
41022
40825
|
reset();
|
|
@@ -41025,10 +40828,10 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
41025
40828
|
console.error("Logout failed:", error);
|
|
41026
40829
|
}
|
|
41027
40830
|
}, [reset]);
|
|
41028
|
-
const handleAuthSuccess =
|
|
40831
|
+
const handleAuthSuccess = React.useCallback(() => {
|
|
41029
40832
|
setActiveTab("create");
|
|
41030
40833
|
}, [setActiveTab]);
|
|
41031
|
-
const handleDeleteFeedback =
|
|
40834
|
+
const handleDeleteFeedback = React.useCallback(async (id) => {
|
|
41032
40835
|
// Find the feedback item to get storage URLs
|
|
41033
40836
|
const feedbackToDelete = feedbackItems.find(f => f.id === id);
|
|
41034
40837
|
// Delete associated storage files
|
|
@@ -41043,7 +40846,7 @@ const MarkupWidget = ({ config: userConfig, }) => {
|
|
|
41043
40846
|
removeFeedbackItem(id);
|
|
41044
40847
|
setSelectedFeedback(null);
|
|
41045
40848
|
}, [removeFeedbackItem, setSelectedFeedback, feedbackItems]);
|
|
41046
|
-
const handleUpdateFeedback =
|
|
40849
|
+
const handleUpdateFeedback = React.useCallback((updatedFeedback) => {
|
|
41047
40850
|
updateFeedback(updatedFeedback);
|
|
41048
40851
|
// Also update selected feedback if it's the same one (it should be)
|
|
41049
40852
|
setSelectedFeedback(updatedFeedback);
|
|
@@ -41085,11 +40888,11 @@ function useMarkup({ config, syncWithServer = false }) {
|
|
|
41085
40888
|
const store = useMarkupStore();
|
|
41086
40889
|
const api = config.apiEndpoint ? new MarkupAPI(config) : null;
|
|
41087
40890
|
// Initialize config
|
|
41088
|
-
|
|
40891
|
+
React.useEffect(() => {
|
|
41089
40892
|
store.setConfig(config);
|
|
41090
40893
|
}, [config]);
|
|
41091
40894
|
// Fetch feedback from server on mount
|
|
41092
|
-
|
|
40895
|
+
React.useEffect(() => {
|
|
41093
40896
|
if (syncWithServer && api) {
|
|
41094
40897
|
api.getFeedback().then((items) => {
|
|
41095
40898
|
items.forEach((item) => {
|
|
@@ -41101,7 +40904,7 @@ function useMarkup({ config, syncWithServer = false }) {
|
|
|
41101
40904
|
});
|
|
41102
40905
|
}
|
|
41103
40906
|
}, [syncWithServer, api]);
|
|
41104
|
-
const submitFeedback =
|
|
40907
|
+
const submitFeedback = React.useCallback(async (feedback) => {
|
|
41105
40908
|
const now = new Date().toISOString();
|
|
41106
40909
|
const newFeedback = {
|
|
41107
40910
|
...feedback,
|
|
@@ -41122,7 +40925,7 @@ function useMarkup({ config, syncWithServer = false }) {
|
|
|
41122
40925
|
}
|
|
41123
40926
|
return newFeedback;
|
|
41124
40927
|
}, [api, store]);
|
|
41125
|
-
const updateFeedback =
|
|
40928
|
+
const updateFeedback = React.useCallback(async (id, updates) => {
|
|
41126
40929
|
store.updateFeedbackItem(id, updates);
|
|
41127
40930
|
if (api) {
|
|
41128
40931
|
try {
|
|
@@ -41133,7 +40936,7 @@ function useMarkup({ config, syncWithServer = false }) {
|
|
|
41133
40936
|
}
|
|
41134
40937
|
}
|
|
41135
40938
|
}, [api, store]);
|
|
41136
|
-
const deleteFeedback =
|
|
40939
|
+
const deleteFeedback = React.useCallback(async (id) => {
|
|
41137
40940
|
store.removeFeedbackItem(id);
|
|
41138
40941
|
if (api) {
|
|
41139
40942
|
try {
|
|
@@ -41144,14 +40947,14 @@ function useMarkup({ config, syncWithServer = false }) {
|
|
|
41144
40947
|
}
|
|
41145
40948
|
}
|
|
41146
40949
|
}, [api, store]);
|
|
41147
|
-
const openWidget =
|
|
40950
|
+
const openWidget = React.useCallback(() => {
|
|
41148
40951
|
store.setIsOpen(true);
|
|
41149
40952
|
}, [store]);
|
|
41150
|
-
const closeWidget =
|
|
40953
|
+
const closeWidget = React.useCallback(() => {
|
|
41151
40954
|
store.setIsOpen(false);
|
|
41152
40955
|
store.reset();
|
|
41153
40956
|
}, [store]);
|
|
41154
|
-
const toggleWidget =
|
|
40957
|
+
const toggleWidget = React.useCallback(() => {
|
|
41155
40958
|
store.setIsOpen(!store.isOpen);
|
|
41156
40959
|
}, [store]);
|
|
41157
40960
|
return {
|