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.
55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
import { type SerializedEventData } from '@/types/SerializedEventData';
|
|
|
|
export const applySerializedEventTargetProperties = (
|
|
element: Record<string, unknown>,
|
|
eventData: SerializedEventData,
|
|
): void => {
|
|
if ('value' in eventData) {
|
|
element.value = eventData.value;
|
|
}
|
|
|
|
if ('checked' in eventData) {
|
|
element.checked = eventData.checked;
|
|
}
|
|
|
|
if ('files' in eventData) {
|
|
element.files = eventData.files;
|
|
}
|
|
|
|
if ('scrollTop' in eventData) {
|
|
element.scrollTop = eventData.scrollTop;
|
|
}
|
|
|
|
if ('scrollLeft' in eventData) {
|
|
element.scrollLeft = eventData.scrollLeft;
|
|
}
|
|
|
|
if ('currentTime' in eventData) {
|
|
element.currentTime = eventData.currentTime;
|
|
}
|
|
|
|
if ('duration' in eventData) {
|
|
element.duration = eventData.duration;
|
|
}
|
|
|
|
if ('paused' in eventData) {
|
|
element.paused = eventData.paused;
|
|
}
|
|
|
|
if ('ended' in eventData) {
|
|
element.ended = eventData.ended;
|
|
}
|
|
|
|
if ('volume' in eventData) {
|
|
element.volume = eventData.volume;
|
|
}
|
|
|
|
if ('muted' in eventData) {
|
|
element.muted = eventData.muted;
|
|
}
|
|
|
|
if ('playbackRate' in eventData) {
|
|
element.playbackRate = eventData.playbackRate;
|
|
}
|
|
};
|