From 563acc3f57377c9184c3f948ee914d2e38441fa7 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Sat, 23 May 2026 10:28:11 +0200 Subject: [PATCH] Allow copy to clipboard and pointer/mousemove events in front components (#20858) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Follow-up to #20525, picks up the clipboard + mouse/pointer events asks from the "Allow to copy to clipboard in front-component" Slack thread. `navigator.geolocation` and `getBoundingClientRect` are intentionally out of scope until we have a permission model. ### `copyToClipboard` host API New SDK function `copyToClipboard` (in `twenty-sdk/front-component`) that goes through the host bridge to `useCopyToClipboard` in `twenty-front`: ```ts import { copyToClipboard } from 'twenty-sdk/front-component'; await copyToClipboard('hello'); ``` Host-side hardening (front-component code is untrusted): - Drops anything that isn't a non-empty string - Caps payload at 64KB - Throttles to 1 call/sec per front-component instance - Snackbar shows a truncated preview so the user can spot a mismatch between the affordance they clicked and what actually got copied ### `mousemove` and pointer events Added to `COMMON_HTML_EVENTS` (and the React mapping) so they fire on every HTML tag the renderer ships: `mousemove`, `pointerdown/up/move`, `pointerover/out/enter/leave/cancel`. Generator rerun for `remote-elements.ts` and `remote-components.ts`. `SerializedEventData` now also forwards pointer geometry: `pointerId`, `pointerType`, `pressure`, `tangentialPressure`, `tiltX/Y`, `twist`, `width/height`, `isPrimary`. Existing positional fields are unchanged. ### Coverage - New Storybook stories: `HostApi/CopyToClipboard` and `HtmlTag/Grouping/Div/Events::PointerMove` - `useFrontComponentExecutionContext` unit tests cover the API call, preview truncation, type guard, length cap, and rate limit - Renderer Storybook suite 227 → 229, prebuild bundle count 219 → 221 --- .../host-api/copy-to-clipboard.stories.tsx | 60 + ...-api-copy-to-clipboard.front-component.tsx | 50 + .../grouping/div/div-events.stories.tsx | 17 + .../div/div-pointermove.front-component.tsx | 45 + .../createFrontComponentStoryMeta.ts | 2 + .../src/constants/CommonHtmlEvents.ts | 9 + .../src/constants/EventToReact.ts | 9 + .../src/constants/SerializedEventData.ts | 10 + .../frontComponentHostCommunicationApi.ts | 2 + .../src/host/utils/createHtmlHostWrapper.ts | 31 + .../components/FrontComponentWorkerEffect.tsx | 1 + .../src/remote/generated/remote-components.ts | 1071 +++++++++++++++++ .../src/remote/generated/remote-elements.ts | 18 + .../src/remote/worker/remote-worker.ts | 2 + .../FrontComponentHostCommunicationApi.ts | 2 + ...useFrontComponentExecutionContext.test.tsx | 292 +++-- .../useFrontComponentExecutionContext.ts | 43 + .../functions/copyToClipboard.ts | 17 + .../frontComponentHostCommunicationApi.ts | 3 + .../src/sdk/front-component/index.ts | 2 + 20 files changed, 1599 insertions(+), 87 deletions(-) create mode 100644 packages/twenty-front-component-renderer/src/__stories__/host-api/copy-to-clipboard.stories.tsx create mode 100644 packages/twenty-front-component-renderer/src/__stories__/host-api/host-api-copy-to-clipboard.front-component.tsx create mode 100644 packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-pointermove.front-component.tsx create mode 100644 packages/twenty-sdk/src/sdk/front-component/functions/copyToClipboard.ts diff --git a/packages/twenty-front-component-renderer/src/__stories__/host-api/copy-to-clipboard.stories.tsx b/packages/twenty-front-component-renderer/src/__stories__/host-api/copy-to-clipboard.stories.tsx new file mode 100644 index 0000000000..7497713c44 --- /dev/null +++ b/packages/twenty-front-component-renderer/src/__stories__/host-api/copy-to-clipboard.stories.tsx @@ -0,0 +1,60 @@ +import { type Meta, type StoryObj } from '@storybook/react-vite'; +import { expect, userEvent, waitFor, within } from 'storybook/test'; +import { isDefined } from 'twenty-shared/utils'; + +import { FrontComponentRenderer } from '@/host/components/FrontComponentRenderer'; +import { + FRONT_COMPONENT_STORY_DEFAULT_ARGS, + resetFrontComponentStoryMocks, +} from '@/__stories__/shared/test-utils/createFrontComponentStoryMeta'; +import { expectFrontComponentMounted } from '@/__stories__/shared/test-utils/matchers/expectFrontComponentMounted'; +import { runFrontComponentStory } from '@/__stories__/shared/test-utils/runFrontComponentStory'; +import { + HOST_API_TIMEOUT, + INTERACTION_TIMEOUT, +} from '@/__stories__/shared/test-utils/timeouts'; + +const meta: Meta = { + title: 'FrontComponent/HostApi/CopyToClipboard', + component: FrontComponentRenderer, + parameters: { layout: 'centered' }, + args: FRONT_COMPONENT_STORY_DEFAULT_ARGS, + beforeEach: resetFrontComponentStoryMocks, +}; + +export default meta; + +type Story = StoryObj; + +export const CopyToClipboard: Story = runFrontComponentStory({ + frontComponentBundleName: 'host-api-copy-to-clipboard', + play: async ({ canvasElement, args }) => { + const canvas = within(canvasElement); + const api = args.frontComponentHostCommunicationApi; + + if (!isDefined(api)) { + throw new Error('frontComponentHostCommunicationApi is required'); + } + + await expectFrontComponentMounted(canvas); + + const subject = await canvas.findByTestId('subject'); + + await userEvent.click(subject); + + await waitFor( + () => { + expect(api.copyToClipboard).toHaveBeenCalledWith('Hello clipboard'); + }, + { timeout: HOST_API_TIMEOUT }, + ); + + expect( + await canvas.findByText( + 'clipboard:success', + {}, + { timeout: INTERACTION_TIMEOUT }, + ), + ).toBeVisible(); + }, +}); diff --git a/packages/twenty-front-component-renderer/src/__stories__/host-api/host-api-copy-to-clipboard.front-component.tsx b/packages/twenty-front-component-renderer/src/__stories__/host-api/host-api-copy-to-clipboard.front-component.tsx new file mode 100644 index 0000000000..db4aea96fa --- /dev/null +++ b/packages/twenty-front-component-renderer/src/__stories__/host-api/host-api-copy-to-clipboard.front-component.tsx @@ -0,0 +1,50 @@ +import { useState } from 'react'; +import { defineFrontComponent } from 'twenty-sdk/define'; +import { copyToClipboard } from 'twenty-sdk/front-component'; + +import { FrontComponentCard } from '@/__stories__/shared/front-components/front-component-card'; +import { BUTTON_STYLE } from '@/__stories__/shared/front-components/styles'; + +const STATUS_STYLE = { + fontSize: 13, + color: '#1f2937', + fontFamily: 'monospace', +}; + +const HostApiCopyToClipboardFrontComponent = () => { + const [status, setStatus] = useState('idle'); + + const handleClick = async () => { + try { + await copyToClipboard('Hello clipboard'); + setStatus('clipboard:success'); + } catch (error) { + setStatus( + `clipboard:error:${error instanceof Error ? error.message : String(error)}`, + ); + } + }; + + return ( + + + + {status} + + + ); +}; + +export default defineFrontComponent({ + universalIdentifier: 'fc-host-clipboard-00000000-0000-0000-0000-000000000020', + name: 'host-api-copy-to-clipboard-front-component', + description: 'Front component covering copyToClipboard host API', + component: HostApiCopyToClipboardFrontComponent, +}); diff --git a/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-events.stories.tsx b/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-events.stories.tsx index 6b25ef2b1a..235313d5dc 100644 --- a/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-events.stories.tsx +++ b/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-events.stories.tsx @@ -72,3 +72,20 @@ export const MouseEnterLeave: Story = runFrontComponentStory({ await expectEventLogged({ canvas, matcher: { type: 'mouseleave' } }); }, }); + +export const PointerMove: Story = runFrontComponentStory({ + frontComponentBundleName: 'div-pointermove', + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + await expectFrontComponentMounted(canvas); + + const subject = await canvas.findByTestId('subject'); + + await userEvent.pointer({ target: subject, coords: { x: 10, y: 10 } }); + await userEvent.pointer({ target: subject, coords: { x: 50, y: 30 } }); + + await expectEventLogged({ canvas, matcher: { type: 'pointermove' } }); + await expectEventLogged({ canvas, matcher: { type: 'mousemove' } }); + }, +}); diff --git a/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-pointermove.front-component.tsx b/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-pointermove.front-component.tsx new file mode 100644 index 0000000000..645b1d0b79 --- /dev/null +++ b/packages/twenty-front-component-renderer/src/__stories__/html-tag/grouping/div/div-pointermove.front-component.tsx @@ -0,0 +1,45 @@ +import { defineFrontComponent } from 'twenty-sdk/define'; + +import { + EventLog, + useEventLog, +} from '@/__stories__/shared/front-components/event-log'; +import { FrontComponentCard } from '@/__stories__/shared/front-components/front-component-card'; + +const SURFACE_STYLE = { + width: 200, + height: 80, + border: '1px solid #d1d5db', + borderRadius: 8, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + cursor: 'crosshair', + userSelect: 'none' as const, + backgroundColor: '#f3f4f6', +}; + +const DivPointerMoveFrontComponent = () => { + const { entries, pushEvent } = useEventLog(); + + return ( + +
pushEvent(event)} + onPointerMove={(event) => pushEvent(event)} + style={SURFACE_STYLE} + > + Move pointer +
+ + + ); +}; + +export default defineFrontComponent({ + universalIdentifier: 'fc-div-pmm-00000000-0000-0000-0000-000000000020', + name: 'div-pointermove-front-component', + description: 'Front component covering mousemove/pointermove on
', + component: DivPointerMoveFrontComponent, +}); diff --git a/packages/twenty-front-component-renderer/src/__stories__/shared/test-utils/createFrontComponentStoryMeta.ts b/packages/twenty-front-component-renderer/src/__stories__/shared/test-utils/createFrontComponentStoryMeta.ts index 50e1228eb4..2c3def8305 100644 --- a/packages/twenty-front-component-renderer/src/__stories__/shared/test-utils/createFrontComponentStoryMeta.ts +++ b/packages/twenty-front-component-renderer/src/__stories__/shared/test-utils/createFrontComponentStoryMeta.ts @@ -14,6 +14,7 @@ export const hostApiMocks = { updateProgress: fn().mockResolvedValue(undefined), requestAccessTokenRefresh: fn().mockResolvedValue('refreshed-token'), openCommandConfirmationModal: fn().mockResolvedValue(undefined), + copyToClipboard: fn().mockResolvedValue(undefined), }; export const FRONT_COMPONENT_STORY_DEFAULT_ARGS: NonNullable< @@ -41,4 +42,5 @@ export const resetFrontComponentStoryMocks = () => { hostApiMocks.updateProgress.mockClear(); hostApiMocks.requestAccessTokenRefresh.mockClear(); hostApiMocks.openCommandConfirmationModal.mockClear(); + hostApiMocks.copyToClipboard.mockClear(); }; diff --git a/packages/twenty-front-component-renderer/src/constants/CommonHtmlEvents.ts b/packages/twenty-front-component-renderer/src/constants/CommonHtmlEvents.ts index c35bf6e4e8..5a812d2d0f 100644 --- a/packages/twenty-front-component-renderer/src/constants/CommonHtmlEvents.ts +++ b/packages/twenty-front-component-renderer/src/constants/CommonHtmlEvents.ts @@ -3,10 +3,19 @@ export const COMMON_HTML_EVENTS = [ 'dblclick', 'mousedown', 'mouseup', + 'mousemove', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', + 'pointerdown', + 'pointerup', + 'pointermove', + 'pointerover', + 'pointerout', + 'pointerenter', + 'pointerleave', + 'pointercancel', 'keydown', 'keyup', 'keypress', diff --git a/packages/twenty-front-component-renderer/src/constants/EventToReact.ts b/packages/twenty-front-component-renderer/src/constants/EventToReact.ts index 621b05306a..0a303aafd6 100644 --- a/packages/twenty-front-component-renderer/src/constants/EventToReact.ts +++ b/packages/twenty-front-component-renderer/src/constants/EventToReact.ts @@ -3,10 +3,19 @@ export const EVENT_TO_REACT: Record = { dblclick: 'onDoubleClick', mousedown: 'onMouseDown', mouseup: 'onMouseUp', + mousemove: 'onMouseMove', mouseover: 'onMouseOver', mouseout: 'onMouseOut', mouseenter: 'onMouseEnter', mouseleave: 'onMouseLeave', + pointerdown: 'onPointerDown', + pointerup: 'onPointerUp', + pointermove: 'onPointerMove', + pointerover: 'onPointerOver', + pointerout: 'onPointerOut', + pointerenter: 'onPointerEnter', + pointerleave: 'onPointerLeave', + pointercancel: 'onPointerCancel', keydown: 'onKeyDown', keyup: 'onKeyUp', keypress: 'onKeyPress', diff --git a/packages/twenty-front-component-renderer/src/constants/SerializedEventData.ts b/packages/twenty-front-component-renderer/src/constants/SerializedEventData.ts index 8301f21309..57a7e033e0 100644 --- a/packages/twenty-front-component-renderer/src/constants/SerializedEventData.ts +++ b/packages/twenty-front-component-renderer/src/constants/SerializedEventData.ts @@ -23,6 +23,16 @@ export type SerializedEventData = { movementY?: number; button?: number; buttons?: number; + pointerId?: number; + pointerType?: string; + pressure?: number; + tangentialPressure?: number; + tiltX?: number; + tiltY?: number; + twist?: number; + width?: number; + height?: number; + isPrimary?: boolean; key?: string; code?: string; repeat?: boolean; diff --git a/packages/twenty-front-component-renderer/src/constants/frontComponentHostCommunicationApi.ts b/packages/twenty-front-component-renderer/src/constants/frontComponentHostCommunicationApi.ts index 9bdaa7aea2..a4c5b15c4a 100644 --- a/packages/twenty-front-component-renderer/src/constants/frontComponentHostCommunicationApi.ts +++ b/packages/twenty-front-component-renderer/src/constants/frontComponentHostCommunicationApi.ts @@ -1,5 +1,6 @@ import { type CloseSidePanelFunction, + type CopyToClipboardFunction, type EnqueueSnackbarFunction, type NavigateFunction, type OpenCommandConfirmationModalFunction, @@ -20,6 +21,7 @@ type FrontComponentHostCommunicationApiStore = { enqueueSnackbar?: EnqueueSnackbarFunction; closeSidePanel?: CloseSidePanelFunction; updateProgress?: UpdateProgressFunction; + copyToClipboard?: CopyToClipboardFunction; }; (globalThis as Record)[ diff --git a/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts b/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts index 387f01755c..73c966ff10 100644 --- a/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts +++ b/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts @@ -171,6 +171,37 @@ const serializeEvent = (event: unknown): SerializedEventData => { serialized.buttons = domEvent.buttons; } + if (isNumber(domEvent.pointerId)) { + serialized.pointerId = domEvent.pointerId; + } + if (isString(domEvent.pointerType)) { + serialized.pointerType = domEvent.pointerType; + } + if (isNumber(domEvent.pressure)) { + serialized.pressure = domEvent.pressure; + } + if (isNumber(domEvent.tangentialPressure)) { + serialized.tangentialPressure = domEvent.tangentialPressure; + } + if (isNumber(domEvent.tiltX)) { + serialized.tiltX = domEvent.tiltX; + } + if (isNumber(domEvent.tiltY)) { + serialized.tiltY = domEvent.tiltY; + } + if (isNumber(domEvent.twist)) { + serialized.twist = domEvent.twist; + } + if (isNumber(domEvent.width)) { + serialized.width = domEvent.width; + } + if (isNumber(domEvent.height)) { + serialized.height = domEvent.height; + } + if (isBoolean(domEvent.isPrimary)) { + serialized.isPrimary = domEvent.isPrimary; + } + if (isString(domEvent.key)) { serialized.key = domEvent.key; } diff --git a/packages/twenty-front-component-renderer/src/remote/components/FrontComponentWorkerEffect.tsx b/packages/twenty-front-component-renderer/src/remote/components/FrontComponentWorkerEffect.tsx index c25dbc1799..3ae2356661 100644 --- a/packages/twenty-front-component-renderer/src/remote/components/FrontComponentWorkerEffect.tsx +++ b/packages/twenty-front-component-renderer/src/remote/components/FrontComponentWorkerEffect.tsx @@ -29,6 +29,7 @@ const HOST_COMMUNICATION_API_NOOP_INITIALIZATION: FrontComponentHostCommunicatio enqueueSnackbar: noopAsync, closeSidePanel: noopAsync, updateProgress: noopAsync, + copyToClipboard: noopAsync, }; type FrontComponentWorkerEffectProps = { diff --git a/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts b/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts index 9027343b24..b9ad79f351 100644 --- a/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts +++ b/packages/twenty-front-component-renderer/src/remote/generated/remote-components.ts @@ -128,10 +128,19 @@ export const HtmlDiv = createRemoteComponent('html-div', HtmlDivElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -152,10 +161,19 @@ export const HtmlSpan = createRemoteComponent('html-span', HtmlSpanElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -179,10 +197,19 @@ export const HtmlSection = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -207,10 +234,19 @@ export const HtmlArticle = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -235,10 +271,19 @@ export const HtmlHeader = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -263,10 +308,19 @@ export const HtmlFooter = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -288,10 +342,19 @@ export const HtmlMain = createRemoteComponent('html-main', HtmlMainElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -312,10 +375,19 @@ export const HtmlNav = createRemoteComponent('html-nav', HtmlNavElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -336,10 +408,19 @@ export const HtmlAside = createRemoteComponent('html-aside', HtmlAsideElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -360,10 +441,19 @@ export const HtmlP = createRemoteComponent('html-p', HtmlPElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -384,10 +474,19 @@ export const HtmlH1 = createRemoteComponent('html-h1', HtmlH1Element, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -408,10 +507,19 @@ export const HtmlH2 = createRemoteComponent('html-h2', HtmlH2Element, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -432,10 +540,19 @@ export const HtmlH3 = createRemoteComponent('html-h3', HtmlH3Element, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -456,10 +573,19 @@ export const HtmlH4 = createRemoteComponent('html-h4', HtmlH4Element, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -480,10 +606,19 @@ export const HtmlH5 = createRemoteComponent('html-h5', HtmlH5Element, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -504,10 +639,19 @@ export const HtmlH6 = createRemoteComponent('html-h6', HtmlH6Element, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -531,10 +675,19 @@ export const HtmlStrong = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -556,10 +709,19 @@ export const HtmlEm = createRemoteComponent('html-em', HtmlEmElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -580,10 +742,19 @@ export const HtmlSmall = createRemoteComponent('html-small', HtmlSmallElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -604,10 +775,19 @@ export const HtmlCode = createRemoteComponent('html-code', HtmlCodeElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -628,10 +808,19 @@ export const HtmlPre = createRemoteComponent('html-pre', HtmlPreElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -655,10 +844,19 @@ export const HtmlBlockquote = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -680,10 +878,19 @@ export const HtmlA = createRemoteComponent('html-a', HtmlAElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -704,10 +911,19 @@ export const HtmlImg = createRemoteComponent('html-img', HtmlImgElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -728,10 +944,19 @@ export const HtmlUl = createRemoteComponent('html-ul', HtmlUlElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -752,10 +977,19 @@ export const HtmlOl = createRemoteComponent('html-ol', HtmlOlElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -776,10 +1010,19 @@ export const HtmlLi = createRemoteComponent('html-li', HtmlLiElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -800,10 +1043,19 @@ export const HtmlForm = createRemoteComponent('html-form', HtmlFormElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -824,10 +1076,19 @@ export const HtmlLabel = createRemoteComponent('html-label', HtmlLabelElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -848,10 +1109,19 @@ export const HtmlInput = createRemoteComponent('html-input', HtmlInputElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -875,10 +1145,19 @@ export const HtmlTextarea = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -903,10 +1182,19 @@ export const HtmlSelect = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -931,10 +1219,19 @@ export const HtmlOption = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -959,10 +1256,19 @@ export const HtmlButton = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -984,10 +1290,19 @@ export const HtmlTable = createRemoteComponent('html-table', HtmlTableElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1008,10 +1323,19 @@ export const HtmlThead = createRemoteComponent('html-thead', HtmlTheadElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1032,10 +1356,19 @@ export const HtmlTbody = createRemoteComponent('html-tbody', HtmlTbodyElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1056,10 +1389,19 @@ export const HtmlTfoot = createRemoteComponent('html-tfoot', HtmlTfootElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1080,10 +1422,19 @@ export const HtmlTr = createRemoteComponent('html-tr', HtmlTrElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1104,10 +1455,19 @@ export const HtmlTh = createRemoteComponent('html-th', HtmlThElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1128,10 +1488,19 @@ export const HtmlTd = createRemoteComponent('html-td', HtmlTdElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1152,10 +1521,19 @@ export const HtmlBr = createRemoteComponent('html-br', HtmlBrElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1176,10 +1554,19 @@ export const HtmlHr = createRemoteComponent('html-hr', HtmlHrElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1203,10 +1590,19 @@ export const HtmlIframe = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1228,10 +1624,19 @@ export const HtmlVideo = createRemoteComponent('html-video', HtmlVideoElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1271,10 +1676,19 @@ export const HtmlAudio = createRemoteComponent('html-audio', HtmlAudioElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1317,10 +1731,19 @@ export const HtmlSource = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1342,10 +1765,19 @@ export const HtmlB = createRemoteComponent('html-b', HtmlBElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1366,10 +1798,19 @@ export const HtmlI = createRemoteComponent('html-i', HtmlIElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1390,10 +1831,19 @@ export const HtmlU = createRemoteComponent('html-u', HtmlUElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1414,10 +1864,19 @@ export const HtmlS = createRemoteComponent('html-s', HtmlSElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1438,10 +1897,19 @@ export const HtmlMark = createRemoteComponent('html-mark', HtmlMarkElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1462,10 +1930,19 @@ export const HtmlSub = createRemoteComponent('html-sub', HtmlSubElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1486,10 +1963,19 @@ export const HtmlSup = createRemoteComponent('html-sup', HtmlSupElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1510,10 +1996,19 @@ export const HtmlAbbr = createRemoteComponent('html-abbr', HtmlAbbrElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1534,10 +2029,19 @@ export const HtmlCite = createRemoteComponent('html-cite', HtmlCiteElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1558,10 +2062,19 @@ export const HtmlKbd = createRemoteComponent('html-kbd', HtmlKbdElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1582,10 +2095,19 @@ export const HtmlSamp = createRemoteComponent('html-samp', HtmlSampElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1606,10 +2128,19 @@ export const HtmlVar = createRemoteComponent('html-var', HtmlVarElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1630,10 +2161,19 @@ export const HtmlDfn = createRemoteComponent('html-dfn', HtmlDfnElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1654,10 +2194,19 @@ export const HtmlBdi = createRemoteComponent('html-bdi', HtmlBdiElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1678,10 +2227,19 @@ export const HtmlBdo = createRemoteComponent('html-bdo', HtmlBdoElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1702,10 +2260,19 @@ export const HtmlData = createRemoteComponent('html-data', HtmlDataElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1726,10 +2293,19 @@ export const HtmlDel = createRemoteComponent('html-del', HtmlDelElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1750,10 +2326,19 @@ export const HtmlIns = createRemoteComponent('html-ins', HtmlInsElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1774,10 +2359,19 @@ export const HtmlQ = createRemoteComponent('html-q', HtmlQElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1798,10 +2392,19 @@ export const HtmlTime = createRemoteComponent('html-time', HtmlTimeElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1822,10 +2425,19 @@ export const HtmlRuby = createRemoteComponent('html-ruby', HtmlRubyElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1846,10 +2458,19 @@ export const HtmlRt = createRemoteComponent('html-rt', HtmlRtElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1870,10 +2491,19 @@ export const HtmlRp = createRemoteComponent('html-rp', HtmlRpElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1894,10 +2524,19 @@ export const HtmlDl = createRemoteComponent('html-dl', HtmlDlElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1918,10 +2557,19 @@ export const HtmlDt = createRemoteComponent('html-dt', HtmlDtElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1942,10 +2590,19 @@ export const HtmlDd = createRemoteComponent('html-dd', HtmlDdElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1969,10 +2626,19 @@ export const HtmlFigure = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -1997,10 +2663,19 @@ export const HtmlFigcaption = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2025,10 +2700,19 @@ export const HtmlDetails = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2053,10 +2737,19 @@ export const HtmlSummary = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2081,10 +2774,19 @@ export const HtmlAddress = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2109,10 +2811,19 @@ export const HtmlDialog = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2137,10 +2848,19 @@ export const HtmlHgroup = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2165,10 +2885,19 @@ export const HtmlSearch = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2193,10 +2922,19 @@ export const HtmlCaption = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2221,10 +2959,19 @@ export const HtmlColgroup = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2246,10 +2993,19 @@ export const HtmlCol = createRemoteComponent('html-col', HtmlColElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2273,10 +3029,19 @@ export const HtmlFieldset = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2301,10 +3066,19 @@ export const HtmlLegend = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2329,10 +3103,19 @@ export const HtmlOutput = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2357,10 +3140,19 @@ export const HtmlProgress = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2382,10 +3174,19 @@ export const HtmlMeter = createRemoteComponent('html-meter', HtmlMeterElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2409,10 +3210,19 @@ export const HtmlOptgroup = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2437,10 +3247,19 @@ export const HtmlDatalist = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2465,10 +3284,19 @@ export const HtmlPicture = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2490,10 +3318,19 @@ export const HtmlTrack = createRemoteComponent('html-track', HtmlTrackElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2514,10 +3351,19 @@ export const HtmlWbr = createRemoteComponent('html-wbr', HtmlWbrElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2538,10 +3384,19 @@ export const HtmlMenu = createRemoteComponent('html-menu', HtmlMenuElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2562,10 +3417,19 @@ export const HtmlSvg = createRemoteComponent('html-svg', HtmlSvgElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2586,10 +3450,19 @@ export const HtmlG = createRemoteComponent('html-g', HtmlGElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2610,10 +3483,19 @@ export const HtmlDefs = createRemoteComponent('html-defs', HtmlDefsElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2637,10 +3519,19 @@ export const HtmlSymbol = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2662,10 +3553,19 @@ export const HtmlUse = createRemoteComponent('html-use', HtmlUseElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2689,10 +3589,19 @@ export const HtmlClipPath = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2714,10 +3623,19 @@ export const HtmlMask = createRemoteComponent('html-mask', HtmlMaskElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2741,10 +3659,19 @@ export const HtmlCircle = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2769,10 +3696,19 @@ export const HtmlEllipse = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2794,10 +3730,19 @@ export const HtmlRect = createRemoteComponent('html-rect', HtmlRectElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2818,10 +3763,19 @@ export const HtmlLine = createRemoteComponent('html-line', HtmlLineElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2842,10 +3796,19 @@ export const HtmlPath = createRemoteComponent('html-path', HtmlPathElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2869,10 +3832,19 @@ export const HtmlPolygon = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2897,10 +3869,19 @@ export const HtmlPolyline = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2922,10 +3903,19 @@ export const HtmlText = createRemoteComponent('html-text', HtmlTextElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2946,10 +3936,19 @@ export const HtmlTspan = createRemoteComponent('html-tspan', HtmlTspanElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -2973,10 +3972,19 @@ export const HtmlLinearGradient = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -3001,10 +4009,19 @@ export const HtmlRadialGradient = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -3026,10 +4043,19 @@ export const HtmlStop = createRemoteComponent('html-stop', HtmlStopElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -3053,10 +4079,19 @@ export const HtmlPattern = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -3078,10 +4113,19 @@ export const HtmlImage = createRemoteComponent('html-image', HtmlImageElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -3105,10 +4149,19 @@ export const HtmlForeignObject = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -3133,10 +4186,19 @@ export const HtmlMarker = createRemoteComponent( onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, @@ -3158,10 +4220,19 @@ export const HtmlTitle = createRemoteComponent('html-title', HtmlTitleElement, { onDoubleClick: { event: 'dblclick' }, onMouseDown: { event: 'mousedown' }, onMouseUp: { event: 'mouseup' }, + onMouseMove: { event: 'mousemove' }, onMouseOver: { event: 'mouseover' }, onMouseOut: { event: 'mouseout' }, onMouseEnter: { event: 'mouseenter' }, onMouseLeave: { event: 'mouseleave' }, + onPointerDown: { event: 'pointerdown' }, + onPointerUp: { event: 'pointerup' }, + onPointerMove: { event: 'pointermove' }, + onPointerOver: { event: 'pointerover' }, + onPointerOut: { event: 'pointerout' }, + onPointerEnter: { event: 'pointerenter' }, + onPointerLeave: { event: 'pointerleave' }, + onPointerCancel: { event: 'pointercancel' }, onKeyDown: { event: 'keydown' }, onKeyUp: { event: 'keyup' }, onKeyPress: { event: 'keypress' }, diff --git a/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts b/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts index 8c7a076c53..f9842a3c2c 100644 --- a/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts +++ b/packages/twenty-front-component-renderer/src/remote/generated/remote-elements.ts @@ -27,10 +27,19 @@ export type HtmlCommonEvents = { dblclick(event: RemoteEvent): void; mousedown(event: RemoteEvent): void; mouseup(event: RemoteEvent): void; + mousemove(event: RemoteEvent): void; mouseover(event: RemoteEvent): void; mouseout(event: RemoteEvent): void; mouseenter(event: RemoteEvent): void; mouseleave(event: RemoteEvent): void; + pointerdown(event: RemoteEvent): void; + pointerup(event: RemoteEvent): void; + pointermove(event: RemoteEvent): void; + pointerover(event: RemoteEvent): void; + pointerout(event: RemoteEvent): void; + pointerenter(event: RemoteEvent): void; + pointerleave(event: RemoteEvent): void; + pointercancel(event: RemoteEvent): void; keydown(event: RemoteEvent): void; keyup(event: RemoteEvent): void; keypress(event: RemoteEvent): void; @@ -50,10 +59,19 @@ const HTML_COMMON_EVENTS_ARRAY = [ 'dblclick', 'mousedown', 'mouseup', + 'mousemove', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', + 'pointerdown', + 'pointerup', + 'pointermove', + 'pointerover', + 'pointerout', + 'pointerenter', + 'pointerleave', + 'pointercancel', 'keydown', 'keyup', 'keypress', diff --git a/packages/twenty-front-component-renderer/src/remote/worker/remote-worker.ts b/packages/twenty-front-component-renderer/src/remote/worker/remote-worker.ts index 401fd471ea..5044c95ce4 100644 --- a/packages/twenty-front-component-renderer/src/remote/worker/remote-worker.ts +++ b/packages/twenty-front-component-renderer/src/remote/worker/remote-worker.ts @@ -163,6 +163,8 @@ const initializeHostCommunicationApi: WorkerExports['initializeHostCommunication hostApi.enqueueSnackbar; frontComponentHostCommunicationApi.closeSidePanel = hostApi.closeSidePanel; frontComponentHostCommunicationApi.updateProgress = hostApi.updateProgress; + frontComponentHostCommunicationApi.copyToClipboard = + hostApi.copyToClipboard; }; const onConfirmationModalResult: WorkerExports['onConfirmationModalResult'] = diff --git a/packages/twenty-front-component-renderer/src/types/FrontComponentHostCommunicationApi.ts b/packages/twenty-front-component-renderer/src/types/FrontComponentHostCommunicationApi.ts index fba44e793b..960f860a48 100644 --- a/packages/twenty-front-component-renderer/src/types/FrontComponentHostCommunicationApi.ts +++ b/packages/twenty-front-component-renderer/src/types/FrontComponentHostCommunicationApi.ts @@ -1,5 +1,6 @@ import { type CloseSidePanelFunction, + type CopyToClipboardFunction, type EnqueueSnackbarFunction, type NavigateFunction, type OpenCommandConfirmationModalHostFunction, @@ -18,4 +19,5 @@ export type FrontComponentHostCommunicationApi = { enqueueSnackbar: EnqueueSnackbarFunction; closeSidePanel: CloseSidePanelFunction; updateProgress: UpdateProgressFunction; + copyToClipboard: CopyToClipboardFunction; }; diff --git a/packages/twenty-front/src/modules/front-components/hooks/__tests__/useFrontComponentExecutionContext.test.tsx b/packages/twenty-front/src/modules/front-components/hooks/__tests__/useFrontComponentExecutionContext.test.tsx index e7728644c3..27f80ed59b 100644 --- a/packages/twenty-front/src/modules/front-components/hooks/__tests__/useFrontComponentExecutionContext.test.tsx +++ b/packages/twenty-front/src/modules/front-components/hooks/__tests__/useFrontComponentExecutionContext.test.tsx @@ -1,3 +1,5 @@ +import { i18n } from '@lingui/core'; +import { I18nProvider } from '@lingui/react'; import { act, renderHook } from '@testing-library/react'; import { useFrontComponentExecutionContext } from '@/front-components/hooks/useFrontComponentExecutionContext'; @@ -15,6 +17,7 @@ const mockEnqueueInfoSnackBar = jest.fn(); const mockEnqueueWarningSnackBar = jest.fn(); const mockCloseSidePanelMenu = jest.fn(); const mockSetCommandMenuItemProgress = jest.fn(); +const mockCopyToClipboard = jest.fn(); let mockCurrentUser: { id: string } | null = { id: 'user-123' }; @@ -83,6 +86,19 @@ jest.mock('@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState', () => ({ useSetAtomFamilyState: () => mockSetCommandMenuItemProgress, })); +jest.mock('~/hooks/useCopyToClipboard', () => ({ + useCopyToClipboard: () => ({ + copyToClipboard: mockCopyToClipboard, + }), +})); + +const renderUseFrontComponentExecutionContext = ( + params: Parameters[0], +) => + renderHook(() => useFrontComponentExecutionContext(params), { + wrapper: ({ children }) => I18nProvider({ i18n, children }), + }); + const FRONT_COMPONENT_ID = 'fc-test-id'; const COMMAND_MENU_ITEM_ID = 'cmd-item-1'; @@ -94,12 +110,10 @@ describe('useFrontComponentExecutionContext', () => { describe('executionContext', () => { it('should return frontComponentId, userId, recordId, and selectedRecordIds with single record', () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - selectedRecordIds: ['record-456'], - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + selectedRecordIds: ['record-456'], + }); expect(result.current.executionContext).toEqual({ frontComponentId: FRONT_COMPONENT_ID, @@ -110,12 +124,10 @@ describe('useFrontComponentExecutionContext', () => { }); it('should return null recordId when multiple selectedRecordIds provided', () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - selectedRecordIds: ['record-1', 'record-2', 'record-3'], - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + selectedRecordIds: ['record-1', 'record-2', 'record-3'], + }); expect(result.current.executionContext).toEqual({ frontComponentId: FRONT_COMPONENT_ID, @@ -128,33 +140,27 @@ describe('useFrontComponentExecutionContext', () => { it('should return null userId when no current user', () => { mockCurrentUser = null; - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); expect(result.current.executionContext.userId).toBeNull(); }); it('should return null recordId and empty selectedRecordIds when no selectedRecordIds provided', () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); expect(result.current.executionContext.recordId).toBeNull(); expect(result.current.executionContext.selectedRecordIds).toEqual([]); }); it('should return null recordId and empty selectedRecordIds when empty array provided', () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - selectedRecordIds: [], - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + selectedRecordIds: [], + }); expect(result.current.executionContext.recordId).toBeNull(); expect(result.current.executionContext.selectedRecordIds).toEqual([]); @@ -163,11 +169,9 @@ describe('useFrontComponentExecutionContext', () => { describe('navigate', () => { it('should call navigateApp with the provided arguments', async () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); await act(async () => { await result.current.frontComponentHostCommunicationApi.navigate( @@ -189,11 +193,9 @@ describe('useFrontComponentExecutionContext', () => { describe('openSidePanelPage', () => { it('should call navigateSidePanel with resolved icon', async () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); await act(async () => { await result.current.frontComponentHostCommunicationApi.openSidePanelPage( @@ -216,11 +218,9 @@ describe('useFrontComponentExecutionContext', () => { }); it('should reset side panel search state when shouldResetSearchState is true', async () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); await act(async () => { await result.current.frontComponentHostCommunicationApi.openSidePanelPage( @@ -239,11 +239,9 @@ describe('useFrontComponentExecutionContext', () => { describe('openCommandConfirmationModal', () => { it('should call openConfirmationModal with frontComponent caller', async () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); await act(async () => { await result.current.frontComponentHostCommunicationApi.openCommandConfirmationModal( @@ -278,11 +276,9 @@ describe('useFrontComponentExecutionContext', () => { ])( 'should route $variant snackbar to the correct handler', async ({ variant, mock }) => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); await act(async () => { await result.current.frontComponentHostCommunicationApi.enqueueSnackbar( @@ -310,12 +306,10 @@ describe('useFrontComponentExecutionContext', () => { describe('unmountFrontComponent', () => { it('should call unmountEngineCommand when commandMenuItemId is provided', async () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - commandMenuItemId: COMMAND_MENU_ITEM_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + commandMenuItemId: COMMAND_MENU_ITEM_ID, + }); await act(async () => { await result.current.frontComponentHostCommunicationApi.unmountFrontComponent(); @@ -327,11 +321,9 @@ describe('useFrontComponentExecutionContext', () => { }); it('should not call unmountEngineCommand when commandMenuItemId is undefined', async () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); await act(async () => { await result.current.frontComponentHostCommunicationApi.unmountFrontComponent(); @@ -343,11 +335,9 @@ describe('useFrontComponentExecutionContext', () => { describe('closeSidePanel', () => { it('should call closeSidePanelMenu', async () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); await act(async () => { await result.current.frontComponentHostCommunicationApi.closeSidePanel(); @@ -359,12 +349,10 @@ describe('useFrontComponentExecutionContext', () => { describe('updateProgress', () => { it('should set clamped progress when commandMenuItemId is provided', async () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - commandMenuItemId: COMMAND_MENU_ITEM_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + commandMenuItemId: COMMAND_MENU_ITEM_ID, + }); await act(async () => { await result.current.frontComponentHostCommunicationApi.updateProgress( @@ -376,12 +364,10 @@ describe('useFrontComponentExecutionContext', () => { }); it('should clamp progress to 0 when negative value is provided', async () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - commandMenuItemId: COMMAND_MENU_ITEM_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + commandMenuItemId: COMMAND_MENU_ITEM_ID, + }); await act(async () => { await result.current.frontComponentHostCommunicationApi.updateProgress( @@ -393,12 +379,10 @@ describe('useFrontComponentExecutionContext', () => { }); it('should clamp progress to 100 when value exceeds 100', async () => { - const { result } = renderHook(() => - useFrontComponentExecutionContext({ - frontComponentId: FRONT_COMPONENT_ID, - commandMenuItemId: COMMAND_MENU_ITEM_ID, - }), - ); + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + commandMenuItemId: COMMAND_MENU_ITEM_ID, + }); await act(async () => { await result.current.frontComponentHostCommunicationApi.updateProgress( @@ -409,4 +393,138 @@ describe('useFrontComponentExecutionContext', () => { expect(mockSetCommandMenuItemProgress).toHaveBeenCalledWith(100); }); }); + + describe('copyToClipboard', () => { + it('should call useCopyToClipboard with the provided text and a preview message', async () => { + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); + + await act(async () => { + await result.current.frontComponentHostCommunicationApi.copyToClipboard( + 'hello clipboard', + ); + }); + + expect(mockCopyToClipboard).toHaveBeenCalledWith( + 'hello clipboard', + 'Application copied "hello clipboard" to your clipboard', + ); + }); + + it('should truncate the preview when the text is longer than the preview length', async () => { + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); + + const longText = 'a'.repeat(50); + + await act(async () => { + await result.current.frontComponentHostCommunicationApi.copyToClipboard( + longText, + ); + }); + + expect(mockCopyToClipboard).toHaveBeenCalledWith( + longText, + `Application copied "${'a'.repeat(30)}…" to your clipboard`, + ); + }); + + it.each([ + ['empty string', ''], + ['number', 123], + ['object', { malicious: true }], + ['undefined', undefined], + ['null', null], + ])('should silently drop non-string payloads (%s)', async (_, value) => { + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); + + await act(async () => { + await result.current.frontComponentHostCommunicationApi.copyToClipboard( + value as never, + ); + }); + + expect(mockCopyToClipboard).not.toHaveBeenCalled(); + }); + + it('should silently drop payloads exceeding the maximum length', async () => { + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); + + const oversizedPayload = 'a'.repeat(64 * 1024 + 1); + + await act(async () => { + await result.current.frontComponentHostCommunicationApi.copyToClipboard( + oversizedPayload, + ); + }); + + expect(mockCopyToClipboard).not.toHaveBeenCalled(); + }); + + it('should rate-limit consecutive calls within one second', async () => { + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); + + await act(async () => { + await result.current.frontComponentHostCommunicationApi.copyToClipboard( + 'first', + ); + await result.current.frontComponentHostCommunicationApi.copyToClipboard( + 'second', + ); + }); + + expect(mockCopyToClipboard).toHaveBeenCalledTimes(1); + expect(mockCopyToClipboard).toHaveBeenCalledWith( + 'first', + expect.stringContaining('first'), + ); + }); + + it('should allow a follow-up call once the rate-limit window has passed', async () => { + const { result } = renderUseFrontComponentExecutionContext({ + frontComponentId: FRONT_COMPONENT_ID, + }); + + let currentTimeMs = 0; + const dateNowSpy = jest + .spyOn(Date, 'now') + .mockImplementation(() => currentTimeMs); + + await act(async () => { + await result.current.frontComponentHostCommunicationApi.copyToClipboard( + 'first', + ); + }); + + currentTimeMs = 1500; + + await act(async () => { + await result.current.frontComponentHostCommunicationApi.copyToClipboard( + 'second', + ); + }); + + expect(mockCopyToClipboard).toHaveBeenCalledTimes(2); + expect(mockCopyToClipboard).toHaveBeenNthCalledWith( + 1, + 'first', + expect.stringContaining('first'), + ); + expect(mockCopyToClipboard).toHaveBeenNthCalledWith( + 2, + 'second', + expect.stringContaining('second'), + ); + + dateNowSpy.mockRestore(); + }); + }); }); diff --git a/packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts b/packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts index fdcef1e49f..51af9c4a4b 100644 --- a/packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts +++ b/packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts @@ -1,4 +1,7 @@ import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; +import { isNonEmptyString } from '@sniptt/guards'; +import { useLingui } from '@lingui/react/macro'; +import { useRef } from 'react'; import { type FrontComponentExecutionContext, type FrontComponentHostCommunicationApi, @@ -18,8 +21,13 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState import { useSetAtomFamilyState } from '@/ui/utilities/state/jotai/hooks/useSetAtomFamilyState'; import { assertUnreachable, isDefined } from 'twenty-shared/utils'; import { useIcons } from 'twenty-ui/display'; +import { useCopyToClipboard } from '~/hooks/useCopyToClipboard'; import { useNavigateApp } from '~/hooks/useNavigateApp'; +const FRONT_COMPONENT_CLIPBOARD_MAX_LENGTH = 64 * 1024; +const FRONT_COMPONENT_CLIPBOARD_RATE_LIMIT_MS = 1000; +const FRONT_COMPONENT_CLIPBOARD_PREVIEW_LENGTH = 30; + export const useFrontComponentExecutionContext = ({ frontComponentId, commandMenuItemId, @@ -49,6 +57,10 @@ export const useFrontComponentExecutionContext = ({ enqueueWarningSnackBar, } = useSnackBar(); const { closeSidePanelMenu } = useSidePanelMenu(); + const { copyToClipboard: copyToClipboardWithSnackbar } = useCopyToClipboard(); + const { t } = useLingui(); + // oxlint-disable-next-line twenty/no-state-useref + const lastCopyToClipboardCallAtRef = useRef(Number.NEGATIVE_INFINITY); const setCommandMenuItemProgress = useSetAtomFamilyState( commandMenuItemProgressFamilyState, commandMenuItemId ?? '', @@ -152,6 +164,36 @@ export const useFrontComponentExecutionContext = ({ setCommandMenuItemProgress(Math.max(0, Math.min(100, progress))); }; + const copyToClipboard: FrontComponentHostCommunicationApi['copyToClipboard'] = + async (text) => { + if (!isNonEmptyString(text)) { + return; + } + + if (text.length > FRONT_COMPONENT_CLIPBOARD_MAX_LENGTH) { + return; + } + + const now = Date.now(); + if ( + now - lastCopyToClipboardCallAtRef.current < + FRONT_COMPONENT_CLIPBOARD_RATE_LIMIT_MS + ) { + return; + } + lastCopyToClipboardCallAtRef.current = now; + + const preview = + text.length > FRONT_COMPONENT_CLIPBOARD_PREVIEW_LENGTH + ? `${text.slice(0, FRONT_COMPONENT_CLIPBOARD_PREVIEW_LENGTH)}…` + : text; + + await copyToClipboardWithSnackbar( + text, + t`Application copied "${preview}" to your clipboard`, + ); + }; + const frontComponentHostCommunicationApi: FrontComponentHostCommunicationApi = { navigate, @@ -162,6 +204,7 @@ export const useFrontComponentExecutionContext = ({ unmountFrontComponent, closeSidePanel, updateProgress, + copyToClipboard, }; return { diff --git a/packages/twenty-sdk/src/sdk/front-component/functions/copyToClipboard.ts b/packages/twenty-sdk/src/sdk/front-component/functions/copyToClipboard.ts new file mode 100644 index 0000000000..c50539da87 --- /dev/null +++ b/packages/twenty-sdk/src/sdk/front-component/functions/copyToClipboard.ts @@ -0,0 +1,17 @@ +import { isDefined } from 'twenty-shared/utils'; + +import { + type CopyToClipboardFunction, + frontComponentHostCommunicationApi, +} from '../globals/frontComponentHostCommunicationApi'; + +export const copyToClipboard: CopyToClipboardFunction = (text: string) => { + const copyToClipboardFunction = + frontComponentHostCommunicationApi.copyToClipboard; + + if (!isDefined(copyToClipboardFunction)) { + throw new Error('copyToClipboardFunction is not set'); + } + + return copyToClipboardFunction(text); +}; diff --git a/packages/twenty-sdk/src/sdk/front-component/globals/frontComponentHostCommunicationApi.ts b/packages/twenty-sdk/src/sdk/front-component/globals/frontComponentHostCommunicationApi.ts index 089c3aa947..2f0d7a40d5 100644 --- a/packages/twenty-sdk/src/sdk/front-component/globals/frontComponentHostCommunicationApi.ts +++ b/packages/twenty-sdk/src/sdk/front-component/globals/frontComponentHostCommunicationApi.ts @@ -43,6 +43,8 @@ export type UpdateProgressFunction = (progress: number) => Promise; export type RequestAccessTokenRefreshFunction = () => Promise; +export type CopyToClipboardFunction = (text: string) => Promise; + export type OpenCommandConfirmationModalHostFunction = ( params: Parameters[0], ) => Promise; @@ -56,6 +58,7 @@ export type FrontComponentHostCommunicationApiStore = { enqueueSnackbar?: EnqueueSnackbarFunction; closeSidePanel?: CloseSidePanelFunction; updateProgress?: UpdateProgressFunction; + copyToClipboard?: CopyToClipboardFunction; }; import { FRONT_COMPONENT_HOST_COMMUNICATION_API_KEY } from '../constants/front-component-host-communication-api-key'; diff --git a/packages/twenty-sdk/src/sdk/front-component/index.ts b/packages/twenty-sdk/src/sdk/front-component/index.ts index 86cfb8ba25..a48e2231a7 100644 --- a/packages/twenty-sdk/src/sdk/front-component/index.ts +++ b/packages/twenty-sdk/src/sdk/front-component/index.ts @@ -29,6 +29,7 @@ export { objectMetadataItem, } from './conditional-availability/conditional-availability-variables'; export { closeSidePanel } from './functions/closeSidePanel'; +export { copyToClipboard } from './functions/copyToClipboard'; export { getApplicationVariable } from './functions/getApplicationVariable'; export { enqueueSnackbar } from './functions/enqueueSnackbar'; export { navigate } from './functions/navigate'; @@ -47,6 +48,7 @@ export type { CloseSidePanelFunction, CommandConfirmationModalAccent, CommandConfirmationModalResult, + CopyToClipboardFunction, EnqueueSnackbarFunction, NavigateFunction, OpenCommandConfirmationModalFunction,