From 223a25f8d97ed4c188b3f851ae5c0adcbfb252b4 Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Fri, 14 Feb 2025 13:41:08 +1300 Subject: [PATCH 01/10] WIP --- demo/src/App.tsx | 2 +- demo/src/_imports.ts | 4 ++-- src/CollectionNode.tsx | 3 ++- src/ValueNodeWrapper.tsx | 20 ++++++++++++++++---- src/contexts/TreeStateProvider.tsx | 13 ++++++++++++- 5 files changed, 33 insertions(+), 9 deletions(-) diff --git a/demo/src/App.tsx b/demo/src/App.tsx index 6fd60a17..38d6be35 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -383,7 +383,7 @@ function App() { : false } restrictEdit={restrictEdit} - // restrictEdit={(nodeData) => !(typeof nodeData.value === 'string')} + // restrictEdit={(nodeData) => typeof nodeData.value === 'object'} restrictDelete={restrictDelete} restrictAdd={restrictAdd} restrictTypeSelection={dataDefinition?.restrictTypeSelection} diff --git a/demo/src/_imports.ts b/demo/src/_imports.ts index 295d8b6f..ccb43158 100644 --- a/demo/src/_imports.ts +++ b/demo/src/_imports.ts @@ -3,10 +3,10 @@ */ /* Installed package */ -export * from 'json-edit-react' +// export * from 'json-edit-react' /* Local src */ -// export * from './json-edit-react/src' +export * from './json-edit-react/src' /* Compiled local package */ // export * from './package/build' diff --git a/src/CollectionNode.tsx b/src/CollectionNode.tsx index b29af099..3081e59c 100644 --- a/src/CollectionNode.tsx +++ b/src/CollectionNode.tsx @@ -93,8 +93,9 @@ export const CollectionNode: React.FC = (props) => { const hasBeenOpened = useRef(!startCollapsed) useEffect(() => { + console.log('Change', data) setStringifiedValue(jsonStringify(data)) - if (isEditing) setCurrentlyEditingElement(null) + // if (isEditing) setCurrentlyEditingElement(null) }, [data]) useEffect(() => { diff --git a/src/ValueNodeWrapper.tsx b/src/ValueNodeWrapper.tsx index af6c2337..b4072f95 100644 --- a/src/ValueNodeWrapper.tsx +++ b/src/ValueNodeWrapper.tsx @@ -53,6 +53,8 @@ export const ValueNodeWrapper: React.FC = (props) => { setPreviouslyEditedElement, tabDirection, setTabDirection, + previousValue, + setPreviousValue, } = useTreeState() const [value, setValue] = useState( // Bad things happen when you put a function into useState @@ -176,6 +178,7 @@ export const ValueNodeWrapper: React.FC = (props) => { const handleEdit = () => { setCurrentlyEditingElement(null) + setPreviousValue(null) let newValue: JsonData switch (dataType) { case 'object': @@ -200,7 +203,12 @@ export const ValueNodeWrapper: React.FC = (props) => { const handleCancel = () => { setCurrentlyEditingElement(null) + if (previousValue !== null) { + onEdit(previousValue, path) + return + } setValue(data) + setPreviousValue(null) setDataType(getDataType(data, customNodeData)) } @@ -274,7 +282,7 @@ export const ValueNodeWrapper: React.FC = (props) => { ) : ( // Need to re-fetch data type to make sure it's one of the "core" ones // when fetching a non-custom component - getInputComponent(data, inputProps) + getInputComponent(dataType, inputProps) ) return ( @@ -350,7 +358,12 @@ export const ValueNodeWrapper: React.FC = (props) => { showEditButtons && ( setCurrentlyEditingElement(path, handleCancel) : undefined + canEdit + ? () => { + setPreviousValue(value) + setCurrentlyEditingElement(path, handleCancel) + } + : undefined } handleDelete={canDelete ? handleDelete : undefined} enableClipboard={enableClipboard} @@ -402,8 +415,7 @@ const getDataType = (value: unknown, customNodeData?: CustomNodeData) => { return 'invalid' } -const getInputComponent = (data: JsonData, inputProps: InputProps) => { - const dataType = getDataType(data) +const getInputComponent = (dataType: string, inputProps: InputProps) => { const { value } = inputProps switch (dataType) { case 'string': diff --git a/src/contexts/TreeStateProvider.tsx b/src/contexts/TreeStateProvider.tsx index 0fd4472b..a665b58c 100644 --- a/src/contexts/TreeStateProvider.tsx +++ b/src/contexts/TreeStateProvider.tsx @@ -8,7 +8,7 @@ */ import React, { createContext, useContext, useRef, useState } from 'react' -import { type TabDirection, type CollectionKey } from '../types' +import { type TabDirection, type CollectionKey, JsonData } from '../types' import { toPathString } from '../helpers' interface CollapseAllState { @@ -37,6 +37,8 @@ interface TreeStateContext { setDragSource: (newState: DragSource) => void tabDirection: TabDirection setTabDirection: (dir: TabDirection) => void + previousValue: JsonData | null + setPreviousValue: (value: JsonData | null) => void } const initialContext: TreeStateContext = { collapseState: null, @@ -51,6 +53,8 @@ const initialContext: TreeStateContext = { setDragSource: () => {}, tabDirection: 'next', setTabDirection: () => {}, + previousValue: null, + setPreviousValue: () => {}, } const TreeStateProviderContext = createContext(initialContext) @@ -58,6 +62,11 @@ const TreeStateProviderContext = createContext(initialContext) export const TreeStateProvider = ({ children }: { children: React.ReactNode }) => { const [collapseState, setCollapseState] = useState(null) const [currentlyEditingElement, setCurrentlyEditingElement] = useState(null) + + // This value holds the "previous" value when user changes type. Because + // changing data type causes a proper data update, cancelling afterwards + // doesn't revert to the previous type. This value allows us to do that. + const [previousValue, setPreviousValue] = useState(null) const [dragSource, setDragSource] = useState({ path: null, pathString: null, @@ -130,6 +139,8 @@ export const TreeStateProvider = ({ children }: { children: React.ReactNode }) = setTabDirection: (dir: TabDirection) => { tabDirection.current = dir }, + previousValue, + setPreviousValue, // Drag-n-drop dragSource, setDragSource, From 9fab91f0db698637779351819d39bba24d3b9aee Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Wed, 26 Feb 2025 23:02:37 +1300 Subject: [PATCH 02/10] Try using "shouldUpdateUndo" --- demo/src/App.tsx | 15 ++++++++--- demo/src/demoData/dataDefinitions.tsx | 2 +- src/CollectionNode.tsx | 1 - src/JsonEditor.tsx | 38 ++++++++++++++++++--------- src/ValueNodeWrapper.tsx | 7 +++-- src/hooks/useData.ts | 11 +++++--- 6 files changed, 49 insertions(+), 25 deletions(-) diff --git a/demo/src/App.tsx b/demo/src/App.tsx index 8037e8b4..f231506d 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, lazy, Suspense } from 'react' +import React, { useEffect, useRef, lazy, Suspense, useCallback } from 'react' import { useSearch, useLocation } from 'wouter' import JSON5 from 'json5' import 'react-datepicker/dist/react-datepicker.css' @@ -119,12 +119,18 @@ function App() { const [ { present: data, past, future }, - { set: setData, reset, undo: undoData, redo: redoData, canUndo, canRedo }, - ] = useUndo(selectedDataSet === 'editTheme' ? defaultTheme : dataDefinition.data) + { set, reset, undo: undoData, redo: redoData, canUndo, canRedo }, + ] = useUndo(selectedDataSet === 'editTheme' ? defaultTheme : dataDefinition.data, { + useCheckpoints: true, + }) // Provides a named version of these methods (i.e undo.name = "undo") const undo = () => undoData() const redo = () => redoData() + console.log('Past', past) + + const setData = useCallback((value: any, noUndo: boolean = false) => set(value, !noUndo), [set]) + useEffect(() => { if (selectedDataSet === 'liveData' && !loading && liveData) reset(liveData) }, [loading, liveData, reset, selectedDataSet]) @@ -384,7 +390,7 @@ function App() { } // viewOnly restrictEdit={restrictEdit} - // restrictEdit={(nodeData) => typeof nodeData.value === 'object'} + // restrictEdit={(nodeData) => !(typeof nodeData.value === 'string')} restrictDelete={restrictDelete} restrictAdd={restrictAdd} restrictTypeSelection={dataDefinition?.restrictTypeSelection} @@ -435,6 +441,7 @@ function App() { // ]} onChange={dataDefinition?.onChange ?? undefined} jsonParse={JSON5.parse} + // undo={undo} // keyboardControls={{ // cancel: 'Tab', // confirm: { key: 'Enter', modifier: 'Meta' }, diff --git a/demo/src/demoData/dataDefinitions.tsx b/demo/src/demoData/dataDefinitions.tsx index cdc2a604..e4e9aa4f 100644 --- a/demo/src/demoData/dataDefinitions.tsx +++ b/demo/src/demoData/dataDefinitions.tsx @@ -89,7 +89,7 @@ export const demoDataDefinitions: Record = { ), rootName: 'data', - collapse: 2, + collapse: 1, data: data.intro, customNodeDefinitions: [dateNodeDefinition], // restrictEdit: ({ key }) => key === 'number', diff --git a/src/CollectionNode.tsx b/src/CollectionNode.tsx index a164b83d..2c0857d9 100644 --- a/src/CollectionNode.tsx +++ b/src/CollectionNode.tsx @@ -97,7 +97,6 @@ export const CollectionNode: React.FC = (props) => { const { isEditing, isEditingKey, isArray, canEditKey } = derivedValues useEffect(() => { - console.log('Change', data) setStringifiedValue(jsonStringify(data)) // if (isEditing) setCurrentlyEditingElement(null) }, [data]) diff --git a/src/JsonEditor.tsx b/src/JsonEditor.tsx index 26ed5d19..8a1cb1ed 100644 --- a/src/JsonEditor.tsx +++ b/src/JsonEditor.tsx @@ -109,11 +109,18 @@ const Editor: React.FC = ({ // Common method for handling data update. It runs the updated data through // provided "onUpdate" function, then updates data state or returns error // information accordingly - const handleEdit = async (updateMethod: UpdateFunction, input: UpdateFunctionProps) => { + const handleEdit = async ( + updateMethod: UpdateFunction, + input: UpdateFunctionProps, + shouldUpdateUndo: boolean = true + ) => { const result = await updateMethod(input) + // const shouldUpdateUndo = typeof input.newValue === typeof input.currentValue + if (result === true || result === undefined) { - setData(input.newData) + console.log('Setting', input.newValue, shouldUpdateUndo) + setData(input.newData, !shouldUpdateUndo) return } @@ -128,23 +135,28 @@ const Editor: React.FC = ({ setData(resultValue) } - const onEdit: InternalUpdateFunction = async (value, path) => { + const onEdit: InternalUpdateFunction = async (value, path, shouldUpdateUndo: boolean = true) => { const { currentData, newData, currentValue, newValue } = updateDataObject( data, path, value, 'update' ) - if (currentValue === newValue) return - - return await handleEdit(srcEdit, { - currentData, - newData, - currentValue, - newValue, - name: path.slice(-1)[0], - path, - }) + console.log('EDIT', value, shouldUpdateUndo) + if (currentValue === newValue && !shouldUpdateUndo) return + + return await handleEdit( + srcEdit, + { + currentData, + newData, + currentValue, + newValue, + name: path.slice(-1)[0], + path, + }, + shouldUpdateUndo + ) } const onDelete: InternalUpdateFunction = async (value, path) => { diff --git a/src/ValueNodeWrapper.tsx b/src/ValueNodeWrapper.tsx index ef15bffc..8b071e3d 100644 --- a/src/ValueNodeWrapper.tsx +++ b/src/ValueNodeWrapper.tsx @@ -167,7 +167,8 @@ export const ValueNodeWrapper: React.FC = (props) => { // that won't match the custom node condition any more customNodeData?.CustomNode ? translate('DEFAULT_STRING', nodeData) : undefined ) - onEdit(newValue, path).then((error) => { + console.log('Change data type', newValue) + onEdit(newValue, path, false).then((error) => { if (error) { onError({ code: 'UPDATE_ERROR', message: error }, newValue as JsonData) setCurrentlyEditingElement(null) @@ -196,15 +197,17 @@ export const ValueNodeWrapper: React.FC = (props) => { default: newValue = value } + console.log('Normal edit', newValue) onEdit(newValue, path).then((error) => { if (error) onError({ code: 'UPDATE_ERROR', message: error }, newValue) }) } const handleCancel = () => { + console.log('previousValue', previousValue) setCurrentlyEditingElement(null) if (previousValue !== null) { - onEdit(previousValue, path) + onEdit(previousValue, path, false) return } setValue(data) diff --git a/src/hooks/useData.ts b/src/hooks/useData.ts index df7d7afa..ea796a45 100644 --- a/src/hooks/useData.ts +++ b/src/hooks/useData.ts @@ -6,7 +6,7 @@ import { useCallback, useEffect, useState } from 'react' interface UseDataProps { - setData?: (data: T) => void + setData?: (data: T, shouldUpdateUndo?: boolean) => void data: T } @@ -14,8 +14,8 @@ export const useData = ({ setData, data }: UseDataProps) => { const [localData, setLocalData] = useState(setData ? undefined : data) const setDataMethod = useCallback( - (data: T) => { - if (setData) setData(data) + (data: T, shouldUpdateUndo?: boolean) => { + if (setData) setData(data, shouldUpdateUndo) else setLocalData(data) }, [setData] @@ -25,5 +25,8 @@ export const useData = ({ setData, data }: UseDataProps) => { if (!setData) setLocalData(data) }, [data]) - return [setData ? data : localData, setDataMethod] as [T, (data: T) => void] + return [setData ? data : localData, setDataMethod] as [ + T, + (data: T, shouldUpdateUndo?: boolean) => void + ] } From 05d1fc550018a37145a5683ac301aafe20a1521f Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Sat, 1 Mar 2025 11:28:15 +1300 Subject: [PATCH 03/10] Revert attempt to handle undo --- src/JsonEditor.tsx | 39 ++++++++++++++------------------------- src/ValueNodeWrapper.tsx | 4 ++-- src/hooks/useData.ts | 11 ++++------- 3 files changed, 20 insertions(+), 34 deletions(-) diff --git a/src/JsonEditor.tsx b/src/JsonEditor.tsx index 8a1cb1ed..511c092b 100644 --- a/src/JsonEditor.tsx +++ b/src/JsonEditor.tsx @@ -109,18 +109,12 @@ const Editor: React.FC = ({ // Common method for handling data update. It runs the updated data through // provided "onUpdate" function, then updates data state or returns error // information accordingly - const handleEdit = async ( - updateMethod: UpdateFunction, - input: UpdateFunctionProps, - shouldUpdateUndo: boolean = true - ) => { + const handleEdit = async (updateMethod: UpdateFunction, input: UpdateFunctionProps) => { const result = await updateMethod(input) - // const shouldUpdateUndo = typeof input.newValue === typeof input.currentValue - if (result === true || result === undefined) { - console.log('Setting', input.newValue, shouldUpdateUndo) - setData(input.newData, !shouldUpdateUndo) + console.log('Setting', input.newValue) + setData(input.newData) return } @@ -135,28 +129,23 @@ const Editor: React.FC = ({ setData(resultValue) } - const onEdit: InternalUpdateFunction = async (value, path, shouldUpdateUndo: boolean = true) => { + const onEdit: InternalUpdateFunction = async (value, path) => { const { currentData, newData, currentValue, newValue } = updateDataObject( data, path, value, 'update' ) - console.log('EDIT', value, shouldUpdateUndo) - if (currentValue === newValue && !shouldUpdateUndo) return - - return await handleEdit( - srcEdit, - { - currentData, - newData, - currentValue, - newValue, - name: path.slice(-1)[0], - path, - }, - shouldUpdateUndo - ) + if (currentValue === newValue) return + + return await handleEdit(srcEdit, { + currentData, + newData, + currentValue, + newValue, + name: path.slice(-1)[0], + path, + }) } const onDelete: InternalUpdateFunction = async (value, path) => { diff --git a/src/ValueNodeWrapper.tsx b/src/ValueNodeWrapper.tsx index 8b071e3d..3616076f 100644 --- a/src/ValueNodeWrapper.tsx +++ b/src/ValueNodeWrapper.tsx @@ -168,7 +168,7 @@ export const ValueNodeWrapper: React.FC = (props) => { customNodeData?.CustomNode ? translate('DEFAULT_STRING', nodeData) : undefined ) console.log('Change data type', newValue) - onEdit(newValue, path, false).then((error) => { + onEdit(newValue, path).then((error) => { if (error) { onError({ code: 'UPDATE_ERROR', message: error }, newValue as JsonData) setCurrentlyEditingElement(null) @@ -207,7 +207,7 @@ export const ValueNodeWrapper: React.FC = (props) => { console.log('previousValue', previousValue) setCurrentlyEditingElement(null) if (previousValue !== null) { - onEdit(previousValue, path, false) + onEdit(previousValue, path) return } setValue(data) diff --git a/src/hooks/useData.ts b/src/hooks/useData.ts index ea796a45..df7d7afa 100644 --- a/src/hooks/useData.ts +++ b/src/hooks/useData.ts @@ -6,7 +6,7 @@ import { useCallback, useEffect, useState } from 'react' interface UseDataProps { - setData?: (data: T, shouldUpdateUndo?: boolean) => void + setData?: (data: T) => void data: T } @@ -14,8 +14,8 @@ export const useData = ({ setData, data }: UseDataProps) => { const [localData, setLocalData] = useState(setData ? undefined : data) const setDataMethod = useCallback( - (data: T, shouldUpdateUndo?: boolean) => { - if (setData) setData(data, shouldUpdateUndo) + (data: T) => { + if (setData) setData(data) else setLocalData(data) }, [setData] @@ -25,8 +25,5 @@ export const useData = ({ setData, data }: UseDataProps) => { if (!setData) setLocalData(data) }, [data]) - return [setData ? data : localData, setDataMethod] as [ - T, - (data: T, shouldUpdateUndo?: boolean) => void - ] + return [setData ? data : localData, setDataMethod] as [T, (data: T) => void] } From 3f0b200df67e25262dc8da6da5f499bcf5fbcba7 Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Sat, 1 Mar 2025 11:29:14 +1300 Subject: [PATCH 04/10] Update JsonEditor.tsx --- src/JsonEditor.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/JsonEditor.tsx b/src/JsonEditor.tsx index 511c092b..26ed5d19 100644 --- a/src/JsonEditor.tsx +++ b/src/JsonEditor.tsx @@ -113,7 +113,6 @@ const Editor: React.FC = ({ const result = await updateMethod(input) if (result === true || result === undefined) { - console.log('Setting', input.newValue) setData(input.newData) return } From 7cefe11e71ec8352c1089a4dc825d3f2c1f2e350 Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Sat, 1 Mar 2025 14:14:58 +1300 Subject: [PATCH 05/10] Handle revert for Collection nodes --- src/CollectionNode.tsx | 9 +++++++++ src/ValueNodeWrapper.tsx | 2 -- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/CollectionNode.tsx b/src/CollectionNode.tsx index 2c0857d9..39d9d619 100644 --- a/src/CollectionNode.tsx +++ b/src/CollectionNode.tsx @@ -29,6 +29,8 @@ export const CollectionNode: React.FC = (props) => { currentlyEditingElement, setCurrentlyEditingElement, areChildrenBeingEdited, + previousValue, + setPreviousValue, } = useTreeState() const { mainContainerRef, @@ -188,6 +190,7 @@ export const CollectionNode: React.FC = (props) => { try { const value = jsonParse(stringifiedValue) setCurrentlyEditingElement(null) + setPreviousValue(null) setError(null) if (JSON.stringify(value) === JSON.stringify(data)) return onEdit(value, path).then((error) => { @@ -235,8 +238,13 @@ export const CollectionNode: React.FC = (props) => { const handleCancel = () => { setCurrentlyEditingElement(null) + if (previousValue !== null) { + onEdit(previousValue, path) + return + } setError(null) setStringifiedValue(jsonStringify(data)) + setPreviousValue(null) } const showLabel = showArrayIndices || !isArray @@ -413,6 +421,7 @@ export const CollectionNode: React.FC = (props) => { canEdit ? () => { hasBeenOpened.current = true + setPreviousValue(null) setCurrentlyEditingElement(path) } : undefined diff --git a/src/ValueNodeWrapper.tsx b/src/ValueNodeWrapper.tsx index 3616076f..c0659518 100644 --- a/src/ValueNodeWrapper.tsx +++ b/src/ValueNodeWrapper.tsx @@ -167,7 +167,6 @@ export const ValueNodeWrapper: React.FC = (props) => { // that won't match the custom node condition any more customNodeData?.CustomNode ? translate('DEFAULT_STRING', nodeData) : undefined ) - console.log('Change data type', newValue) onEdit(newValue, path).then((error) => { if (error) { onError({ code: 'UPDATE_ERROR', message: error }, newValue as JsonData) @@ -204,7 +203,6 @@ export const ValueNodeWrapper: React.FC = (props) => { } const handleCancel = () => { - console.log('previousValue', previousValue) setCurrentlyEditingElement(null) if (previousValue !== null) { onEdit(previousValue, path) From 005ee759ba51002b86ff6a3b5132d9b0ef7a2a61 Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Sat, 1 Mar 2025 14:22:17 +1300 Subject: [PATCH 06/10] Update App.tsx --- demo/src/App.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/demo/src/App.tsx b/demo/src/App.tsx index f231506d..65c5fc68 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -127,8 +127,6 @@ function App() { const undo = () => undoData() const redo = () => redoData() - console.log('Past', past) - const setData = useCallback((value: any, noUndo: boolean = false) => set(value, !noUndo), [set]) useEffect(() => { From 4f18102fcd2d4bcd1db62644092aa5c5f32a5604 Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Sat, 1 Mar 2025 15:13:24 +1300 Subject: [PATCH 07/10] Revert App --- demo/src/App.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/demo/src/App.tsx b/demo/src/App.tsx index 65c5fc68..7bff00dc 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -119,16 +119,12 @@ function App() { const [ { present: data, past, future }, - { set, reset, undo: undoData, redo: redoData, canUndo, canRedo }, - ] = useUndo(selectedDataSet === 'editTheme' ? defaultTheme : dataDefinition.data, { - useCheckpoints: true, - }) + { set: setData, reset, undo: undoData, redo: redoData, canUndo, canRedo }, + ] = useUndo(selectedDataSet === 'editTheme' ? defaultTheme : dataDefinition.data) // Provides a named version of these methods (i.e undo.name = "undo") const undo = () => undoData() const redo = () => redoData() - const setData = useCallback((value: any, noUndo: boolean = false) => set(value, !noUndo), [set]) - useEffect(() => { if (selectedDataSet === 'liveData' && !loading && liveData) reset(liveData) }, [loading, liveData, reset, selectedDataSet]) @@ -439,7 +435,6 @@ function App() { // ]} onChange={dataDefinition?.onChange ?? undefined} jsonParse={JSON5.parse} - // undo={undo} // keyboardControls={{ // cancel: 'Tab', // confirm: { key: 'Enter', modifier: 'Meta' }, From 83c86dd65d441e9c3f099bb0e892267715b3117f Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Sat, 1 Mar 2025 15:14:26 +1300 Subject: [PATCH 08/10] Revert some other stuff --- demo/src/App.tsx | 2 +- demo/src/demoData/dataDefinitions.tsx | 2 +- src/ValueNodeWrapper.tsx | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/demo/src/App.tsx b/demo/src/App.tsx index 7bff00dc..18356b40 100644 --- a/demo/src/App.tsx +++ b/demo/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useRef, lazy, Suspense, useCallback } from 'react' +import React, { useEffect, useRef, lazy, Suspense } from 'react' import { useSearch, useLocation } from 'wouter' import JSON5 from 'json5' import 'react-datepicker/dist/react-datepicker.css' diff --git a/demo/src/demoData/dataDefinitions.tsx b/demo/src/demoData/dataDefinitions.tsx index e4e9aa4f..cdc2a604 100644 --- a/demo/src/demoData/dataDefinitions.tsx +++ b/demo/src/demoData/dataDefinitions.tsx @@ -89,7 +89,7 @@ export const demoDataDefinitions: Record = { ), rootName: 'data', - collapse: 1, + collapse: 2, data: data.intro, customNodeDefinitions: [dateNodeDefinition], // restrictEdit: ({ key }) => key === 'number', diff --git a/src/ValueNodeWrapper.tsx b/src/ValueNodeWrapper.tsx index c0659518..ef15bffc 100644 --- a/src/ValueNodeWrapper.tsx +++ b/src/ValueNodeWrapper.tsx @@ -196,7 +196,6 @@ export const ValueNodeWrapper: React.FC = (props) => { default: newValue = value } - console.log('Normal edit', newValue) onEdit(newValue, path).then((error) => { if (error) onError({ code: 'UPDATE_ERROR', message: error }, newValue) }) From 4cf31fc11d75ed99a950972f3dc79bc5b664977d Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Sat, 1 Mar 2025 15:17:03 +1300 Subject: [PATCH 09/10] Update TreeStateProvider.tsx --- src/contexts/TreeStateProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/contexts/TreeStateProvider.tsx b/src/contexts/TreeStateProvider.tsx index a665b58c..89e0d59b 100644 --- a/src/contexts/TreeStateProvider.tsx +++ b/src/contexts/TreeStateProvider.tsx @@ -8,7 +8,7 @@ */ import React, { createContext, useContext, useRef, useState } from 'react' -import { type TabDirection, type CollectionKey, JsonData } from '../types' +import { type TabDirection, type CollectionKey, type JsonData } from '../types' import { toPathString } from '../helpers' interface CollapseAllState { From 671b54ddeb21480c1ce896079230c470eb2442d1 Mon Sep 17 00:00:00 2001 From: Carl Smith <5456533+CarlosNZ@users.noreply.github.com> Date: Sat, 8 Mar 2025 22:54:35 +1300 Subject: [PATCH 10/10] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2f728460..df12773b 100644 --- a/README.md +++ b/README.md @@ -854,6 +854,7 @@ This component is heavily inspired by [react-json-view](https://github.com/mac-s - **1.24.0**: - Option to access (and render) the original node (and its key) within a [Custom Node](#custom-nodes) ([#180](https://github.com/CarlosNZ/json-edit-react/issues/180)) + - Cancelling edit after changing type correctly reverts to previous value ([#122](https://github.com/CarlosNZ/json-edit-react/issues/122)) - **1.23.1**: Fix bug where you could collapse a node by clicking inside a "new key" input field [#175](https://github.com/CarlosNZ/json-edit-react/issues/175) - **1.23.0**: - Add `viewOnly` prop as a shorthand for restricting all editing [#168](https://github.com/CarlosNZ/json-edit-react/issues/168)