Add support to sync node expand/collapse operations across editors

[himanshu520]

• Added onExpand callback option to be specified while creating JSONEditor, that is invoked when a node is expanded/collapsed.
• Added JSONEditor.expand API that allows to expand/collapse JSON node by specifying its path.

The above two additions would allow library users to sync node expand/collapse operations when having multiple editors (#1217).

[josdejong]

Thanks @himanshu520 , your PR looks good at first sight. I'll review it soon.

[josdejong]

The PR looks good, exactly what we're looking for 👌. Thanks for the clear description in the docs.

I made one inline comment, and I have one more question: can you add a new, minimal example in the /examples section demonstrating two editors which keep their expanded state in sync? Is useful for users and also for you and me manually testing whether all works as expected.

[josdejong]

Thinking aloud here: it may be nice to change the signature

JSONEditor.expand(path, isExpand, recursive) 

to

JSONEditor.expand({path, isExpand, recursive}) 

Then you can pass the options even more easily from one editor to an other:

const editor1 = new JSONEditor(container1, { onExpand: (props) => editor2.expand(props) })
const editor2 = new JSONEditor(container2, { onExpand: (props) => editor1.expand(props) })

What do you think?

[himanshu520]

Thanks for reviewing. I have updated the PR as per suggestions, please have a look again.

PS - I would like to add that though editor.expand() and options.onExpand() helps to sync node expanded/collapsed states across editors, my main motive was to use it to show JSON diff using two editors where common/modified nodes are always aligned (shown side-by-side, as most text-based-diff tools). However, I later realised that it is not possible to handle the scenario when there are additonal/missing nodes - then the alignment of common/modified nodes cannot be maintained. I guess, I would have to write something from scratch 😐️ but hope that the editor.expand() and options.onExpand() APIs would be useful for others 😀️

[josdejong]

Thanks @himanshu520 , looks good 👌 .

You're right, expanding only works if a path exists. I'll add a remark on top in the example explaining this.

[josdejong]

Published now in v9.8.0