feat: show a message after pasting multiline text as an Array, offering to paste as string instead (#549)

Author: josdejong

src/lib/components/__snapshots__/JSONEditor.test.ts.snap

@@ -589,6 +589,8 @@ exports[`JSONEditor > render table mode 1`] = `
        
       <!---->
        
+      <!---->
+       
       <!---->
       
       <!---->
@@ -2545,6 +2547,8 @@ exports[`JSONEditor > render tree mode 1`] = `
        
       <!---->
        
+      <!---->
+       
       <!---->
       
       <!---->

src/lib/components/modes/tablemode/TableMode.svelte

@@ -230,6 +230,7 @@
   let parseError: ParseError | undefined = undefined
 
   let pastedJson: PastedJson | undefined
+  let pastedMultilineText: string | undefined
 
   let searchResultDetails: SearchResultDetails | undefined
   let searchResults: SearchResults | undefined
@@ -614,6 +615,7 @@
     text = undefined
     textIsRepaired = false
     pastedJson = undefined
+    pastedMultilineText = undefined
     parseError = undefined
 
     history.add({
@@ -688,6 +690,12 @@
     pastedJson = newPastedJson
   }
 
+  function handlePasteMultilineText(pastedText: string) {
+    debug('pasted multiline text', { pastedText })
+
+    pastedMultilineText = pastedText
+  }
+
   function findNextInside(path: JSONPath): JSONSelection {
     const index = parseInt(path[0], 10)
     const nextPath = [String(index + 1), ...path.slice(1)]
@@ -1127,12 +1135,30 @@
     }
   }
 
+  async function handleParsePastedMultilineText() {
+    debug('apply pasted multiline text', pastedMultilineText)
+    if (!pastedMultilineText) {
+      return
+    }
+
+    _paste(JSON.stringify(pastedMultilineText))
+
+    // TODO: get rid of the setTimeout here
+    setTimeout(focus)
+  }
+
   function handleClearPastedJson() {
     debug('clear pasted json')
     pastedJson = undefined
     focus()
   }
 
+  function handleClearPastedMultilineText() {
+    debug('clear pasted multiline text')
+    pastedMultilineText = undefined
+    focus()
+  }
+
   function handleRequestRepair() {
     onChangeMode(Mode.text)
   }
@@ -1398,6 +1424,7 @@
       parser,
       onPatch: handlePatch,
       onChangeText: handleChangeText,
+      onPasteMultilineText: handlePasteMultilineText,
       openRepairModal
     })
   }
@@ -1928,6 +1955,26 @@
         />
       {/if}
 
+      {#if pastedMultilineText}
+        <Message
+          type="info"
+          message="Multiline text was pasted as array"
+          actions={[
+            {
+              icon: faWrench,
+              text: 'Paste as string instead',
+              title: 'Paste the clipboard data as a single string value instead of an array',
+              onClick: handleParsePastedMultilineText
+            },
+            {
+              text: 'Leave as is',
+              title: 'Keep the pasted array',
+              onClick: handleClearPastedMultilineText
+            }
+          ]}
+        />
+      {/if}
+
       {#if textIsRepaired}
         <Message
           type="success"

src/lib/components/modes/treemode/TreeMode.svelte

@@ -279,6 +279,7 @@
   })
 
   let pastedJson: PastedJson | undefined
+  let pastedMultilineText: string | undefined
 
   let searchResultDetails: SearchResultDetails | undefined
   let searchResults: SearchResults | undefined
@@ -639,6 +640,7 @@
     text = undefined
     textIsRepaired = false
     pastedJson = undefined
+    pastedMultilineText = undefined
     parseError = undefined
 
     // ensure the selection is valid
@@ -785,6 +787,7 @@
       parser,
       onPatch: handlePatch,
       onChangeText: handleChangeText,
+      onPasteMultilineText: handlePasteMultilineText,
       openRepairModal
     })
   }
