carlosnz / json-edit-react Goto Github PK

Hi,

Firstly, thank you for implementing the drag and drop feature!

I have a question, is it possible to validate the data within the editor by using a JSONSchema or anything similar?
I have need of this in my project, so I'd like to know if this is available!

Getting this upon saving edited value

Uncaught (in promise) TypeError: Object(...) is not a function
    le index.esm.js:1
    onEdit index.esm.js:1
    v index.esm.js:1
    v index.esm.js:1
    onEdit index.esm.js:1
    L index.esm.js:1
    React 14
    unstable_runWithPriority scheduler.development.js:468
    React 4

the implementation

<JsonEditor
                   data={{ test: 1, test2: 2, test3: 3 }}
                    // enableClipboard={true}
                    // restrictEdit={false}
                    // restrictDelete={true}
                    // restrictAdd={true}
                    // restrictTypeSelection={true}
                    onEdit={(data)=>{
                             console.log(TAG,"OnEdit...");
                    }}
                    onUpdate={(data) => {
                           console.log(TAG, "OnUpdate :", data);
                    }}
 />

Rather than this:

Something like this would look better:

>hoursSchedule: [ 24 items
  0, 1, 2, 3, 4, 5, 6, 
  7, 8, 9, 10, 11, 12,
  13, 14, 15, 16, 17,
  18, 19, 20, 21, 22,
  23
]

Would affect both the collection layout and the JSON.stringify() display when editing, so not trivial to do nicely.

Similarly for "small" arrays, it would look nicer if they were all on one line.

Currently, if you pass a custom node, it can no longer be edited using json-edit-react (you would have to integrate your own editor). We should make this an option, and when editing the contents will just be interpreted normally (i.e. as a string, boolean, etc.)

Describe the bug
Empty string is a valid object key but is not allowed nor parsed correctly as input
Try to add a key to a object named "" (the empty string)
Or provide such an object value as input in code (and then editting that value produces an error)

Expected behavior
Empty string should work like every other valid key

Screenshots
Not required

Online demo
Not required

Minor issue, but it would be useful to fix it to prevent the browser from throwing errors.
The keys are rendered using a <label/> element, which has a for property, but the value doesn't specify the matching ID; causing warnings.

Screenshots

Keep it simple, but should be able to pass a localised strings object to the component so English strings can be replaced.

Hello,

I'd like to be able to re-order properties. Drag and drop one above the other.
Is this possible?

They should all share the same, even if not used -- it's simpler that way

I'd like to have a comprehensive automated test suite for this project. However, I don't really know how to go about it. If anyone has experience creating test cases for UI elements and would like to contribute, that'd be really handy.

It would need to be able to confirm the state of the UI elements on screen as a result of certain events.

when using onUpdate in typescript, it always shows this error.

And.... also specify custom text (so we can display the operator for Fig Tree)

For this example json, lets edit d1->text1 value and put some very big string into it:

{
  "d1": {
    "text1": "This is text1",
    "text2": "This is text1"
  },
  "d2": {
    "name": "name-of-something",
    "args": {
      "some_key": "some-val"
    }
  },
  "next": {
    "kkk": "v-v-v"
  }
}

Expected behavior

• All elements below will be shifted no matter length of the string
• Other elements will not interfere while string in edit mode

Demo from https://carlosnz.github.io/json-edit-react/

This will be done via external validation library being called by onUpdate function -- so it can basically already be done, just need to tidy a couple of small things

This is mainly just so I can build a UI for FigTreeEvaluator without having to start from scratch.

Idea is for this component to accept an additional prop, customNodes, which is an array of:

{
  condition: FilterFunction,
  component: React.Component
}

Then for any field in the json-edit-react data object, if the "condition" criteria is met, we return the "component", which handles its own internal logic for how to render and process the data field.

Accept another "Filter function" prop defining which elements should be hidden from display.

Currently, when the "keySort" prop is enabled, the data is displayed alphabetically by key, or by a compareFunction.

However, this is just for display and doesn't change the underlying data. It might be useful to have a commitSort option that actually modifies the data object according to the sort rules.

Keen to get some input as to what would be useful/expected in this regard.

I actually don't want to add any additional UI to the component itself, but I think it would be good to accept a "search" prop and then filter accordingly. I'd even handle the debouncing, so the external Search input can be pretty simple.

Describe the bug

When clicking the "Edit" icon for a collection that is in a collapsed state, the Edit input is not visible, and there is no way to bring it back.

Probably need to do a check for collapsed state and open it up before switching to edit mode

"peerDependencies": {
"@types/react": "^18.2.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
if we are using js, is it required to insall types and docer build is failing due to dependency and react version expections

Expected behavior
it should work for react version of 16 or greater

Screenshots

Originally posted by @michelcrypt4d4mus in #46 (comment)

ok so now i tried to use your package in my app and got an error: Property 'getComputedStyle' doesn't exist. any ideas? seems like it might be a dependency issue (maybe related to why it wouldn't install easily) but i'm not a javascript developer really...

