fix(ui): preserve rich image pastes

Author: waleedlatif1

apps/sim/app/_shell/paste-admission-guard.test.tsx

@@ -20,7 +20,7 @@ let root: Root
 function dispatchPaste(
   target: Element,
   text: string,
-  options: { selectionContext?: string; html?: string } = {}
+  options: { selectionContext?: string; html?: string; imageFile?: boolean } = {}
 ): Event {
   const event = new Event('paste', {
     bubbles: true,
@@ -35,6 +35,8 @@ function dispatchPaste(
         if (type === 'text/html') return options.html ?? ''
         return ''
       },
+      files: options.imageFile ? [new File(['image'], 'pasted.png', { type: 'image/png' })] : [],
+      items: options.imageFile ? [{ kind: 'file', type: 'image/png' }] : [],
     },
   })
   target.dispatchEvent(event)
@@ -140,4 +142,23 @@ describe('PasteAdmissionGuard', () => {
       true
     )
   })
+
+  it('lets an opted-in rich editor handle clipboard image files before text admission', () => {
+    const editable = document.createElement('div')
+    editable.setAttribute('contenteditable', 'true')
+    editable.dataset.pasteMaxBytes = '4'
+    editable.dataset.pasteMaxHtmlBytes = '4'
+    editable.dataset.pasteHandlesImages = 'true'
+    host.appendChild(editable)
+
+    const targetHandler = vi.fn()
+    editable.addEventListener('paste', targetHandler)
+    const event = dispatchPaste(editable, '12345', {
+      html: '<img src="data:image/png;base64,large">',
+      imageFile: true,
+    })
+
+    expect(event.defaultPrevented).toBe(false)
+    expect(targetHandler).toHaveBeenCalledOnce()
+  })
 })

apps/sim/app/_shell/paste-admission-guard.tsx

@@ -15,11 +15,20 @@ function finitePositiveAttribute(element: Element | null, name: string): number
   return Number.isFinite(value) && value > 0 ? value : undefined
 }
 
+function clipboardHasImageFile(data: DataTransfer | null): boolean {
+  if (!data) return false
+  if (Array.from(data.files).some((file) => file.type.startsWith('image/'))) return true
+  return Array.from(data.items).some(
+    (item) => item.kind === 'file' && item.type.startsWith('image/')
+  )
+}
+
 /**
  * Last-resort admission for every editable workspace surface. Specialized editors publish their
  * downstream ceiling on an ancestor with `data-paste-max-bytes`; controls without one inherit a
  * crash-only fallback. This layer bounds only the clipboard payload, so a small paste into an already
  * large field keeps native behavior. Editors with a real result-size contract enforce it themselves.
+ * Targets that explicitly handle clipboard images may claim those file events before the text guards.
  * The capture listener runs before React, ProseMirror, Monaco, and xterm parse the clipboard value.
  */
 export function PasteAdmissionGuard() {
@@ -36,6 +45,9 @@ export function PasteAdmissionGuard() {
       const acceptsSelectionContext = event.target.closest('[data-paste-selection-context]')
       if (acceptsSelectionContext && readSelectionContextFromClipboard(event.clipboardData)) return
 
+      const handlesImageFiles = event.target.closest('[data-paste-handles-images="true"]')
+      if (handlesImageFiles && clipboardHasImageFile(event.clipboardData)) return
+
       const text = event.clipboardData?.getData('text/plain') ?? ''
       const policyElement = event.target.closest('[data-paste-max-bytes]')
       const maxPastedBytes =

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx

@@ -557,6 +557,7 @@ export function LoadedRichMarkdownEditor({
         'data-owned-shortcuts': 'Mod+K',
         'data-paste-max-bytes': String(PASTE_LIMITS.RICH_MARKDOWN_BYTES),
         'data-paste-max-html-bytes': String(PASTE_LIMITS.RICH_MARKDOWN_BYTES),
+        'data-paste-handles-images': 'true',
       },
       handleKeyDown: (_view, event) => {
         const isSaveShortcut = (event.metaKey || event.ctrlKey) && event.key?.toLowerCase() === 's'

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx

@@ -250,6 +250,7 @@ function LoadedRichMarkdownField({
         'data-owned-shortcuts': 'Mod+K',
         'data-paste-max-bytes': String(PASTE_LIMITS.RICH_MARKDOWN_BYTES),
         'data-paste-max-html-bytes': String(PASTE_LIMITS.RICH_MARKDOWN_BYTES),
+        'data-paste-handles-images': uploadImage ? 'true' : 'false',
       },
       handlePaste: (view, event) => {
         const images = uploadImageRef.current ? extractImageFiles(event.clipboardData) : []