Charles Bochet
563acc3f57
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
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import {
|
|
type CloseSidePanelFunction,
|
|
type CopyToClipboardFunction,
|
|
type EnqueueSnackbarFunction,
|
|
type NavigateFunction,
|
|
type OpenCommandConfirmationModalFunction,
|
|
type OpenSidePanelPageFunction,
|
|
type RequestAccessTokenRefreshFunction,
|
|
type UnmountFrontComponentFunction,
|
|
type UpdateProgressFunction,
|
|
} from 'twenty-sdk/front-component';
|
|
|
|
import { FRONT_COMPONENT_HOST_COMMUNICATION_API_KEY } from 'twenty-sdk/front-component-renderer';
|
|
|
|
type FrontComponentHostCommunicationApiStore = {
|
|
navigate?: NavigateFunction;
|
|
requestAccessTokenRefresh?: RequestAccessTokenRefreshFunction;
|
|
openSidePanelPage?: OpenSidePanelPageFunction;
|
|
openCommandConfirmationModal?: OpenCommandConfirmationModalFunction;
|
|
unmountFrontComponent?: UnmountFrontComponentFunction;
|
|
enqueueSnackbar?: EnqueueSnackbarFunction;
|
|
closeSidePanel?: CloseSidePanelFunction;
|
|
updateProgress?: UpdateProgressFunction;
|
|
copyToClipboard?: CopyToClipboardFunction;
|
|
};
|
|
|
|
(globalThis as Record<string, unknown>)[
|
|
FRONT_COMPONENT_HOST_COMMUNICATION_API_KEY
|
|
] ??= {};
|
|
|
|
export const frontComponentHostCommunicationApi: FrontComponentHostCommunicationApiStore =
|
|
(globalThis as Record<string, unknown>)[
|
|
FRONT_COMPONENT_HOST_COMMUNICATION_API_KEY
|
|
] as FrontComponentHostCommunicationApiStore;
|