ctx menu refactor

packages/web/src/jsonview/CollectionJsonRow.svelte

@@ -20,10 +20,10 @@
   import EditJsonModal from '../modals/EditJsonModal.svelte';
   import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
   import { showModal } from '../modals/modalTools';
+  import { getContextMenu, registerMenu } from '../utility/contextMenu';
 
   export let rowIndex;
   export let grider;
-  export let commonMenu;
 
   $: rowData = grider.getRowData(rowIndex);
   $: rowStatus = grider.getRowStatus(rowIndex);
@@ -32,20 +32,16 @@
     editJsonRowDocument(grider, rowIndex);
   }
 
-  function createMenu() {
-    return [
-      ...commonMenu,
-      { text: 'Edit document', onClick: handleEditDocument },
-      { text: 'Delete document', onClick: () => grider.deleteRow(rowIndex) },
-      { text: 'Revert row changes', onClick: () => grider.revertRowChanges(rowIndex) },
-    ];
-  }
+  registerMenu([
+    { text: 'Edit document', onClick: handleEditDocument },
+    { text: 'Delete document', onClick: () => grider.deleteRow(rowIndex) },
+    { text: 'Revert row changes', onClick: () => grider.revertRowChanges(rowIndex) },
+  ]);
 </script>
 
 <JSONTree
   value={rowData}
   labelOverride="({rowIndex + 1}) "
-  menu={createMenu}
   isModified={rowStatus.status == 'updated'}
   isInserted={rowStatus.status == 'inserted'}
   isDeleted={rowStatus.status == 'deleted'}

packages/web/src/jsonview/CollectionJsonView.svelte

@@ -27,7 +27,7 @@
   import Pager from '../elements/Pager.svelte';
 
   import { getActiveTabId } from '../stores';
-  import contextMenu from '../utility/contextMenu';
+  import contextMenu, { getContextMenu, registerMenu } from '../utility/contextMenu';
   import CollectionJsonRow from './CollectionJsonRow.svelte';
 
   export let conid;
@@ -81,20 +81,21 @@
     invalidateCommands();
   });
 
-  const commonMenu = [{ command: 'dataJson.switchToTable' }];
+  registerMenu({ command: 'dataJson.switchToTable' });
+  const menu = getContextMenu();
 
   $: grider = new ChangeSetGrider(loadedRows, changeSetState, dispatchChangeSet, display);
 
-  $: console.log('GRIDER', grider);
+  // $: console.log('GRIDER', grider);
 </script>
 
-<div class="flexcol flex1" use:contextMenu={commonMenu}>
+<div class="flexcol flex1" use:contextMenu={menu}>
   <div class="toolbar">
     <Pager bind:skip bind:limit on:load={() => display.reload()} />
   </div>
   <div class="json">
     {#each _.range(0, grider.rowCount) as rowIndex}
-      <CollectionJsonRow {grider} {rowIndex} {commonMenu} />
+      <CollectionJsonRow {grider} {rowIndex} />
     {/each}
   </div>
 </div>