#208 Call onEditEvent when starting and stopping "add key" UI (#210)

* Call `onEditEvent` when adding key
* Update ButtonPanels.tsx
* Update README.md
* Update OnEditEventFunction type signature
* Fix "path" when submitting key

Author: CarlosNZ

README.md

@@ -1121,11 +1121,14 @@ The `onEditEvent` callback is executed whenever the user starts or stops editing
 
 ```ts
 type OnEditEventFunction = 
-  (path: CollectionKey[] | null, isKey: boolean) => void
+  (path: (CollectionKey | null)[] | null, isKey: boolean) => void
 ```
 
 The `path` will be an array representing the path components when starting to edit, and `null` when ending the edit. The `isKey` indicates whether the edit is for the property `key` rather than `value`.
 
+> [!NOTE] 
+> After clicking the "Add key" button, the `path` in the `onEditEvent` callback will end with a `null` value, indicating that the final path where this key will end up is not yet known.
+
 The `onCollapse` callback is executed when user opens or collapses a node, and has the following signature:
 
 ```ts

demo/src/App.tsx

@@ -586,6 +586,7 @@ function App() {
                     : undefined
                 }
                 // collapseClickZones={['property', 'header']}
+                // onEditEvent={(...args) => console.log('onEditEvent', ...args)}
                 // onEditEvent={(path) => {
                 //   console.log(path)
                 //   setIsEditing(path ? true : false)

src/ButtonPanels.tsx

@@ -12,6 +12,7 @@ import {
   type CustomButtonDefinition,
   type KeyboardControlsFull,
   JsonData,
+  OnEditEventFunction,
 } from './types'
 import { getModifier } from './helpers'
 
@@ -36,6 +37,7 @@ interface EditButtonProps {
     // eslint-disable-next-line
     replacer?: (this: any, key: string, value: unknown) => string
   ) => string
+  onEditEvent?: OnEditEventFunction
   showIconTooltips: boolean
 }
 
@@ -53,6 +55,7 @@ export const EditButtons: React.FC<EditButtonProps> = ({
   editConfirmRef,
   getNewKeyOptions,
   jsonStringify,
+  onEditEvent,
   showIconTooltips,
 }) => {
   const { getStyles } = useTheme()
@@ -71,6 +74,12 @@ export const EditButtons: React.FC<EditButtonProps> = ({
   const hasKeyOptionsList = Array.isArray(addingKeyState)
 
   const updateAddingState = (active: boolean) => {
+    // Add 'null' to the path to indicate that the actual path of where the new
+    // key will go is not yet known.
+    // Also, "active" matches the second "isKey" parameter here, even though it
+    // describes a different thing.
+    if (onEditEvent) onEditEvent(active ? [...path, null] : null, active)
+
     if (!active) {
       setAddingKeyState(false)
       return

src/CollectionNode.tsx

@@ -47,6 +47,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
     collapseAnimationTime,
     onMove,
     enableClipboard,
+    onEditEvent,
     showIconTooltips,
     searchFilter,
     searchText,
@@ -433,6 +434,7 @@ export const CollectionNode: React.FC<CollectionNodeProps> = (props) => {
       getNewKeyOptions={getNewKeyOptions}
       editConfirmRef={editConfirmRef}
       jsonStringify={jsonStringify}
+      onEditEvent={onEditEvent}
       showIconTooltips={showIconTooltips}
     />
   )

src/JsonEditor.tsx

@@ -45,6 +45,7 @@ const Editor: React.FC<JsonEditorProps> = ({
   onAdd: srcAdd = onUpdate,
   onChange,
   onError,
+  onEditEvent,
   showErrorMessages = true,
   enableClipboard = true,
   indent = 2,
@@ -349,6 +350,7 @@ const Editor: React.FC<JsonEditorProps> = ({
     onAdd,
     onChange,
     onError,
+    onEditEvent,
     showErrorMessages,
     onMove,
     showCollectionCount,

src/contexts/TreeStateProvider.tsx

@@ -90,7 +90,8 @@ export const TreeStateProvider = ({ children, onEditEvent, onCollapse }: TreeSta
       cancelOp.current()
     }
     setCurrentlyEditingElement(pathString)
-    if (onEditEvent) onEditEvent(path, newCancelOrKey === 'key')
+    if (onEditEvent && (Array.isArray(path) || path === null))
+      onEditEvent(path, newCancelOrKey === 'key')
     cancelOp.current = typeof newCancelOrKey === 'function' ? newCancelOrKey : null
   }
 

src/types.ts

@@ -178,7 +178,7 @@ export type CompareFunction = (
 
 export type SortFunction = <T>(arr: T[], nodeMap: (input: T) => [string | number, unknown]) => void
 
-export type OnEditEventFunction = (path: CollectionKey[] | string | null, isKey: boolean) => void
+export type OnEditEventFunction = (path: (CollectionKey | null)[] | null, isKey: boolean) => void
 
 // Definition to externally set Collapse state -- also passed to OnCollapse
 // function
@@ -261,6 +261,7 @@ interface BaseNodeProps {
   showIconTooltips: boolean
   onMove: InternalMoveFunction
   enableClipboard: boolean | CopyFunction
+  onEditEvent?: OnEditEventFunction
   restrictEditFilter: FilterFunction
   restrictDeleteFilter: FilterFunction
   restrictAddFilter: FilterFunction