multiline cell editor #378 #371 #359

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>