multiline cell editor #378 #371 #359

packages/web/src/datagrid/DataGridCell.svelte

@@ -51,14 +51,6 @@
 
   $: isJson = _.isPlainObject(value) && !(value?.type == 'Buffer' && _.isArray(value.data)) && !value.$oid;
   $: jsonParsedValue = isJsonLikeLongString(value) ? safeJsonParse(value) : null;
-
-  function shouldShowTextModalButton(col) {
-    const m = col?.dataType?.match(/.*char.*\(([^\)]+)\)/);
-    if (m && m[1]) {
-      return parseInt(m[1]) >= 200 || m[1]?.toUpperCase() == 'MAX';
-    }
-    return false;
-  }
 </script>
 
 <td
@@ -125,18 +117,6 @@
     />
   {/if}
 
-  {#if shouldShowTextModalButton(col)}
-    <ShowFormButton
-      icon="icon edit"
-      on:click={() => {
-        showModal(EditCellDataModal, {
-          value,
-          onSave: onSetValue,
-        });
-      }}
-    />
-  {/if}
-
   {#if isAutoFillMarker}
     <div class="autoFillMarker autofillHandleMarker" />
   {/if}

packages/web/src/datagrid/DataGridCore.svelte

@@ -1095,6 +1095,11 @@
     if (display.focusedColumns) display.focusColumns(null);
   }
 
+  function handleBlur() {
+    shiftDragStartCell = null;
+    dragStartCell = null;
+  }
+
   function showMultilineCellEditorConditional(cell) {
     if (!cell) return false;
     const rowData = grider.getRowData(cell[0]);
@@ -1655,6 +1660,7 @@
       }}
       on:paste={handlePaste}
       on:copy={copyToClipboard}
+      on:blur={handleBlur}
     />
     <table
       class="table"

packages/web/src/datagrid/DataGridRow.svelte

