JSONEditor can now be used as a controlled component

[josdejong]

@vankop I think you will like the latest release of the jsoneditor, v5.20.1, which allows using it as a controlled component in a framework like React. There are two new methods update(json) and updateText for this, and two new callback methods onChangeText and onChangeJSON (checkout the docs for details).

You can find two react examples in the examples folder for inspiration:

https://github.com/josdejong/jsoneditor/tree/master/examples/react_demo https://github.com/josdejong/jsoneditor/tree/master/examples/react_advanced_demo

It would be great if you could update jsoneditor-react to utilize this new functionality, and I would love to hear your feedback on whether it all works smooth or if you encounter issues.

[vankop]

@josdejong Cool features, I will find time to update package as soon as possible. Approximately on this weekend.

[vankop]

@josdejong I have tested new features. It works fine, but as I understand in code mode handler onChangeJSON doesn't work. Unfortunately, supporting only onChangeJSON breaks current functionality, because in current implementation it works with code mode too.

As I understand in code mode editor tracks is json valid or not, so looks like it is not a problem to support this mode as well. If it has some problems with it could you please describe them?

[josdejong]

@vankop you can still use the onChange() event, it's all backward compatible. The two new callbacks onChangeJSON(json) and onChangeText(text) may be more convenient since they directly pass the contents as argument, where as in onChange() you have to get the contents yourself.

The reason that onChangeJSON(json) is not available in text/code mode is that it is not always possible to parse text contents into a JSON object, for example when you're typing and are halfway something. It's the same reason why the following can throw an error:

onChange() {
  // editor.get() can throw an error when in code/text mode, you have to
  // wrap in a try/catch or use `editor.getText()` instead.
  const json = editor.get() 
}

See also docs: https://github.com/josdejong/jsoneditor/blob/master/docs/api.md

[dominictobias]

Awesome thanks @josdejong that component worked well, this one doesn't update when the value changes

[josdejong]

Not sure, should this issue be closed Ivan?

[OlegRyzhkov]

it's not ready, right?

[vankop]

@josdejong sorry for so late answer. Do you want to take a maintenance on this repo/package? We can move it to you or create organization and move this repo there. All other features/changes will be up to you.

[josdejong]

Thanks for the offer Ivan. I'm afraid though I don't have time left to maintain more libraries myself :(

[Jezternz]

For anyone else who does not have time to take a new repo under their belt, this was my work-around to get controlled mostly working with the current version:

import React, { useEffect, useRef } from 'react';
import { JsonEditor } from 'jsoneditor-react';

import 'jsoneditor-react/es/editor.min.css';

export const ControlledJsonEditor = ({ value, onChange }) => {
    const jsonEditorRef = useRef();
    useEffect(
        () => {
            const editor = jsonEditorRef && jsonEditorRef.current && jsonEditorRef.current.jsonEditor;
            if(editor && value){ editor.update(value); }
        },
        [jsonEditorRef, value]
    )

    return (    
        <JsonEditor
            ref={jsonEditorRef}
            value={value}
            onChange={onChange}
        />
    );
}

[anthonywebb]

@Jezternz thank you for this. I have an issue where when I try to type in a new value, with every keystroke the editor re-renders and I have to open and select the key I am trying to edit. Have you run into this?

[Jezternz]

@anthonywebb my project doesnt seem to have this problem.

Only hints I can think of that may help are I have the attribute history={true} and am using package versions: "jsoneditor": "^9.0.4", "jsoneditor-react": "^3.1.1"

[anthonywebb]

@Jezternz thanks for the tip, I updated to be closer to your config but still have this issue

[anthonywebb]

@Jezternz can you confirm if you are using mode="tree" mode="code" does not have an issue for me, just the tree mode

[Jezternz]

@anthonywebb this attribute I have left unset, so is in tree mode I believe, it may be worth creating the most basic case in an online example using eg https://codesandbox.io - I would try help and do this but am struggling for time right now.

[Jezternz]

Found some spare minutes. I can confirm in a basic scenario the keys stay open, so it must be something else in your project, I would try commenting areas of the code until you work out what it is.

My codesandbox is here, the ControlledJsonEditor component code which can be resused is here.

You will notice that you can modify the key-values in both the editor itself and the textarea below, and they tree will stay open as expected. Note: codesandbox did not correctly import the css, so the button icons are not rendering, so it is not obvious how to open the tree, however I have modified the background of the buttons to be gray so that you can see where they are.

Good luck!

[anthonywebb]

@Jezternz your example worked and needs to be promoted across the various tickets as the solution that works. As near as I can tell it is the only one that fully works properly.

[g-monroe]

For the people who are using typescript with their own typings. Here is the modified code/setup from @Jezternz. You can find the gist here.

[Jezternz]

I have also updated my own implementation to run entirely independently of jsoneditor-react (depends only on jsoneditor). Here: https://gist.github.com/Jezternz/fd2edd87f9b31c66eb9258d75afed600