expand all fields in tree mode in ReactJS

[nitzcard]

Hi, I try to expend all the fields in tree mode in react right from the start, I saw there is an expand function: refEditor.current?.expand((path) => true);

I try to do it in the useEffect when initting the library but it doesn't work, do you have an idea how it can be achieved?

[nitzcard]

https://github.com/josdejong/svelte-jsoneditor/pull/267

[josdejong]

Thanks for your PR @nitzcard . I'm not entirely sure I understand the original issue: at the start, the document contents is expanded by default. See for example this basic React example: https://codesandbox.io/s/svelte-jsoneditor-react-59wxz

[nitzcard]

At my internal system it doesn't start expanded all the times, I think it has to do with getDefaultExpand()

[josdejong]

Can you share a minimal example demonstrating your issue?

The only case where I know it happens is if you initially load an empty document, and later update it with actual contents. The editor leaves the expanded state as is when updating a document. When I load a new document, I normally create a new editor with clean state, so it expands the document contents like it should.

[nitzcard]

Could be that's what happens at my form infra internally, when the data loads after. Will check and return to you.

If that is the case, how can I enforce expanded at the first time the actual data loads?

[josdejong]

If that is the case, how can I enforce expanded at the first time the actual data loads?

Either create a new editor with the document, or use .set(...) initially instead of .update(...).

[nitzcard]

Because my real content may come not at init time, I still need to set the editor to be at expanded state right from the start, so I need to intervene in getDefaultExpand() (that it will return true even if no content is available). I tried to achieve a workaround with smth like this, but it's not working:

So I believe my pr can help with this

[josdejong]

I think what should work is:

• do not pass content via refEditor.current.updateProps, remove it from the props before passing
• when loading the document initially, use refEditor.current.set(content) (that will reset the state of the editor)
• when loading the document consecutively, use refEditor.current.update(content) (that will keep the state of the editor)

Alternatively, you can create the editor only after you have the document and can directly pass it during initialization of the editor.

[nitzcard]

1. Waiting for the editor to load when the content loads is not doable for me, because sometimes there is no content and I would not know that (and I want the instruction message when text: ''), so I need a different solution.
2. The set/update thing you suggested sounds to me like a hack, I will try it nevertheless, but I advocate for a more coherent solution as I suggested.
3. I think giving the control about expand/collapse is good, what if user wants the documents to starts collapsed/expanded regardless the content?

[josdejong]

One way or another, you will need to tell the editor when to keep the expanded state or reset it. Only you know the difference between loading a new document versus updating the existing document. The startExpanded option in the PR you propose does not solve that issue. What could be useful is introducing an option expand, but that would still not address your issue.

You will need to let the editor know when to reset the state of the editor by either (1) creating a new editor, (2) use the method .set() instead of .update(), or (3) invoke the method .expand() after loading your document. I think the current API is sufficient for that.

On a side note: I was thinking that maybe your code in https://github.com/josdejong/svelte-jsoneditor/issues/266#issuecomment-1531148769 does not work because you call .expand without awaiting updateProps to rerender the app, you would have to call it like:

await refEditor.current.updateProps(props)
//...
if (...) {
  await refEditor.current.expand(...)
}

[josdejong]

Good to mention here: we're thinking about exposing the internal state of the editor so you can control that via props, see https://github.com/josdejong/svelte-jsoneditor/issues/163#issuecomment-1465892695. That would introduce another option to change/reset the expanded state whenever you want.

[nitzcard]

using await inside useEffect is discouraged, but it's not working. I think my only solution right now is how you suggested: to use "set" only on initial content loading and after that use "update", I'll update if works good :)

[nitzcard]

ok so implementing it for me via set is still very hacky with a lot of edge cases, I would still be glad for an option to enforce the state of the editor to be expanded even without content, via prop of startExpanded or other option, without altering editor state and ruining the expanded state

[josdejong]

I'm still not sure whether I correctly understand what you're trying to do.

Can you create a minimal CodeSandbox example demonstrating the issue? Can be based on https://codesandbox.io/s/svelte-jsoneditor-react-59wxz

[josdejong]

Any more information on this @nitzcard ? If not relevant anymore I'll close this issue.