@@ -54,7 +54,7 @@
   <RowHeaderCell {rowIndex} onShowForm={onSetFormView ? () => onSetFormView(rowData, null) : null} />
   {#each visibleRealColumns as col (col.uniqueName)}
     {#if inplaceEditorState.cell && rowIndex == inplaceEditorState.cell[0] && col.colIndex == inplaceEditorState.cell[1]}
-      <td>
+      <td class='editor'>
         <InplaceEditor
           width={col.width}
           {inplaceEditorState}
@@ -99,6 +99,11 @@
   tr {
     background-color: var(--theme-bg-0);
   }
+
+  td.editor {
+    position: relative;
+  }
+
   tr:nth-child(6n + 3) {
     background-color: var(--theme-bg-1);
   }

packages/web/src/datagrid/InplaceEditor.svelte

@@ -9,11 +9,14 @@
 
 <script lang="ts">
   import keycodes from '../utility/keycodes';
-  import { onMount } from 'svelte';
+  import { onMount, tick } from 'svelte';
   import createRef from '../utility/createRef';
   import _ from 'lodash';
   import { arrayToHexString, parseCellValue, stringifyCellValue } from 'dbgate-tools';
   import { isCtrlOrCommandKey } from '../utility/common';
+  import ShowFormButton from '../formview/ShowFormButton.svelte';
+  import { showModal } from '../modals/modalTools';
+  import EditCellDataModal from '../modals/EditCellDataModal.svelte';
 
   export let inplaceEditorState;
   export let dispatchInsplaceEditor;
@@ -23,12 +26,15 @@
   export let fillParent = false;
 
   let domEditor;
+  let showEditorButton = true;
 
   const widthCopy = width;
 
   const isChangedRef = createRef(!!inplaceEditorState.text);
 
   function handleKeyDown(event) {
+    showEditorButton = false;
+
     switch (event.keyCode) {
       case keycodes.escape:
         isChangedRef.set(false);
@@ -81,18 +87,39 @@
       domEditor.select();
     }
   });
+
+  $: realWidth = widthCopy ? widthCopy - (showEditorButton ? 16 : 0) : undefined;
 </script>
 
 <input
   type="text"
-  on:change={() => isChangedRef.set(true)}
+  on:change={() => {
+    isChangedRef.set(true);
+    showEditorButton = false;
+  }}
   on:keydown={handleKeyDown}
   on:blur={handleBlur}
   bind:this={domEditor}
-  style={widthCopy ? `width:${widthCopy}px;min-width:${widthCopy}px;max-width:${widthCopy}px` : undefined}
+  style={widthCopy ? `width:${realWidth}px;min-width:${realWidth}px;max-width:${realWidth}px` : undefined}
   class:fillParent
+  class:showEditorButton
 />
 
+{#if showEditorButton}
+  <ShowFormButton
+    icon="icon edit"
+    on:click={() => {
+      isChangedRef.set(false);
+      dispatchInsplaceEditor({ type: 'close' });
+
+      showModal(EditCellDataModal, {
+        value: stringifyCellValue(cellValue),
+        onSave: onSetValue,
+      });
+    }}
+  />
+{/if}
+
 <style>
   input {
     border: 0px solid;
@@ -109,4 +136,8 @@
     bottom: 0;
     margin: auto;
   }
+
+  input.showEditorButton {
+    margin-right: 16px;
+  }
 </style>

packages/web/src/formview/FormView.svelte

@@ -173,6 +173,7 @@
   import { plusExpandIcon } from '../icons/expandIcons';
   import FontIcon from '../icons/FontIcon.svelte';
   import DictionaryLookupModal from '../modals/DictionaryLookupModal.svelte';
+  import EditCellDataModal from '../modals/EditCellDataModal.svelte';
   import { showModal } from '../modals/modalTools';
   import { apiCall } from '../utility/api';
 
@@ -295,7 +296,9 @@
     if (isDataCell(cell) && !_.isEqual(cell, $inplaceEditorState.cell) && _.isEqual(cell, currentCell)) {
       // @ts-ignore
       if (rowData) {
-        dispatchInsplaceEditor({ type: 'show', cell, selectAll: true });
+        if (!showMultilineCellEditorConditional(cell)) {
+          dispatchInsplaceEditor({ type: 'show', cell, selectAll: true });
+        }
       }
     } else if (!_.isEqual(cell, $inplaceEditorState.cell)) {
       // @ts-ignore
@@ -426,16 +429,32 @@
       }
     }
 
-    if (event.keyCode == keycodes.f2) {
+    if (event.keyCode == keycodes.f2 || event.keyCode == keycodes.enter) {
       // @ts-ignore
       if (rowData) {
-        dispatchInsplaceEditor({ type: 'show', cell: currentCell, selectAll: true });
+        if (!showMultilineCellEditorConditional(currentCell)) {
+          dispatchInsplaceEditor({ type: 'show', cell: currentCell, selectAll: true });
+        }
       }
     }
 
     handleCursorMove(event);
   }
 
+  function showMultilineCellEditorConditional(cell) {
+    if (!cell) return false;
+    const column = getCellColumn(cell);
+    const cellData = rowData[column.uniqueName];
+    if (_.isString(cellData) && cellData.includes('\n')) {
+      showModal(EditCellDataModal, {
+        value: cellData,
+        onSave: value => former.setCellValue(column.uniqueName, value),
+      });
+      return true;
+    }
+    return false;
+  }
+
   const scrollIntoView = cell => {
     const element = domCells[`${cell[0]},${cell[1]}`];
     if (element) element.scrollIntoView();

packages/web/src/formview/ShowFormButton.svelte

@@ -4,7 +4,12 @@
   export let icon = 'icon form';
 </script>
 
-<div on:click|stopPropagation class='showFormButtonMarker'>
+<div
+  on:click|stopPropagation|preventDefault
+  on:mousedown|stopPropagation|preventDefault
+  on:mouseup|stopPropagation|preventDefault
+  class="showFormButtonMarker"
+>
   <FontIcon {icon} />
 </div>
 

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>

packages/web/src/query/AceEditor.svelte

@@ -154,6 +154,7 @@
   export let menu = null;
   export let readOnly = false;
   export let splitterOptions = null;
+  export let onKeyDown = null;
 
   const tabVisible: any = getContext('tabVisible');
 
@@ -297,6 +298,7 @@
 
   const handleKeyDown = (data, hash, keyString, keyCode, event) => {
     if (event) handleCommandKeyDown(event);
+    if (onKeyDown && event) onKeyDown(event);
   };
 
   function changedQueryParts() {