diff --git a/README.md b/README.md index 363db66..b1ec74c 100644 --- a/README.md +++ b/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 diff --git a/demo/src/App.tsx b/demo/src/App.tsx index e102ae6..48c460f 100644 --- a/demo/src/App.tsx +++ b/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) diff --git a/src/ButtonPanels.tsx b/src/ButtonPanels.tsx index 29de5c7..48916ce 100644 --- a/src/ButtonPanels.tsx +++ b/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 = ({ editConfirmRef, getNewKeyOptions, jsonStringify, + onEditEvent, showIconTooltips, }) => { const { getStyles } = useTheme() @@ -71,6 +74,12 @@ export const EditButtons: React.FC = ({ 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 diff --git a/src/CollectionNode.tsx b/src/CollectionNode.tsx index be0362b..3083a0d 100644 --- a/src/CollectionNode.tsx +++ b/src/CollectionNode.tsx @@ -47,6 +47,7 @@ export const CollectionNode: React.FC = (props) => { collapseAnimationTime, onMove, enableClipboard, + onEditEvent, showIconTooltips, searchFilter, searchText, @@ -433,6 +434,7 @@ export const CollectionNode: React.FC = (props) => { getNewKeyOptions={getNewKeyOptions} editConfirmRef={editConfirmRef} jsonStringify={jsonStringify} + onEditEvent={onEditEvent} showIconTooltips={showIconTooltips} /> ) diff --git a/src/JsonEditor.tsx b/src/JsonEditor.tsx index 0f7f4c1..68bd73e 100644 --- a/src/JsonEditor.tsx +++ b/src/JsonEditor.tsx @@ -45,6 +45,7 @@ const Editor: React.FC = ({ onAdd: srcAdd = onUpdate, onChange, onError, + onEditEvent, showErrorMessages = true, enableClipboard = true, indent = 2, @@ -349,6 +350,7 @@ const Editor: React.FC = ({ onAdd, onChange, onError, + onEditEvent, showErrorMessages, onMove, showCollectionCount, diff --git a/src/contexts/TreeStateProvider.tsx b/src/contexts/TreeStateProvider.tsx index efcf2d8..736ce01 100644 --- a/src/contexts/TreeStateProvider.tsx +++ b/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 } diff --git a/src/types.ts b/src/types.ts index 2dd22a5..5ed8fdf 100644 --- a/src/types.ts +++ b/src/types.ts @@ -178,7 +178,7 @@ export type CompareFunction = ( export type SortFunction = (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