fix(file-editor): preserve pasted content and literal markdown (#7641)

* fix(file-editor): preserve pasted content and literal markdown

* fix(file-editor): retain rich fragments through image uploads

Author: waleedlatif1

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

@@ -10,4 +10,14 @@ export const JoiningBulletList = BulletList.extend({
   addInputRules() {
     return joinListInputRules(this.parent?.() ?? [], this.type)
   },
+  renderMarkdown(node, helpers, context) {
+    const firstParagraph = node.content?.[0]?.content?.[0]
+    const startsEmpty = firstParagraph?.type === 'paragraph' && !firstParagraph.content?.length
+    const nested = context.parentType === 'listItem' || context.parentType === 'taskItem'
+    const followsText =
+      context.previousNode?.type === 'paragraph' && Boolean(context.previousNode.content?.length)
+    const rendered = helpers.renderChildren(node.content ?? [], '\n')
+    /** Separate an opening empty bullet from its parent's text so it cannot become a Setext heading. */
+    return nested && startsEmpty && followsText ? `\n${rendered}` : rendered
+  },
 })

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

@@ -12,6 +12,7 @@ import { exportWorkspaceFileSnapshotBodySchema } from '@/lib/api/contracts/works
 import { SIM_SELECTION_MIME } from '@/lib/copilot/chat/selection-clipboard'
 import type { FileDownloadSource } from '@/lib/uploads/client/download'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
+import { extractEmbeddedFileRef } from '@/lib/uploads/utils/embedded-image-ref'
 import { useFileDocCollaboration } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/collaboration/use-file-doc-collaboration'
 import { createMarkdownContentExtensions } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/extensions'
 import { ImageUploadPlaceholders } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image-upload'
@@ -215,6 +216,7 @@ async function pasteImage(editor: Editor) {
 
 beforeEach(() => {
   vi.clearAllMocks()
+  uploadFile.mockReset()
   collaborationRef.current = null
   vi.spyOn(toast, 'warning').mockReturnValue('test-toast')
   vi.spyOn(toast, 'info').mockReturnValue('uploading-toast')
@@ -231,6 +233,58 @@ afterEach(async () => {
 })
 
 describe('loaded rich editor lifecycle', () => {
+  it.each([
+    { method: 'paste', caption: false },
+    { method: 'drop', caption: false },
+    { method: 'paste', caption: true },
+    { method: 'drop', caption: true },
+  ] as const)(
+    '$method uploads a display-only image from another document (caption: $caption)',
+    async ({ method, caption }) => {
+      await render('before TARGET after')
+      const editor = getEditor()
+      await act(async () => editor.commands.setTextSelection({ from: 8, to: 14 }))
+      if (method === 'drop')
+        vi.spyOn(editor.view, 'posAtCoords').mockReturnValue({ pos: 8, inside: 0 })
+      const src = '/api/workspaces/another-workspace/files/inline?fileId=another-image'
+      const image = new File(['image'], 'image.png', { type: 'image/png' })
+      const img = `<img src="${window.location.origin}${src}" alt="Original" width="140">`
+      const html = caption ? `<p>Caption<a href="/destination">${img}</a></p><p>Tail</p>` : img
+      uploadFile.mockResolvedValueOnce({ file: { url: '/api/files/view/uploaded-image' } })
+      const event = new MouseEvent(method, { bubbles: true, cancelable: true })
+      Object.defineProperty(event, method === 'paste' ? 'clipboardData' : 'dataTransfer', {
+        value: {
+          files: [image],
+          items: [],
+          types: ['Files', 'text/html'],
+          getData: (type: string) => (type === 'text/html' ? html : ''),
+        },
+      })
+      await act(async () => editor.view.dom.dispatchEvent(event))
+      expect(event.defaultPrevented).toBe(true)
+      expect(uploadFile).toHaveBeenCalledExactlyOnceWith({
+        workspaceId: FILE.workspaceId,
+        file: image,
+        folderId: null,
+      })
+      expect(editor.getMarkdown()).toContain('/api/files/view/uploaded-image')
+      expect(editor.getMarkdown()).not.toContain('/inline?')
+      let storedSrc = ''
+      editor.state.doc.descendants((node) => {
+        if (node.type.name === 'image' || node.type.name === 'inlineImage')
+          storedSrc = node.attrs.src
+      })
+      expect(extractEmbeddedFileRef(storedSrc)).toEqual({ fileId: 'uploaded-image' })
+      expect(editor.state.doc.textContent).toBe(
+        `before ${caption ? 'CaptionTail' : ''}${method === 'paste' ? '' : 'TARGET'} after`
+      )
+      expect(editor.view.dom.querySelector('img')?.getAttribute('alt')).toBe('Original')
+      expect(editor.getMarkdown()).toContain('width="140"')
+      if (caption)
+        expect(editor.view.dom.querySelector('a')?.getAttribute('href')).toBe('/destination')
+    }
+  )
+
   it('captures immediate collaborative edits with current shared frontmatter without saving', async () => {
     const provider = new FakeFileDocProvider()
     const doc = new Y.Doc()

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

@@ -174,7 +174,16 @@ const BlockSafeParagraph = Paragraph.extend({
   },
   renderMarkdown: (node: JSONContent, h, context) => {
     if (!node.content?.length && context.parentType === 'blockquote') return '<p></p>'
-    const rendered = h.renderChildren(node.content ?? [])
+    let rendered = h.renderChildren(node.content ?? [])
+    const first = node.content?.[0]
+    if (
+      context.parentType === 'blockquote' &&
+      first?.type === 'text' &&
+      !first.marks?.length &&
+      /^\[![A-Za-z]+\]/.test(first.text ?? '')
+    ) {
+      rendered = rendered.replace(/^\\\[!([A-Za-z]+)\\\]/, '[!$1]')
+    }
     let codeDelimiter = 0
     return rendered
       .split('\n')

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

@@ -65,9 +65,10 @@ function editor() {
 async function submit(
   method: 'paste' | 'drop',
   target: Editor,
-  files = [new File(['image'], 'image.png', { type: 'image/png' })]
+  files = [new File(['image'], 'image.png', { type: 'image/png' })],
+  selection: number | { from: number; to: number } = 8
 ) {
-  await act(async () => target.commands.setTextSelection(8))
+  await act(async () => target.commands.setTextSelection(selection))
   if (method === 'drop') vi.spyOn(target.view, 'posAtCoords').mockReturnValue({ pos: 8, inside: 0 })
   const transfer = { files, items: [], types: ['Files'], getData: () => '' }
   const event = new Event(method, { bubbles: true, cancelable: true })
@@ -81,6 +82,112 @@ async function submit(
 }
 
 describe('field upload completion boundary', () => {
+  it.each(['paste', 'drop'] as const)(
+    '%s uploads a non-portable image without losing its accompanying fragment',
+    async (method) => {
+      const pending = Promise.withResolvers<{ url: string; alt: string }>()
+      upload.mockReturnValueOnce(pending.promise)
+      await render()
+      const owner = editor()
+      const before = owner.getJSON()
+      await act(async () => owner.commands.setTextSelection({ from: 8, to: 14 }))
+      if (method === 'drop')
+        vi.spyOn(owner.view, 'posAtCoords').mockReturnValue({ pos: 8, inside: 0 })
+      const html =
+        '<p>Lead</p><h2>Caption</h2><p><a href="/destination"><img src="/api/workspaces/source/files/inline?fileId=image" alt="Original alt" width="123"></a><strong>Tail</strong><img src="/other.png" alt="Other"></p>'
+      const event = new MouseEvent(method, { bubbles: true, cancelable: true })
+      Object.defineProperty(event, method === 'paste' ? 'clipboardData' : 'dataTransfer', {
+        value: {
+          files: [new File(['image'], 'image.png', { type: 'image/png' })],
+          items: [],
+          types: ['Files', 'text/html'],
+          getData: (type: string) => (type === 'text/html' ? html : ''),
+        },
+      })
+      await act(async () => owner.view.dom.dispatchEvent(event))
+      expect(upload).toHaveBeenCalledOnce()
+      expect(owner.getJSON()).toEqual(before)
+      await act(async () => owner.commands.insertContentAt(1, 'prefix '))
+      await act(async () => pending.resolve({ url: '/api/files/view/uploaded', alt: 'New alt' }))
+      expect(owner.state.doc.textContent).toBe(
+        method === 'paste'
+          ? 'prefix before LeadCaptionTail after'
+          : 'prefix before LeadCaptionTailTARGET after'
+      )
+      expect(host.querySelector('h2')?.textContent).toBe('Caption')
+      expect(host.querySelector('strong')?.textContent).toBe('Tail')
+      expect(host.querySelector('a')?.getAttribute('href')).toBe('/destination')
+      expect(
+        Array.from(host.querySelectorAll('img')).map((image) => image.getAttribute('src'))
+      ).toEqual(['/api/files/view/uploaded', '/other.png'])
+      expect(host.querySelector('img')?.getAttribute('alt')).toBe('Original alt')
+      expect(owner.getMarkdown()).toContain('width="123"')
+      expect(owner.getMarkdown()).not.toContain('/inline?')
+      expect(() => owner.state.doc.check()).not.toThrow()
+    }
+  )
+
+  it('replaces the selected range only after a pasted image finishes uploading', async () => {
+    const pending = Promise.withResolvers<{ url: string; alt: string }>()
+    upload.mockReturnValueOnce(pending.promise)
+    await render()
+    const owner = editor()
+    const before = owner.getJSON()
+    await submit('paste', owner, undefined, { from: 8, to: 14 })
+    expect(owner.getJSON()).toEqual(before)
+    await act(async () =>
+      pending.resolve({ url: 'https://sim.ai/replacement.png', alt: 'Replacement' })
+    )
+    expect(owner.state.doc.textContent).toBe('before  after')
+    expect(host.querySelectorAll('img')).toHaveLength(1)
+    await act(async () => owner.commands.undo())
+    expect(owner.getJSON()).toEqual(before)
+  })
+
+  it.each(['paste', 'drop'] as const)(
+    '%s preserves the whole HTML slice when the payload also contains a bitmap file',
+    async (method) => {
+      await render()
+      const owner = editor()
+      await act(async () => owner.commands.setTextSelection({ from: 8, to: 14 }))
+      if (method === 'drop')
+        vi.spyOn(owner.view, 'posAtCoords').mockReturnValue({ pos: 8, inside: 0 })
+      const html =
+        '<p>Lead</p><h2>Caption</h2><p><a href="https://sim.ai/link"><img src="https://sim.ai/one.png" alt="One" width="123"></a>Tail<img src="https://sim.ai/two.png" alt="Two" width="234"></p>'
+      const transfer = {
+        files: [new File(['image'], 'image.png', { type: 'image/png' })],
+        items: [],
+        types: ['text/html', 'text/plain', 'Files'],
+        getData: (type: string) =>
+          type === 'text/html' ? html : type === 'text/plain' ? 'CaptionTail' : '',
+      }
+      const event = new MouseEvent(method, { bubbles: true, cancelable: true })
+      Object.defineProperty(event, method === 'paste' ? 'clipboardData' : 'dataTransfer', {
+        value: transfer,
+      })
+      await act(async () => owner.view.dom.dispatchEvent(event))
+      expect(event.defaultPrevented).toBe(true)
+      expect(upload).not.toHaveBeenCalled()
+      expect(host.querySelector('h2')?.textContent).toBe('Caption')
+      expect(owner.state.doc.textContent).toContain('Tail')
+      expect(Array.from(host.querySelectorAll('img')).map((image) => image.alt)).toEqual([
+        'One',
+        'Two',
+      ])
+      const images: Array<{ src: string; width: string; href: string | null }> = []
+      owner.state.doc.descendants((node) => {
+        if (node.type.name === 'image' || node.type.name === 'inlineImage') {
+          images.push({ src: node.attrs.src, width: node.attrs.width, href: node.attrs.href })
+        }
+      })
+      expect(images).toEqual([
+        { src: 'https://sim.ai/one.png', width: '123', href: 'https://sim.ai/link' },
+        { src: 'https://sim.ai/two.png', width: '234', href: null },
+      ])
+      expect(() => owner.state.doc.check()).not.toThrow()
+    }
+  )
+
   it('invalidates an upload even when streaming ends before completion', async () => {
     const pending = Promise.withResolvers<{ url: string; alt: string }>()
     upload.mockReturnValueOnce(pending.promise)

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/heading-image.test.ts

@@ -3,7 +3,7 @@ import { FILE_DOC_SEED } from '@sim/realtime-protocol/file-doc'
 import { Editor, getSchema } from '@tiptap/core'
 import { DOMParser, DOMSerializer } from '@tiptap/pm/model'
 import { NodeSelection } from '@tiptap/pm/state'
-import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterEach, describe, expect, it } from 'vitest'
 import * as Y from 'yjs'
 import { markdownToYDoc, yDocToFileMarkdown, yDocToMarkdown } from '@/lib/collab-doc/converter'
 import {
@@ -13,7 +13,7 @@ import {
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/collaboration/apply-streamed-markdown'
 import { FileCollaboration } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/collaboration/file-collaboration'
 import { createMarkdownContentExtensions } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/extensions'
-import { moveDraggedImageNode } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image-drag-move'
+import { dispatchEditorDrop } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image-drop.test-helpers'
 import { isImageNode } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image-node'
 import {
   beginImageUploads,
@@ -333,13 +333,7 @@ describe('heading images', () => {
       seed.destroy()
       const originalAttrs = a.editor.state.doc.nodeAt(imagePositions(a.editor)[0])?.attrs
       a.editor.commands.setNodeSelection(imagePositions(a.editor)[0])
-      vi.spyOn(a.editor.view, 'posAtCoords').mockReturnValue({ pos: 8, inside: 0 })
-      expect(
-        moveDraggedImageNode(a.editor.view, new MouseEvent('drop') as DragEvent, {
-          images: [],
-          html: '<img src="/logo.png">',
-        })
-      ).toBe(true)
+      expect(dispatchEditorDrop(a.editor, 8).defaultPrevented).toBe(true)
       expect(a.editor.state.doc.nodeAt(8)?.type.name).toBe('inlineImage')
       expect(a.editor.state.doc.nodeAt(8)?.attrs).toEqual(originalAttrs)
       b.editor.commands.insertContentAt(b.editor.state.doc.content.size - 1, ' preserved')

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

@@ -13,7 +13,7 @@ import {
   ResizableImage,
   ResizableInlineImage,
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image'
-import { moveDraggedImageNode } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image-drag-move'
+import { dispatchEditorDrop } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image-drop.test-helpers'
 import { isImageNode } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/image-node'
 
 let host: HTMLDivElement
@@ -126,16 +126,8 @@ async function addPeerSibling(sameSource = true): Promise<number> {
 }
 
 function movePeerImage(from: number, to: number): void {
-  const image = peer.state.doc.nodeAt(from)!
   peer.commands.setNodeSelection(from)
-  vi.spyOn(peer.view, 'posAtCoords').mockReturnValue({ pos: to, inside: 0 })
-  expect(
-    moveDraggedImageNode(
-      peer.view,
-      new MouseEvent('drop', { clientX: 0, clientY: 0, cancelable: true }) as DragEvent,
-      { images: [], html: `<img src="${image.attrs.src}">` }
-    )
-  ).toBe(true)
+  expect(dispatchEditorDrop(peer, to).defaultPrevented).toBe(true)
 }
 
 async function setNestedImages(depth: number): Promise<void> {
@@ -220,15 +212,9 @@ describe('image resizing during real peer Yjs updates', () => {
       local.setOptions({ editorProps: { handleScrollToSelection: () => false } })
       yUndoPluginKey.getState(local.state).undoManager.clear()
       const dropPosition = target === 'heading' ? 8 : imagePosition(local) + 5
-      vi.spyOn(local.view, 'posAtCoords').mockReturnValue({ pos: dropPosition, inside: 0 })
       await act(async () => {
         local.view.focus()
-        expect(
-          moveDraggedImageNode(local.view, new MouseEvent('drop') as DragEvent, {
-            images: [],
-            html: '<img src="https://sim.ai/image.png">',
-          })
-        ).toBe(true)
+        expect(dispatchEditorDrop(local, dropPosition).defaultPrevented).toBe(true)
       })
       expect(local.state.selection).toBeInstanceOf(NodeSelection)
       expect(host.querySelector(`${target === 'heading' ? 'h2' : 'p'} img`)).not.toBeNull()