fix(ui): account for multi-cursor pastes

Author: waleedlatif1

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

@@ -4,8 +4,11 @@
 import { Editor } from '@tiptap/core'
 import { TextSelection } from '@tiptap/pm/state'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { createMarkdownContentExtensions } from './extensions'
-import { assessRawMarkdownPaste, createRichMarkdownPasteAdmission } from './paste-admission'
+import { createMarkdownContentExtensions } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/extensions'
+import {
+  assessRawMarkdownPaste,
+  createRichMarkdownPasteAdmission,
+} from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/paste-admission'
 
 let editor: Editor | null = null
 

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor-paste.test.ts

@@ -8,8 +8,7 @@ describe('assessTextEditorPaste', () => {
         {
           pastedText: '56789',
           currentText: '123456',
-          selectionStart: 6,
-          selectionEnd: 6,
+          selections: [{ start: 6, end: 6 }],
         },
         10
       )
@@ -22,11 +21,26 @@ describe('assessTextEditorPaste', () => {
         {
           pastedText: '56789',
           currentText: '123456',
-          selectionStart: 1,
-          selectionEnd: 6,
+          selections: [{ start: 1, end: 6 }],
         },
         6
       )
     ).toMatchObject({ accepted: true, resultBytes: 6 })
   })
+
+  it('projects the clipboard text at every Monaco cursor', () => {
+    expect(
+      assessTextEditorPaste(
+        {
+          pastedText: 'xy',
+          currentText: '12345678',
+          selections: [
+            { start: 2, end: 2 },
+            { start: 6, end: 6 },
+          ],
+        },
+        10
+      )
+    ).toMatchObject({ accepted: false, reason: 'result-bytes', limit: 10 })
+  })
 })

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor-paste.ts

@@ -1,20 +1,108 @@
-import { assessTextPaste, PASTE_LIMITS, type TextPasteAdmission } from '@sim/utils/paste'
+import {
+  PASTE_LIMITS,
+  type TextPasteAdmission,
+  utf8ByteLength,
+  utf8ByteLengthRange,
+} from '@sim/utils/paste'
+
+interface TextEditorPasteSelection {
+  start: number
+  end: number
+}
 
 interface TextEditorPasteInput {
   pastedText: string
   currentText: string
-  selectionStart: number
-  selectionEnd: number
+  selections: readonly TextEditorPasteSelection[]
+}
+
+function normalizedSelections(
+  selections: readonly TextEditorPasteSelection[],
+  textLength: number
+): TextEditorPasteSelection[] {
+  const source = selections.length > 0 ? selections : [{ start: textLength, end: textLength }]
+  return source
+    .map(({ start, end }) => ({
+      start: Math.min(Math.max(Math.min(start, end), 0), textLength),
+      end: Math.min(Math.max(Math.max(start, end), 0), textLength),
+    }))
+    .sort((left, right) => left.start - right.start || left.end - right.end)
+}
+
+function mergedReplacementRanges(
+  selections: readonly TextEditorPasteSelection[]
+): TextEditorPasteSelection[] {
+  const ranges: TextEditorPasteSelection[] = []
+  for (const selection of selections) {
+    if (selection.start === selection.end) continue
+    const previous = ranges.at(-1)
+    if (previous && selection.start <= previous.end) {
+      previous.end = Math.max(previous.end, selection.end)
+    } else {
+      ranges.push({ ...selection })
+    }
+  }
+  return ranges
 }
 
-/** Applies the workspace-file content contract to a projected Monaco paste result. */
+/** Applies the workspace-file content contract to every selection in a projected Monaco paste. */
 export function assessTextEditorPaste(
   input: TextEditorPasteInput,
   maxBytes = PASTE_LIMITS.TEXT_EDITOR_BYTES
 ): TextPasteAdmission {
-  return assessTextPaste({
-    ...input,
-    maxPastedBytes: maxBytes,
-    maxResultBytes: maxBytes,
-  })
+  const selections = normalizedSelections(input.selections, input.currentText.length)
+  const replacementRanges = mergedReplacementRanges(selections)
+  const replacedCharacters = replacementRanges.reduce(
+    (total, selection) => total + selection.end - selection.start,
+    0
+  )
+  const resultCharacters =
+    input.currentText.length - replacedCharacters + input.pastedText.length * selections.length
+
+  if (resultCharacters <= Math.floor(maxBytes / 3)) {
+    return { accepted: true, resultCharacters }
+  }
+
+  const pastedBytes = utf8ByteLength(input.pastedText, maxBytes)
+  if (pastedBytes > maxBytes) {
+    return { accepted: false, reason: 'pasted-bytes', actual: pastedBytes, limit: maxBytes }
+  }
+
+  const insertedBytes = pastedBytes * selections.length
+  if (insertedBytes > maxBytes) {
+    return { accepted: false, reason: 'result-bytes', actual: insertedBytes, limit: maxBytes }
+  }
+
+  let retainedBytes = 0
+  let retainedStart = 0
+  for (const selection of replacementRanges) {
+    retainedBytes += utf8ByteLengthRange(
+      input.currentText,
+      retainedStart,
+      selection.start,
+      maxBytes - insertedBytes - retainedBytes
+    )
+    if (retainedBytes + insertedBytes > maxBytes) {
+      return {
+        accepted: false,
+        reason: 'result-bytes',
+        actual: retainedBytes + insertedBytes,
+        limit: maxBytes,
+      }
+    }
+    retainedStart = selection.end
+  }
+  retainedBytes += utf8ByteLengthRange(
+    input.currentText,
+    retainedStart,
+    input.currentText.length,
+    maxBytes - insertedBytes - retainedBytes
+  )
+
+  const resultBytes = retainedBytes + insertedBytes
+  if (resultBytes > maxBytes) {
+    return { accepted: false, reason: 'result-bytes', actual: resultBytes, limit: maxBytes }
+  }
+
+  return { accepted: true, pastedBytes, resultBytes, resultCharacters }
 }

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

@@ -600,28 +600,26 @@ export const TextEditor = memo(function TextEditor({
 
     const editor = monacoEditorRef.current
     const model = editor?.getModel()
-    const selection = editor?.getSelection()
+    const selections = editor?.getSelections()
     const currentText = contentRef.current
-    const selectionStart =
-      model && selection
-        ? model.getOffsetAt({
-            lineNumber: selection.startLineNumber,
-            column: selection.startColumn,
-          })
-        : currentText.length
-    const selectionEnd =
-      model && selection
-        ? model.getOffsetAt({
-            lineNumber: selection.endLineNumber,
-            column: selection.endColumn,
-          })
-        : selectionStart
+    const selectionOffsets =
+      model && selections?.length
+        ? selections.map((selection) => ({
+            start: model.getOffsetAt({
+              lineNumber: selection.startLineNumber,
+              column: selection.startColumn,
+            }),
+            end: model.getOffsetAt({
+              lineNumber: selection.endLineNumber,
+              column: selection.endColumn,
+            }),
+          }))
+        : [{ start: currentText.length, end: currentText.length }]
 
     const admission = assessTextEditorPaste({
       pastedText,
       currentText,
-      selectionStart,
-      selectionEnd,
+      selections: selectionOffsets,
     })
     if (admission.accepted) return