Configurable raw object editor control

Is your feature request related to a problem? Please describe Controls addon for objects displays json using react-editable-json-tree. It is set to not use raw editor by default. This causes a bit of a problem for automated cypress tests as it is easier to interact with simple textarea than with json tree component.

Describe the solution you’d like We would like to have configurable object editor through argTypes, something like: control: { type: 'object', useRaw: true }

Describe alternatives you’ve considered I didn’t found any alternative to this.

Are you able to assist to bring the feature to reality? maybe yes 😃

Additional context

[leepowelldev]

I’m seeing raw mode when the default value is and empty object. Would be great to have this configurable.

[tripolskypetr]

I think for now monkey-patch the html with auto-clicker script will be the simplest. If you want, you can use this project as a sample

const observer = new MutationObserver(() => {
    const expandButtons = [...document.querySelectorAll('button[type=button] > span')]
        .filter((el) => el.innerHTML === 'RAW')
        .map((el) => el.closest('button'));
    for (const button of expandButtons) {
        if (!button.classList.contains(EXPANDED_CLASS)) {
            button.classList.add(EXPANDED_CLASS);
            button.click();
        }
    }
});
observer.observe(document.body, {
    childList: true,
    subtree: true,
});

P.S. Check webpack config in config/main. After production build, the patch will be installed automatically