This is how i'm using it in a file called current_daemon_status.js. I'm certain that what's in serviceStatus is a valid data structure (i can JSON.stringify() it just fine):

export default function CurrentDaemonStatus() {
    <...snipped API retrieval code...>
    return <JsonEditor data={serviceStatus} />;
}

Here is the App.js file:

export default function App() {
    return (
        <Provider store={store}>
            <View style={styles.container}>
                <ImageBackground source={BACKGROUND_IMAGE} imageStyle={styles.bg_image} resizeMode="cover">
                    <CurrentDaemonStatus style={styles.overlay_text}/>
                </ImageBackground>

                <StatusBar style="auto" />
            </View>
        </Provider>
    );
};

my iOS simulator shows this:

STDERR shows:

 ERROR  ReferenceError: Property 'getComputedStyle' doesn't exist

This error is located at:
    in CollectionNode (created by Editor)
    in div (created by Editor)
    in Editor
    in CollapseProvider
    in ThemeProvider
    in Unknown (at current_daemon_status.js:32)
    in CurrentDaemonStatus (at App.js:20)
    in RCTView (at View.js:116)
    in View (at ImageBackground.js:82)
    in ImageBackground (at App.js:17)
    in RCTView (at View.js:116)
    in View (at App.js:15)
    in Provider (at App.js:14)
    in App (at withDevTools.ios.js:29)
    in withDevTools(App) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes

As discussed starting from this comment

Hi, I can't seem to get the Add button to work on properties that are arrays. I can edit the whole array using the edit button and adding the values in the text editor there. But when I press the Add button on any array property to add to it, I'm getting an error.
json-edit-react.js?t=1707483740439&v=3e66a0aa:18 Uncaught (in promise) Error: Invalid property path: test.arr[3] Couldn't access "3" in {"test":{"arr":[1,0,0]}} at r (json-edit-react.js?t=1707483740439&v=3e66a0aa:18:11) at l (json-edit-react.js?t=1707483740439&v=3e66a0aa:74:28) at i (json-edit-react.js?t=1707483740439&v=3e66a0aa:43:95) at i (json-edit-react.js?t=1707483740439&v=3e66a0aa:57:5) at i (json-edit-react.js?t=1707483740439&v=3e66a0aa:57:5) at o (json-edit-react.js?t=1707483740439&v=3e66a0aa:31:57) at updateDataObject (json-edit-react.js?t=1707483740439&v=3e66a0aa:674:40) at json-edit-react.js?t=1707483740439&v=3e66a0aa:661:62 at Generator.next (<anonymous>) at json-edit-react.js?t=1707483740439&v=3e66a0aa:288:67

It's trying to access "3" which is exactly what I'm trying to add, so it doesn't exist yet.
The adding with plus/add icon works on objects, but not on arrays. Is it some kind of bug, or am I doing something wrong? It doesn't work even in the simplest case like the one I'm showing though.

Currently you have to just delete one, then make a new one with the same value. Direct editing of keys might be useful.

And maybe export some utility methods (e.g. truncate())

Describe the bug
In the 1.11.0 version I was able to hide the rootName, because I don't need for aesthetic reasons. I wanted to make the editor as clean as possible.
With the 1.11.7 version it's no longer possible. I'am forced to use some rootName, otherwise an <empty string> string will be displayed, which is not so beautiful.

Expected behavior
Empty rootName prop should hide the rootName as in prev versions.

Screenshots
v1.11.0

v1.11.7

My code:

<JsonEditor
  data={JSON.parse(configProperty.metaValue as string)}
  rootName=""
  enableClipboard={false}
  indent={2}
  restrictEdit={true}
  restrictDelete={true}
  restrictAdd={true}
  showCollectionCount={false}
  maxWidth="100%"
  className="form-control rounded-0 mb-3"
/>

Hi,

When adding an object, the closing parentheses are indented. Thanks for your contribution!

Describe the bug
When a string value is a JWT token or something similar

Expected behavior
The string is breaking out of the Parent container. It should really wrap to a new line.

Potential Fix
I added a small css hack which solve the issue but should probably be added to the default css.

.jer-value-string {
  overflow-wrap: anywhere;
}

Great work though buddy!!

Should also pass child nodes through

Rather than the standard 0-based numbering

Maybe other states, too. For example, a "disabled" state at which time it can't be edited.

Collapse prop not working properly to collapse/expand object at given level

So, i am aware that if i ctrl/alt + click i will expand all the object but i do not want to do that, i want to put an external button to do the same using a useState variable , i should be able to control that expand/collapse behavior using the collapse prop but when i do the following below, the arrow will render as open but won't show the data, is there a way to actually achieve this collapse/expand feature by using an external button and not the ctrl/alt + click ?

Would like to extend it to have more potential control (e.g. being able to specify font weights and styles for each token), but without over-complicating the system.

As per this comment and subsequent responses

Also sort:

• should be able to return values from async update function