From b97c22a6074d2aa91af98f5ed5a826221e95e69e Mon Sep 17 00:00:00 2001 From: Catalin Pit Date: Thu, 10 Sep 2026 08:29:41 +0300 Subject: [PATCH 01/20] fix: pass csp nonce to @hello-pangea/dnd style elements (#3354) --- .../embed/authoring/configure-document-recipients.tsx | 4 ++++ .../components/general/document/document-edit-form.tsx | 3 +++ .../envelope-editor/envelope-editor-recipient-form.tsx | 3 +++ .../envelope-editor/envelope-editor-upload-page.tsx | 4 +++- .../components/general/template/template-edit-form.tsx | 3 +++ packages/ui/primitives/document-flow/add-signers.tsx | 8 ++++++++ .../template-flow/add-template-placeholder-recipients.tsx | 8 ++++++++ 7 files changed, 32 insertions(+), 1 deletion(-) diff --git a/apps/remix/app/components/embed/authoring/configure-document-recipients.tsx b/apps/remix/app/components/embed/authoring/configure-document-recipients.tsx index 12180ab2aa..3818cfcf3d 100644 --- a/apps/remix/app/components/embed/authoring/configure-document-recipients.tsx +++ b/apps/remix/app/components/embed/authoring/configure-document-recipients.tsx @@ -18,6 +18,8 @@ import { useCallback, useRef } from 'react'; import type { Control } from 'react-hook-form'; import { useFieldArray, useFormContext, useFormState } from 'react-hook-form'; +import { useCspNonce } from '~/utils/nonce'; + import { useConfigureDocument } from './configure-document-context'; import type { TConfigureEmbedFormSchema } from './configure-document-view.types'; @@ -32,6 +34,7 @@ export interface ConfigureDocumentRecipientsProps { export const ConfigureDocumentRecipients = ({ control, isSubmitting }: ConfigureDocumentRecipientsProps) => { const { _ } = useLingui(); const { isTemplate } = useConfigureDocument(); + const cspNonce = useCspNonce(); const $sensorApi = useRef(null); @@ -212,6 +215,7 @@ export const ConfigureDocumentRecipients = ({ control, isSubmitting }: Configure /> { diff --git a/apps/remix/app/components/general/document/document-edit-form.tsx b/apps/remix/app/components/general/document/document-edit-form.tsx index 051ee562c0..06bedf4b6c 100644 --- a/apps/remix/app/components/general/document/document-edit-form.tsx +++ b/apps/remix/app/components/general/document/document-edit-form.tsx @@ -28,6 +28,7 @@ import { useNavigate, useSearchParams } from 'react-router'; import { z } from 'zod'; import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy'; import { useCurrentTeam } from '~/providers/team'; +import { useCspNonce } from '~/utils/nonce'; import { getDistributeErrorMessage } from '~/utils/toast-error-messages'; export type DocumentEditFormProps = { @@ -42,6 +43,7 @@ const EditDocumentSteps: EditDocumentStep[] = ['settings', 'signers', 'fields', export const DocumentEditForm = ({ className, initialDocument, documentRootPath }: DocumentEditFormProps) => { const { toast } = useToast(); const { _ } = useLingui(); + const cspNonce = useCspNonce(); const navigate = useNavigate(); @@ -473,6 +475,7 @@ export const DocumentEditForm = ({ className, initialDocument, documentRootPath onSubmit={onAddSignersFormSubmit} onAutoSave={onAddSignersFormAutoSave} isDocumentPdfLoaded={isDocumentPdfLoaded} + nonce={cspNonce} /> { const { envelope, setRecipientsDebounced, updateEnvelope, editorRecipients, isEmbedded, editorConfig } = @@ -52,6 +53,7 @@ export const EnvelopeEditorRecipientForm = () => { const organisation = useCurrentOrganisation(); const team = useCurrentTeam(); + const cspNonce = useCspNonce(); const { t } = useLingui(); const { toast } = useToast(); @@ -795,6 +797,7 @@ export const EnvelopeEditorRecipientForm = () => { { diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx index 73493c385b..60d970cafe 100644 --- a/apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx +++ b/apps/remix/app/components/general/envelope-editor/envelope-editor-upload-page.tsx @@ -26,6 +26,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { ErrorCode as DropzoneErrorCode, type FileRejection, useDropzone } from 'react-dropzone'; import { EnvelopeItemDeleteDialog } from '~/components/dialogs/envelope-item-delete-dialog'; +import { useCspNonce } from '~/utils/nonce'; import { EnvelopeEditorInvalidDirectTemplateAlert } from './envelope-editor-invalid-direct-template-alert'; import { EnvelopeEditorRecipientForm } from './envelope-editor-recipient-form'; @@ -42,6 +43,7 @@ type LocalFile = { export const EnvelopeEditorUploadPage = () => { const organisation = useCurrentOrganisation(); + const cspNonce = useCspNonce(); const { t, i18n } = useLingui(); const { maximumEnvelopeItemCount, remaining } = useLimits(); @@ -494,7 +496,7 @@ export const EnvelopeEditorUploadPage = () => { {/* Uploaded Files List */}
- + {(provided) => (
{ const { _ } = useLingui(); const { toast } = useToast(); + const cspNonce = useCspNonce(); const navigate = useNavigate(); const team = useCurrentTeam(); @@ -339,6 +341,7 @@ export const TemplateEditForm = ({ initialTemplate, className, templateRootPath onSubmit={onAddTemplatePlaceholderFormSubmit} onAutoSave={onAddTemplatePlaceholderFormAutoSave} isDocumentPdfLoaded={isDocumentPdfLoaded} + nonce={cspNonce} /> void; onAutoSave: (_data: TAddSignersFormSchema) => Promise; isDocumentPdfLoaded: boolean; + /** + * CSP nonce forwarded to `@hello-pangea/dnd`, which injects its drag styles + * as runtime `