@@ -1463,6 +1466,12 @@
     pastedJson = newPastedJson
   }
 
+  function handlePasteMultilineText(pastedText: string) {
+    debug('pasted multiline text', { pastedText })
+
+    pastedMultilineText = pastedText
+  }
+
   function handleKeyDown(event: KeyboardEvent) {
     const combo = keyComboFromEvent(event)
     const keepAnchorPath = event.shiftKey
@@ -1795,12 +1804,30 @@
     setTimeout(focus)
   }
 
+  async function handleParsePastedMultilineText() {
+    debug('apply pasted multiline text', pastedMultilineText)
+    if (!pastedMultilineText) {
+      return
+    }
+
+    _paste(JSON.stringify(pastedMultilineText))
+
+    // TODO: get rid of the setTimeout here
+    setTimeout(focus)
+  }
+
   function handleClearPastedJson() {
     debug('clear pasted json')
     pastedJson = undefined
     focus()
   }
 
+  function handleClearPastedMultilineText() {
+    debug('clear pasted multiline text')
+    pastedMultilineText = undefined
+    focus()
+  }
+
   function handleRequestRepair() {
     onChangeMode(Mode.text)
   }
@@ -2035,6 +2062,26 @@
         />
       {/if}
 
+      {#if pastedMultilineText}
+        <Message
+          type="info"
+          message="Multiline text was pasted as array"
+          actions={[
+            {
+              icon: faWrench,
+              text: 'Paste as string instead',
+              title: 'Paste the clipboard data as a single string value instead of an array',
+              onClick: handleParsePastedMultilineText
+            },
+            {
+              text: 'Leave as is',
+              title: 'Keep the pasted array',
+              onClick: handleClearPastedMultilineText
+            }
+          ]}
+        />
+      {/if}
+
       {#if textIsRepaired}
         <Message
           type="success"

src/lib/constants.ts

@@ -17,6 +17,7 @@ export const MAX_HEADER_NAME_CHARACTERS = 50
 export const DEFAULT_VISIBLE_SECTIONS: Section[] = [{ start: 0, end: ARRAY_SECTION_SIZE }]
 export const MAX_VALIDATABLE_SIZE = 100 * 1024 * 1024 // 1 MB
 export const MAX_AUTO_REPAIRABLE_SIZE = 1024 * 1024 // 1 MB
+export const MAX_MULTILINE_PASTE_SIZE = 1024 * 1024 // 1 MB
 export const MAX_DOCUMENT_SIZE_TEXT_MODE = 10 * 1024 * 1024 // 10 MB
 export const MAX_DOCUMENT_SIZE_EXPAND_ALL = 10 * 1024 // 10 KB
 

src/lib/logic/actions.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, test } from 'vitest'
+import { isMultilineTextPastedAsArray } from '$lib/logic/actions'
+import { insert } from '$lib/logic/operations'
+import { createValueSelection } from 'svelte-jsoneditor'
+
+describe('actions', () => {
+  describe('isMultiLineTextPastedAsArray', () => {
+    const maxMultilinePasteSize = 100
+
+    function isMultilineText(
+      clipboardText: string,
+      json = {},
+      selection = createValueSelection([])
+    ): boolean {
+      const parser = JSON
+      const operations = insert(json, selection, clipboardText, parser)
+
+      return isMultilineTextPastedAsArray(clipboardText, operations, parser, maxMultilinePasteSize)
+    }
+
+    test('should return false when the text is too large', () => {
+      expect(isMultilineText('a\n'.repeat(maxMultilinePasteSize / 2 + 1))).toEqual(false)
+    })
+
+    test('should return false when not containing a newline', () => {
+      expect(isMultilineText('Hello world')).toEqual(false)
+    })
+
+    test('should return false when containing partial JSON', () => {
+      expect(isMultilineText('1,\n2,')).toEqual(false)
+      expect(isMultilineText('"a",\n"b",')).toEqual(false)
+      expect(isMultilineText('"a":1,\n"b":2,')).toEqual(false)
+    })
+
+    test('should return true when containing a newline and not being partial JSON', () => {
+      expect(isMultilineText('A\nB\nC\n')).toEqual(true)
+      expect(isMultilineText('Hello,\nmulti line text')).toEqual(true)
+    })
+  })
+})

src/lib/logic/actions.ts

@@ -36,13 +36,16 @@ import {
   isJSONObject,
   isJSONPatchAdd,
   isJSONPatchReplace,
+  type JSONPatchOperation,
   type JSONPath,
   parsePath
 } from 'immutable-json-patch'
 import { isObject, isObjectOrArray } from '$lib/utils/typeUtils.js'
 import { expandAll, expandNone, expandPath, expandSmart } from '$lib/logic/documentState.js'
 import { initial, isEmpty, last } from 'lodash-es'
 import { fromTableCellPosition, toTableCellPosition } from '$lib/logic/table.js'
+import { parsePartialJson } from '$lib/utils/jsonUtils'
+import { MAX_MULTILINE_PASTE_SIZE } from '$lib/constants'
 
 const debug = createDebug('jsoneditor:actions')
 
@@ -114,6 +117,7 @@ interface OnPasteAction {
   parser: JSONParser
   onPatch: OnPatch
   onChangeText: OnChangeText
+  onPasteMultilineText: (pastedText: string) => void
   openRepairModal: RepairModalCallback
 }
 
@@ -126,6 +130,7 @@ export function onPaste({
   parser,
   onPatch,
   onChangeText,
+  onPasteMultilineText,
   openRepairModal
 }: OnPasteAction) {
   if (readOnly) {
@@ -138,7 +143,9 @@ export function onPaste({
 
       const operations = insert(json, ensureSelection, pastedText, parser)
 
-      debug('paste', { pastedText, operations, ensureSelection })
+      const pasteMultilineText = isMultilineTextPastedAsArray(clipboardText, operations, parser)
+
+      debug('paste', { pastedText, operations, ensureSelection, pasteMultilineText })
 
       onPatch(operations, (patchedJson, patchedState) => {
         let updatedState = patchedState
@@ -159,6 +166,10 @@ export function onPaste({
           state: updatedState
         }
       })
+
+      if (pasteMultilineText) {
+        onPasteMultilineText(pastedText)
+      }
     } else {
       // no json: empty document, or the contents is invalid text
       debug('paste text', { pastedText })
@@ -186,6 +197,48 @@ export function onPaste({
   }
 }
 
+/**
+ * When pasting text, we cannot always know how whether the text was intended as
+ * a list with items that should be parsed into a JSON Array (after jsonrepair),
+ * or a text with multiple lines that should be parsed into a single string.
+ *
+ * This function checks whether we're dealing with such a case, after which
+ * we can show a message to the user asking about the intended behavior.
+ */
+export function isMultilineTextPastedAsArray(
+  clipboardText: string,
+  operators: JSONPatchOperation[],
+  parser: JSONParser,
+  maxSize = MAX_MULTILINE_PASTE_SIZE
+): boolean {
+  if (clipboardText.length > maxSize) {
+    // we don't want this feature detecting multiline text to impact performance, hence this max
+    return false
+  }
+
+  const containsNewline = /\n/.test(clipboardText)
+  if (!containsNewline) {
+    return false
+  }
+
+  const replaceArrayOperation = operators.some(
+    (operator) => operator.op === 'replace' && Array.isArray(operator.value)
+  )
+  const multipleAddOperations = operators.filter((operator) => operator.op === 'add').length > 1
+  const pastingArray = replaceArrayOperation || multipleAddOperations
+  if (!pastingArray) {
+    return false
+  }
+
+  try {
+    parsePartialJson(clipboardText, parser.parse)
+
+    return false
+  } catch {
+    return true
+  }
+}
+
 export interface OnRemoveAction {
   json: unknown | undefined
   text: string | undefined