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

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