multiline json editing

packages/web/src/modals/EditCellDataModal.svelte

@@ -1,3 +1,18 @@
+<script lang="ts" context="module">
+  export function shouldOpenMultilineDialog(value) {
+    if (_.isString(value)) {
+      if (value.includes('\n')) {
+        return true;
+      }
+      const parsed = safeJsonParse(value);
+      if (parsed && (_.isPlainObject(parsed) || _.isArray(parsed))) {
+        return true;
+      }
+    }
+    return false;
+  }
+</script>
+
 <script lang="ts">
   import { onMount } from 'svelte';
 
@@ -5,19 +20,26 @@
   import FormProvider from '../forms/FormProvider.svelte';
   import AceEditor from '../query/AceEditor.svelte';
   import keycodes from '../utility/keycodes';
+  import _ from 'lodash';
 
   import ModalBase from './ModalBase.svelte';
-  import { closeCurrentModal } from './modalTools';
+  import { closeCurrentModal, showModal } from './modalTools';
+  import SelectField from '../forms/SelectField.svelte';
+  import { safeJsonParse } from 'dbgate-tools';
+  import { showSnackbarError } from '../utility/snackbar';
+  import ErrorMessageModal from './ErrorMessageModal.svelte';
 
   export let onSave;
   export let value;
 
   let editor;
+  let syntaxMode = 'text';
 
   let textValue = value?.toString() || '';
 
   onMount(() => {
     editor.getEditor().focus();
+    if (safeJsonParse(textValue)) syntaxMode = 'json';
   });
 
   function handleKeyDown(ev) {
@@ -26,6 +48,15 @@
       closeCurrentModal();
     }
   }
+
+  function handleFormatJson() {
+    const parsed = safeJsonParse(textValue);
+    if (parsed) {
+      textValue = JSON.stringify(parsed, null, 2);
+    } else {
+      showModal(ErrorMessageModal, { message: 'Not valid JSON' });
+    }
+  }
 </script>
 
 <FormProvider>
@@ -33,18 +64,36 @@
     <div slot="header">Edit cell value</div>
 
     <div class="editor">
-      <AceEditor bind:value={textValue} bind:this={editor} onKeyDown={handleKeyDown} />
+      <AceEditor bind:value={textValue} bind:this={editor} onKeyDown={handleKeyDown} mode={syntaxMode} />
     </div>
 
-    <div slot="footer">
-      <FormStyledButton
-        value="OK"
-        on:click={() => {
-          onSave(textValue);
-          closeCurrentModal();
-        }}
-      />
-      <FormStyledButton type="button" value="Cancel" on:click={closeCurrentModal} />
+    <div slot="footer" class="footer">
+      <div>
+        <FormStyledButton
+          value="OK"
+          title="Ctrl+Enter"
+          on:click={() => {
+            onSave(textValue);
+            closeCurrentModal();
+          }}
+        />
+        <FormStyledButton type="button" value="Cancel" on:click={closeCurrentModal} />
+      </div>
+
+      <div>
+        <FormStyledButton type="button" value="Format JSON" on:click={handleFormatJson} />
+
+        Code highlighting:
+        <SelectField
+          isNative
+          value={syntaxMode}
+          on:change={e => (syntaxMode = e.detail)}
+          options={[
+            { value: 'text', label: 'None (raw text)' },
+            { value: 'json', label: 'JSON' },
+          ]}
+        />
+      </div>
     </div>
   </ModalBase>
 </FormProvider>
@@ -55,4 +104,9 @@
     height: 30vh;
     width: 40vw;
   }
+
+  .footer {
+    display: flex;
+    justify-content: space-between;
+  }
 </style>