fix(core): early return if paste target is a file/image (#7269)

sanity-io · Jul 30, 2024 · 6fc602c · 6fc602c
1 parent 6f84e1f
commit 6fc602c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/sanity/src/core/form/inputs/common/fileTarget/fileTarget.tsx b/packages/sanity/src/core/form/inputs/common/fileTarget/fileTarget.tsx
@@ -20,6 +20,25 @@ export type FileInfo = {
   type: DataTransferItem['type'] // mime type of file or string
 }
 
+type CamelToKebab<S extends string> = S extends `${infer P1}${infer P2}`
+  ? P2 extends Uncapitalize<P2>
+    ? `${Lowercase<P1>}${CamelToKebab<P2>}`
+    : `${Lowercase<P1>}-${CamelToKebab<Uncapitalize<P2>>}`
+  : S
+
+type DataAttribute<S extends string> = `data-${CamelToKebab<S>}`
+
+const fileTargetAttributeName = 'isFileTarget'
+const fileTargetDataAttribute: Record<DataAttribute<typeof fileTargetAttributeName>, 'true'> = {
+  'data-is-file-target': 'true',
+}
+
+/**
+ * @internal
+ */
+export const isFileTargetElement = (el: HTMLElement): boolean =>
+  el?.dataset?.[fileTargetAttributeName] === 'true'
+
 type Props = {
   // Triggered when the target component receives one or more files, either originating from a drop event or a paste event
   onFiles?: (files: File[]) => void
@@ -189,6 +208,7 @@ export function fileTarget<ComponentProps>(Component: ComponentType<ComponentPro
           onDragLeave={disabled ? undefined : handleDragLeave}
           onDrop={disabled ? undefined : handleDrop}
           data-test-id="file-target"
+          {...fileTargetDataAttribute}
         />
         {!disabled && showPasteInput && (
           <div contentEditable onPaste={handlePaste} ref={pasteInput} style={PASTE_INPUT_STYLE} />

diff --git a/packages/sanity/src/core/hooks/useGlobalCopyPasteElementHandler.ts b/packages/sanity/src/core/hooks/useGlobalCopyPasteElementHandler.ts
@@ -3,6 +3,7 @@ import {isHotkey} from 'is-hotkey-esm'
 import {useCallback, useEffect, useRef} from 'react'
 import {type FormDocumentValue} from 'sanity'
 
+import {isFileTargetElement} from '../form/inputs/common/fileTarget/fileTarget'
 import {useCopyPaste} from '../studio/copyPaste'
 import {hasSelection, isEmptyFocusPath, isNativeEditableElement} from '../studio/copyPaste/utils'
 
@@ -56,7 +57,8 @@ export function useGlobalCopyPasteElementHandler({
       if (isPasteHotKey(event)) {
         if (
           isNativeEditableElement(targetElement as HTMLElement) ||
-          isEmptyFocusPath(focusPathRef.current)
+          isEmptyFocusPath(focusPathRef.current) ||
+          isFileTargetElement(targetElement as HTMLElement)
         ) {
           return
         }