#115 copy cell value

src/lib/utils/clipboardIo.js

@@ -2,9 +2,11 @@ import Lib from 'plotly.js/src/lib'
 import dataUrlToBlob from 'dataurl-to-blob'
 
 export default {
-  async copyCsv (str) {
+  async copyText (str, notifyMessage) {
     await navigator.clipboard.writeText(str)
-    Lib.notifier('CSV copied to clipboard successfully', 'long')
+    if (notifyMessage) {
+      Lib.notifier(notifyMessage, 'long')
+    }
   },
 
   async copyImage (source) {

src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue

@@ -10,7 +10,15 @@
       >
         {{ format.text }}
       </button>
+
+      <button
+        type="button"
+        @click="copyToClipboard"
+      >
+        Copy
+      </button>
     </div>
+    <div class="value-body">
       <codemirror
         v-if="currentFormat === 'json'"
         :value="formattedJson"
@@ -20,6 +28,7 @@
         {{ cellValue }}
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -31,6 +40,7 @@ import 'codemirror/addon/fold/foldgutter.js'
 import 'codemirror/addon/fold/foldgutter.css'
 import 'codemirror/addon/fold/brace-fold.js'
 import 'codemirror/theme/neo.css'
+import cIo from '@/lib/utils/clipboardIo'
 
 export default {
   components: {
@@ -43,7 +53,7 @@ export default {
     return {
       formats: [
         { text: 'JSON', value: 'json' },
-        { text: 'TEXT', value: 'text' }
+        { text: 'Text', value: 'text' }
       ],
       currentFormat: 'text',
       cmOptions: {
@@ -81,6 +91,13 @@ export default {
       } catch {
         this.formattedJson = ''
       }
+    },
+    copyToClipboard () {
+      cIo.copyText(this.currentFormat === 'json'
+        ? this.formattedJson
+        : this.cellValue,
+      'The value is copied to clipboard.'
+      )
     }
   }
 }
@@ -89,13 +106,20 @@ export default {
 <style scoped>
 .value-viewer {
   background-color: var(--color-white);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 .value-viewer-toolbar {
   display: flex;
   justify-content: end;
 }
+.value-body {
+  flex-grow: 1;
+  overflow: auto;
+}
 .text-value {
-  padding: 2px 8px;
+  padding: 8px 8px;
   color: var(--color-text-base);
 }
 
@@ -116,4 +140,17 @@ export default {
 .value-viewer-toolbar button[aria-selected="true"] {
   color: var(--color-accent);
 }
+
+>>> .vue-codemirror {
+  height: 100%;
+  max-height: 100%;
+}
+>>> .CodeMirror {
+  height: 100%;
+  max-height: 100%;
+}
+>>> .CodeMirror-cursor {
+  width: 1px;
+  background: var(--color-text-base);
+}
 </style>

src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue

@@ -256,7 +256,7 @@ export default {
     },
 
     copyToClipboard () {
-      cIo.copyCsv(this.dataToCopy)
+      cIo.copyText(this.dataToCopy, 'CSV copied to clipboard successfully')
       this.$modal.hide('prepareCSVCopy')
     },
 

tests/lib/utils/clipboardIo.spec.js

@@ -7,9 +7,9 @@ describe('clipboardIo.js', async () => {
     sinon.restore()
   })
 
-  it('copyCsv', async () => {
+  it('copyText', async () => {
     sinon.stub(navigator.clipboard, 'writeText').resolves(true)
-    await cIo.copyCsv('id\tname\r\n1\t2')
+    await cIo.copyText('id\tname\r\n1\t2')
     expect(navigator.clipboard.writeText.calledOnceWith('id\tname\r\n1\t2'))
   })