multiline cell editor #378 #371 #359

packages/web/src/modals/EditCellDataModal.svelte

@@ -1,9 +1,10 @@
-<script>
+<script lang="ts">
   import { onMount } from 'svelte';
 
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
   import FormProvider from '../forms/FormProvider.svelte';
   import AceEditor from '../query/AceEditor.svelte';
+  import keycodes from '../utility/keycodes';
 
   import ModalBase from './ModalBase.svelte';
   import { closeCurrentModal } from './modalTools';
@@ -13,9 +14,18 @@
 
   let editor;
 
+  let textValue = value?.toString() || '';
+
   onMount(() => {
     editor.getEditor().focus();
   });
+
+  function handleKeyDown(ev) {
+    if (ev.keyCode == keycodes.enter && ev.ctrlKey) {
+      onSave(textValue);
+      closeCurrentModal();
+    }
+  }
 </script>
 
 <FormProvider>
@@ -23,18 +33,18 @@
     <div slot="header">Edit cell value</div>
 
     <div class="editor">
-      <AceEditor bind:value bind:this={editor} />
+      <AceEditor bind:value={textValue} bind:this={editor} onKeyDown={handleKeyDown} />
     </div>
 
     <div slot="footer">
       <FormStyledButton
-        value="Save"
+        value="OK"
         on:click={() => {
-          onSave(value);
+          onSave(textValue);
           closeCurrentModal();
         }}
       />
-      <FormStyledButton type="button" value="Close" on:click={closeCurrentModal} />
+      <FormStyledButton type="button" value="Cancel" on:click={closeCurrentModal} />
     </div>
   </ModalBase>
 </FormProvider>