feat: enable pasting via the context menu in tree and table mode

josdejong · Feb 13, 2025 · 6c12e3b · 6c12e3b
1 parent bb13594
commit 6c12e3b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/src/lib/components/modals/CopyPasteModal.svelte b/src/lib/components/modals/CopyPasteModal.svelte
@@ -14,7 +14,7 @@
   <Header title="Copying and pasting" {onClose} />
 
   <div class="jse-modal-contents">
-    <div>These actions are unavailable via the menu. Please use:</div>
+    <div>Clipboard permission is disabled by your browser. You can use:</div>
 
     <div class="jse-shortcuts">
       <div class="jse-shortcut">

diff --git a/src/lib/components/modes/tablemode/TableMode.svelte b/src/lib/components/modes/tablemode/TableMode.svelte
@@ -1108,8 +1108,16 @@
     setTimeout(focus)
   }
 
-  function handlePasteFromMenu() {
-    copyPasteModalOpen = true
+  async function handlePasteFromMenu() {
+    try {
+      const clipboardText = await navigator.clipboard.readText()
+
+      _paste(clipboardText)
+    } catch (err) {
+      console.error(err)
+
+      copyPasteModalOpen = true
+    }
   }
 
   function handleClearPastedJson() {
@@ -1353,15 +1361,20 @@
   function handlePaste(event: ClipboardEvent) {
     event.preventDefault()
 
-    const clipboardText = event.clipboardData?.getData('text/plain') as string | undefined
+    const clipboardText = event.clipboardData?.getData('text/plain')
+
+    _paste(clipboardText)
+  }
+
+  function _paste(clipboardText: string | undefined) {
     if (clipboardText === undefined) {
       return
     }
 
     onPaste({
       clipboardText,
       json,
-      selection: selection,
+      selection,
       readOnly,
       parser,
       onPatch: handlePatch,

diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -750,7 +750,24 @@
   function handlePaste(event: ClipboardEvent) {
     event.preventDefault()
 
-    const clipboardText = event.clipboardData?.getData('text/plain') as string | undefined
+    const clipboardText = event.clipboardData?.getData('text/plain')
+
+    _paste(clipboardText)
+  }
+
+  async function handlePasteFromMenu() {
+    try {
+      const clipboardText = await navigator.clipboard.readText()
+
+      _paste(clipboardText)
+    } catch (err) {
+      console.error(err)
+
+      copyPasteModalOpen = true
+    }
+  }
+
+  function _paste(clipboardText: string | undefined) {
     if (clipboardText === undefined) {
       return
     }
@@ -767,10 +784,6 @@
     })
   }
 
-  function handlePasteFromMenu() {
-    copyPasteModalOpen = true
-  }
-
   function openRepairModal(text: string, onApply: (repairedText: string) => void) {
     jsonRepairModalProps = {
       text,