fix: pass csp nonce to @hello-pangea/dnd style elements (#3354)

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<SensorAPI | null>(null);
 
@@ -212,6 +215,7 @@ export const ConfigureDocumentRecipients = ({ control, isSubmitting }: Configure
       />
 
       <DragDropContext
+        nonce={cspNonce}
         onDragEnd={onDragEnd}
         sensors={[
           (api: SensorAPI) => {

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}
             />
 
             <AddFieldsFormPartial

apps/remix/app/components/general/envelope-editor/envelope-editor-recipient-form.tsx

@@ -45,6 +45,7 @@ import { isDeepEqual } from 'remeda';
 import { AiFeaturesEnableDialog } from '~/components/dialogs/ai-features-enable-dialog';
 import { AiRecipientDetectionDialog } from '~/components/dialogs/ai-recipient-detection-dialog';
 import { useCurrentTeam } from '~/providers/team';
+import { useCspNonce } from '~/utils/nonce';
 
 export const EnvelopeEditorRecipientForm = () => {
   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 = () => {
           </div>
 
           <DragDropContext
+            nonce={cspNonce}
             onDragEnd={onDragEnd}
             sensors={[
               (api: SensorAPI) => {

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 */}
           <div className="mt-4">
-            <DragDropContext onDragEnd={onDragEnd}>
+            <DragDropContext nonce={cspNonce} onDragEnd={onDragEnd}>
               <Droppable droppableId="files">
                 {(provided) => (
                   <div

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -25,6 +25,7 @@ import { z } from 'zod';
 
 import PDFViewerLazy from '~/components/general/pdf-viewer/pdf-viewer-lazy';
 import { useCurrentTeam } from '~/providers/team';
+import { useCspNonce } from '~/utils/nonce';
 
 export type TemplateEditFormProps = {
   className?: string;
@@ -38,6 +39,7 @@ const EditTemplateSteps: EditTemplateStep[] = ['settings', 'signers', 'fields'];
 export const TemplateEditForm = ({ initialTemplate, className, templateRootPath }: TemplateEditFormProps) => {
   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}
             />
 
             <AddTemplateFieldsFormPartial

packages/ui/primitives/document-flow/add-signers.tsx

@@ -68,6 +68,12 @@ export type AddSignersFormProps = {
   onSubmit: (_data: TAddSignersFormSchema) => void;
   onAutoSave: (_data: TAddSignersFormSchema) => Promise<AutoSaveResponse>;
   isDocumentPdfLoaded: boolean;
+  /**
+   * CSP nonce forwarded to `@hello-pangea/dnd`, which injects its drag styles
+   * as runtime `<style>` elements that would otherwise be blocked by the
+   * strict `style-src-elem` policy.
+   */
+  nonce?: string;
 };
 
 export const AddSignersFormPartial = ({
@@ -79,6 +85,7 @@ export const AddSignersFormPartial = ({
   onSubmit,
   onAutoSave,
   isDocumentPdfLoaded,
+  nonce,
 }: AddSignersFormProps) => {
   const { _ } = useLingui();
   const { toast } = useToast();
@@ -647,6 +654,7 @@ export const AddSignersFormPartial = ({
             />
 
             <DragDropContext
+              nonce={nonce}
               onDragEnd={onDragEnd}
               sensors={[
                 (api: SensorAPI) => {

packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx

@@ -58,6 +58,12 @@ export type AddTemplatePlaceholderRecipientsFormProps = {
   onSubmit: (_data: TAddTemplatePlacholderRecipientsFormSchema) => void;
   onAutoSave: (_data: TAddTemplatePlacholderRecipientsFormSchema) => Promise<AutoSaveResponse>;
   isDocumentPdfLoaded: boolean;
+  /**
+   * CSP nonce forwarded to `@hello-pangea/dnd`, which injects its drag styles
+   * as runtime `<style>` elements that would otherwise be blocked by the
+   * strict `style-src-elem` policy.
+   */
+  nonce?: string;
 };
 
 export const AddTemplatePlaceholderRecipientsFormPartial = ({
@@ -70,6 +76,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
   isDocumentPdfLoaded,
   onSubmit,
   onAutoSave,
+  nonce,
 }: AddTemplatePlaceholderRecipientsFormProps) => {
   const initialId = useId();
   const $sensorApi = useRef<SensorAPI | null>(null);
@@ -525,6 +532,7 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
 
             {/* Drag and drop context */}
             <DragDropContext
+              nonce={nonce}
               onDragEnd={onDragEnd}
               sensors={[
                 (api: SensorAPI) => {