Raphaël Bosi
1833fa84a5
Fixes https://github.com/twentyhq/twenty/issues/21000 Front-component event handlers read standard event fields (event.clientX, event.offsetX, …), but these were always undefined. On the remote side, serialized event data was passed only as the CustomEvent's detail — and CustomEvent ignores every constructor option except detail, so the values lived at event.detail.clientX and never on the event object itself. - Added `applySerializedEventProperties`, to copy a curated allowlist of event-level keys onto the event. Element/target state (value, checked, files, scroll, media props) stays in `applySerializedEventTargetProperties`, applied to this (the dispatch element = event.target). - Added x/y to `SerializedEventData` and to host-side serialization in `createHtmlHostWrapper`. - Added an `svg-pointer `story + `createHtmlTagPointerStory` Note: Also pinned @types/react to v18 so the renderer stops dragging in React 19 types and breaking typecheck.
51 lines
879 B
TypeScript
51 lines
879 B
TypeScript
import { type SerializedEventData } from '@/types/SerializedEventData';
|
|
|
|
const SERIALIZED_EVENT_PROPERTY_KEYS = [
|
|
'altKey',
|
|
'ctrlKey',
|
|
'metaKey',
|
|
'shiftKey',
|
|
'clientX',
|
|
'clientY',
|
|
'x',
|
|
'y',
|
|
'pageX',
|
|
'pageY',
|
|
'screenX',
|
|
'screenY',
|
|
'offsetX',
|
|
'offsetY',
|
|
'movementX',
|
|
'movementY',
|
|
'button',
|
|
'buttons',
|
|
'pointerId',
|
|
'pointerType',
|
|
'pressure',
|
|
'tangentialPressure',
|
|
'tiltX',
|
|
'tiltY',
|
|
'twist',
|
|
'width',
|
|
'height',
|
|
'isPrimary',
|
|
'key',
|
|
'code',
|
|
'repeat',
|
|
'deltaX',
|
|
'deltaY',
|
|
'deltaZ',
|
|
'deltaMode',
|
|
] as const satisfies readonly (keyof SerializedEventData)[];
|
|
|
|
export const applySerializedEventProperties = (
|
|
event: Record<string, unknown>,
|
|
eventData: SerializedEventData,
|
|
): void => {
|
|
for (const key of SERIALIZED_EVENT_PROPERTY_KEYS) {
|
|
if (key in eventData) {
|
|
event[key] = eventData[key];
|
|
}
|
|
}
|
|
};
|