#90 handle native json field in datagrid

packages/web/src/celldata/TextCellView.svelte

@@ -1,6 +1,19 @@
 <script lang="ts">
+  import _ from 'lodash';
+
   export let selection;
   export let wrap;
 </script>
 
-<textarea class="flex1" {wrap} readonly value={selection.map(cell => cell.value).join('\n')} />
+<textarea
+  class="flex1"
+  {wrap}
+  readonly
+  value={selection
+    .map(cell => {
+      const { value } = cell;
+      if (_.isPlainObject(value) || _.isArray(value)) return JSON.stringify(value, undefined, 2);
+      return cell.value;
+    })
+    .join('\n')}
+/>

packages/web/src/datagrid/DataGridCell.svelte

@@ -100,7 +100,7 @@
     {:else if value.type == 'Buffer' && _.isArray(value.data)}
       <span class="null">({value.data.length} bytes)</span>
     {:else if _.isPlainObject(value)}
-      <span class="null">(JSON)</span>
+      <span class="null" title={JSON.stringify(value, undefined, 2)}>(JSON)</span>
     {:else if _.isArray(value)}
       <span class="null">[{value.length} items]</span>
     {:else}

packages/web/src/datagrid/DataGridCore.svelte

@@ -161,6 +161,13 @@
     if (allRowCount == null) return 'Loading row count...';
     return `Rows: ${allRowCount.toLocaleString()}`;
   }
+
+  function getCopiedValue(value) {
+    if (value === null) return '(NULL)';
+    if (value === undefined) return '(NoField)';
+    if (_.isPlainObject(value) || _.isArray(value)) return JSON.stringify(value);
+    return value;
+  }
 </script>
 
 <script lang="ts">
@@ -329,7 +336,7 @@
       if (!rowData) return '';
       const line = colIndexes
         .map(col => realColumnUniqueNames[col])
-        .map(col => (rowData[col] == null ? '(NULL)' : rowData[col]))
+        .map(col => getCopiedValue(rowData[col]))
         .join('\t');
       return line;
     });

packages/web/src/datagrid/InplaceEditor.svelte

@@ -1,7 +1,15 @@
+<script lang="ts" context="module">
+  function getEditedValue(value) {
+    if (_.isPlainObject(value) || _.isArray(value)) return JSON.stringify(value);
+    return value;
+  }
+</script>
+
 <script lang="ts">
   import keycodes from '../utility/keycodes';
   import { onMount } from 'svelte';
   import createRef from '../utility/createRef';
+  import _ from 'lodash';
 
   export let inplaceEditorState;
   export let dispatchInsplaceEditor;
@@ -54,7 +62,7 @@
   }
 
   onMount(() => {
-    domEditor.value = inplaceEditorState.text || cellValue;
+    domEditor.value = inplaceEditorState.text || getEditedValue(cellValue);
     domEditor.focus();
     if (inplaceEditorState.selectAll) {
       domEditor.select();